@stephen-netu/design-system 0.1.0 → 0.2.0

package/src/p0-primitives/tokens/tokens.css

@@ -1,96 +1,143 @@
-/* @kos/design-system — canonical design tokens
-   Source of truth for all CSS custom properties.
-   All LEAP apps consume these via `import '@kos/design-system'`.
-   Palette: brass/copper dark theme. NEVER blue as primary. */
-
 :root {
-  /* --- Backgrounds --- */
-  --color-bg-app: #141414;
-  --color-bg-canvas: #1a1a1a;
-  --color-bg-panel: #222222;
-  --color-bg-panel-elevated: #2a2a2a;
-  --color-card-bg: #252525;
-  --color-card-bg-warm: #2a2520;
-  --color-card-bg-cool: #202528;
-
-  /* --- Text --- */
-  --color-text-primary: #f2efe9;
-  --color-text-secondary: #a09880;
-  --color-text-tertiary: #706858;
-  --color-text-muted: #5a5245;
-  --color-text-inverse: #141414;
+  /* @kos/design-system — Neo-brutalist industrial default theme */
+  /* Deep charcoal surfaces · Brass accents · Monospace data · Zero radius */
+
+  /* --- Backgrounds (charcoal depth) --- */
+  --color-bg-app: #0b0d0f;             /* Deepest — app chrome / substrate */
+  --color-bg-canvas: #121518;          /* Workspace surface */
+  --color-bg-panel: #181c20;           /* Panel containers */
+  --color-bg-panel-elevated: #20252a;  /* Elevated dialogs, modals */
+  --color-bg-inset: #0a0a0a;           /* Inset wells, inputs */
+  --color-bg-root: #0b0d0f;
+
+  /* Card backgrounds (warm charcoal depth) */
+  --color-card-bg: #1a1e22;
+  --color-card-bg-warm: #24292e;
+  --color-card-bg-cool: #15181c;
+  --color-card-border: #2a2f35;
+
+  /* --- Text (warm silkscreen on dark) --- */
+  --color-text-primary: #e8e0d0;       /* Primary — warm white silkscreen */
+  --color-text-secondary: #a8a08c;     /* Secondary — annotations */
+  --color-text-tertiary: #6b6558;      /* Dim — metadata */
+  --color-text-muted: #3a3630;         /* Ghost text */
+  --color-text-inverse: #0b0d0f;       /* For light backgrounds */
+
+  /* Card text */
   --color-card-text-primary: #e8e0d0;
-  --color-card-text-secondary: #a09880;
-  --color-card-text-tertiary: #706858;
-
-  /* --- Accent (brass/copper) --- */
-  --color-accent: #b87333;
-  --color-accent-hover: #d4956a;
-  --color-accent-active: #8a5626;
-  --color-accent-glow: rgba(184, 115, 51, 0.3);
-  --color-accent-muted: rgba(184, 115, 51, 0.2);
-  --color-accent-subtle: rgba(184, 115, 51, 0.15);
-  --color-accent-faint: rgba(184, 115, 51, 0.08);
-  --color-accent-amber: #d4956a;
-  --color-accent-copper: #b87333;
-  --color-accent-rust: #8a5626;
-  --color-accent-sage: #6b8a6b;
+  --color-card-text-secondary: #a8a08c;
+  --color-card-text-tertiary: #6b6558;
+
+  /* --- Accent (default: brass, user-controllable via --accent-*) --- */
+  --color-accent: var(--accent-primary, #b87333);
+  --color-accent-hover: var(--accent-hover, #d4892f);
+  --color-accent-active: var(--accent-active, #8a5526);
+   --color-accent-glow: var(--accent-glow, rgba(184, 115, 51, 0.28));
+   --color-accent-muted: var(--accent-muted, rgba(184, 115, 51, 0.16));
+   --color-accent-subtle: var(--accent-subtle, rgba(184, 115, 51, 0.08));
+   --color-accent-faint: var(--accent-faint, rgba(184, 115, 51, 0.04));
+
+   /* Overlay levels — white opacity ramps for borders, backgrounds, hover states */
+   --overlay-white-02: rgba(255, 255, 255, 0.02);
+   --overlay-white-03: rgba(255, 255, 255, 0.03);
+   --overlay-white-04: rgba(255, 255, 255, 0.04);
+   --overlay-white-05: rgba(255, 255, 255, 0.05);
+   --overlay-white-06: rgba(255, 255, 255, 0.06);
+   --overlay-white-08: rgba(255, 255, 255, 0.08);
+   --overlay-white-10: rgba(255, 255, 255, 0.10);
+   --overlay-white-18: rgba(255, 255, 255, 0.18);
+   --overlay-white-22: rgba(255, 255, 255, 0.22);
+   --overlay-white-25: rgba(255, 255, 255, 0.25);
+
+   /* Overlay levels — accent color opacity ramps */
+   --overlay-accent-06: rgba(184, 115, 51, 0.06);
+   --overlay-accent-08: rgba(184, 115, 51, 0.08);
+   --overlay-accent-12: rgba(184, 115, 51, 0.12);
+   --overlay-accent-18: rgba(184, 115, 51, 0.18);
+   --overlay-accent-30: rgba(184, 115, 51, 0.30);
+   --overlay-accent-45: rgba(184, 115, 51, 0.45);
+   --overlay-accent-50: rgba(184, 115, 51, 0.50);
+   --overlay-accent-55: rgba(184, 115, 51, 0.55);
+
+   /* Overlay levels — status color opacity ramps */
+   --overlay-success-06: rgba(79, 168, 162, 0.06);
+   --overlay-error-06: rgba(193, 74, 74, 0.06);
+
+   /* Cell background for band/offer tables */
+   --color-bg-cell: #121518;
+
+  /* --- Telemetry palette --- */
+  --color-cyan: #4fa8a2;               /* Online / OK */
+  --color-cyan-glow: rgba(79, 168, 162, 0.32);
+  --color-amber: #d4a04c;              /* Warning / transition */
+  --color-amber-glow: rgba(212, 160, 76, 0.32);
+  --color-crimson: #c14a4a;            /* Fault / halt */
+  --color-crimson-glow: rgba(193, 74, 74, 0.32);
 
   /* --- Status --- */
-  --color-success: #27ae60;
-  --color-warning: #f39c12;
-  --color-error: #c0392b;
-  --color-info: #2980b9;
+  --color-success: #4fa8a2;
+  --color-warning: #d4a04c;
+  --color-error: #c14a4a;
+  --color-info: #5b8db8;
 
   /* --- Semantic (presence) --- */
-  --color-online: #4ade80;
-  --color-offline: #6b7280;
-  --color-away: #fbbf24;
-  --color-busy: #ef4444;
-  --color-typing: #fbbf24;
+  --color-online: #4fa8a2;
+  --color-offline: #3a3630;
+  --color-away: #d4a04c;
+  --color-busy: #c14a4a;
+  --color-typing: #d4a04c;
 
   /* --- Epistemic (ASSAY clearance states) --- */
-  --epistemic-cleared: #27ae60;            /* green — matches --color-success */
-  --epistemic-cleared-glow: rgba(39, 174, 96, 0.2);
-  --epistemic-blocked: #c0392b;            /* red — matches --color-error */
-  --epistemic-blocked-glow: rgba(192, 57, 43, 0.2);
-  --epistemic-pending: #f39c12;            /* amber — matches --color-warning */
-  --epistemic-pending-glow: rgba(243, 156, 18, 0.2);
-  --epistemic-degraded: #6b7280;           /* grey */
-  --epistemic-degraded-glow: rgba(107, 114, 128, 0.15);
-
-  /* --- Allay stages (0=grey → 5=gold) --- */
-  --epistemic-stage-0: #4a4a4a;            /* Propose — dark grey */
-  --epistemic-stage-1: #6b7280;            /* Parse — muted grey */
-  --epistemic-stage-2: #d4956a;            /* Authorize — amber (--color-accent-amber) */
-  --epistemic-stage-3: #b87333;            /* Execute — copper (--color-accent-copper) */
-  --epistemic-stage-4: #c9973a;            /* Trace — brass */
-  --epistemic-stage-5: #d4a843;            /* Replicate — gold */
-  --epistemic-stage-5-glow: rgba(212, 168, 67, 0.25);
+  --epistemic-cleared: #4fa8a2;
+  --epistemic-cleared-glow: rgba(79, 168, 162, 0.2);
+  --epistemic-blocked: #c14a4a;
+  --epistemic-blocked-glow: rgba(193, 74, 74, 0.2);
+  --epistemic-pending: #d4a04c;
+  --epistemic-pending-glow: rgba(212, 160, 76, 0.2);
+  --epistemic-degraded: #3a3630;
+  --epistemic-degraded-glow: rgba(58, 54, 48, 0.15);
+
+  /* --- Allay stages (0=dark → 5=brass) --- */
+  --epistemic-stage-0: #121518;
+  --epistemic-stage-1: #181c20;
+  --epistemic-stage-2: #3a3630;
+  --epistemic-stage-3: #6b6558;
+  --epistemic-stage-4: #4fa8a2;
+  --epistemic-stage-5: #d4a04c;
+  --epistemic-stage-5-glow: rgba(212, 160, 76, 0.25);
 
   /* --- Expert identity colors --- */
-  --expert-atelier: #b87333;               /* copper — knowledge surfaces */
-  --expert-agora: #6b8a6b;                 /* sage — communication (--color-accent-sage) */
-  --expert-ryu: #d4956a;                   /* amber — task execution (--color-accent-amber) */
-  --expert-sovereign: #c9973a;             /* brass — kernel */
-  --expert-agent: #2980b9;                 /* info — agent (--color-info) */
+  --expert-atelier: #5b8db8;
+  --expert-agora: #4fa8a2;
+  --expert-ryu: #d4a04c;
+  --expert-sovereign: #8b7fb0;
+  --expert-agent: #6b6558;
 
   /* --- Borders --- */
   --border-subtle: rgba(255, 255, 255, 0.06);
-  --border-default: #333333;
-  --border-hover: #444444;
+  --border-default: #3a3630;
+  --border-hover: #6b6558;
   --border-focus: #b87333;
-  --divider-color: #2a2a2a;
+  --border-alert: #c14a4a;
+  --border-warning: #d4a04c;
+  --divider-color: #181c20;
+
+  /* Border aliases (for component compatibility) */
+  --color-border: var(--border-default);
+  --color-border-subtle: var(--border-subtle);
+  --color-border-default: var(--border-default);
 
   /* --- Grid (canvas patterns) --- */
-  --grid-line: rgba(184, 115, 51, 0.06);
-  --grid-dot: rgba(184, 115, 51, 0.12);
+  --grid-line: rgba(184, 115, 51, 0.03);
+  --grid-dot: rgba(184, 115, 51, 0.06);
+  --grid-major: rgba(184, 115, 51, 0.1);
 
   /* --- Typography --- */
   --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
   --font-serif: 'Crimson Pro', Georgia, serif;
 
+  --text-2xs: 0.5rem;
   --text-xs: 0.75rem;
   --text-sm: 0.875rem;
   --text-base: 1rem;
@@ -101,7 +148,9 @@
   --text-4xl: 2.25rem;
 
   /* --- Spacing --- */
+  --space-05: 0.125rem;
   --space-1: 0.25rem;
+  --space-15: 0.375rem;
   --space-2: 0.5rem;
   --space-3: 0.75rem;
   --space-4: 1rem;
@@ -112,24 +161,34 @@
   --space-12: 3rem;
   --space-16: 4rem;
 
-  /* --- Border radius --- */
-  --radius-xs: 0.125rem;
-  --radius-sm: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
+  /* --- Border radius — zero by default (opt-in via --radius-*) --- */
+  --border-width-thin: 1px;
+  --border-width-default: 2px;
+  --border-width-heavy: 3px;
+
+  --size-divider: 6px;
+  --blur-sm: 2px;
+  --blur-md: 4px;
+  --blur-lg: 8px;
+
+  --radius-xs: 0;
+  --radius-sm: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+  --radius-xl: 0;
   --radius-full: 9999px;
 
-  /* --- Shadows --- */
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
-  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
-  --shadow-glow: 0 0 15px rgba(184, 115, 51, 0.15);
-  --shadow-glow-lg: 0 0 30px rgba(184, 115, 51, 0.25);
-  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
-  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
-  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.4);
+  /* --- Shadows — minimal, border-based depth preferred --- */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  --shadow-md: none;
+  --shadow-lg: none;
+  --shadow-xl: none;
+  --shadow-glow: 0 0 12px rgba(184, 115, 51, 0.15);
+  --shadow-glow-lg: 0 0 24px rgba(184, 115, 51, 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.4);
+  --shadow-card: none;
+  --shadow-card-hover: none;
+  --shadow-accent-glow: 0 0 16px rgba(184, 115, 51, 0.15), 0 0 32px rgba(184, 115, 51, 0.05);
 
   /* --- Transitions --- */
   --transition-fast: 120ms ease;
@@ -137,4 +196,52 @@
   --transition-slow: 350ms ease;
   --transition-bounce: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
   --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* --- Semantic Color Roles --- */
+  --color-bg-primary: var(--color-bg-app);
+  --color-bg-secondary: var(--color-bg-canvas);
+  --color-bg-tertiary: var(--color-bg-panel);
+  --color-bg-elevated: var(--color-bg-panel-elevated);
+   --color-bg-hover: rgba(255, 255, 255, 0.06);
+
+   /* --- Surface extensions (cross-app) --- */
+   --color-bg-input: var(--color-bg-inset);
+   --color-bg-muted: #1c2025;
+   --color-bg-surface: #222222;
+
+  --color-fg-primary: var(--color-text-primary);
+  --color-fg-secondary: var(--color-text-secondary);
+  --color-fg-tertiary: var(--color-text-tertiary);
+  --color-fg-muted: var(--color-text-muted);
+  --color-fg-inverse: var(--color-text-inverse);
+
+  /* Feedback semantic mapping */
+  --color-status-success: var(--color-success);
+  --color-status-warning: var(--color-warning);
+  --color-status-error: var(--color-error);
+  --color-status-info: var(--color-info);
+
+  /* --- Animation / Duration --- */
+  --duration-fast: 100ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+  --duration-slower: 500ms;
+
+  --ease-linear: linear;
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* --- Z-index --- */
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  --z-toast: 1080;
+  --z-glass-box: 9000;
 }

package/src/p0-primitives/tokens/tokens.json

@@ -24,11 +24,9 @@
       "hover": "var(--color-accent-hover)",
       "active": "var(--color-accent-active)",
       "glow": "var(--color-accent-glow)",
+      "muted": "var(--color-accent-muted)",
       "subtle": "var(--color-accent-subtle)",
-      "amber": "var(--color-accent-amber)",
-      "copper": "var(--color-accent-copper)",
-      "rust": "var(--color-accent-rust)",
-      "sage": "var(--color-accent-sage)"
+      "faint": "var(--color-accent-faint)"
     },
     "status": {
       "success": "var(--color-success)",
@@ -51,6 +49,30 @@
       "divider": "var(--divider-color)"
     }
   },
