@fastwork/xosmoz-theme 0.47.0 → 0.48.0

package/dist/themes/light.css

@@ -14,13 +14,13 @@
   --xz-color-bg-100: oklch(0.312 0.02 260.638);
   --xz-color-bg-200: oklch(0.212 0.02 260.638);
   --xz-color-surface-50: oklch(1.00 0.00 260);
-  --xz-color-surface-100: oklch(0.98 0.005 260);
-  --xz-color-surface-200: oklch(0.96 0.01 260);
-  --xz-color-surface-300: oklch(0.95 0.01 260);
-  --xz-color-surface-400: oklch(0.92 0.01 260);
+  --xz-color-surface-100: oklch(0.98 0.00 260);
+  --xz-color-surface-200: oklch(0.96 0.00 260);
+  --xz-color-surface-300: oklch(0.95 0.00 260);
+  --xz-color-surface-400: oklch(0.92 0.00 260);
   --xz-color-fg-100: oklch(1 0 0);
-  --xz-color-soft-100: color-mix(color-mix(in oklab, var(--xz-color-bg-100) 2.5%, transparent), var(--xz-color-fastwork) 2.5%);
-  --xz-color-soft-200: color-mix(color-mix(in oklab, var(--xz-color-bg-100) 5%, transparent), var(--xz-color-fastwork) 5%);
+  --xz-color-soft-100: color-mix(in oklab, var(--xz-color-bg-100) 4%, transparent);
+  --xz-color-soft-200: color-mix(in oklab, var(--xz-color-bg-100) 7%, transparent);
   --xz-color-text-100: oklch(21% 0.006 285.885);
   --xz-color-text-200: color-mix(in oklab, var(--xz-color-text-100) 70%, transparent);
   --xz-color-text-300: color-mix(in oklab, var(--xz-color-text-100) 60%, transparent);

package/dist/themes.css

@@ -25,13 +25,13 @@
   --xz-color-bg-100: oklch(0.312 0.02 260.638);
   --xz-color-bg-200: oklch(0.212 0.02 260.638);
   --xz-color-surface-50: oklch(1.00 0.00 260);
-  --xz-color-surface-100: oklch(0.98 0.005 260);
-  --xz-color-surface-200: oklch(0.96 0.01 260);
-  --xz-color-surface-300: oklch(0.95 0.01 260);
-  --xz-color-surface-400: oklch(0.92 0.01 260);
+  --xz-color-surface-100: oklch(0.98 0.00 260);
+  --xz-color-surface-200: oklch(0.96 0.00 260);
+  --xz-color-surface-300: oklch(0.95 0.00 260);
+  --xz-color-surface-400: oklch(0.92 0.00 260);
   --xz-color-fg-100: oklch(1 0 0);
-  --xz-color-soft-100: color-mix(color-mix(in oklab, var(--xz-color-bg-100) 2.5%, transparent), var(--xz-color-fastwork) 2.5%);
-  --xz-color-soft-200: color-mix(color-mix(in oklab, var(--xz-color-bg-100) 5%, transparent), var(--xz-color-fastwork) 5%);
+  --xz-color-soft-100: color-mix(in oklab, var(--xz-color-bg-100) 4%, transparent);
+  --xz-color-soft-200: color-mix(in oklab, var(--xz-color-bg-100) 7%, transparent);
   --xz-color-text-100: oklch(21% 0.006 285.885);
   --xz-color-text-200: color-mix(in oklab, var(--xz-color-text-100) 70%, transparent);
   --xz-color-text-300: color-mix(in oklab, var(--xz-color-text-100) 60%, transparent);
@@ -191,8 +191,8 @@
   --xz-color-surface-200: oklch(0.33 0.02 269 / 1);
   --xz-color-surface-300: oklch(0.355 0.02 269 / 1);
   --xz-color-surface-400: oklch(0.37 0.02 269 / 1);
