/* * ============================================================ * LOOM — Design System Tokens * B2 Technology Solutions · Internal Ops Platform * "The silent intelligence. Operates unseen, orchestrates everything." * ============================================================ * Theme behavior: * 1. Dark is the hardcoded default (:root) * 2. Switches to light automatically if OS preference is light * 3. Manual override: data-theme="dark" or data-theme="light" on * 4. User preference persisted via localStorage key: 'loom-theme' * * Drop-in (.NET 10 / Blazor / MVC): * * * Auto-detection script (paste before in _Layout.cshtml): * * * Toggle function (JS): * function toggleTheme() { * var next = document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light'; * document.documentElement.setAttribute('data-theme', next); * localStorage.setItem('loom-theme', next); * } * * Blazor toggle (inject IJSRuntime): * await JS.InvokeVoidAsync("toggleTheme"); * ============================================================ */ /* ── DEFAULT: DARK (fallback when no OS pref detected) ───── */ :root { /* Backgrounds */ --loom-bg-page: #0d100e; /* Near-black with green undertone */ --loom-bg-surface: #191c19; /* Cards, panels */ --loom-bg-surface-alt: #141714; /* Alternate surface */ --loom-bg-inset: #252825; /* Inset / nested elements */ /* Borders */ --loom-border: #1e221e; --loom-border-hover: #2e342e; /* Text */ --loom-text-primary: #e4e8e4; --loom-text-secondary: #9aaa9a; --loom-text-muted: #4e5a4e; /* B2 Blue — primary data & AI accent */ --loom-blue: #00639c; /* B2 brand blue */ --loom-blue-bright: #2d96d6; /* Lightened for dark bg */ --loom-blue-bg: #060f18; --loom-blue-border: #093050; /* B2 Green — primary health/status signal */ --loom-green: #1a9e72; --loom-green-bright: #22b588; --loom-green-bg: #071410; --loom-green-border: #0d3028; /* B2 Yellow — accent only (notes, minor flags) */ --loom-yellow: #fdf652; /* B2 brand yellow (exact) */ --loom-yellow-dim: #b8ae00; /* Slightly dimmed for secondary use */ --loom-yellow-bg: #1a1800; /* Dark yellow-tinted surface */ /* B2 Grey — labels, metadata */ --loom-grey: #9b9b9b; /* B2 brand grey */ --loom-grey-lt: #c0c0c0; /* Semantic */ --loom-red: #c04540; /* Critical alerts */ --loom-red-bg: #180808; /* Text on solid-color backgrounds (buttons, active badges) */ --loom-text-on-color: #ffffff; --loom-text-on-color-muted: rgba(255,255,255,0.4); /* breadcrumb divider, secondary text on dark headers */ /* Shadows — used in modern.css; defined here so they theme-aware */ --loom-shadow-sm: 0 1px 4px rgba(0,0,0,.30); --loom-shadow-md: 0 6px 24px rgba(0,0,0,.40); --loom-shadow-lg: 0 8px 32px rgba(0,0,0,.40); --loom-overlay-bg: rgba(13,16,14,.88); } /* ── OS PREFERENCE: LIGHT (auto, no manual override) ──────── */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --loom-bg-page: #f2f4f2; --loom-bg-surface: #ffffff; --loom-bg-surface-alt: #eaecea; --loom-bg-inset: #dde0dd; --loom-border: #d4d8d4; --loom-border-hover: #b8bcb8; --loom-text-primary: #141714; --loom-text-secondary: #3a463a; --loom-text-muted: #7a867a; --loom-blue: #00639c; --loom-blue-bright: #004e80; --loom-blue-bg: #e4f0f8; --loom-blue-border: #aacce6; --loom-green: #0e7a58; --loom-green-bright: #0a6046; --loom-green-bg: #e4f5ee; --loom-green-border: #90d4b8; --loom-yellow: #5e5600; /* #fdf652 darkened for light-bg text readability */ --loom-yellow-dim: #3e3a00; --loom-yellow-bg: #fefce8; /* Very light yellow tint */ --loom-grey: #5a6060; --loom-grey-lt: #3a4040; --loom-red: #962820; --loom-red-bg: #faeaea; /* Shadows are lighter on a light background */ --loom-shadow-sm: 0 1px 4px rgba(0,0,0,.10); --loom-shadow-md: 0 6px 24px rgba(0,0,0,.14); --loom-shadow-lg: 0 8px 32px rgba(0,0,0,.14); --loom-overlay-bg: rgba(242,244,242,.92); } } /* ── MANUAL OVERRIDE: DARK ─────────────────────────────────── */ [data-theme="dark"] { --loom-bg-page: #0d100e; --loom-bg-surface: #191c19; --loom-bg-surface-alt: #141714; --loom-bg-inset: #252825; --loom-border: #1e221e; --loom-border-hover: #2e342e; --loom-text-primary: #e4e8e4; --loom-text-secondary: #9aaa9a; --loom-text-muted: #4e5a4e; --loom-blue: #00639c; --loom-blue-bright: #2d96d6; --loom-blue-bg: #060f18; --loom-blue-border: #093050; --loom-green: #1a9e72; --loom-green-bright: #22b588; --loom-green-bg: #071410; --loom-green-border: #0d3028; --loom-yellow: #fdf652; --loom-yellow-dim: #b8ae00; --loom-yellow-bg: #1a1800; --loom-grey: #9b9b9b; --loom-grey-lt: #c0c0c0; --loom-red: #c04540; --loom-red-bg: #180808; } /* ── MANUAL OVERRIDE: LIGHT ────────────────────────────────── */ [data-theme="light"] { --loom-bg-page: #f2f4f2; --loom-bg-surface: #ffffff; --loom-bg-surface-alt: #eaecea; --loom-bg-inset: #dde0dd; --loom-border: #d4d8d4; --loom-border-hover: #b8bcb8; --loom-text-primary: #141714; --loom-text-secondary: #3a463a; --loom-text-muted: #7a867a; --loom-blue: #00639c; --loom-blue-bright: #004e80; --loom-blue-bg: #e4f0f8; --loom-blue-border: #aacce6; --loom-green: #0e7a58; --loom-green-bright: #0a6046; --loom-green-bg: #e4f5ee; --loom-green-border: #90d4b8; --loom-yellow: #5e5600; --loom-yellow-dim: #3e3a00; --loom-yellow-bg: #fefce8; --loom-grey: #5a6060; --loom-grey-lt: #3a4040; --loom-red: #962820; --loom-red-bg: #faeaea; --loom-shadow-sm: 0 1px 4px rgba(0,0,0,.10); --loom-shadow-md: 0 6px 24px rgba(0,0,0,.14); --loom-shadow-lg: 0 8px 32px rgba(0,0,0,.14); --loom-overlay-bg: rgba(242,244,242,.92); } /* ── TYPOGRAPHY ─────────────────────────────────────────────── */ :root { --loom-font-mono: 'Space Mono', monospace; --loom-font-sans: 'Inter', system-ui, sans-serif; } /* ── UTILITY CLASSES ────────────────────────────────────────── */ /* Layout */ .loom-page { background: var(--loom-bg-page); color: var(--loom-text-primary); } .loom-surface { background: var(--loom-bg-surface); border: 0.5px solid var(--loom-border); border-radius: 12px; } .loom-panel { background: var(--loom-bg-surface); border: 0.5px solid var(--loom-border); border-radius: 8px; padding: 1rem; } .loom-inset { background: var(--loom-bg-inset); border-radius: 6px; } .loom-divider { height: 0.5px; background: var(--loom-border); margin: 1rem 0; } /* Text */ .loom-text-primary { color: var(--loom-text-primary); } .loom-text-secondary { color: var(--loom-text-secondary); } .loom-text-muted { color: var(--loom-text-muted); } .loom-mono { font-family: var(--loom-font-mono); } .loom-sans { font-family: var(--loom-font-sans); } /* Section label */ .loom-section-label { font-family: var(--loom-font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--loom-text-muted); margin-bottom: 0.75rem; } /* Status badges */ .loom-badge { font-family: var(--loom-font-mono); font-size: 10px; padding: 2px 6px; border-radius: 4px; } .loom-badge-blue { background: var(--loom-blue-bg); color: var(--loom-blue-bright); border: 0.5px solid var(--loom-blue-border); } .loom-badge-green { background: var(--loom-green-bg); color: var(--loom-green-bright); border: 0.5px solid var(--loom-green-border); } .loom-badge-red { background: var(--loom-red-bg); color: var(--loom-red); } .loom-badge-yellow { background: var(--loom-yellow-bg); color: var(--loom-yellow); } .loom-badge-grey { background: var(--loom-bg-inset); color: var(--loom-grey-lt); } /* Thread priority indicators (ticket left-border) */ .loom-thread-critical { border-left: 3px solid var(--loom-red); } .loom-thread-medium { border-left: 3px solid var(--loom-blue); } .loom-thread-low { border-left: 3px solid var(--loom-border); } /* AI / Loom intelligence banner */ .loom-banner { background: var(--loom-green-bg); border: 0.5px solid var(--loom-green-border); border-radius: 8px; padding: 0.875rem 1rem; } /* Stat card */ .loom-stat-card { background: var(--loom-bg-surface-alt); border: 0.5px solid var(--loom-border); border-radius: 8px; padding: 0.875rem 1rem; } .loom-stat-card-blue { border-top: 1.5px solid var(--loom-blue-bright); } .loom-stat-card-green { border-top: 1.5px solid var(--loom-green-bright); } .loom-stat-card-red { border-top: 1.5px solid var(--loom-red); } .loom-stat-value { font-family: var(--loom-font-mono); font-size: 24px; font-weight: 700; line-height: 1; } .loom-stat-value-blue { color: var(--loom-blue-bright); } .loom-stat-value-green { color: var(--loom-green-bright); } .loom-stat-value-red { color: var(--loom-red); } .loom-stat-label { font-size: 12px; color: var(--loom-text-muted); margin-top: 5px; } /* ── SPACING SCALE ──────────────────────────────────────────── */ :root { --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; } /* ── TYPE SCALE ─────────────────────────────────────────────── */ :root { --text-2xs: .72rem; /* 11.5px — footer, captions */ --text-xs: .76rem; /* 12.2px — mono labels */ --text-sm: .875rem; /* 14px — secondary text */ --text-base: 1rem; /* 16px — body */ --text-lg: 1.125rem; /* 18px — emphasized body */ --text-xl: 1.25rem; /* 20px — subheadings */ --text-2xl: 1.5rem; /* 24px — section headings */ --text-3xl: 1.875rem; /* 30px — page headings */ } /* ── MOTION ─────────────────────────────────────────────────── */ /* WCAG 2.1 SC 2.3.3 — suppress all animation for users who request it */ @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; } } /* * ============================================================ * COLOR ROLE REFERENCE * ============================================================ * --loom-blue / blue-bright → Primary: data display, AI actions, info states * --loom-green / green-bright → Positive: SLA met, resolved, live/active status * --loom-red → Critical: alerts, escalations, failures * --loom-yellow → Accent only: notes, minor flags (use sparingly) * --loom-grey → Muted: labels, timestamps, metadata * ============================================================ */