Color variables

220 customizable CSS variable tokens for 20 different primary color palettes.

Overview (anchor)

The color palettes are all optional, the default colors can be customized to suit project parameters as required. The variable tokens are used for the color utilities and color modifiers so are required if any of the options are also included.

Colors (anchor)

The examples use the background color utilities which include the text colors shown below.

--blue-1

--blue-2

--blue-3

--blue-4

--blue-5

--blue-6

--blue-7

--blue-8

--blue-9

--blue-10

--blue-11

--red-1

--red-2

--red-3

--red-4

--red-5

--red-6

--red-7

--red-8

--red-9

--red-10

--red-11

--green-1

--green-2

--green-3

--green-4

--green-5

--green-6

--green-7

--green-8

--green-9

--green-10

--green-11

--orange-1

--orange-2

--orange-3

--orange-4

--orange-5

--orange-6

--orange-7

--orange-8

--orange-9

--orange-10

--orange-11

--cyan-1

--cyan-2

--cyan-3

--cyan-4

--cyan-5

--cyan-6

--cyan-7

--cyan-8

--cyan-9

--cyan-10

--cyan-11

--yellow-1

--yellow-2

--yellow-3

--yellow-4

--yellow-5

--yellow-6

--yellow-7

--yellow-8

--yellow-9

--yellow-10

--yellow-11

--purple-1

--purple-2

--purple-3

--purple-4

--purple-5

--purple-6

--purple-7

--purple-8

--purple-9

--purple-10

--purple-11

--pink-1

--pink-2

--pink-3

--pink-4

--pink-5

--pink-6

--pink-7

--pink-8

--pink-9

--pink-10

--pink-11

--steelblue-1

--steelblue-2

--steelblue-3

--steelblue-4

--steelblue-5

--steelblue-6

--steelblue-7

--steelblue-8

--steelblue-9

--steelblue-10

--steelblue-11

--firebrick-1

--firebrick-2

--firebrick-3

--firebrick-4

--firebrick-5

--firebrick-6

--firebrick-7

--firebrick-8

--firebrick-9

--firebrick-10

--firebrick-11

--seagreen-1

--seagreen-2

--seagreen-3

--seagreen-4

--seagreen-5

--seagreen-6

--seagreen-7

--seagreen-8

--seagreen-9

--seagreen-10

--seagreen-11

--darkcoral-1

--darkcoral-2

--darkcoral-3

--darkcoral-4

--darkcoral-5

--darkcoral-6

--darkcoral-7

--darkcoral-8

--darkcoral-9

--darkcoral-10

--darkcoral-11

--cadetsteel-1

--cadetsteel-2

--cadetsteel-3

--cadetsteel-4

--cadetsteel-5

--cadetsteel-6

--cadetsteel-7

--cadetsteel-8

--cadetsteel-9

--cadetsteel-10

--cadetsteel-11

--lemon-1

--lemon-2

--lemon-3

--lemon-4

--lemon-5

--lemon-6

--lemon-7

--lemon-8

--lemon-9

--lemon-10

--lemon-11

--rebeccapurple-1

--rebeccapurple-2

--rebeccapurple-3

--rebeccapurple-4

--rebeccapurple-5

--rebeccapurple-6

--rebeccapurple-7

--rebeccapurple-8

--rebeccapurple-9

--rebeccapurple-10

--rebeccapurple-11

--rosypink-1

--rosypink-2

--rosypink-3

--rosypink-4

--rosypink-5

--rosypink-6

--rosypink-7

--rosypink-8

--rosypink-9

--rosypink-10

--rosypink-11

--tan-1

--tan-2

--tan-3

--tan-4

--tan-5

--tan-6

--tan-7

--tan-8

--tan-9

--tan-10

--tan-11

--olive-1

--olive-2

--olive-3

--olive-4

--olive-5

--olive-6

--olive-7

--olive-8

--olive-9

--olive-10

--olive-11

--rosewood-1

--rosewood-2

--rosewood-3

--rosewood-4

--rosewood-5

--rosewood-6

--rosewood-7

--rosewood-8

--rosewood-9

--rosewood-10

