@almadar/ui 4.57.4 → 5.0.0

package/dist/context/index.cjs

@@ -467,6 +467,37 @@ var BUILT_IN_THEMES = [
     displayName: "Copper",
     hasLightMode: true,
     hasDarkMode: true
+  },
+  // Layer 1 skin axes — truly-unique themes (compact tech / editorial / brutalist dense / display-heavy / touch-first)
+  {
+    name: "prism",
+    displayName: "Prism",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "gazette",
+    displayName: "Gazette",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "terminal",
+    displayName: "Terminal",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "atelier",
+    displayName: "Atelier",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "kiosk",
+    displayName: "Kiosk",
+    hasLightMode: true,
+    hasDarkMode: true
   }
 ];
 var ThemeContext = react.createContext(void 0);
@@ -662,8 +693,176 @@ function themeTokensToCssVars(tokens, mode = "light", darkVariant) {
       vars[`--shadow-${key}`] = value;
     }
   }
+  const pickDensity = isDark && darkVariant?.density ? darkVariant.density : tokens.density;
+  emitDensity(pickDensity, vars);
+  const pickTypeScale = isDark && darkVariant?.typeScale ? darkVariant.typeScale : tokens.typeScale;
+  emitTypeScale(pickTypeScale, vars);
+  const pickMotion = isDark && darkVariant?.motion ? darkVariant.motion : tokens.motion;
+  emitMotion(pickMotion, vars);
+  const pickIconography = isDark && darkVariant?.iconography ? darkVariant.iconography : tokens.iconography;
+  emitIconography(pickIconography, vars);
+  const pickElevation = isDark && darkVariant?.elevation ? darkVariant.elevation : tokens.elevation;
+  emitElevation(pickElevation, vars);
+  const pickGeometry = isDark && darkVariant?.geometry ? darkVariant.geometry : tokens.geometry;
+  emitGeometry(pickGeometry, vars);
   return vars;
 }
