Cascading Colors 0.1.0-beta.16

Generating Palettes

Once the initial hue, saturation, lightness, contrast, and theme are in place – we can generate dynamic palettes based on those values.

While themes can be set universally, palettes need to be recalculated based on mode. By default, we apply both to the [data-ccs-colors] attribute.

$steps (integer)

scss
$steps: 4 !default;

The number of tints and shades to create on either side of the base colors.

Used By

@mixin colors()

@mixin gradient()

$fades (boolean | number)

scss
$fades: false !default;

Optionally generate desaturated seconday *-fade palettes for each base palette. Number values will be used as the hsla() alpha value, adding transparency to the faded palette.

Used By

@mixin colors()

@mixin gradient()

$gradients (boolean)

scss
$gradients: false !default;

Generate a striped gradient for each color palette – prime, accent, and *-fade if required. These are useful for showing the colors generated.

Used By

@mixin colors()

@mixin gradient()

@mixin colors()

Generate custom-property color palettes with a given number of tint/shade variations – dynamically based on the inherited hue, saturation, lightness, mode (light/dark), and accent theme.

Parameters & Output

$colors: map-keys($hues) (list | string)

The color names to generate

$steps: $steps or 4 (integer)

The number (each) of tints and shades to generate

$fades: $fades (boolean | number)

Optionally generate desaturated seconday *-fade palettes for each base palette. Number values will be used as the hsla() alpha value, adding transparency to the faded palette.

$gradients: $gradients (boolean)

Generate a striped gradient for each color palette – prime, accent, and *-fade if required. These are useful for showing the colors generated.

{CSS output} (code block)

  • CSS custom properties to generate each color in the requested palettes, based on the starting hue, saturation, lightness, and accent theme.

Requires

@mixin gradient()

$steps (integer)

$fades (boolean | number)

$gradients (boolean)

@mixin gradient()

Generate striped CSS gradients for each palette. These are useful for visualizing the available generated colors.

Parameters

$colors: map-keys($hues) (list | string)

The color names to generate

$steps: $steps or 4 (integer)

The number (each) of tints and shades to generate

$fades: $fades (boolean | number)

Optionally generate desaturated seconday *-fade palettes for each base palette. Number values will be used as the hsla() alpha value, adding transparency to the faded palette.

Requires

$gradients (boolean)

$steps (integer)

$fades (boolean | number)

Used By

@mixin colors()