Accoutrement 4.0.4

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 tools.add-colors($user-colors);

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

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

Requires

@function color()

@function luminance()

@function get() [private]

@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,
    tools.stripe-colors(red, orange, yellow, green, blue, indigo, violet)
  );
}
css compiled 
[data-theme=rainbow] {
  background: linear-gradient(to right, red 0% 14.2857142857%, orange 14.2857142857% 28.5714285714%, yellow 28.5714285714% 42.8571428571%, green 42.8571428571% 57.1428571429%, blue 57.1428571429% 71.4285714286%, indigo 71.4285714286% 85.7142857143%, violet 85.7142857143% 100%);
}

Requires

@function color()

$colors (map)

Used By

@mixin stripe-colors()

@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 tools.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.2857142857%, orange 14.2857142857% 28.5714285714%, yellow 28.5714285714% 42.8571428571%, green 42.8571428571% 57.1428571429%, blue 57.1428571429% 71.4285714286%, indigo 71.4285714286% 85.7142857143%, violet 85.7142857143% 100%);
}

Requires

@function stripe-colors()

$colors (map)