mirror of
https://github.com/smittix/intercept.git
synced 2026-04-24 22:59:59 -07:00
38644bced6
Add theme-aware severity/neon CSS variables and replace hardcoded hex colors (#fff, #000, #00ff88, #ffcc00, etc.) with var() references across 26 files so text remains readable in both dark and light themes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
251 lines
8.6 KiB
CSS
251 lines
8.6 KiB
CSS
/**
|
|
* INTERCEPT Design Tokens
|
|
* Single source of truth for colors, spacing, typography, and effects
|
|
* Import this file FIRST in any stylesheet that needs design tokens
|
|
*/
|
|
|
|
:root {
|
|
/* ============================================
|
|
COLOR PALETTE - Dark Theme (Default)
|
|
============================================ */
|
|
|
|
/* Backgrounds - layered depth system */
|
|
--bg-primary: #0b1118;
|
|
--bg-secondary: #101823;
|
|
--bg-tertiary: #151f2b;
|
|
--bg-card: #121a25;
|
|
--bg-elevated: #1b2734;
|
|
--bg-overlay: rgba(8, 13, 20, 0.75);
|
|
--surface-glass: rgba(16, 25, 37, 0.82);
|
|
--surface-panel-gradient: linear-gradient(160deg, rgba(20, 32, 47, 0.94) 0%, rgba(11, 18, 27, 0.96) 100%);
|
|
--ambient-top-left: rgba(74, 163, 255, 0.14);
|
|
--ambient-top-right: rgba(56, 193, 128, 0.09);
|
|
--ambient-bottom: rgba(214, 168, 94, 0.06);
|
|
|
|
/* Background aliases for components */
|
|
--bg-dark: var(--bg-primary);
|
|
--bg-panel: var(--bg-secondary);
|
|
|
|
/* Accent colors */
|
|
--accent-cyan: #4aa3ff;
|
|
--accent-cyan-dim: rgba(74, 163, 255, 0.16);
|
|
--accent-cyan-hover: #6bb3ff;
|
|
--accent-green: #38c180;
|
|
--accent-green-dim: rgba(56, 193, 128, 0.18);
|
|
--accent-red: #e25d5d;
|
|
--accent-red-dim: rgba(226, 93, 93, 0.16);
|
|
--accent-orange: #d6a85e;
|
|
--accent-orange-dim: rgba(214, 168, 94, 0.16);
|
|
--accent-amber: #d6a85e;
|
|
--accent-amber-dim: rgba(214, 168, 94, 0.18);
|
|
--accent-yellow: #e1c26b;
|
|
--accent-purple: #8f7bd6;
|
|
|
|
/* Text hierarchy */
|
|
--text-primary: #d7e0ee;
|
|
--text-secondary: #9fb0c7;
|
|
--text-dim: #6f7f94;
|
|
--text-muted: #445266;
|
|
--text-inverse: #0b1118;
|
|
|
|
/* Borders */
|
|
--border-color: #263246;
|
|
--border-light: #354458;
|
|
--border-glow: rgba(74, 163, 255, 0.25);
|
|
--border-focus: var(--accent-cyan);
|
|
|
|
/* Status colors */
|
|
--status-online: #38c180;
|
|
--status-warning: #d6a85e;
|
|
--status-error: #e25d5d;
|
|
--status-offline: #6f7f94;
|
|
--status-info: #4aa3ff;
|
|
|
|
/* Severity colors */
|
|
--severity-critical: #ff3366;
|
|
--severity-high: #ff9933;
|
|
--severity-medium: #ffcc00;
|
|
--severity-low: #00ff88;
|
|
|
|
/* Data visualization neon colors */
|
|
--neon-green: #00ff88;
|
|
--neon-yellow: #ffcc00;
|
|
--neon-orange: #ff8800;
|
|
--neon-red: #ff3366;
|
|
|
|
/* Subtle grid/pattern */
|
|
--grid-line: rgba(74, 163, 255, 0.1);
|
|
--grid-dot: rgba(255, 255, 255, 0.03);
|
|
--noise-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3E%3Cg%20fill='%23ffffff'%20fill-opacity='0.05'%3E%3Ccircle%20cx='3'%20cy='5'%20r='1'/%3E%3Ccircle%20cx='11'%20cy='9'%20r='1'/%3E%3Ccircle%20cx='18'%20cy='3'%20r='1'/%3E%3Ccircle%20cx='26'%20cy='12'%20r='1'/%3E%3Ccircle%20cx='34'%20cy='6'%20r='1'/%3E%3Ccircle%20cx='7'%20cy='19'%20r='1'/%3E%3Ccircle%20cx='15'%20cy='24'%20r='1'/%3E%3Ccircle%20cx='28'%20cy='22'%20r='1'/%3E%3Ccircle%20cx='36'%20cy='18'%20r='1'/%3E%3Ccircle%20cx='5'%20cy='33'%20r='1'/%3E%3Ccircle%20cx='19'%20cy='32'%20r='1'/%3E%3Ccircle%20cx='31'%20cy='34'%20r='1'/%3E%3C/g%3E%3C/svg%3E");
|
|
|
|
/* ============================================
|
|
SPACING SCALE
|
|
============================================ */
|
|
--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;
|
|
|
|
/* ============================================
|
|
TYPOGRAPHY
|
|
============================================ */
|
|
--font-sans: 'Roboto Condensed', 'Arial Narrow', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
--font-mono: 'Roboto Condensed', 'Arial Narrow', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
|
|
/* Font sizes */
|
|
--text-xs: 10px;
|
|
--text-sm: 12px;
|
|
--text-base: 14px;
|
|
--text-lg: 16px;
|
|
--text-xl: 18px;
|
|
--text-2xl: 20px;
|
|
--text-3xl: 24px;
|
|
--text-4xl: 30px;
|
|
|
|
/* Font weights */
|
|
--font-normal: 400;
|
|
--font-medium: 500;
|
|
--font-semibold: 600;
|
|
--font-bold: 700;
|
|
|
|
/* Line heights */
|
|
--leading-tight: 1.25;
|
|
--leading-normal: 1.5;
|
|
--leading-relaxed: 1.75;
|
|
|
|
/* ============================================
|
|
BORDERS & RADIUS
|
|
============================================ */
|
|
--radius-sm: 3px;
|
|
--radius-md: 4px;
|
|
--radius-lg: 6px;
|
|
--radius-xl: 8px;
|
|
--radius-full: 9999px;
|
|
|
|
/* ============================================
|
|
SHADOWS
|
|
============================================ */
|
|
--shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.35);
|
|
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35);
|
|
--shadow-lg: 0 12px 18px rgba(0, 0, 0, 0.45);
|
|
--shadow-glow: 0 0 18px rgba(74, 163, 255, 0.16);
|
|
|
|
/* ============================================
|
|
TRANSITIONS
|
|
============================================ */
|
|
--transition-fast: 150ms ease;
|
|
--transition-base: 200ms ease;
|
|
--transition-slow: 300ms ease;
|
|
|
|
/* ============================================
|
|
Z-INDEX SCALE
|
|
============================================ */
|
|
--z-base: 0;
|
|
--z-dropdown: 100;
|
|
--z-sticky: 200;
|
|
--z-fixed: 300;
|
|
--z-modal-backdrop: 400;
|
|
--z-modal: 500;
|
|
--z-toast: 600;
|
|
--z-tooltip: 700;
|
|
|
|
/* ============================================
|
|
LAYOUT
|
|
============================================ */
|
|
--header-height: 60px;
|
|
--nav-height: 44px;
|
|
--sidebar-width: 280px;
|
|
--stats-strip-height: 36px;
|
|
--content-max-width: 1400px;
|
|
}
|
|
|
|
/* ============================================
|
|
LIGHT THEME OVERRIDES
|
|
============================================ */
|
|
[data-theme="light"] {
|
|
--bg-primary: #f4f7fb;
|
|
--bg-secondary: #e9eef5;
|
|
--bg-tertiary: #dde5f0;
|
|
--bg-card: #ffffff;
|
|
--bg-elevated: #f1f4f9;
|
|
--bg-overlay: rgba(244, 247, 251, 0.92);
|
|
--surface-glass: rgba(255, 255, 255, 0.84);
|
|
--surface-panel-gradient: linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 245, 251, 0.97) 100%);
|
|
--ambient-top-left: rgba(31, 95, 168, 0.1);
|
|
--ambient-top-right: rgba(31, 138, 87, 0.06);
|
|
--ambient-bottom: rgba(181, 134, 58, 0.05);
|
|
|
|
/* Background aliases for components */
|
|
--bg-dark: var(--bg-primary);
|
|
--bg-panel: var(--bg-secondary);
|
|
|
|
--accent-cyan: #1f5fa8;
|
|
--accent-cyan-dim: rgba(31, 95, 168, 0.12);
|
|
--accent-cyan-hover: #2c73bf;
|
|
--accent-green: #1f8a57;
|
|
--accent-green-dim: rgba(31, 138, 87, 0.12);
|
|
--accent-red: #c74444;
|
|
--accent-red-dim: rgba(199, 68, 68, 0.12);
|
|
--accent-orange: #b5863a;
|
|
--accent-orange-dim: rgba(181, 134, 58, 0.12);
|
|
--accent-amber: #b5863a;
|
|
--accent-amber-dim: rgba(181, 134, 58, 0.12);
|
|
--accent-yellow: #9a8420;
|
|
--accent-purple: #6b5ba8;
|
|
|
|
/* Status colors - light theme */
|
|
--status-online: #1f8a57;
|
|
--status-warning: #b5863a;
|
|
--status-error: #c74444;
|
|
--status-offline: #6b7c93;
|
|
--status-info: #1f5fa8;
|
|
|
|
/* Severity colors */
|
|
--severity-critical: #c74444;
|
|
--severity-high: #b5863a;
|
|
--severity-medium: #9a8420;
|
|
--severity-low: #1f8a57;
|
|
|
|
/* Data visualization neon replacements */
|
|
--neon-green: #1a8a50;
|
|
--neon-yellow: #9a8420;
|
|
--neon-orange: #b5863a;
|
|
--neon-red: #c74444;
|
|
|
|
--text-primary: #122034;
|
|
--text-secondary: #3a4a5f;
|
|
--text-dim: #6b7c93;
|
|
--text-muted: #aab6c8;
|
|
--text-inverse: #f4f7fb;
|
|
|
|
--border-color: #d1d9e6;
|
|
--border-light: #c1ccdb;
|
|
--border-glow: rgba(31, 95, 168, 0.12);
|
|
|
|
--grid-line: rgba(31, 95, 168, 0.14);
|
|
--grid-dot: rgba(12, 18, 24, 0.06);
|
|
--noise-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3E%3Cg%20fill='%23000000'%20fill-opacity='0.05'%3E%3Ccircle%20cx='3'%20cy='5'%20r='1'/%3E%3Ccircle%20cx='11'%20cy='9'%20r='1'/%3E%3Ccircle%20cx='18'%20cy='3'%20r='1'/%3E%3Ccircle%20cx='26'%20cy='12'%20r='1'/%3E%3Ccircle%20cx='34'%20cy='6'%20r='1'/%3E%3Ccircle%20cx='7'%20cy='19'%20r='1'/%3E%3Ccircle%20cx='15'%20cy='24'%20r='1'/%3E%3Ccircle%20cx='28'%20cy='22'%20r='1'/%3E%3Ccircle%20cx='36'%20cy='18'%20r='1'/%3E%3Ccircle%20cx='5'%20cy='33'%20r='1'/%3E%3Ccircle%20cx='19'%20cy='32'%20r='1'/%3E%3Ccircle%20cx='31'%20cy='34'%20r='1'/%3E%3C/g%3E%3C/svg%3E");
|
|
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
|
|
--shadow-glow: 0 0 18px rgba(31, 95, 168, 0.1);
|
|
}
|
|
|
|
/* ============================================
|
|
REDUCED MOTION
|
|
============================================ */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
:root {
|
|
--transition-fast: 0ms;
|
|
--transition-base: 0ms;
|
|
--transition-slow: 0ms;
|
|
}
|
|
}
|