--rosewood-11

--gray-1

--gray-2

--gray-3

--gray-4

--gray-5

--gray-6

--gray-7

--gray-8

--gray-9

--gray-10

--gray-11

Using the module (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 all-primary-colors-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 all-primary-colors-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 blue-variables;
  @include red-variables;
  @include green-variables;
  @include orange-variables;
  @include cyan-variables;
  @include yellow-variables;
  @include purple-variables;
  @include pink-variables;
  @include steelblue-variables;
  @include firebrick-variables;
  @include seagreen-variables;
  @include darkcoral-variables;
  @include cadetsteel-variables;
  @include lemon-variables;
  @include rebeccapurple-variables;
  @include rosypink-variables;  
  @include tan-variables;
  @include olive-variables;
  @include rosewood-variables;
  @include gray-variables;
}

Each palette can also be included already contained within individual :where(html) pseudo-class wrapper styles, which if preferred can also be customized to your preferred method as described under token styles on the customizing page.

custom.scss

@use "stylemods/scss" as *;
@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 steelblue-variables-css;
@include firebrick-variables-css;
@include seagreen-variables-css;
@include darkcoral-variables-css;
@include cadetsteel-variables-css;
@include lemon-variables-css;
@include rebeccapurple-variables-css;
@include rosypink-variables-css;  
@include tan-variables-css;
@include olive-variables-css;
@include rosewood-variables-css;
@include gray-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-blue-variables:             true;
$enable-red-variables:              true;
$enable-green-variables:            true;
$enable-orange-variables:           true;
$enable-cyan-variables:             true;
$enable-yellow-variables:           true;
$enable-purple-variables:           true;
$enable-pink-variables:             true;
$enable-steelblue-variables:        true;
$enable-firebrick-variables:        true;
$enable-seagreen-variables:         true;
$enable-darkcoral-variables:        true;
$enable-cadetsteel-variables:       true;
$enable-lemon-variables:            true;
$enable-rebeccapurple-variables:    true;
$enable-rosypink-variables:         true;
$enable-olive-variables:            true;
$enable-tan-variables:              true;
$enable-rosewood-variables:         true;
$enable-gray-variables:             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)

Update v1.3.4 The new 'color/mixins' folder includes the mixins for compiling the variables, utilities and modifiers.

Both the modules and framework options use the same methods for customizing the colors, each palette includes two documents for compiling the styles, for practical purposes only the blue colors source code is demonstrated below but all primary colors use the same configuration.

The color values for the variable tokens and the optional color utilities and color modifiers are included in the properties document for each color, the mixins for compiling the variables and styles are included separately:

blue.scss

