@rovula/ui 0.1.5 → 0.1.7

package/dist/utils/colors.js

@@ -1,210 +1,210 @@
 /** 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",
+    "primary-5": "--ramps-primary-5",
+    "primary-10": "--ramps-primary-10",
+    "primary-20": "--ramps-primary-20",
+    "primary-30": "--ramps-primary-30",
+    "primary-40": "--ramps-primary-40",
+    "primary-50": "--ramps-primary-50",
+    "primary-60": "--ramps-primary-60",
+    "primary-70": "--ramps-primary-70",
+    "primary-80": "--ramps-primary-80",
+    "primary-90": "--ramps-primary-90",
+    "primary-100": "--ramps-primary-100",
+    "primary-110": "--ramps-primary-110",
+    "primary-120": "--ramps-primary-120",
+    "primary-130": "--ramps-primary-130",
+    "primary-140": "--ramps-primary-140",
+    "primary-150": "--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",
+    "secondary-5": "--ramps-secondary-5",
+    "secondary-10": "--ramps-secondary-10",
+    "secondary-20": "--ramps-secondary-20",
+    "secondary-30": "--ramps-secondary-30",
+    "secondary-40": "--ramps-secondary-40",
+    "secondary-50": "--ramps-secondary-50",
+    "secondary-60": "--ramps-secondary-60",
+    "secondary-70": "--ramps-secondary-70",
+    "secondary-80": "--ramps-secondary-80",
+    "secondary-90": "--ramps-secondary-90",
+    "secondary-100": "--ramps-secondary-100",
+    "secondary-110": "--ramps-secondary-110",
+    "secondary-120": "--ramps-secondary-120",
+    "secondary-130": "--ramps-secondary-130",
+    "secondary-140": "--ramps-secondary-140",
+    "secondary-150": "--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",
+    "tertiary-5": "--ramps-tertiary-5",
+    "tertiary-10": "--ramps-tertiary-10",
+    "tertiary-20": "--ramps-tertiary-20",
+    "tertiary-30": "--ramps-tertiary-30",
+    "tertiary-40": "--ramps-tertiary-40",
+    "tertiary-50": "--ramps-tertiary-50",
+    "tertiary-60": "--ramps-tertiary-60",
+    "tertiary-70": "--ramps-tertiary-70",
+    "tertiary-80": "--ramps-tertiary-80",
+    "tertiary-90": "--ramps-tertiary-90",
+    "tertiary-100": "--ramps-tertiary-100",
+    "tertiary-110": "--ramps-tertiary-110",
+    "tertiary-120": "--ramps-tertiary-120",
+    "tertiary-130": "--ramps-tertiary-130",
+    "tertiary-140": "--ramps-tertiary-140",
+    "tertiary-150": "--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",
+    "grey-5": "--ramps-grey-5",
+    "grey-10": "--ramps-grey-10",
+    "grey-20": "--ramps-grey-20",
+    "grey-30": "--ramps-grey-30",
+    "grey-40": "--ramps-grey-40",
+    "grey-50": "--ramps-grey-50",
+    "grey-60": "--ramps-grey-60",
+    "grey-70": "--ramps-grey-70",
+    "grey-80": "--ramps-grey-80",
+    "grey-90": "--ramps-grey-90",
+    "grey-100": "--ramps-grey-100",
+    "grey-110": "--ramps-grey-110",
+    "grey-120": "--ramps-grey-120",
+    "grey-130": "--ramps-grey-130",
+    "grey-140": "--ramps-grey-140",
+    "grey-150": "--ramps-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",
+    "grey2-50": "--ramps-grey2-50",
+    "grey2-100": "--ramps-grey2-100",
+    "grey2-200": "--ramps-grey2-200",
+    "grey2-300": "--ramps-grey2-300",
+    "grey2-400": "--ramps-grey2-400",
+    "grey2-500": "--ramps-grey2-500",
+    "grey2-600": "--ramps-grey2-600",
+    "grey2-700": "--ramps-grey2-700",
+    "grey2-800": "--ramps-grey2-800",
+    "grey2-900": "--ramps-grey2-900",
+    "grey2-950": "--ramps-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",
+    "info-50": "--ramps-info-50",
+    "info-100": "--ramps-info-100",
+    "info-200": "--ramps-info-200",
+    "info-300": "--ramps-info-300",
+    "info-400": "--ramps-info-400",
+    "info-500": "--ramps-info-500",
+    "info-600": "--ramps-info-600",
+    "info-700": "--ramps-info-700",
+    "info-800": "--ramps-info-800",
+    "info-900": "--ramps-info-900",
+    "info-950": "--ramps-info-950",
+    "success-50": "--ramps-success-50",
+    "success-100": "--ramps-success-100",
+    "success-200": "--ramps-success-200",
+    "success-300": "--ramps-success-300",
+    "success-400": "--ramps-success-400",
+    "success-500": "--ramps-success-500",
+    "success-600": "--ramps-success-600",
+    "success-700": "--ramps-success-700",
+    "success-800": "--ramps-success-800",
+    "success-900": "--ramps-success-900",
+    "success-950": "--ramps-success-950",
+    "warning-50": "--ramps-warning-50",
+    "warning-100": "--ramps-warning-100",
+    "warning-200": "--ramps-warning-200",
+    "warning-300": "--ramps-warning-300",
+    "warning-400": "--ramps-warning-400",
+    "warning-500": "--ramps-warning-500",
+    "warning-600": "--ramps-warning-600",
+    "warning-700": "--ramps-warning-700",
+    "warning-800": "--ramps-warning-800",
+    "warning-900": "--ramps-warning-900",
+    "warning-950": "--ramps-warning-950",
+    "error-50": "--ramps-error-50",
+    "error-100": "--ramps-error-100",
+    "error-200": "--ramps-error-200",
+    "error-300": "--ramps-error-300",
+    "error-400": "--ramps-error-400",
+    "error-500": "--ramps-error-500",
+    "error-600": "--ramps-error-600",
+    "error-700": "--ramps-error-700",
+    "error-800": "--ramps-error-800",
+    "error-900": "--ramps-error-900",
+    "error-950": "--ramps-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",
+    primary: "--state-primary-default",
+    "primary-hover": "--state-primary-hover",
+    "primary-stroke": "--state-primary-stroke",
+    "primary-hover-bg": "--state-primary-hover-bg",
+    "primary-pressed": "--state-primary-pressed",
+    "primary-active": "--state-primary-active",
+    "primary-text-solid": "--state-primary-text-solid",
+    "primary-text-outline": "--state-primary-text-outline",
+    "primary-text-hover": "--state-primary-text-hover",
+    "primary-text-pressed": "--state-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",
+    secondary: "--state-secondary-default",
+    "secondary-hover": "--state-secondary-hover",
+    "secondary-stroke": "--state-secondary-stroke",
+    "secondary-hover-bg": "--state-secondary-hover-bg",
+    "secondary-pressed": "--state-secondary-pressed",
+    "secondary-active": "--state-secondary-active",
+    "secondary-text-solid": "--state-secondary-text-solid",
+    "secondary-text-outline": "--state-secondary-text-outline",
+    "secondary-text-hover": "--state-secondary-text-hover",
+    "secondary-text-pressed": "--state-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",
+    tertiary: "--state-tertiary-default",
+    "tertiary-hover": "--state-tertiary-hover",
+    "tertiary-stroke": "--state-tertiary-stroke",
+    "tertiary-hover-bg": "--state-tertiary-hover-bg",
+    "tertiary-pressed": "--state-tertiary-pressed",
+    "tertiary-active": "--state-tertiary-active",
+    "tertiary-text-solid": "--state-tertiary-text-solid",
+    "tertiary-text-outline": "--state-tertiary-text-outline",
+    "tertiary-text-hover": "--state-tertiary-text-hover",
+    "tertiary-text-pressed": "--state-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",
+    info: "--state-info-default",
+    "info-hover": "--state-info-hover",
+    "info-stroke": "--state-info-stroke",
+    "info-hover-bg": "--state-info-hover-bg",
+    "info-pressed": "--state-info-pressed",
+    "info-active": "--state-info-active",
+    "info-text-solid": "--state-info-text-solid",
+    "info-text-outline": "--state-info-text-outline",
+    "info-text-hover": "--state-info-text-hover",
+    "info-text-pressed": "--state-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",
+    success: "--state-success-default",
+    "success-hover": "--state-success-hover",
+    "success-stroke": "--state-success-stroke",
+    "success-hover-bg": "--state-success-hover-bg",
+    "success-pressed": "--state-success-pressed",
+    "success-active": "--state-success-active",
+    "success-text-solid": "--state-success-text-solid",
+    "success-text-outline": "--state-success-text-outline",
+    "success-text-hover": "--state-success-text-hover",
+    "success-text-pressed": "--state-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",
+    warning: "--state-warning-default",
+    "warning-hover": "--state-warning-hover",
+    "warning-stroke": "--state-warning-stroke",
+    "warning-hover-bg": "--state-warning-hover-bg",
+    "warning-pressed": "--state-warning-pressed",
+    "warning-active": "--state-warning-active",
+    "warning-text-solid": "--state-warning-text-solid",
+    "warning-text-outline": "--state-warning-text-outline",
+    "warning-text-hover": "--state-warning-text-hover",
+    "warning-text-pressed": "--state-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",
+    error: "--state-error-default",
+    "error-hover": "--state-error-hover",
+    "error-stroke": "--state-error-stroke",
+    "error-hover-bg": "--state-error-hover-bg",
+    "error-pressed": "--state-error-pressed",
+    "error-active": "--state-error-active",
+    "error-text-solid": "--state-error-text-solid",
+    "error-text-outline": "--state-error-text-outline",
+    "error-text-hover": "--state-error-text-hover",
+    "error-text-pressed": "--state-error-text-pressed",
     /* ----- State: Disable ----- */
