feat: add rdp-range_middle-color CSS variable

gpbl · Jul 13, 2024 · f8e835a · f8e835a
1 parent d462152
commit f8e835a
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git a/src/style.css b/src/style.css
@@ -32,6 +32,8 @@
 
   --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
   --rdp-range_middle-font: normal medium var(--rdp-font-family); /* The font for days in the middle of a range. */
+  --rdp-range_middle-foreground-color: white; /* The font for days in the middle of a range. */
+  --rdp-range_middle-color: inherit;/* The color of the range text. */
 
   --rdp-range_start-color: white; /* The color of the range text. */
   --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%); /* Used for the background of the start of the selected range. */
@@ -315,6 +317,7 @@
   border-color: transparent;
   border: unset;
   border-radius: unset;
+  color: var(--rdp-range_middle-color);
 }
 
 .rdp-range_end {

diff --git a/src/style.module.css b/src/style.module.css
@@ -32,6 +32,8 @@
 
   --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
   --rdp-range_middle-font: normal medium var(--rdp-font-family); /* The font for days in the middle of a range. */
+  --rdp-range_middle-foreground-color: white; /* The font for days in the middle of a range. */
+  --rdp-range_middle-color: inherit;/* The color of the range text. */
 
   --rdp-range_start-color: white; /* The color of the range text. */
   --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%); /* Used for the background of the start of the selected range. */
@@ -315,6 +317,7 @@
   border-color: transparent;
   border: unset;
   border-radius: unset;
+  color: var(--rdp-range_middle-color);
 }
 
 .range_end {
@@ -332,5 +335,6 @@
 }
 
 .day_button:focus-visible {
+  /* outline: 2px solid var(--rdp-accent-color); */
   /* You may want to add focus-outlines here. */
 }
diff --git a/website/docs/docs/styling.mdx b/website/docs/docs/styling.mdx
@@ -79,6 +79,7 @@ The following table lists the CSS variables used by DayPicker inside the `.rdp-r
 | `--rdp-nav-height`                        | The height of the navigation bar.                                             |
 | `--rdp-range_middle-background-color`     | The color of the background for days in the middle of a range.                |
 | `--rdp-range_middle-font`                 | The font for days in the middle of a range.                                   |
+| `-- `                | The color of the text for days in the middle of a range.                      |
 | `--rdp-range_start-color`                 | The color of the range text at the start of the range.                        |
 | `--rdp-range_start-background`            | Used for the background of the start of the selected range.                   |
 | `--rdp-range_start-date-background-color` | The background color of the date at the start of the selected range.          |

diff --git a/website/src/pages/playground.tsx b/website/src/pages/playground.tsx
@@ -55,8 +55,9 @@ export default function Playground() {
   const [utc, setUtc] = React.useState(false);
 
   const [accentColor, setAccentColor] = React.useState<string>();
-  const [backgroundAccentColor, setAccentBackgroundColor] =
+  const [backgroundAccentColor, setBackgroundAccountColor] =
     React.useState<string>();
+  const [rangeMiddleColor, setrangeMiddleColor] = React.useState<string>();
 
   const Component = utc ? DayPickerUtc : DayPicker;
   const formattedProps = `<DayPicker${toJSX({ ...props, locale: undefined })} />`;
@@ -69,6 +70,7 @@ export default function Playground() {
           [data-theme="dark"] .rdp-root {
             ${accentColor ? `--rdp-accent-color: ${accentColor} !important` : ""};
             ${backgroundAccentColor ? `--rdp-accent-background-color: ${backgroundAccentColor} !important` : ""};
+            ${rangeMiddleColor ? `--rdp-range_middle-color: ${rangeMiddleColor} !important` : ""};
           }
         `}
       </style>
@@ -406,15 +408,26 @@ export default function Playground() {
                 </label>
               ) : null}
               {props.mode === "range" && (
-                <label>
-                  Range Color:
-                  <input
-                    value={backgroundAccentColor ?? ""}
-                    type="color"
-                    name="numberOfMonths"
-                    onChange={(e) => setAccentBackgroundColor(e.target.value)}
-                  />
-                </label>
+                <>
+                  <label>
+                    Range Background:
+                    <input
+                      value={backgroundAccentColor ?? ""}
+                      type="color"
+                      onChange={(e) =>
+                        setBackgroundAccountColor(e.target.value)
+                      }
+                    />
+                  </label>
+                  <label>
+                    Range Foreground:
+                    <input
+                      value={rangeMiddleColor ?? ""}
+                      type="color"
+                      onChange={(e) => setrangeMiddleColor(e.target.value)}
+                    />
+                  </label>
+                </>
               )}
             </div>
           </fieldset>