Color variables

Over 140 optional CSS variable tokens for 12 different primary and gray-scale colors.

Examples (anchor)

Update v1.3.3. The surface variables are now included on the surface colors page.

Gray

gray.scss

// ---------------------------------------------------------- 
// Gray
// ----------------------------------------------------------
// Variable colors
$gray:      #808080 !default;
$gray-1:    color-mix(in srgb, var(--gray) 25%, white) !default;
$gray-2:    color-mix(in srgb, var(--gray) 35%, white) !default;
$gray-3:    color-mix(in srgb, var(--gray) 55%, white) !default;
$gray-4:    color-mix(in srgb, var(--gray) 65%, white) !default;
$gray-5:    color-mix(in srgb, var(--gray) 75%, white) !default;
$gray-6:    var(--gray) !default;
$gray-7:    color-mix(in srgb, var(--gray) 80%, black) !default;
$gray-8:    color-mix(in srgb, var(--gray) 70%, black) !default;
$gray-9:    color-mix(in srgb, var(--gray) 60%, black) !default;
$gray-10:   color-mix(in srgb, var(--gray) 50%, black) !default;
$gray-11:   color-mix(in srgb, var(--gray) 40%, black) !default;

// Tokens style
$gray-tokens:       ':where(html)' !default;

// Variables tokens map
$gray-token-values: (
  "gray": $gray,
  "gray-1": $gray-1,
  "gray-2": $gray-2,
  "gray-3": $gray-3,
  "gray-4": $gray-4,
  "gray-5": $gray-5,
  "gray-6": $gray-6,
  "gray-7": $gray-7,
  "gray-8": $gray-8,
  "gray-9": $gray-9,
  "gray-10": $gray-10,
  "gray-11": $gray-11,
) !default;

// Variables mixins
@mixin gray-variables {
  @each $name, $value in $gray-token-values {
    --#{$name}: #{$value};
  }
}

@mixin gray-variables-css {
  #{$gray-tokens} {
    @include gray-variables;
  }
}

Blue

blue.scss

// ---------------------------------------------------------- 
// Blue variables
// ----------------------------------------------------------
// Variable colors
$blue:      #0066ff !default;
$blue-1:    color-mix(in srgb, var(--blue) 40%, white) !default;
$blue-2:    color-mix(in srgb, var(--blue) 50%, white) !default;
$blue-3:    color-mix(in srgb, var(--blue) 60%, white) !default;
$blue-4:    color-mix(in srgb, var(--blue) 70%, white) !default;
$blue-5:    color-mix(in srgb, var(--blue) 80%, white) !default;
$blue-6:    var(--blue) !default;
$blue-7:    color-mix(in srgb, var(--blue) 80%, black) !default;
$blue-8:    color-mix(in srgb, var(--blue) 70%, black) !default;
$blue-9:    color-mix(in srgb, var(--blue) 60%, black) !default;
$blue-10:   color-mix(in srgb, var(--blue) 50%, black) !default;
$blue-11:   color-mix(in srgb, var(--blue) 44%, black) !default;

// Tokens style
$blue-tokens:       ':where(html)' !default;

// Variables tokens map
$blue-token-values: (
  "blue": $blue,
  "blue-1": $blue-1,
  "blue-2": $blue-2,
  "blue-3": $blue-3,
  "blue-4": $blue-4,
  "blue-5": $blue-5,
  "blue-6": $blue-6,
  "blue-7": $blue-7,
  "blue-8": $blue-8,
  "blue-9": $blue-9,
  "blue-10": $blue-10,
  "blue-11": $blue-11,
) !default;

// Variables mixins
@mixin blue-variables {
  @each $name, $value in $blue-token-values {
    --#{$name}: #{$value};
  }
}

@mixin blue-variables-css {
  #{$blue-tokens} {
    @include blue-variables;
  }
}

Red

red.scss

