/* * Claude Design — токены дизайн-системы веб-мониторинга. * Спецификация и правила: docs/design-system.md * * Три уровня: * 1. Глобальные примитивы (--cd-red-500) — палитра и шкалы, без смысла * 2. Семантические роли (--cd-status-done-color) — используются в компонентах * 3. Компонентные (--cd-status-dot-size) — привязаны к конкретному компоненту * * Правило: компоненты ссылаются на уровни 2–3; уровень 1 — только источник * для уровня 2. Tabler-переменные (--tblr-*) — внешние примитивы. */ :root { /* ── 1. Глобальные примитивы ─────────────────────────────────────── */ /* * Все ступени проверены на WCAG AA (4.5:1) скриптом contrast-аудита * на реальных подложках (tint 10% поверх поверхности темы). */ --cd-red-500: #d63939; /* Tabler danger: фоны, каймы, текст на белом (4.66:1) */ --cd-red-700: #c53030; /* текст на тонированной подложке (4.68:1) */ --cd-amber-500: #f0a000; /* только фоны/каймы: на белом не проходит AA как текст */ --cd-amber-700: #955f00; /* текстовый янтарный, AA на белом (5.36:1) */ --cd-green-700: #1c7530; /* затемнённый Tabler green: #2fb344 даёт 3.15:1 */ --cd-violet-500: #7c3aed; --cd-gray-500: #616876; --cd-navy-800: #1f3864; /* бренд-цвет шапки Excel-экспорта (дублируется в main.py) */ /* светлые ступени — для тёмной темы (поверхность #182433) */ --cd-red-300: #ff8787; --cd-amber-300: #ffc94d; --cd-green-500: #2fb344; --cd-violet-300: #b197fc; --cd-gray-300: #909aa9; --cd-blue-300: #74c0fc; --cd-space-1: 4px; --cd-space-2: 8px; --cd-space-3: 12px; --cd-space-4: 16px; --cd-font-size-xs: 0.6875rem; --cd-font-size-stat: clamp(1.5rem, 4vw, 2rem); --cd-font-weight-stat: 700; --cd-letter-spacing-caps: 0.04em; --cd-radius-sm: 2px; --cd-duration-fast: 200ms; --cd-toast-short: 1500ms; --cd-toast-default: 5000ms; /* ── 2. Семантические роли ───────────────────────────────────────── */ --cd-color-accent: var(--tblr-primary); --cd-color-danger: var(--cd-red-500); --cd-color-warning: var(--cd-amber-500); --cd-color-success: var(--cd-green-700); --cd-status-new-color: var(--cd-gray-500); --cd-status-in-progress-color: var(--tblr-primary); --cd-status-done-color: var(--cd-green-700); --cd-status-group-damage-color: var(--cd-red-700); /* текст бейджа: 500 даёт 4.04:1 */ --cd-sla-expired-color: var(--cd-color-danger); --cd-sla-warning-color: var(--cd-amber-500); /* фоны, каймы */ --cd-sla-warning-text-color: var(--cd-amber-700); /* текст на светлом */ --cd-level-platinum-color: var(--cd-violet-500); /* доля цвета в тонированных подложках (бейджи, подсветка строк) */ --cd-tint-alpha: 10%; /* серии графиков сводки — валидированы скриптом dataviz-палитр (light) */ --cd-chart-ok: #206bc4; --cd-chart-bad: #d63939; /* фокус-кольцо — единый паттерн для всех интерактивных элементов */ --cd-focus-ring-width: 2px; --cd-focus-ring-offset: 2px; --cd-focus-ring-color: var(--cd-color-accent); /* ── 3. Компонентные ─────────────────────────────────────────────── */ --cd-status-dot-size: 8px; --cd-stat-card-accent-width: 4px; --cd-comment-cell-max-width: 220px; --cd-level-platinum-tint: 12%; /* платина чуть плотнее общего tint */ --cd-control-min-width: 180px; --cd-dropdown-max-height: 220px; --cd-progress-height: 5px; --cd-upload-status-width: 200px; --cd-type-cell-max-width: 180px; /* ширины колонок таблицы инцидентов */ --cd-table-col-xs: 80px; --cd-table-col-sm: 110px; --cd-table-col-md: 130px; --cd-table-col-lg: 140px; --cd-table-col-xl: 170px; } /* * Тёмная тема (штатный механизм Tabler: ). * Все значения прошли AA-аудит на поверхности #182433 (см. docs/design-system.md §6). */ [data-bs-theme="dark"] { --cd-color-danger: var(--cd-red-300); --cd-color-warning: var(--cd-amber-300); --cd-color-success: var(--cd-green-500); --cd-status-new-color: var(--cd-gray-300); --cd-status-in-progress-color: var(--cd-blue-300); --cd-status-done-color: var(--cd-green-500); --cd-status-group-damage-color: var(--cd-red-300); --cd-level-platinum-color: var(--cd-violet-300); --cd-sla-warning-text-color: var(--cd-amber-300); /* mark-ступени для тёмной поверхности (band-проверка валидатора) */ --cd-chart-ok: #228be6; --cd-chart-bad: #f03e3e; }