@function color()

Easily grab a color from a map.

Parameters & Return

$map: (Map)

The map containing the color value.

$key: (Number|String)

The key for the desired value.

@return (Color)

The desired color.

@error

#{inspect($map)} map not found!

@error

No key #{inspect($key)} found in #{$map}!

Used By

@function primary-color()

@function neutral-color()

@function success-color()

@function warning-color()

@function danger-color()

@function primary-color()

Get a primary color value.

Parameters & Return

$key: (Number|String)

The key for the desired value.

$map: $primary-colors (Map)

The map containing the color value.

@return (Color)

The desired color.

Requires

@function color()

@function neutral-color()

Get a neutral color value.

Parameters & Return

$key: (Number|String)

The key for the desired value.

$map: $neutral-colors (Map)

The map containing the color value.

@return (Color)

The desired color.

Requires

@function color()

@function neutral-color()

Get a accent color value.

Parameters & Return

$key: (Number|String)

The key for the desired value.

$map: $accent-colors (Map)

The map containing the color value.

@return (Color)

The desired color.

Requires

@function color()

@function success-color()

Get a success color value.

Parameters & Return

$key: (Number|String)

The key for the desired value.

$map: $success-colors (Map)

The map containing the color value.

@return (Color)

The desired color.

Requires

@function color()

@function warning-color()

Get a warning color value.

Parameters & Return

$key: (Number|String)

The key for the desired value.

$map: $warning-colors (Map)

The map containing the color value.

@return (Color)

The desired color.

Requires

@function color()

@function danger-color()

Get a danger color value.

Parameters & Return

$key: (Number|String)

The key for the desired value.

$map: $danger-colors (Map)

The map containing the color value.

@return (Color)

The desired color.

Requires

@function color()

@function tint()

Tint a color (add white) by a specified amount.

Parameters & Return

$color: (Color)

The color to tint.

$amount: (Number)

The amount of white to add.

@return (Color)

The tinted color.

@function tone()

Tone a color (add gray) by a specified amount.

Parameters & Return

$color: (Color)

The color to tone.

$amount: (Number)

The amount of gray to add.

$gray: #808080 (Color)

The gray to mix.

@return (Color)

The toned color.

Used By

@mixin button()

@function shade()

Shade a color (add black) by a specified amount.

Parameters & Return

$color: (Color)

The color to shade.

$amount: (Number)

The amount of black to add.

@return (Color)

The shaded color.

@function luminance()

Calculate the luminance of a given color.

Parameters & Return

$color: (Color)

The color to check.

@return (Number)

The color’s luminance.

Used By

@function calculate-contrast()

Calculate the contrast between two colors.

Parameters & Return

$color1: (Color)

The first color to check.

$color2: (Color)

The second color to check.

@return (Number)

The contrast ratio between the two colors.

Requires

@function luminance()

Used By

@function contrast()

@function contrast()

Chooses the color with the best contrast for the base.

Parameters & Return

$base-color: (Color)

The color against which to check.

$light: $text-default-light (Color)

The light color against which to check.

$dark: $text-default-dark (Color)

The dark color against which to check.

@return (Color)

The color with the better contrast.

Requires