Color

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.

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.

palette()

Mix your own colors using the palette function.

palette($color, $level)

Sample usage within SASS:

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

Contrast

Figuration includes a handful of color contrast functions based on the WCAG 2.1 minimum contrast specification formulas for determining contrast ratio and relative luminance.

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);

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);

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);

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);

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);

// 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/settings-options";
@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/settings-options";
@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.

("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)

("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)

("primary": $primary,
"secondary": $secondary,
"info": $info,
"success": $success,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark)

("uibase": $uibase,
"primary": $primary,
"secondary": $secondary,
"info": $info,
"success": $success,
"warning": $warning,
"danger": $danger,
"gray": $gray)

Mixins

No mixins available.