@rovula/ui 0.0.82 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.82",
+  "version": "0.1.0",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -18,7 +18,9 @@
     "storybook:docker": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build",
     "chromatic": "npx chromatic --project-token=chpt_cee098dd3b9b3ee",
-    "deploy-storybook": "npx wrangler pages deploy storybook-static --project-name=rovula-ui --branch=main"
+    "deploy-storybook": "npx wrangler pages deploy storybook-static --project-name=rovula-ui --branch=main",
+    "docs": "npx serve docs-website -p 3000",
+    "docs:open": "npx serve docs-website -p 3000 -o"
   },
   "files": [
     "dist/**/*",

package/src/components/Button/Button.tsx

@@ -7,13 +7,13 @@ export type ButtonProps = {
   title?: string;
   size?: "sm" | "md" | "lg";
   color?:
-    | "primary"
-    | "secondary"
-    | "success"
-    | "tertiary"
-    | "info"
-    | "warning"
-    | "error";
+  | "primary"
+  | "secondary"
+  | "success"
+  | "tertiary"
+  | "info"
+  | "warning"
+  | "error";
   variant?: "solid" | "outline" | "flat" | "link";
   disabled?: boolean;
   isLoading?: boolean;

package/src/theme/THEME_MAPPING.md

@@ -0,0 +1,231 @@
+# Theme Mapping Documentation
+
+เอกสาร mapping ระหว่าง Tailwind class, CSS variables ที่ใช้ใน code และ raw CSS ที่ export จาก Figma
+
+---
+
+## 1. Naming Convention
+
+| แหล่ง | Pattern | ตัวอย่าง |
+|------|---------|----------|
+| **Tailwind class** | `{utility}-{token}` | `bg-primary-stroke`, `text-secondary-default` |
+| **Code CSS (runtime)** | `--state-color-{base}-{state}` | `--state-color-secondary-stroke` |
+| **Figma export (variable.css)** | `--{name}-{theme}` | `--state-secondary-stroke-skyller` |
+
+> **Note:** Code ใช้ `--state-color-*` (version เก่า), Figma export ใช้ `--state-*` (version ใหม่ ไม่มี "color")
+
+---
+
+## 2. Tailwind → CSS Variable Mapping
+
+### 2.1 generateColorConfig (State + Palette)
+
+ใช้กับ: `primary`, `secondary`, `tertiary`, `grey`, `grey2`, `info`, `success`, `warning`, `error`
+
+| 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}-text-hover` | ⚠️ ไม่มีใน utils (มีใน state.css) | `state/{base}/text-hover` |
+| `{base}-foreground` | `--{base}-foreground` | - |
+| `{base}-{num}` | `--{variablePrefix}-{num}` | `ramps/{base}/{num}` |
+
+**Config ใช้จริง:**
+
+| 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 |
+
+---
+
+### 2.2 generateTransparentColorConfig
+
+| 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-12` | ... | ... |
+| `{base}-transparent-16` | ... | ... |
+| `{base}-transparent-24` | ... | ... |
+| `{base}-transparent-32` | ... | ... |
+| `{base}-transparent-48` | ... | ... |
+
+**Config:** primary/secondary/tertiary ใช้ `main`, อื่นๆ ใช้ `other`
+
+---
+
+### 2.3 generateButtonStyles
+
+**Prefix:** `button-{theme}-{mode}` | **Themes:** primary, secondary, tertiary, info, success, warning, error | **Modes:** solid, outline, flat
+
+| Tailwind class | CSS variable | ใช้กับ |
+|----------------|--------------|--------|
+| `button-{theme}-{mode}-default` | `--button-{theme}-{mode}-default-{type}` | border, bg, text |
+| `button-{theme}-{mode}-hover` | `--button-{theme}-{mode}-hover-{type}` | border, bg, text |
+| `button-{theme}-{mode}-active` | `--button-{theme}-{mode}-active-{type}` | border, bg, text |
+| `button-{theme}-{mode}-disabled` | `--button-{theme}-{mode}-disabled-{type}` | border, bg, text |
+
+---
+
+### 2.4 generateActionButtonStyles
+
+**Prefix:** `action-button-{mode}` | **Modes:** solid, outline, icon
+
+| Tailwind class | CSS variable | ใช้กับ |
+|----------------|--------------|--------|
+| `action-button-{mode}-default` | `--action-button-{mode}-default-{type}` | border, bg, text |
+| `action-button-{mode}-hover` | `--action-button-{mode}-hover-{type}` | border, bg, text |
+| `action-button-{mode}-pressed` | `--action-button-{mode}-pressed-{type}` | border, bg, text |
+| `action-button-{mode}-active` | `--action-button-{mode}-active-{type}` | border, bg, text |
+| `action-button-{mode}-active-pressed` | `--action-button-{mode}-active-pressed-{type}` | border, bg, text |
+| `action-button-{mode}-active-hover` | `--action-button-{mode}-active-hover-{type}` | border, bg, text |
+| `action-button-{mode}-disabled` | `--action-button-{mode}-disabled-{type}` | border, bg, text |
+
+---
+
+### 2.5 Manual Mappings (colors.js)
+
+#### Text
+| Tailwind | CSS variable | Figma (variable.css) |
+|----------|--------------|----------------------|
+| text-black | --text-black | --text-black-{theme} |
+| text-dark | --text-dark | --text-dark-{theme} |
+| text-medium | --text-medium | --text-medium-{theme} |
+| text-light | --text-light | --text-light-{theme} |
+| text-grey-dark | --text-grey-dark | --text-grey-dark-{theme} |
+| text-grey-medium | --text-grey-medium | --text-grey-medium-{theme} |
+| text-grey-light | --text-grey-light | --text-grey-light-{theme} |
+| text-white | --text-white | --text-white-{theme} |
+
+#### 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} |
+
+#### 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} |
+
+#### Function
+| Tailwind | CSS variable | Figma |
+|----------|--------------|-------|
+| function-default-solid | --function-default-solid | --function-default-solid-{theme} |
+| function-default-hover | --function-default-hover | --function-default-hover-{theme} |
+| function-default-hover-bg | --function-default-hover-bg | --function-default-hover-bg-{theme} |
+| function-default-stroke | --function-default-stroke | --function-default-stroke-{theme} |
+| function-default-icon | --function-default-icon | --function-default-icon-{theme} |
+| function-default-outline | --function-default-outline-icon | --function-default-outline-icon-{theme} |
+| function-active-solid | --function-active-solid | --function-active-solid-{theme} |
+| function-active-hover | --function-active-hover | --function-active-hover-{theme} |
+| function-active-hover-bg | --function-active-hover-bg | --function-active-hover-bg-{theme} |
+| function-active-stroke | --function-active-stroke | --function-active-stroke-{theme} |
+| function-active-icon | --function-active-icon | --function-active-icon-{theme} |
+
+#### Base
+| Tailwind | CSS variable | Figma |
+|----------|--------------|-------|
+| base-bg | --base-color-bg | --base-bg-bg1-{theme} |
+| 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-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} |
+| base-workspace-stroke | --base-color-workspace-stroke | --base-bg-stroke1-{theme} |
+| base-guideline-stroke | --base-color-guideline-stroke | - |
+
+#### Common
+| Tailwind | CSS variable | Figma |
+|----------|--------------|-------|
+| common-white | --common-white | --common-white-{theme} |
+| common-black | --common-black | --common-black-{theme} |
+| surface | --surface | - |
+| surface-foreground | --surface-foreground | - |
+| background | --background | - |
+| foreground | --foreground | - |
+
+---
+
+## 3. Figma Export (variable.css) Structure
+
+### 3.1 Theme suffixes
+- `xspector`
+- `skyller`
+- `report-xspector-light-mode`
+
+### 3.2 Variable categories
+
+| Category | Pattern | ตัวอย่าง |
+|----------|---------|----------|
+| **Main** | `--main-{color}-{theme}` | --main-primary-skyller |
+| **Brand** | `--brand-{name}-{theme}` | --brand-midnight-blue-skyller |
+| **Text** | `--text-{variant}-{theme}` | --text-dark-skyller |
+| **State** | `--state-{base}-{state}-{theme}` | --state-primary-default-skyller |
+| **Ramps** | `--ramps-{base}-{num}-{theme}` | --ramps-primary-5-skyller |
+| **Transparency** | `--transparency-{base}-{num}-{theme}` | --transparency-primary-8-skyller |
+| **Base** | `--base-{category}-{name}-{theme}` | --base-bg-bg1-skyller |
+| **Input** | `--input-{state}-{property}-{theme}` | --input-default-text-skyller |
+| **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`
+
+---
+
+## 4. Quick Reference: Figma → Tailwind
+
+เมื่อ designer ส่ง Figma inspect มา ให้ map ดังนี้:
+
+| Figma token path | Tailwind class |
+|------------------|----------------|
+| state/secondary/stroke | border-secondary-stroke |
+| state/secondary/text-outline | text-secondary-text-outline |
+| state/primary/default | bg-primary หรือ bg-primary-default |
+| state/primary/hover | bg-primary-hover |
+| ramps/primary/50 | bg-primary-50 |
+| text/dark | text-dark |
+| function/default/solid | bg-function-default-solid |
+
+---
+
+## 5. Files Reference
+
+| File | Purpose |
+|------|---------|
+| `utils.js` | Generate Tailwind color config |
+| `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}) |