// ---------------------------------------------------------- 
// Red
// ----------------------------------------------------------
// Variable colors
$red:      #ff0000 !default;
$red-1:    color-mix(in srgb, var(--red) 40%, white) !default;
$red-2:    color-mix(in srgb, var(--red) 50%, white) !default;
$red-3:    color-mix(in srgb, var(--red) 60%, white) !default;
$red-4:    color-mix(in srgb, var(--red) 70%, white) !default;
$red-5:    color-mix(in srgb, var(--red) 80%, white) !default;
$red-6:    var(--red) !default;  
$red-7:    color-mix(in srgb, var(--red) 80%, black) !default;
$red-8:    color-mix(in srgb, var(--red) 70%, black) !default;
$red-9:    color-mix(in srgb, var(--red) 60%, black) !default;
$red-10:   color-mix(in srgb, var(--red) 50%, black) !default;
$red-11:   color-mix(in srgb, var(--red) 44%, black) !default;

// Tokens style
$red-tokens:       ':where(html)' !default;

// Variables tokens map
$red-token-values: (
  "red": $red,
  "red-1": $red-1,
  "red-2": $red-2,
  "red-3": $red-3,
  "red-4": $red-4,
  "red-5": $red-5,
  "red-6": $red-6,
  "red-7": $red-7,
  "red-8": $red-8,
  "red-9": $red-9,
  "red-10": $red-10,
  "red-11": $red-11,
) !default;

// Variables mixins
@mixin red-variables {
  @each $name, $value in $red-token-values {
    --#{$name}: #{$value};
  }
}

@mixin red-variables-css {
  #{$red-tokens} {
    @include red-variables;
  }
}

Green

green.scss

// ---------------------------------------------------------- 
// Green
// ----------------------------------------------------------
// Variable colors
$green:      #006400 !default;
$green-1:    color-mix(in srgb, var(--green) 40%, white) !default;
$green-2:    color-mix(in srgb, var(--green) 50%, white) !default;
$green-3:    color-mix(in srgb, var(--green) 60%, white) !default;
$green-4:    color-mix(in srgb, var(--green) 70%, white) !default;
$green-5:    color-mix(in srgb, var(--green) 80%, white) !default;
$green-6:    var(--green) !default;  
$green-7:    color-mix(in srgb, var(--green) 80%, black) !default;
$green-8:    color-mix(in srgb, var(--green) 70%, black) !default;
$green-9:    color-mix(in srgb, var(--green) 60%, black) !default;
$green-10:   color-mix(in srgb, var(--green) 50%, black) !default;
$green-11:   color-mix(in srgb, var(--green) 44%, black) !default;

// Tokens style
$green-tokens:       ':where(html)' !default;

// Variables tokens map
$green-token-values: (
  "green": $green,
  "green-1": $green-1,
  "green-2": $green-2,
  "green-3": $green-3,
  "green-4": $green-4,
  "green-5": $green-5,
  "green-6": $green-6,
  "green-7": $green-7,
  "green-8": $green-8,
  "green-9": $green-9,
  "green-10": $green-10,
  "green-11": $green-11,
) !default;

// Variables mixins
@mixin green-variables {
  @each $name, $value in $green-token-values {
    --#{$name}: #{$value};
  }
}

@mixin green-variables-css {
  #{$green-tokens} {
    @include green-variables;
  }
}

Orange

orange.scss

// ---------------------------------------------------------- 
// Orange
// ----------------------------------------------------------
// Variable colors
$orange:      #ff981a !default;
$orange-1:    color-mix(in srgb, var(--orange) 45%, white) !default;
$orange-2:    color-mix(in srgb, var(--orange) 55%, white) !default;
$orange-3:    color-mix(in srgb, var(--orange) 65%, white) !default;
$orange-4:    color-mix(in srgb, var(--orange) 75%, white) !default;
$orange-5:    color-mix(in srgb, var(--orange) 85%, white) !default;
$orange-6:    var(--orange) !default;  
$orange-7:    color-mix(in srgb, var(--orange) 92%, black) !default;
$orange-8:    color-mix(in srgb, var(--orange) 82%, black) !default;
$orange-9:    color-mix(in srgb, var(--orange) 72%, black) !default;
$orange-10:   color-mix(in srgb, var(--orange) 62%, black) !default;
$orange-11:   color-mix(in srgb, var(--orange) 52%, black) !default;