+  "epistemic": {
+    "cleared": "var(--epistemic-cleared)",
+    "clearedGlow": "var(--epistemic-cleared-glow)",
+    "blocked": "var(--epistemic-blocked)",
+    "blockedGlow": "var(--epistemic-blocked-glow)",
+    "pending": "var(--epistemic-pending)",
+    "pendingGlow": "var(--epistemic-pending-glow)",
+    "degraded": "var(--epistemic-degraded)",
+    "degradedGlow": "var(--epistemic-degraded-glow)",
+    "stage0": "var(--epistemic-stage-0)",
+    "stage1": "var(--epistemic-stage-1)",
+    "stage2": "var(--epistemic-stage-2)",
+    "stage3": "var(--epistemic-stage-3)",
+    "stage4": "var(--epistemic-stage-4)",
+    "stage5": "var(--epistemic-stage-5)",
+    "stage5Glow": "var(--epistemic-stage-5-glow)"
+  },
+  "expert": {
+    "atelier": "var(--expert-atelier)",
+    "agora": "var(--expert-agora)",
+    "ryu": "var(--expert-ryu)",
+    "sovereign": "var(--expert-sovereign)",
+    "agent": "var(--expert-agent)"
+  },
   "typography": {
     "fonts": {
       "sans": "var(--font-sans)",
@@ -78,7 +100,9 @@
     "8": "var(--space-8)",
     "10": "var(--space-10)",
     "12": "var(--space-12)",
-    "16": "var(--space-16)"
+    "15": "var(--space-15)",
+    "16": "var(--space-16)",
+    "05": "var(--space-05)"
   },
   "radius": {
     "sm": "var(--radius-sm)",
@@ -105,28 +129,90 @@
     "bounce": "var(--transition-bounce)",
     "spring": "var(--transition-spring)"
   },
-  "epistemic": {
-    "cleared": "var(--epistemic-cleared)",
-    "clearedGlow": "var(--epistemic-cleared-glow)",
-    "blocked": "var(--epistemic-blocked)",
-    "blockedGlow": "var(--epistemic-blocked-glow)",
-    "pending": "var(--epistemic-pending)",
-    "pendingGlow": "var(--epistemic-pending-glow)",
-    "degraded": "var(--epistemic-degraded)",
-    "degradedGlow": "var(--epistemic-degraded-glow)",
-    "stage0": "var(--epistemic-stage-0)",
-    "stage1": "var(--epistemic-stage-1)",
-    "stage2": "var(--epistemic-stage-2)",
-    "stage3": "var(--epistemic-stage-3)",
-    "stage4": "var(--epistemic-stage-4)",
-    "stage5": "var(--epistemic-stage-5)",
-    "stage5Glow": "var(--epistemic-stage-5-glow)"
-  },
-  "expert": {
-    "atelier": "var(--expert-atelier)",
-    "agora": "var(--expert-agora)",
-    "ryu": "var(--expert-ryu)",
-    "sovereign": "var(--expert-sovereign)",
-    "agent": "var(--expert-agent)"
+  "_uncategorized": {
+    "color_bg_inset": "var(--color-bg-inset)",
+    "color_bg_root": "var(--color-bg-root)",
+    "color_card_border": "var(--color-card-border)",
+    "overlay_white_02": "var(--overlay-white-02)",
+    "overlay_white_03": "var(--overlay-white-03)",
+    "overlay_white_04": "var(--overlay-white-04)",
+    "overlay_white_05": "var(--overlay-white-05)",
+    "overlay_white_06": "var(--overlay-white-06)",
+    "overlay_white_08": "var(--overlay-white-08)",
+    "overlay_white_10": "var(--overlay-white-10)",
+    "overlay_white_18": "var(--overlay-white-18)",
+    "overlay_white_22": "var(--overlay-white-22)",
+    "overlay_white_25": "var(--overlay-white-25)",
+    "overlay_accent_06": "var(--overlay-accent-06)",
+    "overlay_accent_08": "var(--overlay-accent-08)",
+    "overlay_accent_12": "var(--overlay-accent-12)",
+    "overlay_accent_18": "var(--overlay-accent-18)",
+    "overlay_accent_30": "var(--overlay-accent-30)",
+    "overlay_accent_45": "var(--overlay-accent-45)",
+    "overlay_accent_50": "var(--overlay-accent-50)",
+    "overlay_accent_55": "var(--overlay-accent-55)",
+    "overlay_success_06": "var(--overlay-success-06)",
+    "overlay_error_06": "var(--overlay-error-06)",
+    "color_bg_cell": "var(--color-bg-cell)",
+    "color_cyan": "var(--color-cyan)",
+    "color_cyan_glow": "var(--color-cyan-glow)",
+    "color_amber": "var(--color-amber)",
+    "color_amber_glow": "var(--color-amber-glow)",
+    "color_crimson": "var(--color-crimson)",
+    "color_crimson_glow": "var(--color-crimson-glow)",
+    "border_alert": "var(--border-alert)",
+    "border_warning": "var(--border-warning)",
+    "color_border": "var(--color-border)",
+    "color_border_subtle": "var(--color-border-subtle)",
+    "color_border_default": "var(--color-border-default)",
+    "grid_line": "var(--grid-line)",
+    "grid_dot": "var(--grid-dot)",
+    "grid_major": "var(--grid-major)",
+    "text_2xs": "var(--text-2xs)",
+    "border_width_thin": "var(--border-width-thin)",
+    "border_width_default": "var(--border-width-default)",
+    "border_width_heavy": "var(--border-width-heavy)",
+    "size_divider": "var(--size-divider)",
+    "blur_sm": "var(--blur-sm)",
+    "blur_md": "var(--blur-md)",
+    "blur_lg": "var(--blur-lg)",
+    "radius_xs": "var(--radius-xs)",
+    "shadow_accent_glow": "var(--shadow-accent-glow)",
+    "color_bg_primary": "var(--color-bg-primary)",
+    "color_bg_secondary": "var(--color-bg-secondary)",
+    "color_bg_tertiary": "var(--color-bg-tertiary)",
+    "color_bg_elevated": "var(--color-bg-elevated)",
+    "color_bg_hover": "var(--color-bg-hover)",
+    "color_bg_input": "var(--color-bg-input)",
+    "color_bg_muted": "var(--color-bg-muted)",
+    "color_bg_surface": "var(--color-bg-surface)",
+    "color_fg_primary": "var(--color-fg-primary)",
+    "color_fg_secondary": "var(--color-fg-secondary)",
+    "color_fg_tertiary": "var(--color-fg-tertiary)",
+    "color_fg_muted": "var(--color-fg-muted)",
+    "color_fg_inverse": "var(--color-fg-inverse)",
+    "color_status_success": "var(--color-status-success)",
+    "color_status_warning": "var(--color-status-warning)",
+    "color_status_error": "var(--color-status-error)",
+    "color_status_info": "var(--color-status-info)",
+    "duration_fast": "var(--duration-fast)",
+    "duration_normal": "var(--duration-normal)",
+    "duration_slow": "var(--duration-slow)",
+    "duration_slower": "var(--duration-slower)",
+    "ease_linear": "var(--ease-linear)",
+    "ease_in": "var(--ease-in)",
+    "ease_out": "var(--ease-out)",
+    "ease_in_out": "var(--ease-in-out)",
+    "ease_bounce": "var(--ease-bounce)",
+    "ease_spring": "var(--ease-spring)",
+    "z_dropdown": "var(--z-dropdown)",
+    "z_sticky": "var(--z-sticky)",
+    "z_fixed": "var(--z-fixed)",
+    "z_modal_backdrop": "var(--z-modal-backdrop)",
+    "z_modal": "var(--z-modal)",
+    "z_popover": "var(--z-popover)",
+    "z_tooltip": "var(--z-tooltip)",
+    "z_toast": "var(--z-toast)",
+    "z_glass_box": "var(--z-glass-box)"
   }
 }

package/src/p0-primitives/tokens/validity-tokens.css

@@ -0,0 +1,83 @@
+:root {
+  /* --- Validity Score Colors (KVE - Knowledge Validity Engine) ---
+     Used for displaying document validity scores from v0-kve-scanner
+     Score ranges: 0-1000 (permille)
+     - 900-1000: High validity (green)
+     - 700-899: Medium validity (amber)  
+     - 500-699: Low validity (orange)
+     - 0-499: Critical validity (red)
+  */
+  
+  /* High Validity (900-1000) */
+  --validity-high: #27ae60;
+  --validity-high-light: #2ecc71;
+  --validity-high-dark: #229954;
+  --validity-high-glow: rgba(39, 174, 96, 0.25);
+  --validity-high-bg: rgba(39, 174, 96, 0.12);
+  --validity-high-border: rgba(39, 174, 96, 0.3);
+  
+  /* Medium Validity (700-899) */
+  --validity-medium: #f39c12;
+  --validity-medium-light: #f1c40f;
+  --validity-medium-dark: #d68910;
+  --validity-medium-glow: rgba(243, 156, 18, 0.25);
+  --validity-medium-bg: rgba(243, 156, 18, 0.12);
+  --validity-medium-border: rgba(243, 156, 18, 0.3);
+  
+  /* Low Validity (500-699) */
+  --validity-low: #e67e22;
+  --validity-low-light: #eb984e;
+  --validity-low-dark: #ba4a00;
+  --validity-low-glow: rgba(230, 126, 34, 0.25);
+  --validity-low-bg: rgba(230, 126, 34, 0.12);
+  --validity-low-border: rgba(230, 126, 34, 0.3);
+  
+  /* Critical Validity (0-499) */
+  --validity-critical: #c0392b;
+  --validity-critical-light: #e74c3c;
+  --validity-critical-dark: #a93226;
+  --validity-critical-glow: rgba(192, 57, 43, 0.25);
+  --validity-critical-bg: rgba(192, 57, 43, 0.12);
+  --validity-critical-border: rgba(192, 57, 43, 0.3);
+  
+  /* No Score / Unknown */
+  --validity-unknown: #6b7280;
+  --validity-unknown-light: #9ca3af;
+  --validity-unknown-dark: #4b5563;
+  --validity-unknown-bg: rgba(107, 114, 128, 0.12);
+  --validity-unknown-border: rgba(107, 114, 128, 0.3);
+  
+  /* Validity Score Display */
+  --validity-score-font: var(--font-mono);
+  --validity-score-size: var(--text-2xl);
+  --validity-score-weight: 700;
+  
+  /* Validity Progress Bar */
+  --validity-progress-height: 0.5rem;
+  --validity-progress-bg: var(--color-bg-panel);
+  --validity-progress-border-radius: var(--radius-full);
+}
+
+/* Utility classes for validity states */
+.validity-high { color: var(--validity-high); }
+.validity-medium { color: var(--validity-medium); }
+.validity-low { color: var(--validity-low); }
+.validity-critical { color: var(--validity-critical); }
+.validity-unknown { color: var(--validity-unknown); }
+
+.bg-validity-high { background: var(--validity-high-bg); }
+.bg-validity-medium { background: var(--validity-medium-bg); }
+.bg-validity-low { background: var(--validity-low-bg); }
+.bg-validity-critical { background: var(--validity-critical-bg); }
+.bg-validity-unknown { background: var(--validity-unknown-bg); }
+
+.border-validity-high { border-color: var(--validity-high-border); }
+.border-validity-medium { border-color: var(--validity-medium-border); }
+.border-validity-low { border-color: var(--validity-low-border); }
+.border-validity-critical { border-color: var(--validity-critical-border); }
+.border-validity-unknown { border-color: var(--validity-unknown-border); }
+
+.shadow-validity-high { box-shadow: 0 0 12px var(--validity-high-glow); }
+.shadow-validity-medium { box-shadow: 0 0 12px var(--validity-medium-glow); }
+.shadow-validity-low { box-shadow: 0 0 12px var(--validity-low-glow); }
+.shadow-validity-critical { box-shadow: 0 0 12px var(--validity-critical-glow); }

package/src/u0-primitives/animated-icon/README.md

@@ -19,6 +19,7 @@ Aligns with LEAP's "enchanted" component philosophy from x0-enchanted-blocks:
 <AnimatedIcon name="power-node" animation="pulse" size={40} />
 <AnimatedIcon name="activity" animation="wave" speed={0.5} />
 <AnimatedIcon name="connection" color="#27ae60" />
+<AnimatedIcon name="energy-pulse" animation="energy-arcs" />
 ```
 
 ## Icons
@@ -27,8 +28,12 @@ Aligns with LEAP's "enchanted" component philosophy from x0-enchanted-blocks:
 |------|-------------|------------|
 | `power-node` | Energy/data center node | `pulse`, `orbit` |
 | `activity` | Audio/video activity bars | `wave` (default) |
-| `connection` | Network/data flow | `pulse` |
+| `connection` | Network/data flow | `pulse` (default) |
 | `status-ring` | Loading/progress ring | `spin`, `breathe` |
+| `power-plant` | Power plant silhouette with cooling tower | `steam`, `pulse` |
+| `orbital-ring` | Orbital ring with rotating elements | `pulse` (default) |
+| `steam-tower` | Minimal steam tower with rising particles | `steam` (default) |
+| `energy-pulse` | Energy pulse with radiating arcs | `pulse`, `energy-arcs` |
 
 ## Props
 
@@ -37,14 +42,26 @@ Aligns with LEAP's "enchanted" component philosophy from x0-enchanted-blocks:
 | `name` | `IconName` | required | Icon identifier |
 | `size` | `number` | `40` | ViewBox size (px) |
 | `color` | `string` | `var(--color-accent)` | CSS color value |
-| `animation` | `AnimationType` | varies | Animation style |
+| `animation` | `AnimationType` | `'pulse'` | Animation style |
 | `speed` | `number` | `1` | Multiplier (0.5 = slower, 2 = faster) |
 
+## Animation Types
+
+| Animation | Icons | Description |
+|-----------|-------|-------------|
+| `pulse` | power-node, connection, status-ring, power-plant, orbital-ring, steam-tower, energy-pulse | Pulsing/radiating opacity or size |
+| `orbit` | power-node | Orbiting dot around center |
+| `wave` | activity | Bar height oscillation |
+| `spin` | status-ring | Rotating segments |
+| `breathe` | status-ring | Opacity fade in/out |
+| `steam` | power-plant, steam-tower | Rising steam/particle plumes |
+| `energy-arcs` | energy-pulse | Radiating line arcs in 4 directions |
+
 ## Design Tokens
 
 Uses standard LEAP accent colors:
 - `--color-accent` (primary)
-- `--color-accent-hover` 
+- `--color-accent-hover`
 - `--epistemic-live` (success states)
 - `--epistemic-pending` (warning states)