@floegence/floe-webapp-core 0.52.13 → 0.53.1

package/dist/styles/tokens.js

@@ -1,4 +1,5 @@
-const r = {
+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",
@@ -13,8 +14,8 @@ const r = {
   "--floe-space-6": "1.5rem",
   "--floe-radius-control": "0.375rem",
   "--floe-radius-group": "0.5rem",
-  "--floe-radius-floating": "0.625rem"
-}, l = [
+  "--floe-radius-floating": "12px"
+}, t = [
   {
     name: "Base Colors",
     description: "Primary application surfaces and text colors.",
@@ -22,71 +23,71 @@ const r = {
       {
         name: "Background",
         variable: "--background",
-        lightValue: "hsl(34 24% 94%)",
-        darkValue: "hsl(222 30% 8%)",
+        lightValue: a["--background"],
+        darkValue: e["--background"],
         description: "Main application background color."
       },
       {
         name: "Foreground",
         variable: "--foreground",
-        lightValue: "hsl(214 26% 17%)",
-        darkValue: "hsl(210 20% 98%)",
+        lightValue: a["--foreground"],
+        darkValue: e["--foreground"],
         description: "Default foreground color for body text."
       },
       {
         name: "Primary",
         variable: "--primary",
-        lightValue: "hsl(214 26% 17%)",
-        darkValue: "hsl(210 20% 98%)",
+        lightValue: a["--primary"],
+        darkValue: e["--primary"],
         description: "Primary interactive color used by buttons and emphasis."
       },
       {
         name: "Primary Foreground",
         variable: "--primary-foreground",
-        lightValue: "hsl(36 100% 99%)",
-        darkValue: "hsl(222 30% 10%)",
+        lightValue: a["--primary-foreground"],
+        darkValue: e["--primary-foreground"],
         description: "Foreground color used on primary surfaces."
       },
       {
         name: "Secondary",
         variable: "--secondary",
-        lightValue: "hsl(36 15% 94%)",
-        darkValue: "hsl(220 18% 15%)",
+        lightValue: a["--secondary"],
+        darkValue: e["--secondary"],
         description: "Secondary surface color for lower-emphasis blocks."
       },
       {
         name: "Secondary Foreground",
         variable: "--secondary-foreground",
-        lightValue: "hsl(214 25% 25%)",
-        darkValue: "hsl(210 20% 98%)",
+        lightValue: a["--secondary-foreground"],
+        darkValue: e["--secondary-foreground"],
         description: "Foreground color used on secondary surfaces."
       },
       {
         name: "Muted",
         variable: "--muted",
-        lightValue: "hsl(36 15% 94%)",
-        darkValue: "hsl(220 16% 16%)",
+        lightValue: a["--muted"],
+        darkValue: e["--muted"],
         description: "Muted surface color for subtle containers and fills."
       },
       {
         name: "Muted Foreground",
         variable: "--muted-foreground",
-        lightValue: "hsl(215 16% 42%)",
-        darkValue: "hsl(215 16% 56%)",
+        lightValue: a["--muted-foreground"],
+        darkValue: e["--muted-foreground"],
         description: "Secondary text color for supporting copy."
       },
       {
         name: "Accent",
         variable: "--accent",
-        lightValue: "hsl(34 9% 85%)",
-        darkValue: "hsl(220 14% 19%)",
+        lightValue: a["--accent"],
+        darkValue: e["--accent"],
         description: "Accent surface for hover states and light emphasis."
       },
       {
         name: "Accent Foreground",
         variable: "--accent-foreground",
-        lightValue: "hsl(214 26% 17%)",
-        darkValue: "hsl(210 20% 98%)",
+        lightValue: a["--accent-foreground"],
+        darkValue: e["--accent-foreground"],
         description: "Foreground color used on accent surfaces."
       }
     ]
@@ -98,50 +99,50 @@ const r = {
       {
         name: "Card",
         variable: "--card",
-        lightValue: "hsl(36 100% 99%)",
-        darkValue: "hsl(220 20% 13%)",
+        lightValue: a["--card"],
+        darkValue: e["--card"],
         description: "Card background surface."
       },
       {
         name: "Card Foreground",
         variable: "--card-foreground",
-        lightValue: "hsl(214 26% 17%)",
-        darkValue: "hsl(210 20% 98%)",
+        lightValue: a["--card-foreground"],
+        darkValue: e["--card-foreground"],
         description: "Foreground color used on card surfaces."
       },
       {
         name: "Popover",
         variable: "--popover",
-        lightValue: "hsl(36 100% 99%)",
-        darkValue: "hsl(220 18% 15%)",
+        lightValue: a["--popover"],
+        darkValue: e["--popover"],
         description: "Popover and floating panel background."
       },
       {
         name: "Popover Foreground",
         variable: "--popover-foreground",
-        lightValue: "hsl(214 26% 17%)",
-        darkValue: "hsl(210 20% 98%)",
+        lightValue: a["--popover-foreground"],
+        darkValue: e["--popover-foreground"],
         description: "Foreground color used on popovers."
       },
       {
         name: "Border",
         variable: "--border",
-        lightValue: "hsl(35 13% 82%)",
-        darkValue: "hsl(220 16% 20%)",
+        lightValue: a["--border"],
+        darkValue: e["--border"],
         description: "Default border color."
       },
       {
         name: "Input",
         variable: "--input",
-        lightValue: "hsl(37 15% 76%)",
-        darkValue: "hsl(220 18% 15%)",
+        lightValue: a["--input"],
+        darkValue: e["--input"],
         description: "Input border color."
       },
       {
         name: "Ring",
         variable: "--ring",
-        lightValue: "hsl(214 26% 17%)",
-        darkValue: "hsl(215 25% 70%)",
+        lightValue: a["--ring"],
+        darkValue: e["--ring"],
         description: "Focus ring color."
       }
     ]
@@ -153,57 +154,57 @@ const r = {
       {
         name: "Success",
         variable: "--success",
-        lightValue: "oklch(0.68 0.16 150)",
-        darkValue: "oklch(0.72 0.19 150)",
+        lightValue: a["--success"],
+        darkValue: e["--success"],
         description: "Success state color."
       },
       {
         name: "Success Foreground",
         variable: "--success-foreground",
-        lightValue: "hsl(0 0% 100%)",
-        darkValue: "hsl(222 30% 10%)",
+        lightValue: a["--success-foreground"],
+        darkValue: e["--success-foreground"],
         description: "Foreground color used on success surfaces."
       },
       {
         name: "Warning",
         variable: "--warning",
-        lightValue: "hsl(38 92% 50%)",
-        darkValue: "oklch(0.82 0.16 80)",
+        lightValue: a["--warning"],
+        darkValue: e["--warning"],
         description: "Warning state color."
       },
       {
         name: "Warning Foreground",
         variable: "--warning-foreground",
-        lightValue: "hsl(214 26% 17%)",
-        darkValue: "hsl(222 30% 10%)",
+        lightValue: a["--warning-foreground"],
+        darkValue: e["--warning-foreground"],
         description: "Foreground color used on warning surfaces."
       },
       {
         name: "Error",
         variable: "--error",
-        lightValue: "oklch(0.65 0.2 25)",
-        darkValue: "oklch(0.7 0.22 25)",
+        lightValue: a["--error"],
+        darkValue: e["--error"],
         description: "Error state color."
       },
       {
         name: "Error Foreground",
         variable: "--error-foreground",
-        lightValue: "hsl(0 0% 100%)",
-        darkValue: "hsl(0 0% 100%)",
+        lightValue: a["--error-foreground"],
+        darkValue: e["--error-foreground"],
         description: "Foreground color used on error surfaces."
       },
       {
         name: "Info",
         variable: "--info",
-        lightValue: "hsl(217 91% 60%)",
-        darkValue: "oklch(0.7 0.15 250)",
+        lightValue: a["--info"],
+        darkValue: e["--info"],
         description: "Informational state color."
       },
       {
         name: "Info Foreground",
         variable: "--info-foreground",
-        lightValue: "hsl(0 0% 100%)",
-        darkValue: "hsl(0 0% 100%)",
+        lightValue: a["--info-foreground"],
+        darkValue: e["--info-foreground"],
         description: "Foreground color used on info surfaces."
       }
     ]
@@ -215,43 +216,43 @@ const r = {
       {
         name: "Highlight Block Info Accent",
         variable: "--highlight-block-info-accent",
-        lightValue: "oklch(0.52 0.14 245)",
-        darkValue: "oklch(0.62 0.12 240)",
+        lightValue: a["--highlight-block-info-accent"],
+        darkValue: e["--highlight-block-info-accent"],
         description: "Info accent used by HighlightBlock surfaces and borders."
       },
       {
         name: "Highlight Block Warning Accent",
         variable: "--highlight-block-warning-accent",
-        lightValue: "oklch(0.62 0.16 65)",
-        darkValue: "oklch(0.7 0.14 65)",
+        lightValue: a["--highlight-block-warning-accent"],
+        darkValue: e["--highlight-block-warning-accent"],
         description: "Warning accent used by HighlightBlock surfaces and borders."
       },
       {
         name: "Highlight Block Success Accent",
         variable: "--highlight-block-success-accent",
-        lightValue: "oklch(0.55 0.14 155)",
-        darkValue: "oklch(0.62 0.12 155)",
+        lightValue: a["--highlight-block-success-accent"],
+        darkValue: e["--highlight-block-success-accent"],
         description: "Success accent used by HighlightBlock surfaces and borders."
       },
       {
         name: "Highlight Block Error Accent",
         variable: "--highlight-block-error-accent",
-        lightValue: "oklch(0.55 0.16 25)",
-        darkValue: "oklch(0.6 0.14 25)",
+        lightValue: a["--highlight-block-error-accent"],
+        darkValue: e["--highlight-block-error-accent"],
         description: "Error accent used by HighlightBlock surfaces and borders."
       },
       {
         name: "Highlight Block Note Accent",
         variable: "--highlight-block-note-accent",
-        lightValue: "oklch(0.52 0.16 285)",
-        darkValue: "oklch(0.62 0.14 285)",
+        lightValue: a["--highlight-block-note-accent"],
+        darkValue: e["--highlight-block-note-accent"],
         description: "Note accent used by HighlightBlock surfaces and borders."
       },
       {
         name: "Highlight Block Tip Accent",
         variable: "--highlight-block-tip-accent",
-        lightValue: "oklch(0.52 0.12 175)",
-        darkValue: "oklch(0.6 0.1 175)",
+        lightValue: a["--highlight-block-tip-accent"],
+        darkValue: e["--highlight-block-tip-accent"],
         description: "Tip accent used by HighlightBlock surfaces and borders."
       }
     ]
@@ -263,36 +264,36 @@ const r = {
       {
         name: "Chrome Border",
         variable: "--chrome-border",
-        lightValue: "hsl(33 11% 84%)",
-        darkValue: "hsl(220 16% 13%)",
+        lightValue: a["--chrome-border"],
+        darkValue: e["--chrome-border"],
         description: "Default shared shell divider color."
       },
       {
         name: "Top Bar Border",
         variable: "--top-bar-border",
-        lightValue: "var(--chrome-border)",
-        darkValue: "var(--chrome-border)",
+        lightValue: a["--top-bar-border"],
+        darkValue: e["--top-bar-border"],
         description: "Top bar divider color."
       },
       {
         name: "Activity Bar Border",
         variable: "--activity-bar-border",
-        lightValue: "var(--chrome-border)",
-        darkValue: "var(--chrome-border)",
+        lightValue: a["--activity-bar-border"],
+        darkValue: e["--activity-bar-border"],
         description: "Activity bar divider color."
       },
       {
         name: "Bottom Bar Border",
         variable: "--bottom-bar-border",
-        lightValue: "var(--chrome-border)",
-        darkValue: "var(--chrome-border)",
+        lightValue: a["--bottom-bar-border"],
+        darkValue: e["--bottom-bar-border"],
         description: "Bottom bar divider color."
       },
       {
         name: "Terminal Panel Border",
         variable: "--terminal-panel-border",
-        lightValue: "var(--chrome-border)",
-        darkValue: "var(--chrome-border)",
+        lightValue: a["--terminal-panel-border"],
+        darkValue: e["--terminal-panel-border"],
         description: "Terminal panel divider color."
       }
     ]
@@ -304,57 +305,57 @@ const r = {
       {
         name: "Sidebar",
         variable: "--sidebar",
-        lightValue: "hsl(34 13% 90%)",
-        darkValue: "hsl(221 22% 11%)",
+        lightValue: a["--sidebar"],
+        darkValue: e["--sidebar"],
         description: "Sidebar background."
       },
       {
         name: "Sidebar Foreground",
         variable: "--sidebar-foreground",
-        lightValue: "hsl(214 26% 17%)",
-        darkValue: "hsl(210 20% 98%)",
+        lightValue: a["--sidebar-foreground"],
+        darkValue: e["--sidebar-foreground"],
         description: "Sidebar foreground color."
       },
       {
         name: "Sidebar Primary",
         variable: "--sidebar-primary",
-        lightValue: "hsl(214 26% 17%)",
-        darkValue: "hsl(217 80% 55%)",
+        lightValue: a["--sidebar-primary"],
+        darkValue: e["--sidebar-primary"],
         description: "Primary emphasis color inside the sidebar."
       },
       {
         name: "Sidebar Primary Foreground",
         variable: "--sidebar-primary-foreground",
-        lightValue: "hsl(36 100% 99%)",
-        darkValue: "hsl(0 0% 100%)",
+        lightValue: a["--sidebar-primary-foreground"],
+        darkValue: e["--sidebar-primary-foreground"],
         description: "Foreground color used on sidebar primary surfaces."
       },
       {
         name: "Sidebar Accent",
         variable: "--sidebar-accent",
-        lightValue: "hsl(34 9% 84%)",
-        darkValue: "hsl(220 14% 19%)",
+        lightValue: a["--sidebar-accent"],
+        darkValue: e["--sidebar-accent"],
         description: "Accent surface used for sidebar hover and active states."
       },
       {
         name: "Sidebar Accent Foreground",
         variable: "--sidebar-accent-foreground",
-        lightValue: "hsl(214 26% 17%)",
-        darkValue: "hsl(210 20% 98%)",
+        lightValue: a["--sidebar-accent-foreground"],
+        darkValue: e["--sidebar-accent-foreground"],
         description: "Foreground color used on sidebar accent surfaces."
       },
       {
         name: "Sidebar Border",
         variable: "--sidebar-border",
-        lightValue: "hsl(33 9% 82%)",
-        darkValue: "hsl(220 16% 13%)",
+        lightValue: a["--sidebar-border"],
+        darkValue: e["--sidebar-border"],
         description: "Sidebar inner border color."
       },
       {
         name: "Sidebar Ring",
         variable: "--sidebar-ring",
-        lightValue: "hsl(214 26% 17%)",
-        darkValue: "hsl(217 80% 55%)",
+        lightValue: a["--sidebar-ring"],
+        darkValue: e["--sidebar-ring"],
         description: "Focus ring color for sidebar elements."
       }
     ]
@@ -366,36 +367,36 @@ const r = {
       {
         name: "Activity Bar",
         variable: "--activity-bar",
-        lightValue: "hsl(34 11% 90%)",
-        darkValue: "hsl(222 28% 7%)",
+        lightValue: a["--activity-bar"],
+        darkValue: e["--activity-bar"],
         description: "Activity bar background."
       },
       {
         name: "Activity Bar Foreground",
         variable: "--activity-bar-foreground",
-        lightValue: "hsl(215 14% 46%)",
-        darkValue: "hsl(215 16% 50%)",
+        lightValue: a["--activity-bar-foreground"],
+        darkValue: e["--activity-bar-foreground"],
         description: "Default activity bar icon color."
       },
       {
         name: "Activity Bar Foreground Active",
         variable: "--activity-bar-foreground-active",
-        lightValue: "hsl(214 26% 17%)",
-        darkValue: "hsl(210 20% 96%)",
+        lightValue: a["--activity-bar-foreground-active"],
+        darkValue: e["--activity-bar-foreground-active"],
         description: "Active activity bar icon color."
       },
       {
         name: "Activity Bar Badge",
         variable: "--activity-bar-badge",
-        lightValue: "hsl(214 26% 17%)",
-        darkValue: "hsl(217 80% 55%)",
+        lightValue: a["--activity-bar-badge"],
+        darkValue: e["--activity-bar-badge"],
         description: "Activity bar badge background."
       },
       {
         name: "Activity Bar Badge Foreground",
         variable: "--activity-bar-badge-foreground",
-        lightValue: "hsl(36 100% 99%)",
-        darkValue: "hsl(0 0% 100%)",
+        lightValue: a["--activity-bar-badge-foreground"],
+        darkValue: e["--activity-bar-badge-foreground"],
         description: "Activity bar badge foreground."
       }
     ]
@@ -407,15 +408,15 @@ const r = {
       {
         name: "Terminal Background",
         variable: "--terminal-background",
-        lightValue: "hsl(214 26% 17%)",
-        darkValue: "hsl(222 32% 7%)",
+        lightValue: a["--terminal-background"],
+        darkValue: e["--terminal-background"],
         description: "Integrated terminal background."
       },
       {
         name: "Terminal Foreground",
         variable: "--terminal-foreground",
-        lightValue: "hsl(0 0% 92%)",
-        darkValue: "hsl(210 15% 92%)",
+        lightValue: a["--terminal-foreground"],
+        darkValue: e["--terminal-foreground"],
         description: "Integrated terminal foreground color."
       }
     ]
@@ -427,36 +428,36 @@ const r = {
       {
         name: "Chart 1",
         variable: "--chart-1",
-        lightValue: "hsl(214 26% 17%)",
-        darkValue: "hsl(210 20% 98%)",
+        lightValue: a["--chart-1"],
+        darkValue: e["--chart-1"],
         description: "Primary chart series color."
       },
       {
         name: "Chart 2",
         variable: "--chart-2",
-        lightValue: "hsl(215 16% 42%)",
-        darkValue: "hsl(215 20% 60%)",
+        lightValue: a["--chart-2"],
+        darkValue: e["--chart-2"],
         description: "Secondary chart series color."
       },
       {
         name: "Chart 3",
         variable: "--chart-3",
-        lightValue: "hsl(217 91% 60%)",
-        darkValue: "oklch(0.7 0.15 250)",
+        lightValue: a["--chart-3"],
+        darkValue: e["--chart-3"],
         description: "Tertiary chart series color."
       },
       {
         name: "Chart 4",
         variable: "--chart-4",
-        lightValue: "oklch(0.68 0.16 150)",
-        darkValue: "oklch(0.72 0.19 150)",
+        lightValue: a["--chart-4"],
+        darkValue: e["--chart-4"],
         description: "Quaternary chart series color."
       },
       {
         name: "Chart 5",
         variable: "--chart-5",
-        lightValue: "hsl(38 92% 50%)",
-        darkValue: "oklch(0.82 0.16 80)",
+        lightValue: a["--chart-5"],
+        darkValue: e["--chart-5"],
         description: "Quinary chart series color."
       }
     ]
@@ -468,48 +469,48 @@ const r = {
       {
         name: "Selection Background",
         variable: "--selection-bg",
-        lightValue: "hsl(217 91% 60%)",
-        darkValue: "hsl(215 70% 50%)",
+        lightValue: a["--selection-bg"],
+        darkValue: e["--selection-bg"],
         description: "Default text selection background."
       },
       {
         name: "Selection Foreground",
         variable: "--selection-fg",
-        lightValue: "hsl(0 0% 100%)",
-        darkValue: "hsl(0 0% 100%)",
+        lightValue: a["--selection-fg"],
+        darkValue: e["--selection-fg"],
         description: "Default text selection foreground."
       },
       {
         name: "Selection On Primary Background",
         variable: "--selection-on-primary-bg",
-        lightValue: "hsl(38 92% 50%)",
-        darkValue: "hsl(215 80% 35%)",
+        lightValue: a["--selection-on-primary-bg"],
+        darkValue: e["--selection-on-primary-bg"],
         description: "Selection background for text rendered on primary surfaces."
       },
       {
         name: "Selection On Primary Foreground",
         variable: "--selection-on-primary-fg",
-        lightValue: "hsl(214 26% 17%)",
-        darkValue: "hsl(0 0% 100%)",
+        lightValue: a["--selection-on-primary-fg"],
+        darkValue: e["--selection-on-primary-fg"],
         description: "Selection foreground for text rendered on primary surfaces."
       },
       {
         name: "Code Selection Background",
         variable: "--selection-code-bg",
-        lightValue: "hsl(212 100% 67%)",
-        darkValue: "hsl(212 100% 67%)",
+        lightValue: a["--selection-code-bg"],
+        darkValue: e["--selection-code-bg"],
         description: "Selection background for code surfaces."
       },
       {
         name: "Code Selection Foreground",
         variable: "--selection-code-fg",
-        lightValue: "hsl(220 20% 8%)",
-        darkValue: "hsl(220 20% 8%)",
+        lightValue: a["--selection-code-fg"],
+        darkValue: e["--selection-code-fg"],
         description: "Selection foreground for code surfaces."
       }
     ]
   }
-], i = [
+], l = [
   {
     name: "Text XS",
     size: "11px",
@@ -552,17 +553,17 @@ const r = {
     className: "text-xl",
     description: "Page titles."
   }
-], n = [
+], c = [
   {
     name: "Sans",
     variable: "--font-sans",
-    value: r["--font-sans"],
+    value: i["--font-sans"],
     description: "Default UI font family for application chrome and content."
   },
   {
     name: "Mono",
     variable: "--font-mono",
-    value: r["--font-mono"],
+    value: i["--font-mono"],
     description: "Monospace font family for code, terminal, and diagnostics."
   }
 ], s = [
@@ -576,12 +577,12 @@ const r = {
   { name: "5", value: "1.25rem", pixels: "20px", className: "gap-5, p-5" },
   { name: "6", value: "1.5rem", pixels: "24px", className: "gap-6, p-6" },
   { name: "8", value: "2rem", pixels: "32px", className: "gap-8, p-8" }
-], t = [
+], d = [
   { name: "None", value: "0", variable: "-", className: "rounded-none" },
   { name: "SM", value: "0.125rem", variable: "-", className: "rounded-sm" },
   {
     name: "Default",
-    value: r["--radius"],
+    value: i["--radius"],
     variable: "--radius",
     className: "rounded"
   },
@@ -590,7 +591,7 @@ const r = {
   { name: "XL", value: "1rem", variable: "-", className: "rounded-xl" },
   { name: "2XL", value: "1.5rem", variable: "-", className: "rounded-2xl" },
   { name: "Full", value: "9999px", variable: "-", className: "rounded-full" }
-], c = [
+], u = [
   {
     name: "Fade In",
     keyframes: "animate-in",
@@ -627,47 +628,47 @@ const r = {
     usage: "Neon and emphasis effects",
     description: "Pulsing glow animation for elevated emphasis."
   }
-], d = l.reduce((a, e) => (a.push(...e.tokens), a), []);
-function o(a) {
+], g = t.reduce((o, r) => (o.push(...r.tokens), o), []);
+function n(o) {
   return Object.fromEntries(
-    d.map((e) => [
-      e.variable,
-      a === "light" ? e.lightValue : e.darkValue
+    g.map((r) => [
+      r.variable,
+      o === "light" ? r.lightValue : r.darkValue
     ])
   );
 }
-const u = {
-  light: o("light"),
-  dark: o("dark")
+const m = {
+  light: n("light"),
+  dark: n("dark")
 };
-function g(a, e) {
-  return u[e][a];
+function h(o, r) {
+  return m[r][o];
 }
-const h = [
+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: "0 8px 18px -8px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)" },
+  { variable: "--floe-surface-shadow-floating", role: "floating", fallback: "var(--floe-window-shadow)" },
   { variable: "--floe-surface-shadow-interacting", role: "interacting", fallback: "0 1px 2px var(--floe-surface-shade)" }
-], m = {
-  colors: l,
-  typography: i,
-  fonts: n,
+], f = {
+  colors: t,
+  typography: l,
+  fonts: c,
   spacing: s,
-  radius: t,
-  motion: c,
-  shared: r,
-  surface: h
+  radius: d,
+  motion: u,
+  shared: i,
+  surface: b
 };
 export {
-  l as floeColorTokenCategories,
-  m as floeDesignTokens,
-  n as floeFontFamilyTokens,
-  c as floeMotionTokens,
-  t as floeRadiusTokens,
-  r as floeSharedCssVariables,
+  t as floeColorTokenCategories,
+  f as floeDesignTokens,
+  c as floeFontFamilyTokens,
+  u as floeMotionTokens,
+  d as floeRadiusTokens,
+  i as floeSharedCssVariables,
   s as floeSpacingTokens,
-  h as floeSurfaceTokens,
-  u as floeThemeColorVariables,
-  i as floeTypographyTokens,
-  g as getFloeColorTokenValue
+  b as floeSurfaceTokens,
+  m as floeThemeColorVariables,
+  l as floeTypographyTokens,
+  h as getFloeColorTokenValue
 };