@almadar/ui 5.122.14 → 5.124.0

package/themes/glass.css

@@ -0,0 +1,428 @@
+/**
+ * Glass Theme — "Glassmorphism"
+ *
+ * Frosted-glass surfaces in the Apple/macOS Big Sur lineage. Cards, surfaces,
+ * and muted fills are translucent rgba layers floating over a softly tinted
+ * background, edged by hairline luminous borders and lifted by soft layered
+ * shadows with a subtle colored glow. Large radii, light Inter weights, and
+ * springy slightly-slow motion give every interaction a glassy settle; the
+ * companion backdrop-filter rules at the bottom of the file supply the blur.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="glass-light"] {
+    /* Shadows - Soft layered with a subtle indigo glow */
+    --shadow-main:
+        0 4px 16px rgba(99, 102, 241, 0.1), 0 2px 6px rgba(15, 23, 42, 0.05);
+    --shadow-sm: 0 1px 6px rgba(99, 102, 241, 0.08);
+    --shadow-lg:
+        0 12px 32px rgba(99, 102, 241, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06);
+    --shadow-inner: inset 0 1px 4px rgba(99, 102, 241, 0.08);
+    --shadow-none: none;
+    --shadow-hover:
+        0 12px 36px rgba(99, 102, 241, 0.2), 0 4px 12px rgba(139, 92, 246, 0.08);
+    --shadow-active: 0 2px 8px rgba(99, 102, 241, 0.12);
+
+    /* Border radius - Large, soft glass panes */
+    --radius-none: 0px;
+    --radius-sm: 10px;
+    --radius-md: 14px;
+    --radius-lg: 18px;
+    --radius-xl: 20px;
+    --radius-full: 9999px;
+
+    /* Border width - Hairline luminous edges */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Cool periwinkle light with translucent panes */
+    --color-primary: #5b5df0;
+    --color-primary-hover: #4f46e5;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: rgba(255, 255, 255, 0.55);
+    --color-secondary-hover: rgba(255, 255, 255, 0.7);
+    --color-secondary-foreground: #3f3d56;
+
+    --color-accent: #8347f3;
+    --color-accent-foreground: #ffffff;
+
+    --color-muted: rgba(255, 255, 255, 0.5);
+    --color-muted-foreground: #5d6a7f;
+
+    --color-background: #eef1f8;
+    --color-foreground: #1e2235;
+    --color-card: rgba(255, 255, 255, 0.62);
+    --color-card-foreground: #1e2235;
+    --color-surface: rgba(255, 255, 255, 0.55);
+    --color-border: rgba(255, 255, 255, 0.65);
+    --color-input: rgba(99, 102, 241, 0.25);
+    --color-ring: #6366f1;
+
+    /* Semantic colors */
+    --color-error: #e11d48;
+    --color-error-foreground: #ffffff;
+    --color-success: #047857;
+    --color-success-foreground: #ffffff;
+    --color-warning: #d97706;
+    --color-warning-foreground: #000000;
+    --color-info: #0270ae;
+    --color-info-foreground: #ffffff;
+
+    /* Typography - Light, airy Inter */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 650;
+    --letter-spacing: -0.01em;
+    --line-height: 1.6;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.5;
+    --icon-color: #6366f1;
+
+    /* Transitions - Springy, glassy settle */
+    --transition-fast: 120ms;
+    --transition-normal: 220ms;
+    --transition-slow: 320ms;
+    --transition-timing: cubic-bezier(0.34, 1.3, 0.64, 1);
+
+    /* Hover/Active transforms - Gentle lift, like a pane catching light */
+    --hover-scale: 1.01;
+    --hover-translate-y: -1px;
+    --hover-translate-x: 0;
+    --active-scale: 0.99;
+    --active-translate-y: 0;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #6366f1;
+
+    /* 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: 32px;
+    --button-height-md: 40px;
+    --button-height-lg: 48px;
+    --input-height-sm: 32px;
+    --input-height-md: 40px;
+    --input-height-lg: 48px;
+    --row-height-compact: 36px;
+    --row-height-normal: 44px;
+    --row-height-spacious: 52px;
+    /* Density axis — per-element padding */
+    --card-padding-sm: 16px;
+    --card-padding-md: 20px;
+    --card-padding-lg: 28px;
+    --dialog-padding: 28px;
+    --section-gap: 40px;
+    /* Type axis — family triplet (aliases existing --font-family for backward compat) */
+    --font-family-display: var(--font-family);
+    --font-family-body: var(--font-family);
+    --font-family-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-medium);
+    --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: 800ms;
+    /* Motion axis — easing palette */
+    --easing-linear: linear;
+    --easing-standard: var(--transition-timing);
+    --easing-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
+    --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-lg);
+    --radius-interactive: var(--radius-md);
+    --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="glass-dark"] {
+    /* Shadows - Deep layered drops with an indigo/violet glow */
+    --shadow-main:
+        0 4px 18px rgba(0, 0, 0, 0.45), 0 0 14px rgba(129, 140, 248, 0.12);
+    --shadow-sm:
+        0 1px 6px rgba(0, 0, 0, 0.35), 0 0 8px rgba(129, 140, 248, 0.08);
+    --shadow-lg:
+        0 14px 40px rgba(0, 0, 0, 0.55), 0 0 28px rgba(129, 140, 248, 0.16);
+    --shadow-inner:
+        inset 0 1px 4px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(129, 140, 248, 0.06);
+    --shadow-none: none;
+    --shadow-hover:
+        0 14px 44px rgba(0, 0, 0, 0.6), 0 0 32px rgba(167, 139, 250, 0.22);
+    --shadow-active:
+        0 2px 8px rgba(0, 0, 0, 0.4), 0 0 10px rgba(129, 140, 248, 0.1);
+
+    /* Border radius - Large, soft glass panes */
+    --radius-none: 0px;
+    --radius-sm: 10px;
+    --radius-md: 14px;
+    --radius-lg: 18px;
+    --radius-xl: 20px;
+    --radius-full: 9999px;
+
+    /* Border width - Hairline luminous edges */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Deep indigo-slate with translucent panes */
+    --color-primary: #818cf8;
+    --color-primary-hover: #6b72f5;
+    --color-primary-foreground: #0b1020;
+
+    --color-secondary: rgba(30, 36, 66, 0.55);
+    --color-secondary-hover: rgba(38, 45, 80, 0.65);
+    --color-secondary-foreground: #e2e5f4;
+
+    --color-accent: #a78bfa;
+    --color-accent-foreground: #160b2e;
+
+    --color-muted: rgba(30, 36, 66, 0.55);
+    --color-muted-foreground: #8f96b8;
+
+    --color-background: #0b1020;
+    --color-foreground: #e7e9f5;
+    --color-card: rgba(22, 27, 51, 0.58);
+    --color-card-foreground: #e7e9f5;
+    --color-surface: rgba(30, 36, 66, 0.55);
+    --color-border: rgba(255, 255, 255, 0.14);
+    --color-input: rgba(255, 255, 255, 0.2);
+    --color-ring: #818cf8;
+
+    /* Semantic colors - Soft-bright for dark mode */
+    --color-error: #fb7185;
+    --color-error-foreground: #000000;
+    --color-success: #34d399;
+    --color-success-foreground: #000000;
+    --color-warning: #fbbf24;
+    --color-warning-foreground: #000000;
+    --color-info: #38bdf8;
+    --color-info-foreground: #000000;
+
+    /* Typography - Light, airy Inter */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 650;
+    --letter-spacing: -0.01em;
+    --line-height: 1.6;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.5;
+    --icon-color: #818cf8;
+
+    /* Transitions - Springy, glassy settle */
+    --transition-fast: 120ms;
+    --transition-normal: 220ms;
+    --transition-slow: 320ms;
+    --transition-timing: cubic-bezier(0.34, 1.3, 0.64, 1);
+
+    /* Hover/Active transforms - Gentle lift, like a pane catching light */
+    --hover-scale: 1.01;
+    --hover-translate-y: -1px;
+    --hover-translate-x: 0;
+    --active-scale: 0.99;
+    --active-translate-y: 0;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #818cf8;
+
+    /* 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: 32px;
+    --button-height-md: 40px;
+    --button-height-lg: 48px;
+    --input-height-sm: 32px;
+    --input-height-md: 40px;
+    --input-height-lg: 48px;
+    --row-height-compact: 36px;
+    --row-height-normal: 44px;
+    --row-height-spacious: 52px;
+    /* Density axis — per-element padding */
+    --card-padding-sm: 16px;
+    --card-padding-md: 20px;
+    --card-padding-lg: 28px;
+    --dialog-padding: 28px;
+    --section-gap: 40px;
+    /* Type axis — family triplet (aliases existing --font-family for backward compat) */
+    --font-family-display: var(--font-family);
+    --font-family-body: var(--font-family);
+    --font-family-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-medium);
+    --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: 800ms;
+    /* Motion axis — easing palette */
+    --easing-linear: linear;
+    --easing-standard: var(--transition-timing);
+    --easing-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
+    --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-lg);
+    --radius-interactive: var(--radius-md);
+    --radius-pill: var(--radius-full);
+    /* Geometry axis — border-width rhythm */
+    --border-hairline: 1px;
+    --border-standard: var(--border-width);
+    --border-heavy: var(--border-width-thick);
+}
+
+/* ==========================================================================
+ * SURFACE BLUR
+ * ========================================================================== */
+/* Frosted backdrop for painted card/surface utilities */
+[data-theme="glass-light"] .bg-card,
+[data-theme="glass-light"] .bg-surface {
+    backdrop-filter: blur(14px) saturate(1.4);
+}
+[data-theme="glass-dark"] .bg-card,
+[data-theme="glass-dark"] .bg-surface {
+    backdrop-filter: blur(18px) saturate(1.3);
+}

