@floegence/floe-webapp-core 0.86.60 → 0.86.62

package/dist/styles/tokens.d.ts

@@ -44,27 +44,44 @@ export interface FloeMotionToken {
     description: string;
 }
 export declare const floeSharedCssVariables: {
-    readonly '--radius': "0.375rem";
-    readonly '--font-sans': "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
-    readonly '--font-mono': "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace";
+    readonly '--radius': "0.625rem";
+    readonly '--font-sans': "'Inter', 'InterVariable', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif";
+    readonly '--font-mono': "'JetBrains Mono', 'SFMono-Regular', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace";
     readonly '--floe-type-caption': "0.6875rem";
     readonly '--floe-type-supporting': "0.75rem";
-    readonly '--floe-type-control': "0.75rem";
-    readonly '--floe-type-body': "0.75rem";
+    readonly '--floe-type-control': "0.8125rem";
+    readonly '--floe-type-body': "0.8125rem";
     readonly '--floe-type-heading': "1rem";
-    readonly '--floe-line-control': "1.125rem";
-    readonly '--floe-line-body': "1.25rem";
+    readonly '--floe-line-control': "1.25rem";
+    readonly '--floe-line-body': "1.375rem";
     readonly '--floe-control-height-sm': "1.75rem";
     readonly '--floe-control-height-md': "2rem";
-    readonly '--floe-row-height': "1.75rem";
+    readonly '--floe-row-height': "1.875rem";
     readonly '--floe-space-1': "0.25rem";
     readonly '--floe-space-2': "0.5rem";
     readonly '--floe-space-3': "0.75rem";
     readonly '--floe-space-4': "1rem";
     readonly '--floe-space-6': "1.5rem";
-    readonly '--floe-radius-control': "0.375rem";
-    readonly '--floe-radius-group': "0.5rem";
-    readonly '--floe-radius-floating': "12px";
+    readonly '--floe-radius-xs': "0.25rem";
+    readonly '--floe-radius-sm': "0.375rem";
+    readonly '--floe-radius-md': "0.5rem";
+    readonly '--floe-radius-control': "0.625rem";
+    readonly '--floe-radius-group': "0.75rem";
+    readonly '--floe-radius-card': "1rem";
+    readonly '--floe-radius-panel': "1.25rem";
+    readonly '--floe-radius-floating': "1.25rem";
+    readonly '--floe-tracking-tight': "-0.02em";
+    readonly '--floe-tracking-normal': "-0.011em";
+    readonly '--floe-tracking-caps': "0.06em";
+    readonly '--floe-ease-out': "cubic-bezier(0.16, 1, 0.3, 1)";
+    readonly '--floe-ease-in-out': "cubic-bezier(0.65, 0, 0.35, 1)";
+    readonly '--floe-ease-spring': "cubic-bezier(0.34, 1.35, 0.64, 1)";
+    readonly '--floe-duration-instant': "90ms";
+    readonly '--floe-duration-fast': "140ms";
+    readonly '--floe-duration-base': "200ms";
+    readonly '--floe-duration-slow': "280ms";
+    readonly '--floe-hover-lift': "-1px";
+    readonly '--floe-hover-lift-strong': "-2px";
 };
 export declare const floeColorTokenCategories: readonly [{
     readonly name: "Base Colors";
@@ -519,12 +536,12 @@ export declare const floeTypographyTokens: readonly [{
 export declare const floeFontFamilyTokens: readonly [{
     readonly name: "Sans";
     readonly variable: "--font-sans";
-    readonly value: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+    readonly value: "'Inter', 'InterVariable', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif";
     readonly description: "Default UI font family for application chrome and content.";
 }, {
     readonly name: "Mono";
     readonly variable: "--font-mono";
-    readonly value: "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace";
+    readonly value: "'JetBrains Mono', 'SFMono-Regular', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace";
     readonly description: "Monospace font family for code, terminal, and diagnostics.";
 }];
 export declare const floeSpacingTokens: readonly [{
@@ -584,35 +601,45 @@ export declare const floeRadiusTokens: readonly [{
     readonly variable: "-";
     readonly className: "rounded-none";
 }, {
-    readonly name: "SM";
-    readonly value: "0.125rem";
-    readonly variable: "-";
-    readonly className: "rounded-sm";
+    readonly name: "XS";
+    readonly value: "0.25rem";
+    readonly variable: "--floe-radius-xs";
+    readonly className: "rounded-xs";
 }, {
-    readonly name: "Default";
+    readonly name: "SM";
     readonly value: "0.375rem";
-    readonly variable: "--radius";
-    readonly className: "rounded";
+    readonly variable: "--floe-radius-sm";
+    readonly className: "rounded-sm";
 }, {
     readonly name: "MD";
     readonly value: "0.5rem";
-    readonly variable: "-";
+    readonly variable: "--floe-radius-md";
     readonly className: "rounded-md";
 }, {
-    readonly name: "LG";
+    readonly name: "Control";
+    readonly value: "0.625rem";
+    readonly variable: "--floe-radius-control";
+    readonly className: "rounded-control";
+}, {
+    readonly name: "Group";
     readonly value: "0.75rem";
-    readonly variable: "-";
-    readonly className: "rounded-lg";
+    readonly variable: "--floe-radius-group";
+    readonly className: "rounded-group";
 }, {
-    readonly name: "XL";
+    readonly name: "Card";
     readonly value: "1rem";
-    readonly variable: "-";
-    readonly className: "rounded-xl";
+    readonly variable: "--floe-radius-card";
+    readonly className: "rounded-card";
 }, {
-    readonly name: "2XL";
-    readonly value: "1.5rem";
-    readonly variable: "-";
-    readonly className: "rounded-2xl";
+    readonly name: "Panel";
+    readonly value: "1.25rem";
+    readonly variable: "--floe-radius-panel";
+    readonly className: "rounded-panel";
+}, {
+    readonly name: "Floating";
+    readonly value: "1.25rem";
+    readonly variable: "--floe-radius-floating";
+    readonly className: "rounded-panel";
 }, {
     readonly name: "Full";
     readonly value: "9999px";
@@ -649,6 +676,21 @@ export declare const floeMotionTokens: readonly [{
     readonly keyframes: "glow-pulse";
     readonly usage: "Neon and emphasis effects";
     readonly description: "Pulsing glow animation for elevated emphasis.";
+}, {
+    readonly name: "Hover Lift";
+    readonly keyframes: "transition-transform";
+    readonly usage: "floe-hover-lift / hover:-translate-y-px";
+    readonly description: "One-pixel rise with an eased return on pointer hover. Transform only, so control geometry never changes.";
+}, {
+    readonly name: "Hover Surface";
+    readonly keyframes: "transition-colors";
+    readonly usage: "floe-hover-surface";
+    readonly description: "Tint-shift hover feedback for rows and chips that must not move, such as menu items and list rows.";
+}, {
+    readonly name: "Press Settle";
+    readonly keyframes: "transition-transform";
+    readonly usage: "active:translate-y-0 active:scale-[0.985]";
+    readonly description: "A small inward settle on press that returns instantly, keeping hit targets and neighbor geometry stable.";
 }];
 export declare const floeThemeColorVariables: {
     readonly light: Record<`--${string}`, string>;
@@ -660,15 +702,15 @@ export declare function getFloeColorTokenValue(variable: FloeCssVariableName, th
 export declare const floeSurfaceTokens: readonly [{
     readonly variable: "--floe-surface-shadow-raised";
     readonly role: "raised";
-    readonly fallback: "0 1px 3px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
+    readonly fallback: "var(--floe-elevation-raised)";
 }, {
     readonly variable: "--floe-surface-shadow-inset";
     readonly role: "inset";
-    readonly fallback: "inset 0 1px 1px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)";
+    readonly fallback: "0 0 transparent";
 }, {
     readonly variable: "--floe-surface-shadow-floating";
     readonly role: "floating";
-    readonly fallback: "var(--floe-window-shadow)";
+    readonly fallback: "var(--floe-elevation-float)";
 }, {
     readonly variable: "--floe-surface-shadow-interacting";
     readonly role: "interacting";
@@ -1128,12 +1170,12 @@ export declare const floeDesignTokens: {
     readonly fonts: readonly [{
         readonly name: "Sans";
         readonly variable: "--font-sans";
-        readonly value: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+        readonly value: "'Inter', 'InterVariable', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif";
         readonly description: "Default UI font family for application chrome and content.";
     }, {
         readonly name: "Mono";
         readonly variable: "--font-mono";
-        readonly value: "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace";
+        readonly value: "'JetBrains Mono', 'SFMono-Regular', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace";
         readonly description: "Monospace font family for code, terminal, and diagnostics.";
     }];
     readonly spacing: readonly [{
@@ -1193,35 +1235,45 @@ export declare const floeDesignTokens: {
         readonly variable: "-";
         readonly className: "rounded-none";
     }, {
-        readonly name: "SM";
-        readonly value: "0.125rem";
-        readonly variable: "-";
-        readonly className: "rounded-sm";
+        readonly name: "XS";
+        readonly value: "0.25rem";
+        readonly variable: "--floe-radius-xs";
+        readonly className: "rounded-xs";
     }, {
-        readonly name: "Default";
+        readonly name: "SM";
         readonly value: "0.375rem";
-        readonly variable: "--radius";
-        readonly className: "rounded";
+        readonly variable: "--floe-radius-sm";
+        readonly className: "rounded-sm";
     }, {
         readonly name: "MD";
         readonly value: "0.5rem";
-        readonly variable: "-";
+        readonly variable: "--floe-radius-md";
         readonly className: "rounded-md";
     }, {
-        readonly name: "LG";
+        readonly name: "Control";
+        readonly value: "0.625rem";
+        readonly variable: "--floe-radius-control";
+        readonly className: "rounded-control";
+    }, {
+        readonly name: "Group";
         readonly value: "0.75rem";
-        readonly variable: "-";
-        readonly className: "rounded-lg";
+        readonly variable: "--floe-radius-group";
+        readonly className: "rounded-group";
     }, {
-        readonly name: "XL";
+        readonly name: "Card";
         readonly value: "1rem";
-        readonly variable: "-";
-        readonly className: "rounded-xl";
+        readonly variable: "--floe-radius-card";
+        readonly className: "rounded-card";
     }, {
-        readonly name: "2XL";
-        readonly value: "1.5rem";
-        readonly variable: "-";
-        readonly className: "rounded-2xl";
+        readonly name: "Panel";
+        readonly value: "1.25rem";
+        readonly variable: "--floe-radius-panel";
+        readonly className: "rounded-panel";
+    }, {
+        readonly name: "Floating";
+        readonly value: "1.25rem";
+        readonly variable: "--floe-radius-floating";
+        readonly className: "rounded-panel";
     }, {
         readonly name: "Full";
         readonly value: "9999px";
@@ -1258,42 +1310,74 @@ export declare const floeDesignTokens: {
         readonly keyframes: "glow-pulse";
         readonly usage: "Neon and emphasis effects";
         readonly description: "Pulsing glow animation for elevated emphasis.";
+    }, {
+        readonly name: "Hover Lift";
+        readonly keyframes: "transition-transform";
+        readonly usage: "floe-hover-lift / hover:-translate-y-px";
+        readonly description: "One-pixel rise with an eased return on pointer hover. Transform only, so control geometry never changes.";
+    }, {
+        readonly name: "Hover Surface";
+        readonly keyframes: "transition-colors";
+        readonly usage: "floe-hover-surface";
+        readonly description: "Tint-shift hover feedback for rows and chips that must not move, such as menu items and list rows.";
+    }, {
+        readonly name: "Press Settle";
+        readonly keyframes: "transition-transform";
+        readonly usage: "active:translate-y-0 active:scale-[0.985]";
+        readonly description: "A small inward settle on press that returns instantly, keeping hit targets and neighbor geometry stable.";
     }];
     readonly shared: {
-        readonly '--radius': "0.375rem";
-        readonly '--font-sans': "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
-        readonly '--font-mono': "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace";
+        readonly '--radius': "0.625rem";
+        readonly '--font-sans': "'Inter', 'InterVariable', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif";
+        readonly '--font-mono': "'JetBrains Mono', 'SFMono-Regular', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace";
         readonly '--floe-type-caption': "0.6875rem";
         readonly '--floe-type-supporting': "0.75rem";
-        readonly '--floe-type-control': "0.75rem";
-        readonly '--floe-type-body': "0.75rem";
+        readonly '--floe-type-control': "0.8125rem";
+        readonly '--floe-type-body': "0.8125rem";
         readonly '--floe-type-heading': "1rem";
-        readonly '--floe-line-control': "1.125rem";
-        readonly '--floe-line-body': "1.25rem";
+        readonly '--floe-line-control': "1.25rem";
+        readonly '--floe-line-body': "1.375rem";
         readonly '--floe-control-height-sm': "1.75rem";
         readonly '--floe-control-height-md': "2rem";
-        readonly '--floe-row-height': "1.75rem";
+        readonly '--floe-row-height': "1.875rem";
         readonly '--floe-space-1': "0.25rem";
         readonly '--floe-space-2': "0.5rem";
         readonly '--floe-space-3': "0.75rem";
         readonly '--floe-space-4': "1rem";
         readonly '--floe-space-6': "1.5rem";
-        readonly '--floe-radius-control': "0.375rem";
-        readonly '--floe-radius-group': "0.5rem";
-        readonly '--floe-radius-floating': "12px";
+        readonly '--floe-radius-xs': "0.25rem";
+        readonly '--floe-radius-sm': "0.375rem";
+        readonly '--floe-radius-md': "0.5rem";
+        readonly '--floe-radius-control': "0.625rem";
+        readonly '--floe-radius-group': "0.75rem";
+        readonly '--floe-radius-card': "1rem";
+        readonly '--floe-radius-panel': "1.25rem";
+        readonly '--floe-radius-floating': "1.25rem";
+        readonly '--floe-tracking-tight': "-0.02em";
+        readonly '--floe-tracking-normal': "-0.011em";
+        readonly '--floe-tracking-caps': "0.06em";
+        readonly '--floe-ease-out': "cubic-bezier(0.16, 1, 0.3, 1)";
+        readonly '--floe-ease-in-out': "cubic-bezier(0.65, 0, 0.35, 1)";
+        readonly '--floe-ease-spring': "cubic-bezier(0.34, 1.35, 0.64, 1)";
+        readonly '--floe-duration-instant': "90ms";
+        readonly '--floe-duration-fast': "140ms";
+        readonly '--floe-duration-base': "200ms";
+        readonly '--floe-duration-slow': "280ms";
+        readonly '--floe-hover-lift': "-1px";
+        readonly '--floe-hover-lift-strong': "-2px";
     };
     readonly surface: readonly [{
         readonly variable: "--floe-surface-shadow-raised";
         readonly role: "raised";
-        readonly fallback: "0 1px 3px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
+        readonly fallback: "var(--floe-elevation-raised)";
     }, {
         readonly variable: "--floe-surface-shadow-inset";
         readonly role: "inset";
-        readonly fallback: "inset 0 1px 1px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)";
+        readonly fallback: "0 0 transparent";
     }, {
         readonly variable: "--floe-surface-shadow-floating";
         readonly role: "floating";
-        readonly fallback: "var(--floe-window-shadow)";
+        readonly fallback: "var(--floe-elevation-float)";
     }, {
         readonly variable: "--floe-surface-shadow-interacting";
         readonly role: "interacting";

package/dist/styles/tokens.js

@@ -1,26 +1,43 @@
 import { CLASSIC_DARK_SEMANTIC_TOKENS as e, CLASSIC_LIGHT_SEMANTIC_TOKENS as a } from "./themes/classicSemanticTokens.js";
-const i = {
-  "--radius": "0.375rem",
-  "--font-sans": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-  "--font-mono": "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace",
+const r = {
+  "--radius": "0.625rem",
+  "--font-sans": "'Inter', 'InterVariable', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
+  "--font-mono": "'JetBrains Mono', 'SFMono-Regular', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace",
   "--floe-type-caption": "0.6875rem",
   "--floe-type-supporting": "0.75rem",
-  "--floe-type-control": "0.75rem",
-  "--floe-type-body": "0.75rem",
+  "--floe-type-control": "0.8125rem",
+  "--floe-type-body": "0.8125rem",
   "--floe-type-heading": "1rem",
-  "--floe-line-control": "1.125rem",
-  "--floe-line-body": "1.25rem",
+  "--floe-line-control": "1.25rem",
+  "--floe-line-body": "1.375rem",
   "--floe-control-height-sm": "1.75rem",
   "--floe-control-height-md": "2rem",
-  "--floe-row-height": "1.75rem",
+  "--floe-row-height": "1.875rem",
   "--floe-space-1": "0.25rem",
   "--floe-space-2": "0.5rem",
   "--floe-space-3": "0.75rem",
   "--floe-space-4": "1rem",
   "--floe-space-6": "1.5rem",
-  "--floe-radius-control": "0.375rem",
-  "--floe-radius-group": "0.5rem",
-  "--floe-radius-floating": "12px"
+  "--floe-radius-xs": "0.25rem",
+  "--floe-radius-sm": "0.375rem",
+  "--floe-radius-md": "0.5rem",
+  "--floe-radius-control": "0.625rem",
+  "--floe-radius-group": "0.75rem",
+  "--floe-radius-card": "1rem",
+  "--floe-radius-panel": "1.25rem",
+  "--floe-radius-floating": "1.25rem",
+  "--floe-tracking-tight": "-0.02em",
+  "--floe-tracking-normal": "-0.011em",
+  "--floe-tracking-caps": "0.06em",
+  "--floe-ease-out": "cubic-bezier(0.16, 1, 0.3, 1)",
+  "--floe-ease-in-out": "cubic-bezier(0.65, 0, 0.35, 1)",
+  "--floe-ease-spring": "cubic-bezier(0.34, 1.35, 0.64, 1)",
+  "--floe-duration-instant": "90ms",
+  "--floe-duration-fast": "140ms",
+  "--floe-duration-base": "200ms",
+  "--floe-duration-slow": "280ms",
+  "--floe-hover-lift": "-1px",
+  "--floe-hover-lift-strong": "-2px"
 }, t = [
   {
     name: "Base Colors",
@@ -559,20 +576,20 @@ const i = {
     className: "text-xl",
     description: "Page titles."
   }
-], c = [
+], s = [
   {
     name: "Sans",
     variable: "--font-sans",
-    value: i["--font-sans"],
+    value: r["--font-sans"],
     description: "Default UI font family for application chrome and content."
   },
   {
     name: "Mono",
     variable: "--font-mono",
-    value: i["--font-mono"],
+    value: r["--font-mono"],
     description: "Monospace font family for code, terminal, and diagnostics."
   }
-], s = [
+], c = [
   { name: "0.5", value: "0.125rem", pixels: "2px", className: "gap-0.5, p-0.5" },
   { name: "1", value: "0.25rem", pixels: "4px", className: "gap-1, p-1" },
   { name: "1.5", value: "0.375rem", pixels: "6px", className: "gap-1.5, p-1.5" },
@@ -584,18 +601,21 @@ const i = {
   { name: "6", value: "1.5rem", pixels: "24px", className: "gap-6, p-6" },
   { name: "8", value: "2rem", pixels: "32px", className: "gap-8, p-8" }
 ], d = [
+  /* The ladder is named by what a surface is, not by how large it is, and the
+   * steps are concentric: a control inside a card with matching padding lands
+   * on the rung between them. The Tailwind numeric names this table used to
+   * list (`rounded-sm` 4px, `rounded-md` 12px, `rounded-lg` 16px) were a second,
+   * incompatible scale — `rounded-sm` here is 6px and `rounded-lg` no longer
+   * exists, so anything reading this table to build UI got the wrong radius. */
   { name: "None", value: "0", variable: "-", className: "rounded-none" },
-  { name: "SM", value: "0.125rem", variable: "-", className: "rounded-sm" },
-  {
-    name: "Default",
-    value: i["--radius"],
-    variable: "--radius",
-    className: "rounded"
-  },
-  { name: "MD", value: "0.5rem", variable: "-", className: "rounded-md" },
-  { name: "LG", value: "0.75rem", variable: "-", className: "rounded-lg" },
-  { name: "XL", value: "1rem", variable: "-", className: "rounded-xl" },
-  { name: "2XL", value: "1.5rem", variable: "-", className: "rounded-2xl" },
+  { name: "XS", value: r["--floe-radius-xs"], variable: "--floe-radius-xs", className: "rounded-xs" },
+  { name: "SM", value: r["--floe-radius-sm"], variable: "--floe-radius-sm", className: "rounded-sm" },
+  { name: "MD", value: r["--floe-radius-md"], variable: "--floe-radius-md", className: "rounded-md" },
+  { name: "Control", value: r["--floe-radius-control"], variable: "--floe-radius-control", className: "rounded-control" },
+  { name: "Group", value: r["--floe-radius-group"], variable: "--floe-radius-group", className: "rounded-group" },
+  { name: "Card", value: r["--floe-radius-card"], variable: "--floe-radius-card", className: "rounded-card" },
+  { name: "Panel", value: r["--floe-radius-panel"], variable: "--floe-radius-panel", className: "rounded-panel" },
+  { name: "Floating", value: r["--floe-radius-floating"], variable: "--floe-radius-floating", className: "rounded-panel" },
   { name: "Full", value: "9999px", variable: "-", className: "rounded-full" }
 ], u = [
   {
@@ -633,13 +653,31 @@ const i = {
     keyframes: "glow-pulse",
     usage: "Neon and emphasis effects",
     description: "Pulsing glow animation for elevated emphasis."
+  },
+  {
+    name: "Hover Lift",
+    keyframes: "transition-transform",
+    usage: "floe-hover-lift / hover:-translate-y-px",
+    description: "One-pixel rise with an eased return on pointer hover. Transform only, so control geometry never changes."
+  },
+  {
+    name: "Hover Surface",
+    keyframes: "transition-colors",
+    usage: "floe-hover-surface",
+    description: "Tint-shift hover feedback for rows and chips that must not move, such as menu items and list rows."
+  },
+  {
+    name: "Press Settle",
+    keyframes: "transition-transform",
+    usage: "active:translate-y-0 active:scale-[0.985]",
+    description: "A small inward settle on press that returns instantly, keeping hit targets and neighbor geometry stable."
   }
-], g = t.reduce((o, r) => (o.push(...r.tokens), o), []);
-function n(o) {
+], g = t.reduce((i, o) => (i.push(...o.tokens), i), []);
+function n(i) {
   return Object.fromEntries(
-    g.map((r) => [
-      r.variable,
-      o === "light" ? r.lightValue : r.darkValue
+    g.map((o) => [
+      o.variable,
+      i === "light" ? o.lightValue : o.darkValue
     ])
   );
 }
@@ -647,34 +685,34 @@ const m = {
   light: n("light"),
   dark: n("dark")
 };
-function h(o, r) {
-  return m[r][o];
+function p(i, o) {
+  return m[o][i];
 }
-const b = [
-  { variable: "--floe-surface-shadow-raised", role: "raised", fallback: "0 1px 3px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)" },
-  { variable: "--floe-surface-shadow-inset", role: "inset", fallback: "inset 0 1px 1px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)" },
-  { variable: "--floe-surface-shadow-floating", role: "floating", fallback: "var(--floe-window-shadow)" },
+const f = [
+  { variable: "--floe-surface-shadow-raised", role: "raised", fallback: "var(--floe-elevation-raised)" },
+  { variable: "--floe-surface-shadow-inset", role: "inset", fallback: "0 0 transparent" },
+  { variable: "--floe-surface-shadow-floating", role: "floating", fallback: "var(--floe-elevation-float)" },
   { variable: "--floe-surface-shadow-interacting", role: "interacting", fallback: "0 1px 2px var(--floe-surface-shade)" }
-], f = {
+], h = {
   colors: t,
   typography: l,
-  fonts: c,
-  spacing: s,
+  fonts: s,
+  spacing: c,
   radius: d,
   motion: u,
-  shared: i,
-  surface: b
+  shared: r,
+  surface: f
 };
 export {
   t as floeColorTokenCategories,
-  f as floeDesignTokens,
-  c as floeFontFamilyTokens,
+  h as floeDesignTokens,
+  s as floeFontFamilyTokens,
   u as floeMotionTokens,
   d as floeRadiusTokens,
-  i as floeSharedCssVariables,
-  s as floeSpacingTokens,
-  b as floeSurfaceTokens,
+  r as floeSharedCssVariables,
+  c as floeSpacingTokens,
+  f as floeSurfaceTokens,
   m as floeThemeColorVariables,
   l as floeTypographyTokens,
-  h as getFloeColorTokenValue
+  p as getFloeColorTokenValue
 };