package/src/theme/global.css

@@ -1,6 +1,7 @@
-
 @import "./tokens/baseline.css";
+@import "./themes/variable.css";
 @import "./themes/xspector/baseline.css";
+@import "./themes/skyller/baseline.css";
 
 @tailwind base;
 @tailwind components;

package/src/theme/themes/skyller/baseline.css

@@ -0,0 +1,6 @@
+@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);

package/src/theme/themes/skyller/color.css

@@ -0,0 +1,79 @@
+:root[data-theme="skyller"] {
+  /* ------------------------------------------------------------------ */
+  /* Semantic Colors — from variable_lasted.css                         */
+  /* ------------------------------------------------------------------ */
+
+  /* Input */
+  --input-color-default-text: var(--input-default-text-skyller);
+  --input-color-default-stroke: var(--input-default-stroke-skyller);
+  --input-color-filled-text: var(--input-filled-text-skyller);
+  --input-color-active-stroke: var(--input-active-stroke-skyller);
+  --input-color-disable-text: var(--input-disable-text-skyller);
+  --input-color-disable-stroke: var(--input-disable-stroke-skyller);
+  --input-color-disable-bg: var(--input-disable-bg-skyller);
+  --input-color-label-bg: var(--input-label-bg-skyller);
+  --input-color-error: var(--input-error-skyller);
+
+  /* Function button */
+  --function-default-solid: var(--function-default-solid-skyller);
+  --function-default-hover: var(--function-default-hover-skyller);
+  --function-default-hover-bg: var(--function-default-hover-bg-skyller);
+  --function-default-stroke: var(--function-default-stroke-skyller);
+  --function-default-icon: var(--function-default-icon-skyller);
+  --function-default-outline-icon: var(--function-default-outline-icon-skyller);
+  --function-active-solid: var(--function-active-solid-skyller);
+  --function-active-hover: var(--function-active-hover-skyller);
+  --function-active-hover-bg: var(--function-active-hover-bg-skyller);
+  --function-active-stroke: var(--function-active-stroke-skyller);
+  --function-active-icon: var(--function-active-icon-skyller);
+
+  /* Text */
+  --text-black: var(--text-black-skyller);
+  --text-dark: var(--text-dark-skyller);
+  --text-medium: var(--text-medium-skyller);
+  --text-light: var(--text-light-skyller);
+  --text-grey-dark: var(--text-grey-dark-skyller);
+  --text-grey-medium: var(--text-grey-medium-skyller);
+  --text-grey-light: var(--text-grey-light-skyller);
+  --text-white: var(--text-white-skyller);
+
+  /* Base */
+  --base-color-bg: var(--base-bg-bg1-skyller);
+  --base-color-bg2: var(--base-bg-bg2-skyller);
+  --base-color-bg3: var(--base-bg-bg3-skyller);
+  --base-color-workspace-stroke: var(--base-bg-stroke1-skyller);
+  --base-color-guideline-stroke: var(--base-bg-stroke2-skyller);
+  --base-color-popup: var(--base-modal-modal-skyller);
+  --base-color-popup-hightlight: var(--base-modal-modal-hightlight-skyller);
+  --base-color-popup-curtain: var(--base-modal-modal-curtain-skyller);
+  --common-white: var(--common-white-skyller);
+  --common-black: var(--common-black-skyller);
+
+  /* Addon */
+  --background: var(--base-color-bg);
+  --foreground: var(--common-black);
+
+  --primary: var(--ramps-primary-100-skyller);
+  --secondary: var(--ramps-secondary-100-skyller);
+  --tertiary: var(--ramps-tertiary-100-skyller);
+  --info: var(--info-info-100);
+  --success: var(--success-success-100);
+  --warning: var(--warning-warning-100);
+  --error: var(--error-error-100);
+  --grey: var(--grey-grey-100);
+  --grey2: var(--grey2-grey2-100);
+
+  --primary-foreground: var(--state-color-primary-text-solid);
+  --secondary-foreground: var(--state-color-secondary-text-solid);
+  --tertiary-foreground: var(--state-color-tertiary-text-solid);
+  --info-foreground: var(--state-color-info-text-solid);
+  --success-foreground: var(--state-color-success-text-solid);
+  --warning-foreground: var(--state-color-warning-text-solid);
+  --error-foreground: var(--state-color-error-text-solid);
+  --grey-foreground: var(--common-black);
+  --grey2-foreground: var(--common-black);
+
+  --surface: var(--base-color-bg);
+  --surface-foreground: var(--common-black);
+  --base-color-popup-foreground: var(--text-dark);
+}