// ---------------------------------------------------------- 
// Blue
// ----------------------------------------------------------
$blue:                #005ce6 !default;
$blue-1:              color-mix(in srgb, var(--blue) 28%, #fff) !default;
$blue-2:              color-mix(in srgb, var(--blue) 41%, #fff) !default;
$blue-3:              color-mix(in srgb, var(--blue) 58%, #fff) !default;
$blue-4:              color-mix(in srgb, var(--blue) 72%, #fff) !default;
$blue-5:              color-mix(in srgb, var(--blue) 87%, #fff) !default;
$blue-6:              var(--blue) !default;
$blue-7:              color-mix(in srgb, var(--blue) 85%, #000) !default;
$blue-8:              color-mix(in srgb, var(--blue) 72%, #000) !default;
$blue-9:              color-mix(in srgb, var(--blue) 60%, #000) !default;
$blue-10:             color-mix(in srgb, var(--blue) 50%, #000) !default;
$blue-11:             color-mix(in srgb, var(--blue) 44%, #000) !default;

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

$blue-bg-text:        #fff !default;
$blue-bg:             var(--blue) !default;
$blue-bg-dark:        var(--blue-7) !default;
$blue-bg-light:       var(--blue-5) !default;

$blue-gradient:       linear-gradient(180deg, $blue-bg-light, $blue-bg, $blue-bg-dark) !default;

$blue-color-values:
  "blue"    $blue #fff,
  "blue-1"  $blue-1 #000,
  "blue-2"  $blue-2 #000,
  "blue-3"  $blue-3 #000,
  "blue-4"  $blue-4 #000,
  "blue-5"  $blue-5 #fff,
  "blue-6"  $blue-6 #fff,
  "blue-7"  $blue-7 #fff,
  "blue-8"  $blue-8 #fff,
  "blue-9"  $blue-9 #fff,
  "blue-10" $blue-10 #fff,
  "blue-11" $blue-11 #fff,
!default;

mixins/blue.scss

// ---------------------------------------------------------- 
// Blue mixins
// ----------------------------------------------------------
@use "modifiers" as *;
@use "../blue" as *;

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

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

// ---------------------------------------------------------- 
// Utilities
// ----------------------------------------------------------
@mixin backgrounds-blue-css {
  @each $name, $color, $text in $blue-color-values {
    .bg-#{$name} {
      color: $text;
      background-color: var(--#{$name});
    }
  }
}

@mixin borders-blue-css {
  @each $name, $color in $blue-color-values {
    .bd-#{$name} {
      border-color: var(--#{$name});
    }
  }
}

@mixin gradient-blue-css {
  .gradient-blue {
    color: $blue-bg-text;
    background-image: $blue-gradient;
  }
}

@mixin text-blue-css {
  @each $name, $color in $blue-color-values {
    .text-#{$name} {
      color: var(--#{$name});
    }
  }
}

// ---------------------------------------------------------- 
// Icons modifiers
// ----------------------------------------------------------
@mixin icons-blue-css {
  @each $name, $color in $blue-color-values {
    .ico-#{$name} {
      --ico: var(--#{$name});
    }
  }
}

// ---------------------------------------------------------- 
// Component modifiers
// ----------------------------------------------------------
@mixin accordion-blue-css {
  .accordion-blue {
    @include accordion-color-values($blue-bg-text, $blue-bg, $blue-bg-dark, $blue-bg-light);
  }
}

@mixin alert-blue-css {
  .alert-blue {
    @include alert-color-values($blue-bg-text, $blue-bg, $blue-bg-light);
  }
}

@mixin badge-blue-css {
  .badge-blue {
    @include badge-color-values($blue-bg-text, $blue-bg, $blue-bg-light);
  }
}

@mixin button-blue-css {
  .btn-blue {
    @include button-color-values($blue-bg-text, $blue-bg, $blue-bg-dark, $blue-bg-light, $blue-bg-light);
  }
}

@mixin card-blue-css {
  .card-blue {
    @include card-color-values($blue-bg-text, $blue-bg, $blue-bg-dark, $blue-bg-light, $blue-bg-light);
  }
}

@mixin dialog-blue-css {
  .dialog-blue {
    @include dialog-color-values($blue-bg-text, $blue-bg, $blue-bg-light);
  } 
}

@mixin dropdown-blue-css {
  .dropdown-blue {
    @include dropdown-color-values($blue-bg-text, $blue-bg, $blue-bg-dark, $blue-bg-light, $blue-bg-light);
  } 
}

@mixin list-group-blue-css {
  .list-group-blue {
    @include list-group-color-values($blue-bg-text, $blue-bg, $blue-bg-dark, $blue-bg-light);
  }
}

@mixin popover-blue-css {
  .popover-blue {
    @include popover-color-values($blue-bg-text, $blue-bg, $blue-bg-light);
  }
}

// ---------------------------------------------------------- 
// Combined mixins
// ----------------------------------------------------------
@mixin blue-utilities-css {
  @include backgrounds-blue-css;
  @include borders-blue-css;
  @include gradient-blue-css;
  @include text-blue-css;
}

@mixin blue-modifiers-css {
  @include icons-blue-css;
  @include accordion-blue-css;
  @include alert-blue-css;
  @include badge-blue-css;
  @include button-blue-css;
  @include card-blue-css;
  @include dialog-blue-css;
  @include dropdown-blue-css;
  @include list-group-blue-css;
  @include popover-blue-css;
}

@mixin blue-module-css {
  @include blue-variables-css;
  @include blue-utilities-css;
  @include blue-modifiers-css;
}

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