// Tokens style
$orange-tokens:       ':where(html)' !default;

// Variables tokens map
$orange-token-values: (
  "orange": $orange,
  "orange-1": $orange-1,
  "orange-2": $orange-2,
  "orange-3": $orange-3,
  "orange-4": $orange-4,
  "orange-5": $orange-5,
  "orange-6": $orange-6,
  "orange-7": $orange-7,
  "orange-8": $orange-8,
  "orange-9": $orange-9,
  "orange-10": $orange-10,
  "orange-11": $orange-11,
) !default;

// Variables mixins
@mixin orange-variables {
  @each $name, $value in $orange-token-values {
    --#{$name}: #{$value};
  }
}

@mixin orange-variables-css {
  #{$orange-tokens} {
    @include orange-variables;
  }
}

Cyan

cyan.scss

// ---------------------------------------------------------- 
// Cyan
// ----------------------------------------------------------
// Variable colors
$cyan:      #00e6e6 !default;
$cyan-1:    color-mix(in srgb, var(--cyan) 20%, white) !default;
$cyan-2:    color-mix(in srgb, var(--cyan) 30%, white) !default;
$cyan-3:    color-mix(in srgb, var(--cyan) 40%, white) !default;
$cyan-4:    color-mix(in srgb, var(--cyan) 50%, white) !default;
$cyan-5:    color-mix(in srgb, var(--cyan) 60%, white) !default;
$cyan-6:    var(--cyan) !default;  
$cyan-7:    color-mix(in srgb, var(--cyan) 92%, black) !default;
$cyan-8:    color-mix(in srgb, var(--cyan) 82%, black) !default;
$cyan-9:    color-mix(in srgb, var(--cyan) 72%, black) !default;
$cyan-10:   color-mix(in srgb, var(--cyan) 62%, black) !default;
$cyan-11:   color-mix(in srgb, var(--cyan) 52%, black) !default;

// Tokens style
$cyan-tokens:       ':where(html)' !default;

// Variables tokens map
$cyan-token-values: (
  "cyan": $cyan,
  "cyan-1": $cyan-1,
  "cyan-2": $cyan-2,
  "cyan-3": $cyan-3,
  "cyan-4": $cyan-4,
  "cyan-5": $cyan-5,
  "cyan-6": $cyan-6,
  "cyan-7": $cyan-7,
  "cyan-8": $cyan-8,
  "cyan-9": $cyan-9,
  "cyan-10": $cyan-10,
  "cyan-11": $cyan-11,
) !default;

// Variables mixins
@mixin cyan-variables {
  @each $name, $value in $cyan-token-values {
    --#{$name}: #{$value};
  }
}

@mixin cyan-variables-css {
  #{$cyan-tokens} {
    @include cyan-variables;
  }
}

Yellow

yellow.scss

// ---------------------------------------------------------- 
// Yellow
// ----------------------------------------------------------
// Variable colors
$yellow:      #ffff00 !default;
$yellow-1:    color-mix(in srgb, var(--yellow) 30%, white) !default;
$yellow-2:    color-mix(in srgb, var(--yellow) 40%, white) !default;
$yellow-3:    color-mix(in srgb, var(--yellow) 50%, white) !default;
$yellow-4:    color-mix(in srgb, var(--yellow) 60%, white) !default;
$yellow-5:    color-mix(in srgb, var(--yellow) 70%, white) !default;
$yellow-6:    var(--yellow) !default;  
$yellow-7:    color-mix(in srgb, var(--yellow) 88%, black) !default;
$yellow-8:    color-mix(in srgb, var(--yellow) 78%, black) !default;
$yellow-9:    color-mix(in srgb, var(--yellow) 68%, black) !default;
$yellow-10:   color-mix(in srgb, var(--yellow) 58%, black) !default;
$yellow-11:   color-mix(in srgb, var(--yellow) 50%, black) !default;

// Tokens style
$yellow-tokens:       ':where(html)' !default;