-    "disable-solid": "--state-color-disable-solid",
-    "disable-outline": "--state-color-disable-outline",
+    "disable-solid": "--state-disable-solid",
+    "disable-outline": "--state-disable-outline",
     /* ----- Text ----- */
     "text-black": "--text-black",
     "text-dark": "--text-dark",
@@ -215,15 +215,15 @@ export const THEME_COLOR_KEYS = {
     "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",
+    "input-default-text": "--input-default-text",
+    "input-default-stroke": "--input-default-stroke",
+    "input-filled-text": "--input-filled-text",
+    "input-active-stroke": "--input-active-stroke",
+    "input-disable-text": "--input-disable-text",
+    "input-disable-stroke": "--input-disable-stroke",
+    "input-disable-bg": "--input-disable-bg",
+    "input-label-bg": "--input-label-bg",
+    "input-error": "--input-error",
     /* ----- Function button ----- */
     "function-default-solid": "--function-default-solid",
     "function-default-hover": "--function-default-hover",
@@ -243,7 +243,7 @@ export const THEME_COLOR_KEYS = {
     "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-highlight": "--base-color-popup-highlight",
     "base-popup-curtain": "--base-color-popup-curtain",
     "base-popup-foreground": "--base-color-popup-foreground",
     /* ----- Common ----- */
@@ -264,76 +264,76 @@ export const THEME_COLOR_KEYS = {
     "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",
+    "primary-transparent-8": "--transparent-primary-8",
+    "primary-transparent-12": "--transparent-primary-12",
+    "primary-transparent-16": "--transparent-primary-16",
+    "primary-transparent-24": "--transparent-primary-24",
+    "primary-transparent-32": "--transparent-primary-32",
+    "primary-transparent-48": "--transparent-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",
+    "secondary-transparent-8": "--transparent-secondary-8",
+    "secondary-transparent-12": "--transparent-secondary-12",
+    "secondary-transparent-16": "--transparent-secondary-16",
+    "secondary-transparent-24": "--transparent-secondary-24",
+    "secondary-transparent-32": "--transparent-secondary-32",
+    "secondary-transparent-48": "--transparent-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",
+    "tertiary-transparent-8": "--transparent-tertiary-8",
+    "tertiary-transparent-12": "--transparent-tertiary-12",
+    "tertiary-transparent-16": "--transparent-tertiary-16",
+    "tertiary-transparent-24": "--transparent-tertiary-24",
+    "tertiary-transparent-32": "--transparent-tertiary-32",
+    "tertiary-transparent-48": "--transparent-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",
+    "info-transparent-8": "--transparent-info-8",
+    "info-transparent-12": "--transparent-info-12",
+    "info-transparent-16": "--transparent-info-16",
+    "info-transparent-24": "--transparent-info-24",
+    "info-transparent-32": "--transparent-info-32",
+    "info-transparent-48": "--transparent-info-48",
+    "success-transparent-8": "--transparent-success-8",
+    "success-transparent-12": "--transparent-success-12",
+    "success-transparent-16": "--transparent-success-16",
+    "success-transparent-24": "--transparent-success-24",
+    "success-transparent-32": "--transparent-success-32",
+    "success-transparent-48": "--transparent-success-48",
+    "warning-transparent-8": "--transparent-warning-8",
+    "warning-transparent-12": "--transparent-warning-12",
+    "warning-transparent-16": "--transparent-warning-16",
+    "warning-transparent-24": "--transparent-warning-24",
+    "warning-transparent-32": "--transparent-warning-32",
+    "warning-transparent-48": "--transparent-warning-48",
+    "error-transparent-8": "--transparent-error-8",
+    "error-transparent-12": "--transparent-error-12",
+    "error-transparent-16": "--transparent-error-16",
+    "error-transparent-24": "--transparent-error-24",
+    "error-transparent-32": "--transparent-error-32",
+    "error-transparent-48": "--transparent-error-48",
+    "grey-transparent-8": "--transparent-grey-8",
+    "grey-transparent-12": "--transparent-grey-12",
+    "grey-transparent-16": "--transparent-grey-16",
+    "grey-transparent-24": "--transparent-grey-24",
+    "grey-transparent-32": "--transparent-grey-32",
+    "grey-transparent-48": "--transparent-grey-48",
+    "grey2-transparent-8": "--transparent-grey2-8",
+    "grey2-transparent-12": "--transparent-grey2-12",
+    "grey2-transparent-16": "--transparent-grey2-16",
+    "grey2-transparent-24": "--transparent-grey2-24",
+    "grey2-transparent-32": "--transparent-grey2-32",
+    "grey2-transparent-48": "--transparent-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",
+    "white-transparent-8": "--transparent-white-8",
+    "white-transparent-12": "--transparent-white-12",
+    "white-transparent-16": "--transparent-white-16",
+    "white-transparent-24": "--transparent-white-24",
+    "white-transparent-32": "--transparent-white-32",
+    "white-transparent-48": "--transparent-white-48",
+    "black-transparent-8": "--transparent-black-8",
+    "black-transparent-12": "--transparent-black-12",
+    "black-transparent-16": "--transparent-black-16",
+    "black-transparent-24": "--transparent-black-24",
+    "black-transparent-32": "--transparent-black-32",
+    "black-transparent-48": "--transparent-black-48",
 };
 /**
  * Get computed color value from a CSS variable (respects current theme).
@@ -341,7 +341,7 @@ export const THEME_COLOR_KEYS = {
  *
  * @example
  * const primary = getThemeColor('primary');
- * const hex = getThemeColor('--primary-ramps-primary-100');
+ * const hex = getThemeColor('--ramps-primary-100');
  */
 export function getThemeColor(keyOrVar, element = document) {
     if (typeof window === "undefined")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Avatar/Avatar.styles.ts

@@ -2,12 +2,12 @@ import { cva } from "class-variance-authority";
 
 export const avatarVariants = cva(
   [
-    "flex items-center justify-center bg-grey2-700 text-foreground typography-subtitile2 truncate",
+    "flex items-center justify-center bg-grey2-700 text-foreground typography-subtitle2 truncate",
   ],
   {
     variants: {
       size: {
-        xxs: "w-[24px] h-[24px] typography-subtitile3",
+        xxs: "w-[24px] h-[24px] typography-subtitle3",
         xs: "w-[32px] h-[32px]",
         sm: "w-[40px] h-[40px]",
         md: "w-[48px] h-[48px]",