elements: refactor wccss for dark mode #58
Conversation
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
…ures are plumbed through it. I think it's ready for the next stage, which is making it emit the dark mode stuff.
# What Re-writes the structures and functions inside WCCSS to a more modern, class-oriented system. Too many details were getting lost in the noise, and the idea that these were “abstractions” that I needed to ignore just wasn’t cutting it. Re-writting the Patternfly reader so that it was clear what was happening at each step (pulling in the content, then traversing it to determine the `:root` CSS values) made the next step much easier. Dark mode analysis has been added: the `html[theme="dark"]` selector is automatically detected if present in a component’s ReactCSS variant, and ported correctly to a web-component oriented format. ak-button’s CSS has been re-activated as a pure WCCSS product, and it works correctly. ak-tooltip was too heavily customized; it’s effectively our own code now, so it will remain “overridden.” (Also, it was misspelled “overriden,” which I have corrected.) # Why Because the burden of hand-maintaining component with dark mode was become onerous, and this will accelerate the production of new components with dark mode attached.
✅ Deploy Preview for authentik-elements-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
elements: refactor WCCSS preprocesser to handle dark mode better
What
Re-writes the structures and functions inside WCCSS to a more modern, class-oriented system. Too many details were getting lost in the noise, and the idea that these were “abstractions” that I needed to ignore just wasn’t cutting it. Re-writting the Patternfly reader so that it was clear what was happening at each step (pulling in the content, then traversing it to determine the
:rootCSS values) made the next step much easier.Dark mode analysis has been added: the
html[theme="dark"]selector is automatically detected if present in a component’s ReactCSS variant, and ported correctly to a web-component oriented format.ak-button’s CSS has been re-activated as a pure WCCSS product, and it works correctly.
ak-tooltip was too heavily customized; it’s effectively our own code now, so it will remain “overridden.” (Also, it was misspelled “overriden,” which I have corrected.)
Why
Because the burden of hand-maintaining component with dark mode was become onerous, and this will accelerate the production of new components with dark mode attached.