From e1bc560abcd290e67675a1b76c180b2e19218c9d Mon Sep 17 00:00:00 2001 From: gpbl Date: Fri, 13 Oct 2023 05:47:37 -0500 Subject: [PATCH] Add `--rdp-selected-color` CSS variable --- src/style.css | 15 ++++++++------- website/docs/basics/styling.md | 21 ++++++++++----------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/style.css b/src/style.css index b480203ed9..704560b661 100644 --- a/src/style.css +++ b/src/style.css @@ -1,12 +1,13 @@ .rdp { - --rdp-cell-size: 40px; - --rdp-caption-font-size: 18px; - --rdp-accent-color: #0000ff; - --rdp-background-color: #e7edff; - --rdp-accent-color-dark: #3003e1; - --rdp-background-color-dark: #180270; + --rdp-cell-size: 40px; /* Size of the day cells. */ + --rdp-caption-font-size: 18px; /* Font size for the caption labels. */ + --rdp-accent-color: #0000ff; /* Accent color for the background of selected days. */ + --rdp-background-color: #e7edff; /* Background color for the hovered/focused elements. */ + --rdp-accent-color-dark: #3003e1; /* Accent color for the background of selected days (to use in dark-mode). */ + --rdp-background-color-dark: #180270; /* Background color for the hovered/focused elements (to use in dark-mode). */ --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */ --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */ + --rdp-selected-color: #fff; /* Color of selected day text */ margin: 1em; } @@ -270,7 +271,7 @@ .rdp-day_selected, .rdp-day_selected:focus-visible, .rdp-day_selected:hover { - color: white; + color: var(--rdp-selected-color); opacity: 1; background-color: var(--rdp-accent-color); } diff --git a/website/docs/basics/styling.md b/website/docs/basics/styling.md index 1ef18f3198..ce1b694343 100644 --- a/website/docs/basics/styling.md +++ b/website/docs/basics/styling.md @@ -7,20 +7,19 @@ DayPicker comes with for a minimal, lightweight appearance: import `react-day-pi import 'react-day-picker/dist/style.css'; ``` -This will add the [DayPicker stylesheet](https://github.com/gpbl/react-day-picker/blob/main/src/style.css#L29) into your app. The stylesheet includes some CSS global variables, to override colors and sizes: +This will add the [DayPicker stylesheet](https://github.com/gpbl/react-day-picker/blob/main/src/style.css) into your app. The stylesheet includes some CSS global variables, to override colors and sizes: ```css .rdp { - --rdp-cell-size: 40px; - --rdp-accent-color: #0000ff; - --rdp-background-color: #e7edff; - /* Switch to dark colors for dark themes */ - --rdp-accent-color-dark: #3003e1; - --rdp-background-color-dark: #180270; - /* Outline border for focused elements */ - --rdp-outline: 2px solid var(--rdp-accent-color); - /* Outline border for focused and selected elements */ - --rdp-outline-selected: 2px solid rgba(0, 0, 0, 0.75); + --rdp-cell-size: 40px; /* Size of the day cells. */ + --rdp-caption-font-size: 18px; /* Font size for the caption labels. */ + --rdp-accent-color: #0000ff; /* Accent color for the background of selected days. */ + --rdp-background-color: #e7edff; /* Background color for the hovered/focused elements. */ + --rdp-accent-color-dark: #3003e1; /* Accent color for the background of selected days (to use in dark-mode). */ + --rdp-background-color-dark: #180270; /* Background color for the hovered/focused elements (to use in dark-mode). */ + --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */ + --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */ + --rdp-selected-color: #fff; /* Color of selected day text */ } ```