Skip to content

Commit

Permalink
fix(style): remove font setting from default style (#2573)
Browse files Browse the repository at this point in the history
  • Loading branch information
@gpbl
gpbl authored Nov 2, 2024
1 parent 7d419f5 commit 1e0be26
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 71 deletions.
24 changes: 10 additions & 14 deletions src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@
.rdp-root {
--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. */

--rdp-day-font: inherit; /* The font used for the day cells. */
--rdp-day-height: 2.75rem; /* The height of the day cells. */
--rdp-day-width: 2.75rem; /* The width of the day cells. */

Expand All @@ -15,14 +13,12 @@
--rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */

--rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
--rdp-selected-font: bold large var(--rdp-font-family); /* The font of the selected days. */
--rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
--rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
--rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */

--rdp-dropdown-gap: 0.5rem;/* The gap between the dropdowns used in the month captons. */

--rdp-month_caption-font: bold larger var(--rdp-font-family); /* The font of the month caption. */
--rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */

--rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
Expand All @@ -31,8 +27,7 @@
--rdp-nav-height: 2.75rem; /* The height of the navigation bar. */

--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-foreground-color: white; /* The foregraound color 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. */
Expand All @@ -45,13 +40,12 @@

--rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
--rdp-week_number-border: 2px solid transparent; /* The border of the week number. */
--rdp-week_number-font: 400 small var(--rdp-font-family); /* The font of the week number cells. */

--rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
--rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
--rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
--rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */

--rdp-weekday-font: 500 smaller var(--rdp-font-family); /* The font of the weekday. */
--rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
--rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
--rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
Expand All @@ -76,7 +70,6 @@
.rdp-day {
width: var(--rdp-day-width);
height: var(--rdp-day-height);
font: var(--rdp-day-font);
text-align: center;
}

Expand Down Expand Up @@ -192,7 +185,8 @@
display: flex;
align-content: center;
height: var(--rdp-nav-height);
font: var(--rdp-month_caption-font);
font-weight: bold;
font-size: large;
}

.rdp-months {
Expand Down Expand Up @@ -221,14 +215,16 @@
.rdp-weekday {
opacity: var(--rdp-weekday-opacity);
padding: var(--rdp-weekday-padding);
font: var(--rdp-weekday-font);
font-weight: 500;
font-size: smaller;
text-align: var(--rdp-weekday-text-align);
text-transform: var(--rdp-weekday-text-transform);
}

.rdp-week_number {
opacity: var(--rdp-week_number-opacity);
font: var(--rdp-week_number-font);
font-weight: 400;
font-size: small;
height: var(--rdp-week_number-height);
width: var(--rdp-week_number-width);
border: var(--rdp-week_number-border);
Expand All @@ -242,7 +238,8 @@
}

.rdp-selected {
font: var(--rdp-selected-font);
font-weight: bold;
font-size: large;
}

.rdp-selected .rdp-day_button {
Expand Down Expand Up @@ -273,7 +270,6 @@

.rdp-range_middle {
background-color: var(--rdp-range_middle-background-color);
font: var(--rdp-range_middle-font);
}

.rdp-range_middle .rdp-day_button {
Expand Down
24 changes: 10 additions & 14 deletions src/style.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@
.root {
--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. */

--rdp-day-font: inherit; /* The font used for the day cells. */
--rdp-day-height: 2.75rem; /* The height of the day cells. */
--rdp-day-width: 2.75rem; /* The width of the day cells. */

Expand All @@ -15,14 +13,12 @@
--rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */

--rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
--rdp-selected-font: bold large var(--rdp-font-family); /* The font of the selected days. */
--rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
--rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
--rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */

--rdp-dropdown-gap: 0.5rem;/* The gap between the dropdowns used in the month captons. */

--rdp-month_caption-font: bold larger var(--rdp-font-family); /* The font of the month caption. */
--rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */

--rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
Expand All @@ -31,8 +27,7 @@
--rdp-nav-height: 2.75rem; /* The height of the navigation bar. */

--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-foreground-color: white; /* The foregraound color 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. */
Expand All @@ -45,13 +40,12 @@

--rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
--rdp-week_number-border: 2px solid transparent; /* The border of the week number. */
--rdp-week_number-font: 400 small var(--rdp-font-family); /* The font of the week number cells. */

--rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
--rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
--rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
--rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */

--rdp-weekday-font: 500 smaller var(--rdp-font-family); /* The font of the weekday. */
--rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
--rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
--rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
Expand All @@ -76,7 +70,6 @@
.day {
width: var(--rdp-day-width);
height: var(--rdp-day-height);
font: var(--rdp-day-font);
text-align: center;
}

Expand Down Expand Up @@ -192,7 +185,8 @@
display: flex;
align-content: center;
height: var(--rdp-nav-height);
font: var(--rdp-month_caption-font);
font-weight: bold;
font-size: large;
}

.months {
Expand Down Expand Up @@ -221,14 +215,16 @@
.weekday {
opacity: var(--rdp-weekday-opacity);
padding: var(--rdp-weekday-padding);
font: var(--rdp-weekday-font);
font-weight: 500;
font-size: smaller;
text-align: var(--rdp-weekday-text-align);
text-transform: var(--rdp-weekday-text-transform);
}

.week_number {
opacity: var(--rdp-week_number-opacity);
font: var(--rdp-week_number-font);
font-weight: 400;
font-size: small;
height: var(--rdp-week_number-height);
width: var(--rdp-week_number-width);
border: var(--rdp-week_number-border);
Expand All @@ -242,7 +238,8 @@
}

.selected {
font: var(--rdp-selected-font);
font-weight: bold;
font-size: large;
}

.selected .day_button {
Expand Down Expand Up @@ -273,7 +270,6 @@

.range_middle {
background-color: var(--rdp-range_middle-background-color);
font: var(--rdp-range_middle-font);
}

.range_middle .day_button {
Expand Down
79 changes: 36 additions & 43 deletions website/docs/docs/styling.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,49 +52,42 @@ Define the CSS variables in your app's CSS file, after importing the DayPicker C

The following table lists the CSS variables used by DayPicker within the `.rdp-root` class:

| CSS Variable | Description |
| ----------------------------------------- | ----------------------------------------------------------------------------- |
| `--rdp-accent-color` | The accent color used for selected days and UI elements. |
| `--rdp-accent-background-color` | The accent background color used for selected days and UI elements. |
| `--rdp-font-family` | The font family used by the calendar. Note that `inherit` does not work here. |
| `--rdp-day-font` | The font used for the day cells. |
| `--rdp-day-height` | The height of the day cells. |
| `--rdp-day-width` | The width of the day cells. |
| `--rdp-chevron-disabled-opacity` | The opacity of the chevron when its container is disabled. |
| `--rdp-day_button-border-radius` | The border radius of the day cells. |
| `--rdp-day_button-border` | The border of the day cells. |
| `--rdp-day_button-height` | The height of the day cells. |
| `--rdp-day_button-width` | The width of the day cells. |
| `--rdp-selected-border` | The border of the selected days. |
| `--rdp-selected-font` | The font of the selected days. |
| `--rdp-disabled-opacity` | The opacity of the disabled days. |
| `--rdp-outside-opacity` | The opacity of the days outside the current month. |
| `--rdp-today-color` | The color of today's date. |
| `--rdp-dropdown-gap` | The gap between the dropdowns used in the month captions. |
| `--rdp-month_caption-font` | The font of the month caption. |
| `--rdp-months-gap` | The gap between the months in the multi-month view. |
| `--rdp-nav_button-disabled-opacity` | The opacity of the disabled navigation buttons. |
| `--rdp-nav_button-height` | The height of the navigation buttons. |
| `--rdp-nav_button-width` | The width of the navigation buttons. |
| `--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. |
| `--rdp-range_middle-foreground-color` | 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. |
| `--rdp-range_end-background` | Used for the background of the end of the selected range. |
| `--rdp-range_end-color` | The color of the range text at the end of the range. |
| `--rdp-range_end-date-background-color` | The background color of the date at the end of the selected range. |
| `--rdp-week_number-border-radius` | The border radius of the week number. |
| `--rdp-week_number-border` | The border of the week number. |
| `--rdp-week_number-font` | The font of the week number cells. |
| `--rdp-week_number-height` | The height of the week number cells. |
| `--rdd-week_number-width` | The width of the week number cells. |
| `--rdp-weekday-font` | The font of the weekday. |
| `--rdp-weekday-opacity` | The opacity of the weekday. |
| `--rdp-weekday-padding` | The padding of the weekday. |
| `--rdp-weekday-text-align` | The text alignment of the weekday cells. |
| CSS Variable | Description |
| ----------------------------------------- | -------------------------------------------------------------------- |
| `--rdp-accent-color` | The accent color used for selected days and UI elements. |
| `--rdp-accent-background-color` | The accent background color used for selected days and UI elements. |
| `--rdp-day-height` | The height of the day cells. |
| `--rdp-day-width` | The width of the day cells. |
| `--rdp-chevron-disabled-opacity` | The opacity of the chevron when its container is disabled. |
| `--rdp-day_button-border-radius` | The border radius of the day cells. |
| `--rdp-day_button-border` | The border of the day cells. |
| `--rdp-day_button-height` | The height of the day cells. |
| `--rdp-day_button-width` | The width of the day cells. |
| `--rdp-selected-border` | The border of the selected days. |
| `--rdp-disabled-opacity` | The opacity of the disabled days. |
| `--rdp-outside-opacity` | The opacity of the days outside the current month. |
| `--rdp-today-color` | The color of today's date. |
| `--rdp-dropdown-gap` | The gap between the dropdowns used in the month captions. |
| `--rdp-months-gap` | The gap between the months in the multi-month view. |
| `--rdp-nav_button-disabled-opacity` | The opacity of the disabled navigation buttons. |
| `--rdp-nav_button-height` | The height of the navigation buttons. |
| `--rdp-nav_button-width` | The width of the navigation buttons. |
| `--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-foreground-color` | 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. |
| `--rdp-range_end-background` | Used for the background of the end of the selected range. |
| `--rdp-range_end-color` | The color of the range text at the end of the range. |
| `--rdp-range_end-date-background-color` | The background color of the date at the end of the selected range. |
| `--rdp-week_number-border-radius` | The border radius of the week number. |
| `--rdp-week_number-border` | The border of the week number. |
| `--rdp-week_number-height` | The height of the week number cells. |
| `--rdd-week_number-width` | The width of the week number cells. |
| `--rdp-weekday-opacity` | The opacity of the weekday. |
| `--rdp-weekday-padding` | The padding of the weekday. |
| `--rdp-weekday-text-align` | The text alignment of the weekday cells. |

### Light/Dark Appearance

Expand Down

0 comments on commit 1e0be26

Please sign in to comment.