📝 CSS-Tricks 222: A Note about Color Variables

View this newsletter on the web.

[Robin]: I read this post from Dave Rupert about setting color variables, using a combination of Sass vars, CSS vars, and what Dave calls “semantic theme vars.” He writes:

Last week I got the opportunity to work on a side project that has no plans to include IE 11 in the support matrix and let me tell you; what a wonderful feeling! This opens the door to a lot of fun CSS, namely Custom Properties. Adding a proper “Dark Theme” to the application has been on the backlog for awhile and seeing some free time in my schedule, I sat down to hammer it out. It’s nothing super original, but I settled on a solution where I can layer in the ability to theme my application but also maintain some of the power of Sass in the process.

Dave decided to use a combination of all these things and I think it’s interesting because it shows the complexity of adding color options to a codebase. When we talk about color variables, it’s not as simple as pick a color, and then just use CSS variables in your project). Dave uses CSS and Sass vars together, like this:

html { --black: #{$black}; --grey: #{$grey}; --light-grey: #{$light-grey}; --white: #{$white}; --primary: #{$primary}; }

This is an interesting for me personally because I’ve been refactoring colors at Sentry, where I work. Our codebase has a theme.tsx file where we set a ton of color variables, like this:

const colors = { gray100: '#FAF9FB', gray200: '#F2F0F5', gray300: '#E7E1EC', gray400: '#C6BECF', gray500: '#9585A3', gray600: '#645574', gray700: '#4A3E56', gray800: '#302839', } as const;

We then have an alias object:

const aliases = { text: colors.gray800, border: colors.gray400, success: colors.green400, error: colors.red, disabled: colors.gray400, } as const;

The idea is that when we’re making a new component with Emotion, we don’t have to remember which gray is our default text color. So, in a component we might have something like this:

import styled from '@emotion/styled'; const Alert = styled('div')` background: ${p => p.theme.error}; color: ${p => p.theme.white}; `;

I like how Dave approaches things by combining Sass and CSS variables:

Digging in the code, I found dozens of places where we were using Sass color functions like lighten() and darken(). Programmatically generating colors (grays) still has a ton of value for this project. Unfortunately, CSS doesn’t have color functions (yet). Rather than letting this be a blocker for me, I decided I can have the best of both worlds.

--border: #{darken($light-grey, 6%)};

The lack of true CSS color functions is one of the last few Sass superpowers that I can’t really do without. Dave links to a proposal by Lea Verou where she wrote about how color functions might be implemented in CSS and that’s super exciting to me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s