@rovula/ui 0.1.7 → 0.1.8

package/src/theme/presets/colors.js

@@ -7,56 +7,111 @@ import {
   generateActionButtonStyles,
 } from "../utils";
 
-const secondaryRange = [
-  "50",
-  "100",
-  "200",
-  "300",
-  "400",
-  "500",
-  "600",
-  "700",
-  "800",
-  "900",
-  "950",
-];
+const secondaryRange = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
 
 module.exports = {
   theme: {
     extend: {
       colors: {
+        // ------------------------------
+        // Canonical design tokens (new)
+        // ------------------------------
+        // Main / brand core
+        "main-primary": withColorMixin("--main-primary"),
+        "main-secondary": withColorMixin("--main-secondary"),
+        "main-tertiary": withColorMixin("--main-tertiary"),
+        "brand-midnight-blue": withColorMixin("--brand-midnight-blue"),
+        "brand-columbia-blue": withColorMixin("--brand-columbia-blue"),
+        "brand-background": withColorMixin("--brand-background"),
+        "brand-lemon-glacier": withColorMixin("--brand-lemon-glacier"),
+        "brand-rvl-yellow": withColorMixin("--brand-rvl-yellow"),
+        "brand-rvl-grey": withColorMixin("--brand-rvl-grey"),
+
+        // Text
         "text-black": withColorMixin("--text-black"),
-        "text-dark": withColorMixin("--text-dark"),
-        "text-medium": withColorMixin("--text-medium"),
-        "text-light": withColorMixin("--text-light"),
-        "text-grey-dark": withColorMixin("--text-grey-dark"),
-        "text-grey-medium": withColorMixin("--text-grey-medium"),
-        "text-grey-light": withColorMixin("--text-grey-light"),
+        "text-contrast-low": withColorMixin("--text-contrast-low"),
+        "text-contrast-medium": withColorMixin("--text-contrast-medium"),
+        "text-contrast-high": withColorMixin("--text-contrast-high"),
+        "text-contrast-max": withColorMixin("--text-contrast-max"),
+        "text-g-contrast-low": withColorMixin("--text-g-contrast-low"),
+        "text-g-contrast-medium": withColorMixin("--text-g-contrast-medium"),
+        "text-g-contrast-high": withColorMixin("--text-g-contrast-high"),
         "text-white": withColorMixin("--text-white"),
 
-        ...generateColorConfig("primary", "ramps-primary"),
-        ...generateColorConfig("secondary", "ramps-secondary"),
-        ...generateColorConfig("tertiary", "ramps-tertiary"),
-        ...generateColorConfig("grey", "ramps-grey"),
-
-        ...generateColorConfig("grey2", "ramps-grey2", secondaryRange), // border-t-grey-transparent-24
-        ...generateColorConfig("info", "ramps-info", secondaryRange),
-        ...generateColorConfig("success", "ramps-success", secondaryRange),
-        ...generateColorConfig("warning", "ramps-warning", secondaryRange),
-        ...generateColorConfig("error", "ramps-error", secondaryRange),
-
-        ...generateTransparentColorConfig("primary", "main"),
-        ...generateTransparentColorConfig("secondary", "main"),
-        ...generateTransparentColorConfig("tertiary", "main"),
-        ...generateTransparentColorConfig("grey", "other"),
-        ...generateTransparentColorConfig("grey2", "other"),
-        ...generateTransparentColorConfig("info", "other"),
-        ...generateTransparentColorConfig("success", "other"),
-        ...generateTransparentColorConfig("warning", "other"),
-        ...generateTransparentColorConfig("error", "other"),
-        ...generateTransparentColorConfig("black", "other"),
-        ...generateTransparentColorConfig("white", "other"),
+        // Palette / state ramps
+        // Ranges: 5 - 150
+        ...generateColorConfig("primary", "ramps-primary", {
+          includeOriginalVarAliases: true,
+        }),
+        ...generateColorConfig("secondary", "ramps-secondary", {
+          includeOriginalVarAliases: true,
+        }),
+        ...generateColorConfig("tertiary", "ramps-tertiary", {
+          includeOriginalVarAliases: true,
+        }),
+        ...generateColorConfig("grey", "ramps-grey", {
+          stateVars: false,
+          includeOriginalVarAliases: true,
+        }),
+
+        // Ranges: 50 - 950
+        ...generateColorConfig("grey2", "ramps-grey2", {
+          range: secondaryRange,
+          stateVars: false,
+          includeOriginalVarAliases: true,
+        }),
+        ...generateColorConfig("info", "ramps-info", {
+          range: secondaryRange,
+          includeOriginalVarAliases: true,
+        }),
+        ...generateColorConfig("success", "ramps-success", {
+          range: secondaryRange,
+          includeOriginalVarAliases: true,
+        }),
+        ...generateColorConfig("warning", "ramps-warning", {
+          range: secondaryRange,
+          includeOriginalVarAliases: true,
+        }),
+        ...generateColorConfig("error", "ramps-error", {
+          range: secondaryRange,
+          includeOriginalVarAliases: true,
+        }),
 
+        ...generateTransparentColorConfig("primary", {
+          includeOriginalVarAliases: true,
+        }),
+        ...generateTransparentColorConfig("secondary", {
+          includeOriginalVarAliases: true,
+        }),
+        ...generateTransparentColorConfig("tertiary", {
+          includeOriginalVarAliases: true,
+        }),
+        ...generateTransparentColorConfig("grey", {
+          includeOriginalVarAliases: true,
+        }),
+        ...generateTransparentColorConfig("grey2", {
+          includeOriginalVarAliases: true,
+        }),
+        ...generateTransparentColorConfig("info", {
+          includeOriginalVarAliases: true,
+        }),
+        ...generateTransparentColorConfig("success", {
+          includeOriginalVarAliases: true,
+        }),
+        ...generateTransparentColorConfig("warning", {
+          includeOriginalVarAliases: true,
+        }),
+        ...generateTransparentColorConfig("error", {
+          includeOriginalVarAliases: true,
+        }),
+        ...generateTransparentColorConfig("black", {
+          includeOriginalVarAliases: true,
+        }),
+        ...generateTransparentColorConfig("white", {
+          includeOriginalVarAliases: true,
+        }),
+
+        // State / input / function
         "state-disable-solid": withColorMixin("--state-disable-solid"),
         "state-disable-outline": withColorMixin("--state-disable-outline"),
 
@@ -77,7 +132,7 @@ module.exports = {
         ),
         "function-default-stroke": withColorMixin("--function-default-stroke"),
         "function-default-icon": withColorMixin("--function-default-icon"),
-        "function-default-outline": withColorMixin(
+        "function-default-outline-icon": withColorMixin(
           "--function-default-outline-icon",
         ),
         "function-active-solid": withColorMixin("--function-active-solid"),
@@ -88,6 +143,59 @@ module.exports = {
         "function-active-stroke": withColorMixin("--function-active-stroke"),
         "function-active-icon": withColorMixin("--function-active-icon"),
 
+        // Surface / background primitives
+        "modal-surface": withColorMixin("--modal-surface"),
+        "modal-highlight": withColorMixin("--modal-highlight"),
+        "modal-overlay": withColorMixin("--modal-overlay"),
+        "modal-line": withColorMixin("--modal-line"),
+        "bg-bg1": withColorMixin("--bg-bg1"),
+        "bg-bg2": withColorMixin("--bg-bg2"),
+        "bg-bg3": withColorMixin("--bg-bg3"),
+        "bg-bg4": withColorMixin("--bg-bg4"),
+        "bg-bg5": withColorMixin("--bg-bg5"),
+        "bg-stroke1": withColorMixin("--bg-stroke1"),
+        "bg-stroke2": withColorMixin("--bg-stroke2"),
+        "bg-stroke3": withColorMixin("--bg-stroke3"),
+        "bg-stroke4": withColorMixin("--bg-stroke4"),
+        "bg-stroke5": withColorMixin("--bg-stroke5"),
+
+        // Common
+        "common-white": withColorMixin("--common-white"),
+        "common-black": withColorMixin("--common-black"),
+
+        // Others (direct export tokens)
+        ...generateColorConfig("others", "others", {
+          count: 35,
+          stateVars: false,
+          foreground: false,
+          includeStatePrefixedAliases: false,
+        }),
+
+        // Page background tokens
+        "page-bg-main": withColorMixin("--page-bg-main"),
+        "page-bg-circle-top-g-in": withColorMixin("--page-bg-circle-top-g-in"),
+        "page-bg-circle-top-g-out": withColorMixin(
+          "--page-bg-circle-top-g-out",
+        ),
+        "page-bg-circle-bottom-g-in": withColorMixin(
+          "--page-bg-circle-bottom-g-in",
+        ),
+        "page-bg-circle-bottom-g-out": withColorMixin(
+          "--page-bg-circle-bottom-g-out",
+        ),
+
+        // --------------------------------
+        // Deprecated aliases (compat only)
+        // --------------------------------
+        // Text aliases (prefer text-contrast-* / text-g-contrast-*)
+        "text-dark": withColorMixin("--text-dark"),
+        "text-medium": withColorMixin("--text-medium"),
+        "text-light": withColorMixin("--text-light"),
+        "text-grey-dark": withColorMixin("--text-grey-dark"),
+        "text-grey-medium": withColorMixin("--text-grey-medium"),
+        "text-grey-light": withColorMixin("--text-grey-light"),
+
+        // Base aliases (prefer modal-*, bg-*, text-contrast-* and state-*-text-solid)
         "base-bg": withColorMixin("--base-color-bg"),
         "base-bg2": withColorMixin("--base-color-bg2"),
         "base-bg3": withColorMixin("--base-color-bg3"),
@@ -105,9 +213,12 @@ module.exports = {
           "--base-color-guideline-stroke",
         ),
 
-        "common-white": withColorMixin("--common-white"),
-        "common-black": withColorMixin("--common-black"),
+        // Function aliases (prefer function-default-outline-icon)
+        "function-default-outline": withColorMixin(
+          "--function-default-outline-icon",
+        ),
 
+        // Semantic aliases (prefer direct design token names)
         surface: withColorMixin("--surface"),
         "surface-foreground": withColorMixin("--surface-foreground"),
         background: withColorMixin("--background"),

package/src/theme/themes/xspector/components/loading.css

@@ -6,6 +6,6 @@
   /* Element: [progress, track]                                         */
   /* ------------------------------------------------------------------ */
 
-  --loading-process-color: var(--primary);
-  --loading-track-color: #9E9E9E7A;
+  --loading-process-color: var(--brand-rvl-yellow);
+  --loading-track-color: var(--transparent-grey-32);
 }

package/src/theme/tokens/color.css

@@ -1,6 +1,6 @@
 
 :root {
-  /* Text aliases mapped to new contrast tokens */
+  /* Deprecated aliases: use --text-contrast-* / --text-g-contrast-* directly */
   --text-dark: var(--text-contrast-low);
   --text-medium: var(--text-contrast-medium);
   --text-light: var(--text-contrast-high);
@@ -8,7 +8,7 @@
   --text-grey-medium: var(--text-g-contrast-medium);
   --text-grey-light: var(--text-g-contrast-high);
 
-  /* Base color aliases mapped to new background tokens */
+  /* Deprecated aliases: use --bg-* / --modal-* directly */
   --base-color-bg: var(--bg-bg1);
   --base-color-bg2: var(--bg-bg2);
   --base-color-bg3: var(--bg-bg3);
@@ -18,7 +18,7 @@
   --base-color-popup-highlight: var(--modal-highlight);
   --base-color-popup-curtain: var(--modal-overlay);
 
-  /* ------- Addon base ---------- */
+  /* Deprecated semantic aliases */
   --background: var(--base-color-bg);
   --foreground: var(--common-black);
 

package/src/theme/tokens/components/action-button.css

@@ -83,7 +83,7 @@
 
   /* Disabled State */
   --action-button-outline-disabled-bg: transparent;
-  --action-button-outline-disabled-border: var(--state-disable-outline);
+  --action-button-outline-disabled-border: var(--state-disable-solid);
   --action-button-outline-disabled-text: var(--state-disable-outline);
 
   /* ------------------------------------------------------------------ */

package/src/theme/tokens/components/dropdown-menu.css

@@ -11,15 +11,15 @@
 
   /* Default State */
   --dropdown-menu-default-bg: transparent;
-  --dropdown-menu-default-text: inherit;
+  --dropdown-menu-default-text: var(--text-g-contrast-high);
 
   /* Hover State */
   --dropdown-menu-hover-bg: var(--state-primary-hover-bg);
-  --dropdown-menu-hover-text: inherit;
+  --dropdown-menu-hover-text: var(--text-g-contrast-high);
 
   /* Selected State */
   --dropdown-menu-selected-bg: transparent;
-  --dropdown-menu-selected-text: inherit;
+  --dropdown-menu-selected-text: var(--text-g-contrast-high);
 
   /* Disabled State */
   --dropdown-menu-disabled-bg: transparent;

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

@@ -6,6 +6,6 @@
   /* Element: [progress, track]                                         */
   /* ------------------------------------------------------------------ */
 
-  --loading-process-color: var(--secondary);
-  --loading-track-color: #9E9E9E7A;
+  --loading-process-color: var(--brand-rvl-yellow);
+  --loading-track-color: var(--transparent-grey-32);
 }

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

@@ -9,7 +9,7 @@
   /* Default State */
   --switch-default-color: rgb(from var(--ramps-grey-100, #9e9e9e) r g b / 0.32);
   --switch-thumb-default-color: var(--ramps-grey-100, #9e9e9e);
-  --switch-thumb-filter: drop-shadow(0 2px 8px rgba(145, 158, 171, 0.24));
+  --switch-thumb-filter: drop-shadow(0 8px 16px #00000014);
 
   /* Hover State */
   --switch-hover-color: rgb(from var(--ramps-grey-80, #b1b1b1) r g b / 0.48);

package/src/theme/utils.js

@@ -1,37 +1,98 @@
+const DEFAULT_COLOR_RANGE = [
+  5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150,
+];
+const DEFAULT_TRANSPARENT_RANGE = [8, 12, 16, 24, 32, 48];
+
+/**
+ * Create Tailwind-compatible alpha color from a CSS variable.
+ *
+ * @param {string} variable CSS variable name including `--` prefix.
+ * @returns {string} `color-mix(...)` expression that Tailwind can inject alpha into.
+ *
+ * @example
+ * withColorMixin("--main-primary");
+ * // => "color-mix(in srgb, var(--main-primary) calc(100% * <alpha-value>), transparent)"
+ */
 export const withColorMixin = (variable) =>
   `color-mix(in srgb, var(${variable}) calc(100% * <alpha-value>), transparent)`;
 
+/**
+ * Generate palette/state color aliases for Tailwind `theme.extend.colors`.
+ *
+ * @param {string} baseName Base key used for generated token names (e.g. `primary`).
+ * @param {string} variablePrefix Prefix for ramp variables (e.g. `ramps-primary`).
+ * @param {{
+ *   range?: Array<number | string>,
+ *   count?: number,
+ *   stateVars?: boolean,
+ *   foreground?: boolean,
+ *   includeStatePrefixedAliases?: boolean,
+ *   includeOriginalVarAliases?: boolean
+ * }} [options]
+ * @returns {Record<string, string>} Map of token -> `color-mix(...)` CSS values.
+ *
+ * @example
+ * generateColorConfig("primary", "ramps-primary", { range: [50, 100] });
+ * // => {
+ * //   "primary-50": "color-mix(...var(--ramps-primary-50)... )",
+ * //   "primary-100": "color-mix(...var(--ramps-primary-100)... )",
+ * //   "primary-foreground": "color-mix(...var(--primary-foreground)... )",
+ * //   "primary": "color-mix(...var(--state-primary-default)... )",
+ * //   ...state aliases
+ * // }
+ *
+ * @example
+ * generateColorConfig("others", "others", {
+ *   count: 3,
+ *   stateVars: false,
+ *   foreground: false,
+ * });
+ * // => { "others-1": "color-mix(...)", "others-2": "color-mix(...)", "others-3": "color-mix(...)" }
+ */
 export const generateColorConfig = (
   baseName,
   variablePrefix,
-  range = [5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150],
+  {
+    range,
+    count,
+    stateVars = true,
+    foreground = true,
+    includeStatePrefixedAliases = true,
+    includeOriginalVarAliases = false,
+  } = {},
 ) => {
+  const resolvedRange = Number.isInteger(count)
+    ? Array.from({ length: count }, (_, i) => i + 1)
+    : range ?? DEFAULT_COLOR_RANGE;
+
   const colors = {};
 
-  range.forEach((num) => {
+  resolvedRange.forEach((num) => {
     colors[`${baseName}-${num}`] = withColorMixin(`--${variablePrefix}-${num}`);
+    if (includeOriginalVarAliases) {
+      colors[`${variablePrefix}-${num}`] = withColorMixin(
+        `--${variablePrefix}-${num}`,
+      );
+    }
   });
 
-  colors[`${baseName}-foreground`] = withColorMixin(`--${baseName}-foreground`);
-  colors[`${baseName}`] = withColorMixin(`--state-${baseName}-default`); // TODO should be dynamic
-  colors[`${baseName}-default`] = withColorMixin(
-    `--state-${baseName}-default`,
-  );
-  colors[`${baseName}-hover`] = withColorMixin(
-    `--state-${baseName}-hover`,
-  );
-  colors[`${baseName}-stroke`] = withColorMixin(
-    `--state-${baseName}-stroke`,
-  );
+  if (foreground) {
+    colors[`${baseName}-foreground`] = withColorMixin(
+      `--${baseName}-foreground`,
+    );
+  }
+
+  if (!stateVars) return colors;
+
+  colors[`${baseName}`] = withColorMixin(`--state-${baseName}-default`);
+  colors[`${baseName}-default`] = withColorMixin(`--state-${baseName}-default`);
+  colors[`${baseName}-hover`] = withColorMixin(`--state-${baseName}-hover`);
+  colors[`${baseName}-stroke`] = withColorMixin(`--state-${baseName}-stroke`);
   colors[`${baseName}-hover-bg`] = withColorMixin(
     `--state-${baseName}-hover-bg`,
   );
-  colors[`${baseName}-pressed`] = withColorMixin(
-    `--state-${baseName}-pressed`,
-  );
-  colors[`${baseName}-active`] = withColorMixin(
-    `--state-${baseName}-active`,
-  );
+  colors[`${baseName}-pressed`] = withColorMixin(`--state-${baseName}-pressed`);
+  colors[`${baseName}-active`] = withColorMixin(`--state-${baseName}-active`);
 
   // text
   colors[`${baseName}-text-solid`] = withColorMixin(
@@ -40,13 +101,61 @@ export const generateColorConfig = (
   colors[`${baseName}-text-outline`] = withColorMixin(
     `--state-${baseName}-text-outline`,
   );
+  colors[`${baseName}-text-hover`] = withColorMixin(
+    `--state-${baseName}-text-hover`,
+  );
   colors[`${baseName}-text-pressed`] = withColorMixin(
     `--state-${baseName}-text-pressed`,
   );
 
+  if (includeStatePrefixedAliases) {
+    colors[`state-${baseName}-default`] = withColorMixin(
+      `--state-${baseName}-default`,
+    );
+    colors[`state-${baseName}-hover`] = withColorMixin(
+      `--state-${baseName}-hover`,
+    );
+    colors[`state-${baseName}-stroke`] = withColorMixin(
+      `--state-${baseName}-stroke`,
+    );
+    colors[`state-${baseName}-hover-bg`] = withColorMixin(
+      `--state-${baseName}-hover-bg`,
+    );
+    colors[`state-${baseName}-pressed`] = withColorMixin(
+      `--state-${baseName}-pressed`,
+    );
+    colors[`state-${baseName}-active`] = withColorMixin(
+      `--state-${baseName}-active`,
+    );
+
+    // Text
+    colors[`state-${baseName}-text-solid`] = withColorMixin(
+      `--state-${baseName}-text-solid`,
+    );
+    colors[`state-${baseName}-text-outline`] = withColorMixin(
+      `--state-${baseName}-text-outline`,
+    );
+    colors[`state-${baseName}-text-hover`] = withColorMixin(
+      `--state-${baseName}-text-hover`,
+    );
+    colors[`state-${baseName}-text-pressed`] = withColorMixin(
+      `--state-${baseName}-text-pressed`,
+    );
+  }
+
   return colors;
 };
 
+/**
+ * Generate button semantic aliases by style `type` (`bg`, `text`, `border`).
+ *
+ * @param {"bg" | "text" | "border"} type Token type suffix.
+ * @returns {Record<string, string>} Map like `button-primary-solid-default`.
+ *
+ * @example
+ * generateButtonStyles("bg");
+ * // => { "button-primary-solid-default": "color-mix(...)", ... }
+ */
 export function generateButtonStyles(type) {
   const themes = [
     "primary",
@@ -72,7 +181,16 @@ export function generateButtonStyles(type) {
   }, {});
 }
 
-// action-button-solid-hover
+/**
+ * Generate action-button semantic aliases by style `type` (`bg`, `text`, `border`).
+ *
+ * @param {"bg" | "text" | "border"} type Token type suffix.
+ * @returns {Record<string, string>} Map like `action-button-solid-default`.
+ *
+ * @example
+ * generateActionButtonStyles("text");
+ * // => { "action-button-solid-default": "color-mix(...)", ... }
+ */
 export function generateActionButtonStyles(type) {
   const modes = ["solid", "outline", "icon"];
 
@@ -93,16 +211,37 @@ export function generateActionButtonStyles(type) {
   }, {});
 }
 
-// bg-primary-transparent-8
-export const generateTransparentColorConfig = (baseName, _type) => {
+/**
+ * Generate transparent color aliases for a base color family.
+ *
+ * @param {string} baseName Base key such as `primary` or `warning`.
+ * @param {{ includeOriginalVarAliases?: boolean }} [options]
+ * @returns {Record<string, string>} Map like `primary-transparent-8`.
+ *
+ * @example
+ * generateTransparentColorConfig("primary");
+ * // => {
+ * //   "primary-transparent-8": "color-mix(...var(--transparent-primary-8)... )",
+ * //   "primary-transparent-12": "color-mix(...var(--transparent-primary-12)... )",
+ * //   ...
+ * // }
+ */
+export const generateTransparentColorConfig = (
+  baseName,
+  { includeOriginalVarAliases = false } = {},
+) => {
   const colors = {};
 
-  const range = [8, 12, 16, 24, 32, 48];
-
-  range.forEach((num) => {
+  DEFAULT_TRANSPARENT_RANGE.forEach((num) => {
     colors[`${baseName}-transparent-${num}`] = withColorMixin(
       `--transparent-${baseName}-${num}`,
     );
+
+    if (includeOriginalVarAliases) {
+      colors[`transparent-${baseName}-${num}`] = withColorMixin(
+        `--transparent-${baseName}-${num}`,
+      );
+    }
   });
 
   return colors;