Add CSS color-scheme utilities
#11271
Conversation
RobinMalfait
force-pushed
the
color-scheme
branch
from
f2a9102
to
f50c05c
Compare
|
Funny, I've the same code in my projects |
|
Thanks for the information. |
RobinMalfait
force-pushed
the
color-scheme
branch
from
f50c05c
to
56ae7e6
Compare
Co-authored-by: Luke Warlow <[email protected]>
RobinMalfait
force-pushed
the
color-scheme
branch
from
56ae7e6
to
6b161f8
Compare
RobinMalfait
changed the title
color-scheme utilities
|
Hey! You might have noticed that I forced pushed to this branch. The reason is because the PR now uses The code is ported as-is, so no API changes of your feature happened while moving it to the new codebase. I also made sure to add you as a co-author because you still deserve all the credit 💪 |
|
@lukewarlow @RobinMalfait How would you feel about using shorter utility names?
I could see an argument for the verbose names as these would not be so commonly used and would be simpler to understand when encountered if they are 1:1 with CSS, but I could also see it being helpful to have shorter names if a codebase has a common practice of making certain sections dark vs. light in different contexts. |
|
My thinking on this is that more verbosity is better, makes them easily discoverable. dark-only might make someone think this hides this element in dark mode. For an existing example there's the file: pseudo instead of file-selector-button which admittedly is a bit verbose but people didn't realise tailwind had this variant I think in part because it wasn't a match to the pseudo name. (file might also end up being a future compat issue if other file element pseudos are ever added but that's a separate discussion). All that being said I trust in the framework authors to weigh up tradeoffs and come to a decision that's right for them :) |
|
@lukewarlow Absolutely! I'm with it 🙂 |
|
Opened a fresh PR for this one because the merge conflicts were a nightmare for me to try and resolve 😬 Added you as a co-author though @lukewarlow so will still be credited. Thanks! |
Replaces #11271 — the merge conflicts are killing me and it's way easier to just do it again (added you as a co-author though @lukewarlow so you're still credited!) This PR adds the following new utilities for the `color-scheme` property: | Class | CSS | | ------------------- | -------------------------- | | `scheme-normal` | `color-scheme: normal` | | `scheme-dark` | `color-scheme: dark` | | `scheme-light` | `color-scheme: light` | | `scheme-light-dark` | `color-scheme: light dark` | | `scheme-only-dark` | `color-scheme: dark only` | | `scheme-only-light` | `color-scheme: light only` | Went with `scheme-*` for the utilities because there are currently no other CSS properties with the word `scheme` in them and `scheme-light-dark` is going to be a common value which is three words already even with the shortened property name. I considered setting `color-scheme: light dark` by default as part of Preflight for this PR but decided against it, at least for this PR. I think that could still be a useful default but we should think about it a bit more because if you're building a light-mode-only site it'll force you to do some extra work. --------- Co-authored-by: Adam Wathan <[email protected]> Co-authored-by: Luke Warlow <[email protected]>
This PR adds utilities for the
color-schemeCSS property.(Ignore the browser support for the only word it doesn't break functionality in any browser and definitely works in Chrome)