Changes in root colors generation

manuel · 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?

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

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

manuel · 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
How do colors work and how to change them? Support ux	4	255	March 20, 2025
Colors changed in beta7? Support	5	1033	January 5, 2019
Reference for full color customization Development	3	1421	February 14, 2023
Challenges creating a custom color palette Development	8	252	January 29, 2025
Cleaning up our color palette 🎨 Development	23	4748	April 20, 2018

Changes in root colors generation

Related topics