package/src/theme/themes/skyller/components/action-button.css

@@ -0,0 +1,81 @@
+:root[data-theme="skyller"] {
+  /* --------------------------------------------------------------------------------- */
+  /* Action Button Component Tokens                                                    */
+  /* --------------------------------------------------------------------------------- */
+  /* Naming Convention: --[component]-[mode]-[state]-[property]                        */
+  /* Mode:   [solid, outline, icon]                                                    */
+  /* States: [default, hover, pressed, active, active-pressed active-hover disabled]   */
+  /* --------------------------------------------------------------------------------- */
+
+  /* ------------------------------------------------------------------ */
+  /* Solid Mode                                                         */
+  /* ------------------------------------------------------------------ */
+
+  --action-button-solid-default-bg: var(--function-default-solid);
+  --action-button-solid-default-border: var(--function-default-solid);
+  --action-button-solid-default-text: var(--function-default-icon);
+
+  --action-button-solid-hover-bg: var(--function-default-hover);
+  --action-button-solid-hover-border: var(--function-default-hover);
+  --action-button-solid-hover-text: var(--function-default-icon);
+
+  --action-button-solid-pressed-bg: var(--function-default-solid);
+  --action-button-solid-pressed-border: var(--function-default-solid);
+  --action-button-solid-pressed-text: var(--function-default-icon);
+
+  --action-button-solid-active-bg: var(--function-active-solid);
+  --action-button-solid-active-border: var(--function-active-solid);
+  --action-button-solid-active-text: var(--function-active-icon);
+
+  --action-button-solid-active-hover-bg: var(--function-active-hover);
+  --action-button-solid-active-hover-border: var(--function-active-hover);
+  --action-button-solid-active-hover-text: var(--function-active-icon);
+
+  --action-button-solid-active-pressed-bg: var(--function-active-solid);
+  --action-button-solid-active-pressed-border: var(--function-active-solid);
+  --action-button-solid-active-pressed-text: var(--function-active-icon);
+
+  /* ------------------------------------------------------------------ */
+  /* Outline Mode                                                       */
+  /* ------------------------------------------------------------------ */
+
+  --action-button-outline-default-border: var(--function-default-stroke);
+  --action-button-outline-default-text: var(--function-default-outline-icon);
+
+  --action-button-outline-hover-bg: var(--function-default-hover-bg);
+  --action-button-outline-hover-border: var(--function-default-hover);
+  --action-button-outline-hover-text: var(--function-default-hover);
+
+  --action-button-outline-pressed-bg: var(--function-default-hover-bg);
+  --action-button-outline-pressed-border: var(--function-default-stroke);
+  --action-button-outline-pressed-text: var(--function-default-outline-icon);
+
+  --action-button-outline-active-border: var(--function-active-stroke);
+  --action-button-outline-active-text: var(--function-active-solid);
+
+  --action-button-outline-active-hover-bg: var(--function-active-hover-bg);
+  --action-button-outline-active-hover-border: var(--function-active-hover);
+  --action-button-outline-active-hover-text: var(--function-active-hover);
+
+  --action-button-outline-active-pressed-bg: var(--function-active-hover-bg);
+  --action-button-outline-active-pressed-border: var(--function-active-stroke);
+  --action-button-outline-active-pressed-text: var(--function-active-solid);
+
+  /* ------------------------------------------------------------------ */
+  /* Icon Mode                                                          */
+  /* ------------------------------------------------------------------ */
+
+  --action-button-icon-default-text: var(--function-default-outline-icon);
+
+  --action-button-icon-hover-bg: var(--function-default-hover-bg);
+  --action-button-icon-hover-text: var(--function-default-hover);
+
+  --action-button-icon-pressed-text: var(--function-default-outline-icon);
+
+  --action-button-icon-active-text: var(--function-active-solid);
+
+  --action-button-icon-active-hover-bg: var(--function-active-hover-bg);
+  --action-button-icon-active-hover-text: var(--function-active-hover);
+
+  --action-button-icon-active-pressed-text: var(--function-active-solid);
+}