// Variables tokens map
$yellow-token-values: (
  "yellow": $yellow,
  "yellow-1": $yellow-1,
  "yellow-2": $yellow-2,
  "yellow-3": $yellow-3,
  "yellow-4": $yellow-4,
  "yellow-5": $yellow-5,
  "yellow-6": $yellow-6,
  "yellow-7": $yellow-7,
  "yellow-8": $yellow-8,
  "yellow-9": $yellow-9,
  "yellow-10": $yellow-10,
  "yellow-11": $yellow-11,
) !default;

// Variables mixins
@mixin yellow-variables {
  @each $name, $value in $yellow-token-values {
    --#{$name}: #{$value};
  }
}

@mixin yellow-variables-css {
  #{$yellow-tokens} {
    @include yellow-variables;
  }
}

Purple

purple.scss

// ---------------------------------------------------------- 
// Purple
// ----------------------------------------------------------
// Variable colors
$purple:      #6f42c1 !default;
$purple-1:    color-mix(in srgb, var(--purple) 40%, white) !default;
$purple-2:    color-mix(in srgb, var(--purple) 50%, white) !default;
$purple-3:    color-mix(in srgb, var(--purple) 60%, white) !default;
$purple-4:    color-mix(in srgb, var(--purple) 70%, white) !default;
$purple-5:    color-mix(in srgb, var(--purple) 80%, white) !default;
$purple-6:    var(--purple) !default;  
$purple-7:    color-mix(in srgb, var(--purple) 73%, black) !default;
$purple-8:    color-mix(in srgb, var(--purple) 64%, black) !default;
$purple-9:    color-mix(in srgb, var(--purple) 56%, black) !default;
$purple-10:   color-mix(in srgb, var(--purple) 46%, black) !default;
$purple-11:   color-mix(in srgb, var(--purple) 40%, black) !default;

// Tokens style
$purple-tokens:       ':where(html)' !default;

// Variables tokens map
$purple-token-values: (
  "purple": $purple,
  "purple-1": $purple-1,
  "purple-2": $purple-2,
  "purple-3": $purple-3,
  "purple-4": $purple-4,
  "purple-5": $purple-5,
  "purple-6": $purple-6,
  "purple-7": $purple-7,
  "purple-8": $purple-8,
  "purple-9": $purple-9,
  "purple-10": $purple-10,
  "purple-11": $purple-11,
) !default;

// Variables mixins
@mixin purple-variables {
  @each $name, $value in $purple-token-values {
    --#{$name}: #{$value};
  }
}

@mixin purple-variables-css {
  #{$purple-tokens} {
    @include purple-variables;
  }
}

Pink

pink.scss

// ---------------------------------------------------------- 
// Pink
// ----------------------------------------------------------
// Variable colors
$pink:      #ff1493 !default;
$pink-1:    color-mix(in srgb, var(--pink) 48%, white) !default;
$pink-2:    color-mix(in srgb, var(--pink) 58%, white) !default;
$pink-3:    color-mix(in srgb, var(--pink) 68%, white) !default;
$pink-4:    color-mix(in srgb, var(--pink) 78%, white) !default;
$pink-5:    color-mix(in srgb, var(--pink) 88%, white) !default;
$pink-6:    var(--pink) !default;  
$pink-7:    color-mix(in srgb, var(--pink) 88%, black) !default;
$pink-8:    color-mix(in srgb, var(--pink) 78%, black) !default;
$pink-9:    color-mix(in srgb, var(--pink) 68%, black) !default;
$pink-10:   color-mix(in srgb, var(--pink) 58%, black) !default;
$pink-11:   color-mix(in srgb, var(--pink) 48%, black) !default;

// Tokens style
$pink-tokens:       ':where(html)' !default;

// Variables tokens map
$pink-token-values: (
  "pink": $pink,
  "pink-1": $pink-1,
  "pink-2": $pink-2,
  "pink-3": $pink-3,
  "pink-4": $pink-4,
  "pink-5": $pink-5,
  "pink-6": $pink-6,
  "pink-7": $pink-7,
  "pink-8": $pink-8,
  "pink-9": $pink-9,
  "pink-10": $pink-10,
  "pink-11": $pink-11,
) !default;

// Variables mixins
@mixin pink-variables {
  @each $name, $value in $pink-token-values {
    --#{$name}: #{$value};
  }
}

