How to name font color variables in scss/css
I have 3 font colors, how to name the variables? color-light color-mid-dark color-dark? color-primary color-secondary color-trinary?
21 Replies
I would set two fold "tokens"
I'm a fan of
So you end up having value tokens, and contextual tokens.
My preference is to base custom variables based on their use not on their content. If you call it
clr-light for your primary colour and then you suddenly want a dark colour as the primary you need to not only change the value but the nameThen you use your contextual tokens all over, maybe with fallbacks.
It depends.
Are they three shades of the same color? then maybe
--text, --text-dark, --text-light
Are they three different colors? then maybe --primary, --secondary, --tertiary
Are they okay to use on non-text elements? then maybe change out text for name-of-color
Do they represent different "heights" of content? then maybe --text, --text-elevation-1, --text-elevation-2
It all depends on the values, the purpose, and the usage.
Btw, a few of us have been chatting about naming variables in this thread, more towards JS/C#/Go/etc rather than CSS but the same rules apply (mostly)
https://discord.com/channels/436251713830125568/1086285280165777418/1086285280165777418i have white, black, and greyish
accent gets confusing for font colors
but then again I'am using the black and white as background colors too
so if font color and background and same then I guess a common name makes sense
The only time I suggest using colour names for variables is if you're making your own version of the colour. Like instead of white being
#FFF your white is more white-ish and is #DDD. Then it's OK to use colour names IMOfair point
Base names on use, not on value. If you name it by value you may as well use that value
true
See my example I don't agree
>.>;;
--white-2: hsla(138, 33%, 94%, 1);You do agree. Mostly lol
then use would be
--clr-text: var(--white-2);
makes it easy to theme that way tooUse contextual tokens in the rest of the code. Use the value tokens to populate the contextual ones
$white
$color-primary: $white?
awesome
please use code-blocks!
/* Colors /
$white: #ffffff;
$black: #252525;
$grey: #929292;
$light-grey: #dedede;
/ Set up /
$color-primary: $white;
$color-secondary: $black;
$color-trinary: $grey;
/ Font Colors /
$color-heading-light: $color-primary;
$color-heading-dark: $color-secondary;
$color-paragraph: $color-trinary;
$color-link: $color-primary;
/ Background Colors */
$color-dark: $color-primary;
$color-light: $color-secondary;
$color-accent: $light-grey;
thanks for the reminder.
That overkill?No, that's not right
I feel like the bg colours section is overkill
Same with font colours. That's like some serious inception going on. Use the colours to create the colour-based variables. Then use the colours to populate the contextual variables (in your code that's the Set up section). From there, use the set up colours without making more.
got it
thanks