Skip to content

refactor(styles): centralize derived color tokens in variables.scss for less opinionated overrides #6284

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Jollus174 wants to merge 1 commit into
base: main
Choose a base branch
from
+1,761 −2,021
Open

refactor(styles): centralize derived color tokens in variables.scss for less opinionated overrides #6284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,23 @@ Start reading our code, and you'll get the hang of it. We optimize for readabili
- We use ESlint for all other coding standards. We try to be consistent and helpful.
- This is open source software. Consider the people who will read your code, and make it look nice for them. It's sort of like driving a car: Perhaps you love doing donuts when you're alone, but with passengers, the goal is to make the ride as smooth as possible.

## Sass / stylesheet theming

The package exposes [`src/stylesheets/`](https://github.com/Hacker0x01/react-datepicker/tree/main/src/stylesheets) so you can compile your own CSS. Palette tokens live in `variables.scss`: base colors (`$datepicker__background-color`, `$datepicker__selected-color`, …) and derived tokens (`$datepicker__selected-color--hover`, `$datepicker__muted-color--chevron-dim`, …) computed with `color.adjust` / `rgba`. Each token uses `!default`, so set your overrides **before** `@use`ing or importing the datepicker stylesheet (for example via a small “theme” partial loaded first, or your build’s `load-path` + `@use … with (...)` where applicable).

**Compile-time colors:** Sass `color.adjust()` and `rgba()` only accept real colors at compile time. If you set a base variable to something like `var(--brand-primary)`, you must also override every derived variable that was computed from that base (for example `$datepicker__selected-color--hover`, `$datepicker__selected-color--disabled`), or keep bases as hex/rgb/hsl literals so the defaults still compile.

Example when a base is not a compile-time color:

```scss
$datepicker__selected-color: var(--datepicker-accent);
$datepicker__selected-color--hover: var(--datepicker-accent-hover);
$datepicker__selected-color--disabled: var(--datepicker-accent-subtle);
$datepicker__selected-color--keyboard-selected-bg: var(--datepicker-accent-surface);
```

Derived tokens include: `$datepicker__muted-color--chevron-dim`, `$datepicker__muted-color--navigation-hover-border`, `$datepicker__navigation-disabled-color`, `$datepicker__selected-color--disabled`, `$datepicker__selected-color--hover`, `$datepicker__selected-color--keyboard-selected-bg`, `$datepicker__highlighted-color--hover`, `$datepicker__holidays-color--hover`.

## Getting set up

Local development configuration is pretty snappy. Here's how to get set up:
Expand Down
48 changes: 10 additions & 38 deletions src/stylesheets/datepicker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@use "sass:color";
@use "variables" as *;
@use "mixins" as *;

Expand Down Expand Up @@ -234,7 +233,7 @@ h2.react-datepicker__current-month {

&:hover {
*::before {
border-color: color.adjust($datepicker__muted-color, $lightness: -15%);
border-color: $datepicker__muted-color--navigation-hover-border;
}
}
}
Expand Down Expand Up @@ -434,10 +433,7 @@ h2.react-datepicker__current-month {
color: #fff;

&:hover {
background-color: color.adjust(
$datepicker__selected-color,
$lightness: -5%
);
background-color: $datepicker__selected-color--hover;
}
}
}
Expand Down Expand Up @@ -489,10 +485,7 @@ h2.react-datepicker__current-month {
color: #fff;

&:not([aria-disabled="true"]):hover {
background-color: color.adjust(
$datepicker__highlighted-color,
$lightness: -5%
);
background-color: $datepicker__highlighted-color--hover;
}

&-custom-1 {
Expand Down Expand Up @@ -528,10 +521,7 @@ h2.react-datepicker__current-month {
}

&:not([aria-disabled="true"]):hover {
background-color: color.adjust(
$datepicker__holidays-color,
$lightness: -10%
);
background-color: $datepicker__holidays-color--hover;
}

&:hover .overlay {
Expand All @@ -548,26 +538,17 @@ h2.react-datepicker__current-month {
color: #fff;

&:not([aria-disabled="true"]):hover {
background-color: color.adjust(
$datepicker__selected-color,
$lightness: -5%
);
background-color: $datepicker__selected-color--hover;
}
}

&--keyboard-selected {
border-radius: $datepicker__border-radius;
background-color: color.adjust(
$datepicker__selected-color,
$lightness: 45%
);
background-color: $datepicker__selected-color--keyboard-selected-bg;
color: rgb(0, 0, 0);

&:not([aria-disabled="true"]):hover {
background-color: color.adjust(
$datepicker__selected-color,
$lightness: -5%
);
background-color: $datepicker__selected-color--hover;
color: #fff;
}
}
Expand Down Expand Up @@ -637,10 +618,7 @@ h2.react-datepicker__current-month {

.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
border-top-color: color.adjust(
$datepicker__muted-color,
$lightness: -10%
);
border-top-color: $datepicker__muted-color--chevron-dim;
}
}

Expand Down Expand Up @@ -703,17 +681,11 @@ h2.react-datepicker__current-month {
background-color: $datepicker__muted-color;

.react-datepicker__navigation--years-upcoming {
border-bottom-color: color.adjust(
$datepicker__muted-color,
$lightness: -10%
);
border-bottom-color: $datepicker__muted-color--chevron-dim;
}

.react-datepicker__navigation--years-previous {
border-top-color: color.adjust(
$datepicker__muted-color,
$lightness: -10%
);
border-top-color: $datepicker__muted-color--chevron-dim;
}
}

Expand Down
31 changes: 30 additions & 1 deletion src/stylesheets/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,42 @@ $datepicker__highlighted-color: #3dcc4a !default;
$datepicker__holidays-color: #ff6803 !default;
$datepicker__muted-color: #ccc !default;
$datepicker__selected-color: #216ba5 !default;
$datepicker__selected-color--disabled: rgba($datepicker__selected-color, 0.5);
$datepicker__text-color: #000 !default;
$datepicker__header-color: #000 !default;

// Derived colors (see CONTRIBUTING.md — Sass / stylesheet theming)
$datepicker__muted-color--chevron-dim: color.adjust(
$datepicker__muted-color,
$lightness: -10%
) !default;
$datepicker__muted-color--navigation-hover-border: color.adjust(
$datepicker__muted-color,
$lightness: -15%
) !default;
$datepicker__navigation-disabled-color: color.adjust(
$datepicker__muted-color,
$lightness: 10%
) !default;
$datepicker__selected-color--disabled: rgba(
$datepicker__selected-color,
0.5
) !default;
$datepicker__selected-color--hover: color.adjust(
$datepicker__selected-color,
$lightness: -5%
) !default;
$datepicker__selected-color--keyboard-selected-bg: color.adjust(
$datepicker__selected-color,
$lightness: 45%
) !default;
$datepicker__highlighted-color--hover: color.adjust(
$datepicker__highlighted-color,
$lightness: -5%
) !default;
$datepicker__holidays-color--hover: color.adjust(
$datepicker__holidays-color,
$lightness: -10%
) !default;
$datepicker__border: 1px solid $datepicker__border-color;
$datepicker__border-radius: 0.3rem !default;
$datepicker__day-margin: 0.208em !default;
Expand Down
Loading