/* ========================================================================== STATUS COLORS - СИСТЕМА ЦВЕТОВЫХ ТОКЕНОВ ДЛЯ СТАТУСОВ Inspired by Figma Design Tokens & GitHub Primer ========================================================================== */ :root { /* ========================================================================== RAW COLOR PALETTES (Базовые палитры) Эти цвета не используются напрямую - только через семантические токены ========================================================================== */ /* Slate Palette (Нейтральные серо-синие) */ --palette-slate-300: #cbd5e1; --palette-slate-400: #94a3b8; --palette-slate-500: #64748b; --palette-slate-600: #475569; --palette-slate-700: #334155; /* Purple Palette (Фиолетовые - бренд) */ --palette-purple-300: #d8b4fe; --palette-purple-400: #c4b5fd; --palette-purple-500: #a78bfa; --palette-purple-600: #9333ea; --palette-purple-700: #7c3aed; /* Amber Palette (Янтарные - предупреждения) */ --palette-amber-400: #fbbf24; --palette-amber-500: #f59e0b; --palette-amber-600: #d97706; /* Rose Palette (Розовые - критичные) */ --palette-rose-500: #f43f5e; --palette-rose-600: #e11d48; --palette-rose-700: #be123c; /* Emerald Palette (Зеленые - успех) */ --palette-emerald-400: #34d399; --palette-emerald-500: #10b981; --palette-emerald-600: #059669; /* ========================================================================== SEMANTIC TOKENS - VARIANT A: UNIFIED PURPLE Унифицированная фиолетовая гамма (для консистентности с брендом) ========================================================================== */ --variant-a-info-border: var(--palette-purple-400); --variant-a-info-icon: var(--palette-purple-400); --variant-a-info-text: var(--palette-purple-300); --variant-a-warning-border: var(--palette-purple-500); --variant-a-warning-icon: var(--palette-purple-500); --variant-a-warning-text: var(--palette-purple-400); --variant-a-critical-border: var(--palette-purple-700); --variant-a-critical-icon: var(--palette-purple-700); --variant-a-critical-text: var(--palette-purple-600); /* ========================================================================== SEMANTIC TOKENS - VARIANT B: MODERN MUTED Приглушенные нейтральные оттенки (максимальный минимализм) ========================================================================== */ --variant-b-info-border: var(--palette-slate-400); --variant-b-info-icon: var(--palette-slate-400); --variant-b-info-text: var(--palette-slate-300); --variant-b-warning-border: var(--palette-slate-500); --variant-b-warning-icon: var(--palette-slate-500); --variant-b-warning-text: var(--palette-slate-400); --variant-b-critical-border: var(--palette-slate-600); --variant-b-critical-icon: var(--palette-slate-600); --variant-b-critical-text: var(--palette-slate-500); /* ========================================================================== SEMANTIC TOKENS - VARIANT C: AMBER SLATE (РЕКОМЕНДУЕТСЯ) Баланс нейтральности и узнаваемости статусов ========================================================================== */ --variant-c-info-border: var(--palette-slate-400); --variant-c-info-icon: var(--palette-slate-500); --variant-c-info-text: var(--palette-slate-400); --variant-c-warning-border: var(--palette-amber-500); --variant-c-warning-icon: var(--palette-amber-500); --variant-c-warning-text: var(--palette-amber-400); --variant-c-critical-border: var(--palette-rose-600); --variant-c-critical-icon: var(--palette-rose-600); --variant-c-critical-text: var(--palette-rose-500); /* ========================================================================== ACTIVE SEMANTIC TOKENS (Активные токены) Используется Variant B (Modern Muted) - приглушенные нейтральные ========================================================================== */ /* Status Info (Информация) */ --status-info-border: var(--variant-b-info-border); --status-info-icon: var(--variant-b-info-icon); --status-info-text: var(--variant-b-info-text); --status-info-bg: transparent; /* Минимализм - без фона */ /* Status Warning (Предупреждение) */ --status-warning-border: var(--variant-b-warning-border); --status-warning-icon: var(--variant-b-warning-icon); --status-warning-text: var(--variant-b-warning-text); --status-warning-bg: transparent; /* Минимализм - без фона */ /* Status Critical (Критичное) */ --status-critical-border: var(--variant-b-critical-border); --status-critical-icon: var(--variant-b-critical-icon); --status-critical-text: var(--variant-b-critical-text); --status-critical-bg: transparent; /* Минимализм - без фона */ /* Status Success (Успех) */ --status-success-border: var(--palette-emerald-500); --status-success-icon: var(--palette-emerald-500); --status-success-text: var(--palette-emerald-400); --status-success-bg: transparent; /* ========================================================================== COMPONENT TOKENS (Компонентные токены) Специфичные для конкретных UI компонентов ========================================================================== */ /* Alert Component */ --alert-info-border: var(--status-info-border); --alert-info-icon: var(--status-info-icon); --alert-info-text: var(--status-info-text); --alert-info-bg: var(--status-info-bg); --alert-warning-border: var(--status-warning-border); --alert-warning-icon: var(--status-warning-icon); --alert-warning-text: var(--status-warning-text); --alert-warning-bg: var(--status-warning-bg); --alert-critical-border: var(--status-critical-border); --alert-critical-icon: var(--status-critical-icon); --alert-critical-text: var(--status-critical-text); --alert-critical-bg: var(--status-critical-bg); --alert-success-border: var(--status-success-border); --alert-success-icon: var(--status-success-icon); --alert-success-text: var(--status-success-text); --alert-success-bg: var(--status-success-bg); /* Badge Component */ --badge-info-border: var(--status-info-border); --badge-info-text: var(--status-info-text); --badge-info-bg: rgba(148, 163, 184, 0.1); --badge-warning-border: var(--status-warning-border); --badge-warning-text: var(--status-warning-text); --badge-warning-bg: rgba(245, 158, 11, 0.1); --badge-critical-border: var(--status-critical-border); --badge-critical-text: var(--status-critical-text); --badge-critical-bg: rgba(225, 29, 72, 0.1); --badge-success-border: var(--status-success-border); --badge-success-text: var(--status-success-text); --badge-success-bg: rgba(16, 185, 129, 0.1); /* Progress Bar */ --progress-info-fill: var(--palette-slate-400); --progress-warning-fill: var(--palette-slate-500); --progress-critical-fill: var(--palette-slate-600); --progress-success-fill: var(--palette-emerald-500); /* Toast Notifications */ --toast-info-border: var(--alert-info-border); --toast-info-icon: var(--alert-info-icon); --toast-warning-border: var(--alert-warning-border); --toast-warning-icon: var(--alert-warning-icon); --toast-critical-border: var(--alert-critical-border); --toast-critical-icon: var(--alert-critical-icon); --toast-error-border: var(--alert-critical-border); --toast-error-icon: var(--alert-critical-icon); --toast-success-border: var(--alert-success-border); --toast-success-icon: var(--alert-success-icon); } /* ========================================================================== LIGHT THEME OVERRIDES Адаптация цветов для светлой темы ========================================================================== */ [data-theme="light"] { /* В светлой теме используем более темные оттенки для контраста */ /* Variant B для светлой темы (темнее для читаемости) */ --variant-b-info-border: var(--palette-slate-500); --variant-b-info-icon: var(--palette-slate-600); --variant-b-info-text: var(--palette-slate-600); --variant-b-warning-border: var(--palette-slate-600); --variant-b-warning-icon: var(--palette-slate-700); --variant-b-warning-text: var(--palette-slate-700); --variant-b-critical-border: var(--palette-slate-700); --variant-b-critical-icon: var(--palette-slate-700); --variant-b-critical-text: var(--palette-slate-700); /* Обновляем активные токены для светлой темы */ --status-info-border: var(--variant-b-info-border); --status-info-icon: var(--variant-b-info-icon); --status-info-text: var(--variant-b-info-text); --status-warning-border: var(--variant-b-warning-border); --status-warning-icon: var(--variant-b-warning-icon); --status-warning-text: var(--variant-b-warning-text); --status-critical-border: var(--variant-b-critical-border); --status-critical-icon: var(--variant-b-critical-icon); --status-critical-text: var(--variant-b-critical-text); /* Success также темнее */ --status-success-border: var(--palette-emerald-600); --status-success-icon: var(--palette-emerald-600); --status-success-text: var(--palette-emerald-600); } /* ========================================================================== USAGE GUIDELINES (Комментарии для разработчиков) ========================================================================== КАК ИСПОЛЬЗОВАТЬ: 1. Для алертов и предупреждений: border-color: var(--alert-warning-border); color: var(--alert-warning-icon); 2. Для бейджей статуса: border: 1px solid var(--badge-info-border); color: var(--badge-info-text); background: var(--badge-info-bg); 3. Для прогресс-баров: background: var(--progress-warning-fill); 4. Для кастомных компонентов: Используйте семантические токены (--status-*), не палитру напрямую ПЕРЕКЛЮЧЕНИЕ ВАРИАНТОВ: Чтобы переключить на другой вариант, замените в --status-* токенах: - Variant A: --variant-a-* - Variant B: --variant-b-* - Variant C: --variant-c-* (по умолчанию) ========================================================================== */