package/themes/index.css

@@ -8,10 +8,11 @@
  * IMPORTANT: @import must precede all other statements (Vite requirement).
  */
 
-/* Layer 1 skin axes — font families consumed by prism / gazette / terminal / atelier / kiosk.
+/* Layer 1 skin axes — font families consumed by prism / gazette / terminal / atelier / kiosk,
+ * plus VT323 for retro's pixel display type.
  * Combined into a single Google Fonts request for fewer round-trips. font-display: swap
  * means body text renders immediately with the fallback chain while the web fonts load. */
-@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;700;900&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;700;900&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&family=VT323&display=swap");
 
 /* Shared base layer — atelier's typography + density at :root, inherited
  * by every theme that doesn't override. MUST come before per-theme
@@ -31,18 +32,7 @@
 @import "./game-rpg.css";
 
 /* Extended themes */
-@import "./ocean.css";
-@import "./forest.css";
-@import "./sunset.css";
-@import "./lavender.css";
-@import "./rose.css";
-@import "./slate.css";
-@import "./ember.css";
-@import "./midnight.css";
-@import "./sand.css";
 @import "./neon.css";
-@import "./arctic.css";
-@import "./copper.css";
 
 /* Layer 1 skin axes — truly-unique themes (see docs/Almadar_Std_Variations.md) */
 @import "./prism.css";
