Series: Gestalt Color System - Core and Flow
Copy
╔═══════════════════════════════════════════════════════════════════════════════╗
║ ║
║ CSS VARIABLE ARCHITECTURE ║
║ ║
║ 4-Level Hierarchy: From Primitive to Context ║
║ Establishing the Foundation for Core & Flow System ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
The SMPC Color Architecture
Understanding the Hierarchical Structure
The Monolex color system follows the SMPC (Simplicity is Managed Part Chaos) principle with a clear 4-level hierarchy. This structure provides the foundation for the Core and Flow naming convention.Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ SMPC 4-LEVEL COLOR HIERARCHY │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ LEVEL 4: CONTEXTUAL RELATIONSHIPS │
│ ─────────────────────────────────── │
│ │ --bg-primary-text │ Background-foreground pairs │
│ │ --bg-accent-success-text │ Text colors for semantic backgrounds │
│ │ --status-success-bg │ Status indicator backgrounds │
│ │ │
│ ├──────────────────┬────────────────────────────────────────────────────────────┤
│ │ References │
│ v │
│ LEVEL 3: COMPONENT COLORS │
│ ───────────────────────── │
│ │ --color-context-menu-bg │ Component-specific definitions │
│ │ --color-file-explorer-* │ File explorer specifics │
│ │ --dialog-shadow │ Dialog shadows │
│ │ │
│ ├──────────────────┬────────────────────────────────────────────────────────────┤
│ │ References │
│ v │
│ LEVEL 2: SEMANTIC COLORS │
│ ──────────────────────── │
│ │ --oklch-primary │ OKLCH Core Colors │
│ │ --oklch-success │ OKLCH Semantic Colors │
│ │ --oklch-primary-hover │ OKLAB Flow Colors (derived) │
│ │ --oklch-primary-muted │ OKLAB Flow Colors (derived) │
│ │ │
│ ├──────────────────┬────────────────────────────────────────────────────────────┤
│ │ References │
│ v │
│ LEVEL 1: PRIMITIVE COLORS │
│ ───────────────────────── │
│ │ --color-bg-primary │ Raw HEX values (#000000) │
│ │ --color-text-primary │ Raw color definitions │
│ │ --color-ansi-red │ ANSI terminal colors │
│ │ │
│ └─────────────────────────────────────────────────────────────────────────────┘
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Level 1: Primitive Colors
Raw Value Definitions
Level 1 represents the absolute foundation - raw color values that form the identity of the application. These are the “atomic” values from which everything else derives.Copy
/* LEVEL 1: Primitive Colors (Raw Values) */
/* Dark Theme (Default) */
:root {
/* Background Colors */
--color-bg-primary: #000000; /* Pure black */
--color-bg-secondary: #090e13; /* L=5.5% */
--color-bg-tertiary: #0b1117; /* L=7% */
--color-bg-hover: rgba(147, 161, 161, 0.08);
/* Text Colors */
--color-text-primary: #93a1a1;
--color-text-secondary: #657b83;
--color-text-tertiary: #586e75;
/* Terminal Colors - CRITICAL for xterm.js theme */
--color-terminal-bg: var(--color-bg-primary);
--color-terminal-fg: var(--color-text-primary);
--color-terminal-cursor: #b3c0c4;
--color-terminal-selection: rgba(22, 32, 42, 0.6);
/* Border Colors (Legacy HEX) */
--color-border-primary: #151d26;
--color-border-secondary: #1f2a35;
--color-border-light: #2a3540;
--color-border-subtle: rgba(255, 255, 255, 0.1);
/* Border Colors (OKLCH + color-mix, ACSS pattern) */
--oklch-border-dark: color-mix(in oklch, black 20%, transparent);
--oklch-border-light: color-mix(in oklch, white 20%, transparent);
--oklch-divider: color-mix(in oklch, var(--color-text-primary) 15%, transparent);
}
ANSI Terminal Colors
A special subset of Level 1 primitives - the 16 ANSI terminal colors that provide terminal identity:Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ ANSI COLOR MAPPING: 16-Color Palette │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ STANDARD COLORS (0-7) BRIGHT COLORS (8-15) │
│ ───────────────────── ──────────────────── │
│ │
│ 0: Black #586e75 8: Bright Black #657b83 │
│ 1: Red #c42e2b 9: Bright Red #b34114 │
│ 2: Green #7a8c00 10: Bright Green #586e75 │
│ 3: Yellow #a37a00 11: Bright Yellow #657b83 │
│ 4: Blue #2380c7 12: Bright Blue #839496 │
│ 5: Magenta #c13179 13: Bright Magenta #6169b8 │
│ 6: Cyan #26958c 14: Bright Cyan #93a1a1 │
│ 7: White #d7d2c3 15: Bright White #fdf6e3 │
│ │
│ These are CORE COLORS - they define terminal identity │
│ They should NOT be derived via color-mix() │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Level 2: Semantic Colors (OKLCH Core)
The Core Color Definitions
Level 2 introduces OKLCH - the perceptually uniform color space that defines our semantic color palette. These are the Core Colors of our system.Copy
/* LEVEL 2: Semantic Colors (OKLCH Primary) */
/* OKLCH: Lightness Chroma Hue */
/* Using OKLCH for perceptually uniform colors */
/* Primary Colors in OKLCH */
--oklch-primary: oklch(55% 0.15 230); /* Blue */
--oklch-success: oklch(55% 0.15 130); /* Green */
--oklch-danger: oklch(55% 0.18 25); /* Red */
--oklch-warning: oklch(65% 0.15 85); /* Yellow/Orange */
--oklch-info: oklch(55% 0.12 230); /* Blue (softer) */
/* Derived colors using color-mix() */
--oklch-primary-hover: color-mix(in oklch, var(--oklch-primary), white 15%);
--oklch-primary-muted: color-mix(in oklab, var(--oklch-primary), transparent 80%);
--oklch-success-hover: color-mix(in oklch, var(--oklch-success), white 15%);
--oklch-success-muted: color-mix(in oklab, var(--oklch-success), transparent 80%);
--oklch-danger-hover: color-mix(in oklch, var(--oklch-danger), white 15%);
--oklch-danger-muted: color-mix(in oklab, var(--oklch-danger), transparent 80%);
--oklch-warning-hover: color-mix(in oklch, var(--oklch-warning), white 10%);
--oklch-warning-muted: color-mix(in oklab, var(--oklch-warning), transparent 80%);
Core and Flow Pattern Emergence
This is where the Core and Flow pattern becomes visible:Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ CORE & FLOW PATTERN IN LEVEL 2 │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ CORE COLORS (OKLCH - Identity) │
│ ────────────────────────────── │
│ │
│ --oklch-primary: oklch(55% 0.15 230) <── CORE: Blue identity │
│ --oklch-success: oklch(55% 0.15 130) <── CORE: Green identity │
│ --oklch-danger: oklch(55% 0.18 25) <── CORE: Red identity │
│ --oklch-warning: oklch(65% 0.15 85) <── CORE: Yellow identity │
│ │
│ │ │
│ │ color-mix(in oklab, ...) │
│ │ color-mix(in oklch, ...) │
│ v │
│ │
│ FLOW COLORS (Derived - Transitions) │
│ ─────────────────────────────────── │
│ │
│ --oklch-primary-hover: color-mix(in oklch, var(--oklch-primary), white 15%) │
│ --oklch-primary-muted: color-mix(in oklab, var(--oklch-primary), transparent 80%)│
│ │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ KEY INSIGHT: │ │
│ │ │ │
│ │ * hover states use oklch for lightness adjustment │ │
│ │ * muted states use oklab for transparency (perceptual uniformity) │ │
│ │ │ │
│ │ "When Flow moves from Core to Core, OKLAB's straight-line │ │
│ │ interpolation prevents muddy transitions." │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
OKLCH Value Analysis
Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ OKLCH SEMANTIC COLOR BREAKDOWN │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Color │ L (%) │ C │ H (deg) │ Role │
│ ─────────────┼────────┼────────┼─────────┼──────────────────────────────────── │
│ primary │ 55 │ 0.15 │ 230 │ Actions, links, interactive │
│ success │ 55 │ 0.15 │ 130 │ Positive states, confirmations │
│ danger │ 55 │ 0.18 │ 25 │ Errors, destructive actions │
│ warning │ 65 │ 0.15 │ 85 │ Caution, attention needed │
│ info │ 55 │ 0.12 │ 230 │ Informational (lower chroma) │
│ │
│ OBSERVATIONS: │
│ ───────────── │
│ * L=55% is the default brightness for most semantic colors │
│ * warning uses L=65% for better visibility (yellow needs more lightness) │
│ * danger uses C=0.18 for higher saturation (attention-grabbing) │
│ * info uses C=0.12 for lower saturation (less prominent) │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Level 1 (Overlay): Flow Color Foundations
Overlay/Transparency System
The overlay system represents a special case of Level 1 colors that are inherently “Flow” in nature - they are always derived from base colors.Copy
/* LEVEL 1: Overlay/Transparency System */
/* Using color-mix() for perceptually accurate transparency (in oklab color space) */
/* Light overlays (using color-mix in oklab) */
--color-overlay-light-1: color-mix(in oklab, var(--color-text-primary), transparent 92%);
--color-overlay-light-2: color-mix(in oklab, var(--color-text-primary), transparent 88%);
--color-overlay-light-3: color-mix(in oklab, var(--color-text-primary), transparent 84%);
--color-overlay-light-4: color-mix(in oklab, var(--color-text-primary), transparent 80%);
/* Dark overlays (using color-mix in oklab) */
--color-overlay-dark-1: color-mix(in oklab, black, transparent 95%);
--color-overlay-dark-2: color-mix(in oklab, black, transparent 90%);
--color-overlay-dark-3: color-mix(in oklab, black, transparent 80%);
--color-overlay-dark-4: color-mix(in oklab, black, transparent 70%);
/* Legacy rgba fallbacks */
--color-overlay-light-1-fallback: rgba(147, 161, 161, 0.08);
--color-overlay-light-2-fallback: rgba(147, 161, 161, 0.12);
--color-overlay-dark-1-fallback: rgba(0, 0, 0, 0.05);
--color-overlay-dark-2-fallback: rgba(0, 0, 0, 0.1);
Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ OVERLAY SYSTEM: FLOW COLORS IN ACTION │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ LIGHT OVERLAYS (text-primary based) │
│ ─────────────────────────────────── │
│ │
│ #93a1a1 (text-primary) │
│ │ │
│ ├───> overlay-light-1: 8% opacity (92% transparent) │
│ ├───> overlay-light-2: 12% opacity (88% transparent) │
│ ├───> overlay-light-3: 16% opacity (84% transparent) │
│ └───> overlay-light-4: 20% opacity (80% transparent) │
│ │
│ Usage: hover states, subtle backgrounds, list item highlights │
│ │
│ DARK OVERLAYS (black based) │
│ ────────────────────────── │
│ │
│ #000000 (black) │
│ │ │
│ ├───> overlay-dark-1: 5% opacity (95% transparent) │
│ ├───> overlay-dark-2: 10% opacity (90% transparent) │
│ ├───> overlay-dark-3: 20% opacity (80% transparent) │
│ └───> overlay-dark-4: 30% opacity (70% transparent) │
│ │
│ Usage: shadows, dimming, modal backdrops │
│ │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ WHY OKLAB FOR OVERLAYS? │ │
│ │ │ │
│ │ OKLAB (not OKLCH) is used here because: │ │
│ │ * Transparency mixing requires perceptually uniform blending │ │
│ │ * OKLAB's Cartesian coordinates (L, a, b) provide straight-line mixing│ │
│ │ * No hue shift when mixing with transparent │ │
│ │ │ │
│ │ "Flow between Cores uses OKLAB - no muddy transitions." │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Level 3: Component Colors
Component-Specific Definitions
Level 3 colors are tied to specific UI components, building on Levels 1 and 2:Copy
/* LEVEL 3: Component Colors */
/* Context Menu */
--color-context-menu-bg: #2d2d2d;
--color-context-menu-border: #444;
--color-context-menu-hover: #3a3a3a;
--color-context-menu-text: #cccccc;
/* File Explorer */
--color-file-explorer-separator: #555;
--color-file-explorer-empty-state: #666;
--color-file-explorer-error: var(--color-danger);
/* Hover/Active States */
--color-hover-subtle: var(--color-overlay-light-1);
--color-divider: rgba(255, 255, 255, 0.1);
/* Dialog Sizes */
--dialog-width-sm: 400px;
--dialog-width-md: 520px;
--dialog-width-lg: 640px;
--dialog-max-height: 70vh;
/* Dialog Shadows & Overlay */
--dialog-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
--dialog-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
--overlay-backdrop: rgba(0, 0, 0, 0.7);
Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ LEVEL 3: COMPONENT COLOR MAPPING │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ COMPONENT │ COLOR VARIABLE │ SOURCE │
│ ─────────────────────────┼───────────────────────────────────┼─────────────── │
│ Context Menu Background │ --color-context-menu-bg: #2d2d2d │ Raw HEX │
│ Context Menu Border │ --color-context-menu-border: #444 │ Raw HEX │
│ Context Menu Hover │ --color-context-menu-hover: #3a3a3│ Raw HEX │
│ Context Menu Text │ --color-context-menu-text: #ccc │ Raw HEX │
│ ─────────────────────────┼───────────────────────────────────┼─────────────── │
│ File Explorer Separator │ --color-file-explorer-separator │ Raw HEX │
│ File Explorer Error │ --color-file-explorer-error │ var() L2 │
│ ─────────────────────────┼───────────────────────────────────┼─────────────── │
│ Subtle Hover │ --color-hover-subtle │ var() L1 Flow │
│ Divider │ --color-divider │ Raw rgba │
│ ─────────────────────────┼───────────────────────────────────┼─────────────── │
│ Dialog Shadow │ --dialog-shadow │ Raw rgba │
│ Overlay Backdrop │ --overlay-backdrop │ Raw rgba │
│ │
│ OBSERVATIONS: │
│ ───────────── │
│ * Some L3 colors still use raw HEX (context-menu-*) │
│ * Best practice: derive from L2 Core Colors │
│ * --color-file-explorer-error correctly uses var(--color-danger) │
│ * --color-hover-subtle correctly uses var(--color-overlay-light-1) │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Level 4: Contextual Relationships
Background-Foreground Pairs
Level 4 represents the highest abstraction - defining relationships between colors based on context:Copy
/* LEVEL 4: Contextual Relationship Variables */
/* Background-foreground relationships */
/* Enables custom themes to easily override text colors for accent backgrounds */
/* Primary Background Context */
--bg-primary-text: var(--color-text-primary);
--bg-primary-text-secondary: var(--color-text-secondary);
--bg-primary-heading: var(--color-text-primary);
--bg-primary-link: var(--color-primary);
/* Secondary Background Context */
--bg-secondary-text: var(--color-text-primary);
--bg-secondary-text-secondary: var(--color-text-secondary);
/* Accent Background Contexts (buttons, badges, etc.) */
/* Text colors for semantic background colors */
--bg-accent-primary-text: #ffffff; /* Text on --color-primary bg */
--bg-accent-success-text: #ffffff; /* Text on --color-success bg */
--bg-accent-danger-text: #ffffff; /* Text on --color-danger bg */
--bg-accent-warning-text: #ffffff; /* Text on --color-warning bg (dark theme) */
--bg-accent-info-text: #ffffff; /* Text on --color-info bg */
Status Badge Pattern: Core and Flow in Practice
Copy
/* LEVEL 4: Status Badge Colors */
/* Using OKLAB for stable saturation in transparent backgrounds */
/* Success Status (Running, Active, Connected) */
--status-success: var(--oklch-success);
--status-success-bg: color-mix(in oklab, var(--oklch-success), transparent 80%);
--status-success-text: var(--oklch-success);
/* Warning Status (Pending, Not Started, Orphan) */
--status-warning: var(--oklch-warning);
--status-warning-bg: color-mix(in oklab, var(--oklch-warning), transparent 80%);
--status-warning-text: var(--oklch-warning);
/* Danger Status (Error, Failed, Disconnected) */
--status-danger: var(--oklch-danger);
--status-danger-bg: color-mix(in oklab, var(--oklch-danger), transparent 80%);
--status-danger-text: var(--oklch-danger);
/* Info Status (Informational, Neutral) */
--status-info: var(--oklch-info);
--status-info-bg: color-mix(in oklab, var(--oklch-info), transparent 80%);
--status-info-text: var(--oklch-info);
Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ STATUS BADGE SYSTEM: CORE & FLOW EXEMPLIFIED │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ SUCCESS STATUS │
│ ────────────── │
│ │
│ CORE COLOR (Identity): │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ --oklch-success: oklch(55% 0.15 130) <── Green at 130 deg Hue │ │
│ └──────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ │ References via var() │
│ v │
│ FLOW COLORS (Derived): │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ --status-success: var(--oklch-success) │ │
│ │ ──> Used for: icon color, text color │ │
│ │ │ │
│ │ --status-success-bg: color-mix(in oklab, var(--oklch-success), transparent 80%)│
│ │ ──> Used for: badge background (20% opacity) │ │
│ │ │ │
│ │ --status-success-text: var(--oklch-success) │ │
│ │ ──> Used for: text on success background │ │
│ └──────────────────────────────────────────────────────────────────────┘ │
│ │
│ VISUAL RESULT: │
│ ┌────────────────────┐ │
│ │ * Running │ <── Icon uses --status-success (Core) │
│ │ ^ │ <── Background uses --status-success-bg (Flow) │
│ │ │ │ <── Text uses --status-success-text (Core ref) │
│ │ └── 20% opacity │ │
│ │ green tint │ │
│ └────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ "Core Colors define identity. Flow Colors handle everything in between." │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Light Theme Override Pattern
Theme-Specific Overrides
The light theme section demonstrates how to override colors while maintaining the hierarchy:Copy
/* LIGHT THEME - Overrides for [data-theme="light"] */
/* Same SMPC hierarchy, different values */
[data-theme="light"] {
/* LEVEL 1: Primitive Colors */
--color-bg-primary: #ffffff;
--color-bg-secondary: #f5f5f5;
--color-bg-tertiary: #ebebeb;
--color-bg-hover: rgba(0, 0, 0, 0.05);
--color-text-primary: #1a1a1a;
--color-text-secondary: #666666;
--color-text-tertiary: #999999;
/* Border Colors */
--color-border-primary: #e0e0e0;
--color-border-secondary: #d0d0d0;
--color-border-light: #c0c0c0;
--color-border-subtle: rgba(0, 0, 0, 0.1);
/* Scrollbar */
--color-scrollbar-thumb: rgba(0, 0, 0, 0.2);
--color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.4);
/* Terminal Colors - Light Theme */
--color-terminal-bg: var(--color-bg-primary);
--color-terminal-fg: var(--color-text-primary);
--color-terminal-cursor: #000000;
--color-terminal-selection: rgba(0, 0, 0, 0.2);
/* LEVEL 4: Contextual Relationship Overrides */
/* Warning text needs to be dark on bright yellow bg in light mode */
--bg-accent-warning-text: #1a1a1a;
}
Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ DARK vs LIGHT THEME: CORE COLOR ADAPTATION │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ PRIMITIVE LAYER CHANGES │
│ ─────────────────────── │
│ │
│ Variable │ Dark Theme │ Light Theme │
│ ───────────────────────┼───────────────┼────────────────────────────────────── │
│ --color-bg-primary │ #000000 │ #ffffff │
│ --color-text-primary │ #93a1a1 │ #1a1a1a │
│ --color-border-primary │ #151d26 │ #e0e0e0 │
│ │
│ SEMANTIC LAYER PRESERVED │
│ ──────────────────────── │
│ │
│ The OKLCH semantic colors (--oklch-primary, etc.) are NOT overridden │
│ in light theme. This is because: │
│ │
│ 1. OKLCH uses perceptually uniform lightness (L%) │
│ 2. The same oklch(55% 0.15 230) works in both themes │
│ 3. Only the context (bg, text) changes around Core Colors │
│ │
│ CONTEXTUAL ADAPTATION │
│ ───────────────────── │
│ │
│ --bg-accent-warning-text changes from #ffffff (dark) to #1a1a1a (light) │
│ Because: Yellow background needs dark text in light mode │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
THE CENTER
How CSS Architecture Enables Consistent Information Flow
The 4-Level CSS architecture directly supports information flow visualization:Copy
Connection to Core-Flow:
┌── Level 1 (Primitives) = The "canvas" - background and text colors
│ that form the base layer where information is displayed
│
├── Level 2 (Semantic) = Core Colors that communicate MEANING
│ * Primary blue = interactive/actionable
│ * Success green = positive/completion
│ * Danger red = error/warning
│ * These colors ARE information carriers
│
├── Level 3 (Component) = How specific UI elements use the semantic colors
│ * Context menus, dialogs, file explorers
│ * Each component applies Core/Flow appropriately
│
└── Level 4 (Contextual) = Relationships that ensure readability
* Text colors adapt to background colors
* Ensures information is always legible
* Human can always parse the color-coded information
Architecture Summary
Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ CSS VARIABLE ARCHITECTURE: CORE & FLOW OVERLAY │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────┐ │
│ │ │ │
│ LEVEL 4 │ CONTEXTUAL RELATIONSHIPS │ │
│ (Context) │ --bg-*-text, --status-*-bg │ │
│ │ │ │
│ │ ┌───────────────────────────────┐ │ │
│ │ │ Uses Core + Flow compositions │ │ │
│ │ └───────────────────────────────┘ │ │
│ └──────────────────┬──────────────────┘ │
│ │ │
│ ┌──────────────────v──────────────────┐ │
│ │ │ │
│ LEVEL 3 │ COMPONENT COLORS │ │
│ (Component) │ --color-context-menu-*, --dialog-* │ │
│ │ │ │
│ └──────────────────┬──────────────────┘ │
│ │ │
│ ┌──────────────────v──────────────────┐ │
│ │ │ │
│ LEVEL 2 │ SEMANTIC COLORS │ │
│ (Semantic) │ │ │
│ │ ┌────────────┐ ┌──────────────┐ │ │
│ │ │ CORE │ │ FLOW │ │ │
│ │ │ COLORS │>│ COLORS │ │ │
│ │ │ (OKLCH) │ │ (color-mix) │ │ │
│ │ │ │ │ │ │ │
│ │ │ --oklch- │ │ --oklch-*- │ │ │
│ │ │ primary │ │ hover/muted │ │ │
│ │ └────────────┘ └──────────────┘ │ │
│ │ │ │
│ └──────────────────┬──────────────────┘ │
│ │ │
│ ┌──────────────────v──────────────────┐ │
│ │ │ │
│ LEVEL 1 │ PRIMITIVE COLORS │ │
│ (Primitive) │ --color-bg-*, --color-ansi-* │ │
│ │ │ │
│ └─────────────────────────────────────┘ │
│ │
│ ═════════════════════════════════════════════════════════════════════════ │
│ │
│ "Core Colors define identity. Flow Colors handle everything in between." │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Theme Manager Integration
How Core and Flow colors flow through the runtime theme system