@eaera-com/eaera-widgets-v2 0.1.63 → 0.1.65

package/dist/design-system/themes/core/layers/_layer2-alias.scss

@@ -0,0 +1,242 @@
+// ============================================================================
+// LAYER 2: ALIAS TOKENS (Semantic Mappings)
+// ============================================================================
+// Maps Layer 1 tonal palettes to meaningful semantic names
+// Override these in per-project themes to customize brand colors
+// Source: Figma Color Guidance - Component Tokens mapping
+// ============================================================================
+
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // NEUTRAL (Grayscale for text, borders, backgrounds)
+  // Mapping: Neutral → Gray
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-neutral-50: var(--er-gray-50);
+  --er-neutral-100: var(--er-gray-100);
+  --er-neutral-200: var(--er-gray-200);
+  --er-neutral-300: var(--er-gray-300);
+  --er-neutral-400: var(--er-gray-400);
+  --er-neutral-500: var(--er-gray-500);
+  --er-neutral-600: var(--er-gray-600);
+  --er-neutral-700: var(--er-gray-700);
+  --er-neutral-800: var(--er-gray-800);
+  --er-neutral-900: var(--er-gray-900);
+  --er-neutral-950: var(--er-gray-950);
+  --er-neutral-white: var(--er-gray-white); // #FFFFFF
+  --er-neutral-black: var(--er-gray-black); // #000000
+  --er-neutral-default: var(--er-gray-500); // Figma: neutral/default → color/gray/500
+
+  // Neutral Alpha → Gray Alpha (#11161C with alpha %)
+  --er-neutral-alpha-50: var(--er-gray-alpha-50);
+  --er-neutral-alpha-75: var(--er-gray-alpha-75);
+  --er-neutral-alpha-100: var(--er-gray-alpha-100);
+  --er-neutral-alpha-200: var(--er-gray-alpha-200);
+  --er-neutral-alpha-300: var(--er-gray-alpha-300);
+  --er-neutral-alpha-400: var(--er-gray-alpha-400);
+  --er-neutral-alpha-500: var(--er-gray-alpha-500);
+  --er-neutral-alpha-default: var(--er-gray-alpha-500);
+  --er-neutral-alpha-600: var(--er-gray-alpha-600);
+  --er-neutral-alpha-700: var(--er-gray-alpha-700);
+  --er-neutral-alpha-800: var(--er-gray-alpha-800);
+  --er-neutral-alpha-900: var(--er-gray-alpha-900);
+  --er-neutral-alpha-950: var(--er-gray-alpha-950);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // ELEVATION (overlays on dark surfaces)
+  // Mapping: Elevation → White Alpha (#F8F9FB with alpha %)
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-elevation-50: var(--er-white-alpha-50);
+  --er-elevation-100: var(--er-white-alpha-100);
+  --er-elevation-200: var(--er-white-alpha-200);
+  --er-elevation-300: var(--er-white-alpha-300);
+  --er-elevation-400: var(--er-white-alpha-400);
+  --er-elevation-500: var(--er-white-alpha-500);
+  --er-elevation-600: var(--er-white-alpha-600);
+  --er-elevation-700: var(--er-white-alpha-700);
+  --er-elevation-800: var(--er-white-alpha-800);
+  --er-elevation-900: var(--er-white-alpha-900);
+  --er-elevation-950: var(--er-white-alpha-950);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // PRIMARY (Main brand color)
+  // Mapping: Primary → Blue (Default, can be overridden in project themes)
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-primary-50: var(--er-blue-50);
+  --er-primary-100: var(--er-blue-100);
+  --er-primary-200: var(--er-blue-200);
+  --er-primary-300: var(--er-blue-300);
+  --er-primary-400: var(--er-blue-400);
+  --er-primary-500: var(--er-blue-500);
+  --er-primary-default: var(--er-blue-500); // Figma: primary/default → color/blue/500
+  --er-primary-600: var(--er-blue-600);
+  --er-primary-700: var(--er-blue-700);
+  --er-primary-800: var(--er-blue-800);
+  --er-primary-900: var(--er-blue-900);
+  --er-primary-950: var(--er-blue-950);
+
+  // Primary Alpha → Blue Alpha (#3B82F6 with alpha %)
+  --er-primary-alpha-50: var(--er-blue-alpha-50);
+  --er-primary-alpha-75: var(--er-blue-alpha-75);
+  --er-primary-alpha-100: var(--er-blue-alpha-100);
+  --er-primary-alpha-200: var(--er-blue-alpha-200);
+  --er-primary-alpha-300: var(--er-blue-alpha-300);
+  --er-primary-alpha-400: var(--er-blue-alpha-400);
+  --er-primary-alpha-500: var(--er-blue-alpha-500);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // SECONDARY (Accent color)
+  // Mapping: Secondary → Teal (Default, can be overridden in project themes)
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-secondary-50: var(--er-teal-50);
+  --er-secondary-100: var(--er-teal-100);
+  --er-secondary-200: var(--er-teal-200);
+  --er-secondary-300: var(--er-teal-300);
+  --er-secondary-400: var(--er-teal-400);
+  --er-secondary-500: var(--er-teal-500);
+  --er-secondary-600: var(--er-teal-600);
+  --er-secondary-700: var(--er-teal-700);
+  --er-secondary-800: var(--er-teal-800);
+  --er-secondary-900: var(--er-teal-900);
+  --er-secondary-950: var(--er-teal-950);
+  --er-secondary-default: var(--er-teal-500); // Figma: secondary/default → color/teal/500
+
+  // Secondary Alpha → Teal Alpha (#27CCD6 with alpha %)
+  --er-secondary-alpha-50: var(--er-teal-alpha-50);
+  --er-secondary-alpha-100: var(--er-teal-alpha-100);
+  --er-secondary-alpha-200: var(--er-teal-alpha-200);
+  --er-secondary-alpha-300: var(--er-teal-alpha-300);
+  --er-secondary-alpha-400: var(--er-teal-alpha-400);
+  --er-secondary-alpha-500: var(--er-teal-alpha-500);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // SUCCESS (Positive feedback)
+  // Mapping: Success → Green
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-success-50: var(--er-green-50);
+  --er-success-100: var(--er-green-100);
+  --er-success-200: var(--er-green-200);
+  --er-success-300: var(--er-green-300);
+  --er-success-400: var(--er-green-400);
+  --er-success-500: var(--er-green-500);
+  --er-success-600: var(--er-green-600);
+  --er-success-700: var(--er-green-700);
+  --er-success-800: var(--er-green-800);
+  --er-success-900: var(--er-green-900);
+  --er-success-950: var(--er-green-950);
+  --er-success-default: var(--er-green-500); // Figma: success/default → color/green/500
+
+  // Success Alpha → Green Alpha (#10B981 with alpha %)
+  --er-success-alpha-50: var(--er-green-alpha-50);
+  --er-success-alpha-100: var(--er-green-alpha-100);
+  --er-success-alpha-200: var(--er-green-alpha-200);
+  --er-success-alpha-300: var(--er-green-alpha-300);
+  --er-success-alpha-400: var(--er-green-alpha-400);
+  --er-success-alpha-500: var(--er-green-alpha-500);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // WARNING (Caution states)
+  // Mapping: Warning → Yellow
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-warning-50: var(--er-yellow-50);
+  --er-warning-100: var(--er-yellow-100);
+  --er-warning-200: var(--er-yellow-200);
+  --er-warning-300: var(--er-yellow-300);
+  --er-warning-400: var(--er-yellow-400);
+  --er-warning-500: var(--er-yellow-500);
+  --er-warning-600: var(--er-yellow-600);
+  --er-warning-700: var(--er-yellow-700);
+  --er-warning-800: var(--er-yellow-800);
+  --er-warning-900: var(--er-yellow-900);
+  --er-warning-950: var(--er-yellow-950);
+  --er-warning-default: var(--er-yellow-500); // Figma: warning/default → color/yellow/500
+
+  // Warning Alpha → Yellow Alpha (#F59E0B with alpha %)
+  --er-warning-alpha-50: var(--er-yellow-alpha-50);
+  --er-warning-alpha-100: var(--er-yellow-alpha-100);
+  --er-warning-alpha-200: var(--er-yellow-alpha-200);
+  --er-warning-alpha-300: var(--er-yellow-alpha-300);
+  --er-warning-alpha-400: var(--er-yellow-alpha-400);
+  --er-warning-alpha-500: var(--er-yellow-alpha-500);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // DANGER (Destructive actions, errors)
+  // Mapping: Danger → Red
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-danger-50: var(--er-red-50);
+  --er-danger-100: var(--er-red-100);
+  --er-danger-200: var(--er-red-200);
+  --er-danger-300: var(--er-red-300);
+  --er-danger-400: var(--er-red-400);
+  --er-danger-500: var(--er-red-500);
+  --er-danger-600: var(--er-red-600);
+  --er-danger-700: var(--er-red-700);
+  --er-danger-800: var(--er-red-800);
+  --er-danger-900: var(--er-red-900);
+  --er-danger-950: var(--er-red-950);
+  --er-danger-default: var(--er-red-500); // Figma: danger/default → color/red/500
+
+  // Danger Alpha → Red Alpha (#EF4444 with alpha %)
+  --er-danger-alpha-50: var(--er-red-alpha-50);
+  --er-danger-alpha-100: var(--er-red-alpha-100);
+  --er-danger-alpha-200: var(--er-red-alpha-200);
+  --er-danger-alpha-300: var(--er-red-alpha-300);
+  --er-danger-alpha-400: var(--er-red-alpha-400);
+  --er-danger-alpha-500: var(--er-red-alpha-500);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // INFORMATION (Info messages, links)
+  // Mapping: Information → Sky Cyan
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-information-50: var(--er-sky-cyan-50);
+  --er-information-100: var(--er-sky-cyan-100);
+  --er-information-200: var(--er-sky-cyan-200);
+  --er-information-300: var(--er-sky-cyan-300);
+  --er-information-400: var(--er-sky-cyan-400);
+  --er-information-500: var(--er-sky-cyan-500);
+  --er-information-600: var(--er-sky-cyan-600);
+  --er-information-700: var(--er-sky-cyan-700);
+  --er-information-800: var(--er-sky-cyan-800);
+  --er-information-900: var(--er-sky-cyan-900);
+  --er-information-950: var(--er-sky-cyan-950);
+  --er-information-default: var(--er-sky-cyan-500); // Figma: information/default → color/sky cyan/500
+
+  // Information Alpha → Sky Cyan Alpha (#0EA5E9 with alpha %)
+  --er-information-alpha-50: var(--er-sky-cyan-alpha-50);
+  --er-information-alpha-100: var(--er-sky-cyan-alpha-100);
+  --er-information-alpha-200: var(--er-sky-cyan-alpha-200);
+  --er-information-alpha-300: var(--er-sky-cyan-alpha-300);
+  --er-information-alpha-400: var(--er-sky-cyan-alpha-400);
+  --er-information-alpha-500: var(--er-sky-cyan-alpha-500);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // ACCENT
+  // Mapping: Accent → Lavender (Default, can be overridden in project themes)
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-accent-50: var(--er-lavender-50);
+  --er-accent-100: var(--er-lavender-100);
+  --er-accent-200: var(--er-lavender-200);
+  --er-accent-300: var(--er-lavender-300);
+  --er-accent-400: var(--er-lavender-400);
+  --er-accent-500: var(--er-lavender-500);
+  --er-accent-600: var(--er-lavender-600);
+  --er-accent-700: var(--er-lavender-700);
+  --er-accent-800: var(--er-lavender-800);
+  --er-accent-900: var(--er-lavender-900);
+  --er-accent-950: var(--er-lavender-950);
+  --er-accent-default: var(--er-lavender-500); // Figma: accent/default → color/lavender/500
+
+  // Accent Alpha → Lavender Alpha (#8749FF with alpha %)
+  --er-accent-alpha-50: var(--er-lavender-alpha-50);
+  --er-accent-alpha-100: var(--er-lavender-alpha-100);
+  --er-accent-alpha-200: var(--er-lavender-alpha-200);
+  --er-accent-alpha-300: var(--er-lavender-alpha-300);
+  --er-accent-alpha-400: var(--er-lavender-alpha-400);
+  --er-accent-alpha-500: var(--er-lavender-alpha-500);
+
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // ALIASES FOR PURE COLORS (Backward compatibility)
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-white: var(--er-gray-white);
+  --er-black: var(--er-gray-black);
+}