@@ -54,6 +44,12 @@
 @import "./notion-editorial.css";
 @import "./bloomberg-dense.css";
 
+/* Personality themes — high-demand web styles (see themes/_contract.md) */
+@import "./glass.css";
+@import "./clay.css";
+@import "./retro.css";
+@import "./corporate.css";
+
 /**
  * Minimal element reset for @almadar/ui components.
  *

package/themes/kiosk.css

@@ -43,7 +43,7 @@
     --color-secondary-hover: #ffe1dd;
     --color-secondary-foreground: #1a1a1a;
 
-    --color-accent: #22c8be;
+    --color-accent: #0f766e;
     --color-accent-foreground: #ffffff;
 
     --color-muted: #f5f5f4;
@@ -59,13 +59,13 @@
     --color-ring: #ff5a4f;
 
     /* Semantic colors - Saturated, cheerful */
-    --color-error: #ef4444;
+    --color-error: #b91c1c;
     --color-error-foreground: #ffffff;
-    --color-success: #16a34a;
+    --color-success: #15803d;
     --color-success-foreground: #ffffff;
     --color-warning: #f59e0b;
     --color-warning-foreground: #1a1a1a;
-    --color-info: #0ea5e9;
+    --color-info: #0369a1;
     --color-info-foreground: #ffffff;
 
     /* Typography - Chunky, rounded geometric */
@@ -241,7 +241,7 @@
     /* Colors - Deep navy background, coral primary, turquoise pop */
     --color-primary: #ff6b5e;
     --color-primary-hover: #ff8478;
-    --color-primary-foreground: #ffffff;
+    --color-primary-foreground: #1a0606;
 
     --color-secondary: #1c2a44;
     --color-secondary-hover: #2a3a5c;

package/themes/linear-clean.css

@@ -71,7 +71,7 @@
 
     --color-error: #d92d20;
     --color-error-foreground: #ffffff;
-    --color-success: #079455;
+    --color-success: #067647;
     --color-success-foreground: #ffffff;
     --color-warning: #b54708;
     --color-warning-foreground: #ffffff;

package/themes/minimalist.css

@@ -46,7 +46,7 @@
     --color-accent-foreground: #fafafa;
 
     --color-muted: #f4f4f5;
-    --color-muted-foreground: #71717a;
+    --color-muted-foreground: #65656e;
 
     --color-background: #f8fafc;
     --color-foreground: #18181b;
@@ -60,7 +60,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;

package/themes/neon.css

@@ -45,11 +45,11 @@
     --color-secondary-hover: #99f6e4;
     --color-secondary-foreground: #134e4a;
 
-    --color-accent: #ec4899;
+    --color-accent: #be185d;
     --color-accent-foreground: #ffffff;
 
     --color-muted: #ccfbf1;
-    --color-muted-foreground: #64748b;
+    --color-muted-foreground: #475569;
 
     --color-background: #f0fdfa;
     --color-foreground: #134e4a;
@@ -63,7 +63,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;

package/themes/notion-editorial.css

@@ -47,7 +47,7 @@
     --color-secondary-hover: #ebe7dc;
     --color-secondary-foreground: #191919;
 
-    --color-accent: #ff6b35;
+    --color-accent: #d13f0a;
     --color-accent-foreground: #fefdf9;
 
     --color-muted: #f4f1ea;

package/themes/prism.css

@@ -44,7 +44,7 @@
     --color-accent-foreground: #1a2e05;
 
     --color-muted: #f1f5f9;
-    --color-muted-foreground: #64748b;
+    --color-muted-foreground: #59677c;
 
     --color-background: #fafafa;
     --color-foreground: #0f172a;
@@ -58,9 +58,9 @@
     /* Semantic colors */
     --color-error: #dc2626;
     --color-error-foreground: #ffffff;
-    --color-success: #16a34a;
+    --color-success: #15803d;
     --color-success-foreground: #ffffff;
-    --color-warning: #d97706;
+    --color-warning: #b45309;
     --color-warning-foreground: #ffffff;
     --color-info: #2563eb;
     --color-info-foreground: #ffffff;