Функциональная цветовая палитра / FCL

Единственный источник цвета для компонентов: 263 переменные, собираемые из слоёв, акцентов, состояний и ролей. Значения ссылаются на токены абсолютной палитры. Ниже — полная таблица всех 90 сочетаний × 3 роли.

Грамматика

<слой>/<акцент>/<состояние>/<роль>
ABV/DFT/RGL/BGR → GRY/200 = #DBDBDB

Слой — где элемент в пространстве (полный реестр — в Семантике):
- ABV — приподнят над поверхностью;
- SFC — несущая поверхность;
- BLW — утоплен, «в яме»;
Смысловые сегменты имени:
- акцент — смысловая роль элемента;
- состояние — интерактив;
- роль — что красим:
  - контент FGR — текст, иконка, глиф;
  - рамка BRD — обводка, граница;
  - фон BGR — заливка элемента;
У переключаемых компонентов (CHB, TOG, RAD) вместо PRS используется CHD, у полей ввода INP — состояния с суффиксом _FLD;
Роли в каждой карточке показаны цветными пластинами с метками ролей;

Пространственность дополняется объёмом: для приподнятых элементов — градиент света ABV/…/GRD, для глубины — тени <слой>/…/SHD (у ABV тень вниз, у BLW — внутрь ямы).

Порядок ролей в карточках отражает пространственное наслоение слоёв:

для ABV и SFC:
- FGR — слой переднего плана: текст, графика;
- BGR — фон для переднего плана;
- BRD — слой, обрамляющий фоновый;
для BLW порядок инвертирован — движемся вглубь:
- BRD — обрамляющий слой встречает первым;
- FGR — слой переднего плана;
- BGR — поверхностный слой, дно;

Как применять

Лестница ролей: девять ступеней от контента выступа до дна углубления — Лестница ролей по слоям: сверху вниз — от контента выступа ABV до дна углубления BLW; под поверхностью порядок инвертирован (BRD → FGR → BGR).

Кнопка и поле ввода на панели-поверхности — Элементы на поверхности: кнопка (ABV) и поле ввода (BLW) на панели (SFC); все цвета — токены DFT/RGL.

Кнопка (не нажата, обычная):
- фон — ABV/DFT/RGL/BGR;
- текст — ABV/DFT/RGL/FGR;
- рамка — ABV/DFT/RGL/BRD;
Поле ввода:
- дно «ямы» — BLW/DFT/***/BGR;
- введённый текст — BLW/DFT/***/FGR;
Карточка — сама поверхность: SFC/DFT/RGL/BGR + тень SFC/DFT/RGL/SHD;

Полная таблица

Above surface / ABV

Emphasis Default / DFT

Above / Default / Regular

ABV/DFT/RGL/...

FGR

BGR

BRD

Above / Default / Hover

ABV/DFT/HVR/...

FGR

BGR

BRD

Above / Default / Focus

ABV/DFT/FCS/...

FGR

BGR

BRD

Above / Default / Pressed

ABV/DFT/PRS/...

FGR

BGR

BRD

Above / Default / Disabled

ABV/DFT/DSB/...

FGR

BGR

BRD

Emphasis Primary / PRM

Above / Primary / Regular

ABV/PRM/RGL/...

FGR

BGR

BRD

Above / Primary / Hover

ABV/PRM/HVR/...

FGR

BGR

BRD

Above / Primary / Focus

ABV/PRM/FCS/...

FGR

BGR

BRD

Above / Primary / Pressed

ABV/PRM/PRS/...

FGR

BGR

BRD

Above / Primary / Disabled

ABV/PRM/DSB/...

FGR

BGR

BRD

Emphasis Accent / ACC

Above / Accent / Regular

ABV/ACC/RGL/...

FGR

BGR

BRD

Above / Accent / Hover

ABV/ACC/HVR/...

FGR

BGR

BRD

Above / Accent / Focus

ABV/ACC/FCS/...

