Color variable best practices

[fredrivett]

A standard use case for Stylex will be to store colors with stylex.defineVars() to consume in the app. Semi-often the need to apply an opacity to the color arises, and I'm wondering what advised best practice is for such a case with Stylex.

For example, Sass compiles this (see playground):

$blue: #0093ff;

.blue {
  color: $blue;
  background-color: rgba($blue, 0.2);
}

to this:

.blue {
  color: #0093ff;
  background-color: rgba(0, 147, 255, 0.2);
}

This has allowed us to store colors in their hex format and use them with opacity in our codebase. It looks like Stylex doesn't support this, so I'm wondering what the recommended way of storing colors is, and whether support for similar functionality to Sass is planned.

Currently it seems I have to resort to listing out each variant:

import stylex from "@stylexjs/stylex";

export const colors = stylex.defineVars({
  blue: rgb(0, 147, 255),
  blue_20: rgba(0, 147, 255, 0.2),
});

Another (convoluted) option might be to define the r g b values separately and combine them either at the defineVars level, or when consuming in a component, but A) my understanding is it's not supported to define variables outside of stylex.defineVars() and B) that feels like a lot of extra boilerplate code when migrating from tools like Sass.

I'm sure there must be a better way I'm missing, but couldn't find any discussions on the topic so thought I'd start one for reference.

Looking forward to your response! Thanks folks.

[BMCwebdev]

Well, this isn't really a solution, but something to think about. You can use one definedvar inside of another in StyleX. You could use rrggbbaa values if you want to keep with your HEX. You could have a function that accepts the hex and a opacity value and return the rrggbbaa

function hexToRRGGBBAA(hex: string, opacity: number): string {
  // Remove the hash at the start if it's there
  hex = hex.replace(/^#/, '');

  // If the hex code is shorthand, convert it to full length
  if (hex.length === 3) {
      hex = hex.split('').map(char => char + char).join('');
  }

  // Parse the hex color to get the RGB components
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);

  // Convert the opacity to an integer between 0 and 255
  const a = Math.round(opacity * 255);

  // Convert back to a hex string and append
  return `${hex}${a.toString(16).padStart(2, '0')}`.toUpperCase();
}

However, I don't know where in the StyleX sytem this would fit. defineVars only wants static values, so you wouldn't be able to do this:

export const colors = stylex.defineVars({
  primary: 'black',
});
export const opaqueColors = stylex.defineVars({
  primary: hexToRRGGBBAA(colors.primary, 0.5),
});

anyways, as I said, not an answer but maybe something can come of it? :-)

[fredrivett]

This is an interesting solution, thanks @BMCwebdev! I may have a play with this setup.

[nmn]

The cleanest answer here is to use the new native CSS feature Relative Color Syntax. With it, you'd be able to do something like this:

import * as stylex from "@stylexjs/stylex";

export const colors = stylex.defineVars({
  blue: '#0093ff',
});

And then use it like so:

import * as stylex from "@stylexjs/stylex";
import {vars} from './tokens';

const styles = stylex.create({
  blue: {
    color: vars.blue,
    backgroundColor: `rgb(from ${vars.blue} r g b / 0.2)`,
  }
});

This works natively in Chrome and Safari and hopefully, there is a polyfill for Firefox.

---

Another simple approach is to store the r, g, b values:

import * as stylex from "@stylexjs/stylex";

export const colors = stylex.defineVars({
  blue: '0, 147, 255',
});

And then use it like so:

import * as stylex from "@stylexjs/stylex";
import {vars} from './tokens';

const styles = stylex.create({
  blue: {
    color: `rgb(${vars.blue})`,
    backgroundColor: `rgba(${vars.blue}, 0.2)`,
  }
});

Yes, you'd need to manually wrap the variable in a rgb function in all cases, but it'll let you change the opacity as needed

---

Finally, you can also make three separate variables for h, s and l values:

import * as stylex from "@stylexjs/stylex";

export const colors = stylex.defineVars({
  blueH: '0',
  blueS: '147',
  blueL: '255',
});

And then use it like so:

import * as stylex from "@stylexjs/stylex";
import {vars} from './tokens';

const styles = stylex.create({
  blue: {
    color: `hsl(${vars.blueH}, ${vars.blueS}, ${vars.blueL})`,
    backgroundColor: `hsla(${vars.blueH}, ${vars.blueS}, ${vars.blueL}, 0.2)`,
  }
});

Here you can also use calc to use math to tweak the saturation or lightness as needed. For example for a lighter color you may do:

import * as stylex from "@stylexjs/stylex";
import {vars} from './tokens';

const styles = stylex.create({
  blue: {
    backgroundColor: `hsla(${vars.blueH}, ${vars.blueS}, calc(2 * ${vars.blueL}), 0.2)`,
  }
});

This is essentially the same set of capabilities as Relative Color Syntax, but works in all browsers today.

[fredrivett]

Thanks for this Naman! The relative color syntax looks handy, but as you say support whilst good isn't great yet. I think a combo setup of storing the rgb and using that to build vars to consume will probably be the way we go:

// colors.stylex.ts
import * as stylex from "@stylexjs/stylex";

export const rgbColors = stylex.defineVars({
  blue: '0, 147, 255',
});

export const colors = stylex.defineVars({
  blue: `rgb(${rgbColors.blue})`,
});

then used like so:

import * as stylex from "@stylexjs/stylex";

import { colors, rgbColors } from './colors.stylex';

const styles = stylex.create({
  blue: {
    color: colors.blue,
    backgroundColor: `rgba(${rgbColors.blue}, 0.2)`,
  }
});