#
# COLOR TOKENS
# Use these tokens to set a color.
# For reference, see http://hslpicker.com/
#
# To make things a little simpler for your team,
# utilize both global & local tokens for colors.
#

aliases:
  gray:
    value: "0, 0%"
  green:
    value: "122, 39%"

props:
  color_white:
    value: "hsla({!gray}, 100%, 1)"
    category: color_gray_scale
  color_hover_gray:
    value: "hsla({!gray}, 92%, 1)"
    category: color_gray_scale
  color_outline_gray:
    value: "hsla({!gray}, 80%, 1)"
    category: color_gray_scale
  color_gray:
    value: "hsla({!gray}, 57%, 1)"
    category: color_gray_scale
  color_gray_dark:
    value: "hsla({!gray}, 40%, 1)"
    category: color_gray_scale
  color_black:
    value: "hsla({!gray}, 13%, 1)"
    category: color_gray_scale

  color_secondary_gray:
    value: "hsla(224, 20%, 89%, 1)"
    category: color_gray_scale
  color_deep_gray:
    value: "hsla(221, 19%, 64%, 1)"
    category: color_gray_scale

  color_lightest_blue:
    value: "hsla(213, 100%, 94%, 1)"
    category: color_blue_scale
  color_light_blue:
    value: "hsla(216, 78%, 81%, 1)"
    category: color_blue_scale
  color_blue:
    value: "hsla(217, 89%, 60%, 1)"
    category: color_blue_scale
  color_dark_blue:
    value: "rgb(0, 26, 80)"
    category: color_blue_scale

  color_light_green:
    value: "hsla({!green}, 60%, 1)"
    category: color_green_scale
  color_dark_green:
    value: "hsla({!green}, 38%, 1)"
    category: color_green_scale

  color_purple:
    value: "hsla(263, 100%, 60%, 1)"
    category: color_purple_scale
  color_secondary_purple:
    value: "hsla(260, 100%, 50%, 1)"
    category: color_purple_scale

  color_orange:
    value: "hsla(42, 100%, 49%, 1)"
    category: color_scale
  color_red:
    value: "hsla(0, 89%, 60%, 1)"
    category: color_scale
  color_light_red:
    value: "rgb(240, 36, 124)"
    category: color_scale
  color_ultraviolet:
    value: "hsla(285, 97%, 55%, 1)"
    category: color_scale
  color_pinkish:
    value: "hsla(333, 83%, 69%, 1)"
    category: color_scale
  color_azure:
    value: "hsla(206, 84%, 39%, 1)"
    category: color_scale
  color_toxic:
    value: "hsla(64, 89%, 61%, 1)"
    category: color_scale

global:
  type: color
  category: color