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

[Theming] Project Chroma - color palettes in Radiance #400

Open
kirill-grouchnikov opened this issue Aug 19, 2022 · 21 comments
Open

[Theming] Project Chroma - color palettes in Radiance #400

kirill-grouchnikov opened this issue Aug 19, 2022 · 21 comments
Assignees
Labels
8.0 - Marble Release 8.0 - 2024.H2 Breaking change Marking changes that break backwards compatibility

Comments

@kirill-grouchnikov
Copy link
Owner

This will track work to modernize the way Radiance defines color schemes, as well as some of the relevant painters.

More details will be added when 7.0 development starts, but in the meanwhile, some code pointers

  1. SchemeBaseColors that defines the RGB colors that make up the "core" of the color scheme
  2. SchemeDerivedColors that defines colors that are derived from the base colors and have specific usage. Material Design spec calls these system tokens, but I prefer to call them semantic colors
  3. DerivedColorsResolverLight and DerivedColorsResolverDark that provide the default mapping of semantic colors to the underlying core scheme colors

Then, painters such as StandardFillPainter sometimes use the derived / semantic colors, and sometimes do an additional layer of "mixing" (like here) to get the colors they need for the visuals.

Recent additions in Radiance, such as fraction-based painters and direct values for derived / semantic colors made it easier for skins to have more precise control over the "flow" of RGB colors upwards into that skin's painters, the overall underlying system is showing the signs of its age.

The rough plan is to:

  • Define a color scheme in terms of tonal stops (which is what most popular design systems today do), with "values" in the range between 0 and 100.
  • Define semantic colors that map to the specific tonal stops in light and dark mode.
  • Refactor existing painters to exclusively use semantic colors by default, with escape hatches to use direct mapping to the tonal stops.
  • Refactor how light / dark color schemes are handled in Radiance. The idea is that a color scheme itself is not light or dark, but rather the skin is. And that defines what semantic color mappings that skin uses to the underlying tonal stops.
@kirill-grouchnikov kirill-grouchnikov added Breaking change Marking changes that break backwards compatibility 7.0 - Karat Release 7.0 - 2024.H1 labels Aug 19, 2022
@kirill-grouchnikov kirill-grouchnikov self-assigned this Aug 19, 2022
@kirill-grouchnikov kirill-grouchnikov added 8.0 - Marble Release 8.0 - 2024.H2 and removed 7.0 - Karat Release 7.0 - 2024.H1 labels Jun 6, 2023
kirill-grouchnikov added a commit to kirill-grouchnikov/ephemeral that referenced this issue Nov 18, 2024
Subset of MCU under Apache license, under Ephemeral package and with some cleanups to remove AndroidX / other annotations. Packaging, location and other things are not finalized.

For kirill-grouchnikov/radiance#400
@kirill-grouchnikov
Copy link
Owner Author

Update: this is happening soon, and until this issue is closed, the main Radiance trunk will be unstable, undergoing major internal and API changes.

kirill-grouchnikov added a commit that referenced this issue Nov 21, 2024
kirill-grouchnikov added a commit that referenced this issue Nov 30, 2024
Start wiring the new color tokens on buttons for #400
kirill-grouchnikov added a commit that referenced this issue Nov 30, 2024
kirill-grouchnikov added a commit that referenced this issue Dec 1, 2024
kirill-grouchnikov added a commit that referenced this issue Dec 1, 2024
Use onContainer tokens for title pane text, test logo and default (flat) visuals of control button icons. For #400
kirill-grouchnikov added a commit that referenced this issue Dec 1, 2024
Background, border, text. For #400
kirill-grouchnikov added a commit that referenced this issue Dec 1, 2024
kirill-grouchnikov added a commit that referenced this issue Dec 1, 2024
kirill-grouchnikov added a commit that referenced this issue Dec 2, 2024
Add surface render color tokens, use them for background tokens at the skin levels, use surface for the background fill. For #400
kirill-grouchnikov added a commit that referenced this issue Dec 3, 2024
* Default visuals for armed states
* Tonal based color for focus indicator

For #400
kirill-grouchnikov added a commit that referenced this issue Dec 3, 2024
And wire support for modified animation on tonal buttons for #400
kirill-grouchnikov added a commit that referenced this issue Dec 5, 2024
Allows specifying separate color schemes for tabs, marks (checkbox / radio button) and highlights. For #400
kirill-grouchnikov added a commit that referenced this issue Dec 6, 2024
@kirill-grouchnikov
Copy link
Owner Author

Current (pre-Chroma) visuals of the Night Shade skin:

Image

