@fastwork/xosmoz-theme 0.14.0 → 0.16.0

package/llms.txt

@@ -52,12 +52,14 @@ Surface colors that adapt between light and dark themes.
 | `--xz-color-surface-100` | Page background |
 | `--xz-color-surface-200` | Elevated surface (cards, modals) |
 | `--xz-color-surface-300` | Secondary surface |
-| `--xz-color-surface-400` | Tertiary surface / hover states |
+| `--xz-color-surface-400` | Tertiary surface / popovers |
 | `--xz-color-text-100` | Primary text color |
-| `--xz-color-text-200` | Secondary/muted text (80% opacity of text-100) |
-| `--xz-color-text-300` | Tertiary/disabled text (60% opacity of text-100) |
+| `--xz-color-text-200` | Secondary/muted text (70% opacity) |
+| `--xz-color-text-300` | Tertiary/disabled text (50% opacity) |
 | `--xz-color-bg-100` | Extreme base background (near-black in light, near-white in dark) |
 | `--xz-color-fg-100` | Text on bg-100 (white in light, black in dark) |
+| `--xz-color-soft-100` | Very subtle overlay (5% opacity of bg) |
+| `--xz-color-soft-200` | Subtle overlay (10% opacity of bg) |
 | `--xz-color-line-100` | Subtle borders |
 | `--xz-color-line-200` | Default borders |
 | `--xz-color-line-300` | Strong/emphasized borders |
@@ -70,19 +72,17 @@ Each category follows the same token structure. Replace `{name}` with the catego
 
 | Variable | Purpose |
 |----------|---------|
-| `--xz-color-{name}-soft-100` | Lightest soft background |
-| `--xz-color-{name}-soft-200` | Medium soft background |
-| `--xz-color-{name}-soft-300` | Darkest soft background |
-| `--xz-color-{name}-line-100` | Subtle border |
-| `--xz-color-{name}-line-200` | Default border |
-| `--xz-color-{name}-line-300` | Strong border |
+| `--xz-color-{name}-soft-100` | Lightest tinted background |
+| `--xz-color-{name}-soft-200` | Stronger tinted background (hover states) |
+| `--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 (e.g. button bg) |
 | `--xz-color-{name}-bg-200` | Darker solid fill (e.g. hover state) |
-| `--xz-color-{name}-fg-100` | Text on solid bg — use for text over `{name}-bg-100`/`bg-200` (typically white) |
-| `--xz-color-{name}-text-100` | Main text color for that semantic meaning |
-| `--xz-color-{name}-text-200` | Darkest/emphasized text |
+| `--xz-color-{name}-fg-100` | Text on solid bg — use over `{name}-bg-100`/`bg-200` (typically white) |
+| `--xz-color-{name}-text-100` | Colored text on surfaces (links, status labels) |
 
-**Important: `fg-100` is the foreground color for text on solid backgrounds (`bg-100`/`bg-200`) of the same palette.** For example, use `--xz-color-primary-fg-100` as the text color on a `--xz-color-primary-bg-100` button. This is typically white.
+**Important: `fg-100` is the foreground color for text on solid backgrounds (`bg-100`/`bg-200`).** Use `--xz-color-primary-fg-100` as the text color on a `--xz-color-primary-bg-100` button. This is typically white.
 
 ### Raw Color Palettes
 
@@ -129,7 +129,7 @@ Alpha palettes (`black-alpha`, `white-alpha`) use opacity steps from 0.1 to 1.0.
 --xz-line-height-200pct  (2)
 ```
 
-**Font shorthand tokens** (responsive — desktop sizes, scales down on mobile <=768px):
+**Font shorthand tokens** (responsive — desktop sizes, scales down on mobile ≤768px):
 
 ```
 --xz-font-heading1 through --xz-font-heading6  (secondary font, bold)
@@ -158,11 +158,26 @@ Usage: `font: var(--xz-font-heading1);`
 ```typescript
 import { lightTheme, darkTheme, themes, getTheme, getThemeNames } from '@fastwork/xosmoz-theme';
 
