fix: css var pollution, gradient in rtl

src/style.css

@@ -1,6 +1,6 @@
 /* Variables declaration */
 /* prettier-ignore */
-:root {
+.rdp-calendar {
   --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
   --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */
   --rdp-font-family: system-ui; /* The font family used by the calendar. Note that `inherit`does not work here. */
@@ -36,10 +36,10 @@
   --rdp-range_middle-font: normal medium var(--rdp-font-family); /* The font for days in the middle of a range. */
 
   --rdp-range_start-color: white; /* The color of the range text. */
-  --rdp-range_start-background: linear-gradient(90deg, transparent 50%, var(--rdp-range_middle-background-color) 50%); /* Used for the background of the start of the selected range. */
+  --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. */
   --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */
 
-  --rdp-range_end-background: linear-gradient(90deg, var(--rdp-range_middle-background-color) 50%, transparent 50%); /* Used for the background of the end of the selected range. */
+  --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%); /* Used for the background of the end of the selected range. */
   --rdp-range_end-color: white;/* The color of the range text. */
   --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */
 
@@ -54,9 +54,13 @@
   --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
   --rdp-weekday-padding: 0.25rem 0.75rem; /* THe padding of the weekday. */
   --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
+
+  --rdp-gradient-direction: 90deg;
 }
 
-/* prettier-ignore: false */
+.rdp-calendar[dir="rtl"] {
+  --rdp-gradient-direction: -90deg;
+}
 
 /* Root of the component. */
 .rdp-calendar {

src/style.module.css

@@ -1,6 +1,6 @@
 /* Variables declaration */
 /* prettier-ignore */
-:root {
+.calendar {
   --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
   --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */
   --rdp-font-family: system-ui; /* The font family used by the calendar. Note that `inherit`does not work here. */
@@ -36,10 +36,10 @@
   --rdp-range_middle-font: normal medium var(--rdp-font-family); /* The font for days in the middle of a range. */
 
   --rdp-range_start-color: white; /* The color of the range text. */
-  --rdp-range_start-background: linear-gradient(90deg, transparent 50%, var(--rdp-range_middle-background-color) 50%); /* Used for the background of the start of the selected range. */
+  --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. */
   --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */
 
-  --rdp-range_end-background: linear-gradient(90deg, var(--rdp-range_middle-background-color) 50%, transparent 50%); /* Used for the background of the end of the selected range. */
+  --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%); /* Used for the background of the end of the selected range. */
   --rdp-range_end-color: white;/* The color of the range text. */
   --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */
 
@@ -54,9 +54,12 @@
   --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
   --rdp-weekday-padding: 0.25rem 0.75rem; /* THe padding of the weekday. */
   --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
+  --rdp-gradient-direction: 90deg;
 }
 
-/* prettier-ignore: false */
+.calendar[dir="rtl"] {
+  --rdp-gradient-direction: -90deg;
+}
 
 /* Root of the component. */
 .calendar {

website/docs/using-daypicker/styling.mdx

@@ -38,11 +38,15 @@ If you are not using a bundler, you can copy the CSS file to your project. See [
 
 ### CSS Variables
 
-The default styles use CSS variables that can be overridden to customize the appearance of the calendar. Define the CSS variables in your app's CSS file, after importing the DayPicker CSS file:
+The default styles use CSS variables that can be overridden to customize the appearance of the calendar.
+
+Define the CSS variables in your app's CSS file, after importing the DayPicker CSS file, under the `.rdp-calendar` class.
 
 ```css title="./app/global.css"
-:root {
+.rdp-calendar {
   --rdp-accent-color: indigo; /* Change the accent color to indigo. */
+  --rdp-accent-background-color: #f0f0f0; /* Change the accent background color. */
+  /* Add more CSS variables here. */
 }
 ```
 
@@ -96,10 +100,10 @@ The following table lists the CSS variables used by DayPicker:
 To toggle between dark and light appearance, override the accent color with the color to use in the dark mode.
 
 ```css
-:root {
+.rdp-calendar {
   --rdp-accent-color: blue; /* Use blue as the accent color. */
 }
-[data-theme="dark"] {
+[data-theme="dark"] .rdp-calendar {
   --rdp-accent-color: yellow; /* Use yellow as the accent color in dark mode. */
 }
 ```

website/src/css/custom.css

@@ -41,8 +41,6 @@
   --ifm-alert-border-left-width: 2px;
 
   --ifm-menu-link-sublist-icon: url(/img/chevron.svg);
-
-  --rdp-accent-color: var(--ifm-color-primary);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -66,11 +64,13 @@ html[data-theme="dark"] {
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 
   --ifm-toc-border-color: transparent !important;
+}
 
+.rdp-calendar {
   --rdp-accent-color: var(--ifm-color-primary);
 }
 
-html[data-theme="dark"] {
+html[data-theme="dark"] .rdp-calendar {
   --rdp-accent-color: var(--ifm-color-primary);
   --rdp-accent-background-color: #073845;
   --rdp-range_end-color: black;