Цвет
Цвет — то место, где дизайн-систему чаще всего принимают за палитру. Здесь нет цветов, здесь роли: поверхность, текст на ней, заливка, текст на заливке. Одна и та же роль несёт в каждой теме своё значение, и оба стоят в таблице.
- Насыщенный тон не бывает цветом текста. У каждого тона есть тема, где он проваливает AA на обычной подложке; парная роль
-textдержит порог везде. Правило стережётся двумя гейтами библиотеки, а не вычиткой. - Там, где коэффициент контраста осмыслен, он посчитан функцией
contrast()самой библиотеки — той же, которой пользуются её гейты, а не второй реализацией.
Основа: нейтральная палитра
| Токен | Значение | Роль |
|---|---|---|
--gr-slate-0--gr-slate-0 | #ffffff | Нейтральный оттенок slate 0 для базовой palette scale, поверхностей и бордеров. |
--gr-slate-50--gr-slate-50 | #f8fafc | Нейтральный оттенок slate 50 для базовой palette scale, поверхностей и бордеров. |
--gr-slate-100--gr-slate-100 | #f1f5f9 | Нейтральный оттенок slate 100 для базовой palette scale, поверхностей и бордеров. |
--gr-slate-200--gr-slate-200 | #e2e8f0 | Нейтральный оттенок slate 200 для базовой palette scale, поверхностей и бордеров. |
--gr-slate-300--gr-slate-300 | #cbd5e1 | Нейтральный оттенок slate 300 для базовой palette scale, поверхностей и бордеров. |
--gr-slate-400--gr-slate-400 | #94a3b8 | Нейтральный оттенок slate 400 для базовой palette scale, поверхностей и бордеров. |
--gr-slate-500--gr-slate-500 | #64748b | Нейтральный оттенок slate 500 для базовой palette scale, поверхностей и бордеров. |
--gr-slate-600--gr-slate-600 | #475569 | Нейтральный оттенок slate 600 для базовой palette scale, поверхностей и бордеров. |
--gr-slate-700--gr-slate-700 | #334155 | Нейтральный оттенок slate 700 для базовой palette scale, поверхностей и бордеров. |
--gr-slate-800--gr-slate-800 | #1e293b | Нейтральный оттенок slate 800 для базовой palette scale, поверхностей и бордеров. |
--gr-slate-900--gr-slate-900 | #0f172a | Нейтральный оттенок slate 900 для базовой palette scale, поверхностей и бордеров. |
Роли поверхностей
| Токен | Светлая | Тёмная | Контраст | Роль |
|---|---|---|---|---|
--gr-bg--gr-bg | #f8fafc | #0f172a | Базовый фон приложения и крупных layout-поверхностей текущей темы. | |
--gr-fg--gr-fg | #0f172a | #f8fafc | 17.06 / 17.06против --gr-bg | Основной цвет текста и иконок поверх базового фона текущей темы. |
--gr-card--gr-card | #ffffff | #1e293b | Фон карточек, панелей и других поднятых поверхностей. | |
--gr-card-fg--gr-card-fg | #0f172a | #f8fafc | 17.85 / 13.98против --gr-card | Цвет контента внутри карточек и raised surface-блоков. |
--gr-popover--gr-popover | #ffffff | #1e293b | Фон popover-, dropdown- и overlay-поверхностей. | |
--gr-popover-fg--gr-popover-fg | #0f172a | #f8fafc | 17.85 / 13.98против --gr-popover | Цвет текста и иконок внутри popover-слоёв. |
--gr-muted--gr-muted | #f1f5f9 | #334155 | Приглушённая поверхность для вторичных блоков, плашек и заполнений. | |
--gr-muted-fg--gr-muted-fg | #556275 | #aab6c7 | 5.65 / 5.04против --gr-muted | Вторичный текстовый цвет для helper-копии и менее важных подписей. |
--gr-secondary--gr-secondary | #e2e8f0 | #334155 | Нейтральная secondary action/surface-подложка без сильного бренд-акцента. | |
--gr-secondary-fg--gr-secondary-fg | #1e293b | #f1f5f9 | 11.87 / 9.45против --gr-secondary | Контрастный текст для secondary-кнопок и поверхностей. |
--gr-overlay-bg--gr-overlay-bg | rgb(15 23 42 / 0.45) | rgb(2 6 23 / 0.65) | Подложка модальных слоёв (модалка, drawer): затемняет страницу, оставляя её узнаваемой. | |
--gr-brd--gr-brd | #e2e8f0 | #334155 | Базовый цвет бордеров и разделителей текущей темы. | |
--gr-input--gr-input | #e2e8f0 | #334155 | Цвет рамки и фона input-like контролов в состоянии покоя. | |
--gr-ring--gr-ring | #6366f1 | #818cf8 | Цвет focus-ring и акцентного outline для интерактивных компонентов. |
Роли состояний
| Токен | Светлая | Тёмная | Контраст | Роль |
|---|---|---|---|---|
--gr-disabled-bg--gr-disabled-bg | #f1f5f9 | #273548 | Фон недоступного контрола: гасит его поверхностью, а не прозрачностью — opacity разбавляет выверенные на AA токены текста. | |
--gr-disabled-fg--gr-disabled-fg | #94a3b8 | #64748b | Цвет текста и иконок недоступного контрола. | |
--gr-disabled-brd--gr-disabled-brd | #e2e8f0 | #334155 | Цвет рамки недоступного контрола. | |
--gr-invalid-brd--gr-invalid-brd | var(--gr-danger) | var(--gr-danger) | Цвет рамки контрола, не прошедшего валидацию. | |
--gr-invalid-ring--gr-invalid-ring | var(--gr-danger) | var(--gr-danger) | Цвет focus-ring контрола, не прошедшего валидацию. | |
--gr-invalid-text--gr-invalid-text | var(--gr-danger-text) | var(--gr-danger-text) | 7.94 / 9.41против --gr-bg | Цвет текста ошибки и метки обязательного поля. |
Роли действий
| Токен | Светлая | Тёмная | Контраст | Роль |
|---|---|---|---|---|
--gr-primary--gr-primary | #4f46e5 | #9d8bfa | Главный brand/action цвет темы для primary CTA и ключевых акцентов. | |
--gr-primary-fg--gr-primary-fg | #ffffff | #0f172a | 6.29 / 6.38против --gr-primary | Контрастный текст и иконки поверх primary-заливки. |
--gr-accent--gr-accent | #eef2ff | #1e1b4b | Мягкая акцентная поверхность для selected/hovered областей и подсветок. | |
--gr-accent-fg--gr-accent-fg | #3730a3 | #c7d2fe | 8.88 / 10.72против --gr-accent | Цвет текста поверх accent-подложек. |
Роли статусов
| Токен | Светлая | Тёмная | Контраст | Роль |
|---|---|---|---|---|
--gr-success--gr-success | #10b981 | #34d399 | Основной semantic success-цвет для статусов, бейджей и уведомлений. | |
--gr-success-light--gr-success-light | #d1fae5 | #194536 | Облегчённая success-подложка для мягких статусов и подсветок. | |
--gr-success-fg--gr-success-fg | #0f172a | #0f172a | 7.04 / 9.29против --gr-success | Контрастный текст и иконки поверх success-заливки. |
--gr-primary-text--gr-primary-text | #3730a3 | #c7d2fe | 9.49 / 11.97против --gr-bg | Основной тон как ЦВЕТ ТЕКСТА на фоне страницы: насыщенный --gr-primary под текст не рассчитан и не проходит по контрасту. |
--gr-success-text--gr-success-text | #065f46 | #6ee7b7 | 7.34 / 11.71против --gr-bg | Текстовый оттенок для success-сообщений на светлой подложке. |
--gr-warning--gr-warning | #f97316 | #fb923c | Основной semantic warning-цвет для предупреждений и промежуточных статусов. | |
--gr-warning-light--gr-warning-light | #ffedd5 | #672e1c | Облегчённая warning-подложка для мягких warning-состояний. | |
--gr-warning-fg--gr-warning-fg | #0f172a | #0f172a | 6.37 / 7.89против --gr-warning | Контрастный текст и иконки поверх warning-заливки. |
--gr-warning-text--gr-warning-text | #7c2d12 | #fdba74 | 8.96 / 10.59против --gr-bg | Текстовый оттенок для warning-сообщений на мягкой warning-подложке. |
--gr-danger--gr-danger | #dc2626 | #f87171 | Semantic danger-цвет для ошибок, рисков и критических сообщений. | |
--gr-danger-light--gr-danger-light | #fee2e2 | #6a2522 | Облегчённая danger-подложка для мягких error-состояний. | |
--gr-danger-fg--gr-danger-fg | #ffffff | #0f172a | 4.83 / 6.45против --gr-danger | Контрастный текст и иконки поверх danger-заливки. |
--gr-danger-text--gr-danger-text | #991b1b | #fca5a5 | 7.94 / 9.41против --gr-bg | Текстовый оттенок для error-сообщений на мягкой danger-подложке. |
--gr-info--gr-info | #2563eb | #60a5fa | Semantic info-цвет для нейтральных уведомлений и информационных акцентов. | |
--gr-info-light--gr-info-light | #dbeafe | #213771 | Облегчённая info-подложка для спокойных информационных блоков. | |
--gr-info-fg--gr-info-fg | #ffffff | #0f172a | 5.17 / 7.02против --gr-info | Контрастный текст и иконки поверх info-заливки. |
--gr-info-text--gr-info-text | #1e40af | #bfdbfe | 8.34 / 12.56против --gr-bg | Текстовый оттенок для спокойных info-сообщений и подсказок. |
--gr-slate--gr-slate | #475569 | #94a3b8 | Нейтральный semantic slate-цвет для subdued индикаторов и secondary статусов. | |
--gr-slate-light--gr-slate-light | #e2e8f0 | #313b4a | Облегчённая slate-подложка для мягких нейтральных состояний. | |
--gr-slate-fg--gr-slate-fg | #ffffff | #0f172a | 7.58 / 6.96против --gr-slate | Контрастный текст и иконки поверх slate-заливки. |
--gr-slate-text--gr-slate-text | #334155 | #cbd5e1 | 9.90 / 12.02против --gr-bg | Текстовый оттенок для нейтральных slate-сообщений и плашек. |
--gr-azure--gr-azure | #0077b6 | #38bdf8 | Semantic azure-цвет для информационных акцентов и вспомогательных статусов. | |
--gr-azure-light--gr-azure-light | #e0f2fe | #1b425c | Облегчённая azure-подложка для мягких informational поверхностей. | |
--gr-azure-fg--gr-azure-fg | #ffffff | #0f172a | 4.87 / 8.33против --gr-azure | Контрастный текст и иконки поверх azure-заливки. |
--gr-azure-text--gr-azure-text | #075985 | #bae6fd | 7.23 / 13.45против --gr-bg | Текстовый оттенок для azure-плашек и спокойных informational блоков. |
Роли плотных заливок
| Токен | Светлая | Тёмная | Роль |
|---|---|---|---|
--gr-primary-solid--gr-primary-solid | var(--gr-primary) | #595ce6 | Сплошная заливка кнопочного веса тона primary. |
--gr-primary-solid-hover--gr-primary-solid-hover | var(--gr-primary-hover) | #5053dd | Заливка --gr-primary-solid под курсором. |
--gr-primary-solid-active--gr-primary-solid-active | var(--gr-primary-active) | #474acf | Заливка --gr-primary-solid в момент нажатия. |
--gr-primary-solid-fg--gr-primary-solid-fg | var(--gr-primary-fg) | var(--gr-slate-0) | Текст и иконки на заливке --gr-primary-solid. |
--gr-success-solid--gr-success-solid | #047857 | #047857 | Сплошная заливка кнопочного веса тона success. |
--gr-success-solid-hover--gr-success-solid-hover | #036c4d | #036c4d | Заливка --gr-success-solid под курсором. |
--gr-success-solid-active--gr-success-solid-active | #025f44 | #025f44 | Заливка --gr-success-solid в момент нажатия. |
--gr-success-solid-fg--gr-success-solid-fg | var(--gr-slate-0) | var(--gr-slate-50) | Текст и иконки на заливке --gr-success-solid. |
--gr-warning-solid--gr-warning-solid | #c2410c | #c2410c | Сплошная заливка кнопочного веса тона warning. |
--gr-warning-solid-hover--gr-warning-solid-hover | #b53b0a | #b53b0a | Заливка --gr-warning-solid под курсором. |
--gr-warning-solid-active--gr-warning-solid-active | #9f3307 | #9f3307 | Заливка --gr-warning-solid в момент нажатия. |
--gr-warning-solid-fg--gr-warning-solid-fg | var(--gr-slate-0) | var(--gr-slate-50) | Текст и иконки на заливке --gr-warning-solid. |
--gr-danger-solid--gr-danger-solid | var(--gr-danger) | #b91c1c | Сплошная заливка кнопочного веса тона danger. |
--gr-danger-solid-hover--gr-danger-solid-hover | var(--gr-danger-hover) | #a91919 | Заливка --gr-danger-solid под курсором. |
--gr-danger-solid-active--gr-danger-solid-active | var(--gr-danger-active) | #931515 | Заливка --gr-danger-solid в момент нажатия. |
--gr-danger-solid-fg--gr-danger-solid-fg | var(--gr-danger-fg) | var(--gr-slate-50) | Текст и иконки на заливке --gr-danger-solid. |
--gr-info-solid--gr-info-solid | var(--gr-info) | #1d4ed8 | Сплошная заливка кнопочного веса тона info. |
--gr-info-solid-hover--gr-info-solid-hover | var(--gr-info-hover) | #1e40af | Заливка --gr-info-solid под курсором. |
--gr-info-solid-active--gr-info-solid-active | var(--gr-info-active) | #1e3a8a | Заливка --gr-info-solid в момент нажатия. |
--gr-info-solid-fg--gr-info-solid-fg | var(--gr-info-fg) | var(--gr-slate-50) | Текст и иконки на заливке --gr-info-solid. |
--gr-slate-solid--gr-slate-solid | var(--gr-slate) | var(--gr-slate-600) | Сплошная заливка кнопочного веса тона slate. |
--gr-slate-solid-hover--gr-slate-solid-hover | var(--gr-slate-hover) | var(--gr-slate-700) | Заливка --gr-slate-solid под курсором. |
--gr-slate-solid-active--gr-slate-solid-active | var(--gr-slate-active) | var(--gr-slate-800) | Заливка --gr-slate-solid в момент нажатия. |
--gr-slate-solid-fg--gr-slate-solid-fg | var(--gr-slate-fg) | var(--gr-slate-50) | Текст и иконки на заливке --gr-slate-solid. |
--gr-azure-solid--gr-azure-solid | #0369a1 | #0369a1 | Сплошная заливка кнопочного веса тона azure. |
--gr-azure-solid-hover--gr-azure-solid-hover | #075985 | #075985 | Заливка --gr-azure-solid под курсором. |
--gr-azure-solid-active--gr-azure-solid-active | #0c4a6e | #0c4a6e | Заливка --gr-azure-solid в момент нажатия. |
--gr-azure-solid-fg--gr-azure-solid-fg | var(--gr-slate-0) | var(--gr-slate-50) | Текст и иконки на заливке --gr-azure-solid. |
Роли визуализации данных
| Токен | Светлая | Тёмная | Роль |
|---|---|---|---|
--gr-chart-1--gr-chart-1 | #4f46e5 | #6366f1 | Первый цвет серии для графиков и data-visualization элементов. |
--gr-chart-2--gr-chart-2 | #10b981 | #34d399 | Второй цвет серии для графиков и data-visualization элементов. |
--gr-chart-3--gr-chart-3 | #f97316 | #fb923c | Третий цвет серии для графиков и data-visualization элементов. |
--gr-chart-4--gr-chart-4 | #6366f1 | #818cf8 | Четвёртый цвет серии для графиков и data-visualization элементов. |
--gr-chart-5--gr-chart-5 | #8b5cf6 | #a78bfa | Пятый цвет серии для графиков и data-visualization элементов. |
Тени
| Токен | Светлая | Тёмная | Роль |
|---|---|---|---|
--gr-shadow-1--gr-shadow-1 | 0 1px 2px rgba(15, 23, 42, 0.08) | 0 1px 2px rgba(0, 0, 0, 0.45) | Уровень elevation 1. Синеватая полупрозрачная тень читается на светлом фоне мягче чёрной. |
--gr-shadow-2--gr-shadow-2 | 0 8px 24px rgba(15, 23, 42, 0.14) | 0 8px 24px rgba(0, 0, 0, 0.55) | Уровень elevation 2 для всплывающих слоёв. |
--gr-shadow-3--gr-shadow-3 | 0 16px 48px rgba(15, 23, 42, 0.20) | 0 16px 48px rgba(0, 0, 0, 0.65) | Уровень elevation 3 для модальных слоёв. |
Источник: @feugene/granularity 0.41.0, tokens/*.json