@rovula/ui 0.1.6 → 0.1.7

package/src/components/Button/Buttons.stories.tsx

@@ -189,7 +189,13 @@ export const ShapePreview = {
 } satisfies Story;
 
 const previewColors: Array<
-  "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error"
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "info"
+  | "success"
+  | "warning"
+  | "error"
 > = ["primary", "secondary", "tertiary", "info", "success", "warning", "error"];
 const previewSizes: Array<"lg" | "md" | "sm"> = ["lg", "md", "sm"];
 const previewSizeLabel: Record<(typeof previewSizes)[number], string> = {
@@ -197,12 +203,14 @@ const previewSizeLabel: Record<(typeof previewSizes)[number], string> = {
   md: "Medium",
   sm: "Small",
 };
-const previewStyles: Array<{ label: string; variant: "solid" | "outline" | "text"; }> =
-  [
-    { label: "Solid", variant: "solid" },
-    { label: "Outline", variant: "outline" },
-    { label: "Text", variant: "text" },
-  ];
+const previewStyles: Array<{
+  label: string;
+  variant: "solid" | "outline" | "text";
+}> = [
+  { label: "Solid", variant: "solid" },
+  { label: "Outline", variant: "outline" },
+  { label: "Text", variant: "text" },
+];
 
 const icon = <ArrowsUpDownIcon />;
 const previewStates = [

package/src/components/Switch/Switch.styles.ts

@@ -26,7 +26,7 @@ export const switchThumbVariants = cva(
     "relative isolate block size-4 rounded-full [filter:var(--switch-thumb-filter)] transition-[transform,background-color,color,filter]",
     "data-[state=unchecked]:bg-[var(--switch-thumb-default-color)] data-[state=unchecked]:translate-x-0",
     "data-[state=checked]:bg-[var(--switch-thumb-active-color)] data-[state=checked]:translate-x-4",
-    "data-[state=unchecked]:text-[var(--state-color-tertiary-hover-bg)] data-[state=checked]:text-[var(--state-color-primary-hover-bg)]",
+    "data-[state=unchecked]:text-[var(--state-tertiary-hover-bg)] data-[state=checked]:text-[var(--state-primary-hover-bg)]",
     "group-hover:[&_.switch-thumb-halo]:opacity-100 group-hover:data-[state=checked]:bg-[var(--switch-thumb-active-hover-color)] group-hover:data-[state=unchecked]:bg-[var(--switch-thumb-hover-color)]",
     "group-disabled:!bg-[var(--switch-thumb-disabled-color)] group-disabled:[&_.switch-thumb-halo]:opacity-0",
   ],

package/src/theme/THEME_MAPPING.md

@@ -9,10 +9,10 @@
 | แหล่ง | Pattern | ตัวอย่าง |
 |------|---------|----------|
 | **Tailwind class** | `{utility}-{token}` | `bg-primary-stroke`, `text-secondary-default` |
-| **Code CSS (runtime)** | `--state-color-{base}-{state}` | `--state-color-secondary-stroke` |
+| **Code CSS (runtime)** | `--state-{base}-{state}` | `--state-secondary-stroke` |
 | **Figma export (variable.css)** | `--{name}-{theme}` | `--state-secondary-stroke-skyller` |
 
-> **Note:** Code ใช้ `--state-color-*` (version เก่า), Figma export ใช้ `--state-*` (version ใหม่ ไม่มี "color")
+> **Note:** ปัจจุบัน Code และ Figma export ใช้ `--state-*` เหมือนกันแล้ว (ไม่มี "color")
 
 ---
 
@@ -24,16 +24,16 @@
 
 | Tailwind class | CSS variable (code) | Figma path |
 |----------------|-------------------|------------|
-| `{base}` | `--state-color-{base}-default` | `state/{base}/default` |
-| `{base}-default` | `--state-color-{base}-default` | `state/{base}/default` |
-| `{base}-hover` | `--state-color-{base}-hover` | `state/{base}/hover` |
-| `{base}-stroke` | `--state-color-{base}-stroke` | `state/{base}/stroke` |
-| `{base}-hover-bg` | `--state-color-{base}-hover-bg` | `state/{base}/hover-bg` |
-| `{base}-pressed` | `--state-color-{base}-pressed` | `state/{base}/pressed` |
-| `{base}-active` | `--state-color-{base}-active` | `state/{base}/active` |
-| `{base}-text-solid` | `--state-color-{base}-text-solid` | `state/{base}/text-solid` |
-| `{base}-text-outline` | `--state-color-{base}-text-outline` | `state/{base}/text-outline` |
-| `{base}-text-pressed` | `--state-color-{base}-text-pressed` | `state/{base}/text-pressed` |
+| `{base}` | `--state-{base}-default` | `state/{base}/default` |
+| `{base}-default` | `--state-{base}-default` | `state/{base}/default` |
+| `{base}-hover` | `--state-{base}-hover` | `state/{base}/hover` |
+| `{base}-stroke` | `--state-{base}-stroke` | `state/{base}/stroke` |
+| `{base}-hover-bg` | `--state-{base}-hover-bg` | `state/{base}/hover-bg` |
+| `{base}-pressed` | `--state-{base}-pressed` | `state/{base}/pressed` |
+| `{base}-active` | `--state-{base}-active` | `state/{base}/active` |
+| `{base}-text-solid` | `--state-{base}-text-solid` | `state/{base}/text-solid` |
+| `{base}-text-outline` | `--state-{base}-text-outline` | `state/{base}/text-outline` |
+| `{base}-text-pressed` | `--state-{base}-text-pressed` | `state/{base}/text-pressed` |
 | `{base}-text-hover` | ⚠️ ไม่มีใน utils (มีใน state.css) | `state/{base}/text-hover` |
 | `{base}-foreground` | `--{base}-foreground` | - |
 | `{base}-{num}` | `--{variablePrefix}-{num}` | `ramps/{base}/{num}` |
@@ -42,15 +42,15 @@
 
 | baseName | variablePrefix | range |
 |----------|----------------|-------|
-| primary | primary-ramps-primary | 5,10,20...150 |
-| secondary | secondary-ramps-secondary | 5,10,20...150 |
-| tertiary | tertiary-ramps-tertiary | 5,10,20...150 |
-| grey | grey-grey | 5,10,20...150 |
-| grey2 | grey2-grey2 | 50,100...950 |
-| info | info-info | 50,100...950 |
-| success | success-success | 50,100...950 |
-| warning | warning-warning | 50,100...950 |
-| error | error-error | 50,100...950 |
+| primary | ramps-primary | 5,10,20...150 |
+| secondary | ramps-secondary | 5,10,20...150 |
+| tertiary | ramps-tertiary | 5,10,20...150 |
+| grey | ramps-grey | 5,10,20...150 |
+| grey2 | ramps-grey2 | 50,100...950 |
+| info | ramps-info | 50,100...950 |
+| success | ramps-success | 50,100...950 |
+| warning | ramps-warning | 50,100...950 |
+| error | ramps-error | 50,100...950 |
 
 ---
 
@@ -58,7 +58,7 @@
 
 | Tailwind class | CSS variable (code) | Figma (variable.css) |
 |----------------|---------------------|----------------------|
-| `{base}-transparent-8` | `--main-transparency-{base}-8` หรือ `--other-transparency-{base}-8` | `--transparency-{base}-8-{theme}` |
+| `{base}-transparent-8` | `--transparent-{base}-8` | `--transparency-{base}-8-{theme}` |
 | `{base}-transparent-12` | ... | ... |
 | `{base}-transparent-16` | ... | ... |
 | `{base}-transparent-24` | ... | ... |
@@ -115,21 +115,21 @@
 #### State disable
 | Tailwind | CSS variable | Figma |
 |----------|--------------|-------|
-| state-disable-solid | --state-color-disable-solid | --state-disable-solid-{theme} |
-| state-disable-outline | --state-color-disable-outline | --state-disable-outline-{theme} |
+| state-disable-solid | --state-disable-solid | --state-disable-solid-{theme} |
+| state-disable-outline | --state-disable-outline | --state-disable-outline-{theme} |
 
 #### Input
 | Tailwind | CSS variable | Figma |
 |----------|--------------|-------|
-| input-default-text | --input-color-default-text | --input-default-text-{theme} |
-| input-default-stroke | --input-color-default-stroke | --input-default-stroke-{theme} |
-| input-filled-text | --input-color-filled-text | --input-filled-text-{theme} |
-| input-active-stroke | --input-color-active-stroke | --input-active-stroke-{theme} |
-| input-disable-text | --input-color-disable-text | --input-disable-text-{theme} |
-| input-disable-stroke | --input-color-disable-stroke | --input-disable-stroke-{theme} |
-| input-disable-bg | --input-color-disable-bg | --input-disable-bg-{theme} |
-| input-label-bg | --input-color-label-bg | --input-label-bg-{theme} |
-| input-error | --input-color-error | --input-error-{theme} |
+| input-default-text | --input-default-text | --input-default-text-{theme} |
+| input-default-stroke | --input-default-stroke | --input-default-stroke-{theme} |
+| input-filled-text | --input-filled-text | --input-filled-text-{theme} |
+| input-active-stroke | --input-active-stroke | --input-active-stroke-{theme} |
+| input-disable-text | --input-disable-text | --input-disable-text-{theme} |
+| input-disable-stroke | --input-disable-stroke | --input-disable-stroke-{theme} |
+| input-disable-bg | --input-disable-bg | --input-disable-bg-{theme} |
+| input-label-bg | --input-label-bg | --input-label-bg-{theme} |
+| input-error | --input-error | --input-error-{theme} |
 
 #### Function
 | Tailwind | CSS variable | Figma |
@@ -225,7 +225,6 @@
 | `presets/colors.js` | Tailwind theme extend |
 | `themes/variable_lasted.css` | **Figma export (source)** — imported in global.css |
 | `themes/variable.css` | Figma export (legacy) |
-| `themes/{theme}/state.css` | Maps --state-color-* → var(--state-*-{theme}) |
-| `themes/{theme}/palette.css` | Maps ramps → var(--ramps-*-{theme}) |
-| `themes/{theme}/color.css` | Maps semantic colors → var(--*-{theme}) |
-| `themes/{theme}/transparent.css` | Maps transparency → var(--transparency-*-{theme}) |
+| `themes/variable-mapping.css` | Maps unscoped runtime tokens → theme-scoped variables |
+| `themes/{theme}/typography.css` | Theme-specific typography override |
+| `themes/{theme}/components/*` | Theme-specific component overrides |

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

@@ -34,16 +34,16 @@ module.exports = {
         "text-grey-light": withColorMixin("--text-grey-light"),
         "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("primary", "ramps-primary"),
+        ...generateColorConfig("secondary", "ramps-secondary"),
+        ...generateColorConfig("tertiary", "ramps-tertiary"),
+        ...generateColorConfig("grey", "ramps-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),
+        ...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"),
@@ -57,35 +57,33 @@ module.exports = {
         ...generateTransparentColorConfig("black", "other"),
         ...generateTransparentColorConfig("white", "other"),
 
-        "state-disable-solid": withColorMixin("--state-color-disable-solid"),
-        "state-disable-outline": withColorMixin(
-          "--state-color-disable-outline"
-        ),
+        "state-disable-solid": withColorMixin("--state-disable-solid"),
+        "state-disable-outline": withColorMixin("--state-disable-outline"),
 
-        "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"),
+        "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",
         ),
         "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"),
@@ -97,14 +95,14 @@ 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"),

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);