@almadar/ui 6.28.0 → 6.30.0

package/dist/themeTokens-DVRwufw8.d.cts

@@ -0,0 +1,112 @@
+import { ThemeRef, ThemeDefinition, ThemeTokens, ThemeVariant, DensityTokens, ElevationTokens, GeometryTokens, IconographyTokens, MotionDurationKey, MotionEasingKey, MotionIntentMap, TypeScaleTokens, TypeIntentMap, TypeSizeKey } from '@almadar/core';
+
+/**
+ * themeTokens — runtime mirror of the orbital compiler's theme codegen.
+ *
+ * The compile path (orbital-rust/crates/orbital-shell-typescript/src/codegen/theme.rs)
+ * reads `OrbitalDefinition.theme.tokens` and emits CSS custom-property
+ * declarations into a `[data-theme="<name>-<mode>"]` block. The runtime
+ * does not parse compiled CSS — it reads the same `tokens` object directly
+ * and produces the same `{ '--color-primary': '…', '--radius-md': '…' }` map
+ * that the compiler emits.
+ *
+ * Keeping the two paths byte-identical at the variable level is the contract:
+ * editing tokens via the Studio Design System tab must produce the exact
+ * same rendered result as editing them in source and running `orbital
+ * compile`. The mapping rules here mirror `generate_tokens_css` /
+ * `generate_tokens_css_dark` (theme.rs:122–351).
+ *
+ * Compile vs runtime difference (intentional):
+ * - Compile emits the FULL set: schema overrides on top of defaults. This is
+ *   needed because the compiled CSS replaces the theme entirely.
+ * - Runtime emits ONLY the keys present in `tokens` (and `variants.dark`).
+ *   Missing keys cascade from the parent `[data-theme]` rule on the document
+ *   element. The provider scopes overrides to an orbital subtree without
+ *   shadowing inherited defaults.
+ *
+ * The per-axis var tables below (`DENSITY_SPACING_VARS`, `TYPE_INTENT_VARS`, …)
+ * are the ONE mapping between a typed-axis field and its CSS variable name.
+ * `themeTokensToCssVars` reads them forward (token → CSS); `almadar-core`'s
+ * one-time `scripts/migrate-css-themes.ts` reads them in reverse (CSS →
+ * token) to build `packages/almadar-core/themes/*.json` from the checked-in
+ * preset CSS — see that script for the inverse direction.
+ *
+ * @packageDocumentation
+ */
+
+/** Resolved color mode. Mirrors `ThemeContext.resolvedMode`. */
+type ThemeMode = 'light' | 'dark';
+/** The keys of `T` whose value is a plain (optional) string — excludes
+ * nested-object fields like `DensityTokens['spacing']` or
+ * `TypeScaleTokens['scale']`, which are never single CSS values. */
+type StringValueKey<T> = {
+    [K in keyof T]-?: T[K] extends string | undefined ? K : never;
+}[keyof T] & string;
+/** One flat scalar field on an axis object and the CSS var name it maps to. */
+interface FlatVarEntry<T> {
+    readonly cssVar: string;
+    readonly key: StringValueKey<T>;
+}
+/** Density axis — spacing scale steps (`density.spacing.space<N>` → `--space-<N>`). */
+declare const DENSITY_SPACING_VARS: ReadonlyArray<FlatVarEntry<NonNullable<DensityTokens['spacing']>>>;
+/** Density axis — per-element heights + paddings. */
+declare const DENSITY_ELEMENT_VARS: ReadonlyArray<FlatVarEntry<DensityTokens>>;
+/** Type axis — family triplet. */
+declare const TYPE_FAMILY_VARS: ReadonlyArray<FlatVarEntry<TypeScaleTokens>>;
+/** Type axis — size scale keys, ordered exactly as emitted. Each pairs `--text-<k>` / `--leading-<k>`. */
+declare const TYPE_SIZE_KEYS: ReadonlyArray<TypeSizeKey>;
+/** Type axis — intent names, ordered exactly as emitted. Each is 3 vars: `-size` / `-weight` / `-leading`. */
+declare const TYPE_INTENT_VARS: ReadonlyArray<{
+    key: keyof TypeIntentMap & string;
+    cssName: string;
+}>;
+/** Motion axis — duration palette keys, ordered exactly as emitted. */
+declare const MOTION_DURATION_KEYS: ReadonlyArray<MotionDurationKey>;
+/** Motion axis — easing palette keys, ordered exactly as emitted. */
+declare const MOTION_EASING_KEYS: ReadonlyArray<MotionEasingKey>;
+/** Motion axis — intent names, ordered exactly as emitted. Each is 2 vars: `-duration` / `-easing`. */
+declare const MOTION_INTENT_VARS: ReadonlyArray<{
+    key: keyof MotionIntentMap & string;
+    cssName: string;
+}>;
+/** Iconography axis — flat fields. */
+declare const ICONOGRAPHY_VARS: ReadonlyArray<FlatVarEntry<IconographyTokens>>;
+/** Elevation axis — flat fields. */
+declare const ELEVATION_VARS: ReadonlyArray<FlatVarEntry<ElevationTokens>>;
+/** Geometry axis — flat fields. */
+declare const GEOMETRY_VARS: ReadonlyArray<FlatVarEntry<GeometryTokens>>;
+/** Legacy free-form map prefixes (`ThemeTokens.colors`/`radii`/`spacing`/`shadows`). `typography` has no prefix — see below. */
+declare const LEGACY_PREFIXES: {
+    readonly colors: "--color-";
+    readonly radii: "--radius-";
+    readonly spacing: "--space-";
+    readonly shadows: "--shadow-";
+};
+/**
+ * Convert `ThemeTokens` (+ optional dark variant) into a CSS custom-property
+ * map keyed by variable name (e.g. `--color-primary`).
+ *
+ * Mapping rules (mirror theme.rs):
+ * - `tokens.colors.<k>`     → `--color-<k>`
+ * - `tokens.radii.<k>`      → `--radius-<k>`
+ * - `tokens.spacing.<k>`    → `--space-<k>`
+ * - `tokens.typography.<k>` → `--<k>` (keys already include their `font-`/
+ *                                       `letter-`/`line-` prefix)
+ * - `tokens.shadows.<k>`    → `--shadow-<k>` (schema key has no prefix)
+ *
+ * In `'dark'` mode, the `darkVariant` overrides are merged on top of the
+ * base tokens per category — same precedence the Rust compiler uses
+ * (`generate_tokens_css_dark`). Categories not present in `darkVariant` fall
+ * back to the base tokens.
+ */
+declare function themeTokensToCssVars(tokens: ThemeTokens, mode?: ThemeMode, darkVariant?: ThemeVariant): Record<string, string>;
+/**
+ * `ThemeRef` is `ThemeDefinition | string`. When it's a string, it's an
+ * unresolved import reference (e.g. `"Ocean.theme"`) that should have been
+ * inlined by the compiler's import phase before runtime. If we still see a
+ * string here, the upstream resolution path didn't run — return `undefined`
+ * rather than guess. `OrbitalThemeProvider` falls through to passthrough.
+ */
+declare function resolveThemeForRuntime(theme: ThemeRef | undefined): ThemeDefinition | undefined;
+
+export { DENSITY_ELEMENT_VARS as D, ELEVATION_VARS as E, type FlatVarEntry as F, GEOMETRY_VARS as G, ICONOGRAPHY_VARS as I, LEGACY_PREFIXES as L, MOTION_DURATION_KEYS as M, type StringValueKey as S, type ThemeMode as T, DENSITY_SPACING_VARS as a, MOTION_EASING_KEYS as b, MOTION_INTENT_VARS as c, TYPE_FAMILY_VARS as d, TYPE_INTENT_VARS as e, TYPE_SIZE_KEYS as f, resolveThemeForRuntime as r, themeTokensToCssVars as t };

