v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?

Color

Theme colors, quick overview of the palette system for consitent control of colors used within Figuration, and the available color contrast SASS functions.

Page Contents

Themes #

Here are the names and base color values for the color themes used throughout Figuration. These colors are used to expand into a palette style color system, as seen below.

primary
secondary
success
info
warning
danger
light
dark

The pre-defined color variables are available when building your own components.

.custom-element {
color: $primary;
}

Palette #

Figuration uses a simplified color palettes extended from our base colors, similar to the concept by Google's Material color palettes.

By 'simplified' we mean the base colors are simply mixed against white or black in stepped levels to create a color scale.

Since our base colors tend to be on the dark side, there is a skew in the mixing percentages between the light and dark sides so that we don't reach pure black before hitting the top of the scale.

More information and examples about using the color palette and related utilities is available on the color utilities page.

Conveying Meaning to Assistive Technologies

Please refer to the Accessiblity notes about conveying meaning with color.

primary

500
50
100
200
300
400
500
600
700
800
900

secondary

500
50
100
200
300
400
500
600
700
800
900

success

500
50
100
200
300
400
500
600
700
800
900

info

500
50
100
200
300
400
500
600
700
800
900

warning

500
50
100
200
300
400
500
600
700
800
900

danger

500
50
100
200
300
400
500
600
700
800
900

uibase

500
50
100
200
300
400
500
600
700
800
900

gray

500
50
100
200
300
400
500
600
700
800
900

palette() #

Mix your own colors using the palette function.

palette($color, $level)
Argument Type Default Description
$color string '' The base color to mix against.
$level integer 500 Valid levels are integer values 0-1000, with 0 being the lightest, 1000 being the darkest, 500 results in an unchanged color. Special values: level < 0 = #fff, level > 1000 = #000.

Sample usage within SASS:

.custom-element {
color: palette($primary, 600);
}

Contrast #

Figuration includes a handful of color contrast functions based the WCAG 2.1 minimum contrast specification, using the related contrast ratio and relative luminance formulas to determine contrast ratios.

color-contrast() #