@mixin pink-variables-css {
  #{$pink-tokens} {
    @include pink-variables;
  }
}

Olive

olive.scss

// ---------------------------------------------------------- 
// Olive
// ----------------------------------------------------------
// Variable colors
$olive:      #556b2f !default;
$olive-1:    color-mix(in srgb, var(--olive) 45%, white) !default;
$olive-2:    color-mix(in srgb, var(--olive) 55%, white) !default;
$olive-3:    color-mix(in srgb, var(--olive) 65%, white) !default;
$olive-4:    color-mix(in srgb, var(--olive) 75%, white) !default;
$olive-5:    color-mix(in srgb, var(--olive) 85%, white) !default;
$olive-6:    var(--olive) !default;  
$olive-7:    color-mix(in srgb, var(--olive) 85%, black) !default;
$olive-8:    color-mix(in srgb, var(--olive) 72%, black) !default;
$olive-9:    color-mix(in srgb, var(--olive) 62%, black) !default;
$olive-10:   color-mix(in srgb, var(--olive) 52%, black) !default;
$olive-11:   color-mix(in srgb, var(--olive) 42%, black) !default;

// Tokens style
$olive-tokens:       ':where(html)' !default;

// Variables tokens map
$olive-token-values: (
  "olive": $olive,
  "olive-1": $olive-1,
  "olive-2": $olive-2,
  "olive-3": $olive-3,
  "olive-4": $olive-4,
  "olive-5": $olive-5,
  "olive-6": $olive-6,
  "olive-7": $olive-7,
  "olive-8": $olive-8,
  "olive-9": $olive-9,
  "olive-10": $olive-10,
  "olive-11": $olive-11,
) !default;

// Variables mixins
@mixin olive-variables {
  @each $name, $value in $olive-token-values {
    --#{$name}: #{$value};
  }
}

@mixin olive-variables-css {
  #{$olive-tokens} {
    @include olive-variables;
  }
}

Tan

tan.scss

// ---------------------------------------------------------- 
// Tan
// ----------------------------------------------------------
// Variable colors
$tan:      #b88747 !default;
$tan-1:    color-mix(in srgb, var(--tan) 45%, white) !default;
$tan-2:    color-mix(in srgb, var(--tan) 55%, white) !default;
$tan-3:    color-mix(in srgb, var(--tan) 65%, white) !default;
$tan-4:    color-mix(in srgb, var(--tan) 75%, white) !default;
$tan-5:    color-mix(in srgb, var(--tan) 85%, white) !default;
$tan-6:    var(--tan) !default;  
$tan-7:    color-mix(in srgb, var(--tan) 92%, black) !default;
$tan-8:    color-mix(in srgb, var(--tan) 82%, black) !default;
$tan-9:    color-mix(in srgb, var(--tan) 72%, black) !default;
$tan-10:   color-mix(in srgb, var(--tan) 62%, black) !default;
$tan-11:   color-mix(in srgb, var(--tan) 52%, black) !default;

// Tokens style
$tan-tokens:       ':where(html)' !default;

// Variables tokens map
$tan-token-values: (
  "tan": $tan,
  "tan-1": $tan-1,
  "tan-2": $tan-2,
  "tan-3": $tan-3,
  "tan-4": $tan-4,
  "tan-5": $tan-5,
  "tan-6": $tan-6,
  "tan-7": $tan-7,
  "tan-8": $tan-8,
  "tan-9": $tan-9,
  "tan-10": $tan-10,
  "tan-11": $tan-11,
) !default;

// Variables mixins
@mixin tan-variables {
  @each $name, $value in $tan-token-values {
    --#{$name}: #{$value};
  }
}

@mixin tan-variables-css {
  #{$tan-tokens} {
    @include tan-variables;
  }
}

Rosewood

rosewood.scss