New (Chroma) visuals of the Night Shade skin:

Image

kirill-grouchnikov added a commit that referenced this issue Jan 26, 2025
* Separate darkness indication for each one of the four container types. This allows mixing dark visuals for neutral and muted containers with light visuals for tonal containers in Twilight
* Add top line tonal overlay painter
* Add blending queries for container color tokens for interpolating between color tokens in painter definitions

For #400
kirill-grouchnikov added a commit that referenced this issue Jan 27, 2025
Better contrast in highlighted menus. For #400
@kirill-grouchnikov
Copy link
Owner Author

Current (pre-Chroma) visuals of the Twilight skin:

Image

New (Chroma) visuals of the Twilight skin:

Image

kirill-grouchnikov added a commit that referenced this issue Jan 31, 2025
kirill-grouchnikov added a commit that referenced this issue Feb 1, 2025
Tweaking visuals for marks, tabs and pressed states

For #400
@kirill-grouchnikov
Copy link
Owner Author

kirill-grouchnikov commented Feb 1, 2025

Current (pre-Chroma) visuals of the Magellan skin:

Image

New (Chroma) visuals of the Magellan skin:

Image

kirill-grouchnikov added a commit that referenced this issue Feb 1, 2025
@kirill-grouchnikov
Copy link
Owner Author

kirill-grouchnikov commented Feb 1, 2025

Current (pre-Chroma) visuals of the Gemini skin:

Image

New (Chroma) visuals of the Gemini skin:

Image

kirill-grouchnikov added a commit that referenced this issue Feb 2, 2025
* This is for visuals such as separators, drag bumps and other elements that have "primary" and "secondary" parts
* Migrate separators and toolbar drag bumps to the new tokens
* Update the Gemini tonal skin to use the new token on the toolbar overlay painter

For #400
kirill-grouchnikov added a commit that referenced this issue Feb 2, 2025
And convert tonal Gemini border painter to use the recently added complementary container outline + custom alpha channels

For #400
kirill-grouchnikov added a commit that referenced this issue Feb 2, 2025
Use the recently added complementary container outline + custom alpha channels. For #400
kirill-grouchnikov added a commit that referenced this issue Feb 2, 2025
Use the recently added complementary container outline + custom alpha channels. For #400
kirill-grouchnikov added a commit that referenced this issue Feb 2, 2025
Add accented base definition and tonal Nebula. For #400
@kirill-grouchnikov
Copy link
Owner Author

Current (pre-Chroma) visuals of the Nebula skin:

Image

New (Chroma) visuals of the Nebula skin:

Image

kirill-grouchnikov added a commit that referenced this issue Feb 2, 2025
Add tonal Nebula Brick Wall skin for #400
@kirill-grouchnikov
Copy link
Owner Author

kirill-grouchnikov commented Feb 2, 2025

Current (pre-Chroma) visuals of the Nebula Brick Wall skin:

Image

New (Chroma) visuals of the Nebula Brick Wall skin:

Image

kirill-grouchnikov added a commit that referenced this issue Feb 3, 2025
* Revisit the color tokens used by the arc decoration painter and menu background delegate (for gutter fill)
* Clean up a couple of existing tonal skins
* Add tonal Nebula Amethyst

For #400
kirill-grouchnikov added a commit that referenced this issue Feb 3, 2025
@kirill-grouchnikov
Copy link
Owner Author

Current (pre-Chroma) visuals of the Nebula Amethyst skin:

Image

New (Chroma) visuals of the Nebula Amethyst skin:

Image

@kirill-grouchnikov
Copy link
Owner Author

Skins left to migrate (in rough planned order)

  • Creme+
  • Dust+
  • Mist+
  • Raven
  • Sentinel
  • Graphite+
  • Cerulean
  • Green Magic
  • Office 2007+ (extras)
  • Field of Wheat (extras)
  • Harvest (extras)
  • Magma (extras)
  • Streetlights (extras)

@kirill-grouchnikov
Copy link
Owner Author

Current (pre-Chroma) visuals of the Dust skin:

Image

New (Chroma) visuals of the Dust skin:

Image

kirill-grouchnikov added a commit that referenced this issue Feb 6, 2025
Adding tonal Dust Coffee skin. For #400
@kirill-grouchnikov
Copy link
Owner Author

Current (pre-Chroma) visuals of the Dust Coffee skin:

Image

New (Chroma) visuals of the Dust Coffee skin:

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
8.0 - Marble Release 8.0 - 2024.H2 Breaking change Marking changes that break backwards compatibility
Projects
None yet
Development

No branches or pull requests

1 participant