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

Цвет является неотъемлемым аспектом передачи данных. Все сочетания цветов в компонентах должны соответствовать или превышать стандарт доступности WCAG 2.0 уровня АА.

Neutrals

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

  • 0

    --cds-color-neutral-0

    #FFFFFF

  • 4

    --cds-color-neutral-4

    #F5F5F5

  • 8

    --cds-color-neutral-8

    #EBEBEB

  • 10

    --cds-color-neutral-10

    #E5E5E5

  • 15

    --cds-color-neutral-15

    #DADADA

  • 25

    --cds-color-neutral-25

    #BEBEBE

  • 40

    --cds-color-neutral-40

    #999999

  • 48

    --cds-color-neutral-48

    #858585

  • 66

    --cds-color-neutral-66

    #555555

  • 100

    --cds-color-neutral-100

    #000000

Backgrounds

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

Page

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

  • Primary

    --cds-color-background-page-primary

    #F5F5F5

  • Secondary

    --cds-color-background-page-secondary

    #FFFFFF

Container

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

  • Primary

    --cds-color-background-container-primary

    #FFFFFF

  • Secondary

    --cds-color-background-container-secondary

    #F5F5F5

Field

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

  • Primary

    --cds-color-background-field-primary

    #FFFFFF

  • Secondary

    --cds-color-background-field-secondary

    #F5F5F5

Element

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

  • Primary

    --cds-color-background-element-primary

    #000000

Inverse

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

  • Inverse

    --cds-color-background-inverse-inverse

    #000000

Overlay

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

  • 01

    --cds-color-overlay-01

    RGBA(85, 85, 85, 0.65)

  • 02

    --cds-color-overlay-02

    RGBA(245, 245, 245, 0.65)

Interactive

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

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

  • Default

    --cds-color-interactive-01-default

    #1D6EF6

  • Hover

    --cds-color-interactive-01-hover

    #0951CE

  • Focus

    --cds-color-interactive-01-focus

    #1D6EF6

  • Active

    --cds-color-interactive-01-active

    #0745B0

  • Above

    --cds-color-interactive-01-above

    #FFFFFF

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

  • Default

    --cds-color-interactive-02-default

    #DADADA

  • Hover

    --cds-color-interactive-02-hover

    #ECF3FE

  • Focus

    --cds-color-interactive-02-focus

    #1D6EF6

  • Active

    --cds-color-interactive-02-active

    #D8E7FD

  • Above

    --cds-color-interactive-02-above

    #1D6EF6

Feedback

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

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

Error

  • 10

    --cds-color-feedback-error-10

    #FFDDDD

  • 20

    --cds-color-feedback-error-20

    #FBCCCC

  • 100

    --cds-color-feedback-error-100

    #EB0000

Warning

  • 10

    --cds-color-feedback-warning-10

    #FAF3E0

  • 20

    --cds-color-feedback-warning-20

    #FFF2CC

  • 100

    --cds-color-feedback-warning-100

    #FFC000

Success

  • 10

    --cds-color-feedback-success-10

    #EFFAEC

  • 20

    --cds-color-feedback-success-20

    #D1EECC

  • 100

    --cds-color-feedback-success-100

    #1AA800

Info

  • 10

    --cds-color-feedback-info-10

    #F2F2F2

  • 20

    --cds-color-feedback-info-20

    #E7E7E7

  • 100

    --cds-color-feedback-info-100

    #858585

Progress

  • 10

    --cds-color-feedback-progress-10

    #E5F3F9

  • 20

    --cds-color-feedback-progress-20

    #CCE7F3

  • 100

    --cds-color-feedback-progress-100

    #0087C4

Text

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

  • Primary

    --cds-color-text-primary

    #000000

  • Secondary

    --cds-color-text-secondary

    #767676

  • Description

    --cds-color-text-description

    #555555

  • Label

    --cds-color-text-label

    #000000

  • Placeholder

    --cds-color-text-placeholder

    #BEBEBE

  • Inverse

    --cds-color-text-inverse

    #FFFFFF

Disabled

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

  • 01

    --cds-color-disabled-01

    #EBEBEB

  • 02

    --cds-color-disabled-02

    #BEBEBE

Border

  • Primary

    --cds-color-border-element-primary

    #BEBEBE

  • Secondary

    --cds-color-border-element-secondary

    #E5E5E5

Icon

  • Default

    --cds-color-icon-default

    #000000

  • Inverse

    --cds-color-icon-inverse

    #FFFFFF