@rovula/ui 0.1.0 → 0.1.1

package/dist/src/theme/global.css

@@ -1070,6 +1070,14 @@
   --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);
+  /* 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;
   /* ------------------------------------------------------------------ */
   /* DropdownMenu Component Tokens                                      */
   /* ------------------------------------------------------------------ */
@@ -3062,30 +3070,30 @@
   /* ------------------------------------------------------------------ */
   /* Typography                                                          */
   /* ------------------------------------------------------------------ */
-  --h1-family: "Poppins";
-  --h2-family: "Poppins";
-  --h3-family: "Poppins";
-  --h4-family: "Poppins";
-  --h5-family: "Poppins";
-  --h6-family: "Poppins";
-  --subtitle2-family: "Poppins";
-  --subtitle3-family: "Poppins";
-  --subtitle4-family: "Poppins";
-  --subtitle5-family: "Poppins";
-  --subtitle6-family: "Poppins";
-  --body1-family: "Poppins";
-  --body2-family: "Poppins";
-  --body3-family: "Poppins";
-  --body4-family: "Poppins";
-  --small1-family: "Poppins";
-  --small2-family: "Poppins";
-  --small3-family: "Poppins";
-  --small4-family: "Poppins";
-  --small5-family: "Poppins";
-  --label-label1-family: "Poppins";
-  --label-label2-family: "Poppins";
-  --button-button-l-family: "Poppins";
-  --button-button-ms-family: "Poppins";
+  --h1-family: "Montserrat";
+  --h2-family: "Montserrat";
+  --h3-family: "Montserrat";
+  --h4-family: "Montserrat";
+  --h5-family: "Montserrat";
+  --h6-family: "Montserrat";
+  --subtitle2-family: "Montserrat";
+  --subtitle3-family: "Montserrat";
+  --subtitle4-family: "Montserrat";
+  --subtitle5-family: "Montserrat";
+  --subtitle6-family: "Montserrat";
+  --body1-family: "Montserrat";
+  --body2-family: "Montserrat";
+  --body3-family: "Montserrat";
+  --body4-family: "Montserrat";
+  --small1-family: "Montserrat";
+  --small2-family: "Montserrat";
+  --small3-family: "Montserrat";
+  --small4-family: "Montserrat";
+  --small5-family: "Montserrat";
+  --label-label1-family: "Montserrat";
+  --label-label2-family: "Montserrat";
+  --button-button-l-family: "Montserrat";
+  --button-button-ms-family: "Montserrat";
   /* --------------------------------------------------------------------------------- */
   /* Action Button Component Tokens                                                    */
   /* --------------------------------------------------------------------------------- */
@@ -3759,6 +3767,10 @@ input[type=number] {
   pointer-events: auto;
 }
 
+.visible {
+  visibility: visible;
+}
+
 .static {
   position: static;
 }
@@ -3880,6 +3892,14 @@ input[type=number] {
   top: 100%;
 }
 
+.-z-10 {
+  z-index: -10;
+}
+
+.-z-\[5\] {
+  z-index: -5;
+}
+
 .z-0 {
   z-index: 0;
 }
@@ -4155,6 +4175,10 @@ input[type=number] {
   height: 15rem;
 }
 
+.h-\[200vh\] {
+  height: 200vh;
+}
+
 .h-\[24px\] {
   height: 24px;
 }
@@ -4187,6 +4211,14 @@ input[type=number] {
   height: 64px;
 }
 
+.h-\[var\(--footer-height\)\] {
+  height: var(--footer-height);
+}
+
+.h-\[var\(--footer-height-simple\)\] {
+  height: var(--footer-height-simple);
+}
+
 .h-\[var\(--navbar-height\)\] {
   height: var(--navbar-height);
 }
@@ -4212,6 +4244,10 @@ input[type=number] {
   max-height: 15rem;
 }
 
+.max-h-\[80vh\] {
+  max-height: 80vh;
+}
+
 .max-h-screen {
   max-height: 100vh;
 }
