@rovula/ui 0.1.5 → 0.1.7

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 |
@@ -153,7 +153,7 @@
 | base-bg2 | --base-color-bg2 | --base-bg-bg2-{theme} |
 | base-bg3 | --base-color-bg3 | --base-bg-bg3-{theme} |
 | base-popup | --base-color-popup | - |
-| base-popup-highlight | --base-color-popup-hightlight *(typo)* | --base-modal-modal-hightlight-{theme} *(typo)* |
+| base-popup-highlight | --base-color-popup-highlight | --base-modal-modal-highlight-{theme} |
 | base-popup-curtain | --base-color-popup-curtain | --base-modal-modal-curtain-{theme} |
 | base-popup-foreground | --base-color-popup-foreground | - |
 | base-stroke | --base-color-workspace-stroke | --base-bg-stroke1-{theme} |
@@ -194,10 +194,10 @@
 | **Function** | `--function-{state}-{property}-{theme}` | --function-default-solid-skyller |
 | **Common** | `--common-{color}-{theme}` | --common-white-skyller |
 
-### 3.3 Known typos in variable.css
-- `tertiery` → should be `tertiary`
-- `backgroud` → should be `background`
-- `hightlight` → should be `highlight`
+### 3.3 Spelling updates in variable.css
+- `tertiary`
+- `background`
+- `highlight`
 
 ---
 
@@ -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;
@@ -13,7 +17,7 @@
   }
   body {
     /* @apply bg-background text-foreground; */
-    /* @apply bg-[var(--backgroud)] text-[var(--foreground)]; */
+    /* @apply bg-[var(--background)] text-[var(--foreground)]; */
   }
 
   /* hide input number arrow */

package/src/theme/main-preset.js

@@ -60,6 +60,55 @@ module.exports = {
             fontFamily: "var(--h6-family, 'Poppins')",
           },
         ],
+        subtitle1: [
+          "var(--subtitle1-size, 16px)",
+          {
+            lineHeight: "var(--subtitle1-line-height, 24px)",
+            fontWeight: "var(--subtitle1-weight, 400)",
+            fontFamily: "var(--subtitle1-family, 'Poppins')",
+          },
+        ],
+        subtitle2: [
+          "var(--subtitle2-size, 16px)",
+          {
+            lineHeight: "var(--subtitle2-line-height, 24px)",
+            fontWeight: "var(--subtitle2-weight, 500)",
+            fontFamily: "var(--subtitle2-family, 'Poppins')",
+          },
+        ],
+        subtitle3: [
+          "var(--subtitle3-size, 16px)",
+          {
+            lineHeight: "var(--subtitle3-line-height, 24px)",
+            fontWeight: "var(--subtitle3-weight, 600)",
+            fontFamily: "var(--subtitle3-family, 'Poppins')",
+          },
+        ],
+        subtitle4: [
+          "var(--subtitle4-size, 14px)",
+          {
+            lineHeight: "var(--subtitle4-line-height, 22px)",
+            fontWeight: "var(--subtitle4-weight, 400)",
+            fontFamily: "var(--subtitle4-family, 'Poppins')",
+          },
+        ],
+        subtitle5: [
+          "var(--subtitle5-size, 14px)",
+          {
+            lineHeight: "var(--subtitle5-line-height, 22px)",
+            fontWeight: "var(--subtitle5-weight, 500)",
+            fontFamily: "var(--subtitle5-family, 'Poppins')",
+          },
+        ],
+        subtitle6: [
+          "var(--subtitle6-size, 14px)",
+          {
+            lineHeight: "var(--subtitle6-line-height, 22px)",
+            fontWeight: "var(--subtitle6-weight, 600)",
+            fontFamily: "var(--subtitle6-family, 'Poppins')",
+          },
+        ],
+        // Deprecated aliases, kept for backward compatibility.
         subtitile1: [
           "var(--subtitle1-size, 16px)",
           {

package/src/theme/plugins/utilities/typography.js

@@ -1,6 +1,21 @@
 const plugin = require("tailwindcss/plugin");
 
+const deprecated = {
+  "typography-subtitile1": "typography-subtitle1",
+  "typography-subtitile2": "typography-subtitle2",
+  "typography-subtitile3": "typography-subtitle3",
+  "typography-subtitile4": "typography-subtitle4",
+  "typography-subtitile5": "typography-subtitle5",
+  "typography-subtitile6": "typography-subtitle6",
+};
+
 module.exports = plugin(function ({ addUtilities }) {
+  Object.entries(deprecated).forEach(([oldClass, newClass]) => {
+    console.warn(
+      `[Rovula UI] "${oldClass}" is deprecated. Use "${newClass}" instead.`,
+    );
+  });
+
   addUtilities({
     ".typography-h1": {
       "@apply text-h1": {},
@@ -20,23 +35,42 @@ module.exports = plugin(function ({ addUtilities }) {
     ".typography-h6": {
       "@apply text-h6": {},
     },
+    ".typography-subtitle1": {
+      "@apply text-subtitle1": {},
+    },
+    ".typography-subtitle2": {
+      "@apply text-subtitle2": {},
+    },
+    ".typography-subtitle3": {
+      "@apply text-subtitle3": {},
+    },
+    ".typography-subtitle4": {
+      "@apply text-subtitle4": {},
+    },
+    ".typography-subtitle5": {
+      "@apply text-subtitle5": {},
+    },
+    ".typography-subtitle6": {
+      "@apply text-subtitle6": {},
+    },
+    // Deprecated aliases, kept for backward compatibility.
     ".typography-subtitile1": {
-      "@apply text-subtitile1": {},
+      "@apply text-subtitle1": {},
     },
     ".typography-subtitile2": {
-      "@apply text-subtitile2": {},
+      "@apply text-subtitle2": {},
     },
     ".typography-subtitile3": {
-      "@apply text-subtitile3": {},
+      "@apply text-subtitle3": {},
     },
     ".typography-subtitile4": {
-      "@apply text-subtitile4": {},
+      "@apply text-subtitle4": {},
     },
     ".typography-subtitile5": {
-      "@apply text-subtitile5": {},
+      "@apply text-subtitle5": {},
     },
     ".typography-subtitile6": {
-      "@apply text-subtitile6": {},
+      "@apply text-subtitle6": {},
     },
     ".typography-body1": {
       "@apply text-body1": {},

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"),
@@ -94,17 +92,17 @@ module.exports = {
         "base-bg2": withColorMixin("--base-color-bg2"),
         "base-bg3": withColorMixin("--base-color-bg3"),
         "base-popup": withColorMixin("--base-color-popup"),
-        "base-popup-highlight": withColorMixin("--base-color-popup-hightlight"),
+        "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);