// ---------------------------------------------------------- 
// Rosewood
// ----------------------------------------------------------
// Variable colors
$rosewood:      #9f6060 !default;
$rosewood-1:    color-mix(in srgb, var(--rosewood) 45%, white) !default;
$rosewood-2:    color-mix(in srgb, var(--rosewood) 55%, white) !default;
$rosewood-3:    color-mix(in srgb, var(--rosewood) 65%, white) !default;
$rosewood-4:    color-mix(in srgb, var(--rosewood) 75%, white) !default;
$rosewood-5:    color-mix(in srgb, var(--rosewood) 85%, white) !default;
$rosewood-6:    var(--rosewood) !default;  
$rosewood-7:    color-mix(in srgb, var(--rosewood) 92%, black) !default;
$rosewood-8:    color-mix(in srgb, var(--rosewood) 82%, black) !default;
$rosewood-9:    color-mix(in srgb, var(--rosewood) 72%, black) !default;
$rosewood-10:   color-mix(in srgb, var(--rosewood) 62%, black) !default;
$rosewood-11:   color-mix(in srgb, var(--rosewood) 52%, black) !default;

// Tokens style
$rosewood-tokens:       ':where(html)' !default;

// Variables tokens map
$rosewood-token-values: (
  "rosewood": $rosewood,
  "rosewood-1": $rosewood-1,
  "rosewood-2": $rosewood-2,
  "rosewood-3": $rosewood-3,
  "rosewood-4": $rosewood-4,
  "rosewood-5": $rosewood-5,
  "rosewood-6": $rosewood-6,
  "rosewood-7": $rosewood-7,
  "rosewood-8": $rosewood-8,
  "rosewood-9": $rosewood-9,
  "rosewood-10": $rosewood-10,
  "rosewood-11": $rosewood-11,
) !default;

// Variables mixins
@mixin rosewood-variables {
  @each $name, $value in $rosewood-token-values {
    --#{$name}: #{$value};
  }
}

@mixin rosewood-variables-css {
  #{$rosewood-tokens} {
    @include rosewood-variables;
  }
}

Steelblue

steelblue.scss

// ---------------------------------------------------------- 
// Steelblue
// ----------------------------------------------------------
// Variable colors
$steelblue:      #4682b4 !default;
$steelblue-1:    color-mix(in srgb, var(--steelblue) 45%, white) !default;
$steelblue-2:    color-mix(in srgb, var(--steelblue) 55%, white) !default;
$steelblue-3:    color-mix(in srgb, var(--steelblue) 65%, white) !default;
$steelblue-4:    color-mix(in srgb, var(--steelblue) 75%, white) !default;
$steelblue-5:    color-mix(in srgb, var(--steelblue) 85%, white) !default;
$steelblue-6:    var(--steelblue) !default;  
$steelblue-7:    color-mix(in srgb, var(--steelblue) 92%, black) !default;
$steelblue-8:    color-mix(in srgb, var(--steelblue) 82%, black) !default;
$steelblue-9:    color-mix(in srgb, var(--steelblue) 72%, black) !default;
$steelblue-10:   color-mix(in srgb, var(--steelblue) 62%, black) !default;
$steelblue-11:   color-mix(in srgb, var(--steelblue) 52%, black) !default;

// Tokens style
$steelblue-tokens:       ':where(html)' !default;

// Variables tokens map
$steelblue-token-values: (
  "steelblue": $steelblue,
  "steelblue-1": $steelblue-1,
  "steelblue-2": $steelblue-2,
  "steelblue-3": $steelblue-3,
  "steelblue-4": $steelblue-4,
  "steelblue-5": $steelblue-5,
  "steelblue-6": $steelblue-6,
  "steelblue-7": $steelblue-7,
  "steelblue-8": $steelblue-8,
  "steelblue-9": $steelblue-9,
  "steelblue-10": $steelblue-10,
  "steelblue-11": $steelblue-11,
) !default;

// Variables mixins
@mixin steelblue-variables {
  @each $name, $value in $steelblue-token-values {
    --#{$name}: #{$value};
  }
}

@mixin steelblue-variables-css {
  #{$steelblue-tokens} {
    @include steelblue-variables;
  }
}

Using the modules (anchor)

To use the module load the StyleMods scss directory as follows (changing the path to suit the source files location as required) then include the Sass mixin(s) as demonstrated below.

All colors (anchor)

All the color tokens can be included as top level variables using either a :where(html) or :root pseudo-class wrapper style as preferred:

custom.scss

@use "stylemods/scss" as *;
:where(html) {
  @include color-variables;
}

They can also be included already contained within a :where(html) pseudo-class wrapper style that if preferred can customized to use :root or another selector as described further below.

custom.scss

@use "stylemods/scss" as *;
@include color-variables-css;

Individual colors (anchor)

All the color token palettes can included individually using your preferred wrapper style:

custom.scss

@use "stylemods/scss" as *;
:where(html) {
  @include gray-variables;
  @include blue-variables;
  @include red-variables;
  @include green-variables;
  @include orange-variables;
  @include cyan-variables;
  @include yellow-variables;
  @include purple-variables;
  @include pink-variables;
  @include olive-variables;
  @include tan-variables;
  @include rosewood-variables;
  @include steelblue-variables;
}

Each palette can also be included already contained within individual :where(html) pseudo-class wrapper styles which if preferred can be customized as described below.

custom.scss

@use "stylemods/scss" as *;
@include gray-variables-css;
@include blue-variables-css;
@include red-variables-css;
@include green-variables-css;
@include orange-variables-css;
@include cyan-variables-css;
@include yellow-variables-css;
@include purple-variables-css;
@include pink-variables-css;
@include olive-variables-css;
@include tan-variables-css;
@include rosewood-variables-css;
@include steelblue-variables-css;

Using the framework (anchor)

Using the recommended custom setup enable the styles in an overrides document:

overrides.scss

@use "stylemods/scss/configuration" as *;
$enable-gray:         true;
$enable-blue:         true;
$enable-red:          true;
$enable-green:        true;
$enable-orange:       true;
$enable-cyan:         true;
$enable-yellow:       true;
$enable-purple:       true;
$enable-pink:         true;
$enable-olive:        true;
$enable-tan:          true;
$enable-rosewood:     true;
$enable-steelblue:    true;

Include the overrides and the framework styles with your custom document for compiling the framework:

custom.scss

@use "overrides";
@use "stylemods/scss/stylemods";

See using the framework for more information including how the styles can also be compiled within cascade layers.

Source code (anchor)

The modules and framework use the same methods for customizing. For demonstrative purposes only the source code for the blue colors are included but all primary colors use the same method.

blue.scss

// ---------------------------------------------------------- 
// Blue variables
// ----------------------------------------------------------
// Variable colors
$blue:      #0066ff !default;
$blue-1:    color-mix(in srgb, var(--blue) 40%, white) !default;
$blue-2:    color-mix(in srgb, var(--blue) 50%, white) !default;
$blue-3:    color-mix(in srgb, var(--blue) 60%, white) !default;
$blue-4:    color-mix(in srgb, var(--blue) 70%, white) !default;
$blue-5:    color-mix(in srgb, var(--blue) 80%, white) !default;
$blue-6:    var(--blue) !default;
$blue-7:    color-mix(in srgb, var(--blue) 80%, black) !default;
$blue-8:    color-mix(in srgb, var(--blue) 70%, black) !default;
$blue-9:    color-mix(in srgb, var(--blue) 60%, black) !default;
$blue-10:   color-mix(in srgb, var(--blue) 50%, black) !default;
$blue-11:   color-mix(in srgb, var(--blue) 44%, black) !default;

// Tokens style
$blue-tokens:       ':where(html)' !default;

// Variables tokens map
$blue-token-values: (
  "blue": $blue,
  "blue-1": $blue-1,
  "blue-2": $blue-2,
  "blue-3": $blue-3,
  "blue-4": $blue-4,
  "blue-5": $blue-5,
  "blue-6": $blue-6,
  "blue-7": $blue-7,
  "blue-8": $blue-8,
  "blue-9": $blue-9,
  "blue-10": $blue-10,
  "blue-11": $blue-11,
) !default;

// Variables mixins
@mixin blue-variables {
  @each $name, $value in $blue-token-values {
    --#{$name}: #{$value};
  }
}

@mixin blue-variables-css {
  #{$blue-tokens} {
    @include blue-variables;
  }
}

To view the source code for all the colors please see the color directory of the StyleMods repository.