@rovula/ui 0.0.81 → 0.0.82

package/src/theme/themes/xspector/transparent.css

@@ -1,93 +1,68 @@
-:root[data-theme="xspector"] {
-  /* ------------------------------------------------------------------ */
-  /* Transparency Variants — from variable_lasted.css                    */
-  /* ------------------------------------------------------------------ */
-
-  /* Primary (main) */
-  --main-transparency-primary-8: var(--transparency-primary-8-xspector);
-  --main-transparency-primary-12: var(--transparency-primary-12-xspector);
-  --main-transparency-primary-16: var(--transparency-primary-16-xspector);
-  --main-transparency-primary-24: var(--transparency-primary-24-xspector);
-  --main-transparency-primary-32: var(--transparency-primary-32-xspector);
-  --main-transparency-primary-48: var(--transparency-primary-48-xspector);
-
-  /* Secondary (main) */
-  --main-transparency-secondary-8: var(--transparency-secondary-8-xspector);
-  --main-transparency-secondary-12: var(--transparency-secondary-12-xspector);
-  --main-transparency-secondary-16: var(--transparency-secondary-16-xspector);
-  --main-transparency-secondary-24: var(--transparency-secondary-24-xspector);
-  --main-transparency-secondary-32: var(--transparency-secondary-32-xspector);
-  --main-transparency-secondary-48: var(--transparency-secondary-48-xspector);
-
-  /* Tertiary (main) */
-  --main-transparency-tertiary-8: var(--transparency-tertiary-8-xspector);
-  --main-transparency-tertiary-12: var(--transparency-tertiary-12-xspector);
-  --main-transparency-tertiary-16: var(--transparency-tertiary-16-xspector);
-  --main-transparency-tertiary-24: var(--transparency-tertiary-24-xspector);
-  --main-transparency-tertiary-32: var(--transparency-tertiary-32-xspector);
-  --main-transparency-tertiary-48: var(--transparency-tertiary-48-xspector);
-
-  /* Info (other) */
-  --other-transparency-info-8: var(--transparency-info-8-xspector);
-  --other-transparency-info-12: var(--transparency-info-12-xspector);
-  --other-transparency-info-16: var(--transparency-info-16-xspector);
-  --other-transparency-info-24: var(--transparency-info-24-xspector);
-  --other-transparency-info-32: var(--transparency-info-32-xspector);
-  --other-transparency-info-48: var(--transparency-info-48-xspector);
-
-  /* Success (other) */
-  --other-transparency-success-8: var(--transparency-success-8-xspector);
-  --other-transparency-success-12: var(--transparency-success-12-xspector);
-  --other-transparency-success-16: var(--transparency-success-16-xspector);
-  --other-transparency-success-24: var(--transparency-success-24-xspector);
-  --other-transparency-success-32: var(--transparency-success-32-xspector);
-  --other-transparency-success-48: var(--transparency-success-48-xspector);
-
-  /* Warning (other) */
-  --other-transparency-warning-8: var(--transparency-warning-8-xspector);
-  --other-transparency-warning-12: var(--transparency-warning-12-xspector);
-  --other-transparency-warning-16: var(--transparency-warning-16-xspector);
-  --other-transparency-warning-24: var(--transparency-warning-24-xspector);
-  --other-transparency-warning-32: var(--transparency-warning-32-xspector);
-  --other-transparency-warning-48: var(--transparency-warning-48-xspector);
-
-  /* Error (other) */
-  --other-transparency-error-8: var(--transparency-error-8-xspector);
-  --other-transparency-error-12: var(--transparency-error-12-xspector);
-  --other-transparency-error-16: var(--transparency-error-16-xspector);
-  --other-transparency-error-24: var(--transparency-error-24-xspector);
-  --other-transparency-error-32: var(--transparency-error-32-xspector);
-  --other-transparency-error-48: var(--transparency-error-48-xspector);
-
-  /* Grey (other) */
-  --other-transparency-grey-8: var(--transparency-grey-8-xspector);
-  --other-transparency-grey-12: var(--transparency-grey-12-xspector);
-  --other-transparency-grey-16: var(--transparency-grey-16-xspector);
-  --other-transparency-grey-24: var(--transparency-grey-24-xspector);
-  --other-transparency-grey-32: var(--transparency-grey-32-xspector);
-  --other-transparency-grey-48: var(--transparency-grey-48-xspector);
-
-  /* Grey2 (other) */
-  --other-transparency-grey2-8: var(--transparency-grey2-8-xspector);
-  --other-transparency-grey2-12: var(--transparency-grey2-12-xspector);
-  --other-transparency-grey2-16: var(--transparency-grey2-16-xspector);
-  --other-transparency-grey2-24: var(--transparency-grey2-24-xspector);
-  --other-transparency-grey2-32: var(--transparency-grey2-32-xspector);
-  --other-transparency-grey2-48: var(--transparency-grey2-48-xspector);
-
-  /* White (other) */
-  --other-transparency-white-08: var(--transparency-white-8-xspector);
-  --other-transparency-white-12: var(--transparency-white-12-xspector);
-  --other-transparency-white-16: var(--transparency-white-16-xspector);
-  --other-transparency-white-24: var(--transparency-white-24-xspector);
-  --other-transparency-white-32: var(--transparency-white-32-xspector);
-  --other-transparency-white-48: var(--transparency-white-48-xspector);
-
-  /* Black (other) */
-  --other-transparency-black-08: var(--transparency-black-8-xspector);
-  --other-transparency-black-12: var(--transparency-black-12-xspector);
-  --other-transparency-black-16: var(--transparency-black-16-xspector);
-  --other-transparency-black-24: var(--transparency-black-24-xspector);
-  --other-transparency-black-32: var(--transparency-black-32-xspector);
-  --other-transparency-black-48: var(--transparency-black-48-xspector);
-}
+:root[data-theme="xspector"]{
+  --main-transparency-primary-8: rgba(221 205 0 / 0.08);
+  --main-transparency-primary-12: rgba(221 205 0 / 0.12);
+  --main-transparency-primary-16: rgba(221 205 0 / 0.16);
+  --main-transparency-primary-24: rgba(221 205 0 / 0.24);
+  --main-transparency-primary-32: rgba(221 205 0 / 0.32);
+  --main-transparency-primary-48: rgba(221 205 0 / 0.48);
+  --main-transparency-secondary-8: rgba(158 158 158 / 0.08);
+  --main-transparency-secondary-12: rgba(158 158 158 / 0.12);
+  --main-transparency-secondary-16: rgba(158 158 158 / 0.16);
+  --main-transparency-secondary-24: rgba(158 158 158 / 0.24);
+  --main-transparency-secondary-32: rgba(158 158 158 / 0.32);
+  --main-transparency-secondary-48: rgba(158 158 158 / 0.48);
+  --main-transparency-tertiary-8: rgba(173 202 214 / 0.08);
+  --main-transparency-tertiary-12: rgba(173 202 214 / 0.12);
+  --main-transparency-tertiary-16: rgba(173 202 214 / 0.16);
+  --main-transparency-tertiary-24: rgba(173 202 214 / 0.24);
+  --main-transparency-tertiary-32: rgba(173 202 214 / 0.32);
+  --main-transparency-tertiary-48: rgba(173 202 214 / 0.48);
+  --other-transparency-info-8: rgba(41 152 255 / 0.08);
+  --other-transparency-info-12: rgba(41 152 255 / 0.12);
+  --other-transparency-info-16: rgba(41 152 255 / 0.16);
+  --other-transparency-info-24: rgba(41 152 255 / 0.24);
+  --other-transparency-info-32: rgba(41 152 255 / 0.32);
+  --other-transparency-info-48: rgba(41 152 255 / 0.48);
+  --other-transparency-success-8: rgba(84 214 44 / 0.08);
+  --other-transparency-success-12: rgba(84 214 44 / 0.12);
+  --other-transparency-success-16: rgba(84 214 44 / 0.16);
+  --other-transparency-success-24: rgba(84 214 44 / 0.24);
+  --other-transparency-success-32: rgba(84 214 44 / 0.32);
+  --other-transparency-success-48: rgba(84 214 44 / 0.48);
+  --other-transparency-warning-8: rgba(255 193 7 / 0.08);
+  --other-transparency-warning-12: rgba(255 193 7 / 0.12);
+  --other-transparency-warning-16: rgba(255 193 7 / 0.16);
+  --other-transparency-warning-24: rgba(255 193 7 / 0.24);
+  --other-transparency-warning-32: rgba(255 193 7 / 0.32);
+  --other-transparency-warning-48: rgba(255 193 7 / 0.48);
+  --other-transparency-error-8: rgba(255 72 66 / 0.08);
+  --other-transparency-error-12: rgba(255 72 66 / 0.12);
+  --other-transparency-error-16: rgba(255 72 66 / 0.16);
+  --other-transparency-error-24: rgba(255 72 66 / 0.24);
+  --other-transparency-error-32: rgba(255 72 66 / 0.32);
+  --other-transparency-error-48: rgba(255 72 66 / 0.48);
+  --other-transparency-grey-8: rgba(158 158 158 / 0.08);
+  --other-transparency-grey-12: rgba(158 158 158 / 0.12);
+  --other-transparency-grey-16: rgba(158 158 158 / 0.16);
+  --other-transparency-grey-24: rgba(158 158 158 / 0.24);
+  --other-transparency-grey-32: rgba(158 158 158 / 0.32);
+  --other-transparency-grey-48: rgba(158 158 158 / 0.48);
+  --other-transparency-grey2-8: rgba(145 158 171 / 0.08);
+  --other-transparency-grey2-12: rgba(145 158 171 / 0.12);
+  --other-transparency-grey2-16: rgba(145 158 171 / 0.16);
+  --other-transparency-grey2-24: rgba(145 158 171 / 0.24);
+  --other-transparency-grey2-32: rgba(145 158 171 / 0.32);
+  --other-transparency-grey2-48: rgba(145 158 171 / 0.48);
+  --other-transparency-white-08: rgba(255 255 255 / 0.08);
+  --other-transparency-white-12: rgba(255 255 255 / 0.12);
+  --other-transparency-white-16: rgba(255 255 255 / 0.16);
+  --other-transparency-white-24: rgba(255 255 255 / 0.24);
+  --other-transparency-white-32: rgba(255 255 255 / 0.32);
+  --other-transparency-white-48: rgba(255 255 255 / 0.48);
+  --other-transparency-black-08: rgba(0 0 0 / 0.08);
+  --other-transparency-black-12: rgba(0 0 0 / 0.12);
+  --other-transparency-black-16: rgba(0 0 0 / 0.16);
+  --other-transparency-black-24: rgba(0 0 0 / 0.24);
+  --other-transparency-black-32: rgba(0 0 0 / 0.32);
+  --other-transparency-black-48: rgba(0 0 0 / 0.48);
+}

package/src/theme/THEME_MAPPING.md

@@ -1,231 +0,0 @@
-# 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/themes/skyller/baseline.css

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

@@ -1,79 +0,0 @@
-: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

@@ -1,81 +0,0 @@
-: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);
-}