Дизайн-система

Собрана из настоящих компонентов сайта. Всё, что здесь показано, — это тот же код, который работает на боевых страницах.

Терминология

Облачко: Раскрытая форма элемента шапки — пилюля с пунктами. Компонент HeaderBubble.
Капля: Свёрнутая форма — круглая кнопка. Компонент HeaderDrop.

Это два состояния одной сущности, поэтому размер у них общий — --drop-size, 44px.

Цвет

Поверхности

--bg

--bg-card

--bg-surface

--bg-header

Текст

--text

--text-secondary

--text-muted

Основной цвет

--primary

--primary-hover

--primary-soft

--primary-ink

Служебные

--neutral-muted

--green

--red

--blue

--border

Компоненты

AppLogo

NavIcon

menuusersearchchevron-leftchevron-rightlogouthome

HeaderDrop — капля

Третья — состояние active. Наведение выглядит так же.

HeaderBubble — облачко

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

AppHeader

Собранная шапка — вверху этой страницы. Отдельным образцом не показывается: она фиксированная и существует в единственном экземпляре.

Чего здесь ещё нет

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