_colors.scss

/**
 * Colour functions
 * =================================
 */

// stylelint-disable color-no-hex, no-indistinguishable-colors, function-max-empty-lines, value-list-max-empty-lines

/*
$color-palette: (
  white: (
    base: #ffffff
  ),

  sky: (
    lighter: #f9fafb,
    light: #f4f6f8,
    base: #dfe3e8,
    dark: #c4cdd5
  )
);
*/

/**
 * Color
 * Returns the color value for a given color name and group.
 * HT Shopify Polaris team
 *
 * @param {String} $hue - The color's hue.
 * @param {String} $value - The darkness/lightness of the color. Defaults to base.
 * @param {Color} $for-background - The background color on which this color will
 * appear. Applies a multiply filter to ensure appropriate contrast.
 * @return {Color} The color value.
 *
 * Usage (based on the Sass map above):
 * ko-color(white)
 * ko-color(sky, dark)
 * ko-color(sky, lighter)
 *
 */

@function ko-color($hue, $value: base, $for-background: null) {
  $fetched-color: map-get(map-get($color-palette, $hue), $value);

  @if map-has-key($color-palette, $fetched-color) {
    $fetched-color: map-get(map-get($color-palette, $fetched-color), $value);
  }

  @if $for-background != null {
    $fetched-color: ko-color-multiply($fetched-color, $for-background);
  }

  @if type-of($fetched-color) == color {
    @return $fetched-color;
  } @else {
    @error 'Color `#{$hue} - #{$value}` not found. Available colors: #{available-names($color-palette)}';
  }
}


/**
 * Darkens the foreground color by the background color. This is the same as the
 * “multiply” filter in graphics apps.
 *
 * @param {Color} $foreground - The color to darken.
 * @param {Color} $background - The background to base darkening on.
 * @return {Color} The modified color.
 */

@function ko-color-multiply($foreground, $background: null) {
  @if $background == null {
    $background: #ffffff;
  }

  @return $foreground * $background / 255;
}


/**
 * Tint
 * Add percentage of white to a color
 * Usage:
 * background-color: ko-color-tint(blue, 20%);
 */
@function ko-color-tint($color, $percent) {
	@return mix(white, $color, $percent);
}

/**
 * Shade
 * Add percentage of black to a color
 * Usage:
 * background-color: ko-color-shade(blue, 20%);
 */
@function ko-color-shade($color, $percent) {
	@return mix(black, $color, $percent);
}


// stylelint-enable color-no-hex, no-indistinguishable-colors, function-max-empty-lines, value-list-max-empty-lines