@rovula/ui 0.1.6 → 0.1.8

package/src/theme/global.css

@@ -1,7 +1,11 @@
-@import "./tokens/baseline.css";
 @import "./themes/variable.css";
-@import "./themes/xspector/baseline.css";
-@import "./themes/skyller/baseline.css";
+@import "./themes/variable-mapping.css";
+@import "./tokens/color.css"; 
+@import "./tokens/baseline.css";
+
+/* TODO: remove this */
+/* @import "./themes/xspector/baseline.css";
+@import "./themes/skyller/baseline.css"; */
 
 @tailwind base;
 @tailwind components;

package/src/theme/presets/colors.js

@@ -7,89 +7,195 @@ 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", "primary-ramps-primary"),
-        ...generateColorConfig("secondary", "secondary-ramps-secondary"),
-        ...generateColorConfig("tertiary", "tertiary-ramps-tertiary"),
-        ...generateColorConfig("grey", "grey-grey"),
-
-        ...generateColorConfig("grey2", "grey2-grey2", secondaryRange),
-        ...generateColorConfig("info", "info-info", secondaryRange),
-        ...generateColorConfig("success", "success-success", secondaryRange),
-        ...generateColorConfig("warning", "warning-warning", secondaryRange),
-        ...generateColorConfig("error", "error-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"),
-
-        "state-disable-solid": withColorMixin("--state-color-disable-solid"),
-        "state-disable-outline": withColorMixin(
-          "--state-color-disable-outline"
-        ),
+        // 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,
+        }),
 
-        "input-default-text": withColorMixin("--input-color-default-text"),
-        "input-default-stroke": withColorMixin("--input-color-default-stroke"),
-        "input-filled-text": withColorMixin("--input-color-filled-text"),
-        "input-active-stroke": withColorMixin("--input-color-active-stroke"),
-        "input-disable-text": withColorMixin("--input-color-disable-text"),
-        "input-disable-stroke": withColorMixin("--input-color-disable-stroke"),
-        "input-disable-bg": withColorMixin("--input-color-disable-bg"),
-        "input-label-bg": withColorMixin("--input-color-label-bg"),
-        "input-error": withColorMixin("--input-color-error"),
+        // 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"),
+
+        "input-default-text": withColorMixin("--input-default-text"),
+        "input-default-stroke": withColorMixin("--input-default-stroke"),
+        "input-filled-text": withColorMixin("--input-filled-text"),
+        "input-active-stroke": withColorMixin("--input-active-stroke"),
+        "input-disable-text": withColorMixin("--input-disable-text"),
+        "input-disable-stroke": withColorMixin("--input-disable-stroke"),
+        "input-disable-bg": withColorMixin("--input-disable-bg"),
+        "input-label-bg": withColorMixin("--input-label-bg"),
+        "input-error": withColorMixin("--input-error"),
 
         "function-default-solid": withColorMixin("--function-default-solid"),
         "function-default-hover": withColorMixin("--function-default-hover"),
         "function-default-hover-bg": withColorMixin(
-          "--function-default-hover-bg"
+          "--function-default-hover-bg",
         ),
         "function-default-stroke": withColorMixin("--function-default-stroke"),
         "function-default-icon": withColorMixin("--function-default-icon"),
-        "function-default-outline": withColorMixin(
-          "--function-default-outline-icon"
+        "function-default-outline-icon": withColorMixin(
+          "--function-default-outline-icon",
         ),
         "function-active-solid": withColorMixin("--function-active-solid"),
         "function-active-hover": withColorMixin("--function-active-hover"),
         "function-active-hover-bg": withColorMixin(
-          "--function-active-hover-bg"
+          "--function-active-hover-bg",
         ),
         "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"),
@@ -97,19 +203,22 @@ module.exports = {
         "base-popup-highlight": withColorMixin("--base-color-popup-highlight"),
         "base-popup-curtain": withColorMixin("--base-color-popup-curtain"),
         "base-popup-foreground": withColorMixin(
-          "--base-color-popup-foreground"
+          "--base-color-popup-foreground",
         ),
         "base-stroke": withColorMixin("--base-color-workspace-stroke"),
         "base-workspace-stroke": withColorMixin(
-          "--base-color-workspace-stroke"
+          "--base-color-workspace-stroke",
         ),
         "base-guideline-stroke": withColorMixin(
-          "--base-color-guideline-stroke"
+          "--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/skyller/baseline.css

@@ -1,6 +1,2 @@
-@import url(palette.css);
-@import url(state.css);
-@import url(color.css);
-@import url(transparent.css);
 @import url(typography.css);
 @import url(components/action-button.css);