package/dist/themeTokens-DVRwufw8.d.ts

@@ -0,0 +1,112 @@
+import { ThemeRef, ThemeDefinition, ThemeTokens, ThemeVariant, DensityTokens, ElevationTokens, GeometryTokens, IconographyTokens, MotionDurationKey, MotionEasingKey, MotionIntentMap, TypeScaleTokens, TypeIntentMap, TypeSizeKey } from '@almadar/core';
+
+/**
+ * themeTokens — runtime mirror of the orbital compiler's theme codegen.
+ *
+ * The compile path (orbital-rust/crates/orbital-shell-typescript/src/codegen/theme.rs)
+ * reads `OrbitalDefinition.theme.tokens` and emits CSS custom-property
+ * declarations into a `[data-theme="<name>-<mode>"]` block. The runtime
+ * does not parse compiled CSS — it reads the same `tokens` object directly
+ * and produces the same `{ '--color-primary': '…', '--radius-md': '…' }` map
+ * that the compiler emits.
+ *
+ * Keeping the two paths byte-identical at the variable level is the contract:
+ * editing tokens via the Studio Design System tab must produce the exact
+ * same rendered result as editing them in source and running `orbital
+ * compile`. The mapping rules here mirror `generate_tokens_css` /
+ * `generate_tokens_css_dark` (theme.rs:122–351).
+ *
+ * Compile vs runtime difference (intentional):
+ * - Compile emits the FULL set: schema overrides on top of defaults. This is
+ *   needed because the compiled CSS replaces the theme entirely.
+ * - Runtime emits ONLY the keys present in `tokens` (and `variants.dark`).
+ *   Missing keys cascade from the parent `[data-theme]` rule on the document
+ *   element. The provider scopes overrides to an orbital subtree without
+ *   shadowing inherited defaults.
+ *
+ * The per-axis var tables below (`DENSITY_SPACING_VARS`, `TYPE_INTENT_VARS`, …)
+ * are the ONE mapping between a typed-axis field and its CSS variable name.
+ * `themeTokensToCssVars` reads them forward (token → CSS); `almadar-core`'s
+ * one-time `scripts/migrate-css-themes.ts` reads them in reverse (CSS →
+ * token) to build `packages/almadar-core/themes/*.json` from the checked-in
+ * preset CSS — see that script for the inverse direction.
+ *
+ * @packageDocumentation
+ */
+
+/** Resolved color mode. Mirrors `ThemeContext.resolvedMode`. */
+type ThemeMode = 'light' | 'dark';
+/** The keys of `T` whose value is a plain (optional) string — excludes
+ * nested-object fields like `DensityTokens['spacing']` or
+ * `TypeScaleTokens['scale']`, which are never single CSS values. */
+type StringValueKey<T> = {
+    [K in keyof T]-?: T[K] extends string | undefined ? K : never;
+}[keyof T] & string;
+/** One flat scalar field on an axis object and the CSS var name it maps to. */
+interface FlatVarEntry<T> {
+    readonly cssVar: string;
+    readonly key: StringValueKey<T>;
+}
+/** Density axis — spacing scale steps (`density.spacing.space<N>` → `--space-<N>`). */
+declare const DENSITY_SPACING_VARS: ReadonlyArray<FlatVarEntry<NonNullable<DensityTokens['spacing']>>>;
+/** Density axis — per-element heights + paddings. */
+declare const DENSITY_ELEMENT_VARS: ReadonlyArray<FlatVarEntry<DensityTokens>>;
+/** Type axis — family triplet. */
+declare const TYPE_FAMILY_VARS: ReadonlyArray<FlatVarEntry<TypeScaleTokens>>;
+/** Type axis — size scale keys, ordered exactly as emitted. Each pairs `--text-<k>` / `--leading-<k>`. */
+declare const TYPE_SIZE_KEYS: ReadonlyArray<TypeSizeKey>;
+/** Type axis — intent names, ordered exactly as emitted. Each is 3 vars: `-size` / `-weight` / `-leading`. */
+declare const TYPE_INTENT_VARS: ReadonlyArray<{
+    key: keyof TypeIntentMap & string;
+    cssName: string;
+}>;
+/** Motion axis — duration palette keys, ordered exactly as emitted. */
+declare const MOTION_DURATION_KEYS: ReadonlyArray<MotionDurationKey>;
+/** Motion axis — easing palette keys, ordered exactly as emitted. */
+declare const MOTION_EASING_KEYS: ReadonlyArray<MotionEasingKey>;
+/** Motion axis — intent names, ordered exactly as emitted. Each is 2 vars: `-duration` / `-easing`. */
+declare const MOTION_INTENT_VARS: ReadonlyArray<{
+    key: keyof MotionIntentMap & string;
+    cssName: string;
+}>;
+/** Iconography axis — flat fields. */
+declare const ICONOGRAPHY_VARS: ReadonlyArray<FlatVarEntry<IconographyTokens>>;
+/** Elevation axis — flat fields. */
+declare const ELEVATION_VARS: ReadonlyArray<FlatVarEntry<ElevationTokens>>;
+/** Geometry axis — flat fields. */
+declare const GEOMETRY_VARS: ReadonlyArray<FlatVarEntry<GeometryTokens>>;
+/** Legacy free-form map prefixes (`ThemeTokens.colors`/`radii`/`spacing`/`shadows`). `typography` has no prefix — see below. */
+declare const LEGACY_PREFIXES: {
+    readonly colors: "--color-";
+    readonly radii: "--radius-";
+    readonly spacing: "--space-";
+    readonly shadows: "--shadow-";
+};
+/**
+ * Convert `ThemeTokens` (+ optional dark variant) into a CSS custom-property
+ * map keyed by variable name (e.g. `--color-primary`).
+ *
+ * Mapping rules (mirror theme.rs):
+ * - `tokens.colors.<k>`     → `--color-<k>`
+ * - `tokens.radii.<k>`      → `--radius-<k>`
+ * - `tokens.spacing.<k>`    → `--space-<k>`
+ * - `tokens.typography.<k>` → `--<k>` (keys already include their `font-`/
+ *                                       `letter-`/`line-` prefix)
+ * - `tokens.shadows.<k>`    → `--shadow-<k>` (schema key has no prefix)
+ *
+ * In `'dark'` mode, the `darkVariant` overrides are merged on top of the
+ * base tokens per category — same precedence the Rust compiler uses
+ * (`generate_tokens_css_dark`). Categories not present in `darkVariant` fall
+ * back to the base tokens.
+ */
+declare function themeTokensToCssVars(tokens: ThemeTokens, mode?: ThemeMode, darkVariant?: ThemeVariant): Record<string, string>;
+/**
+ * `ThemeRef` is `ThemeDefinition | string`. When it's a string, it's an
+ * unresolved import reference (e.g. `"Ocean.theme"`) that should have been
+ * inlined by the compiler's import phase before runtime. If we still see a
+ * string here, the upstream resolution path didn't run — return `undefined`
+ * rather than guess. `OrbitalThemeProvider` falls through to passthrough.
+ */
+declare function resolveThemeForRuntime(theme: ThemeRef | undefined): ThemeDefinition | undefined;
+
+export { DENSITY_ELEMENT_VARS as D, ELEVATION_VARS as E, type FlatVarEntry as F, GEOMETRY_VARS as G, ICONOGRAPHY_VARS as I, LEGACY_PREFIXES as L, MOTION_DURATION_KEYS as M, type StringValueKey as S, type ThemeMode as T, DENSITY_SPACING_VARS as a, MOTION_EASING_KEYS as b, MOTION_INTENT_VARS as c, TYPE_FAMILY_VARS as d, TYPE_INTENT_VARS as e, TYPE_SIZE_KEYS as f, resolveThemeForRuntime as r, themeTokensToCssVars as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "6.28.0",
+  "version": "6.30.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -118,11 +118,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": "^10.93.0",
-    "@almadar/evaluator": "^2.46.0",
+    "@almadar/core": "^10.99.0",
+    "@almadar/evaluator": "^2.47.0",
     "@almadar/logger": "^1.12.0",
-    "@almadar/runtime": "^6.81.0",
-    "@almadar/std": "^16.219.0",
+    "@almadar/runtime": "^6.84.0",
+    "@almadar/std": "^16.223.0",
     "@almadar/syntax": "^1.17.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
@@ -239,6 +239,7 @@
     "build:watch": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "lint": "eslint --no-warn-ignored --max-warnings 0 .",
-    "verify:themes": "node scripts/theme-contrast-audit.mjs"
+    "verify:themes": "node scripts/theme-contrast-audit.mjs",
+    "verify:safelist": "tsx scripts/audit-tailwind-safelist.ts"
   }
 }

