Skip to content

Color Revolution #100

@geoffrey-eisenbarth

Description

@geoffrey-eisenbarth

All default colors should be generated from the accent color using relative color syntax (lch(from)).

For light and dark themes, use the light-dark() function instead of media queries.

Headline feature for V2.

Prototype implementation in feat-relative-colors git branch, needs aesthetic polishing and a detailed map of the API breakage.

Problem: CSS variables seem to be call-by-value rather than call-by-name, so if a child element changes accent color, the other colors don't change to match. The prototype works around this by setting the relative color variables on the * selector, recalculating them on every element. This works, but makes it fiddly to override the formulas and it's probably slow. Possible solution with @container style() queries?

Thought: The fact that a colorway can be defined from a single color effectively makes colorways obsolete. - Missing Roadmap

More discussion in the Color Revolution Discord thread

Metadata

Metadata

Assignees

Labels

blocked:platformWaiting for new web platform features to stabilizeenhancementNew feature or requestvisualA visual issue, affecting the appearance of pages. Can be usability-related or simply aesthetic.

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions