/*
Единый визуальный язык платформы Olista.
Один файл на все приложения платформы. В этом репозитории из его потребителей остался один — сервер
идентификации (Center.Identity); консоль конструктора (Center.SiteBuilder) уехала в
KisaPs/Center.SiteBuilder, сайт организации (OlistaTradeEnterprise) — в KisaPs/Center.Analytics, и
берут они этот файл пакетом Center.Design. Доставляется он как статика библиотеки классов Razor —
_content/Center.Design/design.css, — то есть лежит на диске в одном экземпляре и подключается ссылкой,
а не копированием. Почему так, а не копия на приложение, — см. комментарий в Center.Design.csproj.
Что здесь есть: значения (цвета, радиусы, тени, типографика, отступы, длительности), оболочка страницы
(ссылка обхода, шапка, бургер, кнопки) и — с 2026-09-15 — словарь содержимого: карточка, панель, плашка,
уведомление, пустое состояние (раздел СОДЕРЖИМОЕ ЭКРАНОВ, решение PO — DECISIONS 0.6).
Прежняя редакция этой строки говорила обратное: «содержимого экранов здесь нет, карточки остаются в
своих листах — но берут отсюда всё, что должно совпадать». Первая половина обещания держалась на второй,
а вторая не сработала: замер восьми репозиториев 2026-09-15 нашёл 1696 уникальных имён классов и ни
одного общего для трёх репозиториев. Значения домены берут отсюда честно, а содержимое каждый пишет
заново. Граница пересмотрена там, где она не держалась, и только там.
ИКОНКИ — с 2026-09-17, один спрайт на семью: wwwroot/icons/ds-icons.svg (32 символа — 30 глифов
Lucide под ISC и знак семьи «Кольца роста» в двух ступенях: полный и малый, для 16 пикселей, где
три кольца сливаются в спираль). Рисуются ссылкой на символ, а не картинкой:
Хосту на Blazor то же самое даёт компонент , и путь к спрайту написан в нём
один раз. Набор имён объявлен в brand/icons/build.mjs — тем же скриптом спрайт и собирается.
Правило .ds-icon и две его ступени размера — в разделе ИКОНКИ ниже.
Чего здесь нет по-прежнему: раскладка экранов и формы конкретных приложений. Словарь даёт кирпич, а не дом.
Чего здесь нет и не будет: стилей опубликованных сайтов клиентов (blocks*.css). У них своя палитра автора
и свой макетный закон; общие токены платформы к ним отношения не имеют, и смешать одно с другим значит
отдать посетителю чужого сайта индиговые кнопки Olista.
Бренд — Olista (решение PO 2026-09-16, DECISIONS 0.9). Отсюда три вещи, которых раньше не было:
тёплые нейтральные поверхности, СВОЙ оттенок акцента у каждого приложения по одной формуле OKLCH
(раздел АКЦЕНТ ПРИЛОЖЕНИЯ) и две самохостимые гарнитуры — Geologica на заголовки и Golos Text на
текст, обе под SIL OFL 1.1 (раздел ШРИФТЫ).
Хост ставит на атрибут data-app="<ключ приложения>" — тот же ключ, которым приложение зовётся в
реестре Center.Design/Platform/PlatformApps.cs (константы PlatformAppKeys). Страница без атрибута —
Olista. Больше от хоста ничего не требуется: механизм тем (data-theme + системная схема) работает как
работал, и этот PR его не трогает.
Ни одного внешнего шрифта и ни одного обращения к CDN — как и во всех приложениях платформы: страница
обязана открыться и выглядеть собой на машине, у которой наружу ничего не пущено. Гарнитуры лежат
рядом, в wwwroot/fonts, вместе со своими лицензиями; ни google.com/fonts, ни какого-либо другого
внешнего адреса в этом файле нет и быть не должно.
*/
/* ===================================================================================================
ШРИФТЫ
Две гарнитуры, обе под SIL Open Font License 1.1, обе лежат в репозитории: Geologica на заголовки,
Golos Text на текст. Тексты лицензий — рядом с файлами (wwwroot/fonts/OFL-Geologica.txt,
wwwroot/fonts/OFL-GolosText.txt), и это не формальность: OFL требует распространять шрифт вместе с
лицензией, а пакет Center.Design везёт статику соседям.
ПОЧЕМУ САМОХОСТИНГ, а не Google Fonts ссылкой. Правило «ни одного обращения к CDN» старше этой палитры
и записано в шапке файла: страница обязана открыться на машине, у которой наружу ничего не пущено.
Шрифт через CDN ломает ровно это, причём молча — на машине с интернетом всё выглядит правильно.
ЧТО ИМЕННО ЛЕЖИТ. Переменные шрифты по одной оси wght, подрезанные до latin + cyrillic + cyrillic-ext:
geologica-var.woff2 — 40 КБ, golos-text-var.woff2 — 62 КБ, вместе 101 КБ. У Geologica в исходнике
четыре оси (CRSV, SHRP, slnt, wght); три лишние закреплены в умолчании (fontTools varLib.instancer),
иначе тот же набор знаков весил бы втрое. Диапазон веса: Geologica 100–900, Golos Text 400–900 — у
Golos Text нет весов легче обычного, и просить у него 300 бессмысленно, браузер вернёт 400.
font-display: swap — намеренно. Заголовок, показанный системным шрифтом на 200 мс и заменённый
Geologica, читается всё это время; block прятал бы его, а fallback на медленном канале оставил бы
страницу системной навсегда.
=================================================================================================== */
@font-face {
font-family: "Geologica";
src: url("fonts/geologica-var.woff2") format("woff2-variations"),
url("fonts/geologica-var.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Golos Text";
src: url("fonts/golos-text-var.woff2") format("woff2-variations"),
url("fonts/golos-text-var.woff2") format("woff2");
font-weight: 400 900;
font-style: normal;
font-display: swap;
}
/* ===================================================================================================
ЦВЕТ
Палитра Olista, редакция 2026-09-16 (решение PO, DECISIONS 0.9). До неё платформа несла синевато-серые
нейтрали (#f5f6fa, #171a22) и один индиговый акцент #4f46e5 на все приложения. Сменилось ровно два
решения, и оба здесь:
1. Нейтрали ТЁПЛЫЕ. Фон страницы уходит в желтизну, а не в синеву, и зелёный знак марки на нём не
выглядит чужим. Имена токенов прежние — ни одно не заведено и ни одно не убрано.
2. Акцент — СВОЙ У КАЖДОГО ПРИЛОЖЕНИЯ, но по одной формуле. Индиго на всех был ответом на другую
болезнь: три приложения носили три разных акцента, выбранных по вкусу, и переход между ними
выглядел переходом в чужую компанию. Общая формула лечит ту же болезнь, не отнимая у приложения
лица: CRM и конструктор различаются тоном, но одинаковы по светлоте, насыщенности и контрасту,
поэтому «сюда можно нажать» везде читается одинаково.
ФОРМУЛА. Все акцентные и смысловые краски вычислены в OKLCH и записаны сюда шестнадцатеричными
значениями sRGB. В CSS oklch() не пишется намеренно: клетка контраста считает арифметику WCAG по hex,
а не по тому, во что цвет развернёт браузер. Меняя оттенок — меняйте H и пересчитайте, а не двигайте
hex на глаз.
роль светлая тема тёмная тема
--ds-accent-fill oklch(0.52 0.13 H) oklch(0.78 0.12 H)
--ds-accent (текст) oklch(0.40 0.12 H) oklch(0.86 0.09 H)
--ds-accent-contrast #ffffff #121815 (фон тёмной темы)
--ds-accent-soft oklch(0.94 0.04 H) oklch(0.30 0.05 H)
Хрома — потолок, а не обещание: если (L, C, H) не влезает в sRGB, C снижается шагом 0.001 до охвата.
Так, бирюзовая аналитика (H 195) получает в светлой теме 0.088 вместо 0.13 — из-за чего она бледнее
соседей, и это свойство охвата, а не недосмотр.
ОТТЕНКИ ПРИЛОЖЕНИЙ (H): olista 150, sitebuilder 240, crm 350, center-ai 290, analytics 195,
connectors 40, lowcode 110, planville 75. Раздел «АКЦЕНТ ПРИЛОЖЕНИЯ» ниже — там же сказано, как хост
выбирает свой оттенок.
Смысловые цвета пересчитаны той же формулой на H 150 (success), 75 (warning), 25 (danger), 240 (info):
прежние значения подбирались под холодный фон и на тёплом спорили с ним. Отступление от формулы одно,
и оно записано комментарием у самого токена: danger в светлой теме взят с хромой 0.16, потому что на
0.12 он читается коричневым.
Пары «краска + подложка» объявлены рядом и обязаны меняться вместе. Подложка обязана быть парной теме:
светло-зелёная плашка на тёмной консоли не «мягкая», а слепящая — это единственное светлое пятно на экране.
Контраст всех пар проверен арифметикой WCAG 2.1 в DesignPaletteContractTests: 4.5 для текста, 3.0 для
крупного. Меняя значение, прогоните тест — глазом эти 0.2 не видно. Исключение названо там же:
--ds-line — волосяная линия между поверхностями, а не граница смыслового цвета, и 3.0 к ней не
предъявляется (как не предъявлялось и прежней палитрой: #e2e5ee на #f5f6fa давал 1.15).
=================================================================================================== */
:root {
color-scheme: light dark;
/* Поверхности: страница, панель на ней, вложенная в панель подложка, линия между ними. Тёплые. */
--ds-bg: #f6f4ee;
--ds-surface: #ffffff;
--ds-surface-alt: #efede6;
--ds-line: #dfe3dd;
--ds-text: #17201b;
--ds-muted: #5c665f;
/*
Акцент по умолчанию — Olista, H 150.
Здесь он объявлен для страницы, не назвавшей data-app: без атрибута приложение — Olista. Те же
четыре токена для каждого из восьми приложений объявлены ниже, в разделе «АКЦЕНТ ПРИЛОЖЕНИЯ»,
включая сам olista — чтобы набор был один и тот же у всех восьми, а не «семь и умолчание».
Две роли — две переменные, и это решение старше нынешней палитры. --ds-accent читают как текст
(ссылки, надзаголовки, кольцо фокуса), --ds-accent-fill заливают под --ds-accent-contrast.
Светлоты у них разные (0.40 против 0.52) именно потому, что одно читают буквами на фоне страницы,
а другое держит буквы на себе.
*/
--ds-accent: #005725;
--ds-accent-fill: #1d7d3e;
--ds-accent-contrast: #ffffff;
--ds-accent-soft: #d9f3dd;
/* Смысловые цвета и их подложки. Та же формула, H: success 150, warning 75, danger 25, info 240. */
/*
ОТСТУПЛЕНИЕ ОТ ФОРМУЛЫ, НАЗВАННОЕ ВСЛУХ: у danger в СВЕТЛОЙ теме хрома 0.16, а не общая 0.12.
oklch(0.40 0.12 25) — это #7c2524, и на тёплом фоне #f6f4ee он читается коричневым, а не
красным: опасность в интерфейсе узнают по насыщенности, и приглушённый до уровня соседей
красный перестаёт быть сигналом. Соседям по H столько хромы не нужно — их и так узнают по
оттенку, — а danger единственный, чья работа в том, чтобы выделяться.
Контраст от этого не пострадал, а вырос: 9.08 на --ds-bg против 8.89 (норма 4.5), 9.98 на
--ds-surface, 8.29 на своей подложке. Считано DesignPaletteContractTests.
ПОДЛОЖКА ОСТАЛАСЬ ПРЕЖНЕЙ, И ЭТО ОХВАТ, А НЕ НЕДОСМОТР. На L 0.94 в sRGB помещается хрома
0.03 — ни 0.04 формулы, ни тем более 0.16 туда не влезают, и правило «C — потолок, а не
обещание» снижает её до 0.03 в обоих случаях, давая один и тот же #ffe4e1. Насыщеннее
розовая подложка станет только став темнее, а темнее она перестанет быть мягкой.
Тёмная тема не тронута: на тёмном фоне #ffbfb8 коричневым не читается.
*/
--ds-danger: #8a0314;
--ds-danger-soft: #ffe4e1;
--ds-success: #005725;
--ds-success-soft: #d9f3dd;
--ds-warning: #624001;
--ds-warning-soft: #fbe8ce;
--ds-info: #014d73;
--ds-info-soft: #d9efff;
/*
Цвет марки.
Знак «Кольца роста» и надзаголовок первого экрана носят зелёный Olista — тот же H 150, что и
акцент по умолчанию. Прежде здесь стояла бирюза сайта организации, намеренно НЕ равная акценту:
бренд и интерактив были разными вещами, потому что бренд принадлежал одному приложению, а индиго —
всем. Теперь марка платформы и акцент её главной — одно решение, и держать их двумя
несовпадающими зелёными значит рисовать на одной странице два зелёных.
Приложению со своим H марка остаётся зелёной: --ds-brand НЕ переопределяется в разделе «АКЦЕНТ
ПРИЛОЖЕНИЯ». Знак Olista в шапке CRM — знак Olista, а не розовое пятно.
*/
--ds-brand: #005725;
--ds-brand-soft: #d9f3dd;
/* =============================================================================================== */
/*
ТРИ ступени радиуса, и не больше.
В ходу было шесть — 0, 8, 10, 12, 14, 16, — и выбор между 10 и 12 каждый раз делался заново. Ступень
назначена по размеру вещи: мелкому нужен мелкий радиус, иначе он выглядит таблеткой.
*/
--ds-radius-sm: 8px; /* поля ввода, чипы, пункты меню */
--ds-radius-md: 12px; /* кнопки, мелкие карточки, всплывающие панели */
--ds-radius-lg: 16px; /* крупные карточки и полосы */
--ds-radius-pill: 999px;
/*
ТРИ ступени тени.
Тени были у всех — и в этом была беда, а не в их отсутствии: на 981daed по листам платформы жило
четырнадцать разных значений (0 22px 50px 8%, 0 22px 50px 12%, 0 16px 34px 22%, 0 12px 32px .18,
0 8px 24px .06, 0 6px 20px 18%, 0 10px 28px .18, 0 18px 48px .18…), и каждое место называло высоту
заново. Токен был ровно один, у сервера идентификации. При этом ровно то, чему высота нужнее всего —
карточки обеих публичных страниц, — не имело её вовсе и отделялось от фона одной рамкой в пиксель.
Ступень выбирается по тому, ЧТО она отделяет, а не по тому, «насколько сильно». Имена короткие и
потому обманчивые — читать надо это описание, а не их:
sm — хайрлайн: подпирает сплошную линию, но не заменяет её. 6% на одном пикселе — это одна ступень
яркости под краем, и как единственное отделение карточки от фона он невидим (замер на 375 в
светлой теме: под краем 231 при фоне 232, дальше 232 ровно). Его место — там, где граница уже
есть: у прокрученной шапки вместе с border-bottom-color.
md — предмет на плоскости: карточка, панель, выпадающий список. Ступень по умолчанию для всего, что
«лежит на странице», — вопреки тому, как звучит имя sm.
lg — накладной слой: модальное окно, витрина первого экрана, меню бургера.
*/
--ds-shadow-sm: 0 1px 2px rgb(16 18 31 / 6%);
--ds-shadow-md: 0 1px 2px rgb(16 18 31 / 6%), 0 8px 24px rgb(16 18 31 / 8%);
--ds-shadow-lg: 0 2px 6px rgb(16 18 31 / 8%), 0 22px 50px rgb(16 18 31 / 12%);
/* Подсветка наведения, окрашенная акцентом: едет за сменой акцента сама. */
--ds-shadow-accent: 0 8px 24px color-mix(in srgb, var(--ds-accent-fill) 22%, transparent);
/* =============================================================================================== */
/*
ТИПОГРАФИКА
Кегль был 15 в конструкторе, 15 на сайте организации и 16 на сервере идентификации — то есть текст
менял размер ровно в тот момент, когда человек уходил вводить пароль. Взят конструкторский 15/1.5:
экранов на нём больше всего, и переучивать пришлось бы их.
Гарнитур две, и роли у них разные. Golos Text — текст: интерфейс, абзацы, подписи, кнопки. Geologica
— заголовки: у неё узкая, плотная форма, на кегле 30 она держит строку, а на кегле 15 в абзаце
утомляет. Системный стек остаётся запасником обоих: до того, как приедет woff2, страница уже
нарисована, и её рисует он.
*/
--ds-font-display: "Geologica", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--ds-font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--ds-font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
--ds-size: 15px;
--ds-leading: 1.5;
--ds-size-lg: 17px;
--ds-size-sm: 14px;
--ds-size-xs: 12.5px;
/* Седьмая ступень — ПЛОТНАЯ ПАНЕЛЬ ИНСТРУМЕНТА (Center#842, замер редактора Конструктора: 55 из 142
кеглей мельче xs, от 9 до 12px). Только для подписей в панелях инструмента — палитра, слои,
инспектор, линейки, — где глаз держит панель, а не читает текст. Бегущему тексту, полям и
кнопкам она запрещена: там нижняя граница по-прежнему xs. 11, а не 9 и не 10: ниже 11px Golos
Text теряет счётчики и «е/с» сливаются на не-Retina; всё, что в редакторе было 9–10, поднимается
к 11 — это и есть цена ступени, названная заказчику. */
--ds-size-2xs: 11px;
/* Заголовок страницы и отрицательный трекинг к нему: на крупном кегле системный шрифт без него рыхлый. */
--ds-h1: 30px;
--ds-h2: 20px;
--ds-tracking-tight: -0.02em;
--ds-leading-tight: 1.2;
/* =============================================================================================== */
/* ОТСТУПЫ: шаг 4, шесть ступеней. Всё, что между ними, — это либо ошибка, либо новая ступень. */
--ds-space-1: 4px;
--ds-space-2: 8px;
--ds-space-3: 12px;
--ds-space-4: 16px;
--ds-space-5: 22px;
--ds-space-6: 32px;
/*
ВЫСОТЫ УПРАВЛЯЮЩИХ ЭЛЕМЕНТОВ
46 у крупной кнопки и 40 у обычной — шкала конструктора. Нижняя граница цели нажатия по WCAG 2.2 —
24 пикселя, и не из вежливости: попадание пальцем и попадание мышью при треморе считаются одинаково.
Поэтому 32 — минимум для строчной ссылки в шапке, а не «сколько получится по строке текста».
32 — это про мышь. У пальца своя цифра, и она приезжает ниже, в @media (pointer: coarse).
*/
--ds-control: 40px;
--ds-control-lg: 46px;
--ds-tap: 32px;
/*
КОЛЬЦО ФОКУСА — одним значением, чтобы его можно было не только нарисовать, но и вернуть.
Кольцо уже стоит глобальным правилом :focus-visible ниже, и на публичных страницах этого хватает.
Не хватает там, где поверх наших стилей лежит чужая библиотека: BootstrapBlazor снимает обводку у
своих кнопок (.btn:focus-visible { outline: 0 }), а его бандл подключён ПОСЛЕ design.css — то есть
спор одинаковых специфичностей он выигрывает всегда. Отсюда токен и утилита .ds-focusable: место,
где кольцо возвращают руками, не переписывая цвет заново.
*/
--ds-focus-ring: 2px solid var(--ds-accent);
/* Шапка одной высоты на всех четырёх поверхностях. До этого было 60 у конструктора и 108 у входа. */
--ds-header: 56px;
/* Ширина колонки страницы: по ней выровнено содержимое шапки, подвала и разделов. */
--ds-page: 1140px;
/* =============================================================================================== */
/*
ДЛИТЕЛЬНОСТИ — СТАРШЕЕ ПОКОЛЕНИЕ
Два значения: «отклик» — для того, что меняется под курсором прямо сейчас, и «движение» — для того,
что едет или проявляется. На них стоят переходы шапки и кнопки и тест, который их сторожит, поэтому
они остаются как есть. Новые правила берут ступени ниже: там сказано не «быстро/медленно», а по
какому признаку выбирать, — и этот признак проверяем, а «быстро» не проверяемо ничем.
*/
--ds-fast: 120ms;
--ds-slow: 180ms;
--ds-ease: ease-in-out;
/*
ДВИЖЕНИЕ: ПРАВИЛО ВЫБОРА
Длительность выбирается не по вкусу и не по важности, а по тому, СКОЛЬКО ПИКСЕЛЕЙ ПРОХОДИТ ВЕЩЬ.
Правило целиком:
Посмотри, что меняется. Только краска — 90. Вещь сдвинулась на несколько пикселей и осталась
на месте — 150. Появился слой поверх страницы — 240 на приход, 160 на уход. Слой пришёл с края
экрана — 320 на приход, 210 на уход. Приход и отклик на палец — ease-out, уход — ease-in,
туда-и-обратно по одной дороге — ease-in-out. Промежуточных значений не бывает: если кажется,
что нужно 200, — ты неверно определил, ЧТО движется. Определи заново.
Почему уход всегда примерно 0.66 прихода: уходящее уже прочитано, и медленный уход — это ожидание.
Почему имена длинные и с описанием: у нас уже был --ds-shadow-sm, чьё имя обещало «тень поменьше», а
замер показал, что тени нет вовсе. Читать надо описание, а не имя.
Что анимировать МОЖНО: transform (и translate/scale/rotate), opacity, filter, цвета, тень.
Что анимировать НЕЛЬЗЯ: height, width, top/left, margin, padding — они пересчитывают макет каждый
кадр, и на телефоне это видно рывками. Ни пружин, ни overshoot, ни бесконечного вращения (кроме
честного индикатора работы), ни движения за курсором, ни бегущей строки, ни печатающегося текста.
*/
--ds-t-tint: 90ms; /* меняется только краска: цвет, фон, рамка, тень, яркость. Путь = 0 */
--ds-t-move: 150ms; /* вещь сдвинулась и осталась на месте: просадка 1px, подъём 2-3px, шеврон. До 8px */
--ds-t-enter: 240ms; /* пришёл небольшой слой поверх: меню, поповер, тост, подсказка. 8-24px + прозрачность */
--ds-t-enter-out: 160ms; /* его уход */
--ds-t-layer: 320ms; /* слой перекрыл страницу или пришёл с края: диалог, лист снизу, ящик. От 24px */
--ds-t-layer-out: 210ms; /* его уход */
--ds-t-spin: 800ms; /* полный оборот честного индикатора незавершённой работы */
/* Лестница соседей: пятая карточка ряда появляется без задержки, иначе низ полосы ждёт полсекунды. */
--ds-t-step: 60ms;
--ds-ease-out: cubic-bezier(.2, 0, 0, 1); /* всё, что ПРИХОДИТ, и всё, что отвечает пальцу */
--ds-ease-in: cubic-bezier(.4, 0, 1, 1); /* всё, что УХОДИТ */
}
@keyframes ds-spin { to { transform: rotate(360deg); } }
/*
Палец — не курсор, и это единственное место, где об этом сказано числом.
32 пикселя хватает мыши и не хватает подушечке: ряд кнопок консоли ростом в 21 пиксель на телефоне
промахивается через раз, и промахивается он по соседней кнопке, а не мимо. Поднимается ровно на
сенсорных устройствах: на десктопе 44 в строке подписей раздули бы шапку и списки без всякой пользы.
pointer: coarse — про основное указывающее устройство, а не про «есть ли тач вообще»: у ноутбука с
сенсорным экраном основное устройство мышь, и ему остаётся 32.
*/
@media (pointer: coarse) {
:root { --ds-tap: 44px; }
}
/*
Тёмная тема объявлена здесь один раз на три приложения. До этого каждое несло свой набор тёмных
значений, и правка светлого цвета в одном месте оставляла тёмный от прежнего.
*/
@media (prefers-color-scheme: dark) {
:root {
/*
Тёмная тема меняет не только светлоту, но и роль контрастного цвета. Белые буквы на
осветлённом акценте дают 3.6 при норме 4.5 — поэтому под заливкой тёмной темы лежит фон
страницы (#121815), а не белый: тёмное на светлом, а не светлое на светлом.
*/
--ds-bg: #121815;
--ds-surface: #1b2320;
--ds-surface-alt: #222b27;
--ds-line: #2a3430;
--ds-text: #eef1ec;
--ds-muted: #9aa59d;
--ds-accent: #a7e2b2;
--ds-accent-fill: #7ccd8e;
--ds-accent-contrast: #121815;
--ds-accent-soft: #1a3520;
--ds-danger: #ffbfb8;
--ds-danger-soft: #442321;
--ds-success: #a7e2b2;
--ds-success-soft: #1a3520;
--ds-warning: #f4c98e;
--ds-warning-soft: #3c2a0e;
--ds-info: #a3d8ff;
--ds-info-soft: #133144;
--ds-brand: #a7e2b2;
--ds-brand-soft: #1a3520;
/* На тёмном фоне тень чёрным почти не видна — она обязана быть плотнее, а не той же. */
--ds-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
--ds-shadow-md: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 45%);
--ds-shadow-lg: 0 2px 6px rgb(0 0 0 / 45%), 0 22px 50px rgb(0 0 0 / 55%);
}
}
/*
Явный выбор человека всегда сильнее системного, и в обе стороны. Переключатель темы на сервере
идентификации ставит data-theme на корень; без светлой ветки он менял бы фон и оставлял ссылки от
прежней темы.
*/
:root[data-theme="light"] {
--ds-bg: #f6f4ee;
--ds-surface: #ffffff;
--ds-surface-alt: #efede6;
--ds-line: #dfe3dd;
--ds-text: #17201b;
--ds-muted: #5c665f;
--ds-accent: #005725;
--ds-accent-fill: #1d7d3e;
--ds-accent-contrast: #ffffff;
--ds-accent-soft: #d9f3dd;
--ds-danger: #8a0314;
--ds-danger-soft: #ffe4e1;
--ds-success: #005725;
--ds-success-soft: #d9f3dd;
--ds-warning: #624001;
--ds-warning-soft: #fbe8ce;
--ds-info: #014d73;
--ds-info-soft: #d9efff;
--ds-brand: #005725;
--ds-brand-soft: #d9f3dd;
--ds-shadow-sm: 0 1px 2px rgb(16 18 31 / 6%);
--ds-shadow-md: 0 1px 2px rgb(16 18 31 / 6%), 0 8px 24px rgb(16 18 31 / 8%);
--ds-shadow-lg: 0 2px 6px rgb(16 18 31 / 8%), 0 22px 50px rgb(16 18 31 / 12%);
}
:root[data-theme="dark"] {
--ds-bg: #121815;
--ds-surface: #1b2320;
--ds-surface-alt: #222b27;
--ds-line: #2a3430;
--ds-text: #eef1ec;
--ds-muted: #9aa59d;
--ds-accent: #a7e2b2;
--ds-accent-fill: #7ccd8e;
--ds-accent-contrast: #121815;
--ds-accent-soft: #1a3520;
--ds-danger: #ffbfb8;
--ds-danger-soft: #442321;
--ds-success: #a7e2b2;
--ds-success-soft: #1a3520;
--ds-warning: #f4c98e;
--ds-warning-soft: #3c2a0e;
--ds-info: #a3d8ff;
--ds-info-soft: #133144;
--ds-brand: #a7e2b2;
--ds-brand-soft: #1a3520;
--ds-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
--ds-shadow-md: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 45%);
--ds-shadow-lg: 0 2px 6px rgb(0 0 0 / 45%), 0 22px 50px rgb(0 0 0 / 55%);
}
/* ===================================================================================================
АКЦЕНТ ПРИЛОЖЕНИЯ
Хост ставит на атрибут data-app="<ключ>"; страница без атрибута — Olista. Ключи те же, что у
слотов реестра Center.Design/Platform/PlatformApps.cs, и берутся оттуда константами PlatformAppKeys
(имя атрибута — PlatformAppKeys.RootAttribute): второго списка ключей у платформы нет и не будет.
Три слота — analytics, connectors, lowcode — в реестре приложений пока не заведены: приложений ещё
нет. Оттенки им объявлены заранее и намеренно. Цвет приложения выбирается один раз на всю его жизнь, и
выбирать его в тот день, когда заводится хост, значит выбирать из того, что осталось; восемь оттенков,
разложенных по кругу разом, различимы попарно, а восьмой, добавленный через год, сядет между двумя.
ПОЧЕМУ СЕЛЕКТОРЫ ТАКИЕ. У :root[data-theme="dark"] специфичность (0,2,0) — ровно как у
:root[data-app="crm"]. Объяви приложение одной парой правил — и в тёмной теме акцент приложения
выигрывал бы или проигрывал по тому, какая строка в файле ниже. Поэтому тема и приложение всегда
названы вместе: (0,3,0) сильнее (0,2,0) при любом порядке строк.
Системная тёмная взята через :root:not([data-theme="light"])[data-app="…"], а не голым
[data-app="…"]: человек, выбравший светлую тему на системно-тёмной машине, иначе получил бы светлый
фон и осветлённый под тёмный фон акцент — то есть бледную ссылку на белом.
--ds-brand здесь не переопределяется: марка платформы одна на все приложения (см. раздел ЦВЕТ).
ПОЧЕМУ У КАЖДОГО ПРАВИЛА ЕСТЬ ВТОРОЙ НОСИТЕЛЬ — .ds-switch-tile[data-app="…"]. В панели переключателя
приложений (решение PO 2026-09-16) каждая плитка носит знак в цвете СВОЕГО приложения, а страница при
этом остаётся в цвете своего: восемь оттенков на одной странице — это восемь плиток, а не восемь тем.
Прямого способа прочитать чужой --ds-accent-fill в CSS нет, и первая редакция этой правки завела
второй список оттенков (--ds-mark-crm и далее) рядом с первым. Второй список — это второе место, где
правится цвет CRM, и расходятся такие списки молча: панель светилась бы прежним розовым ещё год.
ТРЕТИЙ НОСИТЕЛЬ — .ds-app[data-app="…"] (0.31.27, Center.Analytics#24): любой элемент вне переключателя,
которому нужны цвета ДРУГОГО приложения — плитка продукта на титульной хаба, карточка соседа «Работает
вместе с», герой страницы продукта. Плитка переключателя носит своё имя по-прежнему; для всего нового
— этот класс, а не .ds-switch-tile поверх чужой раскладки.
Поэтому оттенок объявляется ОДИН раз, а селекторов у объявления два: корень страницы и плитка. Своё
объявление на элементе побеждает унаследованное от корня всегда, независимо от специфичности, — то
есть внутри плитки --ds-accent, --ds-accent-fill и --ds-accent-soft значат «цвета ЭТОГО приложения», и
разметка плитки написана обычными токенами, ничего не зная про ключи.
Тема у плитки взята тем же приёмом, что у корня, и по той же причине: :root[data-theme="dark"] …
.ds-switch-tile и :root:not([data-theme="light"]) … .ds-switch-tile взаимно исключают друг друга по
:not, поэтому порядок строк на исход не влияет.
=================================================================================================== */
/* Главная Olista — оттенок марки — H 150 */
:root[data-app="olista"],
:root[data-theme="light"][data-app="olista"],
.ds-app[data-app="olista"],
.ds-switch-tile[data-app="olista"] {
--ds-accent: #005725;
--ds-accent-fill: #1d7d3e;
--ds-accent-contrast: #ffffff;
--ds-accent-soft: #d9f3dd;
}
/* Конструктор — H 240 */
:root[data-app="sitebuilder"],
:root[data-theme="light"][data-app="sitebuilder"],
.ds-app[data-app="sitebuilder"],
.ds-switch-tile[data-app="sitebuilder"] {
--ds-accent: #014d73;
--ds-accent-fill: #0070a6;
--ds-accent-contrast: #ffffff;
--ds-accent-soft: #d9efff;
}
/* CRM — H 350 */
:root[data-app="crm"],
:root[data-theme="light"][data-app="crm"],
.ds-app[data-app="crm"],
.ds-switch-tile[data-app="crm"] {
--ds-accent: #742651;
--ds-accent-fill: #9e4573;
--ds-accent-contrast: #ffffff;
--ds-accent-soft: #ffe2ee;
}
/* Olista AI — H 290 */
:root[data-app="center-ai"],
:root[data-theme="light"][data-app="center-ai"],
.ds-app[data-app="center-ai"],
.ds-switch-tile[data-app="center-ai"] {
--ds-accent: #493883;
--ds-accent-fill: #6959ae;
--ds-accent-contrast: #ffffff;
--ds-accent-soft: #eae8ff;
}
/* Аналитика (слота в реестре ещё нет) — H 195 */
:root[data-app="analytics"],
:root[data-theme="light"][data-app="analytics"],
.ds-app[data-app="analytics"],
.ds-switch-tile[data-app="analytics"] {
--ds-accent: #015353;
--ds-accent-fill: #047879;
--ds-accent-contrast: #ffffff;
--ds-accent-soft: #cdf4f3;
}
/* Коннекторы (слота в реестре ещё нет) — H 40 */
:root[data-app="connectors"],
:root[data-theme="light"][data-app="connectors"],
.ds-app[data-app="connectors"],
.ds-switch-tile[data-app="connectors"] {
--ds-accent: #7a2a06;
--ds-accent-fill: #a54a28;
--ds-accent-contrast: #ffffff;
--ds-accent-soft: #ffe5dc;
}
/* Лаборатория low-code (слота в реестре ещё нет) — H 110 */
:root[data-app="lowcode"],
:root[data-theme="light"][data-app="lowcode"],
.ds-app[data-app="lowcode"],
.ds-switch-tile[data-app="lowcode"] {
--ds-accent: #4b4b01;
--ds-accent-fill: #6d6e02;
--ds-accent-contrast: #ffffff;
--ds-accent-soft: #eceed0;
}
/* Планвиль — H 75 */
:root[data-app="planville"],
:root[data-theme="light"][data-app="planville"],
.ds-app[data-app="planville"],
.ds-switch-tile[data-app="planville"] {
--ds-accent: #624001;
--ds-accent-fill: #8d5e02;
--ds-accent-contrast: #ffffff;
--ds-accent-soft: #fbe8ce;
}
@media (prefers-color-scheme: dark) {
/* Главная Olista — оттенок марки — H 150 */
:root:not([data-theme="light"])[data-app="olista"],
:root:not([data-theme="light"]) .ds-app[data-app="olista"],
:root:not([data-theme="light"]) .ds-switch-tile[data-app="olista"] {
--ds-accent: #a7e2b2;
--ds-accent-fill: #7ccd8e;
--ds-accent-contrast: #121815;
--ds-accent-soft: #1a3520;
}
/* Конструктор — H 240 */
:root:not([data-theme="light"])[data-app="sitebuilder"],
:root:not([data-theme="light"]) .ds-app[data-app="sitebuilder"],
:root:not([data-theme="light"]) .ds-switch-tile[data-app="sitebuilder"] {
--ds-accent: #a3d8ff;
--ds-accent-fill: #69c1fc;
--ds-accent-contrast: #121815;
--ds-accent-soft: #133144;
}
/* CRM — H 350 */
:root:not([data-theme="light"])[data-app="crm"],
:root:not([data-theme="light"]) .ds-app[data-app="crm"],
:root:not([data-theme="light"]) .ds-switch-tile[data-app="crm"] {
--ds-accent: #ffb9d9;
--ds-accent-fill: #f197c2;
--ds-accent-contrast: #121815;
--ds-accent-soft: #412331;
}
/* Olista AI — H 290 */
:root:not([data-theme="light"])[data-app="center-ai"],
:root:not([data-theme="light"]) .ds-app[data-app="center-ai"],
:root:not([data-theme="light"]) .ds-switch-tile[data-app="center-ai"] {
--ds-accent: #d0c9ff;
--ds-accent-fill: #b6aaff;
--ds-accent-contrast: #121815;
--ds-accent-soft: #2d2945;
}
/* Аналитика (слота в реестре ещё нет) — H 195 */
:root:not([data-theme="light"])[data-app="analytics"],
:root:not([data-theme="light"]) .ds-app[data-app="analytics"],
:root:not([data-theme="light"]) .ds-switch-tile[data-app="analytics"] {
--ds-accent: #85e4e3;
--ds-accent-fill: #3bcfcf;
--ds-accent-contrast: #121815;
--ds-accent-soft: #023536;
}
/* Коннекторы (слота в реестре ещё нет) — H 40 */
:root:not([data-theme="light"])[data-app="connectors"],
:root:not([data-theme="light"]) .ds-app[data-app="connectors"],
:root:not([data-theme="light"]) .ds-switch-tile[data-app="connectors"] {
--ds-accent: #ffc0ab;
--ds-accent-fill: #f99c7c;
--ds-accent-contrast: #121815;
--ds-accent-soft: #43251a;
}
/* Лаборатория low-code (слота в реестре ещё нет) — H 110 */
:root:not([data-theme="light"])[data-app="lowcode"],
:root:not([data-theme="light"]) .ds-app[data-app="lowcode"],
:root:not([data-theme="light"]) .ds-switch-tile[data-app="lowcode"] {
--ds-accent: #d4d791;
--ds-accent-fill: #bcbe5e;
--ds-accent-contrast: #121815;
--ds-accent-soft: #2f300f;
}
/* Планвиль — H 75 */
:root:not([data-theme="light"])[data-app="planville"],
:root:not([data-theme="light"]) .ds-app[data-app="planville"],
:root:not([data-theme="light"]) .ds-switch-tile[data-app="planville"] {
--ds-accent: #f4c98e;
--ds-accent-fill: #e4ac59;
--ds-accent-contrast: #121815;
--ds-accent-soft: #3c2a0e;
}
}
/* Главная Olista — оттенок марки — H 150 */
:root[data-theme="dark"][data-app="olista"],
:root[data-theme="dark"] .ds-app[data-app="olista"],
:root[data-theme="dark"] .ds-switch-tile[data-app="olista"] {
--ds-accent: #a7e2b2;
--ds-accent-fill: #7ccd8e;
--ds-accent-contrast: #121815;
--ds-accent-soft: #1a3520;
}
/* Конструктор — H 240 */
:root[data-theme="dark"][data-app="sitebuilder"],
:root[data-theme="dark"] .ds-app[data-app="sitebuilder"],
:root[data-theme="dark"] .ds-switch-tile[data-app="sitebuilder"] {
--ds-accent: #a3d8ff;
--ds-accent-fill: #69c1fc;
--ds-accent-contrast: #121815;
--ds-accent-soft: #133144;
}
/* CRM — H 350 */
:root[data-theme="dark"][data-app="crm"],
:root[data-theme="dark"] .ds-app[data-app="crm"],
:root[data-theme="dark"] .ds-switch-tile[data-app="crm"] {
--ds-accent: #ffb9d9;
--ds-accent-fill: #f197c2;
--ds-accent-contrast: #121815;
--ds-accent-soft: #412331;
}
/* Olista AI — H 290 */
:root[data-theme="dark"][data-app="center-ai"],
:root[data-theme="dark"] .ds-app[data-app="center-ai"],
:root[data-theme="dark"] .ds-switch-tile[data-app="center-ai"] {
--ds-accent: #d0c9ff;
--ds-accent-fill: #b6aaff;
--ds-accent-contrast: #121815;
--ds-accent-soft: #2d2945;
}
/* Аналитика (слота в реестре ещё нет) — H 195 */
:root[data-theme="dark"][data-app="analytics"],
:root[data-theme="dark"] .ds-app[data-app="analytics"],
:root[data-theme="dark"] .ds-switch-tile[data-app="analytics"] {
--ds-accent: #85e4e3;
--ds-accent-fill: #3bcfcf;
--ds-accent-contrast: #121815;
--ds-accent-soft: #023536;
}
/* Коннекторы (слота в реестре ещё нет) — H 40 */
:root[data-theme="dark"][data-app="connectors"],
:root[data-theme="dark"] .ds-app[data-app="connectors"],
:root[data-theme="dark"] .ds-switch-tile[data-app="connectors"] {
--ds-accent: #ffc0ab;
--ds-accent-fill: #f99c7c;
--ds-accent-contrast: #121815;
--ds-accent-soft: #43251a;
}
/* Лаборатория low-code (слота в реестре ещё нет) — H 110 */
:root[data-theme="dark"][data-app="lowcode"],
:root[data-theme="dark"] .ds-app[data-app="lowcode"],
:root[data-theme="dark"] .ds-switch-tile[data-app="lowcode"] {
--ds-accent: #d4d791;
--ds-accent-fill: #bcbe5e;
--ds-accent-contrast: #121815;
--ds-accent-soft: #2f300f;
}
/* Планвиль — H 75 */
:root[data-theme="dark"][data-app="planville"],
:root[data-theme="dark"] .ds-app[data-app="planville"],
:root[data-theme="dark"] .ds-switch-tile[data-app="planville"] {
--ds-accent: #f4c98e;
--ds-accent-fill: #e4ac59;
--ds-accent-contrast: #121815;
--ds-accent-soft: #3c2a0e;
}
/* ===================================================================================================
ОСНОВА
Три правила, которые в каждом из трёх приложений были написаны по-своему или не написаны вовсе.
=================================================================================================== */
/*
Ширина считается по рамке, а не по содержимому.
Приёмка на телефоне: страница ездила вбок на три десятка пикселей. На узком экране кнопки первого экрана
встают в колонку и растягиваются на всю ширину, получая 343; при content-box — умолчании CSS, которое
никто не отменял, — к ним прибавляются внутренние поля с обеих сторон и рамка, и получается 389 при окне
в 375. На десктопе кнопки лежат в строку и ширины не получают, поэтому там ничего не видно — и поэтому же
дефект дожил до продакшена. Консоль конструктора его не показывала: reboot из бандла BootstrapBlazor
объявляет то же самое, а публичная главная бандла не грузит.
Правило глобальное и стоит до всего остального: чинить такое поштучно значит чинить его заново на каждой
новой кнопке.
*/
*, *::before, *::after { box-sizing: border-box; }
/*
Две строки против двух самых частых способов уехать вбок на телефоне.
Широкая картинка: без ограничения занимает свою настоящую ширину, и снимок с телефона в 3000
пикселей растягивает документ втрое. height: auto здесь обязателен, а не «для порядка»: браузер берёт
ширину и высоту из атрибутов тега, и если ужать одну ширину — картинка сплющится. У svg своей высоты
может не быть вовсе (иконка размером с строку), поэтому ему только максимум ширины.
Длинное слово: адрес, слаг или почта в 60 символов не переносится по пробелам, потому что пробелов в нём
нет, — и раздвигает колонку до своей длины. overflow-wrap наследуется, поэтому объявлен один раз на
документ; break-word ломает слово только тогда, когда оно и так не помещается.
*/
img, video { max-width: 100%; height: auto; }
svg { max-width: 100%; }
/*
КОРЕНЬ СТРАНИЦЫ — здесь, а не у каждого хоста по-своему.
Замер 2026-09-17: восемь хостов семьи открывают свой лист правилом body с одним и тем же набором —
гарнитура, фон, цвет текста, margin: 0 и запрет автоувеличения кегля в мобильном Safari. Значения у
всех уже токенами (перевод на --ds-* сделан раньше), то есть расходиться им негде, кроме как в
ПОЛНОТЕ: забыл хост -webkit-text-size-adjust — на телефоне в альбомной ориентации у него поедет
кегль, и заметит это не он. Набор, написанный восемь раз, отличается от набора, написанного один
раз, ровно этим.
Здесь объявлен МИНИМУМ, который обязан быть на всякой странице платформы; раскладка корня остаётся
хосту. Поэтому нет ни display: flex, ни min-height: 100vh, ни height: 100% — у сервера учётных
записей колонка на всю высоту, у витрины её нет, и общее правило решало бы за них обоих.
Хост, у которого те же пять строк написаны своими, может снять их вместе с переходом на это число
пакета — но снимать не обязан: дубликат с теми же токенами ничего не ломает, он просто лишний.
Своё значение (другой фон у страницы входа, своя гарнитура раздела) хост по-прежнему пишет у себя:
его правило стоит в его листе, то есть ниже, и побеждает.
*/
body {
margin: 0;
background: var(--ds-bg);
color: var(--ds-text);
font-family: var(--ds-font);
overflow-wrap: break-word;
-webkit-text-size-adjust: 100%;
}
/*
Заголовки — гарнитурой заголовков, и это единственное место, где она назначается.
Вес 500, а не 600 и не 700: у Geologica плотная форма, и на полужирном крупный заголовок начинает
выглядеть плакатом. Трекинг отрицательный по той же причине, по какой он был отрицательным у
системного шрифта, — на кегле 30 межбуквенное расстояние, рассчитанное на текст, рыхлит строку;
токен --ds-tracking-tight для этого и заведён.
h4–h6 сюда не попадают намеренно: это подзаголовки внутри текста, они живут в абзаце и обязаны быть
с ним одной гарнитуры. Домен, которому нужен display-шрифт в своём месте, берёт var(--ds-font-display)
— второй раз назначать его элементам здесь не нужно.
font-family, а не font: сокращение сбросило бы размер и высоту строки, которые домен уже назначил.
*/
h1, h2, h3, .ds-h1, .ds-h2 {
font-family: var(--ds-font-display);
font-weight: 500;
letter-spacing: var(--ds-tracking-tight);
}
/* Значение, а не текст: слаг, адрес, идентификатор. anywhere ломает в любом месте и, в отличие от
break-word, учитывается при расчёте минимальной ширины колонки — то есть таблица с адресами перестаёт
требовать себе экран в полтора раза шире окна. */
code, kbd, samp, .ds-wrap-anywhere { overflow-wrap: anywhere; }
/*
ССЫЛКА БЕЗ КЛАССА — тоже ссылка платформы.
Находка #784: «Забыли пароль?» на входе рисовалась синим цветом браузера. Не потому, что кто-то
ошибся, — потому что этого правила здесь не было: голый в design.css не описан вовсе, и всё,
что не получило класса, доставалось умолчанию user-agent. Синий #0000EE не входит ни в одну из
двух наших тем, в тёмной он вдобавок почти не читается на фоне, а посещённая ссылка становилась
фиолетовой — цвет, которого в палитре нет и который ничего в системе не значит.
ПОЧЕМУ ЭТО БЕЗОПАСНО ДЛЯ ХОСТОВ, а не «правило на всю страницу соседа». Селектор — один элемент
(0,0,1), слабее любого класса: всё, что уже носит имя дизайн-системы (.ds-btn, .ds-nav a,
.ds-switch-tile, .ds-skip) или собственный класс хоста, продолжает краситься своим правилом и
ничего не замечает. Токен --ds-accent объявлен у КАЖДОГО из восьми приложений — это ось палитры,
оттенок приложения, и хост без него не собирается вовсе, — поэтому var() здесь не может дать
пустое значение и остаться без запасного.
Подчёркивание НЕ снимается: у ссылки внутри абзаца цвет — единственный признак, а по цвету её не
находит дальтонизм. text-decoration-thickness/underline-offset сдвигают линию от букв, чтобы она
не резала выносные элементы кириллицы.
Кольцо фокуса ссылке рисует общее правило :focus-visible ниже — второй раз оно тут не пишется.
Наведение — тот же цвет плотнее (brightness), а не второй токен: заводить --ds-accent-hover
значило бы завести его восьми приложениям сразу и проверить каждый на контраст.
*/
a {
color: var(--ds-accent);
text-decoration-thickness: 1px;
text-underline-offset: .18em;
}
a:hover { filter: brightness(1.1); }
/*
Кольцо ссылке — тем же токеном, что и всем: общее правило :focus-visible ниже даёт его само, и вид
эта строка не меняет ни на пиксель. Написана она потому, что цвет ссылки объявлен ЗДЕСЬ, а
видимость фокуса — половина того же обещания: правило, назначающее ссылке краску, обязано рядом же
показывать, чем эта ссылка отвечает клавиатуре, иначе снявший одно не заметит, что снял и другое.
(0,1,1) вместо (0,1,0) обыгрывает вдобавок `a:focus { outline: none }` хоста, подключённый РАНЬШЕ
этого файла. Предел назван: чужое правило той же формы, подключённое позже, побеждает по порядку —
для этого спора заведён .ds-focusable с !important.
*/
a:focus-visible { outline: var(--ds-focus-ring); outline-offset: 2px; }
/*
Кольцо фокуса — одно на платформу, и оно было нарисовано у двух приложений из трёх.
:focus-visible, а не :focus: иначе кольцо появляется от щелчка мышью, его начинают убирать — и вместе с
мышью оно пропадает у клавиатуры.
*/
:focus-visible {
outline: var(--ds-focus-ring);
outline-offset: 2px;
border-radius: var(--ds-radius-sm);
}
/*
Утилита для тех мест, где глобальное правило проиграло спор.
!important здесь не от лени. Спор ровно один и он предрешён: бандл BootstrapBlazor подключается после
design.css и снимает обводку у своих кнопок правилом той же специфичности — при равенстве побеждает
тот, кто ниже. Кольцо фокуса — единственное, по чему клавиатура понимает, где находится; библиотека,
убравшая его ради вида, не должна выигрывать этот спор ни при каком порядке подключения.
*/
.ds-focusable:focus-visible {
outline: var(--ds-focus-ring) !important;
outline-offset: 2px !important;
}
/*
Единственное место, где кольцо снимается без замены, — и снимается намеренно.
tabindex="-1" не достижим табуляцией: попасть на такой элемент можно только скриптом, и здесь это делает
ровно один скрипт — FocusOnNavigate маршрутизатора Blazor, который после каждого перехода ставит фокус на