Returns either a light (#fff) or dark (#262d34) color compared against a given one based on the minimum contrast ratio setting.

color-contrast($color, $light: $color-contrast-base-light, $dark: $color-contrast-base-dark);
Argument Type Default Description
$color string '' The base color to compare against.
$light string $color-contrast-base-light Light color to use for auto-determination result.
$dark string $color-contrast-base-dark Dark color to use for auto-determination result.

color-max-contrast() #

Returns either white (#fff) or black (#000) depending on which color has the maximum contrast ratio based against the given color.

color-max-contrast($color);
Argument Type Default Description
$color string '' The base color to compare against.

color-auto-contrast() #

Check to see if the defined light (#fff) or dark (#262d34) color meet minimum contrast against a given color. If neither meet minumum contrast, then return white or black depending on the best contrast ratio.

color-auto-contrast($color, $light: $color-contrast-base-light, $dark: $color-contrast-base-dark);
Argument Type Default Description
$color string '' The base color to compare against.
$light string $color-contrast-base-light Light color to use for auto-determination result.
$dark string $color-contrast-base-dark Dark color to use for auto-determination result.

color-if-contrast() #

Compare a foreground color against a background color. Returns the foreground color if it passes the minimum contrast ratio, otherwise return the result from color-auto-contrast().

Check to see if the defined light (#fff) or dark (#262d34) color meet minimum contrast against a given color. If neither meet minumum contrast, then return white or black depending on the best contrast ratio.

color-if-contrast($colorfore, $colorback, $light: $color-contrast-base-light, $dark: $color-contrast-base-dark);
Argument Type Default Description
$colorfore string '' Foreground color to use in comparison.
$colorback string '' Background color to use in comparison.
$light string $color-contrast-base-light Light color to use for auto-determination result.
$dark string $color-contrast-base-dark Dark color to use for auto-determination result.

Adjusting Themes #

Add Color #

Add a color to all themes by appending it to the $base-colors map.

$base-colors: (
"new-color": #990099
);

Add Mixed Theme #

Figuration uses mixed themes to build out our components. This way color stays consitent across all aspects of the component.

You can mix your own theme by using the _mix-context-colors() function.

_mix-context-colors($colors, $levels);
Argument Type Default Description
$color string '' The base color to mix with.
$levels map '' Palette levels for each state of a contextual element. Refer to the $level-control variable for the map specifications.
// Adding a mixed theme with custom mix levels
$mix-levels: (
"bg": 550,
"color": -1,
"border-color": 650,
"hover-bg": 650,
"hover-color": -1,
"hover-border-color": 750,
"active-bg": 750,
"active-color": -1,
"active-border-color": 750
);

$mixed-theme = _mix-context-colors(#990099, $mix-levels)
$btn-themes: map-merge($btn-themes, $mixed-theme);

Add Custom Theme #

You can also add a color map without using the color mixing function, allowing for greater customization.

// Adding a custom theme
$custom-theme: (
"purple": (
"base": #990099,
"bg": #990099,
"color": #fff,
"border-color": #800080,
"hover-bg": #770077,
"hover-color": #fff,
"hover-border-color": #660066,
"active-bg": #ffb3ff,
"active-color": #990099,
"active-border-color": #ff29ff
);
);
// Required - functions
@import "../node_modules/figuration/scss/functions";

// Required - settings and mixins
@import "../node_modules/figuration/scss/settings";
@import "../node_modules/figuration/scss/mixins";

// Custom theme addition/removal go in this location
$btn-themes: map-merge($btn-themes, $custom-theme);

// Core and Components
@import "../node_modules/figuration/scss/reboot";
@import "../node_modules/figuration/scss/typography";
...

Remove Theme #

Just like removing from the color maps, use map-remove() to remove themes from $btn-themes.

As before, insert this setting after the Required sections and before the Core and Components section.

// Required - functions
@import "../node_modules/figuration/scss/functions";

// Required - settings and mixins
@import "../node_modules/figuration/scss/settings";
@import "../node_modules/figuration/scss/mixins";

// Custom theme addition/removal go in this location
$btn-themes: map-remove('warning', 'light', 'dark');

// Core and Components
@import "../node_modules/figuration/scss/reboot";
@import "../node_modules/figuration/scss/typography";
...

SASS Reference #

Variables #

The available Customization options, or Sass variables, that can be customized for colors.

Name Type Default Description
$palette-levels string 50 100 200 300 400 500 600 700 800 900 Levels used to generate colors within the palettes. Valid levels are integer values 0-1000, with 0 being the lightest, 1000 being the darkest, 500 results in an unchanged color.
$palette-interval-light percentage .2% The percentage per palette level, less than 500, used to mix a color against pure white (#fff).
$palette-interval-dark percentage .15% The percentage per palette level used, greater than 500, to mix a color against pure black (#000).
$level-control string
("bg": 500,
"color": -1,
"border-color": 600,
"hover-bg": 600,
"hover-color": -1,
"hover-border-color": 700,
"active-bg": 700,
"active-color": -1,
"active-border-color": 700)

Palette levels for use in _mix-context-colors() to determine standardized color mapping for control items, such as buttons.

Special values: level < 0 = #fff, level > 1000 = #000.

$level-context string
("bg": 100,
"color": 800,
"border-color": 200,
"hover-bg": 200,
"hover-color": 900,
"hover-border-color": 300,
"active-bg": 300,
"active-color": 900,
"active-border-color":300)

Palette levels for use in _mix-context-colors() to determine standardized color mapping for contextual items, such as alerts, lists, and tables.

Special values: level < 0 = #fff, level > 1000 = #000.

$level-delta-hover-color integer 100 Increase (or decrease with negative number) to alter color for the hover state of .text-{color}-(palette-level} utility classes.
$base-colors string
("primary": $primary,
"secondary": $secondary,
"info": $info,
"success": $success,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark)
Base color map used to generate the control and contextual variants.
$palette-colors string
("uibase": $uibase,
"primary": $primary,
"secondary": $secondary,
"info": $info,
"success": $success,
"warning": $warning,
"danger": $danger,
"gray": $gray)
Base color map used to generate the palette utility variants.
$root-colors map map-merge($base-colors, $palette-colors) Colors to output as CSS variables.
$color-contrast-min-ratio float 4.5 Minimum contrast ratio to use in Figuration's color contrast SASS functions. 4.5 is the WCAG 2.1 level AA specification for contrast.
$color-contrast-base-light string $white Default light color to be used with the color contrast functions.
$color-contrast-base-dark string $uibase-900 Default dark color to be used with the color contrast functions.

Mixins #

No mixins available.