@rovula/ui 0.0.82 → 0.1.1

package/src/theme/themes/xspector/transparent.css

@@ -1,68 +1,93 @@
-:root[data-theme="xspector"]{
-  --main-transparency-primary-8: rgba(221 205 0 / 0.08);
-  --main-transparency-primary-12: rgba(221 205 0 / 0.12);
-  --main-transparency-primary-16: rgba(221 205 0 / 0.16);
-  --main-transparency-primary-24: rgba(221 205 0 / 0.24);
-  --main-transparency-primary-32: rgba(221 205 0 / 0.32);
-  --main-transparency-primary-48: rgba(221 205 0 / 0.48);
-  --main-transparency-secondary-8: rgba(158 158 158 / 0.08);
-  --main-transparency-secondary-12: rgba(158 158 158 / 0.12);
-  --main-transparency-secondary-16: rgba(158 158 158 / 0.16);
-  --main-transparency-secondary-24: rgba(158 158 158 / 0.24);
-  --main-transparency-secondary-32: rgba(158 158 158 / 0.32);
-  --main-transparency-secondary-48: rgba(158 158 158 / 0.48);
-  --main-transparency-tertiary-8: rgba(173 202 214 / 0.08);
-  --main-transparency-tertiary-12: rgba(173 202 214 / 0.12);
-  --main-transparency-tertiary-16: rgba(173 202 214 / 0.16);
-  --main-transparency-tertiary-24: rgba(173 202 214 / 0.24);
-  --main-transparency-tertiary-32: rgba(173 202 214 / 0.32);
-  --main-transparency-tertiary-48: rgba(173 202 214 / 0.48);
-  --other-transparency-info-8: rgba(41 152 255 / 0.08);
-  --other-transparency-info-12: rgba(41 152 255 / 0.12);
-  --other-transparency-info-16: rgba(41 152 255 / 0.16);
-  --other-transparency-info-24: rgba(41 152 255 / 0.24);
-  --other-transparency-info-32: rgba(41 152 255 / 0.32);
-  --other-transparency-info-48: rgba(41 152 255 / 0.48);
-  --other-transparency-success-8: rgba(84 214 44 / 0.08);
-  --other-transparency-success-12: rgba(84 214 44 / 0.12);
-  --other-transparency-success-16: rgba(84 214 44 / 0.16);
-  --other-transparency-success-24: rgba(84 214 44 / 0.24);
-  --other-transparency-success-32: rgba(84 214 44 / 0.32);
-  --other-transparency-success-48: rgba(84 214 44 / 0.48);
-  --other-transparency-warning-8: rgba(255 193 7 / 0.08);
-  --other-transparency-warning-12: rgba(255 193 7 / 0.12);
-  --other-transparency-warning-16: rgba(255 193 7 / 0.16);
-  --other-transparency-warning-24: rgba(255 193 7 / 0.24);
-  --other-transparency-warning-32: rgba(255 193 7 / 0.32);
-  --other-transparency-warning-48: rgba(255 193 7 / 0.48);
-  --other-transparency-error-8: rgba(255 72 66 / 0.08);
-  --other-transparency-error-12: rgba(255 72 66 / 0.12);
-  --other-transparency-error-16: rgba(255 72 66 / 0.16);
-  --other-transparency-error-24: rgba(255 72 66 / 0.24);
-  --other-transparency-error-32: rgba(255 72 66 / 0.32);
-  --other-transparency-error-48: rgba(255 72 66 / 0.48);
-  --other-transparency-grey-8: rgba(158 158 158 / 0.08);
-  --other-transparency-grey-12: rgba(158 158 158 / 0.12);
-  --other-transparency-grey-16: rgba(158 158 158 / 0.16);
-  --other-transparency-grey-24: rgba(158 158 158 / 0.24);
-  --other-transparency-grey-32: rgba(158 158 158 / 0.32);
-  --other-transparency-grey-48: rgba(158 158 158 / 0.48);
-  --other-transparency-grey2-8: rgba(145 158 171 / 0.08);
-  --other-transparency-grey2-12: rgba(145 158 171 / 0.12);
-  --other-transparency-grey2-16: rgba(145 158 171 / 0.16);
-  --other-transparency-grey2-24: rgba(145 158 171 / 0.24);
-  --other-transparency-grey2-32: rgba(145 158 171 / 0.32);
-  --other-transparency-grey2-48: rgba(145 158 171 / 0.48);
-  --other-transparency-white-08: rgba(255 255 255 / 0.08);
-  --other-transparency-white-12: rgba(255 255 255 / 0.12);
-  --other-transparency-white-16: rgba(255 255 255 / 0.16);
-  --other-transparency-white-24: rgba(255 255 255 / 0.24);
-  --other-transparency-white-32: rgba(255 255 255 / 0.32);
-  --other-transparency-white-48: rgba(255 255 255 / 0.48);
-  --other-transparency-black-08: rgba(0 0 0 / 0.08);
-  --other-transparency-black-12: rgba(0 0 0 / 0.12);
-  --other-transparency-black-16: rgba(0 0 0 / 0.16);
-  --other-transparency-black-24: rgba(0 0 0 / 0.24);
-  --other-transparency-black-32: rgba(0 0 0 / 0.32);
-  --other-transparency-black-48: rgba(0 0 0 / 0.48);
-}
+:root[data-theme="xspector"] {
+  /* ------------------------------------------------------------------ */
+  /* Transparency Variants — from variable_lasted.css                    */
+  /* ------------------------------------------------------------------ */
+
+  /* Primary (main) */
+  --main-transparency-primary-8: var(--transparency-primary-8-xspector);
+  --main-transparency-primary-12: var(--transparency-primary-12-xspector);
+  --main-transparency-primary-16: var(--transparency-primary-16-xspector);
+  --main-transparency-primary-24: var(--transparency-primary-24-xspector);
+  --main-transparency-primary-32: var(--transparency-primary-32-xspector);
+  --main-transparency-primary-48: var(--transparency-primary-48-xspector);
+
+  /* Secondary (main) */
+  --main-transparency-secondary-8: var(--transparency-secondary-8-xspector);
+  --main-transparency-secondary-12: var(--transparency-secondary-12-xspector);
+  --main-transparency-secondary-16: var(--transparency-secondary-16-xspector);
+  --main-transparency-secondary-24: var(--transparency-secondary-24-xspector);
+  --main-transparency-secondary-32: var(--transparency-secondary-32-xspector);
+  --main-transparency-secondary-48: var(--transparency-secondary-48-xspector);
+
+  /* Tertiary (main) */
+  --main-transparency-tertiary-8: var(--transparency-tertiary-8-xspector);
+  --main-transparency-tertiary-12: var(--transparency-tertiary-12-xspector);
+  --main-transparency-tertiary-16: var(--transparency-tertiary-16-xspector);
+  --main-transparency-tertiary-24: var(--transparency-tertiary-24-xspector);
+  --main-transparency-tertiary-32: var(--transparency-tertiary-32-xspector);
+  --main-transparency-tertiary-48: var(--transparency-tertiary-48-xspector);
+
+  /* Info (other) */
+  --other-transparency-info-8: var(--transparency-info-8-xspector);
+  --other-transparency-info-12: var(--transparency-info-12-xspector);
+  --other-transparency-info-16: var(--transparency-info-16-xspector);
+  --other-transparency-info-24: var(--transparency-info-24-xspector);
+  --other-transparency-info-32: var(--transparency-info-32-xspector);
+  --other-transparency-info-48: var(--transparency-info-48-xspector);
+
+  /* Success (other) */
+  --other-transparency-success-8: var(--transparency-success-8-xspector);
+  --other-transparency-success-12: var(--transparency-success-12-xspector);
+  --other-transparency-success-16: var(--transparency-success-16-xspector);
+  --other-transparency-success-24: var(--transparency-success-24-xspector);
+  --other-transparency-success-32: var(--transparency-success-32-xspector);
+  --other-transparency-success-48: var(--transparency-success-48-xspector);
+
+  /* Warning (other) */
+  --other-transparency-warning-8: var(--transparency-warning-8-xspector);
+  --other-transparency-warning-12: var(--transparency-warning-12-xspector);
+  --other-transparency-warning-16: var(--transparency-warning-16-xspector);
+  --other-transparency-warning-24: var(--transparency-warning-24-xspector);
+  --other-transparency-warning-32: var(--transparency-warning-32-xspector);
+  --other-transparency-warning-48: var(--transparency-warning-48-xspector);
+
+  /* Error (other) */
+  --other-transparency-error-8: var(--transparency-error-8-xspector);
+  --other-transparency-error-12: var(--transparency-error-12-xspector);
+  --other-transparency-error-16: var(--transparency-error-16-xspector);
+  --other-transparency-error-24: var(--transparency-error-24-xspector);
+  --other-transparency-error-32: var(--transparency-error-32-xspector);
+  --other-transparency-error-48: var(--transparency-error-48-xspector);
+
+  /* Grey (other) */
+  --other-transparency-grey-8: var(--transparency-grey-8-xspector);
+  --other-transparency-grey-12: var(--transparency-grey-12-xspector);
+  --other-transparency-grey-16: var(--transparency-grey-16-xspector);
+  --other-transparency-grey-24: var(--transparency-grey-24-xspector);
+  --other-transparency-grey-32: var(--transparency-grey-32-xspector);
+  --other-transparency-grey-48: var(--transparency-grey-48-xspector);
+
+  /* Grey2 (other) */
+  --other-transparency-grey2-8: var(--transparency-grey2-8-xspector);
+  --other-transparency-grey2-12: var(--transparency-grey2-12-xspector);
+  --other-transparency-grey2-16: var(--transparency-grey2-16-xspector);
+  --other-transparency-grey2-24: var(--transparency-grey2-24-xspector);
+  --other-transparency-grey2-32: var(--transparency-grey2-32-xspector);
+  --other-transparency-grey2-48: var(--transparency-grey2-48-xspector);
+
+  /* White (other) */
+  --other-transparency-white-08: var(--transparency-white-8-xspector);
+  --other-transparency-white-12: var(--transparency-white-12-xspector);
+  --other-transparency-white-16: var(--transparency-white-16-xspector);
+  --other-transparency-white-24: var(--transparency-white-24-xspector);
+  --other-transparency-white-32: var(--transparency-white-32-xspector);
+  --other-transparency-white-48: var(--transparency-white-48-xspector);
+
+  /* Black (other) */
+  --other-transparency-black-08: var(--transparency-black-8-xspector);
+  --other-transparency-black-12: var(--transparency-black-12-xspector);
+  --other-transparency-black-16: var(--transparency-black-16-xspector);
+  --other-transparency-black-24: var(--transparency-black-24-xspector);
+  --other-transparency-black-32: var(--transparency-black-32-xspector);
+  --other-transparency-black-48: var(--transparency-black-48-xspector);
+}