package/scripts/audit-tailwind-safelist.ts

@@ -234,4 +234,8 @@ if (fix) {
 } else {
   console.log();
   console.log('Run with --fix to add missing classes to the preset.');
+  // A missing entry here means a component ships a class Tailwind will silently
+  // drop CSS for (the Gantt bar defect: axis rendered, bars were invisible on
+  // every reload) — CI must fail so it is caught at merge, not in production.
+  process.exit(1);
 }

package/tailwind-preset.cjs

@@ -13,6 +13,18 @@
  *   presets: [require('@almadar/ui/tailwind-preset')]
  */
 
+// Tailwind can only apply an opacity modifier (`bg-primary/50`) to a color it
+// can compute alpha for itself — a bare `var(--color-x)` string is opaque to
+// it, so every semantic token below must resolve through this function or its
+// `/NN` utilities silently generate no CSS rule at all (not even with the
+// class safelisted — confirmed via a standalone `tailwindcss` CLI build).
+function withOpacity(varName) {
+  return ({ opacityValue }) =>
+    opacityValue === undefined
+      ? `var(${varName})`
+      : `color-mix(in srgb, var(${varName}) calc(${opacityValue} * 100%), transparent)`;
+}
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: 'class',
@@ -111,8 +123,7 @@ module.exports = {
   'animate-[shake_0.3s_ease-in-out]',
   'aspect-[3/4]',
   'bg-[radial-gradient(circle_at_center,rgba(34,197,94,0.2),transparent_70%)]',
-  'bg-[radial-gradient(ellipse_at_top,var(--color-primary)/0.08,transparent_60%),',
-    'radial-gradient(ellipse_at_bottom_right,var(--color-accent)/0.06,transparent_50%)]',
+  'bg-[radial-gradient(ellipse_at_top,var(--color-primary)/0.08,transparent_60%),radial-gradient(ellipse_at_bottom_right,var(--color-accent)/0.06,transparent_50%)]',
   'bg-[var(--color-background)]',
   'bg-[var(--color-card)]',
   'bg-[var(--color-table-header)]',
@@ -264,6 +275,122 @@ module.exports = {
   'z-[1000]',
   'z-[1001]',
   'z-[60]',
+
+  // Auto-added by audit-tailwind-safelist.ts (2026-09-19)
+  'bg-[var(--color-border)]',
+  'bg-[var(--color-muted)]',
+  'bg-[var(--color-primary)]',
+  'bg-[var(--color-surface-subtle)]',
+  'bg-[var(--color-surface)]',
+  'bg-[var(--color-warning)]',
+  'bg-accent/15',
+  'bg-background/60',
+  'bg-background/95',
+  'bg-card/40',
+  'bg-card/50',
+  'bg-card/90',
+  'bg-card/95',
+  'bg-error/15',
+  'bg-error/70',
+  'bg-error/80',
+  'bg-foreground/40',
+  'bg-muted-foreground/50',
+  'bg-muted/10',
+  'bg-muted/40',
+  'bg-primary/15',
+  'bg-primary/80',
+  'bg-secondary/10',
+  'bg-success/15',
+  'bg-success/80',
+  'bg-warning/15',
+  'bg-warning/80',
+  'border-[length:var(--border-width-thick)]',
+  'border-[var(--color-primary)]',
+  'border-[var(--color-warning)]',
+  'border-border/10',
+  'border-border/20',
+  'border-border/50',
+  'border-error/40',
+  'border-error/70',
+  'border-info/70',
+  'border-l-[length:var(--border-width-thin)]',
+  'border-primary/20',
+  'border-primary/40',
+  'border-success/40',
+  'border-success/50',
+  'border-success/70',
+  'border-warning/40',
+  'border-warning/60',
+  'border-y-[length:var(--border-width)]',
+  'bottom-[15%]',
+  'data-[empty=true]',
+  'focus-visible:ring-[length:var(--focus-ring-width)]',
+  'focus-visible:ring-offset-[length:var(--focus-ring-offset)]',
+  'focus-within:border-[var(--color-primary)]',
+  'from-primary/90',
+  'group-hover:bg-[var(--color-surface-subtle)]',
+  'h-[1.25rem]',
+  'h-[1.5rem]',
+  'hover:bg-[var(--color-card-hover,transparent)]',
+  'hover:bg-[var(--color-muted)]',
+  'hover:bg-[var(--color-surface-subtle)]',
+  'hover:bg-[var(--color-surface)]',
+  'hover:bg-foreground/10',
+  'hover:bg-muted-foreground/70',
+  'hover:bg-muted/30',
+  'hover:bg-muted/40',
+  'hover:bg-primary-foreground/15',
+  'hover:bg-primary-foreground/20',
+  'hover:text-[var(--color-foreground)]',
+  'hover:text-info/80',
+  'hover:translate-y-[var(--hover-translate-y)]',
+  'left-[15%]',
+  'max-h-[36rem]',
+  'max-h-[60vh]',
+  'max-w-[calc(100vw-1.5rem)]',
+  'max-w-[calc(100vw-1rem)]',
+  'max-w-[calc(100vw-2rem)]',
+  'md:grid-cols-[var(--master-detail-cols)]',
+  'md:max-w-[50%]',
+  'md:min-w-[160px]',
+  'md:min-w-[45%]',
+  'min-h-[16rem]',
+  'min-h-[3rem]',
+  'min-h-[8rem]',
+  'min-w-[10rem]',
+  'min-w-[16rem]',
+  'min-w-[2px]',
+  'min-w-[400px]',
+  'min-w-[520px]',
+  'min-w-[600px]',
+  'min-w-[700px]',
+  'min-w-[8rem]',
+  'pt-[10vh]',
+  'py-[1px]',
+  'right-[15%]',
+  'ring-primary/40',
+  'scale-[var(--hover-scale)]',
+  'sm:min-w-[200px]',
+  'sm:min-w-[300px]',
+  'sm:w-[28rem]',
+  'sm:w-[340px]',
+  'sm:w-[480px]',
+  'sm:w-[640px]',
+  'text-[10px]',
+  'text-[11px]',
+  'text-[var(--color-danger)]',
+  'text-[var(--color-primary)]',
+  'text-[var(--color-success)]',
+  'text-[var(--color-warning-foreground)]',
+  'text-[var(--color-warning)]',
+  'text-foreground/50',
+  'top-[15%]',
+  'translate-x-[1.25rem]',
+  'w-[1.25rem]',
+  'w-[2.75rem]',
+  'w-[400px]',
+  'z-[1]',
+  'z-[45]',
 ],
   theme: {
     fontFamily: {
@@ -278,48 +405,48 @@ module.exports = {
     extend: {
       colors: {
         primary: {
-          DEFAULT: 'var(--color-primary)',
-          foreground: 'var(--color-primary-foreground)',
-          hover: 'var(--color-primary-hover)',
+          DEFAULT: withOpacity('--color-primary'),
+          foreground: withOpacity('--color-primary-foreground'),
+          hover: withOpacity('--color-primary-hover'),
         },
         secondary: {
-          DEFAULT: 'var(--color-secondary)',
-          foreground: 'var(--color-secondary-foreground)',
-          hover: 'var(--color-secondary-hover)',
+          DEFAULT: withOpacity('--color-secondary'),
+          foreground: withOpacity('--color-secondary-foreground'),
+          hover: withOpacity('--color-secondary-hover'),
         },
         muted: {
-          DEFAULT: 'var(--color-muted)',
-          foreground: 'var(--color-muted-foreground)',
+          DEFAULT: withOpacity('--color-muted'),
+          foreground: withOpacity('--color-muted-foreground'),
         },
         accent: {
-          DEFAULT: 'var(--color-accent)',
-          foreground: 'var(--color-accent-foreground)',
+          DEFAULT: withOpacity('--color-accent'),
+          foreground: withOpacity('--color-accent-foreground'),
         },
-        background: 'var(--color-background)',
-        foreground: 'var(--color-foreground)',
+        background: withOpacity('--color-background'),
+        foreground: withOpacity('--color-foreground'),
         card: {
-          DEFAULT: 'var(--color-card)',
-          foreground: 'var(--color-card-foreground)',
+          DEFAULT: withOpacity('--color-card'),
+          foreground: withOpacity('--color-card-foreground'),
         },
-        surface: 'var(--color-surface)',
-        border: 'var(--color-border)',
-        input: 'var(--color-input)',
-        ring: 'var(--color-ring)',
+        surface: withOpacity('--color-surface'),
+        border: withOpacity('--color-border'),
+        input: withOpacity('--color-input'),
+        ring: withOpacity('--color-ring'),
         error: {
-          DEFAULT: 'var(--color-error)',
-          foreground: 'var(--color-error-foreground)',
+          DEFAULT: withOpacity('--color-error'),
+          foreground: withOpacity('--color-error-foreground'),
         },
         success: {
-          DEFAULT: 'var(--color-success)',
-          foreground: 'var(--color-success-foreground)',
+          DEFAULT: withOpacity('--color-success'),
+          foreground: withOpacity('--color-success-foreground'),
         },
         warning: {
-          DEFAULT: 'var(--color-warning)',
-          foreground: 'var(--color-warning-foreground)',
+          DEFAULT: withOpacity('--color-warning'),
+          foreground: withOpacity('--color-warning-foreground'),
         },
         info: {
-          DEFAULT: 'var(--color-info)',
-          foreground: 'var(--color-info-foreground)',
+          DEFAULT: withOpacity('--color-info'),
+          foreground: withOpacity('--color-info-foreground'),
         },
       },
       borderRadius: {