Accoutrement 2.1.1

Color Themes

@function shades-of()

Generates an accoutrement map of light/dark color variations from a map of user-defined colors, based on luminosity. The origin color will be included in the appropriate spot, based on it’s own luminosity.

Since 2.1.0:

  • NEW: Generate consistent tint/shade themes from arbitrary colors

Parameters

$origin: (map)

user-color map to use as a basis for generating the theme

$range: 3 (integer)

number of dark and light variations desired, in addition to the midpoint

Example

scss
$user-colors: (
  'primary': blue,
  'accent': red,
);
@include add-colors($user-colors);

$theme-colors: shades-of($user-colors, 2);
@include add-colors($theme-colors);

@each $name, $value in $theme-colors {
/* #{$name}: #{$value} */
}
css compiled
/* primary-dark-2: #primary ("shade": 40%) */
/* primary-dark-1: #primary */
/* primary-0: #primary ("tint": 15.38462%) */
/* primary-light-1: #primary ("tint": 46.15385%) */
/* primary-light-2: #primary ("tint": 76.92308%) */
/* accent-dark-2: #accent ("shade": 40%) */
/* accent-dark-1: #accent */
/* accent-0: #accent ("tint": 15.38462%) */
/* accent-light-1: #accent ("tint": 46.15385%) */
/* accent-light-2: #accent ("tint": 76.92308%) */

Requires

@function color()

@function luminance()

@function stripe-colors()

Create color-stops for a striped gradient background, from any number of colors

Since 2.1.0:

  • NEW: Especially useful for viewing generated color palettes

Parameters & Return

$colors...: (string | color)

ArgList of colors

@return (color)

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

Example

scss
[data-theme='rainbow'] {
  background: linear-gradient(
    to right,
    stripe-colors(red, orange, yellow, green, blue, indigo, violet)
  );
}
css compiled
[data-theme='rainbow'] {
  background: linear-gradient(to right, red 0% 14.28571%, orange 14.28571% 28.57143%, yellow 28.57143% 42.85714%, green 42.85714% 57.14286%, blue 57.14286% 71.42857%, indigo 71.42857% 85.71429%, violet 85.71429% 100%);
}

Requires

@function color()

$colors (map)

Used By

@mixin stripe-colors()

Create a striped gradient background from any number of colors

Since 2.1.0:

  • NEW: Especially useful for viewing generated color palettes

Parameters

$angle...: (gradient angle)

e.g. to right or 35deg

$colors...: (string | color)

ArgList of colors

Example

scss
[data-theme='rainbow'] {
  @include stripe-colors(
    to right,
    red, orange, yellow, green, blue, indigo, violet
  );
}
css compiled
[data-theme='rainbow'] {
  background-image: linear-gradient(to right, red 0% 14.28571%, orange 14.28571% 28.57143%, yellow 28.57143% 42.85714%, green 42.85714% 57.14286%, blue 57.14286% 71.42857%, indigo 71.42857% 85.71429%, violet 85.71429% 100%);
}

Requires

@function stripe-colors()

$colors (map)