Color variables

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

Overview (anchor)

The color palettes are all optional and 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.

Source code (anchor)

The color variables, utilities and modifiers are all compiled from the same individual documents for each primary color, you can view the source code for each from the latest release (v1.5.0) via the Github links below.

Colors and mixins

blue: stylemods/scss/color/blue.scss; stylemods/scss/color/mixins/blue.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/blue.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/blue.scss
red: stylemods/scss/color/red.scss; stylemods/scss/color/mixins/red.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/red.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/red.scss
green: stylemods/scss/color/green.scss; stylemods/scss/color/mixins/green.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/green.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/green.scss
orange: stylemods/scss/color/orange.scss; stylemods/scss/color/mixins/orange.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/orange.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/orange.scss
cyan: stylemods/scss/color/cyan.scss; stylemods/scss/color/mixins/cyan.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/cyan.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/cyan.scss
yellow: stylemods/scss/color/yellow.scss; stylemods/scss/color/mixins/yellow.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/yellow.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/yellow.scss
purple: stylemods/scss/color/purple.scss; stylemods/scss/color/mixins/purple.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/purple.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/purple.scss
pink: stylemods/scss/color/pink.scss; stylemods/scss/color/mixins/pink.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/pink.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/pink.scss
steelblue: stylemods/scss/color/steelblue.scss; stylemods/scss/color/mixins/steelblue.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/steelblue.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/steelblue.scss
firebrick: stylemods/scss/color/firebrick.scss; stylemods/scss/color/mixins/firebrick.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/firebrick.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/firebrick.scss
seagreen: stylemods/scss/color/seagreen.scss; stylemods/scss/color/mixins/seagreen.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/seagreen.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/seagreen.scss
darkcoral: stylemods/scss/color/darkcoral.scss; stylemods/scss/color/mixins/darkcoral.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/darkcoral.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/darkcoral.scss
cadetsteel: stylemods/scss/color/cadetsteel.scss; stylemods/scss/color/mixins/cadetsteel.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/cadetsteel.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/cadetsteel.scss
lemon: stylemods/scss/color/lemon.scss; stylemods/scss/color/mixins/lemon.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/lemon.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/lemon.scss
rebeccapurple: stylemods/scss/color/rebeccapurple.scss; stylemods/scss/color/mixins/rebeccapurple.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/rebeccapurple.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/rebeccapurple.scss
rosypink: stylemods/scss/color/rosypink.scss; stylemods/scss/color/mixins/rosypink.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/rosypink.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/rosypink.scss
tan: stylemods/scss/color/tan.scss; stylemods/scss/color/mixins/tan.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/tan.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/tan.scss
olive: stylemods/scss/color/olive.scss; stylemods/scss/color/mixins/olive.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/olive.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/olive.scss
rosewood: stylemods/scss/color/rosewood.scss; stylemods/scss/color/mixins/rosewood.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/rosewood.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/rosewood.scss
gray: stylemods/scss/color/gray.scss; stylemods/scss/color/mixins/gray.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/gray.scss; https://github.com/pmbrown/StyleMods/blob/main/scss/color/mixins/gray.scss

Shared documentation about how to customize the default property values for the styles using the Sass and CSS variables is provided on the customizing page.