package/src/theme/themes/skyller/palette.css

@@ -0,0 +1,143 @@
+:root[data-theme="skyller"] {
+  /* ------------------------------------------------------------------ */
+  /* Color Ramps — from variable_lasted.css                             */
+  /* ------------------------------------------------------------------ */
+  /* Maps --{base}-ramps-{base}-{num} (code) → --ramps-{base}-{num}-skyller */
+
+  /* Primary */
+  --primary-ramps-primary-5: var(--ramps-primary-5-skyller);
+  --primary-ramps-primary-10: var(--ramps-primary-10-skyller);
+  --primary-ramps-primary-20: var(--ramps-primary-20-skyller);
+  --primary-ramps-primary-30: var(--ramps-primary-30-skyller);
+  --primary-ramps-primary-40: var(--ramps-primary-40-skyller);
+  --primary-ramps-primary-50: var(--ramps-primary-50-skyller);
+  --primary-ramps-primary-60: var(--ramps-primary-60-skyller);
+  --primary-ramps-primary-70: var(--ramps-primary-70-skyller);
+  --primary-ramps-primary-80: var(--ramps-primary-80-skyller);
+  --primary-ramps-primary-90: var(--ramps-primary-90-skyller);
+  --primary-ramps-primary-100: var(--ramps-primary-100-skyller);
+  --primary-ramps-primary-110: var(--ramps-primary-110-skyller);
+  --primary-ramps-primary-120: var(--ramps-primary-120-skyller);
+  --primary-ramps-primary-130: var(--ramps-primary-130-skyller);
+  --primary-ramps-primary-140: var(--ramps-primary-140-skyller);
+  --primary-ramps-primary-150: var(--ramps-primary-150-skyller);
+
+  /* Secondary */
+  --secondary-ramps-secondary-5: var(--ramps-secondary-5-skyller);
+  --secondary-ramps-secondary-10: var(--ramps-secondary-10-skyller);
+  --secondary-ramps-secondary-20: var(--ramps-secondary-20-skyller);
+  --secondary-ramps-secondary-30: var(--ramps-secondary-30-skyller);
+  --secondary-ramps-secondary-40: var(--ramps-secondary-40-skyller);
+  --secondary-ramps-secondary-50: var(--ramps-secondary-50-skyller);
+  --secondary-ramps-secondary-60: var(--ramps-secondary-60-skyller);
+  --secondary-ramps-secondary-70: var(--ramps-secondary-70-skyller);
+  --secondary-ramps-secondary-80: var(--ramps-secondary-80-skyller);
+  --secondary-ramps-secondary-90: var(--ramps-secondary-90-skyller);
+  --secondary-ramps-secondary-100: var(--ramps-secondary-100-skyller);
+  --secondary-ramps-secondary-110: var(--ramps-secondary-110-skyller);
+  --secondary-ramps-secondary-120: var(--ramps-secondary-120-skyller);
+  --secondary-ramps-secondary-130: var(--ramps-secondary-130-skyller);
+  --secondary-ramps-secondary-140: var(--ramps-secondary-140-skyller);
+  --secondary-ramps-secondary-150: var(--ramps-secondary-150-skyller);
+
+  /* Tertiary */
+  --tertiary-ramps-tertiary-5: var(--ramps-tertiary-5-skyller);
+  --tertiary-ramps-tertiary-10: var(--ramps-tertiary-10-skyller);
+  --tertiary-ramps-tertiary-20: var(--ramps-tertiary-20-skyller);
+  --tertiary-ramps-tertiary-30: var(--ramps-tertiary-30-skyller);
+  --tertiary-ramps-tertiary-40: var(--ramps-tertiary-40-skyller);
+  --tertiary-ramps-tertiary-50: var(--ramps-tertiary-50-skyller);
+  --tertiary-ramps-tertiary-60: var(--ramps-tertiary-60-skyller);
+  --tertiary-ramps-tertiary-70: var(--ramps-tertiary-70-skyller);
+  --tertiary-ramps-tertiary-80: var(--ramps-tertiary-80-skyller);
+  --tertiary-ramps-tertiary-90: var(--ramps-tertiary-90-skyller);
+  --tertiary-ramps-tertiary-100: var(--ramps-tertiary-100-skyller);
+  --tertiary-ramps-tertiary-110: var(--ramps-tertiary-110-skyller);
+  --tertiary-ramps-tertiary-120: var(--ramps-tertiary-120-skyller);
+  --tertiary-ramps-tertiary-130: var(--ramps-tertiary-130-skyller);
+  --tertiary-ramps-tertiary-140: var(--ramps-tertiary-140-skyller);
+  --tertiary-ramps-tertiary-150: var(--ramps-tertiary-150-skyller);
+
+  /* Grey */
+  --grey-grey-5: var(--ramps-grey-5-skyller);
+  --grey-grey-10: var(--ramps-grey-10-skyller);
+  --grey-grey-20: var(--ramps-grey-20-skyller);
+  --grey-grey-30: var(--ramps-grey-30-skyller);
+  --grey-grey-40: var(--ramps-grey-40-skyller);
+  --grey-grey-50: var(--ramps-grey-50-skyller);
+  --grey-grey-60: var(--ramps-grey-60-skyller);
+  --grey-grey-70: var(--ramps-grey-70-skyller);
+  --grey-grey-80: var(--ramps-grey-80-skyller);
+  --grey-grey-90: var(--ramps-grey-90-skyller);
+  --grey-grey-100: var(--ramps-grey-100-skyller);
+  --grey-grey-110: var(--ramps-grey-110-skyller);
+  --grey-grey-120: var(--ramps-grey-120-skyller);
+  --grey-grey-130: var(--ramps-grey-130-skyller);
+  --grey-grey-140: var(--ramps-grey-140-skyller);
+  --grey-grey-150: var(--ramps-grey-150-skyller);
+
+  /* Grey2 */
+  --grey2-grey2-50: var(--ramps-grey2-50-skyller);
+  --grey2-grey2-100: var(--ramps-grey2-100-skyller);
+  --grey2-grey2-200: var(--ramps-grey2-200-skyller);
+  --grey2-grey2-300: var(--ramps-grey2-300-skyller);
+  --grey2-grey2-400: var(--ramps-grey2-400-skyller);
+  --grey2-grey2-500: var(--ramps-grey2-500-skyller);
+  --grey2-grey2-600: var(--ramps-grey2-600-skyller);
+  --grey2-grey2-700: var(--ramps-grey2-700-skyller);
+  --grey2-grey2-800: var(--ramps-grey2-800-skyller);
+  --grey2-grey2-900: var(--ramps-grey2-900-skyller);
+  --grey2-grey2-950: var(--ramps-grey2-950-skyller);
+
+  /* Info */
+  --info-info-50: var(--ramps-info-50-skyller);
+  --info-info-100: var(--ramps-info-100-skyller);
+  --info-info-200: var(--ramps-info-200-skyller);
+  --info-info-300: var(--ramps-info-300-skyller);
+  --info-info-400: var(--ramps-info-400-skyller);
+  --info-info-500: var(--ramps-info-500-skyller);
+  --info-info-600: var(--ramps-info-600-skyller);
+  --info-info-700: var(--ramps-info-700-skyller);
+  --info-info-800: var(--ramps-info-800-skyller);
+  --info-info-900: var(--ramps-info-900-skyller);
+  --info-info-950: var(--ramps-info-950-skyller);
+
+  /* Success */
+  --success-success-50: var(--ramps-success-50-skyller);
+  --success-success-100: var(--ramps-success-100-skyller);
+  --success-success-200: var(--ramps-success-200-skyller);
+  --success-success-300: var(--ramps-success-300-skyller);
+  --success-success-400: var(--ramps-success-400-skyller);
+  --success-success-500: var(--ramps-success-500-skyller);
+  --success-success-600: var(--ramps-success-600-skyller);
+  --success-success-700: var(--ramps-success-700-skyller);
+  --success-success-800: var(--ramps-success-800-skyller);
+  --success-success-900: var(--ramps-success-900-skyller);
+  --success-success-950: var(--ramps-success-950-skyller);
+
+  /* Warning */
+  --warning-warning-50: var(--ramps-warning-50-skyller);
+  --warning-warning-100: var(--ramps-warning-100-skyller);
+  --warning-warning-200: var(--ramps-warning-200-skyller);
+  --warning-warning-300: var(--ramps-warning-300-skyller);
+  --warning-warning-400: var(--ramps-warning-400-skyller);
+  --warning-warning-500: var(--ramps-warning-500-skyller);
+  --warning-warning-600: var(--ramps-warning-600-skyller);
+  --warning-warning-700: var(--ramps-warning-700-skyller);
+  --warning-warning-800: var(--ramps-warning-800-skyller);
+  --warning-warning-900: var(--ramps-warning-900-skyller);
+  --warning-warning-950: var(--ramps-warning-950-skyller);
+
+  /* Error */
+  --error-error-50: var(--ramps-error-50-skyller);
+  --error-error-100: var(--ramps-error-100-skyller);
+  --error-error-200: var(--ramps-error-200-skyller);
+  --error-error-300: var(--ramps-error-300-skyller);
+  --error-error-400: var(--ramps-error-400-skyller);
+  --error-error-500: var(--ramps-error-500-skyller);
+  --error-error-600: var(--ramps-error-600-skyller);
+  --error-error-700: var(--ramps-error-700-skyller);
+  --error-error-800: var(--ramps-error-800-skyller);
+  --error-error-900: var(--ramps-error-900-skyller);
+  --error-error-950: var(--ramps-error-950-skyller);
+}