@signozhq/design-tokens 2.1.5 → 2.1.6

package/dist/design-tokens.js

@@ -271,7 +271,7 @@ const S = {
   TEXT_GRADIENT_OCEAN: "linear-gradient(99deg, #48F8CF 4.42%, #28CBF3 96.6%)",
   TEXT_GRADIENT_SPLASH: "linear-gradient(99deg, #4568DC 4.42%, #324DAA 96.6%)",
   TEXT_GRADIENT_FLAMINGO: "linear-gradient(92deg, #CA9CD0 1.36%, #D38972 68.48%, #A1B1E7 98.99%)"
-}, k = {
+}, I = {
   "robin-50": "#edf1fe",
   "robin-100": "#cad5fd",
   "robin-150": "#cad5fd",
@@ -408,7 +408,7 @@ const S = {
   "gradient-ocean": "linear-gradient(99deg, #48F8CF 4.42%, #28CBF3 96.6%)",
   "gradient-splash": "linear-gradient(99deg, #4568DC 4.42%, #324DAA 96.6%)",
   "gradient-flamingo": "linear-gradient(92deg, #CA9CD0 1.36%, #D38972 68.48%, #A1B1E7 98.99%)"
-}, I = {
+}, L = {
   PADDING_1: "0.25rem",
   PADDING_2: "0.5rem",
   PADDING_3: "0.75rem",
@@ -445,7 +445,7 @@ const S = {
   MARGIN_48: "12rem",
   MARGIN_56: "14rem",
   MARGIN_64: "16rem"
-}, x = {
+}, N = {
   PERISCOPE_LINEHEIGHTMEDIUM: "24px",
   PERISCOPE_LINEHEIGHTBASE: "20px",
   PERISCOPE_FONTFAMILYSANS: "Inter, sans-serif",
@@ -665,7 +665,7 @@ const S = {
   PARAGRAPH_SMALL_600_LINEHEIGHT: "18px",
   PARAGRAPH_SMALL_600_LETTERSPACING: "-0.5px",
   PARAGRAPH_SMALL_600_FONTFAMILY: "Inter, sans-serif"
-}, L = {
+}, m = {
   LABEL_LARGE_400: {
     fontFamily: "Inter, sans-serif",
     fontSize: "18px",
@@ -897,7 +897,7 @@ const S = {
     lineHeight: "18px",
     letterSpacing: "-0.5px"
   }
-}, N = {
+}, x = {
   RADIUS_0: "0px",
   RADIUS_1: "2px",
   RADIUS_2: "4px",
@@ -1023,8 +1023,31 @@ const S = {
   ACCENT_SAKURA_FOREGROUND: "var(--accent-sakura-foreground)",
   ACCENT_SIENNA: "var(--accent-sienna)",
   ACCENT_SIENNA_HOVER: "var(--accent-sienna-hover)",
-  ACCENT_SIENNA_FOREGROUND: "var(--accent-sienna-foreground)"
-}, H = {
+  ACCENT_SIENNA_FOREGROUND: "var(--accent-sienna-foreground)",
+  GHOST_BACKGROUND: "var(--ghost-background)",
+  GHOST_BACKGROUND_HOVER: "var(--ghost-background-hover)",
+  GHOST_FOREGROUND: "var(--ghost-foreground)",
+  GHOST_FOREGROUND_HOVER: "var(--ghost-foreground-hover)",
+  GHOST_BORDER: "var(--ghost-border)",
+  ACTION_BACKGROUND: "var(--action-background)",
+  ACTION_BACKGROUND_HOVER: "var(--action-background-hover)",
+  ACTION_BORDER: "var(--action-border)",
+  ACTION_BORDER_HOVER: "var(--action-border-hover)",
+  ACTION_FOREGROUND: "var(--action-foreground)",
+  ACTION_FOREGROUND_HOVER: "var(--action-foreground-hover)",
+  CALLOUT_SIENNA_BACKGROUND: "var(--callout-sienna-background)",
+  CALLOUT_SIENNA_BORDER: "var(--callout-sienna-border)",
+  CALLOUT_SIENNA_TITLE: "var(--callout-sienna-title)",
+  CALLOUT_SIENNA_DESCRIPTION: "var(--callout-sienna-description)",
+  CALLOUT_SIENNA_ICON: "var(--callout-sienna-icon)",
+  CALLOUT_AQUA_BACKGROUND: "var(--callout-aqua-background)",
+  CALLOUT_AQUA_BORDER: "var(--callout-aqua-border)",
+  CALLOUT_AQUA_TITLE: "var(--callout-aqua-title)",
+  CALLOUT_AQUA_DESCRIPTION: "var(--callout-aqua-description)",
+  CALLOUT_AQUA_ICON: "var(--callout-aqua-icon)",
+  CONTROL_ICON_FOREGROUND: "var(--control-icon-foreground)",
+  CONTROL_ICON_FOREGROUND_CONTRAST: "var(--control-icon-foreground-contrast)"
+}, k = {
   background: "var(--background)",
   foreground: "var(--foreground)",
   card: "var(--card)",
@@ -1144,7 +1167,30 @@ const S = {
   "accent-sakura-foreground": "var(--accent-sakura-foreground)",
   "accent-sienna": "var(--accent-sienna)",
   "accent-sienna-hover": "var(--accent-sienna-hover)",
-  "accent-sienna-foreground": "var(--accent-sienna-foreground)"
+  "accent-sienna-foreground": "var(--accent-sienna-foreground)",
+  "ghost-background": "var(--ghost-background)",
+  "ghost-background-hover": "var(--ghost-background-hover)",
+  "ghost-foreground": "var(--ghost-foreground)",
+  "ghost-foreground-hover": "var(--ghost-foreground-hover)",
+  "ghost-border": "var(--ghost-border)",
+  "action-background": "var(--action-background)",
+  "action-background-hover": "var(--action-background-hover)",
+  "action-border": "var(--action-border)",
+  "action-border-hover": "var(--action-border-hover)",
+  "action-foreground": "var(--action-foreground)",
+  "action-foreground-hover": "var(--action-foreground-hover)",
+  "callout-sienna-background": "var(--callout-sienna-background)",
+  "callout-sienna-border": "var(--callout-sienna-border)",
+  "callout-sienna-title": "var(--callout-sienna-title)",
+  "callout-sienna-description": "var(--callout-sienna-description)",
+  "callout-sienna-icon": "var(--callout-sienna-icon)",
+  "callout-aqua-background": "var(--callout-aqua-background)",
+  "callout-aqua-border": "var(--callout-aqua-border)",
+  "callout-aqua-title": "var(--callout-aqua-title)",
+  "callout-aqua-description": "var(--callout-aqua-description)",
+  "callout-aqua-icon": "var(--callout-aqua-icon)",
+  "control-icon-foreground": "var(--control-icon-foreground)",
+  "control-icon-foreground-contrast": "var(--control-icon-foreground-contrast)"
 }, e = {
   Robin: {
     50: {
@@ -2291,10 +2337,10 @@ const S = {
       type: "color"
     }
   }
-}, B = {
+}, O = {
   bg: e,
   text: r
-}, o = {
+}, a = {
   1: {
     value: "0.25rem",
     type: "spacing"
@@ -2367,7 +2413,7 @@ const S = {
     value: "16rem",
     type: "spacing"
   }
-}, a = {
+}, o = {
   1: {
     value: "0.25rem",
     type: "spacing"
@@ -2517,9 +2563,9 @@ const S = {
     value: "128px",
     type: "spacing"
   }
-}, F = {
-  padding: o,
-  margin: a,
+}, B = {
+  padding: a,
+  margin: o,
   spacing: t
 }, n = {
   lineHeightMedium: {
@@ -2669,7 +2715,7 @@ const S = {
     value: "900",
     type: "typography"
   }
-}, g = {
+}, i = {
   18: {
     value: "18px",
     type: "typography"
@@ -2706,7 +2752,7 @@ const S = {
     value: "2",
     type: "typography"
   }
-}, i = {
+}, g = {
   0: {
     value: "0px",
     type: "typography"
@@ -3290,7 +3336,7 @@ const S = {
       }
     }
   }
-}, f = {
+}, v = {
   medium: {
     400: {
       fontSize: {
@@ -3495,17 +3541,17 @@ const S = {
       }
     }
   }
-}, O = {
+}, F = {
   periscope: n,
   fontFamily: c,
   fontSize: l,
   fontWeight: u,
-  lineHeight: g,
-  letterSpacing: i,
+  lineHeight: i,
+  letterSpacing: g,
   label: s,
   uppercase: p,
   code: d,
-  paragraph: f
+  paragraph: v
 }, y = {
   large: {
     400: {
@@ -3599,7 +3645,7 @@ const S = {
       letterSpacing: "0px"
     }
   }
-}, v = {
+}, f = {
   base: {
     400: {
       fontFamily: "Inter, sans-serif",
@@ -3646,7 +3692,7 @@ const S = {
       letterSpacing: "4px"
     }
   }
-}, b = {
+}, _ = {
   base: {
     400: {
       fontFamily: "SF Mono, monospace",
@@ -3693,7 +3739,7 @@ const S = {
       letterSpacing: "0px"
     }
   }
-}, _ = {
+}, b = {
   medium: {
     400: {
       fontFamily: "Inter, sans-serif",
@@ -3763,1463 +3809,12 @@ const S = {
       letterSpacing: "-0.5px"
     }
   }
-}, C = {
+}, H = {
   label: y,
-  uppercase: v,
-  code: b,
-  paragraph: _
-}, E = {
-  light: {
-    meta: {
-      "color-scheme": "light",
-      selector: "[data-theme='aurora']"
-    },
-    tokens: {
-      background: {
-        value: "#fdfdfd",
-        description: "",
-        category: "background",
-        group: "legacy"
-      },
-      foreground: {
-        value: "#000000",
-        description: "",
-        category: "foreground",
-        group: "legacy"
-      },
-      card: {
-        value: "#fdfdfd",
-        description: "",
-        category: "background",
-        group: "legacy"
-      },
-      "card-foreground": {
-        value: "#000000",
-        description: "",
-        category: "foreground",
-        group: "legacy"
-      },
-      popover: {
-        value: "#fcfcfc",
-        description: "",
-        category: "background",
-        group: "legacy"
-      },
-      "popover-foreground": {
-        value: "#000000",
-        description: "",
-        category: "foreground",
-        group: "legacy"
-      },
-      primary: {
-        value: "#51f0a8",
-        description: "",
-        category: "background",
-        group: "legacy"
-      },
-      "primary-foreground": {
-        value: "#000000",
-        description: "Text color for primary action elements",
-        category: "foreground",
-        group: "actions"
-      },
-      secondary: {
-        value: "#fcfdfd",
-        description: "",
-        category: "background",
-        group: "legacy"
-      },
-      "secondary-foreground": {
-        value: "#080808",
-        description: "Text color for secondary action elements",
-        category: "foreground",
-        group: "actions"
-      },
-      muted: {
-        value: "#f5f5f5",
-        description: "",
-        category: "background",
-        group: "legacy"
-      },
-      "muted-foreground": {
-        value: "#525252",
-        description: "",
-        category: "foreground",
-        group: "legacy"
-      },
-      accent: {
-        value: "#f9fffc",
-        description: "",
-        category: "background",
-        group: "legacy"
-      },
-      "accent-foreground": {
-        value: "#0d9f5d",
-        description: "",
-        category: "foreground",
-        group: "legacy"
-      },
-      destructive: {
-        value: "#f54a88",
-        description: "",
-        category: "background",
-        group: "legacy"
-      },
-      "destructive-foreground": {
-        value: "#ffffff",
-        description: "",
-        category: "foreground",
-        group: "legacy"
-      },
-      border: {
-        value: "#f4f6f8",
-        description: "",
-        category: "border",
-        group: "legacy"
-      },
-      input: {
-        value: "#ebebeb",
-        description: "",
-        category: "border",
-        group: "legacy"
-      },
-      ring: {
-        value: "#51f0a8",
-        description: "",
-        category: "border",
-        group: "legacy"
-      },
-      radius: {
-        value: "1.4rem",
-        description: "",
-        category: "other",
-        group: "legacy"
-      },
-      "chart-1": {
-        value: "#51f0a8",
-        description: "",
-        category: "background",
-        group: "charts"
-      },
-      "chart-2": {
-        value: "#7efe8f",
-        description: "",
-        category: "background",
-        group: "charts"
-      },
-      "chart-3": {
-        value: "#ff4838",
-        description: "",
-        category: "background",
-        group: "charts"
-      },
-      "chart-4": {
-        value: "#2ebdf6",
-        description: "",
-        category: "background",
-        group: "charts"
-      },
-      "chart-5": {
-        value: "#ffb188",
-        description: "",
-        category: "background",
-        group: "charts"
-      },
-      sidebar: {
-        value: "#ffffff",
-        description: "",
-        category: "background",
-        group: "sidebar"
-      },
-      "sidebar-foreground": {
-        value: "#000000",
-        description: "",
-        category: "foreground",
-        group: "sidebar"
-      },
-      "sidebar-primary": {
-        value: "#000000",
-        description: "",
-        category: "background",
-        group: "sidebar"
-      },
-      "sidebar-primary-foreground": {
-        value: "#ffffff",
-        description: "",
-        category: "foreground",
-        group: "sidebar"
-      },
-      "sidebar-accent": {
-        value: "#e4fef3",
-        description: "",
-        category: "background",
-        group: "sidebar"
-      },
-      "sidebar-accent-foreground": {
-        value: "#000000",
-        description: "",
-        category: "foreground",
-        group: "sidebar"
-      },
-      "sidebar-border": {
-        value: "#ebebeb",
-        description: "",
-        category: "border",
-        group: "sidebar"
-      },
-      "sidebar-ring": {
-        value: "#000000",
-        description: "",
-        category: "border",
-        group: "sidebar"
-      },
-      "font-sans": {
-        value: "'Plus Jakarta Sans'",
-        description: "",
-        category: "typography",
-        group: "fonts"
-      },
-      "font-serif": {
-        value: "'Lora'",
-        description: "",
-        category: "typography",
-        group: "fonts"
-      },
-      "font-mono": {
-        value: "'IBM Plex Mono'",
-        description: "",
-        category: "typography",
-        group: "fonts"
-      },
-      "base-white": {
-        value: "#ffffff",
-        description: "",
-        category: "foreground",
-        group: "base"
-      },
-      "base-black": {
-        value: "#000000",
-        description: "",
-        category: "foreground",
-        group: "base"
-      },
-      "l1-background": {
-        value: "#fdfdfd",
-        description: "Primary page background for the outermost container",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l2-background": {
-        value: "#f8f9fb",
-        description: "Secondary background for cards and elevated surfaces",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l3-background": {
-        value: "#f0f2f4",
-        description: "Tertiary background for nested elements within cards",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l1-background-hover": {
-        value: "#f4f6f8",
-        description: "Hover state for l1-background elements",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l2-background-hover": {
-        value: "#e8ebed",
-        description: "Hover state for l2-background elements",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l3-background-hover": {
-        value: "#e0e3e6",
-        description: "Hover state for l3-background elements",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l1-foreground": {
-        value: "#000000",
-        description: "Primary text color for l1 backgrounds",
-        category: "foreground",
-        group: "surface-levels"
-      },
-      "l1-foreground-hover": {
-        value: "#111111",
-        description: "Hover text color for interactive elements on l1",
-        category: "foreground",
-        group: "surface-levels"
-      },
-      "l2-foreground": {
-        value: "#1a1a1a",
-        description: "Secondary text color for l2 backgrounds",
-        category: "foreground",
-        group: "surface-levels"
-      },
-      "l2-foreground-hover": {
-        value: "#000000",
-        description: "Hover text color for interactive elements on l2",
-        category: "foreground",
-        group: "surface-levels"
-      },
-      "l3-foreground": {
-        value: "#525252",
-        description: "Tertiary text color for l3 backgrounds and muted text",
-        category: "foreground",
-        group: "surface-levels"
-      },
-      "l3-foreground-hover": {
-        value: "#333333",
-        description: "Hover text color for interactive elements on l3",
-        category: "foreground",
-        group: "surface-levels"
-      },
-      "l1-border": {
-        value: "#f4f6f8",
-        description: "Border color for elements on l1 backgrounds",
-        category: "border",
-        group: "surface-levels"
-      },
-      "l2-border": {
-        value: "#ebebeb",
-        description: "Border color for elements on l2 backgrounds",
-        category: "border",
-        group: "surface-levels"
-      },
-      "l3-border": {
-        value: "#e0e0e0",
-        description: "Border color for elements on l3 backgrounds",
-        category: "border",
-        group: "surface-levels"
-      },
-      "l1-background-transparent": {
-        value: "color-mix(in srgb, #fdfdfd, transparent 100%)",
-        description: "",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l1-background-60": {
-        value: "color-mix(in srgb, #fdfdfd, transparent 40%)",
-        description: "",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l2-background-transparent": {
-        value: "color-mix(in srgb, #f8f9fb, transparent 100%)",
-        description: "",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l2-background-60": {
-        value: "color-mix(in srgb, #f8f9fb, transparent 40%)",
-        description: "",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l3-background-transparent": {
-        value: "color-mix(in srgb, #f0f2f4, transparent 100%)",
-        description: "",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l3-background-60": {
-        value: "color-mix(in srgb, #f0f2f4, transparent 40%)",
-        description: "",
-        category: "background",
-        group: "surface-levels"
-      },
-      "alert-strip-button-background": {
-        value: "color-mix(in srgb, #000000, transparent 40%)",
-        description: "",
-        category: "background",
-        group: "surface-levels"
-      },
-      "primary-background": {
-        value: "#51f0a8",
-        description: "Primary action background color",
-        category: "background",
-        group: "actions"
-      },
-      "primary-background-hover": {
-        value: "#3de89a",
-        description: "Hover state for primary action elements",
-        category: "background",
-        group: "actions"
-      },
-      "primary-foreground-hover": {
-        value: "#000000",
-        description: "Hover text color for primary action elements",
-        category: "foreground",
-        group: "actions"
-      },
-      "secondary-background": {
-        value: "#f5f5f5",
-        description: "Secondary action background color",
-        category: "background",
-        group: "actions"
-      },
-      "secondary-background-hover": {
-        value: "#ebebeb",
-        description: "Hover state for secondary action elements",
-        category: "background",
-        group: "actions"
-      },
-      "secondary-foreground-hover": {
-        value: "#000000",
-        description: "Hover text color for secondary action elements",
-        category: "foreground",
-        group: "actions"
-      },
-      "secondary-border": {
-        value: "#e0e0e0",
-        description: "Border color for secondary buttons",
-        category: "border",
-        group: "actions"
-      },
-      "success-background": {
-        value: "#0d9f5d",
-        description: "Success action background color",
-        category: "background",
-        group: "actions"
-      },
-      "success-background-hover": {
-        value: "#0b8a50",
-        description: "Hover state for success elements",
-        category: "background",
-        group: "actions"
-      },
-      "success-foreground": {
-        value: "#ffffff",
-        description: "Text color for success action elements",
-        category: "foreground",
-        group: "actions"
-      },
-      "success-foreground-hover": {
-        value: "#ffffff",
-        description: "Hover text color for success elements",
-        category: "foreground",
-        group: "actions"
-      },
-      "warning-background": {
-        value: "#ffb188",
-        description: "Warning action background color",
-        category: "background",
-        group: "actions"
-      },
-      "warning-background-hover": {
-        value: "#ff9e6e",
-        description: "Hover state for warning elements",
-        category: "background",
-        group: "actions"
-      },
-      "warning-foreground": {
-        value: "#000000",
-        description: "Text color for warning action elements",
-        category: "foreground",
-        group: "actions"
-      },
-      "warning-foreground-hover": {
-        value: "#000000",
-        description: "Hover text color for warning elements",
-        category: "foreground",
-        group: "actions"
-      },
-      "danger-background": {
-        value: "#f54a88",
-        description: "Danger action background color",
-        category: "background",
-        group: "actions"
-      },
-      "danger-background-hover": {
-        value: "#e03070",
-        description: "Hover state for danger elements",
-        category: "background",
-        group: "actions"
-      },
-      "danger-foreground": {
-        value: "#ffffff",
-        description: "Text color for danger action elements",
-        category: "foreground",
-        group: "actions"
-      },
-      "danger-foreground-hover": {
-        value: "#ffffff",
-        description: "Hover text color for danger elements",
-        category: "foreground",
-        group: "actions"
-      },
-      "callout-primary-background": {
-        value: "color-mix(in srgb, #51f0a8, transparent 90%)",
-        description: "Background for informational callout boxes",
-        category: "background",
-        group: "callouts"
-      },
-      "callout-primary-border": {
-        value: "color-mix(in srgb, #51f0a8, transparent 80%)",
-        description: "Border for informational callout boxes",
-        category: "border",
-        group: "callouts"
-      },
-      "callout-primary-title": {
-        value: "#0d9f5d",
-        description: "Title text color for informational callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-primary-description": {
-        value: "#0d9f5d",
-        description: "Description text color for informational callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-primary-icon": {
-        value: "#0a7c48",
-        description: "Icon color for informational callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-success-background": {
-        value: "color-mix(in srgb, #0d9f5d, transparent 90%)",
-        description: "Background for success callout boxes",
-        category: "background",
-        group: "callouts"
-      },
-      "callout-success-border": {
-        value: "color-mix(in srgb, #0d9f5d, transparent 80%)",
-        description: "Border for success callout boxes",
-        category: "border",
-        group: "callouts"
-      },
-      "callout-success-title": {
-        value: "#0d9f5d",
-        description: "Title text color for success callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-success-description": {
-        value: "#0d9f5d",
-        description: "Description text color for success callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-success-icon": {
-        value: "#0a7c48",
-        description: "Icon color for success callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-warning-background": {
-        value: "color-mix(in srgb, #ffb188, transparent 90%)",
-        description: "Background for warning callout boxes",
-        category: "background",
-        group: "callouts"
-      },
-      "callout-warning-border": {
-        value: "color-mix(in srgb, #ffb188, transparent 80%)",
-        description: "Border for warning callout boxes",
-        category: "border",
-        group: "callouts"
-      },
-      "callout-warning-title": {
-        value: "#cc6020",
-        description: "Title text color for warning callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-warning-description": {
-        value: "#cc6020",
-        description: "Description text color for warning callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-warning-icon": {
-        value: "#aa4f1a",
-        description: "Icon color for warning callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-error-background": {
-        value: "color-mix(in srgb, #f54a88, transparent 90%)",
-        description: "Background for error callout boxes",
-        category: "background",
-        group: "callouts"
-      },
-      "callout-error-border": {
-        value: "color-mix(in srgb, #f54a88, transparent 80%)",
-        description: "Border for error callout boxes",
-        category: "border",
-        group: "callouts"
-      },
-      "callout-error-title": {
-        value: "#c01058",
-        description: "Title text color for error callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-error-description": {
-        value: "#c01058",
-        description: "Description text color for error callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-error-icon": {
-        value: "#9e0d4a",
-        description: "Icon color for error callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "accent-primary": {
-        value: "#51f0a8",
-        description: "Primary brand accent color",
-        category: "background",
-        group: "accents"
-      },
-      "accent-primary-hover": {
-        value: "#3de89a",
-        description: "Hover state for primary accent",
-        category: "background",
-        group: "accents"
-      },
-      "accent-primary-foreground": {
-        value: "#000000",
-        description: "Text color on primary accent backgrounds",
-        category: "foreground",
-        group: "accents"
-      },
-      "accent-forest": {
-        value: "#0d9f5d",
-        description: "Green accent for success and positive indicators",
-        category: "background",
-        group: "accents"
-      },
-      "accent-forest-hover": {
-        value: "#0b8a50",
-        description: "Hover state for forest accent",
-        category: "background",
-        group: "accents"
-      },
-      "accent-forest-foreground": {
-        value: "#ffffff",
-        description: "Text color on forest accent backgrounds",
-        category: "foreground",
-        group: "accents"
-      },
-      "accent-amber": {
-        value: "#ffb188",
-        description: "Orange accent for warnings and attention",
-        category: "background",
-        group: "accents"
-      },
-      "accent-amber-hover": {
-        value: "#ff9e6e",
-        description: "Hover state for amber accent",
-        category: "background",
-        group: "accents"
-      },
-      "accent-amber-foreground": {
-        value: "#000000",
-        description: "Text color on amber accent backgrounds",
-        category: "foreground",
-        group: "accents"
-      },
-      "accent-cherry": {
-        value: "#f54a88",
-        description: "Red/pink accent for errors and critical states",
-        category: "background",
-        group: "accents"
-      },
-      "accent-cherry-hover": {
-        value: "#e03070",
-        description: "Hover state for cherry accent",
-        category: "background",
-        group: "accents"
-      },
-      "accent-cherry-foreground": {
-        value: "#ffffff",
-        description: "Text color on cherry accent backgrounds",
-        category: "foreground",
-        group: "accents"
-      },
-      "accent-aqua": {
-        value: "#2ebdf6",
-        description: "Cyan accent for informational elements",
-        category: "background",
-        group: "accents"
-      },
-      "accent-aqua-hover": {
-        value: "#1aa8e3",
-        description: "Hover state for aqua accent",
-        category: "background",
-        group: "accents"
-      },
-      "accent-aqua-foreground": {
-        value: "#ffffff",
-        description: "Text color on aqua accent backgrounds",
-        category: "foreground",
-        group: "accents"
-      },
-      "accent-sakura": {
-        value: "#ff78a5",
-        description: "Pink accent for decorative elements",
-        category: "background",
-        group: "accents"
-      },
-      "accent-sakura-hover": {
-        value: "#ff5e90",
-        description: "Hover state for sakura accent",
-        category: "background",
-        group: "accents"
-      },
-      "accent-sakura-foreground": {
-        value: "#ffffff",
-        description: "Text color on sakura accent backgrounds",
-        category: "foreground",
-        group: "accents"
-      },
-      "accent-sienna": {
-        value: "#ffb188",
-        description: "Orange accent for earthy elements",
-        category: "background",
-        group: "accents"
-      },
-      "accent-sienna-hover": {
-        value: "#ff9e6e",
-        description: "Hover state for sienna accent",
-        category: "background",
-        group: "accents"
-      },
-      "accent-sienna-foreground": {
-        value: "#000000",
-        description: "Text color on sienna accent backgrounds",
-        category: "foreground",
-        group: "accents"
-      }
-    }
-  },
-  dark: {
-    meta: {
-      "color-scheme": "dark",
-      selector: "[data-theme='aurora'].dark"
-    },
-    tokens: {
-      background: {
-        value: "#000000",
-        description: "",
-        category: "background",
-        group: "legacy"
-      },
-      foreground: {
-        value: "#f0f0f0",
-        description: "",
-        category: "foreground",
-        group: "legacy"
-      },
-      card: {
-        value: "#0a0a0a",
-        description: "",
-        category: "background",
-        group: "legacy"
-      },
-      "card-foreground": {
-        value: "#f0f0f0",
-        description: "",
-        category: "foreground",
-        group: "legacy"
-      },
-      popover: {
-        value: "#1a1b1b",
-        description: "",
-        category: "background",
-        group: "legacy"
-      },
-      "popover-foreground": {
-        value: "#f0f0f0",
-        description: "",
-        category: "foreground",
-        group: "legacy"
-      },
-      primary: {
-        value: "#51f0a8",
-        description: "",
-        category: "background",
-        group: "legacy"
-      },
-      "primary-foreground": {
-        value: "#000000",
-        description: "Text color for primary action elements",
-        category: "foreground",
-        group: "actions"
-      },
-      secondary: {
-        value: "#216a49",
-        description: "",
-        category: "background",
-        group: "legacy"
-      },
-      "secondary-foreground": {
-        value: "#f0f0f0",
-        description: "Text color for secondary action elements",
-        category: "foreground",
-        group: "actions"
-      },
-      muted: {
-        value: "#252527",
-        description: "",
-        category: "background",
-        group: "legacy"
-      },
-      "muted-foreground": {
-        value: "#969696",
-        description: "",
-        category: "foreground",
-        group: "legacy"
-      },
-      accent: {
-        value: "#093723",
-        description: "",
-        category: "background",
-        group: "legacy"
-      },
-      "accent-foreground": {
-        value: "#fefefe",
-        description: "",
-        category: "foreground",
-        group: "legacy"
-      },
-      destructive: {
-        value: "#ff78a5",
-        description: "",
-        category: "background",
-        group: "legacy"
-      },
-      "destructive-foreground": {
-        value: "#ffffff",
-        description: "",
-        category: "foreground",
-        group: "legacy"
-      },
-      border: {
-        value: "#19191a",
-        description: "",
-        category: "border",
-        group: "legacy"
-      },
-      input: {
-        value: "#3b3b3b",
-        description: "",
-        category: "border",
-        group: "legacy"
-      },
-      ring: {
-        value: "#51f0a8",
-        description: "",
-        category: "border",
-        group: "legacy"
-      },
-      radius: {
-        value: "1.4rem",
-        description: "",
-        category: "other",
-        group: "legacy"
-      },
-      "chart-1": {
-        value: "#51f0a8",
-        description: "",
-        category: "background",
-        group: "charts"
-      },
-      "chart-2": {
-        value: "#9effa1",
-        description: "",
-        category: "background",
-        group: "charts"
-      },
-      "chart-3": {
-        value: "#ffb7cf",
-        description: "",
-        category: "background",
-        group: "charts"
-      },
-      "chart-4": {
-        value: "#5fd0ff",
-        description: "",
-        category: "background",
-        group: "charts"
-      },
-      "chart-5": {
-        value: "#ffb188",
-        description: "",
-        category: "background",
-        group: "charts"
-      },
-      sidebar: {
-        value: "#0a0a0a",
-        description: "",
-        category: "background",
-        group: "sidebar"
-      },
-      "sidebar-foreground": {
-        value: "#f0f0f0",
-        description: "",
-        category: "foreground",
-        group: "sidebar"
-      },
-      "sidebar-primary": {
-        value: "#51f0a8",
-        description: "",
-        category: "background",
-        group: "sidebar"
-      },
-      "sidebar-primary-foreground": {
-        value: "#ffffff",
-        description: "",
-        category: "foreground",
-        group: "sidebar"
-      },
-      "sidebar-accent": {
-        value: "#00331b",
-        description: "",
-        category: "background",
-        group: "sidebar"
-      },
-      "sidebar-accent-foreground": {
-        value: "#51f0a8",
-        description: "",
-        category: "foreground",
-        group: "sidebar"
-      },
-      "sidebar-border": {
-        value: "#353a3e",
-        description: "",
-        category: "border",
-        group: "sidebar"
-      },
-      "sidebar-ring": {
-        value: "#51f0a8",
-        description: "",
-        category: "border",
-        group: "sidebar"
-      },
-      "font-sans": {
-        value: "'Plus Jakarta Sans'",
-        description: "",
-        category: "typography",
-        group: "fonts"
-      },
-      "font-serif": {
-        value: "'Lora'",
-        description: "",
-        category: "typography",
-        group: "fonts"
-      },
-      "font-mono": {
-        value: "'IBM Plex Mono'",
-        description: "",
-        category: "typography",
-        group: "fonts"
-      },
-      "base-white": {
-        value: "#ffffff",
-        description: "",
-        category: "foreground",
-        group: "base"
-      },
-      "base-black": {
-        value: "#000000",
-        description: "",
-        category: "foreground",
-        group: "base"
-      },
-      "l1-background": {
-        value: "#000000",
-        description: "Primary page background for the outermost container",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l2-background": {
-        value: "#0a0a0a",
-        description: "Secondary background for cards and elevated surfaces",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l3-background": {
-        value: "#1a1b1b",
-        description: "Tertiary background for nested elements within cards",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l1-background-hover": {
-        value: "#0f0f0f",
-        description: "Hover state for l1-background elements",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l2-background-hover": {
-        value: "#252527",
-        description: "Hover state for l2-background elements",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l3-background-hover": {
-        value: "#2a2a2c",
-        description: "Hover state for l3-background elements",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l1-foreground": {
-        value: "#f0f0f0",
-        description: "Primary text color for l1 backgrounds",
-        category: "foreground",
-        group: "surface-levels"
-      },
-      "l1-foreground-hover": {
-        value: "#ffffff",
-        description: "Hover text color for interactive elements on l1",
-        category: "foreground",
-        group: "surface-levels"
-      },
-      "l2-foreground": {
-        value: "#d0d0d0",
-        description: "Secondary text color for l2 backgrounds",
-        category: "foreground",
-        group: "surface-levels"
-      },
-      "l2-foreground-hover": {
-        value: "#e0e0e0",
-        description: "Hover text color for interactive elements on l2",
-        category: "foreground",
-        group: "surface-levels"
-      },
-      "l3-foreground": {
-        value: "#969696",
-        description: "Tertiary text color for l3 backgrounds and muted text",
-        category: "foreground",
-        group: "surface-levels"
-      },
-      "l3-foreground-hover": {
-        value: "#b0b0b0",
-        description: "Hover text color for interactive elements on l3",
-        category: "foreground",
-        group: "surface-levels"
-      },
-      "l1-border": {
-        value: "#19191a",
-        description: "Border color for elements on l1 backgrounds",
-        category: "border",
-        group: "surface-levels"
-      },
-      "l2-border": {
-        value: "#252527",
-        description: "Border color for elements on l2 backgrounds",
-        category: "border",
-        group: "surface-levels"
-      },
-      "l3-border": {
-        value: "#3b3b3b",
-        description: "Border color for elements on l3 backgrounds",
-        category: "border",
-        group: "surface-levels"
-      },
-      "l1-background-transparent": {
-        value: "color-mix(in srgb, #000000, transparent 100%)",
-        description: "",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l1-background-60": {
-        value: "color-mix(in srgb, #000000, transparent 40%)",
-        description: "",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l2-background-transparent": {
-        value: "color-mix(in srgb, #0a0a0a, transparent 100%)",
-        description: "",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l2-background-60": {
-        value: "color-mix(in srgb, #0a0a0a, transparent 40%)",
-        description: "",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l3-background-transparent": {
-        value: "color-mix(in srgb, #1a1b1b, transparent 100%)",
-        description: "",
-        category: "background",
-        group: "surface-levels"
-      },
-      "l3-background-60": {
-        value: "color-mix(in srgb, #1a1b1b, transparent 40%)",
-        description: "",
-        category: "background",
-        group: "surface-levels"
-      },
-      "primary-background": {
-        value: "#51f0a8",
-        description: "Primary action background color",
-        category: "background",
-        group: "actions"
-      },
-      "primary-background-hover": {
-        value: "#6af4b4",
-        description: "Hover state for primary action elements",
-        category: "background",
-        group: "actions"
-      },
-      "primary-foreground-hover": {
-        value: "#000000",
-        description: "Hover text color for primary action elements",
-        category: "foreground",
-        group: "actions"
-      },
-      "secondary-background": {
-        value: "#216a49",
-        description: "Secondary action background color",
-        category: "background",
-        group: "actions"
-      },
-      "secondary-background-hover": {
-        value: "#2a7d58",
-        description: "Hover state for secondary action elements",
-        category: "background",
-        group: "actions"
-      },
-      "secondary-foreground-hover": {
-        value: "#ffffff",
-        description: "Hover text color for secondary action elements",
-        category: "foreground",
-        group: "actions"
-      },
-      "secondary-border": {
-        value: "#353a3e",
-        description: "Border color for secondary buttons",
-        category: "border",
-        group: "actions"
-      },
-      "success-background": {
-        value: "#51f0a8",
-        description: "Success action background color",
-        category: "background",
-        group: "actions"
-      },
-      "success-background-hover": {
-        value: "#6af4b4",
-        description: "Hover state for success elements",
-        category: "background",
-        group: "actions"
-      },
-      "success-foreground": {
-        value: "#000000",
-        description: "Text color for success action elements",
-        category: "foreground",
-        group: "actions"
-      },
-      "success-foreground-hover": {
-        value: "#000000",
-        description: "Hover text color for success elements",
-        category: "foreground",
-        group: "actions"
-      },
-      "warning-background": {
-        value: "#ffb188",
-        description: "Warning action background color",
-        category: "background",
-        group: "actions"
-      },
-      "warning-background-hover": {
-        value: "#ffc4a0",
-        description: "Hover state for warning elements",
-        category: "background",
-        group: "actions"
-      },
-      "warning-foreground": {
-        value: "#000000",
-        description: "Text color for warning action elements",
-        category: "foreground",
-        group: "actions"
-      },
-      "warning-foreground-hover": {
-        value: "#000000",
-        description: "Hover text color for warning elements",
-        category: "foreground",
-        group: "actions"
-      },
-      "danger-background": {
-        value: "#ff78a5",
-        description: "Danger action background color",
-        category: "background",
-        group: "actions"
-      },
-      "danger-background-hover": {
-        value: "#ff9dbf",
-        description: "Hover state for danger elements",
-        category: "background",
-        group: "actions"
-      },
-      "danger-foreground": {
-        value: "#ffffff",
-        description: "Text color for danger action elements",
-        category: "foreground",
-        group: "actions"
-      },
-      "danger-foreground-hover": {
-        value: "#ffffff",
-        description: "Hover text color for danger elements",
-        category: "foreground",
-        group: "actions"
-      },
-      "callout-primary-background": {
-        value: "color-mix(in srgb, #51f0a8, transparent 90%)",
-        description: "Background for informational callout boxes",
-        category: "background",
-        group: "callouts"
-      },
-      "callout-primary-border": {
-        value: "color-mix(in srgb, #51f0a8, transparent 80%)",
-        description: "Border for informational callout boxes",
-        category: "border",
-        group: "callouts"
-      },
-      "callout-primary-title": {
-        value: "#51f0a8",
-        description: "Title text color for informational callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-primary-description": {
-        value: "#51f0a8",
-        description: "Description text color for informational callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-primary-icon": {
-        value: "#6af4b4",
-        description: "Icon color for informational callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-success-background": {
-        value: "color-mix(in srgb, #51f0a8, transparent 90%)",
-        description: "Background for success callout boxes",
-        category: "background",
-        group: "callouts"
-      },
-      "callout-success-border": {
-        value: "color-mix(in srgb, #51f0a8, transparent 80%)",
-        description: "Border for success callout boxes",
-        category: "border",
-        group: "callouts"
-      },
-      "callout-success-title": {
-        value: "#51f0a8",
-        description: "Title text color for success callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-success-description": {
-        value: "#51f0a8",
-        description: "Description text color for success callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-success-icon": {
-        value: "#6af4b4",
-        description: "Icon color for success callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-warning-background": {
-        value: "color-mix(in srgb, #ffb188, transparent 90%)",
-        description: "Background for warning callout boxes",
-        category: "background",
-        group: "callouts"
-      },
-      "callout-warning-border": {
-        value: "color-mix(in srgb, #ffb188, transparent 80%)",
-        description: "Border for warning callout boxes",
-        category: "border",
-        group: "callouts"
-      },
-      "callout-warning-title": {
-        value: "#ffb188",
-        description: "Title text color for warning callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-warning-description": {
-        value: "#ffb188",
-        description: "Description text color for warning callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-warning-icon": {
-        value: "#ffc4a0",
-        description: "Icon color for warning callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-error-background": {
-        value: "color-mix(in srgb, #ff78a5, transparent 90%)",
-        description: "Background for error callout boxes",
-        category: "background",
-        group: "callouts"
-      },
-      "callout-error-border": {
-        value: "color-mix(in srgb, #ff78a5, transparent 80%)",
-        description: "Border for error callout boxes",
-        category: "border",
-        group: "callouts"
-      },
-      "callout-error-title": {
-        value: "#ff78a5",
-        description: "Title text color for error callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-error-description": {
-        value: "#ff78a5",
-        description: "Description text color for error callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "callout-error-icon": {
-        value: "#ff9dbf",
-        description: "Icon color for error callouts",
-        category: "foreground",
-        group: "callouts"
-      },
-      "accent-primary": {
-        value: "#51f0a8",
-        description: "Primary brand accent color",
-        category: "background",
-        group: "accents"
-      },
-      "accent-primary-hover": {
-        value: "#6af4b4",
-        description: "Hover state for primary accent",
-        category: "background",
-        group: "accents"
-      },
-      "accent-primary-foreground": {
-        value: "#000000",
-        description: "Text color on primary accent backgrounds",
-        category: "foreground",
-        group: "accents"
-      },
-      "accent-forest": {
-        value: "#51f0a8",
-        description: "Green accent for success and positive indicators",
-        category: "background",
-        group: "accents"
-      },
-      "accent-forest-hover": {
-        value: "#6af4b4",
-        description: "Hover state for forest accent",
-        category: "background",
-        group: "accents"
-      },
-      "accent-forest-foreground": {
-        value: "#000000",
-        description: "Text color on forest accent backgrounds",
-        category: "foreground",
-        group: "accents"
-      },
-      "accent-amber": {
-        value: "#ffb188",
-        description: "Orange accent for warnings and attention",
-        category: "background",
-        group: "accents"
-      },
-      "accent-amber-hover": {
-        value: "#ffc4a0",
-        description: "Hover state for amber accent",
-        category: "background",
-        group: "accents"
-      },
-      "accent-amber-foreground": {
-        value: "#000000",
-        description: "Text color on amber accent backgrounds",
-        category: "foreground",
-        group: "accents"
-      },
-      "accent-cherry": {
-        value: "#ff78a5",
-        description: "Red/pink accent for errors and critical states",
-        category: "background",
-        group: "accents"
-      },
-      "accent-cherry-hover": {
-        value: "#ff9dbf",
-        description: "Hover state for cherry accent",
-        category: "background",
-        group: "accents"
-      },
-      "accent-cherry-foreground": {
-        value: "#000000",
-        description: "Text color on cherry accent backgrounds",
-        category: "foreground",
-        group: "accents"
-      },
-      "accent-aqua": {
-        value: "#5fd0ff",
-        description: "Cyan accent for informational elements",
-        category: "background",
-        group: "accents"
-      },
-      "accent-aqua-hover": {
-        value: "#7dd8ff",
-        description: "Hover state for aqua accent",
-        category: "background",
-        group: "accents"
-      },
-      "accent-aqua-foreground": {
-        value: "#000000",
-        description: "Text color on aqua accent backgrounds",
-        category: "foreground",
-        group: "accents"
-      },
-      "accent-sakura": {
-        value: "#ffb7cf",
-        description: "Pink accent for decorative elements",
-        category: "background",
-        group: "accents"
-      },
-      "accent-sakura-hover": {
-        value: "#ffd0e0",
-        description: "Hover state for sakura accent",
-        category: "background",
-        group: "accents"
-      },
-      "accent-sakura-foreground": {
-        value: "#000000",
-        description: "Text color on sakura accent backgrounds",
-        category: "foreground",
-        group: "accents"
-      },
-      "accent-sienna": {
-        value: "#ffb188",
-        description: "Orange accent for earthy elements",
-        category: "background",
-        group: "accents"
-      },
-      "accent-sienna-hover": {
-        value: "#ffc4a0",
-        description: "Hover state for sienna accent",
-        category: "background",
-        group: "accents"
-      },
-      "accent-sienna-foreground": {
-        value: "#000000",
-        description: "Text color on sienna accent backgrounds",
-        category: "foreground",
-        group: "accents"
-      }
-    }
-  }
-}, U = {
+  uppercase: f,
+  code: _,
+  paragraph: b
+}, C = {
   default: {
     light: {
       meta: {
@@ -5978,6 +4573,144 @@ const S = {
           description: "Text color on sienna accent backgrounds",
           category: "foreground",
           group: "accents"
+        },
+        "ghost-background": {
+          value: "transparent",
+          description: "Background for ghost buttons",
+          category: "background",
+          group: "buttons"
+        },
+        "ghost-background-hover": {
+          value: "var(--bg-vanilla-300)",
+          description: "Hover background for ghost buttons",
+          category: "background",
+          group: "buttons"
+        },
+        "ghost-foreground": {
+          value: "var(--bg-slate-50)",
+          description: "Text color for ghost buttons",
+          category: "foreground",
+          group: "buttons"
+        },
+        "ghost-foreground-hover": {
+          value: "var(--bg-slate-300)",
+          description: "Hover text color for ghost buttons",
+          category: "foreground",
+          group: "buttons"
+        },
+        "ghost-border": {
+          value: "var(--bg-vanilla-300)",
+          description: "Border color for ghost buttons",
+          category: "border",
+          group: "buttons"
+        },
+        "action-background": {
+          value: "transparent",
+          description: "Background for action buttons",
+          category: "background",
+          group: "buttons"
+        },
+        "action-background-hover": {
+          value: "var(--bg-vanilla-300)",
+          description: "Hover background for action buttons",
+          category: "background",
+          group: "buttons"
+        },
+        "action-border": {
+          value: "var(--bg-vanilla-300)",
+          description: "Border color for action buttons",
+          category: "border",
+          group: "buttons"
+        },
+        "action-border-hover": {
+          value: "var(--bg-vanilla-400)",
+          description: "Hover border color for action buttons",
+          category: "border",
+          group: "buttons"
+        },
+        "action-foreground": {
+          value: "var(--bg-slate-50)",
+          description: "Text color for action buttons",
+          category: "foreground",
+          group: "buttons"
+        },
+        "action-foreground-hover": {
+          value: "var(--bg-slate-300)",
+          description: "Hover text color for action buttons",
+          category: "foreground",
+          group: "buttons"
+        },
+        "callout-sienna-background": {
+          value: "color-mix(in srgb, var(--bg-sienna-500) 10%, transparent)",
+          description: "Background for sienna callout boxes",
+          category: "background",
+          group: "callouts"
+        },
+        "callout-sienna-border": {
+          value: "color-mix(in srgb, var(--bg-sienna-500) 20%, transparent)",
+          description: "Border for sienna callout boxes",
+          category: "border",
+          group: "callouts"
+        },
+        "callout-sienna-title": {
+          value: "var(--bg-sienna-600)",
+          description: "Title text color for sienna callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-sienna-description": {
+          value: "var(--bg-sienna-600)",
+          description: "Description text color for sienna callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-sienna-icon": {
+          value: "var(--bg-sienna-600)",
+          description: "Icon color for sienna callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-aqua-background": {
+          value: "color-mix(in srgb, var(--bg-aqua-500) 10%, transparent)",
+          description: "Background for aqua callout boxes",
+          category: "background",
+          group: "callouts"
+        },
+        "callout-aqua-border": {
+          value: "color-mix(in srgb, var(--bg-aqua-500) 20%, transparent)",
+          description: "Border for aqua callout boxes",
+          category: "border",
+          group: "callouts"
+        },
+        "callout-aqua-title": {
+          value: "var(--bg-aqua-700)",
+          description: "Title text color for aqua callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-aqua-description": {
+          value: "var(--bg-aqua-700)",
+          description: "Description text color for aqua callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-aqua-icon": {
+          value: "var(--bg-aqua-600)",
+          description: "Icon color for aqua callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "control-icon-foreground": {
+          value: "var(--text-base-white)",
+          description: "Icon/thumb color on colored control backgrounds",
+          category: "foreground",
+          group: "controls"
+        },
+        "control-icon-foreground-contrast": {
+          value: "var(--text-base-black)",
+          description: "High-contrast icon color for controls",
+          category: "foreground",
+          group: "controls"
         }
       }
     },
@@ -6732,46 +5465,183 @@ const S = {
           description: "Text color on sienna accent backgrounds",
           category: "foreground",
           group: "accents"
+        },
+        "ghost-background": {
+          value: "transparent",
+          description: "Background for ghost buttons",
+          category: "background",
+          group: "buttons"
+        },
+        "ghost-background-hover": {
+          value: "var(--bg-slate-400)",
+          description: "Hover background for ghost buttons",
+          category: "background",
+          group: "buttons"
+        },
+        "ghost-foreground": {
+          value: "var(--bg-vanilla-400)",
+          description: "Text color for ghost buttons",
+          category: "foreground",
+          group: "buttons"
+        },
+        "ghost-foreground-hover": {
+          value: "var(--bg-vanilla-100)",
+          description: "Hover text color for ghost buttons",
+          category: "foreground",
+          group: "buttons"
+        },
+        "ghost-border": {
+          value: "var(--bg-slate-400)",
+          description: "Border color for ghost buttons",
+          category: "border",
+          group: "buttons"
+        },
+        "action-background": {
+          value: "transparent",
+          description: "Background for action buttons",
+          category: "background",
+          group: "buttons"
+        },
+        "action-background-hover": {
+          value: "var(--bg-slate-400)",
+          description: "Hover background for action buttons",
+          category: "background",
+          group: "buttons"
+        },
+        "action-border": {
+          value: "var(--bg-slate-400)",
+          description: "Border color for action buttons",
+          category: "border",
+          group: "buttons"
+        },
+        "action-border-hover": {
+          value: "var(--bg-slate-300)",
+          description: "Hover border color for action buttons",
+          category: "border",
+          group: "buttons"
+        },
+        "action-foreground": {
+          value: "var(--bg-vanilla-400)",
+          description: "Text color for action buttons",
+          category: "foreground",
+          group: "buttons"
+        },
+        "action-foreground-hover": {
+          value: "var(--bg-vanilla-100)",
+          description: "Hover text color for action buttons",
+          category: "foreground",
+          group: "buttons"
+        },
+        "callout-sienna-background": {
+          value: "color-mix(in srgb, var(--bg-sienna-500) 10%, transparent)",
+          description: "Background for sienna callout boxes",
+          category: "background",
+          group: "callouts"
+        },
+        "callout-sienna-border": {
+          value: "color-mix(in srgb, var(--bg-sienna-500) 20%, transparent)",
+          description: "Border for sienna callout boxes",
+          category: "border",
+          group: "callouts"
+        },
+        "callout-sienna-title": {
+          value: "var(--bg-sienna-100)",
+          description: "Title text color for sienna callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-sienna-description": {
+          value: "var(--bg-sienna-300)",
+          description: "Description text color for sienna callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-sienna-icon": {
+          value: "var(--bg-sienna-300)",
+          description: "Icon color for sienna callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-aqua-background": {
+          value: "color-mix(in srgb, var(--bg-aqua-500) 10%, transparent)",
+          description: "Background for aqua callout boxes",
+          category: "background",
+          group: "callouts"
+        },
+        "callout-aqua-border": {
+          value: "color-mix(in srgb, var(--bg-aqua-500) 20%, transparent)",
+          description: "Border for aqua callout boxes",
+          category: "border",
+          group: "callouts"
+        },
+        "callout-aqua-title": {
+          value: "var(--bg-aqua-100)",
+          description: "Title text color for aqua callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-aqua-description": {
+          value: "var(--bg-aqua-300)",
+          description: "Description text color for aqua callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-aqua-icon": {
+          value: "var(--bg-aqua-300)",
+          description: "Icon color for aqua callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "control-icon-foreground": {
+          value: "var(--text-base-white)",
+          description: "Icon/thumb color on colored control backgrounds",
+          category: "foreground",
+          group: "controls"
+        },
+        "control-icon-foreground-contrast": {
+          value: "var(--text-base-black)",
+          description: "High-contrast icon color for controls",
+          category: "foreground",
+          group: "controls"
         }
       }
     }
-  },
-  aurora: E
-}, A = {
+  }
+}, E = {
   value: "0px",
   type: "radius"
-}, T = {
+}, A = {
   value: "2px",
   type: "radius"
-}, h = {
+}, T = {
   value: "4px",
   type: "radius"
-}, m = {
+}, h = {
   value: "6px",
   type: "radius"
 }, R = {
   value: "999999px",
   type: "radius"
-}, D = {
-  radius_0: A,
-  radius_1: T,
-  radius_2: h,
-  radius_3: m,
+}, U = {
+  radius_0: E,
+  radius_1: A,
+  radius_2: T,
+  radius_3: h,
   radiusRound: R
 };
 export {
   S as Color,
-  k as ColorTailwind,
-  N as Radius,
-  I as Spacing,
+  I as ColorTailwind,
+  x as Radius,
+  L as Spacing,
   G as Style,
-  H as StyleTailwind,
-  x as Typography,
-  L as TypographyStyles,
-  B as colorTokens,
-  D as radiusTokens,
-  U as semanticTokens,
-  F as spacingTokens,
-  C as typographyStylesTokens,
-  O as typographyTokens
+  k as StyleTailwind,
+  N as Typography,
+  m as TypographyStyles,
+  O as colorTokens,
+  U as radiusTokens,
+  C as semanticTokens,
+  B as spacingTokens,
+  H as typographyStylesTokens,
+  F as typographyTokens
 };