New color maps and functions (v5)

[WinterSilence]

New color maps:

// Color maps

$blues: (
  "100": $blue-100,
  "200": $blue-200,
  "300": $blue-300,
  "400": $blue-400,
  "500": $blue-500,
  "600": $blue-600,
  "700": $blue-700,
  "800": $blue-800,
  "900": $blue-900
) !default;
$indigos: (
  "100": $indigo-100,
  "200": $indigo-200,
  "300": $indigo-300,
  "400": $indigo-400,
  "500": $indigo-500,
  "600": $indigo-600,
  "700": $indigo-700,
  "800": $indigo-800,
  "900": $indigo-900
) !default;
$purples: (
  "100": $purple-100,
  "200": $purple-200,
  "300": $purple-300,
  "400": $purple-400,
  "500": $purple-500,
  "600": $purple-600,
  "700": $purple-700,
  "800": $purple-800,
  "900": $purple-900
) !default;
$pinks: (
  "100": $pink-100,
  "200": $pink-200,
  "300": $pink-300,
  "400": $pink-400,
  "500": $pink-500,
  "600": $pink-600,
  "700": $pink-700,
  "800": $pink-800,
  "900": $pink-900
) !default;
$reds: (
  "100": $red-100,
  "200": $red-200,
  "300": $red-300,
  "400": $red-400,
  "500": $red-500,
  "600": $red-600,
  "700": $red-700,
  "800": $red-800,
  "900": $red-900
) !default;
$oranges: (
  "100": $orange-100,
  "200": $orange-200,
  "300": $orange-300,
  "400": $orange-400,
  "500": $orange-500,
  "600": $orange-600,
  "700": $orange-700,
  "800": $orange-800,
  "900": $orange-900
) !default;
$yellows: (
  "100": $yellow-100,
  "200": $yellow-200,
  "300": $yellow-300,
  "400": $yellow-400,
  "500": $yellow-500,
  "600": $yellow-600,
  "700": $yellow-700,
  "800": $yellow-800,
  "900": $yellow-900
) !default;
$greens: (
  "100": $green-100,
  "200": $green-200,
  "300": $green-300,
  "400": $green-400,
  "500": $green-500,
  "600": $green-600,
  "700": $green-700,
  "800": $green-800,
  "900": $green-900
) !default;
$teals: (
  "100": $teal-100,
  "200": $teal-200,
  "300": $teal-300,
  "400": $teal-400,
  "500": $teal-500,
  "600": $teal-600,
  "700": $teal-700,
  "800": $teal-800,
  "900": $teal-900
) !default;
$cyans: (
  "100": $cyan-100,
  "200": $cyan-200,
  "300": $cyan-300,
  "400": $cyan-400,
  "500": $cyan-500,
  "600": $cyan-600,
  "700": $cyan-700,
  "800": $cyan-800,
  "900": $cyan-900
) !default;

$color-maps: (
  "blue": $blues,
  "indigo": $indigos,
  "purple": $purples,
  "pink": $pinks,
  "red": $reds,
  "orange": $oranges,
  "yellow": $yellows,
  "green": $greens,
  "teal": $teals,
  "cyan": $cyans,
  "gray": $grays
) !default;

New color functions:

// Returns color from map.
//
// Example: `color: get-color("blue", "300"); background-color: get-color("green", 4);`
//
// @param {string} $color Color name ("red", "gray")
// @param {string|number} $index Color index ("900", 900 or 9)
// @param {map} $color-maps Map of color maps
// @return {color|null} Color or null
@function get-color($color, $index: "500", $maps: $color-maps) {
  @if type-of($index) != string {
    $index: quote(if ($index < 10, $index * 100, $index));
  }
  @return if (
      map-has-key($maps, $color, $index),
      map-get($maps, $color, $index),
      null
  );
}

// Replaces/sets color and returns updated map.
//
// Example: `$color-maps: set-color("green", "500", #0d9d1d);`
//
// @param {string} $color Color name ("red", "green")
// @param {string|number} $index Color index ("900", 900 or 9)
// @param {color} $value New value (#eee, #eeeeee or gray)
// @param {map} $maps Map of color maps
// @return {map} New map
@function set-color($color, $index, $value, $maps: $color-maps) {
  @if type-of($index) != string {
    $index: quote(if ($index < 10, $index * 100, $index));
  }
  $map: map-merge(map-get($maps, $color), ($index: $value));
  @return map-merge($maps, ($color: $map));
}

// Return shade/tint color.
//
// @param {color} $color Base color
// @param {number} $percentage Shade/tint %
// @param {color} $color-contrast-light White color
// @return {color}
@function calc-color($color, $percentage: 20%, $color-contrast-light: #fff) {
  @return if(
    color-contrast($color) == $color-contrast-light,
    shade-color($color, $percentage),
    tint-color($color, $percentage)
  )
}

and api utilities as mixins :)

If we replace colors in variables to get-color(), we can set new colors by set-color() without any problems.

[mdo]

Maps are coming in #32319