@kabbage/sprout 2.7.1

Color Tokens

All colors in Sprout ultimately come from color tokens. The color tokens are organized into a set of color palettes, each palette mapping to a functional domain / use case. Inside of each palette, colors are labelled numerically corresponding to their approximate lightness where 0 == pure white and 100 == pure black. The core color of any given palette (if applicable) will always map to 50.

$spr-tokens-color-theme (map)

scss 
$spr-tokens-color-theme: (
  primary: (
    50: $blue-40,
    70: $blue-50,
    80: $blue-80,
    90: $blue-90
  ),
  success: (
    10: $green-10,
    40: $green-40,
    50: $green-50,
    80: $green-80
  ),
  warn: (
    10: $orange-10,
    40: $orange-40,
    50: $orange-50,
    80: $orange-80
  ),
  danger: (
    10: $red-10,
    40: $red-40,
    50: $red-50,
    80: $red-80
  ),
  info: (
    10: $blue-10,
    40: $blue-40,
    50: $blue-50,
    80: $blue-80
  ),
  neutral: (
    0: $gray-0,
    10: $gray-10,
    20: $gray-20,
    30: $gray-30,
    40: $gray-40,
    50: $gray-50,
    70: $gray-70,
    90: $gray-90
  ),
  interactive: (
    50: $blue-50,
    80: $blue-80
  ),
  dataviz-positive: (
    10: $dataviz-positive-10,
    50: $dataviz-positive-50
  ),
  dataviz-negative: (
    10: $dataviz-negative-10,
    50: $dataviz-negative-50
  )
) !default;

A map containing all Sprout color palettes.

Used By

@mixin spr-config-color-theme()

@function spr-palette()

Primary

Used for the main actions on a page.

Color Previews

50 #74c5fb rgb(116, 197, 251) hsl(204, 94%, 72%)
70 #006fcf rgb(0, 111, 207) hsl(208, 100%, 41%)
80 #00175a rgb(0, 23, 90) hsl(225, 100%, 18%)
90 #000c2b rgb(0, 12, 43) hsl(223, 100%, 8%)

Success

Used for contextual success messaging.

Color Previews

10 #e5f2ec rgb(229, 242, 236) hsl(152, 33%, 92%)
40 #53d4a2 rgb(83, 212, 162) hsl(157, 60%, 58%)
50 #048767 rgb(4, 135, 103) hsl(165, 94%, 27%)
80 #282f2c rgb(40, 47, 44) hsl(154, 8%, 17%)

Warn

Used for contextual warning messaging.

Color Previews

10 #fcefe6 rgb(252, 239, 230) hsl(25, 79%, 95%)
40 #ffc03d rgb(255, 192, 61) hsl(41, 100%, 62%)
50 #ea700a rgb(234, 112, 10) hsl(27, 92%, 48%)
80 #3c2528 rgb(60, 37, 40) hsl(352, 24%, 19%)

Danger

Used for contextual error messaging.

Color Previews

10 #f8eae6 rgb(248, 234, 230) hsl(13, 56%, 94%)
40 #f77564 rgb(247, 117, 100) hsl(7, 90%, 68%)
50 #b42c01 rgb(180, 44, 1) hsl(14, 99%, 35%)
80 #3b2e2c rgb(59, 46, 44) hsl(8, 15%, 20%)

Info

Used for contextual general messaging.

Color Previews

10 #e5f0fa rgb(229, 240, 250) hsl(209, 68%, 94%)
40 #74c5fb rgb(116, 197, 251) hsl(204, 94%, 72%)
50 #006fcf rgb(0, 111, 207) hsl(208, 100%, 41%)
80 #00175a rgb(0, 23, 90) hsl(225, 100%, 18%)

Neutral

Used for text, borders, shadows, and backgrounds.

Color Previews

0 #ffffff rgb(255, 255, 255) hsl(0, 0%, 100%)
10 #f7f8f9 rgb(247, 248, 249) hsl(210, 14%, 97%)
20 #ecedee rgb(236, 237, 238) hsl(210, 6%, 93%)
30 #c8c9c7 rgb(200, 201, 199) hsl(90, 2%, 78%)
40 #97999b rgb(151, 153, 155) hsl(210, 2%, 60%)
50 #737373 rgb(115, 115, 115) hsl(0, 0%, 45%)
70 #53565a rgb(83, 86, 90) hsl(214, 4%, 34%)
90 #1a1a1a rgb(26, 26, 26) hsl(0, 0%, 10%)

Interactive Blue

Used for interactive elements such as links.

Color Previews

50 #006fcf rgb(0, 111, 207) hsl(208, 100%, 41%)
80 #00175a rgb(0, 23, 90) hsl(225, 100%, 18%)

Dataviz Positive

Used to indicate positive valued data in visualizations

Color Previews

10 #dbf1f1 rgb(219, 241, 241) hsl(180, 44%, 90%)
50 #0fa3a1 rgb(15, 163, 161) hsl(179, 83%, 35%)

Dataviz Negative

Used to indicate negative valued data in visualizations

Color Previews

10 #fee7e7 rgb(254, 231, 231) hsl(0, 92%, 95%)
50 #f7625f rgb(247, 98, 95) hsl(1, 90%, 67%)

$spr-tokens-color-lighten (number)

scss 
$spr-tokens-color-lighten: 16%;

Token used for ad hoc lightening of core colors for interactive states.

Used By

@function spr-lighten()

$spr-tokens-color-darken (number)

scss 
$spr-tokens-color-darken: 8%;

Token used for for ad hoc darkening of core colors for interactive states.

Used By

@function spr-darken()

$spr-tokens-color-darken-more (number)

scss 
$spr-tokens-color-darken-more: 16%;

Token used for for ad hoc further darkening of core colors for interactive states.

Used By

@function spr-darken-more()

Configuration

@mixin spr-config-color-theme()

Configures Sprout color tokens by recursively merging in the provided map.

Parameters

$custom-color-theme: () (map)

Sprout color theme that matches the form of $spr-tokens-color-theme

Used By

@mixin spr-config()

Getter Functions

@function spr-palette()

Gets a color palette given a palette token.

Parameters

$palette-name: (string)

A palette token such as ‘primary’

Requires

@function map-get-strict()

$spr-tokens-color-theme (map)