/* ─────────────────────────────────────────────────────────────────────────── * Design tokens for MessageBotWeb (Phase 0) * * Подключается ДО всех остальных стилей в _Layout.cshtml. * Все страницы должны использовать только переменные отсюда — никаких * inline-цветов / магических чисел. * * Темы: переключение через `data-theme="dark"` на . * Семантические переменные (--surface-card, --text-1, --accent-500) одинаковы * в обеих темах — меняются только их значения. * * Brand-цвета каналов/провайдеров — отдельная группа, используется * ТОЛЬКО для бейджей/аватаров, не для UI-фонов и кнопок. * ─────────────────────────────────────────────────────────────────────────── */ :root { /* ── Surfaces (8 уровней серого) ──────────────────────────────────── */ --surface-0: #ffffff; /* page background */ --surface-1: #f8fafc; /* card / panel background */ --surface-2: #f1f5f9; /* secondary panel, hover */ --surface-3: #e2e8f0; /* border, divider */ --surface-4: #cbd5e1; /* stronger border, disabled bg */ --surface-5: #94a3b8; /* placeholder text */ --surface-6: #64748b; /* muted text */ --surface-7: #334155; /* secondary text */ --surface-8: #1e293b; /* on-light heading */ /* Семантические псевдонимы (рекомендуется использовать их, а не -N) */ --bg-page: var(--surface-0); --bg-card: #ffffff; --bg-card-hover: var(--surface-1); --bg-input: #ffffff; --bg-elevated: #ffffff; --border-subtle: var(--surface-3); --border-strong: var(--surface-4); /* ── Текст ────────────────────────────────────────────────────────── */ --text-1: #0f172a; /* заголовки */ --text-2: #334155; /* основной текст */ --text-3: #64748b; /* подписи, muted */ --text-disabled: #cbd5e1; --text-inverse: #ffffff; --text-link: var(--accent-600); /* ── Акцент (один primary — синий) ────────────────────────────────── */ --accent-50: #eff6ff; --accent-100: #dbeafe; --accent-200: #bfdbfe; --accent-300: #93c5fd; --accent-400: #60a5fa; --accent-500: #3b82f6; /* primary */ --accent-600: #2563eb; /* primary hover */ --accent-700: #1d4ed8; /* primary active */ --accent-800: #1e40af; --accent-900: #1e3a8a; /* ── Семантика (success / warning / danger / info) ────────────────── */ --success-50: #f0fdf4; --success-500: #22c55e; --success-600: #16a34a; --success-700: #15803d; --success-bg: #f0fdf4; --success-fg: #14532d; --warning-50: #fffbeb; --warning-500: #f59e0b; --warning-600: #d97706; --warning-700: #b45309; --warning-bg: #fffbeb; --warning-fg: #78350f; --danger-50: #fef2f2; --danger-500: #ef4444; --danger-600: #dc2626; --danger-700: #b91c1c; --danger-bg: #fef2f2; --danger-fg: #7f1d1d; --info-50: #ecfeff; --info-500: #06b6d4; --info-600: #0891b2; --info-700: #0e7490; --info-bg: #ecfeff; --info-fg: #164e63; /* ── Brand-цвета (только для бейджей каналов/провайдеров) ─────────── */ --brand-avito: #ff6163; --brand-vk: #4a76a8; --brand-telegram: #0088cc; --brand-custom: #6c5ce7; --brand-avitoweb: #ff9800; --brand-claude: #d97706; --brand-openai: #10a37f; --brand-gemini: #4285f4; --brand-coze: #0d6efd; /* ── Spacing scale (8-point) ──────────────────────────────────────── */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ── Typography ───────────────────────────────────────────────────── */ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 15px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; --lh-tight: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ── Radii ────────────────────────────────────────────────────────── */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* ── Shadows ──────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.03); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06); --shadow-xl: 0 24px 56px rgba(15, 23, 42, 0.16), 0 8px 16px rgba(15, 23, 42, 0.08); --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.25); /* ── Transitions ──────────────────────────────────────────────────── */ --t-fast: 120ms ease-out; --t-md: 200ms ease-out; --t-slow: 320ms ease-out; /* ── Layout ───────────────────────────────────────────────────────── */ --sidebar-w: 240px; --sidebar-w-collapsed: 64px; --topbar-h: 56px; --content-max-w: 1400px; /* ── Breakpoints (для справки JS; CSS использует media queries) ───── */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; } /* ───────────────────────────────────────────────────────────────────────── * DARK THEME * Применяется через . * Меняются только значения; имена переменных те же — компоненты не знают * что тема изменилась. * ───────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { --surface-0: #0a0e1a; --surface-1: #111827; --surface-2: #1f2937; --surface-3: #2d3748; --surface-4: #4a5568; --surface-5: #718096; --surface-6: #a0aec0; --surface-7: #cbd5e1; --surface-8: #e2e8f0; --bg-page: #0a0e1a; --bg-card: #131826; --bg-card-hover: #1a2030; --bg-input: #131826; --bg-elevated: #1a2030; --border-subtle: #1f2937; --border-strong: #2d3748; --text-1: #f9fafb; --text-2: #e5e7eb; --text-3: #9ca3af; --text-disabled: #4b5563; --text-inverse: #0f172a; /* В тёмной теме accent чуть светлее для лучшего контраста на тёмном */ --accent-500: #60a5fa; --accent-600: #3b82f6; --accent-700: #2563eb; /* Семантика — фоны темнее, текст светлее */ --success-bg: #052e16; --success-fg: #86efac; --warning-bg: #451a03; --warning-fg: #fcd34d; --danger-bg: #450a0a; --danger-fg: #fca5a5; --info-bg: #083344; --info-fg: #67e8f9; --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.2); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.25); --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.3); --shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.35); } /* ───────────────────────────────────────────────────────────────────────── * Auto dark — если пользователь не выбрал тему явно (нет data-theme), * применяется по системной prefers-color-scheme. * ───────────────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --surface-0: #0a0e1a; --surface-1: #111827; --bg-page: #0a0e1a; --bg-card: #131826; --bg-input: #131826; --border-subtle: #1f2937; --text-1: #f9fafb; --text-2: #e5e7eb; --text-3: #9ca3af; --accent-500: #60a5fa; } } /* ───────────────────────────────────────────────────────────────────────── * Базовые сбросы и применение токенов к body * (компоненты остаются как есть; глобальный стиль body настраивается тут). * ───────────────────────────────────────────────────────────────────── */ html { color-scheme: light dark; } body { background: var(--bg-page); color: var(--text-2); font-family: var(--font-family); font-size: var(--fs-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { color: var(--text-1); font-weight: var(--fw-bold); line-height: var(--lh-tight); } a { color: var(--text-link); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--accent-700); text-decoration: underline; } /* Focus-visible — единый стиль для всех интерактивных элементов */ :focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; border-radius: var(--r-sm); } /* ───────────────────────────────────────────────────────────────────────── * Bootstrap 5 CSS variables — переопределяем чтобы Bootstrap-компоненты * (таблицы, alerts, dropdown'ы, modal'ы и т.д.) автоматически адаптировались * к нашей теме без правок их специфических селекторов. * * Bootstrap.css загружается ПОСЛЕ design-tokens, но эти переменные * определены в :root и обновляются при смене data-theme. * ───────────────────────────────────────────────────────────────────── */ :root { --bs-body-color: var(--text-2); --bs-body-bg: var(--bg-page); --bs-emphasis-color: var(--text-1); --bs-secondary-color: var(--text-3); --bs-tertiary-color: var(--text-3); --bs-secondary-bg: var(--surface-1); --bs-tertiary-bg: var(--surface-2); --bs-border-color: var(--border-subtle); --bs-border-color-translucent: var(--border-subtle); --bs-link-color: var(--accent-600); --bs-link-hover-color: var(--accent-700); --bs-heading-color: var(--text-1); /* Bootstrap table */ --bs-table-bg: transparent; --bs-table-color: var(--text-2); --bs-table-border-color: var(--border-subtle); --bs-table-striped-bg: var(--surface-1); --bs-table-striped-color: var(--text-2); --bs-table-hover-bg: var(--bg-card-hover); --bs-table-hover-color: var(--text-1); /* Bootstrap card */ --bs-card-bg: var(--bg-card); --bs-card-color: var(--text-2); --bs-card-border-color: var(--border-subtle); --bs-card-cap-bg: var(--bg-card-hover); --bs-card-cap-color: var(--text-1); /* Bootstrap form */ --bs-form-control-bg: var(--bg-input); --bs-form-control-color: var(--text-2); } [data-theme="dark"] { --bs-body-color: var(--text-2); --bs-body-bg: var(--bg-page); --bs-emphasis-color: var(--text-1); --bs-secondary-color: var(--text-3); --bs-tertiary-color: var(--text-3); --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--surface-3); --bs-border-color: var(--border-subtle); --bs-border-color-translucent: var(--border-subtle); --bs-link-color: var(--accent-500); --bs-link-hover-color: var(--accent-400); --bs-heading-color: var(--text-1); --bs-table-bg: transparent; --bs-table-color: var(--text-2); --bs-table-border-color: var(--border-subtle); --bs-table-striped-bg: var(--surface-2); --bs-table-hover-bg: var(--bg-card-hover); --bs-card-bg: var(--bg-card); --bs-card-color: var(--text-2); --bs-card-border-color: var(--border-subtle); --bs-card-cap-bg: var(--bg-card-hover); --bs-card-cap-color: var(--text-1); --bs-form-control-bg: var(--bg-input); --bs-form-control-color: var(--text-2); } /* Дополнительно — на случай если Bootstrap всё-таки не подхватил переменные. * Применяется только к семантическим элементам, не агрессивно. */ [data-theme="dark"] strong, [data-theme="dark"] b { color: var(--text-1); } [data-theme="dark"] table:not([class*="table-dark"]) > :not(caption) > * { color: var(--text-2); } [data-theme="dark"] th { color: var(--text-1); } /* Reduced motion accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ───────────────────────────────────────────────────────────────────────── * Bootstrap text utility overrides — переводим хардкод-цвета на токены. * Bootstrap.css загружается ПОСЛЕ design-tokens.css, поэтому используем !important. * Без этого .text-muted остаётся #6c757d (невидим в dark) на всех 197+ местах. * ───────────────────────────────────────────────────────────────────── */ .text-muted { color: var(--text-3) !important; } .text-secondary { color: var(--text-3) !important; } .text-body { color: var(--text-2) !important; } .text-dark { color: var(--text-1) !important; } .text-black { color: var(--text-1) !important; } .text-light { color: var(--text-inverse) !important; } .text-white { color: #ffffff !important; } .text-primary { color: var(--accent-600) !important; } .text-success { color: var(--success-600) !important; } .text-danger { color: var(--danger-600) !important; } .text-warning { color: var(--warning-600) !important; } .text-info { color: var(--info-600) !important; } /* Bootstrap small/help — наследуют от родителя но имеют свой стиль */ small, .small { color: inherit; } .form-text { color: var(--text-3); } /* Bootstrap bg-* utilities — поверх токенов для согласованности светлой/тёмной */ .bg-light { background-color: var(--surface-1) !important; color: var(--text-2) !important; } .bg-dark { background-color: var(--surface-8) !important; color: var(--text-inverse) !important; } /* Bootstrap-card text внутри карточек .bg-* должен быть контрастным */ .card.bg-warning, .card.bg-info, .card.bg-success, .card.bg-danger { color: #fff !important; } /* Badge .text-dark (Bootstrap class на .badge.bg-warning и т.п.) — должен оставаться тёмным * на светлом фоне бейджа в обеих темах. badge-фон не меняется, текст #333 на жёлтом OK всегда. */ .badge.text-dark { color: #1a1a1a !important; } .badge.text-white { color: #ffffff !important; } /* code/pre/kbd — должны контрастировать в обеих темах */ code:not([class*="hljs"]) { color: var(--accent-700); background: var(--surface-2); padding: 1px 5px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 0.9em; } [data-theme="dark"] code:not([class*="hljs"]) { color: var(--accent-500); background: var(--surface-2); } pre { color: var(--text-2); } /* Alert внутренний текст: используем семантические fg */ .alert-info { color: var(--info-fg); background: var(--info-bg); border-color: var(--info-500); } .alert-success { color: var(--success-fg); background: var(--success-bg); border-color: var(--success-500); } .alert-warning { color: var(--warning-fg); background: var(--warning-bg); border-color: var(--warning-500); } .alert-danger { color: var(--danger-fg); background: var(--danger-bg); border-color: var(--danger-500); }