/** * MDB Design Tokens * * Unified design system tokens for all mdbrain-dev web UIs. * Based on the portal specification with support for dark/light themes. * * Usage: * - Import this file in your HTML: * - Or import in CSS: @import 'mdb-tokens.css'; * - Theme is auto-detected from system preference, or set via [data-theme="dark|light"] on */ :root { /* ======================================== COLOR PALETTE - Light Theme (default) ======================================== */ /* Primary brand colors */ --mdb-color-primary: #3b82f6; --mdb-color-primary-hover: #2563eb; --mdb-color-primary-active: #1d4ed8; --mdb-color-primary-subtle: #dbeafe; /* Secondary accent */ --mdb-color-secondary: #8b5cf6; --mdb-color-secondary-hover: #7c3aed; /* Semantic colors */ --mdb-color-success: #22c55e; --mdb-color-success-subtle: #dcfce7; --mdb-color-warning: #f59e0b; --mdb-color-warning-subtle: #fef3c7; --mdb-color-error: #ef4444; --mdb-color-error-subtle: #fee2e2; --mdb-color-info: #3b82f6; --mdb-color-info-subtle: #dbeafe; /* Backgrounds */ --mdb-color-bg: #ffffff; --mdb-color-bg-secondary: #fdfdfd; --mdb-color-bg-tertiary: #f1f5f9; --mdb-color-bg-elevated: #ffffff; --mdb-color-bg-overlay: rgba(0, 0, 0, 0.5); /* Blur overlay (for drag/drop, modals, etc.) */ --mdb-blur-overlay-color: rgba(255, 255, 255, 0.25); --mdb-blur-overlay-opacity: 0.25; --mdb-blur-radius: 8px; /* Glass overlay (modal backdrop) */ --mdb-glass-overlay-blur: 12px; --mdb-glass-overlay-saturate: 180%; --mdb-glass-overlay-brightness: 1.05; --mdb-glass-overlay-tint: rgba(255, 255, 255, 0.08); /* Glass card (modal surface) */ --mdb-glass-card-blur: 40px; --mdb-glass-card-saturate: 150%; --mdb-glass-card-bg: rgba(255, 255, 255, 0.85); --mdb-glass-card-border: rgba(255, 255, 255, 0.3); --mdb-glass-card-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08); /* Text colors */ --mdb-color-text: #1e293b; --mdb-color-text-secondary: #64748b; --mdb-color-text-muted: #94a3b8; --mdb-color-text-inverse: #ffffff; /* Borders */ --mdb-color-border: #e2e8f0; --mdb-color-border-hover: #cbd5e1; --mdb-color-border-focus: var(--mdb-color-primary); /* ======================================== STATUS COLORS (Job/Task states) ======================================== */ --mdb-status-draft: #94a3b8; --mdb-status-draft-bg: #f1f5f9; --mdb-status-ready: #3b82f6; --mdb-status-ready-bg: #dbeafe; --mdb-status-in-progress: #f59e0b; --mdb-status-in-progress-bg: #fef3c7; --mdb-status-review: #8b5cf6; --mdb-status-review-bg: #f3e8ff; --mdb-status-completed: #22c55e; --mdb-status-completed-bg: #dcfce7; --mdb-status-blocked: #ef4444; --mdb-status-blocked-bg: #fee2e2; --mdb-status-cancelled: #6b7280; --mdb-status-cancelled-bg: #f3f4f6; /* Health/valence status (dashboard) */ --mdb-status-healthy: #4caf50; --mdb-status-degraded: #ff9800; --mdb-status-unhealthy: #f44336; /* ======================================== PRIORITY COLORS ======================================== */ --mdb-priority-low: #94a3b8; --mdb-priority-normal: #3b82f6; --mdb-priority-high: #f59e0b; --mdb-priority-urgent: #ef4444; /* ======================================== SPACING SCALE ======================================== */ --mdb-space-0: 0; --mdb-space-1: 0.25rem; /* 4px */ --mdb-space-2: 0.32rem; /* ~5px - compact control padding */ --mdb-space-3: 0.75rem; /* 12px */ --mdb-space-4: 1rem; /* 16px */ --mdb-space-5: 1.25rem; /* 20px */ --mdb-space-6: 1.5rem; /* 24px */ --mdb-space-8: 2rem; /* 32px */ --mdb-space-10: 2.5rem; /* 40px */ --mdb-space-12: 3rem; /* 48px */ --mdb-space-16: 4rem; /* 64px */ /* Semantic spacing aliases */ --mdb-space-xs: var(--mdb-space-1); --mdb-space-sm: var(--mdb-space-2); --mdb-space-md: var(--mdb-space-4); --mdb-space-lg: var(--mdb-space-6); --mdb-space-xl: var(--mdb-space-8); --mdb-space-2xl: var(--mdb-space-12); /* ======================================== TYPOGRAPHY ======================================== */ --mdb-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mdb-font-mono: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* Font sizes */ --mdb-text-xs: 0.75rem; /* 12px */ --mdb-text-sm: 0.875rem; /* 14px */ --mdb-text-base: 1rem; /* 16px */ --mdb-text-lg: 1.125rem; /* 18px */ --mdb-text-xl: 1.25rem; /* 20px */ --mdb-text-2xl: 1.5rem; /* 24px */ --mdb-text-3xl: 1.875rem; /* 30px */ /* Line heights */ --mdb-leading-none: 1; --mdb-leading-tight: 1.25; --mdb-leading-snug: 1.375; --mdb-leading-normal: 1.5; --mdb-leading-relaxed: 1.625; /* Font weights */ --mdb-font-normal: 400; --mdb-font-medium: 500; --mdb-font-semibold: 600; --mdb-font-bold: 700; /* ======================================== BORDERS & RADIUS ======================================== */ --mdb-radius-none: 0; --mdb-radius-xs: 0.125rem; /* 2px */ --mdb-radius-sm: 0.25rem; /* 4px */ --mdb-radius-md: 0.375rem; /* 6px */ --mdb-radius-lg: 0.5rem; /* 8px */ --mdb-radius-xl: 0.75rem; /* 12px */ --mdb-radius-2xl: 1rem; /* 16px */ --mdb-radius-full: 9999px; --mdb-border-width: 1px; --mdb-border-width-thick: 2px; /* ======================================== SHADOWS ======================================== */ --mdb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --mdb-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06); --mdb-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); --mdb-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04); --mdb-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06); /* Focus ring */ --mdb-ring-color: var(--mdb-color-primary); --mdb-ring-offset: 2px; --mdb-ring-width: 2px; /* ======================================== TRANSITIONS ======================================== */ --mdb-transition-fast: 100ms ease; --mdb-transition-normal: 150ms ease; --mdb-transition-slow: 250ms ease; --mdb-transition-colors: color 150ms ease, background-color 150ms ease, border-color 150ms ease; /* ======================================== Z-INDEX SCALE ======================================== */ --mdb-z-base: 0; --mdb-z-dropdown: 100; --mdb-z-sticky: 200; --mdb-z-modal-backdrop: 900; --mdb-z-modal: 1000; --mdb-z-popover: 1100; --mdb-z-tooltip: 1200; --mdb-z-toast: 1300; /* ======================================== COMPONENT-SPECIFIC TOKENS ======================================== */ /* Cards */ --mdb-card-bg: var(--mdb-color-bg); --mdb-card-border: var(--mdb-color-border); --mdb-card-radius: var(--mdb-radius-lg); --mdb-card-padding: var(--mdb-space-4); --mdb-card-shadow: var(--mdb-shadow-sm); --mdb-card-shadow-hover: var(--mdb-shadow-md); /* Buttons */ --mdb-btn-height-sm: 1.75rem; --mdb-btn-height-md: 2.25rem; --mdb-btn-height-lg: 2.75rem; --mdb-btn-padding-x: var(--mdb-space-3); --mdb-btn-radius: var(--mdb-radius-md); /* Inputs */ --mdb-input-height: 2.25rem; --mdb-input-padding-x: var(--mdb-space-3); --mdb-input-border: var(--mdb-color-border); --mdb-input-bg: var(--mdb-color-bg); --mdb-input-radius: var(--mdb-radius-md); /* Sidebar */ --mdb-sidebar-width: 280px; --mdb-sidebar-width-collapsed: 60px; --mdb-sidebar-bg: var(--mdb-color-bg-secondary); /* Header */ --mdb-header-height: 2.5rem; /* 40px */ --mdb-header-bg: #1e1e1e; } /* ======================================== DARK THEME ======================================== */ [data-theme="dark"], :root:has([data-theme="dark"]) { /* Backgrounds - dark equivalents from dashboard */ --mdb-color-bg: #2d2d2d; --mdb-color-bg-secondary: #292929; --mdb-color-bg-tertiary: #3a3a3a; --mdb-color-bg-elevated: #333333; --mdb-color-bg-overlay: rgba(0, 0, 0, 0.75); /* Blur overlay for dark theme */ --mdb-blur-overlay-color: rgba(0, 0, 0, 0.25); /* Glass overlay — dark */ --mdb-glass-overlay-brightness: 0.8; --mdb-glass-overlay-tint: rgba(0, 0, 0, 0.4); /* Glass card — dark */ --mdb-glass-card-bg: rgba(30, 30, 30, 0.75); --mdb-glass-card-border: rgba(255, 255, 255, 0.08); --mdb-glass-card-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); /* Text */ --mdb-color-text: #e0e0e0; --mdb-color-text-secondary: #b0b0b0; --mdb-color-text-muted: #888888; --mdb-color-text-inverse: #1e1e1e; /* Borders */ --mdb-color-border: #3a3a3a; --mdb-color-border-hover: #4a4a4a; /* Adjusted primary for dark */ --mdb-color-primary: #4a90d9; --mdb-color-primary-hover: #5a9fe8; --mdb-color-primary-subtle: #1a3a5a; /* Semantic colors - darker backgrounds */ --mdb-color-success-subtle: #1a3a2a; --mdb-color-warning-subtle: #3a2a1a; --mdb-color-error-subtle: #3a1a1a; --mdb-color-info-subtle: #1a2a3a; /* Status backgrounds for dark */ --mdb-status-draft-bg: #2d2d2d; --mdb-status-ready-bg: #1a2a4a; --mdb-status-in-progress-bg: #3a2a1a; --mdb-status-review-bg: #2a1a3a; --mdb-status-completed-bg: #1a3a2a; --mdb-status-blocked-bg: #3a1a1a; --mdb-status-cancelled-bg: #2d2d2d; /* Shadows for dark theme */ --mdb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --mdb-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3); --mdb-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4); --mdb-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5); /* Component overrides */ --mdb-card-bg: #2d2d2d; --mdb-card-border: #3a3a3a; --mdb-sidebar-bg: #252525; --mdb-header-bg: #1e1e1e; --mdb-input-bg: #2d2d2d; --mdb-input-border: #4a4a4a; } /* Auto dark theme from system preference */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mdb-color-bg: #2d2d2d; --mdb-color-bg-secondary: #292929; --mdb-color-bg-tertiary: #3a3a3a; --mdb-color-bg-elevated: #333333; --mdb-color-bg-overlay: rgba(0, 0, 0, 0.75); /* Blur overlay for dark theme */ --mdb-blur-overlay-color: rgba(0, 0, 0, 0.25); /* Glass overlay — dark */ --mdb-glass-overlay-brightness: 0.8; --mdb-glass-overlay-tint: rgba(0, 0, 0, 0.4); /* Glass card — dark */ --mdb-glass-card-bg: rgba(30, 30, 30, 0.75); --mdb-glass-card-border: rgba(255, 255, 255, 0.08); --mdb-glass-card-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); --mdb-color-text: #e0e0e0; --mdb-color-text-secondary: #b0b0b0; --mdb-color-text-muted: #888888; --mdb-color-text-inverse: #1e1e1e; --mdb-color-border: #3a3a3a; --mdb-color-border-hover: #4a4a4a; --mdb-color-primary: #4a90d9; --mdb-color-primary-hover: #5a9fe8; --mdb-color-primary-subtle: #1a3a5a; --mdb-color-success-subtle: #1a3a2a; --mdb-color-warning-subtle: #3a2a1a; --mdb-color-error-subtle: #3a1a1a; --mdb-color-info-subtle: #1a2a3a; --mdb-status-draft-bg: #2d2d2d; --mdb-status-ready-bg: #1a2a4a; --mdb-status-in-progress-bg: #3a2a1a; --mdb-status-review-bg: #2a1a3a; --mdb-status-completed-bg: #1a3a2a; --mdb-status-blocked-bg: #3a1a1a; --mdb-status-cancelled-bg: #2d2d2d; --mdb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --mdb-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3); --mdb-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4); --mdb-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5); --mdb-card-bg: #2d2d2d; --mdb-card-border: #3a3a3a; --mdb-sidebar-bg: #252525; --mdb-header-bg: #1e1e1e; --mdb-input-bg: #2d2d2d; --mdb-input-border: #4a4a4a; } } /* ======================================== UTILITY CLASSES (optional) ======================================== */ /* Focus visible ring */ .mdb-focus-ring:focus-visible { outline: none; box-shadow: 0 0 0 var(--mdb-ring-offset) var(--mdb-color-bg), 0 0 0 calc(var(--mdb-ring-offset) + var(--mdb-ring-width)) var(--mdb-ring-color); } /* Status badge utility */ .mdb-status-badge { display: inline-flex; align-items: center; padding: var(--mdb-space-1) var(--mdb-space-2); border-radius: var(--mdb-radius-full); font-size: var(--mdb-text-xs); font-weight: var(--mdb-font-medium); } .mdb-status-badge[data-status="draft"] { background: var(--mdb-status-draft-bg); color: var(--mdb-status-draft); } .mdb-status-badge[data-status="ready"] { background: var(--mdb-status-ready-bg); color: var(--mdb-status-ready); } .mdb-status-badge[data-status="in_progress"], .mdb-status-badge[data-status="in-progress"] { background: var(--mdb-status-in-progress-bg); color: var(--mdb-status-in-progress); } .mdb-status-badge[data-status="review"] { background: var(--mdb-status-review-bg); color: var(--mdb-status-review); } .mdb-status-badge[data-status="completed"] { background: var(--mdb-status-completed-bg); color: var(--mdb-status-completed); } .mdb-status-badge[data-status="blocked"] { background: var(--mdb-status-blocked-bg); color: var(--mdb-status-blocked); } /* Health status badges (dashboard) */ .mdb-health-badge { padding: var(--mdb-space-2) var(--mdb-space-4); border-radius: var(--mdb-radius-full); font-weight: var(--mdb-font-bold); font-size: var(--mdb-text-sm); color: white; } .mdb-health-badge[data-status="healthy"] { background: var(--mdb-status-healthy); } .mdb-health-badge[data-status="degraded"] { background: var(--mdb-status-degraded); } .mdb-health-badge[data-status="unhealthy"] { background: var(--mdb-status-unhealthy); }