-// Access theme colors
-lightTheme.colors.primary.bg[100]    // 'oklch(0.58 .2524 260)'
-lightTheme.colors.primary.fg[100]      // 'oklch(1 0 0)' — white text for solid bg
-lightTheme.colors.text[100]            // primary text color
-lightTheme.colors.fastwork[700]      // raw palette value
+// Access raw palette colors
+lightTheme.colors.fastwork[600]       // 'oklch(0.613 0.233 260.608)'
+lightTheme.colors.gray[300]           // raw palette value
+
+// Access semantic colors
+lightTheme.colors.primary.bg[100]     // solid fill color
+lightTheme.colors.primary.fg[100]     // white text for solid bg
+lightTheme.colors.primary.text[100]   // colored text on surfaces
+lightTheme.colors.primary.soft[100]   // tinted background
+lightTheme.colors.primary.line[200]   // border color
+
+// Access base tokens
+lightTheme.colors.surface[200]        // card background
+lightTheme.colors.text[100]           // primary text
+
+// Access box shadows (on theme objects)
+lightTheme.boxShadows[100]            // '0 1px 2px 0 rgba(0, 0, 0, 0.08)'
+lightTheme.boxShadows[200]            // '0 2px 6px 0 rgba(0, 0, 0, 0.10)'
+lightTheme.boxShadows[300]            // '0 4px 16px 0 rgba(0, 0, 0, 0.12)'
+lightTheme.boxShadows[400]            // '0 8px 20px 0 rgba(0, 0, 0, 0.14)'
 
 // Get theme by name
 const theme = getTheme('dark');
@@ -174,20 +189,33 @@ const names = getThemeNames(); // ['light', 'dark']
 ### Design tokens
 
 ```typescript
-import { fontSize, fontWeight, fontFamily, lineHeight, font, boxShadows } from '@fastwork/xosmoz-theme/tokens';
-
-fontSize[400]       // '1rem'
-fontWeight[700]     // 700
-fontFamily.primary  // system sans-serif stack
-fontFamily.secondary // "Fastwork" + fallbacks
-font.heading1       // { fontFamily, fontSize: { desktop, mobile }, fontWeight, lineHeight }
-boxShadows[300]     // '0 4px 16px 0 rgba(0, 0, 0, 0.12)'
+import { fontSize, fontWeight, fontFamily, lineHeight, font, typography } from '@fastwork/xosmoz-theme/tokens';
+
+fontSize[400]         // '1rem'
+fontSize[700]         // '1.5rem'
+fontWeight[700]       // 700
+fontFamily.primary    // system sans-serif stack
+fontFamily.secondary  // "Fastwork" + fallbacks
+lineHeight['150pct']  // '1.5'
+
+font.heading1         // { fontFamily, fontSize: { desktop, mobile }, fontWeight, lineHeight }
+font.title2
+font.subtitle1Bold
+font.body1
 ```
 
 ### Types
 
 ```typescript
-import type { ThemeConfig, ThemeName, ColorToken, TypographyToken } from '@fastwork/xosmoz-theme';
+import type {
+  ThemeConfig,
+  ThemeName,
+  ThemeRegistry,
+  ColorToken,
+  TypographyToken,
+  TypographyScale,
+  FontWeights,
+} from '@fastwork/xosmoz-theme';
 ```
 
 ## Common Patterns
@@ -213,7 +241,7 @@ import type { ThemeConfig, ThemeName, ColorToken, TypographyToken } from '@fastw
 .button-secondary {
   background: transparent;
   color: var(--xz-color-primary-text-100);
-  border: 1px solid var(--xz-color-line-100);
+  border: 1px solid var(--xz-color-primary-line-200);
 }
 ```
 
@@ -262,10 +290,6 @@ import type { ThemeConfig, ThemeName, ColorToken, TypographyToken } from '@fastw
 ### Muted/secondary text
 
 ```css
-.text-muted {
-  color: var(--xz-color-text-200);
-}
-.text-disabled {
-  color: var(--xz-color-text-300);
-}
+.text-muted    { color: var(--xz-color-text-200); }
+.text-disabled { color: var(--xz-color-text-300); }
 ```

package/package.json

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