Sign In

Палитра

Временная страница для проверки токенов и компонентов. Разбита на табы, слаг таба — в пути: перезагрузка (в том числе HMR) оставляет на текущем. Таб-бар — наш жеFilterChips.

Три уровня: примитив (что за цвет) → семантика (зачем он нужен) →компонент (где применён). Компоненты берут только два нижних. Тема переставляет ссылки семантики на другие примитивы — переключатель наверху показывает это вживую. Hex под образцом — вычисленный браузером, а не переписанный из исходника.

1. Примитивы — ахроматические

  • --color-white
  • --color-white-a50
  • --color-white-a20
  • --color-white-a12

1. Примитивы — шкала «neutral»

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 850
  • 900
  • 950

1. Примитивы — шкала «violet»

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

1. Примитивы — шкала «blue»

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

1. Примитивы — шкала «pink»

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

1. Примитивы — шкала «green»

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

2. Семантика — поверхности

  • --surface-page
  • --surface-raised
  • --surface-sunken
  • --surface-overlay

2. Семантика — текст

  • --text-primary
  • --text-secondary
  • --text-disabled

2. Семантика — границы

  • --border-subtle
  • --border-strong
  • --border-focus

2. Семантика — действия

  • --action-primary-bg
  • --action-primary-bg-hover
  • --action-primary-bg-active
  • --action-primary-bg-subtle
  • --action-primary-fg

2. Семантика — выделение

  • --action-selected-bg
  • --action-selected-bg-hover
  • --action-selected-fg

2. Семантика — статусы

  • --status-success
  • --status-accent

3. Компонентные токены — кнопка

  • --button-primary-bg
  • --button-primary-bg-hover
  • --button-secondary-bg
  • --button-secondary-bg-hover
  • --button-ghost-bg
  • --button-ripple-on-accent
  • --button-ripple-on-surface

Типографика

  • Light 300Feel what you see — 0123456789
  • Regular 400Feel what you see — 0123456789
  • SemiBold 600Feel what you see — 0123456789
  • Bold 700Feel what you see — 0123456789
  • ExtraBold 800Feel what you see — 0123456789
  • --font-size-xsFeel what you see
  • --font-size-smFeel what you see
  • --font-size-baseFeel what you see
  • --font-size-lgFeel what you see
  • --font-size-xlFeel what you see
  • --font-size-2xlFeel what you see

Радиусы

Скругление в макете зависит от размера бокса, а не от его роли. Поэтому шкала отсортирована по размеру и каждая ступень означает конкретный класс коробок.

  • --radius-xsмелкое: чипы, бейджи, инпуты
  • --radius-smкнопки
  • --radius-mdмелкие видео, подложка шапки
  • --radius-lgсредние боксы, большие видео
  • --radius-xlкрупные боксы: баннеры, карточки секций