@almadar/ui 5.123.0 → 5.124.0

package/themes/retro.css

@@ -0,0 +1,410 @@
+/**
+ * Retro Theme — "80s/90s Vaporwave Arcade"
+ *
+ * CRT-terminal energy: pixel display type (VT323) over deep indigo-purple,
+ * hot magenta primary against electric cyan accents, hard offset shadows in
+ * solid contrasting colors like a screen-printed arcade cabinet, razor-sharp
+ * corners, and snappy linear micro-transitions that feel like a button press
+ * on an 8-bit machine. Dark mode is the native habitat; light mode is a
+ * lavender day-shift.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="retro-light"] {
+    /* Shadows - Hard offset, solid contrasting colors (arcade print) */
+    --shadow-main: 4px 4px 0 0 rgba(255, 46, 136, 0.55);
+    --shadow-sm: 2px 2px 0 0 rgba(255, 46, 136, 0.45);
+    --shadow-lg:
+        6px 6px 0 0 rgba(255, 46, 136, 0.55);
+    --shadow-inner: inset 2px 2px 0 0 rgba(109, 40, 217, 0.12);
+    --shadow-none: none;
+    --shadow-hover:
+        6px 6px 0 0 rgba(0, 188, 212, 0.7);
+    --shadow-active: 1px 1px 0 0 rgba(255, 46, 136, 0.55);
+
+    /* Border radius - Sharp arcade corners */
+    --radius-none: 0px;
+    --radius-sm: 2px;
+    --radius-md: 4px;
+    --radius-lg: 4px;
+    --radius-xl: 4px;
+    --radius-full: 9999px;
+
+    /* Border width - Chunky outlined look */
+    --border-width: 2px;
+    --border-width-thin: 1px;
+    --border-width-thick: 3px;
+
+    /* Colors - Lavender day-shift over deep indigo ink */
+    --color-primary: #e01a74;
+    --color-primary-hover: #c01563;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #e9d5ff;
+    --color-secondary-hover: #d8b4fe;
+    --color-secondary-foreground: #3b1a63;
+
+    --color-accent: #00798c;
+    --color-accent-foreground: #ffffff;
+
+    --color-muted: #e9d5ff;
+    --color-muted-foreground: #6b4a9e;
+
+    --color-background: #f3e8ff;
+    --color-foreground: #2a1650;
+    --color-card: #ffffff;
+    --color-card-foreground: #2a1650;
+    --color-surface: #e9d5ff;
+    --color-border: rgba(255, 46, 136, 0.45);
+    --color-input: rgba(0, 172, 193, 0.45);
+    --color-ring: #00acc1;
+
+    /* Semantic colors */
+    --color-error: #dc2626;
+    --color-error-foreground: #ffffff;
+    --color-success: #15803d;
+    --color-success-foreground: #ffffff;
+    --color-warning: #d97706;
+    --color-warning-foreground: #000000;
+    --color-info: #0e7490;
+    --color-info-foreground: #ffffff;
+
+    /* Typography - Mono body, pixel display, wide tracking */
+    --font-family:
+        "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --letter-spacing: 0.04em;
+    --line-height: 1.5;
+
+    /* Icon styling - Chunky strokes */
+    --icon-stroke-width: 2.5;
+    --icon-color: #e01a74;
+
+    /* Transitions - Snappy, mechanical, linear */
+    --transition-fast: 50ms;
+    --transition-normal: 80ms;
+    --transition-slow: 120ms;
+    --transition-timing: linear;
+
+    /* Hover/Active transforms - Button-press feel via shadow shift */
+    --hover-scale: 1.0;
+    --hover-translate-y: 0;
+    --hover-translate-x: 0;
+    --active-scale: 0.99;
+    --active-translate-y: 2px;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #00acc1;
+
+    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
+    /* Density axis — spacing scale */
+    --space-0: 0px;
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-7: 28px;
+    --space-8: 32px;
+    --space-9: 36px;
+    --space-10: 40px;
+    --space-11: 44px;
+    --space-12: 48px;
+    /* Density axis — per-element heights */
+    --button-height-sm: 30px;
+    --button-height-md: 38px;
+    --button-height-lg: 46px;
+    --input-height-sm: 30px;
+    --input-height-md: 38px;
+    --input-height-lg: 46px;
+    --row-height-compact: 32px;
+    --row-height-normal: 40px;
+    --row-height-spacious: 48px;
+    /* Density axis — per-element padding */
+    --card-padding-sm: 12px;
+    --card-padding-md: 18px;
+    --card-padding-lg: 24px;
+    --dialog-padding: 24px;
+    --section-gap: 32px;
+    /* Type axis — family triplet (aliases existing --font-family for backward compat) */
+    --font-family-display: "VT323", "Courier New", monospace;
+    --font-family-body: var(--font-family);
+    --font-family-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    /* Type axis — size scale */
+    --text-xs: 12px;
+    --leading-xs: 16px;
+    --text-sm: 14px;
+    --leading-sm: 20px;
+    --text-base: 16px;
+    --leading-base: 24px;
+    --text-lg: 18px;
+    --leading-lg: 28px;
+    --text-xl: 20px;
+    --leading-xl: 28px;
+    --text-2xl: 24px;
+    --leading-2xl: 32px;
+    --text-3xl: 30px;
+    --leading-3xl: 36px;
+    --text-4xl: 36px;
+    --leading-4xl: 40px;
+    --text-display-1: 48px;
+    --leading-display-1: 52px;
+    --text-display-2: 60px;
+    --leading-display-2: 64px;
+    /* Type axis — intent mapping */
+    --intent-heading-major-size: var(--text-2xl);
+    --intent-heading-major-weight: var(--font-weight-bold);
+    --intent-heading-major-leading: var(--leading-2xl);
+    --intent-heading-minor-size: var(--text-lg);
+    --intent-heading-minor-weight: var(--font-weight-bold);
+    --intent-heading-minor-leading: var(--leading-lg);
+    --intent-body-emphasis-size: var(--text-base);
+    --intent-body-emphasis-weight: var(--font-weight-medium);
+    --intent-body-emphasis-leading: var(--leading-base);
+    --intent-body-default-size: var(--text-sm);
+    --intent-body-default-weight: var(--font-weight-normal);
+    --intent-body-default-leading: var(--leading-sm);
+    --intent-body-quiet-size: var(--text-sm);
+    --intent-body-quiet-weight: var(--font-weight-normal);
+    --intent-body-quiet-leading: var(--leading-sm);
+    --intent-caption-size: var(--text-xs);
+    --intent-caption-weight: var(--font-weight-normal);
+    --intent-caption-leading: var(--leading-xs);
+    --intent-numeric-size: var(--text-sm);
+    --intent-numeric-weight: var(--font-weight-medium);
+    --intent-numeric-leading: var(--leading-sm);
+    /* Motion axis — duration palette */
+    --duration-instant: 0ms;
+    --duration-fast: var(--transition-fast);
+    --duration-normal: var(--transition-normal);
+    --duration-slow: var(--transition-slow);
+    --duration-dramatic: 400ms;
+    /* Motion axis — easing palette */
+    --easing-linear: linear;
+    --easing-standard: var(--transition-timing);
+    --easing-emphasized: linear;
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    /* Iconography axis */
+    --icon-family: lucide;
+    --icon-default-size: 16px;
+    /* Elevation axis — per-layer mapping */
+    --elevation-card: var(--shadow-sm);
+    --elevation-popover: var(--shadow-main);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-main);
+    /* Geometry axis — radius rhythm with intent */
+    --radius-container: var(--radius-sm);
+    --radius-interactive: var(--radius-sm);
+    --radius-pill: var(--radius-full);
+    /* Geometry axis — border-width rhythm */
+    --border-hairline: 1px;
+    --border-standard: var(--border-width);
+    --border-heavy: var(--border-width-thick);
+}
+
+/* ==========================================================================
+ * DARK MODE
+ * ========================================================================== */
+[data-theme="retro-dark"] {
+    /* Shadows - Hard offset, solid neon offsets (arcade cabinet) */
+    --shadow-main: 4px 4px 0 0 rgba(0, 229, 255, 0.9);
+    --shadow-sm: 2px 2px 0 0 rgba(0, 229, 255, 0.7);
+    --shadow-lg:
+        6px 6px 0 0 rgba(0, 229, 255, 0.9);
+    --shadow-inner: inset 2px 2px 0 0 rgba(255, 46, 136, 0.25);
+    --shadow-none: none;
+    --shadow-hover:
+        6px 6px 0 0 rgba(255, 46, 136, 0.9);
+    --shadow-active: 1px 1px 0 0 rgba(0, 229, 255, 0.9);
+
+    /* Border radius - Sharp arcade corners */
+    --radius-none: 0px;
+    --radius-sm: 2px;
+    --radius-md: 4px;
+    --radius-lg: 4px;
+    --radius-xl: 4px;
+    --radius-full: 9999px;
+
+    /* Border width - Chunky outlined look */
+    --border-width: 2px;
+    --border-width-thin: 1px;
+    --border-width-thick: 3px;
+
+    /* Colors - Deep indigo-purple vaporwave night */
+    --color-primary: #ff2e88;
+    --color-primary-hover: #ff5aa2;
+    --color-primary-foreground: #2b0216;
+
+    --color-secondary: #2d1b4e;
+    --color-secondary-hover: #3b2566;
+    --color-secondary-foreground: #efe3ff;
+
+    --color-accent: #00e5ff;
+    --color-accent-foreground: #00252b;
+
+    --color-muted: #2d1b4e;
+    --color-muted-foreground: #9d86d6;
+
+    --color-background: #1a0b2e;
+    --color-foreground: #efe3ff;
+    --color-card: #241242;
+    --color-card-foreground: #efe3ff;
+    --color-surface: #2d1b4e;
+    --color-border: rgba(255, 46, 136, 0.5);
+    --color-input: rgba(0, 229, 255, 0.5);
+    --color-ring: #00e5ff;
+
+    /* Semantic colors - Neon-bright for dark mode */
+    --color-error: #ff5252;
+    --color-error-foreground: #1a0000;
+    --color-success: #2ee66e;
+    --color-success-foreground: #00290f;
+    --color-warning: #ffb300;
+    --color-warning-foreground: #2a1a00;
+    --color-info: #00e5ff;
+    --color-info-foreground: #00252b;
+
+    /* Typography - Mono body, pixel display, wide tracking */
+    --font-family:
+        "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --letter-spacing: 0.04em;
+    --line-height: 1.5;
+
+    /* Icon styling - Chunky strokes */
+    --icon-stroke-width: 2.5;
+    --icon-color: #00e5ff;
+
+    /* Transitions - Snappy, mechanical, linear */
+    --transition-fast: 50ms;
+    --transition-normal: 80ms;
+    --transition-slow: 120ms;
+    --transition-timing: linear;
+
+    /* Hover/Active transforms - Button-press feel via shadow shift */
+    --hover-scale: 1.0;
+    --hover-translate-y: 0;
+    --hover-translate-x: 0;
+    --active-scale: 0.99;
+    --active-translate-y: 2px;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #00e5ff;
+
+    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
+    /* Density axis — spacing scale */
+    --space-0: 0px;
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-7: 28px;
+    --space-8: 32px;
+    --space-9: 36px;
+    --space-10: 40px;
+    --space-11: 44px;
+    --space-12: 48px;
+    /* Density axis — per-element heights */
+    --button-height-sm: 30px;
+    --button-height-md: 38px;
+    --button-height-lg: 46px;
+    --input-height-sm: 30px;
+    --input-height-md: 38px;
+    --input-height-lg: 46px;
+    --row-height-compact: 32px;
+    --row-height-normal: 40px;
+    --row-height-spacious: 48px;
+    /* Density axis — per-element padding */
+    --card-padding-sm: 12px;
+    --card-padding-md: 18px;
+    --card-padding-lg: 24px;
+    --dialog-padding: 24px;
+    --section-gap: 32px;
+    /* Type axis — family triplet (aliases existing --font-family for backward compat) */
+    --font-family-display: "VT323", "Courier New", monospace;
+    --font-family-body: var(--font-family);
+    --font-family-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    /* Type axis — size scale */
+    --text-xs: 12px;
+    --leading-xs: 16px;
+    --text-sm: 14px;
+    --leading-sm: 20px;
+    --text-base: 16px;
+    --leading-base: 24px;
+    --text-lg: 18px;
+    --leading-lg: 28px;
+    --text-xl: 20px;
+    --leading-xl: 28px;
+    --text-2xl: 24px;
+    --leading-2xl: 32px;
+    --text-3xl: 30px;
+    --leading-3xl: 36px;
+    --text-4xl: 36px;
+    --leading-4xl: 40px;
+    --text-display-1: 48px;
+    --leading-display-1: 52px;
+    --text-display-2: 60px;
+    --leading-display-2: 64px;
+    /* Type axis — intent mapping */
+    --intent-heading-major-size: var(--text-2xl);
+    --intent-heading-major-weight: var(--font-weight-bold);
+    --intent-heading-major-leading: var(--leading-2xl);
+    --intent-heading-minor-size: var(--text-lg);
+    --intent-heading-minor-weight: var(--font-weight-bold);
+    --intent-heading-minor-leading: var(--leading-lg);
+    --intent-body-emphasis-size: var(--text-base);
+    --intent-body-emphasis-weight: var(--font-weight-medium);
+    --intent-body-emphasis-leading: var(--leading-base);
+    --intent-body-default-size: var(--text-sm);
+    --intent-body-default-weight: var(--font-weight-normal);
+    --intent-body-default-leading: var(--leading-sm);
+    --intent-body-quiet-size: var(--text-sm);
+    --intent-body-quiet-weight: var(--font-weight-normal);
+    --intent-body-quiet-leading: var(--leading-sm);
+    --intent-caption-size: var(--text-xs);
+    --intent-caption-weight: var(--font-weight-normal);
+    --intent-caption-leading: var(--leading-xs);
+    --intent-numeric-size: var(--text-sm);
+    --intent-numeric-weight: var(--font-weight-medium);
+    --intent-numeric-leading: var(--leading-sm);
+    /* Motion axis — duration palette */
+    --duration-instant: 0ms;
+    --duration-fast: var(--transition-fast);
+    --duration-normal: var(--transition-normal);
+    --duration-slow: var(--transition-slow);
+    --duration-dramatic: 400ms;
+    /* Motion axis — easing palette */
+    --easing-linear: linear;
+    --easing-standard: var(--transition-timing);
+    --easing-emphasized: linear;
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    /* Iconography axis */
+    --icon-family: lucide;
+    --icon-default-size: 16px;
+    /* Elevation axis — per-layer mapping */
+    --elevation-card: var(--shadow-sm);
+    --elevation-popover: var(--shadow-main);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-main);
+    /* Geometry axis — radius rhythm with intent */
+    --radius-container: var(--radius-sm);
+    --radius-interactive: var(--radius-sm);
+    --radius-pill: var(--radius-full);
+    /* Geometry axis — border-width rhythm */
+    --border-hairline: 1px;
+    --border-standard: var(--border-width);
+    --border-heavy: var(--border-width-thick);
+}

