mirror of
https://github.com/smittix/intercept.git
synced 2026-04-25 07:10:00 -07:00
5e9fcc5c49
Replace IBM Plex Mono, Space Mono, and JetBrains Mono with Roboto Condensed across all CSS variables, inline styles, canvas ctx.font references, and Google Fonts CDN links. Updates 28 files covering templates, stylesheets, and JS modules for consistent typography. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
208 lines
7.2 KiB
CSS
208 lines
7.2 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);
|
|
|
|
/* 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;
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
|
|
--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;
|
|
}
|
|
}
|