@kabbage/sprout 0.13.2

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: (
  brand: (
    50: $kbg-brand
  ),
  primary: (
    50: $kbg-green-50,
    70: $kbg-green-70,
    80: $kbg-green-80,
    90: $kbg-green-90
  ),
  success: (
    50: $kbg-green-70
  ),
  warn: (
    50: $kbg-orange-50
  ),
  danger: (
    50: $kbg-red-50,
    80: $kbg-red-80
  ),
  info: (
    50: $kbg-blue-50,
    80: $kbg-blue-80
  ),
  neutral: (
    0: $kbg-gray-0,
    10: $kbg-gray-10,
    20: $kbg-gray-20,
    30: $kbg-gray-30,
    70: $kbg-gray-70,
    90: $kbg-gray-90
  ),
  interactive: (
    50: $kbg-blue-50,
    80: $kbg-blue-80
  )
) !default;

A map containing all Sprout color palettes.

Used By

@mixin spr-config-color-theme()

@function spr-palette()

Brand

Used for Kabbage branded elements.

Color Previews

50 #56c271 rgb(86, 194, 113) hsl(135, 47%, 55%)

Primary

Used for the main actions on a page.

Color Previews

50 #67d683 rgb(103, 214, 131) hsl(135, 58%, 62%)
70 #2ba148 rgb(43, 161, 72) hsl(135, 58%, 40%)
80 #1d6d31 rgb(29, 109, 49) hsl(135, 58%, 27%)
90 #11401d rgb(17, 64, 29) hsl(135, 58%, 16%)

Success

Used for contextual success messaging.

Color Previews

50 #2ba148 rgb(43, 161, 72) hsl(135, 58%, 40%)

Warn

Used for contextual warning messaging.

Color Previews

50 #e46d0c rgb(228, 109, 12) hsl(27, 90%, 47%)

Danger

Used for contextual error messaging.

Color Previews

50 #dd1d33 rgb(221, 29, 51) hsl(353, 77%, 49%)
80 #710f1a rgb(113, 15, 26) hsl(353, 77%, 25%)

Info

Used for contextual general messaging.

Color Previews

50 #056ad7 rgb(5, 106, 215) hsl(211, 95%, 43%)
80 #033e7d rgb(3, 62, 125) hsl(211, 95%, 25%)

Neutral

Used for text, borders, shadows, and backgrounds.

Color Previews

0 #ffffff rgb(255, 255, 255) hsl(0, 0%, 100%)
10 #f7f7f8 rgb(247, 247, 248) hsl(240, 7%, 97%)
20 #e4e5e7 rgb(228, 229, 231) hsl(220, 6%, 90%)
30 #bbbdc4 rgb(187, 189, 196) hsl(227, 7%, 75%)
70 #6b6f7b rgb(107, 111, 123) hsl(225, 7%, 45%)
90 #18191b rgb(24, 25, 27) hsl(220, 6%, 10%)

Interactive Blue

Used for interactive elements such as links.

Color Previews

50 #056ad7 rgb(5, 106, 215) hsl(211, 95%, 43%)
80 #033e7d rgb(3, 62, 125) hsl(211, 95%, 25%)

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