-  --xz-color-soft-100: color-mix(color-mix(in oklab, var(--xz-color-bg-100) 2.5%, transparent), var(--xz-color-fastwork) 2.5%);
-  --xz-color-soft-200: color-mix(color-mix(in oklab, var(--xz-color-bg-100) 5%, transparent), var(--xz-color-fastwork) 5%);
+  --xz-color-soft-100: color-mix(in oklab, var(--xz-color-bg-100) 4%, transparent);
+  --xz-color-soft-200: color-mix(in oklab, var(--xz-color-bg-100) 7%, transparent);
   --xz-color-fg-100: oklch(0 0 0);
   --xz-color-text-100: oklch(0.96 0.01 260 / 1);
   --xz-color-text-200: color-mix(in oklab, var(--xz-color-text-100) 65%, transparent);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@fastwork/xosmoz-theme",
-	"version": "0.47.0",
+	"version": "0.48.0",
 	"description": "Xosmoz Theme - Design tokens and theming system for Xosmoz",
 	"main": "./dist/index.js",
 	"module": "./dist/index.mjs",

package/llms.txt

@@ -1,502 +0,0 @@
-# @fastwork/xosmoz-theme — Color Tokens & Usage Guide
-
-> Design token system for Xosmoz. Uses OKLCH color space. Supports light and dark themes via CSS variables and `data-theme` attribute. This guide covers color tokens only (CSS variables).
-
----
-
-## Setup
-
-### Install
-
-```bash
-npm install @fastwork/xosmoz-theme
-```
-
-### CSS Imports
-
-```css
-/* Base styles: CSS reset, font imports, typography/spacing tokens */
-@import '@fastwork/xosmoz-theme/base.css';
-
-/* All themes (light + dark) */
-@import '@fastwork/xosmoz-theme/themes.css';
-
-/* OR import a specific theme only */
-@import '@fastwork/xosmoz-theme/themes/light.css';
-@import '@fastwork/xosmoz-theme/themes/dark.css';
-```
-
-### Theme Switching
-
-Light theme is the default. Set `data-theme="dark"` on `<html>` for dark mode.
-
-```html
-<html>...</html>                   <!-- Light theme (default) -->
-<html data-theme="dark">...</html> <!-- Dark theme -->
-```
-
-```javascript
-// Switch at runtime
-document.documentElement.setAttribute('data-theme', 'dark');
-document.documentElement.removeAttribute('data-theme'); // back to light
-```
-
----
-
-## Color Token Architecture
-
-The system has two layers:
-
-### Layer 1 — Palette Tokens (primitives)
-Eight raw color values. These are single CSS variables (no numbered scales). They are the same in both light and dark themes.
-
-```
---xz-color-fastwork   (brand blue-purple)
---xz-color-gray
---xz-color-green
---xz-color-yellow
---xz-color-red
---xz-color-orange
---xz-color-purple
---xz-color-cyan
-```
-
-**Rule: Do not use palette tokens directly in UI.** They exist as internal primitives. Always use semantic tokens instead.
-
-### Layer 2 — Semantic Tokens (theme-aware)
-These tokens change values between light and dark themes. Always use these for UI components, text, borders, and backgrounds.
-
-Pattern: `--xz-color-{category}-{property}-{scale}`
-
----
-
-## Base Tokens
-
-Base tokens cover surfaces, text, borders, and neutral overlays. They are theme-aware (change in dark mode).
-
-| CSS Variable | Purpose |
-|---|---|
-| `--xz-color-surface-50` | Absolute white/darkest background (page canvas extreme) |
-| `--xz-color-surface-100` | Default page background |
-| `--xz-color-surface-200` | Elevated surface — cards, modals |
-| `--xz-color-surface-300` | Secondary elevated surface |
-| `--xz-color-surface-400` | Tertiary elevated surface — popovers, dropdowns |
-| `--xz-color-bg-100` | Extreme base (near-black in light / near-white in dark) |
-| `--xz-color-bg-200` | Secondary extreme base |
-| `--xz-color-fg-100` | Text/icon on bg-100 and bg-200 |
-| `--xz-color-text-100` | Primary text |
-| `--xz-color-text-200` | Secondary / muted text (70% opacity) |
-| `--xz-color-text-300` | Disabled / placeholder text (60% opacity) |
-| `--xz-color-soft-100` | Very subtle neutral overlay (5% opacity) |
-| `--xz-color-soft-200` | Subtle neutral overlay (10% opacity) |
-| `--xz-color-line-100` | Subtle border |
-| `--xz-color-line-200` | Default border |
-| `--xz-color-line-300` | Emphasized border |
-
----
-
-## Semantic Tokens
-
-Eight categories. Categories: `primary`, `danger`, `success`, `warning`, `info`, `neutral`, `orange`, `purple`. Most categories have 11 tokens; `neutral` has 12 (includes an extra `text-200`).
-
-### Token Pattern per Category
-
-Replace `{name}` with the category:
-
-| CSS Variable | Purpose |
-|---|---|
-| `--xz-color-{name}-soft-100` | Tinted transparent background — lightest (10% opacity of base color) |
-| `--xz-color-{name}-soft-200` | Tinted transparent background — stronger (16% opacity), use for hover |
-| `--xz-color-{name}-soft-solid-100` | Opaque version of soft-100 (mixed into surface-100) — use on overlapping surfaces |
-| `--xz-color-{name}-soft-solid-200` | Opaque version of soft-200 |
-| `--xz-color-{name}-line-100` | Subtle colored border |
-| `--xz-color-{name}-line-200` | Default colored border |
-| `--xz-color-{name}-line-300` | Strong colored border |
-| `--xz-color-{name}-bg-100` | Solid fill background — buttons, chips, badges |
-| `--xz-color-{name}-bg-200` | Solid fill hover/pressed state |
-| `--xz-color-{name}-fg-100` | Text/icon on solid bg — **always pair with bg-100 / bg-200** |
-| `--xz-color-{name}-text-100` | Colored text on light surfaces — links, status labels |
-
-> **`neutral` exception:** also includes `--xz-color-neutral-text-200` — Muted neutral text, lighter than `text-100`. Use for supporting content, secondary labels.
-
-### Key Rules for Semantic Tokens
-
-- **`bg-100` + `fg-100`**: Solid fill components (buttons, solid badges). `fg-100` provides correct contrast (white or dark depending on the category color).
-- **`soft-100` + `text-100` + `line-100`**: Soft/tinted style (alerts, soft badges, highlighted rows).
-- **`soft-solid-*`**: Use instead of `soft-*` when the component sits on a non-transparent surface (e.g., inside a card that has its own background).
-- **`text-100`**: Use for colored text that sits on surface backgrounds (not on solid fills). Examples: link text, status label text, tag text.
-- **`line-*`**: Colored borders. Use `line-200` as the default, `line-100` for subtle, `line-300` for strong/emphasized.
-
----
-
-## Alpha & Overlay Tokens
-
-These use a 100–1000 scale representing opacity from 0.1 to 1.0.
-
-```
---xz-color-black-alpha-100   (black at 10% opacity)
---xz-color-black-alpha-200   (black at 20% opacity)
-...
---xz-color-black-alpha-1000  (black at 100% opacity)
-
---xz-color-white-alpha-100   (white at 10% opacity)
-...
---xz-color-white-alpha-1000  (white at 100% opacity)
-
---xz-color-overlay-100       (dark overlay at 10% opacity)
-...
---xz-color-overlay-1000      (dark overlay at 100% opacity)
-```
-
-Use `overlay-*` for modal/drawer backdrops. Use `black-alpha-*` / `white-alpha-*` for scrim layers or icon fills with transparency.
-
----
-
-## Usage Guidelines
-
-### Backgrounds & Surfaces
-
-| Situation | Use |
-|---|---|
-| Page background | `--xz-color-surface-100` |
-| Card, modal, dialog | `--xz-color-surface-200` |
-| Nested card or secondary panel | `--xz-color-surface-300` |
-| Popover, dropdown, tooltip | `--xz-color-surface-400` |
-| Inverted/dark block on page | `--xz-color-bg-100` |
-| Text on inverted block | `--xz-color-fg-100` |
-
-### Text
-
-| Situation | Use |
-|---|---|
-| Body text, headings | `--xz-color-text-100` |
-| Secondary / helper text | `--xz-color-text-200` |
-| Placeholder / disabled text | `--xz-color-text-300` |
-| Colored status text (link, tag, label) | `--xz-color-{name}-text-100` |
-
-### Borders
-
-| Situation | Use |
-|---|---|
-| Subtle separator, divider | `--xz-color-line-100` |
-| Default input or card border | `--xz-color-line-200` |
-| Strong border, active outline | `--xz-color-line-300` |
-| Colored border (semantic) | `--xz-color-{name}-line-100/200/300` |
-
-### Solid Components (Buttons, Solid Badges)
-
-```
-background: --xz-color-{name}-bg-100
-color:      --xz-color-{name}-fg-100   ← always use fg-100 on bg-100
-hover bg:   --xz-color-{name}-bg-200
-```
-
-### Soft/Tinted Components (Alerts, Soft Badges)
-
-```
-background: --xz-color-{name}-soft-100
-color:      --xz-color-{name}-text-100
-border:     1px solid --xz-color-{name}-line-100
-```
-
-### Outline/Ghost Components
-
-```
-background: transparent
-color:      --xz-color-{name}-text-100
-border:     1px solid --xz-color-{name}-line-200
-```
-
-### Focus Ring
-
-```
-border-color: --xz-color-{name}-line-200
-box-shadow:   0 0 0 3px --xz-color-{name}-soft-100
-```
-
-### Modal Backdrop
-
-```
-background: --xz-color-overlay-600
-```
-
----
-
-## Common UI Patterns
-
-### Primary Button
-
-```css
-.btn-primary {
-  background: var(--xz-color-primary-bg-100);
-  color: var(--xz-color-primary-fg-100);
-  border: none;
-}
-.btn-primary:hover {
-  background: var(--xz-color-primary-bg-200);
-}
-```
-
-### Outline Button
-
-```css
-.btn-outline {
-  background: transparent;
-  color: var(--xz-color-primary-text-100);
-  border: 1px solid var(--xz-color-primary-line-200);
-}
-.btn-outline:hover {
-  background: var(--xz-color-primary-soft-100);
-}
-```
-
-### Danger Button
-
-```css
-.btn-danger {
-  background: var(--xz-color-danger-bg-100);
-  color: var(--xz-color-danger-fg-100);
-  border: none;
-}
-.btn-danger:hover {
-  background: var(--xz-color-danger-bg-200);
-}
-```
-
-### Card
-
-```css
-.card {
-  background: var(--xz-color-surface-200);
-  color: var(--xz-color-text-100);
-  border: 1px solid var(--xz-color-line-100);
-}
-```
-
-### Alert (soft style)
-
-```css
-/* Replace {name} with: success | danger | warning | info */
-.alert-success {
-  background: var(--xz-color-success-soft-100);
-  color: var(--xz-color-success-text-100);
-  border: 1px solid var(--xz-color-success-line-100);
-}
-.alert-danger {
-  background: var(--xz-color-danger-soft-100);
-  color: var(--xz-color-danger-text-100);
-  border: 1px solid var(--xz-color-danger-line-100);
-}
-.alert-warning {
-  background: var(--xz-color-warning-soft-100);
-  color: var(--xz-color-warning-text-100);
-  border: 1px solid var(--xz-color-warning-line-100);
-}
-.alert-info {
-  background: var(--xz-color-info-soft-100);
-  color: var(--xz-color-info-text-100);
-  border: 1px solid var(--xz-color-info-line-100);
-}
-```
-
-### Badge — Soft
-
-```css
-.badge-success {
-  background: var(--xz-color-success-soft-100);
-  color: var(--xz-color-success-text-100);
-}
-```
-
-### Badge — Solid
-
-```css
-.badge-danger-solid {
-  background: var(--xz-color-danger-bg-100);
-  color: var(--xz-color-danger-fg-100);
-}
-```
-
-### Form Input
-
-```css
-.input {
-  background: var(--xz-color-surface-100);
-  color: var(--xz-color-text-100);
-  border: 1px solid var(--xz-color-line-200);
-}
-.input::placeholder {
-  color: var(--xz-color-text-300);
-}
-.input:focus {
-  border-color: var(--xz-color-primary-line-200);
-  box-shadow: 0 0 0 3px var(--xz-color-primary-soft-100);
-  outline: none;
-}
-.input.error {
-  border-color: var(--xz-color-danger-line-200);
-  box-shadow: 0 0 0 3px var(--xz-color-danger-soft-100);
-}
-```
-
-### Text Hierarchy
-
-```css
-.text-primary   { color: var(--xz-color-text-100); }
-.text-muted     { color: var(--xz-color-text-200); }
-.text-disabled  { color: var(--xz-color-text-300); }
-.text-link      { color: var(--xz-color-primary-text-100); }
-.text-danger    { color: var(--xz-color-danger-text-100); }
-.text-success   { color: var(--xz-color-success-text-100); }
-```
-
----
-
-## Figma Variables Guide
-
-Figma variables mirror the CSS token system exactly. Every CSS variable has a corresponding Figma variable in the same collection.
-
-### Collection Structure
-
-- **Collection name**: `colors`
-- **Modes**: `Light` and `Dark`
-- **Total variables**: ~160 color variables
-
-### Naming Pattern
-
-Figma uses slash-separated paths. The mapping to CSS is direct:
-
-| Variable type | Figma path | CSS variable |
-|---|---|---|
-| Base theme token | `theme/base/{property}/{scale}` | `--xz-color-{property}-{scale}` |
-| Semantic theme token | `theme/{category}/{property}/{scale}` | `--xz-color-{category}-{property}-{scale}` |
-| Alpha token | `theme/blackAlpha/{scale}` | `--xz-color-black-alpha-{scale}` |
-| Alpha token | `theme/whiteAlpha/{scale}` | `--xz-color-white-alpha-{scale}` |
-| Overlay token | `theme/overlay/{scale}` | `--xz-color-overlay-{scale}` |
-| Palette primitive | `palette/{name}` | `--xz-color-{name}` |
-
-### Complete Figma → CSS Mapping
-
-#### Base (16 variables)
-
-| Figma Variable | CSS Variable |
-|---|---|
-| `theme/base/bg/100` | `--xz-color-bg-100` |
-| `theme/base/bg/200` | `--xz-color-bg-200` |
-| `theme/base/surface/50` | `--xz-color-surface-50` |
-| `theme/base/surface/100` | `--xz-color-surface-100` |
-| `theme/base/surface/200` | `--xz-color-surface-200` |
-| `theme/base/surface/300` | `--xz-color-surface-300` |
-| `theme/base/surface/400` | `--xz-color-surface-400` |
-| `theme/base/fg/100` | `--xz-color-fg-100` |
-| `theme/base/soft/100` | `--xz-color-soft-100` |
-| `theme/base/soft/200` | `--xz-color-soft-200` |
-| `theme/base/text/100` | `--xz-color-text-100` |
-| `theme/base/text/200` | `--xz-color-text-200` |
-| `theme/base/text/300` | `--xz-color-text-300` |
-| `theme/base/line/100` | `--xz-color-line-100` |
-| `theme/base/line/200` | `--xz-color-line-200` |
-| `theme/base/line/300` | `--xz-color-line-300` |
-
-#### Semantic Categories (11 variables each; neutral has 12)
-
-Same pattern for all 8 categories: `primary`, `danger`, `success`, `warning`, `info`, `neutral`, `orange`, `purple`.
-
-| Figma Variable | CSS Variable |
-|---|---|
-| `theme/{name}/soft/100` | `--xz-color-{name}-soft-100` |
-| `theme/{name}/soft/200` | `--xz-color-{name}-soft-200` |
-| `theme/{name}/softSolid/100` | `--xz-color-{name}-soft-solid-100` |
-| `theme/{name}/softSolid/200` | `--xz-color-{name}-soft-solid-200` |
-| `theme/{name}/line/100` | `--xz-color-{name}-line-100` |
-| `theme/{name}/line/200` | `--xz-color-{name}-line-200` |
-| `theme/{name}/line/300` | `--xz-color-{name}-line-300` |
-| `theme/{name}/bg/100` | `--xz-color-{name}-bg-100` |
-| `theme/{name}/bg/200` | `--xz-color-{name}-bg-200` |
-| `theme/{name}/fg/100` | `--xz-color-{name}-fg-100` |
-| `theme/{name}/text/100` | `--xz-color-{name}-text-100` |
-
-> **`neutral` exception:** also includes `theme/neutral/text/200` → `--xz-color-neutral-text-200`.
-
-#### Black Alpha (10 variables)
-
-| Figma Variable | CSS Variable |
-|---|---|
-| `theme/blackAlpha/100` | `--xz-color-black-alpha-100` |
-| `theme/blackAlpha/200` | `--xz-color-black-alpha-200` |
-| `theme/blackAlpha/300` | `--xz-color-black-alpha-300` |
-| `theme/blackAlpha/400` | `--xz-color-black-alpha-400` |
-| `theme/blackAlpha/500` | `--xz-color-black-alpha-500` |
-| `theme/blackAlpha/600` | `--xz-color-black-alpha-600` |
-| `theme/blackAlpha/700` | `--xz-color-black-alpha-700` |
-| `theme/blackAlpha/800` | `--xz-color-black-alpha-800` |
-| `theme/blackAlpha/900` | `--xz-color-black-alpha-900` |
-| `theme/blackAlpha/1000` | `--xz-color-black-alpha-1000` |
-
-#### White Alpha (10 variables)
-
-| Figma Variable | CSS Variable |
-|---|---|
-| `theme/whiteAlpha/100` | `--xz-color-white-alpha-100` |
-| `theme/whiteAlpha/200` | `--xz-color-white-alpha-200` |
-| `theme/whiteAlpha/300` | `--xz-color-white-alpha-300` |
-| `theme/whiteAlpha/400` | `--xz-color-white-alpha-400` |
-| `theme/whiteAlpha/500` | `--xz-color-white-alpha-500` |
-| `theme/whiteAlpha/600` | `--xz-color-white-alpha-600` |
-| `theme/whiteAlpha/700` | `--xz-color-white-alpha-700` |
-| `theme/whiteAlpha/800` | `--xz-color-white-alpha-800` |
-| `theme/whiteAlpha/900` | `--xz-color-white-alpha-900` |
-| `theme/whiteAlpha/1000` | `--xz-color-white-alpha-1000` |
-
-#### Overlay (10 variables)
-
-| Figma Variable | CSS Variable |
-|---|---|
-| `theme/overlay/100` | `--xz-color-overlay-100` |
-| `theme/overlay/200` | `--xz-color-overlay-200` |
-| `theme/overlay/300` | `--xz-color-overlay-300` |
-| `theme/overlay/400` | `--xz-color-overlay-400` |
-| `theme/overlay/500` | `--xz-color-overlay-500` |
-| `theme/overlay/600` | `--xz-color-overlay-600` |
-| `theme/overlay/700` | `--xz-color-overlay-700` |
-| `theme/overlay/800` | `--xz-color-overlay-800` |
-| `theme/overlay/900` | `--xz-color-overlay-900` |
-| `theme/overlay/1000` | `--xz-color-overlay-1000` |
-
-#### Palette (8 variables)
-
-| Figma Variable | CSS Variable |
-|---|---|
-| `palette/fastwork` | `--xz-color-fastwork` |
-| `palette/gray` | `--xz-color-gray` |
-| `palette/green` | `--xz-color-green` |
-| `palette/yellow` | `--xz-color-yellow` |
-| `palette/red` | `--xz-color-red` |
-| `palette/orange` | `--xz-color-orange` |
-| `palette/purple` | `--xz-color-purple` |
-| `palette/cyan` | `--xz-color-cyan` |
-
-### How to Use Figma Variables in Designs
-
-1. Select a layer in Figma (frame, text, shape, etc.)
-2. In the Fill or Stroke panel, click the color swatch
-3. Switch to the **Variables** tab in the color picker
-4. Pick from the `colors` collection
-
-**Rules for Figma:**
-- Always use `theme/*` variables for component fills, text colors, and stroke colors
-- Use `palette/*` variables only as references — not directly on components
-- Use `theme/base/surface/100` for page backgrounds, `theme/base/surface/200` for cards
-- Use `theme/{name}/bg/100` for solid-filled elements and `theme/{name}/fg/100` for text on top of them
-- Switch between Light/Dark previews using the **Mode** toggle on the variable collection
-
-### Keeping Figma in Sync with Code
-
-Variables are synced from the npm package via the **XOSMOZ Theme Sync** plugin:
-
-1. Open **Plugins → Development → XOSMOZ Theme Sync** in Figma
-2. Select your variable collection from the dropdown
-3. Click **"Check for Updates"** to see if any colors changed
-4. Click **"Update Variables"** to apply changes to both Light and Dark modes at once
-
-If starting a new Figma file, use **"Create New Collection"** to generate all variables from scratch.