CSS variable color

Structure and defining

Each hex color is in hsla() form defined by the define-color() mixin, split into four CSS variables, where suffix h indicates hue, s saturation, l lightness and a alpha.

The single CSS color is defined as follows.

--#{$var-prefix}-#{$name}-color-h: hue($color)
--#{$var-prefix}-#{$name}-color-s: saturation($color)
--#{$var-prefix}-#{$name}-color-l: lightness($color)
--#{$var-prefix}-#{$name}-color-a: alpha($color)

The SCSS $var-prefix variable is to make CSS variable unique, $name is the color name and $color is the hex color to obtain hue, saturation, lightness and alpha.

It's possible to customize the CSS variables' names with the SCSS variable $var-prefix, which by default is set to s.

For example, the primary-color is built from the CSS variables based on hex #5755d9.

--s-primary-color-h: 240.9090909091deg; // Hue.
--s-primary-color-s: 63.4615384615%; // Saturation.
--s-primary-color-l: 59.2156862745%; // Lightness.
--s-primary-color-a: 1; // Alpha.

It is core color and it's defined in the _core-colors.scss file.

@use '../mixins/define-color' as *;
@use '../variables' as *;

:root, :host {
  // Primary.
  @include define-color('primary-color', $primary-color); // #5755d9
  @include define-color-based-on('primary-color-dark', 'primary-color', $lightness: -3%); // darken($primary-color, 3%)
  @include define-color-based-on('primary-color-light', 'primary-color', $lightness: +3%); // lighten($primary-color, 3%)
}

Each color that is based on settable color is defined by the mixin define-color-based-on(), and it's also split into four CSS variables, which values refer by using var() CSS function to settable colors CSS property names, where suffix h indicates hue, s saturation, l lightness and a alpha.

For example secondary-color that based on primary-color is defined in both :root and :host elements and built from the CSS variables as follows.

--s-secondary-color-h: var(--s-primary-color-h);
--s-secondary-color-s: var(--s-primary-color-s);
--s-secondary-color-l: calc(var(--s-primary-color-l) + 37.5%);
--s-secondary-color-a: var(--s-primary-color-a);

CSS variables that are based on others are also defined in both :root and :host elements, and secondary-color is also in the _core-colors.scss file.

@use '../mixins/define-color-based-on' as *;

:root, :host {
  // Secondary.
  @include define-color-based-on('secondary-color', 'primary-color', $lightness: +37.5%); // lighten($primary-color, 37.5%) !default;
  @include define-color-based-on('secondary-color-dark', 'secondary-color', $lightness: -3%); // darken($secondary-color, 3%) !default;
  @include define-color-based-on('secondary-color-light', 'secondary-color', $lightness: +3%); // lighten($secondary-color, 3%) !default;
}