Типографика
Два семейства, одна шкала кеглей и отдельная шкала для контролов. Вторая существует потому, что у кнопки и абзаца нет общего ритма: текст читают, в контрол целятся, и размеры отвечают на разные вопросы.
Типографика: гарнитуры
| Токен | Значение | Роль |
|---|---|---|
--gr-font-ui--gr-font-ui | Inter, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif | Основной стек шрифта для интерфейсного текста и большинства компонентных подписей. |
--gr-font-mono--gr-font-mono | 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace | Моноширинный стек для кода, числовых значений и технических подписей. |
Типографика: кегли
| Токен | Значение | Роль |
|---|---|---|
--gr-text-2xs--gr-text-2xs | 10px | Размер шрифта 2xs из типографической шкалы foundation tokens: подписи и служебные строки, которые не должны конкурировать с основным текстом. |
--gr-text-xs--gr-text-xs | 12px | Размер шрифта xs из типографической шкалы foundation tokens. |
--gr-text-sm--gr-text-sm | 14px | Размер шрифта sm из типографической шкалы foundation tokens. |
--gr-text-base--gr-text-base | 16px | Размер шрифта base из типографической шкалы foundation tokens. |
--gr-text-lg--gr-text-lg | 18px | Размер шрифта lg из типографической шкалы foundation tokens. |
--gr-text-xl--gr-text-xl | 20px | Размер шрифта xl из типографической шкалы foundation tokens. |
--gr-text-2xl--gr-text-2xl | 24px | Размер шрифта 2xl из типографической шкалы foundation tokens. |
--gr-text-3xl--gr-text-3xl | 30px | Размер шрифта 3xl из типографической шкалы foundation tokens. |
--gr-text-4xl--gr-text-4xl | 36px | Размер шрифта 4xl из типографической шкалы foundation tokens. |
Типографика: контрольная шкала
| Токен | Значение | Роль |
|---|---|---|
--gr-control-text-3xs--gr-control-text-3xs | 10px | Кегль компонента на самой мелкой ступени — подпись колонки таблицы, служебная ссылка в списке файлов. |
--gr-control-text-2xs--gr-control-text-2xs | 11px | Кегль компонента на ступени между 3xs и xs: мелкий бейдж, компактная подсказка, заголовок группы в палитре команд. |
--gr-control-text-xs--gr-control-text-xs | 12px | Кегль компонента на ступени xs. |
--gr-control-text-sm--gr-control-text-sm | 13px | Кегль компонента на ступени sm. |
--gr-control-text-md--gr-control-text-md | 14px | Кегль компонента на ступени md — значение по умолчанию. |
--gr-control-text-lg--gr-control-text-lg | 16px | Кегль компонента на ступени lg. |
Типографика: межстрочные интервалы
| Токен | Значение | Роль |
|---|---|---|
--gr-leading-2xs--gr-leading-2xs | 0.875rem | Межстрочный интервал ступени 2xs — идёт в паре с --gr-text-2xs. |
--gr-leading-xs--gr-leading-xs | 1rem | Межстрочный интервал ступени xs — идёт в паре с --gr-text-xs. |
--gr-leading-sm--gr-leading-sm | 1.25rem | Межстрочный интервал ступени sm — идёт в паре с --gr-text-sm. |
--gr-leading-base--gr-leading-base | 1.5rem | Межстрочный интервал ступени base — идёт в паре с --gr-text-base. |
--gr-leading-lg--gr-leading-lg | 1.625rem | Межстрочный интервал ступени lg — идёт в паре с --gr-text-lg. |
--gr-leading-xl--gr-leading-xl | 1.75rem | Межстрочный интервал ступени xl — идёт в паре с --gr-text-xl. |
--gr-leading-3xl--gr-leading-3xl | 2.25rem | Межстрочный интервал ступени 3xl — идёт в паре с --gr-text-3xl. |
--gr-control-leading-3xs--gr-control-leading-3xs | 14px | Межстрочный интервал ступени 3xs — идёт в паре с --gr-control-text-3xs. |
--gr-control-leading-2xs--gr-control-leading-2xs | 16px | Межстрочный интервал ступени 2xs — идёт в паре с --gr-control-text-2xs. |
--gr-control-leading-xs--gr-control-leading-xs | 16px | Межстрочный интервал ступени xs — идёт в паре с --gr-control-text-xs. |
--gr-control-leading-sm--gr-control-leading-sm | 18px | Межстрочный интервал ступени sm — идёт в паре с --gr-control-text-sm. |
--gr-control-leading-md--gr-control-leading-md | 20px | Межстрочный интервал ступени md — идёт в паре с --gr-control-text-md. |
--gr-control-leading-lg--gr-control-leading-lg | 24px | Межстрочный интервал ступени lg — идёт в паре с --gr-control-text-lg. |
--gr-leading-tight--gr-leading-tight | 1.25 | Коэффициент межстрочного интервала tight для текстовых блоков и подписей. |
--gr-leading-normal--gr-leading-normal | 1.5 | Коэффициент межстрочного интервала normal для текстовых блоков и подписей. |
--gr-leading-relaxed--gr-leading-relaxed | 1.625 | Коэффициент межстрочного интервала relaxed для текстовых блоков и подписей. |
Типографика: начертания
| Токен | Значение | Роль |
|---|---|---|
--gr-font-regular--gr-font-regular | 400 | Вес шрифта regular для типографической иерархии интерфейса. |
--gr-font-medium--gr-font-medium | 500 | Вес шрифта medium для типографической иерархии интерфейса. |
--gr-font-semibold--gr-font-semibold | 600 | Вес шрифта semibold для типографической иерархии интерфейса. |
--gr-font-bold--gr-font-bold | 700 | Вес шрифта bold для типографической иерархии интерфейса. |
Источник: @feugene/granularity 0.41.0, tokens/*.json