+function emitDensity(density, vars) {
+  if (!density) return;
+  if (density.spacing) {
+    const s = density.spacing;
+    const pairs2 = [
+      ["0", s.space0],
+      ["1", s.space1],
+      ["2", s.space2],
+      ["3", s.space3],
+      ["4", s.space4],
+      ["5", s.space5],
+      ["6", s.space6],
+      ["7", s.space7],
+      ["8", s.space8],
+      ["9", s.space9],
+      ["10", s.space10],
+      ["11", s.space11],
+      ["12", s.space12]
+    ];
+    for (const [k, v] of pairs2) {
+      if (v !== void 0) vars[`--space-${k}`] = v;
+    }
+  }
+  const pairs = [
+    ["button-height-sm", density.buttonHeightSm],
+    ["button-height-md", density.buttonHeightMd],
+    ["button-height-lg", density.buttonHeightLg],
+    ["input-height-sm", density.inputHeightSm],
+    ["input-height-md", density.inputHeightMd],
+    ["input-height-lg", density.inputHeightLg],
+    ["row-height-compact", density.rowHeightCompact],
+    ["row-height-normal", density.rowHeightNormal],
+    ["row-height-spacious", density.rowHeightSpacious],
+    ["card-padding-sm", density.cardPaddingSm],
+    ["card-padding-md", density.cardPaddingMd],
+    ["card-padding-lg", density.cardPaddingLg],
+    ["dialog-padding", density.dialogPadding],
+    ["section-gap", density.sectionGap]
+  ];
+  for (const [k, v] of pairs) {
+    if (v !== void 0) vars[`--${k}`] = v;
+  }
+}
+function typeSizeKeyStr(k) {
+  return k;
+}
+function typeWeightStr(w) {
+  return w;
+}
+function emitTypeIntent(name, intent, vars) {
+  const sizeKey = typeSizeKeyStr(intent.size);
+  const weight = typeWeightStr(intent.weight);
+  vars[`--intent-${name}-size`] = `var(--text-${sizeKey})`;
+  vars[`--intent-${name}-weight`] = `var(--font-weight-${weight})`;
+  vars[`--intent-${name}-leading`] = `var(--leading-${sizeKey})`;
+}
+function emitTypeScale(ts, vars) {
+  if (!ts) return;
+  if (ts.displayFamily !== void 0) vars["--font-family-display"] = ts.displayFamily;
+  if (ts.bodyFamily !== void 0) vars["--font-family-body"] = ts.bodyFamily;
+  if (ts.monoFamily !== void 0) vars["--font-family-mono"] = ts.monoFamily;
+  if (ts.scale) {
+    const s = ts.scale;
+    const pairs = [
+      ["xs", s.xs],
+      ["sm", s.sm],
+      ["base", s.base],
+      ["lg", s.lg],
+      ["xl", s.xl],
+      ["2xl", s["2xl"]],
+      ["3xl", s["3xl"]],
+      ["4xl", s["4xl"]],
+      ["display-1", s["display-1"]],
+      ["display-2", s["display-2"]]
+    ];
+    for (const [k, entry] of pairs) {
+      if (entry !== void 0) {
+        vars[`--text-${k}`] = entry.size;
+        vars[`--leading-${k}`] = entry.lineHeight;
+      }
+    }
+  }
+  if (ts.intents) {
+    const i = ts.intents;
+    if (i.headingMajor) emitTypeIntent("heading-major", i.headingMajor, vars);
+    if (i.headingMinor) emitTypeIntent("heading-minor", i.headingMinor, vars);
+    if (i.bodyEmphasis) emitTypeIntent("body-emphasis", i.bodyEmphasis, vars);
+    if (i.bodyDefault) emitTypeIntent("body-default", i.bodyDefault, vars);
+    if (i.bodyQuiet) emitTypeIntent("body-quiet", i.bodyQuiet, vars);
+    if (i.caption) emitTypeIntent("caption", i.caption, vars);
+    if (i.numeric) emitTypeIntent("numeric", i.numeric, vars);
+  }
+}
+function emitMotionIntent(name, intent, vars) {
+  vars[`--intent-${name}-duration`] = `var(--duration-${intent.duration})`;
+  vars[`--intent-${name}-easing`] = `var(--easing-${intent.easing})`;
+}
+function emitMotion(m, vars) {
+  if (!m) return;
+  if (m.durations) {
+    const d = m.durations;
+    const pairs = [
+      ["instant", d.instant],
+      ["fast", d.fast],
+      ["normal", d.normal],
+      ["slow", d.slow],
+      ["dramatic", d.dramatic]
+    ];
+    for (const [k, v] of pairs) {
+      if (v !== void 0) vars[`--duration-${k}`] = v;
+    }
+  }
+  if (m.easings) {
+    const e = m.easings;
+    const pairs = [
+      ["linear", e.linear],
+      ["standard", e.standard],
+      ["emphasized", e.emphasized],
+      ["spring", e.spring]
+    ];
+    for (const [k, v] of pairs) {
+      if (v !== void 0) vars[`--easing-${k}`] = v;
+    }
+  }
+  if (m.intents) {
+    const i = m.intents;
+    if (i.enter) emitMotionIntent("enter", i.enter, vars);
+    if (i.exit) emitMotionIntent("exit", i.exit, vars);
+    if (i.hover) emitMotionIntent("hover", i.hover, vars);
+    if (i.press) emitMotionIntent("press", i.press, vars);
+    if (i.expand) emitMotionIntent("expand", i.expand, vars);
+    if (i.transition) emitMotionIntent("transition", i.transition, vars);
+  }
+}
+function emitIconography(i, vars) {
+  if (!i) return;
+  if (i.family !== void 0) vars["--icon-family"] = i.family;
+  if (i.strokeWidth !== void 0) vars["--icon-stroke-width"] = i.strokeWidth;
+  if (i.defaultSize !== void 0) vars["--icon-default-size"] = i.defaultSize;
+}
+function emitElevation(e, vars) {
+  if (!e) return;
+  if (e.cardElevation !== void 0) vars["--elevation-card"] = e.cardElevation;
+  if (e.popoverElevation !== void 0) vars["--elevation-popover"] = e.popoverElevation;
+  if (e.dialogElevation !== void 0) vars["--elevation-dialog"] = e.dialogElevation;
+  if (e.toastElevation !== void 0) vars["--elevation-toast"] = e.toastElevation;
+}
+function emitGeometry(g, vars) {
+  if (!g) return;
+  if (g.radiusContainer !== void 0) vars["--radius-container"] = g.radiusContainer;
+  if (g.radiusInteractive !== void 0) vars["--radius-interactive"] = g.radiusInteractive;
+  if (g.radiusPill !== void 0) vars["--radius-pill"] = g.radiusPill;
+  if (g.borderHairline !== void 0) vars["--border-hairline"] = g.borderHairline;
+  if (g.borderStandard !== void 0) vars["--border-standard"] = g.borderStandard;
+  if (g.borderHeavy !== void 0) vars["--border-heavy"] = g.borderHeavy;
+}
 function resolveThemeForRuntime(theme) {
   if (theme === void 0) return void 0;
   if (typeof theme === "string") return void 0;

package/dist/context/index.js

@@ -465,6 +465,37 @@ var BUILT_IN_THEMES = [
     displayName: "Copper",
     hasLightMode: true,
     hasDarkMode: true
+  },
+  // Layer 1 skin axes — truly-unique themes (compact tech / editorial / brutalist dense / display-heavy / touch-first)
+  {
+    name: "prism",
+    displayName: "Prism",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "gazette",
+    displayName: "Gazette",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "terminal",
+    displayName: "Terminal",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "atelier",
+    displayName: "Atelier",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "kiosk",
+    displayName: "Kiosk",
+    hasLightMode: true,
+    hasDarkMode: true
   }
 ];
 var ThemeContext = createContext(void 0);
