Skip to content
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.

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

Add CSS color-scheme utilities #11271

Open
wants to merge 1 commit into
base: next
Choose a base branch
from

Conversation

lukewarlow
Copy link
Contributor

This PR adds utilities for the color-scheme CSS property.

(Ignore the browser support for the only word it doesn't break functionality in any browser and definitely works in Chrome)

@jonnitto
Copy link

Funny, I've the same code in my projects

@elizabethmitchell00
Copy link

Thanks for the information.

@RobinMalfait RobinMalfait changed the base branch from master to archive/master-2024-02-23 March 4, 2024 21:43
Co-authored-by: Luke Warlow <luke@warlow.dev>
@RobinMalfait RobinMalfait changed the base branch from archive/master-2024-02-23 to next April 17, 2024 20:49
@RobinMalfait RobinMalfait changed the title Add CSS color-scheme utilities Add CSS color-scheme utilities Apr 17, 2024
@RobinMalfait
Copy link
Contributor

Hey!

You might have noticed that I forced pushed to this branch. The reason is because the PR now uses next as the base branch which is our working branch for Tailwind CSS v4. In other words, the feature you implemented here is now written in the new codebase.

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 💪

@brandonmcconnell
Copy link
Contributor

brandonmcconnell commented Apr 20, 2024

@lukewarlow @RobinMalfait How would you feel about using shorter utility names?

  • color-scheme-dark or scheme-dark or dark
    (dark in a util context would be different from its dark: variant context)
  • color-scheme-dark-only or scheme-dark-only or dark-only

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.

@lukewarlow
Copy link
Contributor Author

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 :)

@brandonmcconnell
Copy link
Contributor

@lukewarlow Absolutely! I'm with it 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants