@rovula/ui 0.1.6 → 0.1.8

package/src/utils/colors.ts

@@ -1,212 +1,228 @@
 /** CSS variable names for theme colors (resolved by data-theme) */
 export const THEME_COLOR_KEYS = {
+  /* ----- Main / Brand core ----- */
+  "main-primary": "--main-primary",
+  "main-secondary": "--main-secondary",
+  "main-tertiary": "--main-tertiary",
+  "brand-midnight-blue": "--brand-midnight-blue",
+  "brand-columbia-blue": "--brand-columbia-blue",
+  "brand-background": "--brand-background",
+  "brand-lemon-glacier": "--brand-lemon-glacier",
   /* ----- 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-contrast-low": "--text-contrast-low",
+  "text-contrast-medium": "--text-contrast-medium",
+  "text-contrast-high": "--text-contrast-high",
+  "text-contrast-max": "--text-contrast-max",
+  "text-g-contrast-low": "--text-g-contrast-low",
+  "text-g-contrast-medium": "--text-g-contrast-medium",
+  "text-g-contrast-high": "--text-g-contrast-high",
+  /* ----- Deprecated text aliases ----- */
   "text-dark": "--text-dark",
   "text-medium": "--text-medium",
   "text-light": "--text-light",
@@ -215,15 +231,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",
@@ -236,7 +252,31 @@ export const THEME_COLOR_KEYS = {
   "function-active-hover-bg": "--function-active-hover-bg",
   "function-active-stroke": "--function-active-stroke",
   "function-active-icon": "--function-active-icon",
+  /* ----- Direct modal/background tokens ----- */
+  "modal-surface": "--modal-surface",
+  "modal-highlight": "--modal-highlight",
+  "modal-overlay": "--modal-overlay",
+  "bg-bg1": "--bg-bg1",
+  "bg-bg2": "--bg-bg2",
+  "bg-bg3": "--bg-bg3",
+  "bg-stroke1": "--bg-stroke1",
+  "bg-stroke2": "--bg-stroke2",
+  "state-primary-text-solid": "--state-primary-text-solid",
+  "state-primary-text-hover": "--state-primary-text-hover",
+  "state-secondary-text-solid": "--state-secondary-text-solid",
+  "state-secondary-text-hover": "--state-secondary-text-hover",
+  "state-tertiary-text-solid": "--state-tertiary-text-solid",
+  "state-tertiary-text-hover": "--state-tertiary-text-hover",
+  "state-info-text-solid": "--state-info-text-solid",
+  "state-info-text-hover": "--state-info-text-hover",
+  "state-success-text-solid": "--state-success-text-solid",
+  "state-success-text-hover": "--state-success-text-hover",
+  "state-warning-text-solid": "--state-warning-text-solid",
+  "state-warning-text-hover": "--state-warning-text-hover",
+  "state-error-text-solid": "--state-error-text-solid",
+  "state-error-text-hover": "--state-error-text-hover",
   /* ----- Base ----- */
+  /* ----- Deprecated base aliases ----- */
   "base-bg": "--base-color-bg",
   "base-bg2": "--base-color-bg2",
   "base-bg3": "--base-color-bg3",
@@ -249,7 +289,59 @@ export const THEME_COLOR_KEYS = {
   /* ----- Common ----- */
   "common-white": "--common-white",
   "common-black": "--common-black",
+  "brand-rvl-yellow": "--brand-rvl-yellow",
+  "brand-rvl-grey": "--brand-rvl-grey",
+  /* ----- Others ----- */
+  "others-1": "--others-1",
+  "others-2": "--others-2",
+  "others-3": "--others-3",
+  "others-4": "--others-4",
+  "others-5": "--others-5",
+  "others-6": "--others-6",
+  "others-7": "--others-7",
+  "others-8": "--others-8",
+  "others-9": "--others-9",
+  "others-10": "--others-10",
+  "others-11": "--others-11",
+  "others-12": "--others-12",
+  "others-13": "--others-13",
+  "others-14": "--others-14",
+  "others-15": "--others-15",
+  "others-16": "--others-16",
+  "others-17": "--others-17",
+  "others-18": "--others-18",
+  "others-19": "--others-19",
+  "others-20": "--others-20",
+  "others-21": "--others-21",
+  "others-22": "--others-22",
+  "others-23": "--others-23",
+  "others-24": "--others-24",
+  "others-25": "--others-25",
+  "others-26": "--others-26",
+  "others-27": "--others-27",
+  "others-28": "--others-28",
+  "others-29": "--others-29",
+  "others-30": "--others-30",
+  "others-31": "--others-31",
+  "others-32": "--others-32",
+  "others-33": "--others-33",
+  "others-34": "--others-34",
+  "others-35": "--others-35",
+  /* ----- Page background ----- */
+  "page-bg-main": "--page-bg-main",
+  "page-bg-circle-top-g-in": "--page-bg-circle-top-g-in",
+  "page-bg-circle-top-g-out": "--page-bg-circle-top-g-out",
+  "page-bg-circle-bottom-g-in": "--page-bg-circle-bottom-g-in",
+  "page-bg-circle-bottom-g-out": "--page-bg-circle-bottom-g-out",
+  /* ----- Extra surface/background ----- */
+  "modal-line": "--modal-line",
+  "bg-bg4": "--bg-bg4",
+  "bg-bg5": "--bg-bg5",
+  "bg-stroke3": "--bg-stroke3",
+  "bg-stroke4": "--bg-stroke4",
+  "bg-stroke5": "--bg-stroke5",
   /* ----- Semantic ----- */
+  /* ----- Deprecated semantic aliases ----- */
   background: "--background",
   foreground: "--foreground",
   surface: "--surface",
@@ -264,76 +356,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",
 } as const;
 
 export type ThemeColorKey = keyof typeof THEME_COLOR_KEYS;
@@ -344,11 +436,11 @@ export type ThemeColorKey = keyof typeof 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: ThemeColorKey | string,
-  element: HTMLElement | Document = document
+  element: HTMLElement | Document = document,
 ): string {
   if (typeof window === "undefined") return "";
   const root = element instanceof Document ? element.documentElement : element;
@@ -356,8 +448,8 @@ export function getThemeColor(
     keyOrVar in THEME_COLOR_KEYS
       ? THEME_COLOR_KEYS[keyOrVar as ThemeColorKey]
       : keyOrVar.startsWith("--")
-        ? keyOrVar
-        : `--${keyOrVar}`;
+      ? keyOrVar
+      : `--${keyOrVar}`;
   return getComputedStyle(root).getPropertyValue(varName).trim();
 }
 
@@ -370,15 +462,12 @@ export function getThemeColor(
  */
 export function getThemeColors(
   keys: ThemeColorKey[] = Object.keys(THEME_COLOR_KEYS) as ThemeColorKey[],
-  element?: HTMLElement | Document
+  element?: HTMLElement | Document,
 ): Record<string, string> {
-  return keys.reduce(
-    (acc, key) => {
-      acc[key] = getThemeColor(key, element);
-      return acc;
-    },
-    {} as Record<string, string>
-  );
+  return keys.reduce((acc, key) => {
+    acc[key] = getThemeColor(key, element);
+    return acc;
+  }, {} as Record<string, string>);
 }
 
 export const srgbToHex = (color: string) => {