Colors

Color pallete and variants.

Sipster's color system includes 11 base colors, complemented with 5 tint/shade variants for each base color. The base colors are set via the raw $sds_color_{color} variables in the _colors.scss file. The full color ramps are programmatically generated via the $clr_scale-{x} variables and the $sds_colors:() map located within the same file.

It is strongly recommended to not edit or otherwise manipulate these core sass variables. Sipster has an extremely flexible and customizable theme mechanism which is where most customization should take place. Learn more about themes.

If you find yourself deviating away from Sipster's theming approach and needing to implement raw SDS colors (not recommended), there is a custom sass function to facilitate this. To use this function, simply pass the desired color-name (required) and value (optional) parameters to implement any color from Sipster's color palette.

sds-color("color-name", "value");

Example

The sds-color() function can be implemented in any CSS property that accepts a color value (all colors currently resolve to a hex code).

// HTML elements and CSS selectors 

h1 {
  color: sds-color(blue, 80);
}

.myCustomClass {
  background: sds-color(white);
  color: sds-color(grey, 90);
}


// Scoped to a CSS Custom Property('Token') 

:root {
  --sds_theme_color_primary: sds-color(blue);
  --sds_theme_color_primary_interactive: sds-color(blue, 60);
}

Sipster has an extremely flexible and customizable theme mechanism which is where most color application should take place. The second scenario in the example above is a tiny glimpse at Sipster's approach to theming. Learn more about theming.