@yandex/ui/Theme/tokens/color-light.tokens.yml

Yandex UI components

color:
  base:
    value: "#000"
    comment: "базовый цвет содержимого, от которого выстраиваются цвета текста, иконок, ..."
  essential:
    value: "#fff"
    comment: "базовый цвет поверхностей"
  project:
    value: "#fc0"
    comment: "проектный цвет, от которого выстраивают акцентные состояния"
  phantom:
    value: "#000"
    comment: "тонирующий цвет, от которого выстраиваются бордеры, паранджа, ..."
  path:
    value: "#04b"
    comment: "ссылочный цвет, от которого выстраиваются все их вариации"
  success:
    value: "#00985f"
    comment: "цвет успеха, от которого выстраивается как статусный фон так и типографика"
  alert:
    value: "#f33"
    comment: "цвет ошибки, от которого выстраивается как статусный фон так и типографика"
  warning:
    value: "#f90"
    comment: "цвет предупреждения, от которого выстраивается как статусный фон так и типографика"
  normal:
    value: "#dde3e5"
    comment: "нейтральный цвет, от которого выстраивается как статусный фон так и типографика"
  system:
    value: "#778a9b"
    comment: "системный цвет, от которого выстраивается как статусный фон так и типографика"
  promo:
    value: "#0057d3"
  hover:
    value: "#c00"
  # used in mixins for correct handling of specificity in postcss-theme-fold
  transparent:
    value: transparent

  fillColor:
    brand:
      value: "{color.project.value}"
    inverse:
      value: "{color.base.value}"
    action:
      value: "color({color.project.value} l(+15%))"
    selection:
      value: "color({color.project.value} l(+31%) h(-1))"
    hover:
      value: "color({color.base.value} a(15%) })"
    border:
      value: "color({color.phantom.value} a(5%) })"
    stripe:
      value: "color({color.phantom.value} a(4%) })"
    ghost:
      value: "color({color.phantom.value} a(8%) })"
    default:
      value: "{color.essential.value}"
    tone:
      value: "color({color.phantom.value} a(90%) })"
    soft:
      value: "color({color.essential.value} a(97%) })"
    success:
      value: "{color.success.value}"
    alert:
      value: "{color.alert.value}"
    warning:
      value: "{color.warning.value}"
    normal:
      value: "{color.normal.value}"
    system:
      value: "{color.system.value}"
    link:
      value: "color({color.path.value} h(-7%) s(-13) l(+14) a(40%))"
    promo:
      value: "{color.promo.value}"

  typo:
    brand:
      value: "{color.project.value}"
    primary:
      value: "{color.base.value}"
      comment: "цвет основного текста дефолтных контролов"
    inverse:
      value: "{color.essential.value}"
    promo:
      value: "color({color.base.value} a(80%))"
    secondary:
      value: "color({color.base.value} a(60%))"
      comment: "цвет второстепенного текста контрола"
    ghost:
      value: "color({color.base.value} a(30%))"
      comment: "цвет дополнительного текста контрола"
    disable:
      value: "color({color.base.value} a(30%))"
      comment: "цвет основного текста неактивного контрола"
    success:
      value: "{color.success.value}"
    warning:
      value: "{color.warning.value}"
    alert:
      value: "color({color.alert.value} l(-16%))"

  link:
    base:
      value: "{color.path.value}"
      comment: "цвет фона ссылки"
    external:
      value: "{color.path.value}"
    minor:
      value: "color({color.path.value} h(+22) s(-80%) l(+13%))"
    hover:
      value: "{color.hover.value}"
      comment: "цвет фона ссылки по ховеру"

  control:
    borderColor:
      focus:
        value: "color({color.phantom.value} l(70%))"
        comment: "цвет фона бордеров контрола при фокусе"
      prism:
        value: "{color.project.value}"
        comment: "цвет фона бордера офсетных выделений контрола"

    typo:
      primary:
        value: "{color.base.value}"
      secondary:
        value: "color({color.base.value} a(60%))"
      ghost:
        value: "color({color.base.value} a(30%))"
      passive:
        value: "{color.base.value}"
      faint:
        value: "color({color.base.value} l(100%))"
      disable:
        value: "color({color.phantom.value} l(50%))"
      link:
        value: "{color.path.value}"
      error:
        value: "color({color.alert.value} l(-16%))"

    type:
      default:
        fillColor:
          base:
            value: "color({color.essential.value} l(90%))"
            comment: "цвет фона контрола"
          hover:
            value: "color({color.essential.value} l(86%))"
            comment: "цвет фона контрола по ховеру"
          press:
            value: "color({color.essential.value} l(86%))"
            comment: "цвет фона контрола по нажатию"
          disable:
            value: "color({color.essential.value} l(95%))"
            comment: "цвет фона неактивного контрола"

        borderColor:
          base:
            value: "color({color.phantom.value} l(70%))"
            comment: "цвет фона бордеров контрола"
          hover:
            value: "color({color.phantom.value} l(86%))"
            comment: "цвет фона бордеров контрола по ховеру"
          press:
            value: "color({color.phantom.value} l(70%))"
            comment: "цвет фона бордеров контрола по нажатию"
          disable:
            value: "color({color.phantom.value} l(91%))"
            comment: "цвет фона бордеров неактивного контрола"
          error:
            base:
              value: "{color.alert.value}"
            hover:
              value: "color({color.alert.value} h(-4) l(-16%))"

      pseudo:
        fillColor:
          base:
            value: "color({color.phantom.value} l(100%))"
            comment: "цвет фона псевдо контрола"
          hover:
            value: "color({color.phantom.value} l(97%))"
            comment: "цвет фона псевдо контрола по ховеру"
        borderColor:
          base:
            value: "color({color.phantom.value} l(80%))"
            comment: "цвет бордеров псевдо контрола"

      action:
        fillColor:
          base:
            value: "{color.project.value}"
            comment: "цвет фона активного контрола"
          hover:
            value: "color({color.project.value} h(-2%) l(-1%))"
            comment: "цвет фона активного контрола по ховеру"
          press:
            value: "color({color.project.value} h(-2%) l(-1%))"
            comment: "цвет фон активного контролы по нажатию"

      passive:
        fillColor:
          base:
            value: "{color.essential.value}"
            comment: "цвет фона пассивной части контрола"

      progress:
        fillColor:
          base:
            value: "{color.project.value}"
            comment: "цвет фон активного контрола в прогрессе"
          process:
            value: "color({color.project.value} h(+2%))"
            comment: "цвет фон активного контрола в прогрессе выполнения"

      blank:
        fillColor:
          base:
            value: "{color.essential.value}"
            comment: "цвет фона пустого контрола"
          hover:
            value: "{color.essential.value}"
            comment: "цвет фона пустого контрола по ховеру"
          disable:
            value: "color({color.essential.value} l(95%))"
            comment: "цвет фона пустого неактивного контрола"

        borderColor:
          base:
            value: "color({color.phantom.value} l(85%))"
            comment: "цвет фона бордеров пустого контрола"
          hover:
            value: "color({color.phantom.value} l(80%))"
            comment: "цвет фона бордеров пустого контрола по ховеру"
          disable:
            value: "color({color.essential.value} l(95%))"
            comment: "цвет фона бордеров пустого неактивного контрола"

      faint:
        fillColor:
          base:
            value: "{color.essential.value}"
            comment: "цвет фона ослабленной части контрола"
          disable:
            value: "color({color.essential.value} l(78%))"
            comment: "цвет фона ослабленной части неактивного контрола"

      check:
        fillColor:
          base:
            value: "color({color.phantom.value} l(33%))"
            comment: "цвет фона чекнутого контрола"
          hover:
            value: "color({color.phantom.value} l(33%))"
            comment: "цвет фона чекнутого контрола по ховеру"
          press:
            value: "color({color.phantom.value} l(32%))"
            comment: "цвет фона чекнутого контрола по нажатию"
          disable:
            value: "color({color.phantom.value} l(95%))"
            comment: "цвет фона чекнутого неактивного контрола"

        borderColor:
          base:
            value: "color({color.project.value} l(33%))"
            comment: "цвет фона бордеров чекнутого контрола"
          hover:
            value: "color({color.project.value} l(33%))"
            comment: "цвет фона бордеров чекнутого контрола по ховеру"
          press:
            value: "color({color.project.value} l(33%))"
            comment: "цвет фона бордеров чекнутого контрола при фокусе по нажатию"

      link:
        fillColor:
          base:
            value: "{color.path.value}"
          hover:
            value: "color({color.path.value} a(30%))"

        borderColor:
          base:
            value: "color({color.path.value} a(60%))"
          hover:
            value: "color({color.path.value} a(60%))"

      raised:
        typo:
          base:
            value: "#000"
          disable:
            value: "#7f7f7f"

        fillColor:
          base:
            value: "#fff"
          hover:
            value: "#f5f5f5"
          disable:
            value: "#f5f5f5"
          check:
            value: "#fff"