package/themes/terminal.css

@@ -64,7 +64,7 @@
     --color-placeholder: #777777;
 
     /* Semantic colors - flat CRT signal palette */
-    --color-error: #ff0033;
+    --color-error: #e6002e;
     --color-error-foreground: #ffffff;
     --color-success: #00cc52;
     --color-success-foreground: #000000;

package/themes/trait-wars.css

@@ -61,7 +61,7 @@
 
     /* Muted — Dim parchment (disabled, tertiary) */
     --color-muted: #3a2f22;
-    --color-muted-foreground: #7a6a50;
+    --color-muted-foreground: #a89878;
 
     /* Surfaces */
     --color-background: #1a1410;
@@ -76,13 +76,13 @@
     --color-ring: #c9a84c;
 
     /* Semantic colors — warmed to match parchment palette */
-    --color-error: #c04040;
+    --color-error: #a03030;
     --color-error-foreground: #e8dcc8;
-    --color-success: #4a9e4a;
+    --color-success: #2a6a2a;
     --color-success-foreground: #e8dcc8;
     --color-warning: #d97706;
     --color-warning-foreground: #1a1410;
-    --color-info: #14b8a6;
+    --color-info: #0d6a63;
     --color-info-foreground: #e8dcc8;
 
     /* ======================================================================
@@ -317,12 +317,12 @@
     --color-secondary-foreground: #3a2f22;
 
     /* Accent — Teal resonance (same hue, darker for contrast) */
