Changes in root colors generation

nolo · March 3, 2022, 1:00pm

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,…)?

Don · March 3, 2022, 1:42pm

Hello,

I believe this is the color transformations file where you can check the percentage how these variables made.

github.com

discourse/discourse/blob/main/app/assets/stylesheets/common/foundation/color_transformations.scss

// 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

//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;
$primary-500: dark-light-diff($primary, $secondary, 60%, -40%) !default;
$primary-600: dark-light-diff($primary, $secondary, 50%, -35%) !default;

This file has been truncated. show original

nolo · March 3, 2022, 2:38pm

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 and shades >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?

Falco · March 3, 2022, 3:35pm

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
Reference for full color customization Dev	4	1048	February 14, 2023
Cleaning up our color palette 🎨 Dev	24	4471	April 20, 2018
Help changing color of buttons Support	3	1184	September 22, 2019
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	11490	January 9, 2018
What about an easier styling/theming system? Feature	54	15206	October 3, 2014

Changes in root colors generation

Related topics