276 lines
8.7 KiB
CSS
276 lines
8.7 KiB
CSS
:root {
|
|
/* =========================================
|
|
1. PRIMITIVES
|
|
Define base color palette for the theme.
|
|
========================================= */
|
|
|
|
/* --- ORACLE PALETTE (The Truth) --- */
|
|
--palette-oracle-red: #C74634;
|
|
|
|
/* Slates (Teal/Greys) - Used for Surfaces & Borders */
|
|
--palette-slate-50-1: #C2D4D4;
|
|
/* Lightest Teal */
|
|
--palette-slate-50-2: #A0BBBB;
|
|
--palette-slate-50-3: #85A8A8;
|
|
--palette-slate-50-4: #6A9595;
|
|
/* Vibrant Teal */
|
|
|
|
--palette-slate-100-1: #697778;
|
|
/* Mid Grey */
|
|
--palette-slate-100-2: #778788;
|
|
--palette-slate-100-3: #8F9D9E;
|
|
--palette-slate-100-4: #A8B2B3;
|
|
|
|
--palette-slate-150-1: #3C4545;
|
|
/* Card Surface */
|
|
--palette-slate-150-2: #4C5757;
|
|
/* Card Hover */
|
|
--palette-slate-150-3: #617070;
|
|
--palette-slate-150-4: #778888;
|
|
|
|
--palette-slate-200-1: #2B3333;
|
|
/* Background Root */
|
|
--palette-slate-200-2: #4C5757;
|
|
--palette-slate-200-3: #617070;
|
|
--palette-slate-200-4: #778888;
|
|
|
|
/* Warm Neutrals - Used for Text */
|
|
--palette-neutral-30-1: #F1EFED;
|
|
/* Main Text */
|
|
--palette-neutral-30-2: #DED9D4;
|
|
/* Secondary Text */
|
|
--palette-neutral-30-3: #CAC2BB;
|
|
/* Disabled Text */
|
|
--palette-neutral-30-4: #B6ACA2;
|
|
|
|
/* Standard Colors */
|
|
--white: #FFFFFF;
|
|
--black: #1A1A1A;
|
|
/* Never use pure #000000 in dark mode */
|
|
|
|
/* --- REFACTORED NEUTRALS (Mapped to Palette) --- */
|
|
/* We replace the random greys with your Slate Palette */
|
|
--neutral-10: var(--palette-slate-150-1);
|
|
/* Darkest */
|
|
--neutral-20: var(--palette-slate-150-2);
|
|
--neutral-30: var(--palette-slate-150-3);
|
|
--neutral-40: var(--palette-slate-100-1);
|
|
--neutral-50: var(--palette-slate-100-2);
|
|
/* Borders */
|
|
--neutral-60: var(--palette-slate-100-4);
|
|
--neutral-70: var(--palette-slate-50-4);
|
|
--neutral-80: var(--palette-slate-50-2);
|
|
--neutral-90: var(--palette-neutral-30-2);
|
|
--neutral-100: var(--palette-neutral-30-1);
|
|
/* Lightest */
|
|
|
|
|
|
/* =========================================
|
|
2. FUNCTIONAL
|
|
========================================= */
|
|
|
|
/* Alarm colors */
|
|
--alarm-critical: #D32F2F;
|
|
--alarm-high: #F57C00;
|
|
--alarm-medium: #FBC02D;
|
|
--alarm-low: #0288D1;
|
|
--alarm-info: #70539B;
|
|
|
|
/* One Line & HP (High Performance) */
|
|
--oneline-green: #8fca94;
|
|
--oneline-yellow: #f4b834;
|
|
--oneline-red: #e23030;
|
|
--oneline-gray: var(--palette-slate-100-2);
|
|
|
|
--high-performance-white: var(--white);
|
|
--high-performance-gray: var(--palette-slate-100-1);
|
|
--high-performance-red: var(--oneline-red);
|
|
--high-performance-blue: #a9d9ff;
|
|
--high-performance-purple: #7266b7;
|
|
--high-performance-green: var(--oneline-green);
|
|
--high-performance-yellow: var(--oneline-yellow);
|
|
|
|
/* Functional Status */
|
|
--error: var(--alarm-critical);
|
|
--info: #5691F0;
|
|
--info-secondary: #114599;
|
|
--warning: var(--alarm-medium);
|
|
--warning-secondary: #693D07;
|
|
--success: var(--oneline-green);
|
|
|
|
/* =========================================
|
|
3. OBJECTS
|
|
========================================= */
|
|
|
|
/* Containers & Surfaces */
|
|
--container-root: var(--palette-slate-200-1);
|
|
/* The deep floor */
|
|
--container: var(--palette-slate-150-1);
|
|
/* The card surface */
|
|
--container-nested: var(--palette-slate-150-2);
|
|
/* Slightly lighter */
|
|
|
|
/* Inputs (Mapped to Slate) */
|
|
--input: var(--palette-slate-200-1);
|
|
/* Dark input background */
|
|
--input-disabled: var(--palette-slate-150-3);
|
|
|
|
/* Icons & Labels */
|
|
--icon: var(--palette-neutral-30-3);
|
|
--icon-hover: var(--white);
|
|
--icon-disabled: var(--palette-slate-100-1);
|
|
--icon-selected: var(--palette-oracle-red);
|
|
/* Brand Pop */
|
|
|
|
--label: var(--palette-neutral-30-1);
|
|
--label-disabled: var(--palette-slate-100-2);
|
|
|
|
/* Borders (Mapped to Slate) */
|
|
--border: var(--palette-slate-100-1);
|
|
--border-disabled: var(--palette-slate-150-3);
|
|
--container-border: 1px solid rgba(255, 255, 255, 0.1);
|
|
/* Glass Edge */
|
|
|
|
/* --- REFACTORED BOX SHADOWS (Smooth Curve) --- */
|
|
/* Level 1: Subtle lift (Buttons, Inputs) */
|
|
--box-shadow-1: 0 2px 4px rgba(0, 0, 0, 0.4);
|
|
|
|
/* Level 2: Standard Card (Resting state) */
|
|
--box-shadow-2: 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
|
|
/* Level 3: Hover State / Dropdowns */
|
|
--box-shadow-3: 0 8px 16px rgba(0, 0, 0, 0.6);
|
|
|
|
/* Level 4: Modals / Drawers (High Lift) */
|
|
--box-shadow-4: 0 16px 24px rgba(0, 0, 0, 0.65);
|
|
|
|
/* Level 5: Critical Alerts (Floating high) */
|
|
--box-shadow-5: 0 24px 48px rgba(0, 0, 0, 0.75);
|
|
|
|
--box-shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
/* --- Data Grids / Tables --- */
|
|
--table-header-bg: var(--palette-slate-150-3);
|
|
--table-header-text: var(--palette-neutral-30-1);
|
|
--table-row-bg: var(--palette-slate-150-1);
|
|
--table-row-alt-bg: rgba(255, 255, 255, 0.03);
|
|
/* Subtle Transparency for stripe */
|
|
--table-row-hover: var(--palette-slate-150-2);
|
|
--table-border: var(--palette-slate-100-1);
|
|
|
|
/* --- Typography --- */
|
|
--text-color: var(--palette-neutral-30-1);
|
|
--text-muted: var(--palette-neutral-30-3);
|
|
/* --- Typography Scale --- */
|
|
--text-xs: 0.75rem;
|
|
/* 12px - Labels */
|
|
--text-sm: 0.875rem;
|
|
/* 14px - Body text */
|
|
--text-md: 1rem;
|
|
/* 16px - Standard values */
|
|
--text-lg: 1.25rem;
|
|
/* 20px - Sub-headers */
|
|
--text-xl: 1.5rem;
|
|
/* 24px - Headers */
|
|
--text-2xl: 2rem;
|
|
|
|
/* Weights */
|
|
--weight-light: 300;
|
|
--weight-reg: 400;
|
|
--weight-bold: 700;
|
|
--font-NotoSans: 'Nunito Sans', -apple-system, sans-serif;
|
|
|
|
/* --- ACTIONS (Consolidated) --- */
|
|
/* We use the Oracle Red for Primary Actions, or Slate-50-4 for Secondary */
|
|
--call-to-action: var(--palette-slate-50-4);
|
|
--call-to-action-highlight: #5A8585;
|
|
/* Lighter Red */
|
|
--call-to-action-hover: #4A7575;
|
|
/* Darker Red */
|
|
--call-to-action-disabled: var(--palette-slate-100-1);
|
|
/* DESTRUCTIVE: Keep Oracle Red ONLY for dangerous actions */
|
|
--destructive: var(--palette-slate-50-4);
|
|
--destructive-hover: #4A7575;
|
|
|
|
/* SECONDARY: Neutral (Ghost style) */
|
|
--secondary-action: transparent;
|
|
--secondary-action-border: var(--palette-slate-100-2);
|
|
--secondary-action-text: var(--palette-neutral-30-1);
|
|
/* Checkbox / Radio */
|
|
--checkbox--checked: var(--palette-slate-50-4);
|
|
/* Teal check is safer than Red */
|
|
--checkbox--unchecked: var(--border);
|
|
--checkbox--disabled: var(--input-disabled);
|
|
|
|
--toggleSwitch--selected: var(--palette-slate-50-4);
|
|
/* Teal */
|
|
--toggleSwitch--unselected: var(--palette-slate-150-3);
|
|
/* Border Radius */
|
|
--border-radius: 4px;
|
|
--border-radius-input: 2px;
|
|
|
|
/* Opacity */
|
|
--opacity-25: rgba(0, 0, 0, 0.25);
|
|
--opacity-50: rgba(0, 0, 0, 0.50);
|
|
--opacity-85: rgba(0, 0, 0, 0.85);
|
|
|
|
/* Typography */
|
|
--font-NotoSans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
|
|
|
/* Checkbox */
|
|
--checkbox--checked: var(--call-to-action);
|
|
--checkbox--unchecked: var(--border);
|
|
--checkbox--indeterminate: var(--call-to-action);
|
|
--checkbox--disabled: var(--input-disabled);
|
|
|
|
/* Progress Bar */
|
|
--progressLinearTrack--determinate: var(--neutral-10);
|
|
--progressLinearTrack--indeterminate: var(--neutral-10);
|
|
--progressLinearBar--determinate: var(--info-secondary);
|
|
--progressLinearBar--indeterminate: var(--border);
|
|
|
|
/* Toggle Switch */
|
|
--toggleSwitch--selected: var(--call-to-action);
|
|
--toggleSwitch--unselected: var(--neutral-10);
|
|
|
|
/* Radio */
|
|
--radio--selected: var(--call-to-action);
|
|
--radio--unselected: var(--border);
|
|
--radio--disabled: var(--input-disabled);
|
|
|
|
/* Piping */
|
|
--pipePrimaryFill: var(--neutral-20);
|
|
--pipeSecondaryFill: #5a5a5a;
|
|
--pipeStroke: var(--neutral-70);
|
|
--pipeSelectStroke: var(--call-to-action);
|
|
|
|
/* Component Context Menu */
|
|
--contextBackground: var(--black);
|
|
|
|
/* Symbols */
|
|
--symbolFill--default: var(--neutral-20);
|
|
--symbolStroke--default: var(--neutral-70);
|
|
--symbolFillAnimation--default: var(--neutral-80);
|
|
--symbolFill--running: var(--neutral-50);
|
|
--symbolFillAnimation--running: var(--neutral-80);
|
|
--symbolStroke--running: var(--neutral-70);
|
|
--symbolFill--stopped: var(--black);
|
|
--symbolStroke--stopped: var(--neutral-70);
|
|
--symbolFill--faulted: #8F0E0E;
|
|
--symbolStroke--faulted: #FA8E8E;
|
|
|
|
/* --- LAYERS --- */
|
|
--z-background: -1;
|
|
--z-card: 10;
|
|
--z-header: 100;
|
|
--z-popup: 500;
|
|
--z-alarm-banner: 1000;
|
|
--z-tooltip: 2000;
|
|
/* Spacing Scale */
|
|
--space-xs: 4px;
|
|
--space-sm: 8px;
|
|
--space-md: 16px;
|
|
--space-lg: 24px;
|
|
--space-xl: 32px;
|
|
} |