FGR

BGR

BRD

Above / Accent / Pressed

ABV/ACC/PRS/...

FGR

BGR

BRD

Above / Accent / Disabled

ABV/ACC/DSB/...

FGR

BGR

BRD

Emphasis Positive / POS

Above / Positive / Regular

ABV/POS/RGL/...

FGR

BGR

BRD

Above / Positive / Hover

ABV/POS/HVR/...

FGR

BGR

BRD

Above / Positive / Focus

ABV/POS/FCS/...

FGR

BGR

BRD

Above / Positive / Pressed

ABV/POS/PRS/...

FGR

BGR

BRD

Above / Positive / Disabled

ABV/POS/DSB/...

FGR

BGR

BRD

Emphasis Attention / ATN

Above / Attention / Regular

ABV/ATN/RGL/...

FGR

BGR

BRD

Above / Attention / Hover

ABV/ATN/HVR/...

FGR

BGR

BRD

Above / Attention / Focus

ABV/ATN/FCS/...

FGR

BGR

BRD

Above / Attention / Pressed

ABV/ATN/PRS/...

FGR

BGR

BRD

Above / Attention / Disabled

ABV/ATN/DSB/...

FGR

BGR

BRD

Emphasis Negative / NEG

Above / Negative / Regular

ABV/NEG/RGL/...

FGR

BGR

BRD

Above / Negative / Hover

ABV/NEG/HVR/...

FGR

BGR

BRD

Above / Negative / Focus

ABV/NEG/FCS/...

FGR

BGR

BRD

Above / Negative / Pressed

ABV/NEG/PRS/...

FGR

BGR

BRD

Above / Negative / Disabled

ABV/NEG/DSB/...

FGR

BGR

BRD

Surface / SFC

Emphasis Default / DFT

Surface / Default / Regular

SFC/DFT/RGL/...

FGR

BGR

BRD

Surface / Default / Hover

SFC/DFT/HVR/...

FGR

BGR

BRD

Surface / Default / Focus

SFC/DFT/FCS/...

FGR

BGR

BRD

Surface / Default / Pressed

SFC/DFT/PRS/...

FGR

BGR

BRD

Surface / Default / Disabled

SFC/DFT/DSB/...

FGR

BGR

BRD

Emphasis Primary / PRM

Surface / Primary / Regular

SFC/PRM/RGL/...

FGR

BGR

BRD

Surface / Primary / Hover

SFC/PRM/HVR/...

FGR

BGR

BRD

Surface / Primary / Focus

SFC/PRM/FCS/...

FGR

BGR

BRD

Surface / Primary / Pressed

SFC/PRM/PRS/...

FGR

BGR

BRD

Surface / Primary / Disabled

SFC/PRM/DSB/...

FGR

BGR

BRD

Emphasis Accent / ACC

Surface / Accent / Regular

SFC/ACC/RGL/...

FGR

BGR

BRD

Surface / Accent / Hover

SFC/ACC/HVR/...

FGR

BGR

BRD

Surface / Accent / Focus

SFC/ACC/FCS/...

FGR

BGR

BRD

Surface / Accent / Pressed

SFC/ACC/PRS/...

FGR

BGR

BRD

Surface / Accent / Disabled

SFC/ACC/DSB/...

FGR

BGR

BRD

Emphasis Positive / POS

Surface / Positive / Regular

SFC/POS/RGL/...

FGR

BGR

BRD

Surface / Positive / Hover

SFC/POS/HVR/...

FGR

BGR

BRD

Surface / Positive / Focus

SFC/POS/FCS/...

FGR

BGR

BRD

Surface / Positive / Pressed

SFC/POS/PRS/...

FGR

BGR

BRD

Surface / Positive / Disabled

SFC/POS/DSB/...

FGR

BGR

BRD

Emphasis Attention / ATN

Surface / Attention / Regular

SFC/ATN/RGL/...

FGR

BGR

BRD

