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

Yandex UI components

color:
  base:
    value: "#fff"
  essential:
    value: "#c62828"
  project:
    value: "#fff"
  phantom:
    value: "#fff"
  path:
    value: "#fff"
  success:
    value: "#00985f"
  alert:
    value: "#feb35e"
  warning:
    value: "#f90"
  normal:
    value: "#dde3e5"
  system:
    value: "#778a9b"
  promo:
    value: "#000"
  # 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}"
    inverse:
      value: "{color.essential.value}"
    promo:
      value: "color({color.base.value} a(80%))"
    secondary:
      value: "color({color.base.value} a(60%))"
    ghost:
      value: "color({color.base.value} a(30%))"
    disable:
      value: "color({color.base.value} a(30%))"
    success:
      value: "{color.success.value}"
    warning:
      value: "{color.warning.value}"
    alert:
      value: "color({color.alert.value} h(52%) s(86%) l(75%))"

  link:
    base:
      value: "{color.path.value}"
    external:
      value: "{color.path.value}"
    minor:
      value: "color({color.path.value} h(+22) s(-80%) l(+13%))"
    hover:
      value: "color({color.path.value} l(-7%))"

  control:
    borderColor:
      focus:
        value: "color({color.essential.value} h(-9) s(100%) l(-3))"
      prism:
        value: "{color.project.value}"

    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.essential.value}"
      faint:
        value: "{color.essential.value}"
      disable:
        value: "color({color.phantom.value} a(60%))"
      link:
        value: "{color.path.value}"
      error:
        value: "color({color.alert.value} h(52%) s(86%) l(75%))"

    type:
      default:
        fillColor:
          base:
            value: "color({color.essential.value} l(37%))"
          hover:
            value: "color({color.essential.value} l(35%))"
          press:
            value: "color({color.essential.value} l(39%))"
          disable:
            value: "color({color.essential.value} l(42%))"

        borderColor:
          base:
            value: "color({color.essential.value} l(37%))"
          hover:
            value: "color({color.phantom.value} l(65%))"
          press:
            value: "color({color.phantom.value} l(70%))"
          disable:
            value: "color({color.phantom.value} l(50%))"
          error:
            base:
              value: "{color.alert.value}"
            hover:
              value: "color({color.alert.value} s(+2%) l(+10%))"

      pseudo:
        fillColor:
          base:
            value: "{color.essential.value}"
          hover:
            value: "color({color.essential.value} l(39%))"
        borderColor:
          base:
            value: "color({color.essential.value} l(35%))"

      action:
        fillColor:
          base:
            value: "{color.project.value}"
          hover:
            value: "color({color.project.value} l(-10%))"
          press:
            value: "color({color.project.value} l(-10%))"

      passive:
        fillColor:
          base:
            value: "{color.essential.value}"

      progress:
        fillColor:
          base:
            value: "{color.project.value}"
          process:
            value: "color({color.project.value} h(+2%))"

      blank:
        fillColor:
          base:
            value: "color({color.essential.value} l(37%))"
          hover:
            value: "color({color.essential.value} l(35%))"
          disable:
            value: "color({color.essential.value} l(42%))"

        borderColor:
          base:
            value: "color({color.essential.value} l(35%))"
          hover:
            value: "color({color.essential.value} l(45%))"
          disable:
            value: "color({color.essential.value} l(42%))"

      faint:
        fillColor:
          base:
            value: "{color.essential.value}"
          disable:
            value: "color({color.essential.value} l(78%))"

      check:
        fillColor:
          base:
            value: "{color.project.value}"
          hover:
            value: "{color.project.value}"
          press:
            value: "{color.project.value}"
          disable:
            value: "{color.project.value}"

        borderColor:
          base:
            value: "color({color.project.value} l(33%))"
          hover:
            value: "color({color.project.value} l(33%))"
          press:
            value: "color({color.project.value} l(33%))"

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

        borderColor:
          base:
            value: "{color.path.value}"
          hover:
            value: "{color.path.value}"

      raised:
        typo:
          base:
            value: "#fff"
          disable:
            value: "#e29393"

        fillColor:
          base:
            value: "#d62b2b"
          hover:
            value: "#d62b2b"
          disable:
            value: "#b22424"
          check:
            value: "#d62b2b"