package/src/theme/tokens/baseline.css

@@ -8,5 +8,6 @@
 @import url(components/action-button.css);
 @import url(components/loading.css);
 @import url(components/navbar.css);
+@import url(components/footer.css);
 @import url(components/dropdown-menu.css);
 @import url(components/switch.css);

package/src/theme/tokens/components/footer.css

@@ -0,0 +1,9 @@
+:root {
+  /* Footer */
+  --footer-height: 58px;
+  --footer-height-simple: 48px;
+  --footer-bg-color: var(--state-color-primary-default);
+  --footer-text-color: var(--primary-foreground);
+  --footer-border-color: var(--primary-foreground);
+  --footer-gap: 16px;
+}

package/src/theme/tokens/components/navbar.css

@@ -1,8 +1,9 @@
 :root {
-    /* Navbar */
+  /* Navbar */
   --navbar-height: 58px;
   --navbar-bg-color: var(--primary-default);
   --navbar-text-color: var(--primary-foreground);
   --navbar-border-color: var(--primary-foreground);
   --navbar-gap: 16px;
+  --navbar-shadow-scrolled: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }

package/src/types/lucide-react.d.ts

@@ -0,0 +1,5 @@
+declare module "lucide-react/dynamicIconImports" {
+  type IconLoader = () => Promise<{ default: React.ComponentType<any> }>;
+  const dynamicIconImports: Record<string, IconLoader>;
+  export { dynamicIconImports as default };
+}