@@ -660,8 +691,176 @@ function themeTokensToCssVars(tokens, mode = "light", darkVariant) {
       vars[`--shadow-${key}`] = value;
     }
   }
+  const pickDensity = isDark && darkVariant?.density ? darkVariant.density : tokens.density;
+  emitDensity(pickDensity, vars);
+  const pickTypeScale = isDark && darkVariant?.typeScale ? darkVariant.typeScale : tokens.typeScale;
+  emitTypeScale(pickTypeScale, vars);
+  const pickMotion = isDark && darkVariant?.motion ? darkVariant.motion : tokens.motion;
+  emitMotion(pickMotion, vars);
+  const pickIconography = isDark && darkVariant?.iconography ? darkVariant.iconography : tokens.iconography;
+  emitIconography(pickIconography, vars);
+  const pickElevation = isDark && darkVariant?.elevation ? darkVariant.elevation : tokens.elevation;
+  emitElevation(pickElevation, vars);
+  const pickGeometry = isDark && darkVariant?.geometry ? darkVariant.geometry : tokens.geometry;
+  emitGeometry(pickGeometry, vars);
   return vars;
 }
+function emitDensity(density, vars) {
+  if (!density) return;
+  if (density.spacing) {
+    const s = density.spacing;
+    const pairs2 = [
+      ["0", s.space0],
+      ["1", s.space1],
+      ["2", s.space2],
+      ["3", s.space3],
+      ["4", s.space4],
+      ["5", s.space5],
+      ["6", s.space6],
+      ["7", s.space7],
+      ["8", s.space8],
+      ["9", s.space9],
+      ["10", s.space10],
+      ["11", s.space11],
+      ["12", s.space12]
+    ];
+    for (const [k, v] of pairs2) {
+      if (v !== void 0) vars[`--space-${k}`] = v;
+    }
+  }
+  const pairs = [
+    ["button-height-sm", density.buttonHeightSm],
+    ["button-height-md", density.buttonHeightMd],
+    ["button-height-lg", density.buttonHeightLg],
+    ["input-height-sm", density.inputHeightSm],
+    ["input-height-md", density.inputHeightMd],
+    ["input-height-lg", density.inputHeightLg],
+    ["row-height-compact", density.rowHeightCompact],
+    ["row-height-normal", density.rowHeightNormal],
+    ["row-height-spacious", density.rowHeightSpacious],
+    ["card-padding-sm", density.cardPaddingSm],
+    ["card-padding-md", density.cardPaddingMd],
+    ["card-padding-lg", density.cardPaddingLg],
+    ["dialog-padding", density.dialogPadding],
+    ["section-gap", density.sectionGap]
+  ];
+  for (const [k, v] of pairs) {
+    if (v !== void 0) vars[`--${k}`] = v;
+  }
+}
+function typeSizeKeyStr(k) {
+  return k;
+}
+function typeWeightStr(w) {
+  return w;
+}
+function emitTypeIntent(name, intent, vars) {
+  const sizeKey = typeSizeKeyStr(intent.size);
+  const weight = typeWeightStr(intent.weight);
+  vars[`--intent-${name}-size`] = `var(--text-${sizeKey})`;
+  vars[`--intent-${name}-weight`] = `var(--font-weight-${weight})`;
+  vars[`--intent-${name}-leading`] = `var(--leading-${sizeKey})`;
+}
+function emitTypeScale(ts, vars) {
+  if (!ts) return;
+  if (ts.displayFamily !== void 0) vars["--font-family-display"] = ts.displayFamily;
+  if (ts.bodyFamily !== void 0) vars["--font-family-body"] = ts.bodyFamily;
+  if (ts.monoFamily !== void 0) vars["--font-family-mono"] = ts.monoFamily;
+  if (ts.scale) {
+    const s = ts.scale;
+    const pairs = [
+      ["xs", s.xs],
+      ["sm", s.sm],
+      ["base", s.base],
+      ["lg", s.lg],
+      ["xl", s.xl],
+      ["2xl", s["2xl"]],
+      ["3xl", s["3xl"]],
+      ["4xl", s["4xl"]],
+      ["display-1", s["display-1"]],
+      ["display-2", s["display-2"]]
+    ];
+    for (const [k, entry] of pairs) {
+      if (entry !== void 0) {
+        vars[`--text-${k}`] = entry.size;
+        vars[`--leading-${k}`] = entry.lineHeight;
+      }
+    }
+  }
+  if (ts.intents) {
+    const i = ts.intents;
+    if (i.headingMajor) emitTypeIntent("heading-major", i.headingMajor, vars);
+    if (i.headingMinor) emitTypeIntent("heading-minor", i.headingMinor, vars);
+    if (i.bodyEmphasis) emitTypeIntent("body-emphasis", i.bodyEmphasis, vars);
+    if (i.bodyDefault) emitTypeIntent("body-default", i.bodyDefault, vars);
+    if (i.bodyQuiet) emitTypeIntent("body-quiet", i.bodyQuiet, vars);
+    if (i.caption) emitTypeIntent("caption", i.caption, vars);
+    if (i.numeric) emitTypeIntent("numeric", i.numeric, vars);
+  }
+}
+function emitMotionIntent(name, intent, vars) {
+  vars[`--intent-${name}-duration`] = `var(--duration-${intent.duration})`;
+  vars[`--intent-${name}-easing`] = `var(--easing-${intent.easing})`;
+}
+function emitMotion(m, vars) {
+  if (!m) return;
+  if (m.durations) {
+    const d = m.durations;
+    const pairs = [
+      ["instant", d.instant],
+      ["fast", d.fast],
+      ["normal", d.normal],
+      ["slow", d.slow],
+      ["dramatic", d.dramatic]
+    ];
+    for (const [k, v] of pairs) {
+      if (v !== void 0) vars[`--duration-${k}`] = v;
+    }
+  }
+  if (m.easings) {
+    const e = m.easings;
+    const pairs = [
+      ["linear", e.linear],
+      ["standard", e.standard],
+      ["emphasized", e.emphasized],
+      ["spring", e.spring]
+    ];
+    for (const [k, v] of pairs) {
+      if (v !== void 0) vars[`--easing-${k}`] = v;
+    }
+  }
+  if (m.intents) {
+    const i = m.intents;
+    if (i.enter) emitMotionIntent("enter", i.enter, vars);
+    if (i.exit) emitMotionIntent("exit", i.exit, vars);
+    if (i.hover) emitMotionIntent("hover", i.hover, vars);
+    if (i.press) emitMotionIntent("press", i.press, vars);
+    if (i.expand) emitMotionIntent("expand", i.expand, vars);
+    if (i.transition) emitMotionIntent("transition", i.transition, vars);
+  }
+}
+function emitIconography(i, vars) {
+  if (!i) return;
+  if (i.family !== void 0) vars["--icon-family"] = i.family;
+  if (i.strokeWidth !== void 0) vars["--icon-stroke-width"] = i.strokeWidth;
+  if (i.defaultSize !== void 0) vars["--icon-default-size"] = i.defaultSize;
+}
+function emitElevation(e, vars) {
+  if (!e) return;
+  if (e.cardElevation !== void 0) vars["--elevation-card"] = e.cardElevation;
+  if (e.popoverElevation !== void 0) vars["--elevation-popover"] = e.popoverElevation;
+  if (e.dialogElevation !== void 0) vars["--elevation-dialog"] = e.dialogElevation;
+  if (e.toastElevation !== void 0) vars["--elevation-toast"] = e.toastElevation;
+}
+function emitGeometry(g, vars) {
+  if (!g) return;
+  if (g.radiusContainer !== void 0) vars["--radius-container"] = g.radiusContainer;
+  if (g.radiusInteractive !== void 0) vars["--radius-interactive"] = g.radiusInteractive;
+  if (g.radiusPill !== void 0) vars["--radius-pill"] = g.radiusPill;
+  if (g.borderHairline !== void 0) vars["--border-hairline"] = g.borderHairline;
+  if (g.borderStandard !== void 0) vars["--border-standard"] = g.borderStandard;
+  if (g.borderHeavy !== void 0) vars["--border-heavy"] = g.borderHeavy;
+}
 function resolveThemeForRuntime(theme) {
   if (theme === void 0) return void 0;
   if (typeof theme === "string") return void 0;

package/dist/context/themeTokens.d.ts

@@ -24,7 +24,7 @@
  *
  * @packageDocumentation
  */
-import type { ThemeDefinition, ThemeTokens, ThemeVariant, ThemeRef } from '@almadar/core';
+import type { ThemeDefinition, ThemeRef, ThemeTokens, ThemeVariant } from '@almadar/core';
 /** Resolved color mode. Mirrors `ThemeContext.resolvedMode`. */
 export type ThemeMode = 'light' | 'dark';
 /**

package/dist/docs/index.cjs

@@ -3132,7 +3132,7 @@ var sizeStyles2 = {
 };
 var iconSizeStyles = {
   sm: "h-3.5 w-3.5",
-  md: "h-4 w-4",
+  md: "h-icon-default w-icon-default",
   lg: "h-5 w-5"
 };
 function resolveIconProp(value, sizeClass) {
@@ -3204,7 +3204,7 @@ var Button = React5__default.default.forwardRef(
         ...props,
         "data-testid": props["data-testid"] ?? (action ? `action-${action}` : void 0),
         children: [
-          isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "h-4 w-4 animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
+          isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "h-icon-default w-icon-default animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
           children || label,
           resolvedRightIcon && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: resolvedRightIcon })
         ]
@@ -3217,23 +3217,23 @@ var variantStyles3 = {
   default: [
     "bg-card",
     "border-[length:var(--border-width)] border-border",
-    "shadow-sm",
+    "shadow-elevation-card",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-lg hover:-translate-y-0.5"
+    "hover:shadow-elevation-dialog hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
     "bg-card",
     "border-[length:var(--border-width)] border-border",
-    "shadow-sm",
+    "shadow-elevation-card",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-lg hover:-translate-y-0.5"
+    "hover:shadow-elevation-dialog hover:-translate-y-0.5"
   ].join(" "),
   elevated: [
     "bg-card",
     "border-[length:var(--border-width)] border-border",
     "shadow",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-lg hover:-translate-y-0.5"
+    "hover:shadow-elevation-dialog hover:-translate-y-0.5"
   ].join(" "),
   // Interactive variant with theme-specific hover effects
   interactive: [
@@ -3242,20 +3242,20 @@ var variantStyles3 = {
     "shadow",
     "cursor-pointer",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-lg"
+    "hover:shadow-elevation-dialog"
   ].join(" ")
 };
 var paddingStyles2 = {
   none: "",
-  sm: "p-3",
-  md: "p-4",
-  lg: "p-6"
+  sm: "p-card-sm",
+  md: "p-card-md",
+  lg: "p-card-lg"
 };
 var shadowStyles2 = {
   none: "shadow-none",
-  sm: "shadow-sm",
+  sm: "shadow-elevation-card",
   md: "shadow",
-  lg: "shadow-lg"
+  lg: "shadow-elevation-dialog"
 };
 var Card = React5__default.default.forwardRef(
   ({
@@ -3273,7 +3273,7 @@ var Card = React5__default.default.forwardRef(
       {
         ref,
         className: cn(
-          "rounded-md",
+          "rounded-container",
           "transition-all duration-[var(--transition-normal)]",
           variantStyles3[variant],
           paddingStyles2[padding],
@@ -3409,7 +3409,7 @@ var Input = React5__default.default.forwardRef(
     ...props
   }, ref) => {
     const type = inputType || htmlType || "text";
-    const resolvedLeftIcon = leftIcon || IconComponent && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "h-4 w-4" });
+    const resolvedLeftIcon = leftIcon || IconComponent && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "h-icon-default w-icon-default" });
     const showClearButton = clearable && value && String(value).length > 0;
     const baseClassName = cn(
       "block w-full rounded-sm transition-all duration-[var(--transition-fast)]",
@@ -3441,7 +3441,7 @@ var Input = React5__default.default.forwardRef(
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "h-4 w-4" }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "h-icon-default w-icon-default" }) })
       ] });
     }
     if (type === "textarea") {
@@ -3495,7 +3495,7 @@ var Input = React5__default.default.forwardRef(
           type: "button",
           onClick: onClear,
           className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground hover:text-foreground",
-          children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-icon-default w-icon-default" })
         }
       ),
       rightIcon && !showClearButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground", children: rightIcon })
@@ -3723,7 +3723,7 @@ function DocCodeBlock({
     Box,
     {
       className: cn(
-        "rounded-md border border-border overflow-hidden",
+        "rounded-container border border-border overflow-hidden",
         className
       ),
       position: "relative",
@@ -3798,11 +3798,11 @@ function DocCodeBlock({
 }
 var linkCardStyles = [
   "border border-border",
-  "rounded-md",
+  "rounded-container",
   "p-4",
   "transition-all",
   "hover:border-primary",
-  "hover:shadow-lg",
+  "hover:shadow-elevation-dialog",
   "no-underline",
   "flex-1",
   "min-w-0",
@@ -4001,7 +4001,7 @@ function DocSearch({
           Box,
           {
             position: "absolute",
-            className: "top-full left-0 right-0 mt-1 z-50 bg-card border border-border rounded-md shadow-lg max-h-80 overflow-y-auto",
+            className: "top-full left-0 right-0 mt-1 z-50 bg-card border border-border rounded-container shadow-elevation-popover max-h-80 overflow-y-auto",
             children: /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", children: results.map((result, index) => /* @__PURE__ */ jsxRuntime.jsx(
               Box,
               {