refactor(styles): centralize derived color tokens in variables.scss for less opinionated overrides#6284
Open
Jollus174 wants to merge 1 commit into
Open
Conversation
…or less opinionated overrides
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Linked issue: N/A (theming / DX improvement; no existing issue)
Problem
Datepicker colors were partly defined in variables.scss and partly computed inline in datepicker.scss via color.adjust() and rgba(). That made Sass theming harder: consumers overriding base tokens could not easily override derived states (hovers, disabled selection, chevrons, keyboard-selected), and the var(--…) compile-time limitation was undocumented.
The issue I had was that I'd like to be able to consistently assign --css-variables to the $sass_variables. This is because in our sites, theming colours come from the CMS and are set as CSS variables. This doesn't work with React Datepicker, as the SASS variables are essentially built-time and are adjusted through the whole project, and aren't all in a centralised place. Ideally, they should all be in variables.scss, so I've moved them. 😊
I'd also say that the existing styling implementation could be considered being rewritten with CSS variables rather than SASS variables, including lighten / darken / rgba adjustments, which can be accomplished in CSS with color-mix() and relative colour syntax). That could be a PR for another time. For now, it's just centralising the SASS colours, which I think would benefit everyone and not cause any breakage.
Changes
Centralized all Sass color transforms in variables.scss as named $datepicker__* variables with !default, including:
Updated datepicker.scss to use those variables only (removed inline color.adjust and @use "sass:color").
Added a Sass / stylesheet theming section to CONTRIBUTING.md covering !default, override order, and the requirement to override derived tokens when bases are set to var(--…).
Default compiled colors are unchanged for consumers who do not customize Sass variables.
Screenshots
N/A — no visual change with default palette. Theming is a Sass/API change only.
To reviewers
Think you could sanity-check hover/disabled/chevron colors in the docs site if you want extra confidence; I verified yarn sass-lint, yarn run css:dev, and yarn run css:modules:dev.
mixins.scss was already using module variables; no logic change there.
Happy to promote hardcoded literals (#fff, #333, etc.) to optional tokens in a follow-up if desired.