package/dist/design-system/themes/core/layers/_layer3-tokens.scss

@@ -0,0 +1,220 @@
+// ============================================================================
+// LAYER 3: COMPONENT TOKENS
+// ============================================================================
+// Usage-specific tokens mapped from Layer 2 aliases
+// Source: Figma UI Kit Core - Color Guidance - Component Tokens
+// File: https://www.figma.com/design/HSOs8VcK5CKL8s15AqD42x/UI-KIT-CORE
+// Node: Color Guidance - Component Tokens (36925:1463)
+//
+// IMPORTANT: Only tokens defined in Figma are included here
+// ============================================================================
+
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // ACTION (Buttons, interactive elements)
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // Action tokens — Primary (Figma: action/primary-*)
+  --er-action-primary-default: var(
+    --er-primary-default
+  ); // Figma: action/primary-default = primary/default = #3B82F6
+  --er-action-primary-hover: var(
+    --er-primary-600
+  ); // Figma: action/primary-hover = primary/600 = #2563EB
+  --er-action-primary-pressed: var(
+    --er-primary-700
+  ); // Figma: action/primary-pressed = primary/700 = #1D4CE0
+  --er-action-primary-subtle: var(
+    --er-primary-alpha-50
+  ); // Figma: action/primary-subtle = primary alpha/50 = #3B82F6 @ 3.92%
+  --er-action-primary-subtle-hover: var(
+    --er-primary-alpha-100
+  ); // Figma: action/primary-subtle-hover = primary alpha/100 = #3B82F6 @ 7.84%
+  --er-action-primary-subtle-pressed: var(
+    --er-primary-alpha-200
+  ); // Figma: action/primary-subtle-pressed = primary alpha/200 = #3B82F6 @ 12.16%
+
+  // Action tokens — Neutral (Figma: action/neutral-*)
+  --er-action-neutral-default: var(
+    --er-neutral-950
+  ); // Figma: action/neutral-default = neutral/950 = #09090B
+  --er-action-neutral-hover: var(
+    --er-neutral-600
+  ); // Figma: action/neutral-hover = neutral/600 = #52525B
+  --er-action-neutral-pressed: var(
+    --er-neutral-800
+  ); // Figma: action/neutral-pressed = neutral/800 = #27272A
+  --er-action-neutral-subtle-default: var(
+    --er-neutral-white
+  ); // Figma: action/neutral-subtle-default = neutral/white = #FFFFFF
+  --er-action-neutral-subtle-hover: var(
+    --er-neutral-alpha-50
+  ); // Figma: action/neutral-subtle-hover = neutral alpha/50 = #11161C @ 3.92%
+  --er-action-neutral-subtle-pressed: var(
+    --er-neutral-alpha-100
+  ); // Figma: action/neutral-subtle-pressed = neutral alpha/100 = #11161C @ 7.84%
+
+  // Action tokens — Danger (Figma: action/danger-*)
+  --er-action-danger-default: var(
+    --er-danger-default
+  ); // Figma: action/danger-default = danger/default = #EF4444
+  --er-action-danger-hover: var(
+    --er-danger-600
+  ); // Figma: action/danger-hover = danger/600 = #DC2626
+  --er-action-danger-pressed: var(
+    --er-danger-700
+  ); // Figma: action/danger-pressed = danger/700 = #B91C1C
+  --er-action-danger-subtle-default: var(
+    --er-danger-alpha-50
+  ); // Figma: action/danger-subtle-default = danger alpha/50 = #EF4444 @ 3.92%
+  --er-action-danger-subtle-hover: var(
+    --er-danger-alpha-100
+  ); // Figma: action/danger-subtle-hover = danger alpha/100 = #EF4444 @ 7.84%
+  --er-action-danger-subtle-pressed: var(
+    --er-danger-alpha-200
+  ); // Figma: action/danger-subtle-pressed = danger alpha/200 = #EF4444 @ 12.16%
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // SURFACE (Backgrounds, cards, panels)
+  // Frame 36984:1625 - Surface section
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-surface-page: var(
+    --er-neutral-white
+  ); // Figma: surface/page = neutral/white = #FFFFFF (main app canvas)
+  --er-surface-container: var(
+    --er-neutral-white
+  ); // Figma: surface/container = neutral/white = #FFFFFF (cards, panels)
+  --er-surface-elevated: var(
+    --er-neutral-white
+  ); // Figma: surface/elevated = neutral/white = #FFFFFF (modals, dropdowns, tooltips)
+  --er-surface-subtle: var(
+    --er-neutral-50
+  ); // Figma: surface/subtle = neutral/50 = #FAFAFA (alternating rows, quiet sections)
+  --er-surface-muted: var(
+    --er-neutral-100
+  ); // Figma: surface/muted = neutral/100 = #F4F4F5 (default/neutral tag bg)
+  --er-surface-track: var(
+    --er-elevation-50
+  ); // Figma: surface/track = elevation/50 = #F8F9FB @ 3.92%
+  --er-surface-inverse: var(
+    --er-neutral-900
+  ); // Figma: surface/inverse = neutral/900 = #18181B (dark headers, inverted sections)
+  --er-surface-neutral-subtle: var(
+    --er-neutral-alpha-100
+  ); // Figma: surface/neutral-subtle = neutral alpha/100 = #11161C @ 7.84%
+  --er-surface-brand-subtle: var(
+    --er-primary-alpha-100
+  ); // Figma: surface/brand-subtle = primary alpha/100 = #3B82F6 @ 7.84%
+  --er-surface-success-subtle: var(
+    --er-success-alpha-100
+  ); // Figma: surface/success-subtle = success alpha/100 = #10B981 @ 7.84%
+  --er-surface-warning-subtle: var(
+    --er-warning-alpha-100
+  ); // Figma: surface/warning-subtle = warning alpha/100 = #F59E0B @ 7.84%
+  --er-surface-danger-subtle: var(
+    --er-danger-alpha-100
+  ); // Figma: surface/danger-subtle = danger alpha/100 = #EF4444 @ 7.84%
+  --er-surface-information-subtle: var(
+    --er-information-alpha-100
+  ); // Figma: surface/information-subtle = information alpha/100 = #0EA5E9 @ 7.84%
+  --er-surface-fixed-white: var(
+    --er-neutral-white
+  ); // Figma: surface/fixed-white = neutral/white = #FFFFFF
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // TEXT (Typography, labels, content)
+  // Frame 36984:1701 - Text section
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-text-primary: var(
+    --er-neutral-alpha-950
+  ); // Figma: text/primary = neutral alpha/950 = #11161C @ 96.08%
+  --er-text-secondary: var(
+    --er-neutral-alpha-800
+  ); // Figma: text/secondary = neutral alpha/800 = #11161C @ 72.16%
+  --er-text-tertiary: var(
+    --er-neutral-alpha-700
+  ); // Figma: text/tertiary = neutral alpha/700 = #11161C @ 56.08%
+  --er-text-muted: var(
+    --er-neutral-alpha-600
+  ); // Figma: text/muted = neutral alpha/600 = #11161C @ 40%
+  --er-text-inverse: var(--er-neutral-50); // Figma: text/inverse = neutral/50 = #FAFAFA
+  --er-text-brand: var(--er-primary-default); // Figma: text/brand = primary/default = #3B82F6
+  --er-text-on-action: var(--er-neutral-50); // Figma: text/on-action = neutral/50 = #FAFAFA
+  --er-text-success: var(--er-success-default); // Figma: text/success = success/default = #10B981
+  --er-text-warning: var(--er-warning-default); // Figma: text/warning = warning/default = #F59E0B
+  --er-text-danger: var(--er-danger-default); // Figma: text/danger = danger/default = #EF4444
+  --er-text-information: var(
+    --er-information-default
+  ); // Figma: text/information = information/default = #0EA5E9
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // ICON (Icons, decorative elements)
+  // Frame 36984:1770 - Icon section in Figma Component Tokens
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-icon-primary: var(
+    --er-neutral-alpha-950
+  ); // Figma: icon/primary = neutral alpha/950 = #11161C @ 96.08%
+  --er-icon-secondary: var(
+    --er-neutral-alpha-800
+  ); // Figma: icon/secondary = neutral alpha/800 = #11161C @ 72.16%
+  --er-icon-tertiary: var(
+    --er-neutral-alpha-700
+  ); // Figma: icon/tertiary = neutral alpha/700 = #11161C @ 56.08%
+  --er-icon-muted: var(
+    --er-neutral-alpha-600
+  ); // Figma: icon/muted = neutral alpha/600 = #11161C @ 40%
+  --er-icon-inverse: var(--er-neutral-50); // Figma: icon/inverse = neutral/50 = #FAFAFA
+  --er-icon-brand: var(--er-primary-default); // Figma: icon/brand = primary/default = #3B82F6
+  --er-icon-on-action: var(--er-neutral-50); // Figma: icon/on-action = neutral/50 = #FAFAFA
+  --er-icon-success: var(--er-success-default); // Figma: icon/success = success/default = #10B981
+  --er-icon-warning: var(--er-warning-default); // Figma: icon/warning = warning/default = #F59E0B
+  --er-icon-danger: var(--er-danger-default); // Figma: icon/danger = danger/default = #EF4444
+  --er-icon-information: var(
+    --er-information-default
+  ); // Figma: icon/information = information/default = #0EA5E9
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // BORDER (Borders, outlines, dividers)
+  // Frame 36984:1817 - Border section in Figma Component Tokens
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-border-default: var(
+    --er-neutral-alpha-200
+  ); // Figma: border/default = neutral alpha/200 = #11161C @ 12.16%
+  --er-border-subtle: var(
+    --er-neutral-alpha-100
+  ); // Figma: border/subtle = neutral alpha/100 = #11161C @ 7.84%
+  --er-border-strong: var(
+    --er-neutral-alpha-400
+  ); // Figma: border/strong = neutral alpha/400 = #11161C @ 23.92%
+  --er-border-on-action: var(--er-neutral-50); // Figma: border/on-action = neutral/50 = #FAFAFA
+  --er-border-brand: var(--er-primary-default); // Figma: border/brand = primary/default = #3B82F6
+  --er-border-brand-subtle: var(
+    --er-primary-alpha-300
+  ); // Figma: border/brand-subtle = primary alpha/300 = #3B82F6 @ 20%
+  --er-border-success: var(--er-success-default); // Figma: border/success = success/default = #10B981
+  --er-border-success-subtle: var(
+    --er-success-alpha-300
+  ); // Figma: border/success-subtle = success alpha/300 = #10B981 @ 20%
+  --er-border-warning: var(--er-warning-default); // Figma: border/warning = warning/default = #F59E0B
+  --er-border-warning-subtle: var(
+    --er-warning-alpha-300
+  ); // Figma: border/warning-subtle = warning alpha/300 = #F59E0B @ 20%
+  --er-border-danger: var(--er-danger-default); // Figma: border/danger = danger/default = #EF4444
+  --er-border-danger-subtle: var(
+    --er-danger-alpha-300
+  ); // Figma: border/danger-subtle = danger alpha/300 = #EF4444 @ 20%
+  --er-border-information: var(
+    --er-information-default
+  ); // Figma: border/information = information/default = #0EA5E9
+  --er-border-information-subtle: var(
+    --er-information-alpha-300
+  ); // Figma: border/information-subtle = information alpha/300 = #0EA5E9 @ 20%
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // COMPONENT-SPECIFIC TOKENS
+  // ─────────────────────────────────────────────────────────────────────────
+  // Segmented control (Figma: component/segmented/*)
+  --er-component-segmented-item-hover: var(--er-action-neutral-subtle-hover);
+  --er-component-segmented-item-active: var(--er-neutral-white);
+  --er-surface-overlay: rgb(0, 0, 0, 0.5);
+}

