@almadar/ui 5.123.0 → 5.124.0

package/themes/corporate.css

@@ -0,0 +1,411 @@
+/**
+ * Corporate Theme — "Enterprise Trust"
+ *
+ * The conservative B2B palette business clients actually pick: classic
+ * corporate blue on crisp white cards over a cool-gray canvas, navy-slate
+ * text, and a true enterprise dark mode in deep navy with softened blues.
+ * Everything is restrained — hairline 1px borders, 6px radii, small
+ * flat shadows with no glow, system fonts at 400/500/600 weights, and
+ * short standard-eased transitions with no hover theatrics. Generous
+ * whitespace signals confidence, not density.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="corporate-light"] {
+    /* Shadows - Small, flat, neutral (no glow, no offset) */
+    --shadow-main: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
+    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
+    --shadow-lg:
+        0 4px 12px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.05);
+    --shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.05);
+    --shadow-none: none;
+    --shadow-hover:
+        0 4px 10px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.06);
+    --shadow-active: 0 1px 2px rgba(15, 23, 42, 0.08);
+
+    /* Border radius - Restrained 6px rhythm */
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 10px;
+    --radius-full: 9999px;
+
+    /* Border width - Hairline */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Classic corporate blue on cool gray */
+    --color-primary: #1d4ed8;
+    --color-primary-hover: #1e40af;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #e2e8f0;
+    --color-secondary-hover: #cbd5e1;
+    --color-secondary-foreground: #1e293b;
+
+    --color-accent: #0369a1;
+    --color-accent-foreground: #ffffff;
+
+    --color-muted: #eef1f6;
+    --color-muted-foreground: #5b6b80;
+
+    --color-background: #f4f6f9;
+    --color-foreground: #1e293b;
+    --color-card: #ffffff;
+    --color-card-foreground: #1e293b;
+    --color-surface: #e8edf3;
+    --color-border: #d7dee8;
+    --color-input: #c3cdd9;
+    --color-ring: #1d4ed8;
+
+    /* Semantic colors */
+    --color-error: #b91c1c;
+    --color-error-foreground: #ffffff;
+    --color-success: #15803d;
+    --color-success-foreground: #ffffff;
+    --color-warning: #b45309;
+    --color-warning-foreground: #ffffff;
+    --color-info: #1d4ed8;
+    --color-info-foreground: #ffffff;
+
+    /* Typography - System stack, regular/medium/semibold */
+    --font-family:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 600;
+    --letter-spacing: normal;
+    --line-height: 1.5;
+
+    /* Icon styling - Thin lucide strokes */
+    --icon-stroke-width: 1.75;
+    --icon-color: #475569;
+
+    /* Transitions - Short, standard ease */
+    --transition-fast: 100ms;
+    --transition-normal: 150ms;
+    --transition-slow: 200ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms - None; state shows via color/shadow only */
+    --hover-scale: 1.0;
+    --hover-translate-y: 0;
+    --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: #1d4ed8;
+
+    /* 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 (slightly generous, enterprise comfort) */
+    --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: 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-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: cubic-bezier(0.2, 0, 0, 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-md);
+    --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="corporate-dark"] {
+    /* Shadows - Small, flat, deep (no glow, no offset) */
+    --shadow-main: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
+    --shadow-lg:
+        0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.35);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-none: none;
+    --shadow-hover:
+        0 4px 10px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
+    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.4);
+
+    /* Border radius - Restrained 6px rhythm */
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 10px;
+    --radius-full: 9999px;
+
+    /* Border width - Hairline */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Enterprise dark: deep navy, softened blue */
+    --color-primary: #5b8def;
+    --color-primary-hover: #7aa5f5;
+    --color-primary-foreground: #0d1526;
+
+    --color-secondary: #1c2942;
+    --color-secondary-hover: #24344f;
+    --color-secondary-foreground: #dbe3f0;
+
+    --color-accent: #7aa5f5;
+    --color-accent-foreground: #0d1526;
+
+    --color-muted: #1a2438;
+    --color-muted-foreground: #8b98ad;
+
+    --color-background: #0d1526;
+    --color-foreground: #dbe3f0;
+    --color-card: #14203a;
+    --color-card-foreground: #dbe3f0;
+    --color-surface: #182742;
+    --color-border: #2a3a58;
+    --color-input: #35486b;
+    --color-ring: #5b8def;
+
+    /* Semantic colors - Softened for dark mode */
+    --color-error: #f87171;
+    --color-error-foreground: #0d1526;
+    --color-success: #4ade80;
+    --color-success-foreground: #0d1526;
+    --color-warning: #fbbf24;
+    --color-warning-foreground: #0d1526;
+    --color-info: #7aa5f5;
+    --color-info-foreground: #0d1526;
+
+    /* Typography - System stack, regular/medium/semibold */
+    --font-family:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 600;
+    --letter-spacing: normal;
+    --line-height: 1.5;
+
+    /* Icon styling - Thin lucide strokes */
+    --icon-stroke-width: 1.75;
+    --icon-color: #94a3b8;
+
+    /* Transitions - Short, standard ease */
+    --transition-fast: 100ms;
+    --transition-normal: 150ms;
+    --transition-slow: 200ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms - None; state shows via color/shadow only */
+    --hover-scale: 1.0;
+    --hover-translate-y: 0;
+    --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: #5b8def;
+
+    /* 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 (slightly generous, enterprise comfort) */
+    --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: 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-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: cubic-bezier(0.2, 0, 0, 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-md);
+    --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);
+}

package/themes/game-adventure.css

@@ -56,9 +56,9 @@
     --color-accent: #e0a52c;
     --color-accent-foreground: #241608;
 
-    /* Muted */
-    --color-muted: #4a3018;
-    --color-muted-foreground: #b3966e;
+    /* Muted — deep parchment inset (light, like the card, so muted text passes on both) */
+    --color-muted: #e8d6ae;
+    --color-muted-foreground: #6b4f2a;
 
     /* Surfaces */
     --color-background: #241608;

package/themes/game-rpg.css

@@ -55,12 +55,12 @@
 
     /* Muted */
     --color-muted: #3a2a18;
-    --color-muted-foreground: #b39a78;
+    --color-muted-foreground: #e0cba8;
 
     /* Surfaces */
     --color-background: #1a1108;
     --color-foreground: #f5e6cf;
-    --color-card: #97714a;
+    --color-card: #6e4f30;
     --color-card-foreground: #fff5e0;
     --color-surface: #2a1d10;
 

package/themes/game-sci-fi.css

@@ -59,7 +59,7 @@
 
     /* Muted — dim HUD grey */
     --color-muted: #22314c;
-    --color-muted-foreground: #7e93b3;
+    --color-muted-foreground: #8b9bb6;
 
     /* Surfaces */
     --color-background: #0a0e1a;

package/themes/game-ui-pack.css

@@ -55,8 +55,8 @@
     --color-accent-foreground: #241a00;
 
     /* Muted */
-    --color-muted: #33373d;
-    --color-muted-foreground: #9aa0a8;
+    --color-muted: #b9bec6;
+    --color-muted-foreground: #454a51;
 
     /* Surfaces */
     --color-background: #1b1e22;

package/themes/gazette.css

@@ -40,8 +40,8 @@
     --color-primary-hover: #8c4329;
     --color-primary-foreground: #fdfbf6;
 
-    --color-secondary: #6b8e5a;
-    --color-secondary-hover: #5a7a4b;
+    --color-secondary: #5c7a4d;
+    --color-secondary-hover: #4f6c41;
     --color-secondary-foreground: #fdfbf6;
 
     --color-accent: #a85436;