Accoutrement 4.0.5

Color Utility Functions

@function tint()

Mix a color with contrast-light (defaults to white) to get a lighter tint of your color. Make sure to override $light when using tint to define the value of contrast-light

Since 2.0.0:

  • BREAKING: Use contrast-light for default mix, rather than white.
  • NEW: Accept $light color to use in place of contrast-light default

Parameters & Return

$color: (string | list)

The name of a color in your palette, with optional adjustments in the form of (<function-name>: <args>).

$percentage: (percentage)

The percentage of a $light color to mix in. Higher percentages will result in a lighter tint.

$light: null (color | String)

The lighter color to be mixed in for tinting.

@return (color)

A calculated CSS-ready color value based on your global color palette.

Requires

@function default-contrast() [private]

@function color()

@function shade()

Mix a color with contrast-dark (defaults to black) to get a darker shade of your color. Make sure to override $dark when using shade to define the value of contrast-dark

Since 2.0.0:

  • BREAKING: Use contrast-dark for default mix, rather than black
  • NEW: Accept $dark color to use in place of contrast-dark default

Parameters & Return

$color: (string | list)

The name of a color in your palette, with optional adjustments in the form of (<function-name>: <args>).

$percentage: (Percentage)

The percentage of a $dark color to mix in. Higher percentages will result in a lighter tint.

$dark: null (color | String)

The darker color to be mixed in for shading.

@return (color)

A calculated CSS-ready color value based on your global color palette.

Requires

@function default-contrast() [private]

@function color()