Using CSS variable color

To easily use color defined in four CSS variables with the help comes color() function, which takes six parameters: $name, $hue, $lightness, $saturation, $alpha, and $prefix, and returns color in hsla() form.

There is only $name parameter required, and the $hue $lightness $saturation default values are set to 0, $alpha default value is set to 1, and $prefix default value is equal to $var-prefix. So, it's very easy to insert the color into any style and change the default value of the CSS variable color, for example primary-color or primary-color-dark can be inserted as follows.

@use 'node_modules/@angular-package/spectre.css/functions' as *;
// or
@use 'node_modules/@angular-package/spectre.css/src/functions/color' as *; 

.primary-color {
  background: color('primary-color');
}

.primary-color-dark {
  background: color('primary-color-dark');
}

With the optional parameters, it's possible to inject primary-color lighter or darker by 30%, and it's useful, especially on mixing background with font color, and it works like darken() and lighten(), but with the ability to change the value on the fly cause of the CSS variables.

@use 'node_modules/@angular-package/spectre.css/functions' as *;

.primary-color-lighter {
  background: color('primary-color', $lightness: -30%);
  color: color('primary-color', $lightness: 30%);
}

.primary-color-darker {
  background: color('primary-color', $lightness: -30%);
}

There are other SASS variables besides colors, that have equivalent CSS variables and default prefix s.