Глина
Тёплая бумага, графитовые чернила и одна глиняная точка на экран.
На этой странице
Образец
| Роль | Светлый | Тёмный |
|---|---|---|
--gr-bg | #faf9f5 | #262624 |
--gr-card | #ffffff | #30302e |
--gr-fg | #141413 | #faf9f5 |
--gr-muted-fg | #5e5d59 | #b0aea5 |
--gr-primary | #d97757 | #d97757 |
--gr-accent | #f6e8e0 | #46352d |
Для чего
Чтение, редакторы, ассистенты — экраны, где главное — текст, а интерфейс отступает. Тёплые
поверхности и графитовые чернила снимают холод продуктовых тем, а единственный тёплый акцент
показывает, ради чего экран открыт. Тема — копия slate (theme:copy), а не наследник:
самостоятельный язык, все значения — свои, правки «Сланца» в неё не приходят. Новый токен
пакета компонентов «Глина» получает не молча, а находкой doctor, и значение решает её автор.
Правила использования
- Главная кнопка области —
tone="neutral": графитовая заливка, в тёмном режиме — светлая. Глиняныйprimary— акцент, а не каждое действие. - Глина — одна на экран: то, ради чего экран открыт. Две глиняные кнопки рядом спорят друг с другом, и акцент перестаёт быть акцентом.
- Тон живёт в заливке и подписи, рамки — тёплые серые. У
secondaryиoutlineлюбого тона рамка одна и та же — графит на 15 % и 30 %. - Под указателем заливка уходит прочь от цвета подписи: под графитовой подписью светлеет, под светлой — темнеет. Контраст в наведении только растёт. Исключение — главная кнопка: её заливка уже на краю шкалы, и она уходит к середине — графит светлеет, бумага темнеет.
- Кнопка не двигается и не светится: без теней, загрузка — свет по подписи, а не спиннер, группа
кнопок — лоток (пропсы по умолчанию темы,
componentDefaults). - Тень — только у того, что лежит над страницей: всплывающая панель и тост — 8/24, окно — 16/48. Карточка — белый лист с волосяной рамкой, без тени.
- Тихие умолчания: вкладки — линией, метки — со скруглением
semi, путь — через «/», аватар — инициалы на бумаге без случайного цвета, прогресс — графитовая полоса без рамки. - Как у любой темы пакета: цвет текста — из
-text, граница переключаемого контрола —--gr-control-brd.
Режимы
| Режим | Назначение |
|---|---|
light | режим по умолчанию: тёплая бумага, графитовые чернила, белый лист карточки поверх страницы |
dark | тёплый графит вместо чёрного; главная кнопка инвертируется — светлая заливка с графитовой подписью; глина остаётся глиной |
Пары на корне
Имя режима хранится в выборе пользователя, а на корень ставится пара темы и режима. Пару не пишут руками: её отдаёт манифест сборки.
- Идентификатор
clay
| Режим | Схема | Пара на корне |
|---|---|---|
light · по умолчанию | light | data-theme="clay-light" |
dark | dark | data-theme="clay-dark" |
Роли
Значения ролей в каждом режиме и контраст там, где он осмыслен.
Роли поверхностей
| Токен | Светлая | Тёмная | Контраст | Роль |
|---|---|---|---|---|
--gr-bg--gr-bg | #faf9f5 | #262624 | Базовый фон приложения и крупных layout-поверхностей текущей темы. | |
--gr-fg--gr-fg | #141413 | #faf9f5 | 17.50 / 14.39против --gr-bg | Основной цвет текста и иконок поверх базового фона текущей темы. |
--gr-card--gr-card | #ffffff | #30302e | Фон карточек, панелей и других поднятых поверхностей. | |
--gr-card-fg--gr-card-fg | #141413 | #faf9f5 | 18.43 / 12.55против --gr-card | Цвет контента внутри карточек и raised surface-блоков. |
--gr-popover--gr-popover | #ffffff | #30302e | Фон popover-, dropdown- и overlay-поверхностей. | |
--gr-popover-fg--gr-popover-fg | #141413 | #faf9f5 | 18.43 / 12.55против --gr-popover | Цвет текста и иконок внутри popover-слоёв. |
--gr-muted--gr-muted | #f0eee6 | #3a3a37 | Приглушённая поверхность для вторичных блоков, плашек и заполнений. | |
--gr-muted-fg--gr-muted-fg | #5e5d59 | #b0aea5 | 5.67 / 5.13против --gr-muted | Вторичный текстовый цвет для helper-копии и менее важных подписей. |
--gr-secondary--gr-secondary | #e8e6dc | #3a3a37 | Нейтральная secondary action/surface-подложка без сильного бренд-акцента. | |
--gr-secondary-fg--gr-secondary-fg | #3d3d3a | #d1cfc5 | 8.71 / 7.30против --gr-secondary | Контрастный текст для secondary-кнопок и поверхностей. |
--gr-overlay-bg--gr-overlay-bg | rgb(28 27 24 / 0.45) | rgb(10 10 9 / 0.6) | Подложка модальных слоёв (модалка, drawer): затемняет страницу, оставляя её узнаваемой. | |
--gr-brd--gr-brd | #d9d8d5 | #42423f | Базовый цвет бордеров и разделителей текущей темы. | |
--gr-brd-strong--gr-brd-strong | #b8b7b4 | #5f5e5a | Граница плотнее разделителя: пунктир и точки GrDivider, черта невыбранной вкладки под указателем. Тема ставит её и в токены компонентов — рамку outline-сообщения, разделитель пути. Тема без второй ступени границы ставит сюда --gr-brd. | |
--gr-input--gr-input | #82817e | #878681 | Рамка поля ввода в покое — у GrInput, GrTextarea, GrNumberInput, GrInputTag, GrAutocomplete, GrOtpInput и триггеров GrSelect, GrTreeSelect, GrColorPicker. Тема, у которой рамка поля темнее разделителя, разводит её с --gr-brd. | |
--gr-input-hover--gr-input-hover | #565553 | #afaea8 | Рамка поля ввода под указателем. Тема без отклика рамки ставит сюда --gr-input. | |
--gr-input-focus-brd--gr-input-focus-brd | var(--gr-ring) | var(--gr-ring) | Рамка поля в фокусе, вместе с кольцом --gr-ring. Тема без своего решения ставит --gr-input: рамка в фокусе не меняется. | |
--gr-input-readonly-bg--gr-input-readonly-bg | transparent | transparent | Подложка поля только для чтения. Тема, у которой такое поле читается текстом на поверхности, ставит transparent; без своего решения — --gr-bg, как у рабочего поля. | |
--gr-input-readonly-brd--gr-input-readonly-brd | var(--gr-brd) | var(--gr-brd) | Рамка поля только для чтения. Без своего решения — --gr-input, как у рабочего поля. | |
--gr-control-brd--gr-control-brd | #82817e | #878681 | Граница переключаемого контрола в покое — коробки чекбокса, кружка радио, дорожки выключенного переключателя. Держит 3:1 к странице, карточке и --gr-muted (WCAG 1.4.11): у такого контрола граница — единственное, по чему его видно. | |
--gr-control-brd-hover--gr-control-brd-hover | #565553 | #afaea8 | Граница переключаемого контрола под указателем: коробка отметки, кружок радио. Тема без отклика ставит сюда --gr-control-brd. | |
--gr-ring--gr-ring | #2a78d6 | #6aa3e8 | Цвет focus-ring и акцентного outline для интерактивных компонентов. |
Роли состояний
| Токен | Светлая | Тёмная | Контраст | Роль |
|---|---|---|---|---|
--gr-disabled-bg--gr-disabled-bg | #f0eee6 | #353532 | Фон недоступного контрола: гасит его поверхностью, а не прозрачностью — opacity разбавляет выверенные на AA токены текста. | |
--gr-disabled-fg--gr-disabled-fg | #9c9a92 | #73726c | Цвет текста и иконок недоступного контрола. | |
--gr-disabled-brd--gr-disabled-brd | var(--gr-disabled-bg) | var(--gr-disabled-bg) | Цвет рамки недоступного контрола. | |
--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.13 / 7.48против --gr-bg | Цвет текста ошибки и метки обязательного поля. |
Роли действий
| Токен | Светлая | Тёмная | Контраст | Роль |
|---|---|---|---|---|
--gr-primary--gr-primary | #d97757 | #d97757 | Главный brand/action цвет темы для primary CTA и ключевых акцентов. | |
--gr-primary-fg--gr-primary-fg | #141413 | #141413 | 5.90 / 5.90против --gr-primary | Контрастный текст и иконки поверх primary-заливки. |
--gr-accent--gr-accent | #f6e8e0 | #46352d | Мягкая акцентная поверхность для selected/hovered областей и подсветок. | |
--gr-accent-fg--gr-accent-fg | #973f22 | #e6a37f | 5.75 / 5.48против --gr-accent | Цвет текста поверх accent-подложек. |
--gr-selected--gr-selected | var(--gr-fg) | var(--gr-fg) | Цвет выбранного: заливка и рамка отметки и радио, дорожка включённого переключателя, черта вкладки, заливка слайдера, текущая страница пагинации, кольцо выбранного цвета; подмесом — подсветка выбранной строки и узла дерева. Тема, где выбор — бренд, ставит сюда --gr-primary. | |
--gr-selected-fg--gr-selected-fg | var(--gr-bg) | var(--gr-bg) | 17.50 / 14.39против --gr-selected | Знак на заливке --gr-selected: галочка отметки, точка радио, номер текущей страницы. |
--gr-selected-hover--gr-selected-hover | #3d3d3a | #d1cfc5 | Выбранное под указателем: заливка отмеченной коробки и выбранного радио. Тема без отклика ставит сюда --gr-selected. |
Роли статусов
| Токен | Светлая | Тёмная | Контраст | Роль |
|---|---|---|---|---|
--gr-success--gr-success | #788c5d | #8a9e6d | Основной semantic success-цвет для статусов, бейджей и уведомлений. | |
--gr-success-light--gr-success-light | #e9ebe1 | #35382e | Облегчённая success-подложка для мягких статусов и подсветок. | |
--gr-success-fg--gr-success-fg | #141413 | #141413 | 5.01 / 6.31против --gr-success | Контрастный текст и иконки поверх success-заливки. |
--gr-primary-text--gr-primary-text | #973f22 | #e6a37f | 6.54 / 7.15против --gr-bg | Основной тон как ЦВЕТ ТЕКСТА на фоне страницы: насыщенный --gr-primary под текст не рассчитан и не проходит по контрасту. |
--gr-success-text--gr-success-text | #4f5e3b | #b2c09a | 6.65 / 7.87против --gr-bg | Текстовый оттенок для success-сообщений на светлой подложке. |
--gr-warning--gr-warning | #c9a82d | #c9a82d | Основной semantic warning-цвет для предупреждений и промежуточных статусов. | |
--gr-warning-light--gr-warning-light | #f4eedb | #433d26 | Облегчённая warning-подложка для мягких warning-состояний. | |
--gr-warning-fg--gr-warning-fg | #141413 | #141413 | 8.01 / 8.01против --gr-warning | Контрастный текст и иконки поверх warning-заливки. |
--gr-warning-text--gr-warning-text | #6f5a14 | #dcc067 | 6.33 / 8.50против --gr-bg | Текстовый оттенок для warning-сообщений на мягкой warning-подложке. |
--gr-danger--gr-danger | #b8433a | #e3585a | Semantic danger-цвет для ошибок, рисков и критических сообщений. | |
--gr-danger-light--gr-danger-light | #f1e1dd | #482f2e | Облегчённая danger-подложка для мягких error-состояний. | |
--gr-danger-fg--gr-danger-fg | #faf9f5 | #141413 | 5.11 / 5.10против --gr-danger | Контрастный текст и иконки поверх danger-заливки. |
--gr-danger-text--gr-danger-text | #9c2a34 | #f5a097 | 7.13 / 7.48против --gr-bg | Текстовый оттенок для error-сообщений на мягкой danger-подложке. |
--gr-info--gr-info | #2268bf | #6aa3e8 | Semantic info-цвет для нейтральных уведомлений и информационных акцентов. | |
--gr-info-light--gr-info-light | #dfe8f1 | #323c47 | Облегчённая info-подложка для спокойных информационных блоков. | |
--gr-info-fg--gr-info-fg | #faf9f5 | #141413 | 5.25 / 7.04против --gr-info | Контрастный текст и иконки поверх info-заливки. |
--gr-info-text--gr-info-text | #1c57a0 | #a1c1ec | 6.83 / 8.20против --gr-bg | Текстовый оттенок для спокойных info-сообщений и подсказок. |
--gr-slate--gr-slate | #4d4c48 | #9c9a92 | Нейтральный semantic slate-цвет для subdued индикаторов и secondary статусов. | |
--gr-slate-light--gr-slate-light | #e4e3df | #3b3b38 | Облегчённая slate-подложка для мягких нейтральных состояний. | |
--gr-slate-fg--gr-slate-fg | #faf9f5 | #141413 | 8.16 / 6.54против --gr-slate | Контрастный текст и иконки поверх slate-заливки. |
--gr-slate-text--gr-slate-text | #4d4c48 | #c2c0b6 | 8.16 / 8.31против --gr-bg | Текстовый оттенок для нейтральных slate-сообщений и плашек. |
--gr-azure--gr-azure | #5b9fb6 | #5b9fb6 | Semantic azure-цвет для информационных акцентов и вспомогательных статусов. | |
--gr-azure-light--gr-azure-light | #e5eded | #303c3e | Облегчённая azure-подложка для мягких informational поверхностей. | |
--gr-azure-fg--gr-azure-fg | #141413 | #141413 | 6.21 / 6.21против --gr-azure | Контрастный текст и иконки поверх azure-заливки. |
--gr-azure-text--gr-azure-text | #2e6270 | #a3cbd8 | 6.44 / 8.73против --gr-bg | Текстовый оттенок для azure-плашек и спокойных informational блоков. |
Роли плотных заливок
| Токен | Светлая | Тёмная | Контраст | Роль |
|---|---|---|---|---|
--gr-primary-solid--gr-primary-solid | var(--gr-primary) | var(--gr-primary) | Сплошная заливка кнопочного веса тона primary. | |
--gr-primary-solid-hover--gr-primary-solid-hover | var(--gr-primary-hover) | var(--gr-primary-hover) | Заливка --gr-primary-solid под курсором. | |
--gr-primary-solid-active--gr-primary-solid-active | var(--gr-primary-active) | var(--gr-primary-active) | Заливка --gr-primary-solid в момент нажатия. | |
--gr-primary-solid-fg--gr-primary-solid-fg | var(--gr-primary-fg) | var(--gr-primary-fg) | 5.90 / 5.90против --gr-primary-solid | Текст и иконки на заливке --gr-primary-solid. |
--gr-success-solid--gr-success-solid | var(--gr-success) | #8a9e6d | Сплошная заливка кнопочного веса тона success. | |
--gr-success-solid-hover--gr-success-solid-hover | var(--gr-success-hover) | #97aa7a | Заливка --gr-success-solid под курсором. | |
--gr-success-solid-active--gr-success-solid-active | var(--gr-success-active) | #a3b587 | Заливка --gr-success-solid в момент нажатия. | |
--gr-success-solid-fg--gr-success-solid-fg | var(--gr-success-fg) | var(--gr-success-fg) | 5.01 / 6.31против --gr-success-solid | Текст и иконки на заливке --gr-success-solid. |
--gr-warning-solid--gr-warning-solid | var(--gr-warning) | var(--gr-warning) | Сплошная заливка кнопочного веса тона warning. | |
--gr-warning-solid-hover--gr-warning-solid-hover | var(--gr-warning-hover) | var(--gr-warning-hover) | Заливка --gr-warning-solid под курсором. | |
--gr-warning-solid-active--gr-warning-solid-active | var(--gr-warning-active) | var(--gr-warning-active) | Заливка --gr-warning-solid в момент нажатия. | |
--gr-warning-solid-fg--gr-warning-solid-fg | var(--gr-warning-fg) | var(--gr-warning-fg) | 8.01 / 8.01против --gr-warning-solid | Текст и иконки на заливке --gr-warning-solid. |
--gr-danger-solid--gr-danger-solid | var(--gr-danger) | #b8433a | Сплошная заливка кнопочного веса тона danger. | |
--gr-danger-solid-hover--gr-danger-solid-hover | var(--gr-danger-hover) | #a93c34 | Заливка --gr-danger-solid под курсором. | |
--gr-danger-solid-active--gr-danger-solid-active | var(--gr-danger-active) | #99352e | Заливка --gr-danger-solid в момент нажатия. | |
--gr-danger-solid-fg--gr-danger-solid-fg | var(--gr-danger-fg) | #faf9f5 | 5.11 / 5.11против --gr-danger-solid | Текст и иконки на заливке --gr-danger-solid. |
--gr-info-solid--gr-info-solid | var(--gr-info) | #2268bf | Сплошная заливка кнопочного веса тона info. | |
--gr-info-solid-hover--gr-info-solid-hover | var(--gr-info-hover) | #1f5fae | Заливка --gr-info-solid под курсором. | |
--gr-info-solid-active--gr-info-solid-active | var(--gr-info-active) | #1b559c | Заливка --gr-info-solid в момент нажатия. | |
--gr-info-solid-fg--gr-info-solid-fg | var(--gr-info-fg) | #faf9f5 | 5.25 / 5.25против --gr-info-solid | Текст и иконки на заливке --gr-info-solid. |
--gr-slate-solid--gr-slate-solid | var(--gr-slate) | #5e5d59 | Сплошная заливка кнопочного веса тона slate. | |
--gr-slate-solid-hover--gr-slate-solid-hover | var(--gr-slate-hover) | #575653 | Заливка --gr-slate-solid под курсором. | |
--gr-slate-solid-active--gr-slate-solid-active | var(--gr-slate-active) | #53524e | Заливка --gr-slate-solid в момент нажатия. | |
--gr-slate-solid-fg--gr-slate-solid-fg | var(--gr-slate-fg) | #faf9f5 | 8.16 / 6.26против --gr-slate-solid | Текст и иконки на заливке --gr-slate-solid. |
--gr-azure-solid--gr-azure-solid | var(--gr-azure) | var(--gr-azure) | Сплошная заливка кнопочного веса тона azure. | |
--gr-azure-solid-hover--gr-azure-solid-hover | var(--gr-azure-hover) | var(--gr-azure-hover) | Заливка --gr-azure-solid под курсором. | |
--gr-azure-solid-active--gr-azure-solid-active | var(--gr-azure-active) | var(--gr-azure-active) | Заливка --gr-azure-solid в момент нажатия. | |
--gr-azure-solid-fg--gr-azure-solid-fg | var(--gr-azure-fg) | var(--gr-azure-fg) | 6.21 / 6.21против --gr-azure-solid | Текст и иконки на заливке --gr-azure-solid. |
Роли визуализации данных
| Токен | Светлая | Тёмная | Роль |
|---|---|---|---|
--gr-chart-1--gr-chart-1 | #c05b36 | #e0895f | Первый цвет серии для графиков и data-visualization элементов. |
--gr-chart-2--gr-chart-2 | #5f7a1c | #9dbb6a | Второй цвет серии для графиков и data-visualization элементов. |
--gr-chart-3--gr-chart-3 | #2f68b8 | #6fa2e2 | Третий цвет серии для графиков и data-visualization элементов. |
--gr-chart-4--gr-chart-4 | #a8407a | #d684b4 | Четвёртый цвет серии для графиков и data-visualization элементов. |
--gr-chart-5--gr-chart-5 | #0d7d8c | #4fb8ac | Пятый цвет серии для графиков и data-visualization элементов. |
Тени
| Токен | Светлая | Тёмная | Роль |
|---|---|---|---|
--gr-shadow-1--gr-shadow-1 | 0 1px 2px rgba(28, 27, 24, 0.08) | 0 1px 2px rgba(0, 0, 0, 0.45) | Уровень elevation 1. Синеватая полупрозрачная тень читается на светлом фоне мягче чёрной. |
--gr-shadow-2--gr-shadow-2 | 0 8px 24px rgba(28, 27, 24, 0.13) | 0 8px 24px rgba(0, 0, 0, 0.55) | Уровень elevation 2 для всплывающих слоёв. |
--gr-shadow-3--gr-shadow-3 | 0 16px 48px rgba(28, 27, 24, 0.18) | 0 16px 48px rgba(0, 0, 0, 0.65) | Уровень elevation 3 для модальных слоёв. |