package/dist/design-system/themes/core/themes/_dark-mode.scss

@@ -0,0 +1,165 @@
+// ============================================================================
+// DARK MODE TOKEN OVERRIDES
+// ============================================================================
+// Source: Figma UI Kit Core — Color Guidance — Dark Component Tokens
+// File: https://www.figma.com/design/HSOs8VcK5CKL8s15AqD42x/UI-KIT-CORE
+// Nodes:
+//   action  — 40424:8223
+//   surface — 40424:8245
+//   text    — 40424:8258
+//   icon    — 40424:8271
+//   border  — 40424:8283
+//
+// Applied when:
+//   - html.dark          (global preference)
+//   - [data-theme="dark"] (attribute-based)
+//   - .dark              (class-based — used by showcase toggle)
+// ============================================================================
+
+html.dark,
+[data-theme='dark'],
+.dark {
+  // ─────────────────────────────────────────────────────────────────────────
+  // ACTION
+  // ─────────────────────────────────────────────────────────────────────────
+  // Primary action — unchanged between light/dark
+  --er-action-primary-default: var(--er-primary-default); // primary/default = #3B82F6 (unchanged)
+  --er-action-primary-hover: var(--er-primary-600); // primary/600 = #2563EB (unchanged)
+  --er-action-primary-pressed: var(--er-primary-700); // primary/700 = #1D4CE0 (unchanged)
+
+  // Primary subtle — unchanged (alpha-based, works on dark)
+  --er-action-primary-subtle: var(--er-primary-alpha-50); // primary alpha/50 = #3B82F6 @ 3.92%
+  --er-action-primary-subtle-hover: var(--er-primary-alpha-100); // primary alpha/100 @ 7.84%
+  --er-action-primary-subtle-pressed: var(--er-primary-alpha-200); // primary alpha/200 @ 12.16%
+
+  // Neutral action — inverted from dark to light
+  --er-action-neutral-default: var(
+    --er-neutral-white
+  ); // neutral/white = #FFFFFF (light: neutral/950)
+  --er-action-neutral-hover: var(--er-neutral-100); // neutral/100 = #F4F4F5 (light: neutral/600)
+  --er-action-neutral-pressed: var(--er-neutral-300); // neutral/300 = #D4D4D8 (light: neutral/800)
+
+  // Neutral subtle — black base + elevation (white alpha) overlays
+  --er-action-neutral-subtle-default: var(
+    --er-neutral-black
+  ); // neutral/black = #000000 (light: neutral/white)
+  --er-action-neutral-subtle-hover: var(
+    --er-elevation-50
+  ); // elevation/50 = #F8F9FB @ 3.92% (light: neutral alpha/50)
+  --er-action-neutral-subtle-pressed: var(
+    --er-elevation-100
+  ); // elevation/100 = #F8F9FB @ 7.84% (light: neutral alpha/100)
+
+  // Danger action — shifted to -600/-700/-800 in dark mode for better contrast
+  --er-action-danger-default: var(--er-danger-600); // danger/600 = #DC2626 (light: danger/500)
+  --er-action-danger-hover: var(--er-danger-700); // danger/700 = #B91C1C (light: danger/600)
+  --er-action-danger-pressed: var(--er-danger-800); // danger/800 = #991B1B (light: danger/700)
+
+  // Danger subtle — unchanged (alpha-based, works on dark)
+  --er-action-danger-subtle-default: var(--er-danger-alpha-50); // danger alpha/50 @ 3.92%
+  --er-action-danger-subtle-hover: var(--er-danger-alpha-100); // danger alpha/100 @ 7.84%
+  --er-action-danger-subtle-pressed: var(--er-danger-alpha-200); // danger alpha/200 @ 12.16%
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // SURFACE
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-surface-page: var(--er-neutral-950); // surface/page = neutral/950 = #09090B
+  --er-surface-container: var(--er-neutral-900); // surface/container = neutral/900 = #18181B
+  --er-surface-elevated: var(--er-neutral-800); // surface/elevated = neutral/800 = #27272A
+  --er-surface-subtle: var(--er-neutral-800); // surface/subtle = neutral/800 = #27272A
+  --er-surface-muted: var(--er-neutral-700); // surface/muted = neutral/700 = #3F3F46
+  --er-surface-track: var(--er-elevation-50); // surface/track = elevation/50 (unchanged)
+  --er-surface-inverse: var(--er-neutral-50); // surface/inverse = neutral/50 = #FAFAFA
+
+  // Subtle surfaces — unchanged (alpha-based, work on dark)
+  --er-surface-neutral-subtle: var(--er-elevation-100); // surface/neutral-subtle = elevation/100 = #F8F9FB @ 7.84%
+  --er-surface-brand-subtle: var(--er-primary-alpha-100); // primary alpha/100 (unchanged)
+  --er-surface-success-subtle: var(--er-success-alpha-100); // success alpha/100 (unchanged)
+  --er-surface-warning-subtle: var(--er-warning-alpha-100); // warning alpha/100 (unchanged)
+  --er-surface-danger-subtle: var(--er-danger-alpha-100); // danger alpha/100 (unchanged)
+  --er-surface-information-subtle: var(--er-information-alpha-100); // information alpha/100 (unchanged)
+
+  // Fixed white — never changes between light/dark
+  --er-surface-fixed-white: var(--er-neutral-white); // always #FFFFFF
+
+  // Overlay / loading mask — dark translucent overlay so `.el-loading-mask`
+  // (v-loading / ElLoading) no longer washes out to white in dark mode.
+  // Maps to neutral/950 = #09090B at 90% (matches light-mode opacity).
+  --el-mask-color: rgba(9, 9, 11, 0.9);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // TEXT
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-text-primary: var(--er-elevation-950); // text/primary = elevation/950 = #F8F9FB @ 96.08%
+  --er-text-secondary: var(--er-elevation-800); // text/secondary = elevation/800 @ 72.16%
+  --er-text-tertiary: var(--er-elevation-600); // text/tertiary = elevation/600 @ 40%
+  --er-text-muted: var(--er-elevation-600); // text/muted = elevation/600 @ 40%
+  --er-text-inverse: var(--er-neutral-900); // text/inverse = neutral/900 = #18181B
+  --er-text-brand: var(--er-primary-default); // primary/default = #3B82F6 (unchanged)
+  --er-text-on-action: var(--er-neutral-50); // neutral/50 = #FAFAFA (unchanged)
+  --er-text-success: var(--er-success-default); // success/default = #10B981 (unchanged)
+  --er-text-warning: var(--er-warning-default); // warning/default = #F59E0B (unchanged)
+  --er-text-danger: var(--er-danger-default); // danger/default = #EF4444 (unchanged)
+  --er-text-information: var(--er-information-default); // information/default = #0EA5E9 (unchanged)
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // ICON
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-icon-primary: var(--er-elevation-950); // icon/primary = elevation/950
+  --er-icon-secondary: var(--er-elevation-800); // icon/secondary = elevation/800
+  --er-icon-tertiary: var(--er-elevation-700); // icon/tertiary = elevation/700 @ 56.08%
+  --er-icon-muted: var(--er-elevation-600); // icon/muted = elevation/600 @ 40%
+  --er-icon-inverse: var(--er-neutral-900); // icon/inverse = neutral/900 = #18181B
+  --er-icon-brand: var(--er-primary-default); // primary/default = #3B82F6 (unchanged)
+  --er-icon-on-action: var(--er-neutral-50); // neutral/50 = #FAFAFA (unchanged)
+  --er-icon-success: var(--er-success-default); // success/default = #10B981 (unchanged)
+  --er-icon-warning: var(--er-warning-default); // warning/default = #F59E0B (unchanged)
+  --er-icon-danger: var(--er-danger-default); // danger/default = #EF4444 (unchanged)
+  --er-icon-information: var(--er-information-default); // information/default = #0EA5E9 (unchanged)
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // BORDER
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-border-default: var(--er-elevation-200); // border/default = elevation/200 = #F8F9FB @ 12.16%
+  --er-border-subtle: var(--er-elevation-100); // border/subtle = elevation/100 @ 7.84%
+  --er-border-strong: var(--er-elevation-400); // border/strong = elevation/400 @ 23.92%
+  --er-border-on-action: var(--er-neutral-50); // neutral/50 = #FAFAFA (unchanged)
+
+  // Semantic borders — unchanged (alpha-based or solid brand hues)
+  --er-border-brand: var(--er-primary-default); // primary/default = #3B82F6 (unchanged)
+  --er-border-brand-subtle: var(--er-primary-alpha-300); // primary alpha/300 @ 20% (unchanged)
+
+  --er-border-success: var(--er-success-default); // success/default = #10B981 (unchanged)
+  --er-border-success-subtle: var(--er-success-alpha-300); // success alpha/300 @ 20% (unchanged)
+
+  --er-border-warning: var(--er-warning-default); // warning/default = #F59E0B (unchanged)
+  --er-border-warning-subtle: var(--er-warning-alpha-300); // warning alpha/300 @ 20% (unchanged)
+
+  --er-border-danger: var(--er-danger-default); // danger/default = #EF4444 (unchanged)
+  --er-border-danger-subtle: var(--er-danger-alpha-300); // danger alpha/300 @ 20% (unchanged)
+
+  --er-border-information: var(--er-information-default); // information/default = #0EA5E9 (unchanged)
+  --er-border-information-subtle: var(--er-information-alpha-300); // information alpha/300 @ 20% (unchanged)
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // SHADOW
+  // ─────────────────────────────────────────────────────────────────────────
+  // Ambient shadows (black with varying opacity)
+  --er-shadow-ambient-01: rgba(0, 0, 0, 0.16); // 16% (light: 4%)
+  --er-shadow-ambient-02: rgba(0, 0, 0, 0.2); // 20% (light: 6%)
+  --er-shadow-ambient-03: rgba(0, 0, 0, 0.24); // 24% (light: 8%)
+  --er-shadow-ambient-04: rgba(0, 0, 0, 0.28); // 28% (light: 10%)
+  --er-shadow-ambient-05: rgba(0, 0, 0, 0.32); // 32% (light: 12%)
+
+  // Highlight shadows (white with varying opacity)
+  --er-shadow-highlight-01: rgba(255, 255, 255, 0.03); // 3% (light: 0%)
+  --er-shadow-highlight-02: rgba(255, 255, 255, 0.05); // 5% (light: 0%)
+  --er-shadow-highlight-03: rgba(255, 255, 255, 0.07); // 7% (light: 0%)
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // COMPONENT-SPECIFIC TOKENS
+  // ─────────────────────────────────────────────────────────────────────────
+  // Segmented control (Figma: component/segmented/*)
+  --er-component-segmented-item-hover: var(--er-elevation-50); // elevation/50 = #F8F9FB @ 3.92%
+  --er-component-segmented-item-active: var(--er-neutral-700); // neutral/700 = #3F3F46
+}

package/dist/design-system/themes/core/themes/projects/base.scss

@@ -0,0 +1,11 @@
+// BASE PROJECT THEME
+// Default theme - uses blue as primary
+
+:root {
+  // Override Layer 2 aliases if needed
+  // Default: primary = blue (already set in _layer2-alias.scss)
+
+  // Can customize specific tokens here
+  // Example:
+  // --er-primary-500: var(--er-blue-600);  // Darker blue
+}