@almadar/ui 5.123.0 → 5.125.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.123.0",
+  "version": "5.125.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -117,12 +117,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": "^10.32.0",
-    "@almadar/evaluator": "^2.32.0",
-    "@almadar/logger": "^1.9.0",
-    "@almadar/runtime": "^6.35.0",
-    "@almadar/std": "^16.142.0",
-    "@almadar/syntax": "^1.11.0",
+    "@almadar/core": "^10.34.0",
+    "@almadar/evaluator": "^2.35.0",
+    "@almadar/logger": "^1.10.0",
+    "@almadar/runtime": "^6.37.0",
+    "@almadar/std": "^16.144.0",
+    "@almadar/syntax": "^1.12.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -171,7 +171,7 @@
     }
   },
   "devDependencies": {
-    "@almadar/eslint-plugin": "^2.14.0",
+    "@almadar/eslint-plugin": "^2.15.0",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.6.0",
     "@react-three/postprocessing": "3.0.4",
@@ -208,9 +208,10 @@
     "tsup": "^8.0.0",
     "tsx": "^4.7.0",
     "turbo": "^2.8.17",
-    "typescript": "^5.4.0",
     "vite": "^5.2.0",
-    "vitest": "^3.2.6"
+    "vitest": "^3.2.6",
+    "@typescript/native": "npm:typescript@^7.0.2",
+    "typescript": "npm:@typescript/typescript6@^6.0.2"
   },
   "repository": {
     "type": "git",
@@ -233,6 +234,7 @@
     "build": "NODE_OPTIONS=--max-old-space-size=8192 tsup",
     "build:watch": "tsup --watch",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint --no-warn-ignored --max-warnings 0 ."
+    "lint": "eslint --no-warn-ignored --max-warnings 0 .",
+    "verify:themes": "node scripts/theme-contrast-audit.mjs"
   }
 }

package/themes/_contract.md

@@ -221,3 +221,5 @@ instantly regardless of theme.
 3. **No raw pixel literals in components**. All dimensional values flow through these tokens or through Tailwind utilities backed by them in `tailwind-preset.cjs`. Components that hardcode `text-[10px]` or `min-w-[44px]` are migration targets.
 4. **Icon family swap is runtime-resolved**. `--icon-family` is read by the icon resolver in `@almadar/ui`; setting the variable in a theme does not require component edits.
 5. **Wireframe and trait-wars exceptions**. Wireframe's `--easing-standard` is `linear` not the default cubic-bezier; trait-wars's iconography may remain `lucide` even if its visual personality diverges. Document any per-theme override at the top of the theme file.
