Свой бренд и тема

Цвета Редактора — токены кита. Тема, акцент и бренд — атрибуты на <html>, поэтому продукт перекрашивает всё сразу, не трогая ни одного компонента.

Переключайте варианты — вместе с Редактором перекрасится весь этот сайт: он тоже сидит на токенах кита. Светлую и тёмную тему переключает кнопка внизу меню слева.

Как устроеноСкопировать ссылку на раздел

• Три оси на <html>: data-theme (dark, light, dim), data-accent (blue, violet) и data-brand. Бренд отменяет ось акцента целиком.
• Бренд — один блок CSS: свои примитивы --od-acme-* и их присвоение ролям (--accent, --accent-soft, --focus-ring, --selection). Примитивы кита --od-* не переопределяются.
• Светлой теме — свой блок. --accent-strong читается на подложке, и в светлой теме ему нужен тёмный шаг, а --accent-on-inverse — наоборот, светлый.
• Блоки бренда стоят после стилей кита: у :root[data-brand] и :root[data-accent] одна специфичность, побеждает тот, что ниже.
• Лист paper остаётся светлым в любой теме, а акцент на нём — заливка темы приложения: она держит контраст на белом у любого бренда.