I couldn’t find an announcement on this. I saw there’s new root color declarations (primary-900, primary-800, …) I’m working on a theme and I get different calculations for these (primary is the same), apparently depending on Discourse version? [Screenshot from 2022-03-03 12-54-20] [Screenshot from 2022-03-03 11-48-50] Is there more information how shades and tints will be generated? Also, if the numerical system is planned to fully replace the descriptive terms (low, medium, high,..)?

Hello, I believe this is the color transformations file where you can check the percentage how these variables made. app/assets/stylesheets/common/foundation/color_transformations.scss main // standard color transformations, use these if possible, and add any new dark-light-diffs here // any variables defined here can be added in theme color schemes // all variables should have the !default flag @use "sass:string"; // primary $primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%) !default; $primary-low: dark-light-diff($primary, $secondary, 90%, -78%) !default; $primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%) !default; $primary-medium: dark-light-diff($primary, $secondary, 50%, -35%) !default; $primary-high: dark-light-diff($primary, $secondary, 30%, -25%) !default; $primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%) !default; // primary-numbers $primary-50: dark-light-diff($primary, $secondary, 97%, -82%) !default; $primary-100: dark-light-diff($primary, $secondary, 94%, -80%) !default; $primary-200: dark-light-diff($primary, $secondary, 90%, -78%) !default; $primary-300: dark-light-diff($primary, $secondary, 80%, -60%) !default; $primary-400: dark-light-diff($primary, $secondary, 70%, -45%) !default; This file has been truncated. show original

Thanks @Don! But yeah, I know where the colors are declared.. I was curious about the considerations behind it and the plans going forward. E.g. right now there’s numeric values for primary and tertiary. Why not for all values from a color scheme? Is that planed? Also, right now numeric values are only generating lighter tints. Why not use a more standard system where 500 is assigned the main color, with tints 500? Another topic, why are tints not generated in a more linear way, but as a blend with another main color from the color scheme? Right now I can’t use the Discourse color system to implement color declarations when a client has a comprehensive design system. I practically need to declare all values from scratch. If generated colors in Discourse are now defined in a numeric way, why not implement a system that’s consistent and more aligned with color generation in common design systems?

[image] manuel: I saw there’s new root color declarations (primary-900, primary-800, …) Yes, see UX: Styleguide changes & color variable additions by jordanvidrine · Pull Request #15984 · discourse/discourse · GitHub for context. [image] manuel: I’m working on a theme and I get different calculations for these (primary is the same), apparently depending on Discourse version? Calculation changed 8 days ago, please update to latest.

Changes in root colors generation

Product Support

Falco (Falco) March 3, 2022, 3:35pm 4

Yes, see UX: Styleguide changes & color variable additions by jordanvidrine · Pull Request #15984 · discourse/discourse · GitHub for context.

Calculation changed 8 days ago, please update to latest.

Topic		Replies	Views
How do colors work and how to change them? Product Support ux	4	425	March 20, 2025
Colors changed in beta7? Product Support	5	1145	January 5, 2019
Reference for full color customization Development	3	1577	February 14, 2023
Challenges creating a custom color palette Development	8	447	January 29, 2025
Cleaning up our color palette 🎨 Development	23	5212	April 20, 2018

Changes in root colors generation

Related topics