-    --color-accent: #0d9488;
+    --color-accent: #0f766e;
     --color-accent-foreground: #faf6ee;
 
     /* Muted — Faded parchment */
     --color-muted: #ede4d0;
-    --color-muted-foreground: #7a6a50;
+    --color-muted-foreground: #6e5f46;
 
     /* Surfaces — warm parchment hierarchy */
     --color-background: #faf6ee;
@@ -341,9 +341,9 @@
     --color-error-foreground: #faf6ee;
     --color-success: #15803d;
     --color-success-foreground: #faf6ee;
-    --color-warning: #b45309;
+    --color-warning: #d97706;
     --color-warning-foreground: #2a1f14;
-    --color-info: #0d9488;
+    --color-info: #0f766e;
     --color-info-foreground: #faf6ee;
 
     /* ======================================================================

package/themes/wireframe.css

@@ -44,7 +44,7 @@
     --color-accent-foreground: #ffffff;
 
     --color-muted: #f5f5f5;
-    --color-muted-foreground: #737373;
+    --color-muted-foreground: #666666;
 
     --color-background: #ffffff;
     --color-foreground: #000000;
@@ -58,7 +58,7 @@
     /* Semantic colors */
     --color-error: #dc2626;
     --color-error-foreground: #ffffff;
-    --color-success: #16a34a;
+    --color-success: #15803d;
     --color-success-foreground: #ffffff;
     --color-warning: #ca8a04;
     --color-warning-foreground: #000000;