package/src/utils/colors.ts

@@ -1,3 +1,386 @@
+/** CSS variable names for theme colors (resolved by data-theme) */
+export const THEME_COLOR_KEYS = {
+  /* ----- Palette: Primary ----- */
+  "primary-5": "--primary-ramps-primary-5",
+  "primary-10": "--primary-ramps-primary-10",
+  "primary-20": "--primary-ramps-primary-20",
+  "primary-30": "--primary-ramps-primary-30",
+  "primary-40": "--primary-ramps-primary-40",
+  "primary-50": "--primary-ramps-primary-50",
+  "primary-60": "--primary-ramps-primary-60",
+  "primary-70": "--primary-ramps-primary-70",
+  "primary-80": "--primary-ramps-primary-80",
+  "primary-90": "--primary-ramps-primary-90",
+  "primary-100": "--primary-ramps-primary-100",
+  "primary-110": "--primary-ramps-primary-110",
+  "primary-120": "--primary-ramps-primary-120",
+  "primary-130": "--primary-ramps-primary-130",
+  "primary-140": "--primary-ramps-primary-140",
+  "primary-150": "--primary-ramps-primary-150",
+  /* ----- Palette: Secondary ----- */
+  "secondary-5": "--secondary-ramps-secondary-5",
+  "secondary-10": "--secondary-ramps-secondary-10",
+  "secondary-20": "--secondary-ramps-secondary-20",
+  "secondary-30": "--secondary-ramps-secondary-30",
+  "secondary-40": "--secondary-ramps-secondary-40",
+  "secondary-50": "--secondary-ramps-secondary-50",
+  "secondary-60": "--secondary-ramps-secondary-60",
+  "secondary-70": "--secondary-ramps-secondary-70",
+  "secondary-80": "--secondary-ramps-secondary-80",
+  "secondary-90": "--secondary-ramps-secondary-90",
+  "secondary-100": "--secondary-ramps-secondary-100",
+  "secondary-110": "--secondary-ramps-secondary-110",
+  "secondary-120": "--secondary-ramps-secondary-120",
+  "secondary-130": "--secondary-ramps-secondary-130",
+  "secondary-140": "--secondary-ramps-secondary-140",
+  "secondary-150": "--secondary-ramps-secondary-150",
+  /* ----- Palette: Tertiary ----- */
+  "tertiary-5": "--tertiary-ramps-tertiary-5",
+  "tertiary-10": "--tertiary-ramps-tertiary-10",
+  "tertiary-20": "--tertiary-ramps-tertiary-20",
+  "tertiary-30": "--tertiary-ramps-tertiary-30",
+  "tertiary-40": "--tertiary-ramps-tertiary-40",
+  "tertiary-50": "--tertiary-ramps-tertiary-50",
+  "tertiary-60": "--tertiary-ramps-tertiary-60",
+  "tertiary-70": "--tertiary-ramps-tertiary-70",
+  "tertiary-80": "--tertiary-ramps-tertiary-80",
+  "tertiary-90": "--tertiary-ramps-tertiary-90",
+  "tertiary-100": "--tertiary-ramps-tertiary-100",
+  "tertiary-110": "--tertiary-ramps-tertiary-110",
+  "tertiary-120": "--tertiary-ramps-tertiary-120",
+  "tertiary-130": "--tertiary-ramps-tertiary-130",
+  "tertiary-140": "--tertiary-ramps-tertiary-140",
+  "tertiary-150": "--tertiary-ramps-tertiary-150",
+  /* ----- Palette: Grey ----- */
+  "grey-5": "--grey-grey-5",
+  "grey-10": "--grey-grey-10",
+  "grey-20": "--grey-grey-20",
+  "grey-30": "--grey-grey-30",
+  "grey-40": "--grey-grey-40",
+  "grey-50": "--grey-grey-50",
+  "grey-60": "--grey-grey-60",
+  "grey-70": "--grey-grey-70",
+  "grey-80": "--grey-grey-80",
+  "grey-90": "--grey-grey-90",
+  "grey-100": "--grey-grey-100",
+  "grey-110": "--grey-grey-110",
+  "grey-120": "--grey-grey-120",
+  "grey-130": "--grey-grey-130",
+  "grey-140": "--grey-grey-140",
+  "grey-150": "--grey-grey-150",
+  /* ----- Palette: Grey2 ----- */
+  "grey2-50": "--grey2-grey2-50",
+  "grey2-100": "--grey2-grey2-100",
+  "grey2-200": "--grey2-grey2-200",
+  "grey2-300": "--grey2-grey2-300",
+  "grey2-400": "--grey2-grey2-400",
+  "grey2-500": "--grey2-grey2-500",
+  "grey2-600": "--grey2-grey2-600",
+  "grey2-700": "--grey2-grey2-700",
+  "grey2-800": "--grey2-grey2-800",
+  "grey2-900": "--grey2-grey2-900",
+  "grey2-950": "--grey2-grey2-950",
+  /* ----- Palette: Info, Success, Warning, Error ----- */
+  "info-50": "--info-info-50",
+  "info-100": "--info-info-100",
+  "info-200": "--info-info-200",
+  "info-300": "--info-info-300",
+  "info-400": "--info-info-400",
+  "info-500": "--info-info-500",
+  "info-600": "--info-info-600",
+  "info-700": "--info-info-700",
+  "info-800": "--info-info-800",
+  "info-900": "--info-info-900",
+  "info-950": "--info-info-950",
+  "success-50": "--success-success-50",
+  "success-100": "--success-success-100",
+  "success-200": "--success-success-200",
+  "success-300": "--success-success-300",
+  "success-400": "--success-success-400",
+  "success-500": "--success-success-500",
+  "success-600": "--success-success-600",
+  "success-700": "--success-success-700",
+  "success-800": "--success-success-800",
+  "success-900": "--success-success-900",
+  "success-950": "--success-success-950",
+  "warning-50": "--warning-warning-50",
+  "warning-100": "--warning-warning-100",
+  "warning-200": "--warning-warning-200",
+  "warning-300": "--warning-warning-300",
+  "warning-400": "--warning-warning-400",
+  "warning-500": "--warning-warning-500",
+  "warning-600": "--warning-warning-600",
+  "warning-700": "--warning-warning-700",
+  "warning-800": "--warning-warning-800",
+  "warning-900": "--warning-warning-900",
+  "warning-950": "--warning-warning-950",
+  "error-50": "--error-error-50",
+  "error-100": "--error-error-100",
+  "error-200": "--error-error-200",
+  "error-300": "--error-error-300",
+  "error-400": "--error-error-400",
+  "error-500": "--error-error-500",
+  "error-600": "--error-error-600",
+  "error-700": "--error-error-700",
+  "error-800": "--error-error-800",
+  "error-900": "--error-error-900",
+  "error-950": "--error-error-950",
+  /* ----- State: Primary ----- */
+  primary: "--state-color-primary-default",
+  "primary-hover": "--state-color-primary-hover",
+  "primary-stroke": "--state-color-primary-stroke",
+  "primary-hover-bg": "--state-color-primary-hover-bg",
+  "primary-pressed": "--state-color-primary-pressed",
+  "primary-active": "--state-color-primary-active",
+  "primary-text-solid": "--state-color-primary-text-solid",
+  "primary-text-outline": "--state-color-primary-text-outline",
+  "primary-text-hover": "--state-color-primary-text-hover",
+  "primary-text-pressed": "--state-color-primary-text-pressed",
+  /* ----- State: Secondary ----- */
+  secondary: "--state-color-secondary-default",
+  "secondary-hover": "--state-color-secondary-hover",
+  "secondary-stroke": "--state-color-secondary-stroke",
+  "secondary-hover-bg": "--state-color-secondary-hover-bg",
+  "secondary-pressed": "--state-color-secondary-pressed",
+  "secondary-active": "--state-color-secondary-active",
+  "secondary-text-solid": "--state-color-secondary-text-solid",
+  "secondary-text-outline": "--state-color-secondary-text-outline",
+  "secondary-text-hover": "--state-color-secondary-text-hover",
+  "secondary-text-pressed": "--state-color-secondary-text-pressed",
+  /* ----- State: Tertiary ----- */
+  tertiary: "--state-color-tertiary-default",
+  "tertiary-hover": "--state-color-tertiary-hover",
+  "tertiary-stroke": "--state-color-tertiary-stroke",
+  "tertiary-hover-bg": "--state-color-tertiary-hover-bg",
+  "tertiary-pressed": "--state-color-tertiary-pressed",
+  "tertiary-active": "--state-color-tertiary-active",
+  "tertiary-text-solid": "--state-color-tertiary-text-solid",
+  "tertiary-text-outline": "--state-color-tertiary-text-outline",
+  "tertiary-text-hover": "--state-color-tertiary-text-hover",
+  "tertiary-text-pressed": "--state-color-tertiary-text-pressed",
+  /* ----- State: Info ----- */
+  info: "--state-color-info-default",
+  "info-hover": "--state-color-info-hover",
+  "info-stroke": "--state-color-info-stroke",
+  "info-hover-bg": "--state-color-info-hover-bg",
+  "info-pressed": "--state-color-info-pressed",
+  "info-active": "--state-color-info-active",
+  "info-text-solid": "--state-color-info-text-solid",
+  "info-text-outline": "--state-color-info-text-outline",
+  "info-text-hover": "--state-color-info-text-hover",
+  "info-text-pressed": "--state-color-info-text-pressed",
+  /* ----- State: Success ----- */
+  success: "--state-color-success-default",
+  "success-hover": "--state-color-success-hover",
+  "success-stroke": "--state-color-success-stroke",
+  "success-hover-bg": "--state-color-success-hover-bg",
+  "success-pressed": "--state-color-success-pressed",
+  "success-active": "--state-color-success-active",
+  "success-text-solid": "--state-color-success-text-solid",
+  "success-text-outline": "--state-color-success-text-outline",
+  "success-text-hover": "--state-color-success-text-hover",
+  "success-text-pressed": "--state-color-success-text-pressed",
+  /* ----- State: Warning ----- */
+  warning: "--state-color-warning-default",
+  "warning-hover": "--state-color-warning-hover",
+  "warning-stroke": "--state-color-warning-stroke",
+  "warning-hover-bg": "--state-color-warning-hover-bg",
+  "warning-pressed": "--state-color-warning-pressed",
+  "warning-active": "--state-color-warning-active",
+  "warning-text-solid": "--state-color-warning-text-solid",
+  "warning-text-outline": "--state-color-warning-text-outline",
+  "warning-text-hover": "--state-color-warning-text-hover",
+  "warning-text-pressed": "--state-color-warning-text-pressed",
+  /* ----- State: Error ----- */
+  error: "--state-color-error-default",
+  "error-hover": "--state-color-error-hover",
+  "error-stroke": "--state-color-error-stroke",
+  "error-hover-bg": "--state-color-error-hover-bg",
+  "error-pressed": "--state-color-error-pressed",
+  "error-active": "--state-color-error-active",
+  "error-text-solid": "--state-color-error-text-solid",
+  "error-text-outline": "--state-color-error-text-outline",
+  "error-text-hover": "--state-color-error-text-hover",
+  "error-text-pressed": "--state-color-error-text-pressed",
+  /* ----- State: Disable ----- */
+  "disable-solid": "--state-color-disable-solid",
+  "disable-outline": "--state-color-disable-outline",
+  /* ----- Text ----- */
+  "text-black": "--text-black",
+  "text-dark": "--text-dark",
+  "text-medium": "--text-medium",
+  "text-light": "--text-light",
+  "text-grey-dark": "--text-grey-dark",
+  "text-grey-medium": "--text-grey-medium",
+  "text-grey-light": "--text-grey-light",
+  "text-white": "--text-white",
+  /* ----- Input ----- */
+  "input-default-text": "--input-color-default-text",
+  "input-default-stroke": "--input-color-default-stroke",
+  "input-filled-text": "--input-color-filled-text",
+  "input-active-stroke": "--input-color-active-stroke",
+  "input-disable-text": "--input-color-disable-text",
+  "input-disable-stroke": "--input-color-disable-stroke",
+  "input-disable-bg": "--input-color-disable-bg",
+  "input-label-bg": "--input-color-label-bg",
+  "input-error": "--input-color-error",
+  /* ----- Function button ----- */
+  "function-default-solid": "--function-default-solid",
+  "function-default-hover": "--function-default-hover",
+  "function-default-hover-bg": "--function-default-hover-bg",
+  "function-default-stroke": "--function-default-stroke",
+  "function-default-icon": "--function-default-icon",
+  "function-default-outline-icon": "--function-default-outline-icon",
+  "function-active-solid": "--function-active-solid",
+  "function-active-hover": "--function-active-hover",
+  "function-active-hover-bg": "--function-active-hover-bg",
+  "function-active-stroke": "--function-active-stroke",
+  "function-active-icon": "--function-active-icon",
+  /* ----- Base ----- */
+  "base-bg": "--base-color-bg",
+  "base-bg2": "--base-color-bg2",
+  "base-bg3": "--base-color-bg3",
+  "base-workspace-stroke": "--base-color-workspace-stroke",
+  "base-guideline-stroke": "--base-color-guideline-stroke",
+  "base-popup": "--base-color-popup",
+  "base-popup-highlight": "--base-color-popup-hightlight",
+  "base-popup-curtain": "--base-color-popup-curtain",
+  "base-popup-foreground": "--base-color-popup-foreground",
+  /* ----- Common ----- */
+  "common-white": "--common-white",
+  "common-black": "--common-black",
+  /* ----- Semantic ----- */
+  background: "--background",
+  foreground: "--foreground",
+  surface: "--surface",
+  "surface-foreground": "--surface-foreground",
+  "primary-foreground": "--primary-foreground",
+  "secondary-foreground": "--secondary-foreground",
+  "tertiary-foreground": "--tertiary-foreground",
+  "info-foreground": "--info-foreground",
+  "success-foreground": "--success-foreground",
+  "warning-foreground": "--warning-foreground",
+  "error-foreground": "--error-foreground",
+  "grey-foreground": "--grey-foreground",
+  "grey2-foreground": "--grey2-foreground",
+  /* ----- Transparency: Primary ----- */
+  "primary-transparent-8": "--main-transparency-primary-8",
+  "primary-transparent-12": "--main-transparency-primary-12",
+  "primary-transparent-16": "--main-transparency-primary-16",
+  "primary-transparent-24": "--main-transparency-primary-24",
+  "primary-transparent-32": "--main-transparency-primary-32",
+  "primary-transparent-48": "--main-transparency-primary-48",
+  /* ----- Transparency: Secondary ----- */
+  "secondary-transparent-8": "--main-transparency-secondary-8",
+  "secondary-transparent-12": "--main-transparency-secondary-12",
+  "secondary-transparent-16": "--main-transparency-secondary-16",
+  "secondary-transparent-24": "--main-transparency-secondary-24",
+  "secondary-transparent-32": "--main-transparency-secondary-32",
+  "secondary-transparent-48": "--main-transparency-secondary-48",
+  /* ----- Transparency: Tertiary ----- */
+  "tertiary-transparent-8": "--main-transparency-tertiary-8",
+  "tertiary-transparent-12": "--main-transparency-tertiary-12",
+  "tertiary-transparent-16": "--main-transparency-tertiary-16",
+  "tertiary-transparent-24": "--main-transparency-tertiary-24",
+  "tertiary-transparent-32": "--main-transparency-tertiary-32",
+  "tertiary-transparent-48": "--main-transparency-tertiary-48",
+  /* ----- Transparency: Info, Success, Warning, Error, Grey, Grey2 ----- */
+  "info-transparent-8": "--other-transparency-info-8",
+  "info-transparent-12": "--other-transparency-info-12",
+  "info-transparent-16": "--other-transparency-info-16",
+  "info-transparent-24": "--other-transparency-info-24",
+  "info-transparent-32": "--other-transparency-info-32",
+  "info-transparent-48": "--other-transparency-info-48",
+  "success-transparent-8": "--other-transparency-success-8",
+  "success-transparent-12": "--other-transparency-success-12",
+  "success-transparent-16": "--other-transparency-success-16",
+  "success-transparent-24": "--other-transparency-success-24",
+  "success-transparent-32": "--other-transparency-success-32",
+  "success-transparent-48": "--other-transparency-success-48",
+  "warning-transparent-8": "--other-transparency-warning-8",
+  "warning-transparent-12": "--other-transparency-warning-12",
+  "warning-transparent-16": "--other-transparency-warning-16",
+  "warning-transparent-24": "--other-transparency-warning-24",
+  "warning-transparent-32": "--other-transparency-warning-32",
+  "warning-transparent-48": "--other-transparency-warning-48",
+  "error-transparent-8": "--other-transparency-error-8",
+  "error-transparent-12": "--other-transparency-error-12",
+  "error-transparent-16": "--other-transparency-error-16",
+  "error-transparent-24": "--other-transparency-error-24",
+  "error-transparent-32": "--other-transparency-error-32",
+  "error-transparent-48": "--other-transparency-error-48",
+  "grey-transparent-8": "--other-transparency-grey-8",
+  "grey-transparent-12": "--other-transparency-grey-12",
+  "grey-transparent-16": "--other-transparency-grey-16",
+  "grey-transparent-24": "--other-transparency-grey-24",
+  "grey-transparent-32": "--other-transparency-grey-32",
+  "grey-transparent-48": "--other-transparency-grey-48",
+  "grey2-transparent-8": "--other-transparency-grey2-8",
+  "grey2-transparent-12": "--other-transparency-grey2-12",
+  "grey2-transparent-16": "--other-transparency-grey2-16",
+  "grey2-transparent-24": "--other-transparency-grey2-24",
+  "grey2-transparent-32": "--other-transparency-grey2-32",
+  "grey2-transparent-48": "--other-transparency-grey2-48",
+  /* ----- Transparency: White, Black ----- */
+  "white-transparent-8": "--other-transparency-white-08",
+  "white-transparent-12": "--other-transparency-white-12",
+  "white-transparent-16": "--other-transparency-white-16",
+  "white-transparent-24": "--other-transparency-white-24",
+  "white-transparent-32": "--other-transparency-white-32",
+  "white-transparent-48": "--other-transparency-white-48",
+  "black-transparent-8": "--other-transparency-black-08",
+  "black-transparent-12": "--other-transparency-black-12",
+  "black-transparent-16": "--other-transparency-black-16",
+  "black-transparent-24": "--other-transparency-black-24",
+  "black-transparent-32": "--other-transparency-black-32",
+  "black-transparent-48": "--other-transparency-black-48",
+} as const;
+
+export type ThemeColorKey = keyof typeof THEME_COLOR_KEYS;
+
+/**
+ * Get computed color value from a CSS variable (respects current theme).
+ * Use in browser only; returns empty string during SSR.
+ *
+ * @example
+ * const primary = getThemeColor('primary');
+ * const hex = getThemeColor('--primary-ramps-primary-100');
+ */
+export function getThemeColor(
+  keyOrVar: ThemeColorKey | string,
+  element: HTMLElement | Document = document
+): string {
+  if (typeof window === "undefined") return "";
+  const root = element instanceof Document ? element.documentElement : element;
+  const varName =
+    keyOrVar in THEME_COLOR_KEYS
+      ? THEME_COLOR_KEYS[keyOrVar as ThemeColorKey]
+      : keyOrVar.startsWith("--")
+        ? keyOrVar
+        : `--${keyOrVar}`;
+  return getComputedStyle(root).getPropertyValue(varName).trim();
+}
+
+/**
+ * Get multiple theme colors as a JS object.
+ *
+ * @example
+ * const colors = getThemeColors();
+ * // { primary: '#2563eb', secondary: '#60a5fa', ... }
+ */
+export function getThemeColors(
+  keys: ThemeColorKey[] = Object.keys(THEME_COLOR_KEYS) as ThemeColorKey[],
+  element?: HTMLElement | Document
+): Record<string, string> {
+  return keys.reduce(
+    (acc, key) => {
+      acc[key] = getThemeColor(key, element);
+      return acc;
+    },
+    {} as Record<string, string>
+  );
+}
+
 export const srgbToHex = (color: string) => {
   if (color.startsWith("color(")) {
     const rgbValues = color.match(/([\d.]+)/g);