+6. **Contrast is gated.** Every theme's canonical foreground/fill pairs must pass WCAG AA 4.5:1 — enforced by `scripts/theme-contrast-audit.mjs` (`pnpm verify:themes`), which runs in CI and before every npm publish. A new or edited theme that fails the audit blocks the publish.
+7. **No hardcoded palette colors in components.** Components must consume these tokens only (no `text-white`, `bg-gray-800`, `border-indigo-300`, `text-[#hex]`). Enforced by the `almadar/no-hardcoded-colors` ESLint rule (`@almadar/eslint-plugin`, enabled in this package's `eslint.config.cjs`). The single sanctioned exception is media-overlay chrome (white text / dark scrims painted over images or video), which requires an inline `eslint-disable-next-line almadar/no-hardcoded-colors` comment stating the reason.

package/themes/almadar-website.css

@@ -45,7 +45,7 @@
     --color-accent-foreground: #0f172a;
 
     --color-muted: #f1f5f9;
-    --color-muted-foreground: #64748b;
+    --color-muted-foreground: #5c6b80;
 
     --color-background: #ffffff;
     --color-foreground: #0f172a;
@@ -61,11 +61,11 @@
     /* Semantic colors */
     --color-error: #dc2626;
     --color-error-foreground: #ffffff;
-    --color-success: #22c55e;
+    --color-success: #15803d;
     --color-success-foreground: #ffffff;
     --color-warning: #f59e0b;
     --color-warning-foreground: #000000;
-    --color-info: #3b82f6;
+    --color-info: #1d4ed8;
     --color-info-foreground: #ffffff;
 
     /* Icon styling */

package/themes/almadar.css

@@ -43,11 +43,11 @@
     --color-secondary-hover: #e2e8f0;
     --color-secondary-foreground: #0f172a;
 
-    --color-accent: #06b6d4;
+    --color-accent: #0e7490;
     --color-accent-foreground: #ffffff;
 
     --color-muted: #f1f5f9;
-    --color-muted-foreground: #64748b;
+    --color-muted-foreground: #607080;
 
     --color-background: #f8fafc;
     --color-foreground: #0f172a;
@@ -61,11 +61,11 @@
     /* 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;
-    --color-info: #0ea5e9;
+    --color-info: #0369a1;
     --color-info-foreground: #ffffff;
 
     /* Icon styling */

package/themes/bloomberg-dense.css

@@ -71,7 +71,7 @@
 
     --color-error: #dc2626;
     --color-error-foreground: #ffffff;
-    --color-success: #16a34a;
+    --color-success: #15803d;
     --color-success-foreground: #ffffff;
     --color-warning: #f59e0b;
     --color-warning-foreground: #0a0e1a;
@@ -244,7 +244,7 @@
     --color-accent-foreground: #0a0e1a;
 
     --color-muted: #131826;
-    --color-muted-foreground: #6b7a94;
+    --color-muted-foreground: #8a98b3;
 
     --color-background: #0a0e1a;
     --color-foreground: #c7d2e0;

package/themes/clay.css

@@ -0,0 +1,417 @@
+/**
+ * Clay Theme — "Claymorphism / Soft UI"
+ *
+ * Puffy pastel 3D surfaces that look molded from soft clay. Large diffuse
+ * drop shadows paired with an inner top highlight make cards and buttons
+ * bulge gently off the background. Big soft radii, a lavender-pink / mint /
+ * cream pastel palette, chubby paddings, rounded Manrope type, and a quick
+ * spring bounce on every interaction give it a friendly consumer-SaaS feel.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="clay-light"] {
+    /* Shadows - Soft diffuse drop + inner top highlight (the clay bulge) */
+    --shadow-main:
+        0 12px 24px -6px rgba(93, 62, 110, 0.18), inset 0 2px 4px rgba(255, 255, 255, 0.7);
+    --shadow-sm:
+        0 6px 12px -4px rgba(93, 62, 110, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.6);
+    --shadow-lg:
+        0 20px 40px -8px rgba(93, 62, 110, 0.22), inset 0 2px 6px rgba(255, 255, 255, 0.7);
+    --shadow-inner:
+        inset 0 2px 4px rgba(255, 255, 255, 0.7), inset 0 -3px 6px rgba(93, 62, 110, 0.12);
+    --shadow-none: none;
+    --shadow-hover:
+        0 16px 32px -6px rgba(93, 62, 110, 0.24), inset 0 2px 4px rgba(255, 255, 255, 0.8);
+    --shadow-active:
+        0 4px 8px -2px rgba(93, 62, 110, 0.15), inset 0 3px 6px rgba(93, 62, 110, 0.12);
+
+    /* Border radius - Big, soft, puffy */
+    --radius-none: 0px;
+    --radius-sm: 12px;
+    --radius-md: 16px;
+    --radius-lg: 20px;
+    --radius-xl: 24px;
+    --radius-full: 9999px;
+
+    /* Border width - Barely-there, clay edges are soft */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Pastel lavender-pink on warm cream */
+    --color-primary: #b97fd8;
+    --color-primary-hover: #a569c7;
+    --color-primary-foreground: #251038;
+
+    --color-secondary: #c9ecdc;
+    --color-secondary-hover: #b2e3cd;
+    --color-secondary-foreground: #1f4a38;
+
+    --color-accent: #f2a172;
+    --color-accent-foreground: #4a2410;
+
+    --color-muted: #f2e9e4;
+    --color-muted-foreground: #6a5560;
+
+    --color-background: #faf5f0;
+    --color-foreground: #3d2c3a;
+    --color-card: #fffdf9;
+    --color-card-foreground: #3d2c3a;
+    --color-surface: #f2e8e2;
+    --color-border: rgba(93, 62, 110, 0.14);
+    --color-input: rgba(93, 62, 110, 0.2);
+    --color-ring: #b97fd8;
+
+    /* Semantic colors - Softened pastels, still readable */
+    --color-error: #c92847;
+    --color-error-foreground: #ffffff;
+    --color-success: #20835b;
+    --color-success-foreground: #ffffff;
+    --color-warning: #e3a63d;
+    --color-warning-foreground: #3d2a00;
+    --color-info: #3f6fd1;
+    --color-info-foreground: #ffffff;
+
+    /* Typography - Rounded, friendly, medium-plus */
+    --font-family:
+        "Manrope", "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 500;
+    --font-weight-medium: 600;
+    --font-weight-bold: 800;
+    --letter-spacing: 0.005em;
+    --line-height: 1.55;
+
+    /* Icon styling - Chubby strokes */
+    --icon-stroke-width: 2.25;
+    --icon-color: #b97fd8;
+
+    /* Transitions - Bouncy but quick */
+    --transition-fast: 120ms;
+    --transition-normal: 180ms;
+    --transition-slow: 280ms;
+    --transition-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+    /* Hover/Active transforms - Puffy press-and-bounce */
+    --hover-scale: 1.03;
+    --hover-translate-y: -1px;
+    --hover-translate-x: 0;
+    --active-scale: 0.97;
+    --active-translate-y: 1px;
+
+    /* Focus ring */
+    --focus-ring-width: 3px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: rgba(185, 127, 216, 0.5);
+
+    /* 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 taller, chubby) */
+    --button-height-sm: 32px;
+    --button-height-md: 40px;
+    --button-height-lg: 50px;
+    --input-height-sm: 32px;
+    --input-height-md: 40px;
+    --input-height-lg: 50px;
+    --row-height-compact: 36px;
+    --row-height-normal: 44px;
+    --row-height-spacious: 56px;
+    /* Density axis — per-element padding (generous, pillowy) */
+    --card-padding-sm: 16px;
+    --card-padding-md: 20px;
+    --card-padding-lg: 32px;
+    --dialog-padding: 32px;
+    --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: 700ms;
+    /* Motion axis — easing palette (spring IS the standard here) */
+    --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: 18px;
+    /* 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="clay-dark"] {
+    /* Shadows - Deep diffuse drop + faint inner top light */
+    --shadow-main:
+        0 14px 28px -6px rgba(0, 0, 0, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.08);
+    --shadow-sm:
+        0 8px 16px -4px rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.06);
+    --shadow-lg:
+        0 24px 48px -8px rgba(0, 0, 0, 0.55), inset 0 2px 4px rgba(255, 255, 255, 0.1);
+    --shadow-inner:
+        inset 0 2px 4px rgba(255, 255, 255, 0.06), inset 0 -4px 8px rgba(0, 0, 0, 0.35);
+    --shadow-none: none;
+    --shadow-hover:
+        0 18px 36px -6px rgba(0, 0, 0, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.1);
+    --shadow-active:
+        0 4px 10px -2px rgba(0, 0, 0, 0.4), inset 0 3px 8px rgba(0, 0, 0, 0.4);
+
+    /* Border radius - Big, soft, puffy */
+    --radius-none: 0px;
+    --radius-sm: 12px;
+    --radius-md: 16px;
+    --radius-lg: 20px;
+    --radius-xl: 24px;
+    --radius-full: 9999px;
+
+    /* Border width - Barely-there, clay edges are soft */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Muted pastels on deep warm plum */
+    --color-primary: #cf9ce8;
+    --color-primary-hover: #bb84d8;
+    --color-primary-foreground: #2a1538;
+
+    --color-secondary: #35544a;
+    --color-secondary-hover: #406457;
+    --color-secondary-foreground: #c8ecdc;
+
+    --color-accent: #f0ab82;
+    --color-accent-foreground: #3a1c0a;
+
+    --color-muted: #3a2d42;
+    --color-muted-foreground: #bfa8c4;
+
+    --color-background: #241c2a;
+    --color-foreground: #f3e9f2;
+    --color-card: #2f2438;
+    --color-card-foreground: #f3e9f2;
+    --color-surface: #3a2d42;
+    --color-border: rgba(207, 156, 232, 0.16);
+    --color-input: rgba(207, 156, 232, 0.22);
+    --color-ring: #cf9ce8;
+
+    /* Semantic colors - Pastel-bright for dark mode, dark text on top */
+    --color-error: #f08a9a;
+    --color-error-foreground: #3d0f18;
+    --color-success: #8fd8b0;
+    --color-success-foreground: #0f2a1d;
+    --color-warning: #ecc56a;
+    --color-warning-foreground: #332400;
+    --color-info: #9ab8f0;
+    --color-info-foreground: #0f1f3d;
+
+    /* Typography - Rounded, friendly, medium-plus */
+    --font-family:
+        "Manrope", "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 500;
+    --font-weight-medium: 600;
+    --font-weight-bold: 800;
+    --letter-spacing: 0.005em;
+    --line-height: 1.55;
+
+    /* Icon styling - Chubby strokes */
+    --icon-stroke-width: 2.25;
+    --icon-color: #cf9ce8;
+
+    /* Transitions - Bouncy but quick */
+    --transition-fast: 120ms;
+    --transition-normal: 180ms;
+    --transition-slow: 280ms;
+    --transition-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+    /* Hover/Active transforms - Puffy press-and-bounce */
+    --hover-scale: 1.03;
+    --hover-translate-y: -1px;
+    --hover-translate-x: 0;
+    --active-scale: 0.97;
+    --active-translate-y: 1px;
+
+    /* Focus ring */
+    --focus-ring-width: 3px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: rgba(207, 156, 232, 0.5);
+
+    /* 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 taller, chubby) */
+    --button-height-sm: 32px;
+    --button-height-md: 40px;
+    --button-height-lg: 50px;
+    --input-height-sm: 32px;
+    --input-height-md: 40px;
+    --input-height-lg: 50px;
+    --row-height-compact: 36px;
+    --row-height-normal: 44px;
+    --row-height-spacious: 56px;
+    /* Density axis — per-element padding (generous, pillowy) */
+    --card-padding-sm: 16px;
+    --card-padding-md: 20px;
+    --card-padding-lg: 32px;
+    --dialog-padding: 32px;
+    --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: 700ms;
+    /* Motion axis — easing palette (spring IS the standard here) */
+    --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: 18px;
+    /* 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);
+}