Color Utilities
Utilities implement some of the higher-level requirements and guidelines prescribed by the Sprout Design System. These mixins and functions provide the tools needed to develop effectively with color in Sprout.
@function spr-lighten()
Obtain a lightened core color. Used for interactive states (e.g. :hover state)
Parameters & Return
$palette-name: (string)
Sprout color palette (e.g. primary)
$color-token: 50 (string)
Sprout color token within palette (e.g. 50)
@return (color)
Lightened color
Requires
$spr-tokens-color-lighten (number)
@function spr-darken()
Obtain a darkened core color. Used for interactive states (e.g. :hover state).
Parameters & Return
$palette-name: (string)
Sprout color palette (e.g. primary)
$color-token: 50 (string)
Sprout color token within palette (e.g. 50)
@return (color)
Darkened color
Requires
$spr-tokens-color-darken (number)
@function spr-darken-more()
Obtain a further darkened core color. Used for interactive states (e.g. :active state).
Parameters & Return
$palette-name: (string)
Sprout color palette (e.g. primary)
$color-token: 50 (string)
Sprout color token within palette (e.g. 50)
@return (color)
Darkened color
Requires
$spr-tokens-color-darken-more (number)
@function spr-color-heading()
Get the color for heading text.
Requires
@function spr-palette()
@function spr-color-body()
Get the color for body text.
Requires
@function spr-palette()
@function spr-color-subdued()
Get the color for subdued text.
Requires
@function spr-palette()
@function spr-color-placeholder()
Get the color for input placeholder text.
Requires
@function spr-palette()
@function spr-color-page-background()
Get the color for page backgrounds.
Requires
@function spr-palette()
@function spr-color-interactive()
Get the color for links.
Requires
@function spr-palette()
@function spr-color-white()
Get lightest neutral color i.e. white.