Surface / Attention / Hover

SFC/ATN/HVR/...

FGR

BGR

BRD

Surface / Attention / Focus

SFC/ATN/FCS/...

FGR

BGR

BRD

Surface / Attention / Pressed

SFC/ATN/PRS/...

FGR

BGR

BRD

Surface / Attention / Disabled

SFC/ATN/DSB/...

FGR

BGR

BRD

Emphasis Negative / NEG

Surface / Negative / Regular

SFC/NEG/RGL/...

FGR

BGR

BRD

Surface / Negative / Hover

SFC/NEG/HVR/...

FGR

BGR

BRD

Surface / Negative / Focus

SFC/NEG/FCS/...

FGR

BGR

BRD

Surface / Negative / Pressed

SFC/NEG/PRS/...

FGR

BGR

BRD

Surface / Negative / Disabled

SFC/NEG/DSB/...

FGR

BGR

BRD

Below / BLW

Emphasis Default / DFT

Below / Default / Regular

BLW/DFT/RGL/...

BRD

FGR

BGR

Below / Default / Hover

BLW/DFT/HVR/...

BRD

FGR

BGR

Below / Default / Focus

BLW/DFT/FCS/...

BRD

FGR

BGR

Below / Default / Pressed

BLW/DFT/PRS/...

BRD

FGR

BGR

Below / Default / Disabled

BLW/DFT/DSB/...

BRD

FGR

BGR

Emphasis Primary / PRM

Below/ Primary / Regular

BLW/PRM/RGL/...

BRD

FGR

BGR

Below / Primary / Hover

BLW/PRM/HVR/...

BRD

FGR

BGR

Below / Primary / Focus

BLW/PRM/FCS/...

BRD

FGR

BGR

Below / Primary / Pressed

BLW/PRM/PRS/...

BRD

FGR

BGR

Below / Primary / Disabled

BLW/PRM/DSB/...

BRD

FGR

BGR

Emphasis Accent / ACC

Below / Accent / Regular

BLW/ACC/RGL/...

BRD

FGR

BGR

Below / Accent / Hover

BLW/ACC/HVR/...

BRD

FGR

BGR

Below / Accent / Focus

BLW/ACC/FCS/...

BRD

FGR

BGR

Below / Accent / Pressed

BLW/ACC/PRS/...

BRD

FGR

BGR

Below / Accent / Disabled

BLW/ACC/DSB/...

BRD

FGR

BGR

Emphasis Positive / POS

Below / Positive / Regular

BLW/POS/RGL/...

BRD

FGR

BGR

Below / Positive / Hover

BLW/POS/HVR/...

BRD

FGR

BGR

Below / Positive / Focus

BLW/POS/FCS/...

BRD

FGR

BGR

Below / Positive / Pressed

BLW/POS/PRS/...

BRD

FGR

BGR

Below / Positive / Disabled

BLW/POS/DSB/...

BRD

FGR

BGR

Emphasis Attention / ATN

Below / Attention / Regular

BLW/ATN/RGL/...

BRD

FGR

BGR

Below / Attention / Hover

BLW/ATN/HVR/...

BRD

FGR

BGR

Below / Attention / Focus

BLW/ATN/FCS/...

BRD

FGR

BGR

Below / Attention / Pressed

BLW/ATN/PRS/...

BRD

FGR

BGR

Below / Attention / Disabled

BLW/ATN/DSB/...

BRD

FGR

BGR

Emphasis Negative / NEG

Below / Negative / Regular

BLW/NEG/RGL/...

BRD

FGR

BGR

Below / Negative / Hover

BLW/NEG/HVR/...

BRD

FGR

BGR

Below / Negative / Focus

BLW/NEG/FCS/...

BRD

FGR

BGR

Below / Negative / Pressed

BLW/NEG/PRS/...

BRD

FGR

BGR

Below / Negative / Disabled

BLW/NEG/DSB/...

BRD

FGR

BGR