/* =========================================================================== tokens.css — единственный источник правды по цвету, размеру и времени. Ни один другой файл не имеет права писать литеральный цвет: только var(). Порядок подключения (см. docs/DESIGN.md): tokens.css → base.css → labels.css → components.css → pages.css ТЕМА ОДНА — ТЁМНАЯ. Светлая убрана намеренно: интерфейс построен на стеклянных слоях, а стекло читается только на тёмной глубине. Держать две темы означало бы держать два набора прозрачностей и два набора расчётов контраста для каждого слоя; на светлом фоне те же значения дают либо молочную муть, либо неразличимые границы. КОНТРАСТ. Возле каждой пары «текст на фоне» стоит посчитанный коэффициент по WCAG 2.1 (относительная яркость, sRGB, формула (L1+0.05)/(L2+0.05)). Порог: 4.5:1 — обычный текст, 3:1 — крупный (≥18.66px bold / ≥24px) и границы элементов управления. Пар ниже порога в файле нет. СТЕКЛО И КОНТРАСТ. Прозрачный слой сам по себе контраста не имеет: он зависит от того, что под ним. Поэтому у каждого стеклянного токена задана не только прозрачность, но и --glass-*-solid — цвет, который получится над самым светлым местом фона. Все коэффициенты ниже посчитаны именно по solid-значению, то есть для худшего случая. =========================================================================== */ :root { color-scheme: dark; /* ----------------------------------------------------------------------- 1. ГЛУБИНА Фон приложения — не плоская заливка, а тёмная база с двумя мягкими цветными пятнами (см. base.css). Пятна существуют ради стекла: размытие поверх однородного фона неотличимо от простой заливки. -------------------------------------------------------------------- */ --bg-base: #0A0D11; /* самая глубокая точка */ --bg-glow-1: rgba(87, 157, 255, 0.16); /* холодное пятно */ --bg-glow-2: rgba(140, 106, 255, 0.13); /* фиолетовое пятно */ --bg-vignette: rgba(0, 0, 0, 0.45); /* ----------------------------------------------------------------------- 2. ПОВЕРХНОСТИ Непрозрачные слои остаются для всего, что несёт длинный текст: под ним фон обязан быть предсказуемым. Стеклянными делаются оболочки — панели, колонки, поповеры, модалки. -------------------------------------------------------------------- */ --surface-app: #0F1214; /* запасной фон, если градиент не виден */ --surface-sunken: #12161A; /* утопленное: поля ввода, зона дропа */ --surface-board: #0F1319; /* холст доски */ --surface-column: #191C20; /* непрозрачный вариант колонки */ --surface-card: #22272B; /* карточка, плитка доски */ --surface-popover: #282E33; /* непрозрачный вариант поповера */ --surface-hover: #2C333A; --surface-active: #2F363E; --surface-selected: #1C2B41; --surface-overlay: rgba(6, 9, 14, 0.62); /* затемнение под модалкой */ --surface-scrim: rgba(0, 0, 0, 0.62); /* плашка над фото доски */ /* ----------------------------------------------------------------------- 3. СТЕКЛО Три плотности. Чем длиннее текст на слое, тем плотнее стекло. thin — декоративные оболочки, крупные плоскости base — панели, колонки, шапка thick — поповеры, меню, модалки: мелкий текст, читаться обязан всегда -------------------------------------------------------------------- */ --glass-thin: rgba(28, 33, 40, 0.55); --glass-thin-solid: #232830; /* --text 12.10 | --text-secondary 7.90 */ --glass: rgba(26, 31, 38, 0.72); --glass-solid: #1F242B; /* --text 13.30 | --text-secondary 8.68 */ --glass-thick: rgba(32, 38, 46, 0.86); --glass-thick-solid: #232931; /* --text 12.02 | --text-secondary 7.85 */ /* Край стекла: светлая линия сверху и тёмная снизу — так слой читается как физическая пластина, а не как полупрозрачный прямоугольник. */ --glass-border: rgba(255, 255, 255, 0.10); --glass-border-strong: rgba(255, 255, 255, 0.16); --glass-highlight: rgba(255, 255, 255, 0.07); /* блик по верхней кромке */ --glass-shade: rgba(0, 0, 0, 0.30); /* тень по нижней кромке */ /* Размытие. saturate поднимает цвет фона, иначе он сереет под blur. */ --glass-blur: blur(20px) saturate(150%); --glass-blur-strong: blur(32px) saturate(165%); --glass-blur-weak: blur(10px) saturate(130%); /* ----------------------------------------------------------------------- 4. ТЕКСТ Коэффициенты — по solid-эквивалентам стеклянных слоёв (худший случай). -------------------------------------------------------------------- */ --text: #E9EEF5; /* card 13.10 | glass 13.30 | thick 12.02 | app 16.30 */ --text-secondary: #B6C2CF; /* card 8.33 | glass 8.68 | thick 7.85 */ --text-muted: #9FADBC; /* card 6.59 | glass 6.87 | thick 6.21 */ --text-on-accent: #0A0D11; /* accent 7.02 | accent-hover 9.41 */ --text-on-board: #FFFFFF; /* на scrim ≥6.19 */ --text-link: #7FB4FF; /* card 7.06 | glass 7.35 | thick 6.65 */ --text-link-hover: #A9C9FF; /* card 9.00 | glass 9.38 */ --text-disabled: #5A6570; /* намеренно ниже порога: сигнал «выключено» */ /* ----------------------------------------------------------------------- 5. ГРАНИЦЫ -------------------------------------------------------------------- */ --border-subtle: rgba(255, 255, 255, 0.06); --border: rgba(255, 255, 255, 0.11); --border-strong: #7C8B9C; /* card 4.33 | glass 4.51 | thick 4.08 — ≥3:1 */ --border-focus: #7FB4FF; /* ----------------------------------------------------------------------- 6. АКЦЕНТ И СЕМАНТИКА -------------------------------------------------------------------- */ --accent: #4C9AFF; --accent-hover: #7FB4FF; --accent-active: #A9C9FF; --accent-subtle: rgba(76, 154, 255, 0.16); --accent-subtle-hover: rgba(76, 154, 255, 0.24); --accent-text: #A9C9FF; /* card 9.00 | glass 9.38 */ --accent-glow: rgba(76, 154, 255, 0.35); --focus-ring: #7FB4FF; --focus-ring-inverse: #FFFFFF; --success: #4BCE97; --success-hover: #7EE2B8; --on-success: #0A0D11; /* success 9.68 */ --success-text: #7EE2B8; /* card 9.66 | glass 10.07 */ --success-subtle: rgba(75, 206, 151, 0.16); --success-subtle-text: #7EE2B8; --warning: #F5CD47; --warning-hover: #E2B203; --on-warning: #0A0D11; /* warning 11.68 */ --warning-text: #F5CD47; /* card 9.84 | glass 10.25 */ --warning-subtle: rgba(245, 205, 71, 0.16); --warning-subtle-text: #F5CD47; --danger: #F87168; --danger-hover: #FD9891; --on-danger: #0A0D11; /* danger 6.91 */ --danger-text: #FD9891; /* card 7.23 | glass 7.53 */ --danger-subtle: rgba(248, 113, 104, 0.16); --danger-subtle-text: #FD9891; --info: #4C9AFF; --info-hover: #7FB4FF; --on-info: #0A0D11; --info-text: #A9C9FF; --info-subtle: rgba(76, 154, 255, 0.16); --info-subtle-text: #A9C9FF; /* -- Состояния срока: их считает сервер (dto.DueState) --------------- */ --due-upcoming-bg: transparent; --due-upcoming-text: var(--text-muted); --due-soon-bg: var(--warning-subtle); --due-soon-text: var(--warning-subtle-text); --due-overdue-bg: var(--danger-subtle); --due-overdue-text: var(--danger-subtle-text); --due-complete-bg: var(--success-subtle); --due-complete-text: var(--success-subtle-text); /* -- Прочее ---------------------------------------------------------- */ --skeleton-base: rgba(255, 255, 255, 0.06); --skeleton-shine: rgba(255, 255, 255, 0.10); --selection-bg: #09326C; --selection-text: #E9EEF5; /* на selection-bg 10.84 */ --btn-neutral: rgba(255, 255, 255, 0.08); --btn-neutral-hover: rgba(255, 255, 255, 0.13); --btn-neutral-active: rgba(255, 255, 255, 0.18); --overlay-hover: rgba(255, 255, 255, 0.06); --overlay-active: rgba(255, 255, 255, 0.10); /* ----------------------------------------------------------------------- 7. ТЕНИ На стекле тень работает вместе с бликом кромки: без неё пластина не отрывается от фона, без блика — выглядит грязным пятном. -------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.40); --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.55); --shadow-lg: 0 16px 36px -10px rgba(0, 0, 0, 0.62); --shadow-xl: 0 28px 60px -16px rgba(0, 0, 0, 0.70); --shadow-drag: 0 20px 44px -12px rgba(0, 0, 0, 0.75); --shadow-glow: 0 0 0 1px var(--glass-border), 0 8px 24px -8px rgba(0, 0, 0, 0.6); /* ----------------------------------------------------------------------- 8. ТИПОГРАФИКА -------------------------------------------------------------------- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --text-xs: 12px; --text-sm: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; --text-4xl: 40px; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-loose: 1.65; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.01em; --tracking-wide: 0.04em; /* ----------------------------------------------------------------------- 9. РАЗМЕРЫ -------------------------------------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* Радиусы крупнее, чем у плоского интерфейса: у стеклянной пластины скруглённая кромка — это то, на чём видно блик. */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px; --radius-round: 50%; --control-sm: 28px; --control-md: 32px; --control-lg: 40px; --tap-target: 44px; --column-width: 272px; --column-gap: 12px; --board-pad: 12px; --topbar-height: 52px; --board-bar-height: 48px; --sidebar-width: 260px; --card-cover-max: 160px; --hairline: 1px; --focus-width: 2px; --focus-offset: 2px; /* ----------------------------------------------------------------------- 10. ДВИЖЕНИЕ -------------------------------------------------------------------- */ --dur-instant: 60ms; --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; --dur-skeleton: 1400ms; --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasis:cubic-bezier(0.2, 0.9, 0.2, 1); /* ----------------------------------------------------------------------- 11. СЛОИ. Единственное место, где назначается z-index. -------------------------------------------------------------------- */ --z-base: 0; --z-raised: 1; --z-sticky: 100; --z-drag: 200; --z-popover: 300; --z-modal: 400; --z-toast: 500; } /* --------------------------------------------------------------------------- ЗАПАСНОЙ ВАРИАНТ БЕЗ РАЗМЫТИЯ Firefox до 103 и режим экономии ресурсов не поддерживают backdrop-filter. Там стекло обязано стать непрозрачным, иначе текст ляжет прямо на фон. --------------------------------------------------------------------------- */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glass-thin: var(--glass-thin-solid); --glass: var(--glass-solid); --glass-thick: var(--glass-thick-solid); } }