Использование цвета

Neutrals

Нейтральные цвета используются для обозначения различий и зависимостей в интерфейсе, а так же позволяют сделать интерфейс более приятным для восприятия. Они организованы от белого к черному, а число в имени переменной обозначает значение альфа-канала для черного цвета. Это значение используется только для удобства ориентации в этой группе цветов. Сочетания цветов в диапазоне от 30 до 70 следует использовать с осторожностью, так как их доступность ограничена. Нейтральные цвета не управляются темами полноценно, возможно изменить только температуру цвета.

Backgrounds

Цвета фонов определяют визуальную иерархию компонентов. При размещении контейнера на странице и полей в контейнере, следует использовать цвета контейнера соответствующий иерархии компонентов. Например, для cds-color-background-page-primary следует использовать cds-color-container-page-primary. Запрещается размещать контейнер с primary фоном на странице, которая использует secondary фон и т.д.

Page

Эти цвета предназначены для фона страниц

Container

Цвета для контейнера, который размещается на фоне страницы

Field

Цвета предназначеные для полей в контейнере на странице

Element

Предназначен для высококонтрастных элементов интерфейса

Inverse

Предназначен для высококонтрастных фонов, значение которых противоположно значениям cds-color-background-page-primary и cds-color-background-container-primary

Overlay

Оверлей используется для временного, частичного блокирования доступа пользователя к контенту основной страницы, или контенту расположенному ниже компонента, на котором нужно сфокусировать внимание.

Interactive

Используются для обозначения интерактивности в компонентах.

Первая группа интерактивных цветов

Вторая группа интерактивных цветов

Feedback

Цвета Feedback используются для обратной связи интерфейса с пользователем и дополнительного визуального информирования.

Например, цвета насыщенности 100 применяются для контрастных фонов в сочетании с элементами для которых используются цвета inverse, а так же для контуров, и текстов ошибок. Цвета с насыщенностью 10 используется для фонов сообщений с текстом var(--cds-color-text-primary). Остальные сочетания следует проверять на соответствие стандартам доступности.

Error

Warning

Success

Info

Progress

Text

Любой текст на любом фоне должен соответствовать стандартам доступности.

var(--cds-color-text-primary) и var(--cds-color-text-secondary) используются для основного и дополнительного текста.

Цвета var(--cds-color-text-label), var(--cds-color-text-description) и var(--cds-color-text-placeholder) для лейбла, описания и подсказки соответственно.

Links

Disabled

Используются для обозначения заблокированных состояний компонентов

Border

Icon