/* ============================================================================ Агентхаб — админ-консоль · ТОКЕНЫ (зеркало portal/ds/tokens.css) Источник истины — portal/ds/tokens.css (DS «Linear-тема НУБЕС», спека portal/ds/README.md). Этот файл — точная копия для origin админ-SPA (admin.agenthab.ngcloud.ru раздаёт каталог admin/ без портала); при изменении токенов синхронизировать вручную. Компоненты — ds/components.css. ========================================================================== */ /* ============================================================================ Агентхаб — дизайн-система портала v1 · ТОКЕНЫ Единственный источник дизайн-решений (спека: portal/ds/README.md, витрина: portal/styleguide.html). ФИНАЛ 01.11 (владелец одобрил макеты t_1d909393): направление — Linear-style dark в палитре НУБЕС. ТЁМНАЯ тема — primary (по умолчанию), светлая — вторичная. Значения тёмной темы = точная палитра макетов (kb-linear.html, chat-linear.html, эталон внедрения); шрифт — Inter (как в макетах); логотип — официальный ассет (правила: секция «Linear-тема НУБЕС» в portal/ds/README.md). Компоненты (components.css) теме-агностичны и не меняются. ПРАВИЛА: 1. Палитра НУБЕС фиксирована: #001C34 / #145091 / #00356D / #5A6B7D / #EEF3F8. Тёмные производные (слои глубины, приглушённые статусы) живут ТОЛЬКО здесь и являются смесями палитры; новых hex в коде экранов быть не должно. 2. Тема включается атрибутом data-theme="light|dark" на ; отсутствие атрибута = dark (primary). 3. Компоненты используют ТОЛЬКО семантические токены (--ds-surface, --ds-text, --ds-line, --ds-accent, …) и никогда — сырые цвета палитры напрямую. 4. Светлая тема = текущие цвета портала (portal/app.css), значения идентичны. ========================================================================== */ /* ── ТЁМНАЯ (primary, по умолчанию) — Linear-style, глубина от #001C34 ──── */ :root, [data-theme="dark"]{ color-scheme:dark; /* Палитра НУБЕС — фиксирована, не менять */ --ds-navy:#001C34; --ds-deep:#00356D; --ds-blue:#145091; --ds-slate:#5A6B7D; --ds-tint:#EEF3F8; /* Слои глубины: страница темнее navy, карточки = navy, поднятые слои — смеси */ --ds-bg:#000D1A; /* фон страницы (= --bg макетов) */ --ds-side:#000812; /* сайдбар темнее контента (макеты) */ --ds-surface:#02101D; /* карточки, панели (= --panel) */ --ds-surface-2:#072033; /* hover строк, вложенные блоки */ --ds-tint-bg:rgba(255,255,255,.06); /* подложки, выбранные, инлайн-код */ /* Линии: тонкие 1px */ --ds-line:rgba(126,160,192,.10); /* границы, разделители (макеты) */ --ds-line-strong:rgba(126,160,192,.20);/* hover границ, выделение */ /* Приглушённый акцент: действие на тёмном (смесь blue и tint) */ --ds-accent:#4A7DB2; /* кнопки, ссылки, focus */ --ds-accent-hover:#7FA8D4; /* = accent-strong макетов */ --ds-accent-muted:rgba(74,125,178,.16);/* фон выбранного/активного */ /* Текст */ --ds-text:#E8EFF6; /* основной (= --text макетов) */ --ds-text-secondary:#9AACBC; /* подписи, подсказки */ --ds-text-muted:#5A6B7D; /* капы, отключённое (= slate) */ /* Семантика: приглушённые версии для читаемости на тёмном */ --ds-success:#4AA277; --ds-success-bg:rgba(74,162,119,.15); --ds-warn:#D29A4A; --ds-warn-bg:rgba(210,154,74,.13); --ds-danger:#C96A6A; --ds-danger-bg:rgba(201,106,106,.14); --ds-info:#5B8FC7; --ds-info-bg:rgba(91,143,199,.16); /* Инверсный текст (на accent-заливке) */ --ds-text-invert:#FFFFFF; /* Шеврон селекта (data-URI нельзя собирать из var) */ --ds-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239AACBC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* Тени на тёмном почти невидимы — глубину дают слои; оставляем лёгкий подъём */ --ds-shadow-sm:0 1px 2px rgba(0,0,0,.35); --ds-shadow-md:0 3px 14px rgba(0,0,0,.45); --ds-shadow-lg:0 18px 50px rgba(0,0,0,.6); } /* ── СВЕТЛАЯ (secondary) — текущие цвета портала app.css ───────────────── */ [data-theme="light"]{ color-scheme:light; --ds-bg:#F7FAFD; --ds-surface:#FFFFFF; --ds-surface-2:#F7FAFD; --ds-tint-bg:#EEF3F8; --ds-line:#D9E4EF; --ds-line-strong:#C6D6E6; --ds-accent:#145091; /* = --ds-blue */ --ds-accent-hover:#00356D; /* = --ds-deep */ --ds-accent-muted:rgba(20,80,145,.10); --ds-text:#001C34; --ds-text-secondary:#5A6B7D; --ds-text-muted:#5A6B7D; --ds-success:#1E7D4F; --ds-success-bg:#E3F2E9; --ds-warn:#9A6B00; --ds-warn-bg:#FBF3DF; --ds-danger:#B4372F; --ds-danger-bg:#FBEAE8; --ds-info:#145091; --ds-info-bg:#E8EDFB; --ds-text-invert:#FFFFFF; --ds-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6B7D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --ds-shadow-sm:0 1px 2px rgba(0,28,52,.06); --ds-shadow-md:0 3px 14px rgba(0,28,52,.08); --ds-shadow-lg:0 18px 50px rgba(0,28,52,.35); } /* ── Общие токены (не зависят от темы) ──────────────────────────────────── */ :root{ /* Типографика: Inter — шрифт макетов (финал 01.11); моно — JetBrains Mono */ --ds-font:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif; --ds-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace; --ds-fs-h1:19px; /* заголовок страницы (= макеты t_1d909393) */ --ds-fs-h2:17px; /* заголовок модалки/крупного блока */ --ds-fs-h3:14.5px; /* заголовок карточки/панели */ --ds-fs-body:13.5px; /* основной текст, содержимое таблиц */ --ds-fs-small:12px; /* лейблы полей, вторичные строки (= макеты) */ --ds-fs-caption:10.5px;/* подписи-капы, бейджи, журнальные заголовки */ --ds-lh:1.5; /* Сетка отступов: кратна 4/8, других значений нет */ --ds-s1:4px; /* микро: лейбл↔поле */ --ds-s2:8px; /* внутри компонента: иконка↔текст, чипы */ --ds-s3:12px; /* между полями формы */ --ds-s4:16px; /* стандартный шаг, паддинг карточек */ --ds-s5:20px; /* между блоками */ --ds-s6:24px; /* секции страницы */ --ds-s8:32px; /* крупные секции */ /* Плотность (финал 01.11, по макетам): строки 34px, контролы 28px */ --ds-row-h:34px; /* целевая высота строки таблицы */ --ds-ctl-h:28px; /* кнопки/селекты/поля/поиск (макеты)*/ --ds-ctl-fs-md:12.5px; --ds-ctl-pad-y-md:3px; --ds-ctl-pad-x-md:11px; /* контрол формы, ~28px */ --ds-ctl-fs-sm:12.5px; --ds-ctl-pad-y-sm:3px; --ds-ctl-pad-x-sm:10px; /* тулбар/таблица, ~28px */ /* Радиусы */ --ds-r-sm:4px; /* внутренние кнопки сегментов (= макеты) */ --ds-r-md:6px; /* поля, кнопки, контролы (= --r-md макетов) */ --ds-r-lg:8px; /* карточки, панели (= --r-lg макетов) */ --ds-r-pill:999px; /* бейджи, пилюли, чипы */ /* Границы: всегда тонкие 1px (обновление 01.11) */ --ds-border:1px solid var(--ds-line); --ds-border-hover:1px solid var(--ds-line-strong); --ds-border-active:1px solid var(--ds-accent); /* Focus ring: единый для всех контролов */ --ds-focus-color:var(--ds-accent); /* поля ввода: outline:2px solid var(--ds-focus-color); outline-offset:-1px */ /* кнопки/ссылки: outline:2px solid var(--ds-focus-color); outline-offset:2px */ /* Состояния */ --ds-disabled-opacity:.55; --ds-transition:.12s ease; --ds-hover-row:var(--ds-surface-2); /* hover строки таблицы/списка */ /* Иконки: line-иконки 16px (обновление 01.11; было 17) */ --ds-icon-size:16px; --ds-icon-stroke:1.8; /* Каркас и логотип (финал 01.11, по макетам t_1d909393) */ --ds-side-w:228px; /* ширина сайдбара */ --ds-topbar-h:44px; /* высота топбара */ --ds-logo-h:26px; /* высота логотипа в сайдбаре */ /* Лого-ассет: portal/assets/nubes-logo-white.png (тёмный фон) / portal/assets/nubes-logo-blue.png (светлый фон); официальный оригинал 1838×408 (пропорция 4.5:1), ширина при h=26px ≈ 117px. Блок бренда: padding 12px 14px 10px, gap 8–10px. ПРАВИЛО КОНТРАСТА: на тёмном фоне ТОЛЬКО white-версия (blue #145091 на #000812 ≈ 2.6:1 — запрещено). */ /* Совместимость со существующим app.css (значения = светлая тема портала; пока экран не переведён на темы, легаси-стили продолжают работать) */ --navy:#001C34; --deep:#00356D; --blue:#145091; --slate:#5A6B7D; --tint:#EEF3F8; --bg:#F7FAFD; --line:#D9E4EF; --ok:#1E7D4F; --okbg:#E3F2E9; --warn:#9A6B00; --warnbg:#FBF3DF; --alert:#B4372F; --alertbg:#FBEAE8; --radius:10px; }