@@ -4220,6 +4256,10 @@ input[type=number] {
   min-height: 2.5rem;
 }
 
+.min-h-screen {
+  min-height: 100vh;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -4252,6 +4292,10 @@ input[type=number] {
   width: 1.5rem;
 }
 
+.w-64 {
+  width: 16rem;
+}
+
 .w-8 {
   width: 2rem;
 }
@@ -4473,6 +4517,10 @@ input[type=number] {
   grid-template-columns: repeat(9, minmax(0, 1fr));
 }
 
+.grid-cols-\[repeat\(auto-fill\2c minmax\(140px\2c 1fr\)\)\] {
+  grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -4553,6 +4601,11 @@ input[type=number] {
   gap: 2px;
 }
 
+.gap-x-\[var\(--footer-gap\)\] {
+  -moz-column-gap: var(--footer-gap);
+       column-gap: var(--footer-gap);
+}
+
 .gap-x-\[var\(--navbar-gap\)\] {
   -moz-column-gap: var(--navbar-gap);
        column-gap: var(--navbar-gap);
@@ -4750,6 +4803,10 @@ input[type=number] {
   border-top-width: 1px;
 }
 
+.border-t-2 {
+  border-top-width: 2px;
+}
+
 .border-solid {
   border-style: solid;
 }
@@ -5026,6 +5083,10 @@ input[type=number] {
   border-right-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.border-t-\[var\(--footer-border-color\)\] {
+  border-top-color: var(--footer-border-color);
+}
+
 .border-t-secondary {
   --tw-border-opacity: 1;
   border-top-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -5051,6 +5112,10 @@ input[type=number] {
   background-color: var(--dropdown-menu-seperator-bg);
 }
 
+.bg-\[var\(--footer-bg-color\)\] {
+  background-color: var(--footer-bg-color);
+}
+
 .bg-action-button-icon-active {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--action-button-icon-active-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -6743,6 +6808,10 @@ input[type=number] {
   fill: color-mix(in srgb, var(--state-color-warning-default) calc(100% * 1), transparent);
 }
 
+.stroke-current {
+  stroke: currentColor;
+}
+
 .stroke-input-default-stroke {
   stroke: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * 1), transparent);
 }
@@ -7004,6 +7073,10 @@ input[type=number] {
   vertical-align: middle;
 }
 
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
 .font-poppins {
   font-family: Poppins, sans-serif;
 }
@@ -7255,6 +7328,10 @@ input[type=number] {
   color: var(--dropdown-menu-selected-text);
 }
 
+.text-\[var\(--footer-text-color\)\] {
+  color: var(--footer-text-color);
+}
+
 .text-\[var\(--loading-process-color\)\] {
   color: var(--loading-process-color);
 }
@@ -7638,6 +7715,11 @@ input[type=number] {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-\[var\(--navbar-shadow-scrolled\)\] {
+  --tw-shadow-color: var(--navbar-shadow-scrolled);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -7727,6 +7809,12 @@ input[type=number] {
   transition-duration: 150ms;
 }
 
+.transition-shadow {
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -8266,6 +8354,11 @@ input[type=number] {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-input-active-stroke\/10:hover {
   background-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * 0.1), transparent);
 }

package/dist/utils/colors.js

@@ -1,3 +1,372 @@
+/** 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",
+};
+/**
+ * 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, element = document) {
+    if (typeof window === "undefined")
+        return "";
+    const root = element instanceof Document ? element.documentElement : element;
+    const varName = keyOrVar in THEME_COLOR_KEYS
+        ? THEME_COLOR_KEYS[keyOrVar]
+        : 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 = Object.keys(THEME_COLOR_KEYS), element) {
+    return keys.reduce((acc, key) => {
+        acc[key] = getThemeColor(key, element);
+        return acc;
+    }, {});
+}
 export const srgbToHex = (color) => {
     if (color.startsWith("color(")) {
         const rgbValues = color.match(/([\d.]+)/g);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -77,6 +77,7 @@
   "dependencies": {
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
+    "lucide-react": "^0.460.0",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.0.4",