@fastwork/xosmoz-theme 0.0.41 → 0.2.0

package/llms.txt

@@ -49,13 +49,15 @@ Surface colors that adapt between light and dark themes.
 
 | Variable | Purpose |
 |----------|---------|
-| `--xz-color-bg-100` | Page background |
-| `--xz-color-bg-200` | Elevated surface (cards, modals) |
-| `--xz-color-bg-300` | Secondary surface |
-| `--xz-color-bg-400` | Tertiary surface / hover states |
-| `--xz-color-fg-100` | Primary text color |
-| `--xz-color-fg-200` | Secondary/muted text (80% opacity of fg-100) |
-| `--xz-color-fg-300` | Tertiary/disabled text (60% opacity of fg-100) |
+| `--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-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-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-line-100` | Subtle borders |
 | `--xz-color-line-200` | Default borders |
 | `--xz-color-line-300` | Strong/emphasized borders |
@@ -76,11 +78,11 @@ Each category follows the same token structure. Replace `{name}` with the catego
 | `--xz-color-{name}-line-300` | Strong 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-50` | Text on solid bg — use for text over `{name}-bg-100`/`bg-200` (typically white) |
-| `--xz-color-{name}-fg-100` | Main text color for that semantic meaning |
-| `--xz-color-{name}-fg-200` | Darkest/emphasized text |
+| `--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 |
 
-**Important: `fg-50` is specifically for text rendered on top of solid background colors (`bg-100`/`bg-200`) of the same palette.** For example, use `--xz-color-primary-fg-50` as the text color on a `--xz-color-primary-bg-100` button. This is typically white in light theme.
+**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.
 
 ### Raw Color Palettes
 
@@ -158,8 +160,8 @@ import { lightTheme, darkTheme, themes, getTheme, getThemeNames } from '@fastwor
 
 // Access theme colors
 lightTheme.colors.primary.bg[100]    // 'oklch(0.58 .2524 260)'
-lightTheme.colors.primary.fg[50]     // 'oklch(1 0 0)' — white text for solid bg
-lightTheme.colors.fg[100]            // primary text color
+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
 
 // Get theme by name
@@ -195,7 +197,7 @@ import type { ThemeConfig, ThemeName, ColorToken, TypographyToken } from '@fastw
 ```css
 .button-primary {
   background: var(--xz-color-primary-bg-100);
-  color: var(--xz-color-primary-fg-50); /* white text on solid bg */
+  color: var(--xz-color-primary-fg-100); /* white text on solid bg */
   font: var(--xz-font-subtitle1-bold);
   border: none;
   border-radius: 0.5rem;
@@ -210,7 +212,7 @@ import type { ThemeConfig, ThemeName, ColorToken, TypographyToken } from '@fastw
 ```css
 .button-secondary {
   background: transparent;
-  color: var(--xz-color-primary-fg-100);
+  color: var(--xz-color-primary-text-100);
   border: 1px solid var(--xz-color-line-100);
 }
 ```
@@ -219,8 +221,8 @@ import type { ThemeConfig, ThemeName, ColorToken, TypographyToken } from '@fastw
 
 ```css
 .card {
-  background: var(--xz-color-bg-200);
-  color: var(--xz-color-fg-100);
+  background: var(--xz-color-surface-200);
+  color: var(--xz-color-text-100);
   border: 1px solid var(--xz-color-line-100);
   border-radius: 0.75rem;
   box-shadow: var(--xz-box-shadow-200);
@@ -232,13 +234,13 @@ import type { ThemeConfig, ThemeName, ColorToken, TypographyToken } from '@fastw
 ```css
 .alert-success {
   background: var(--xz-color-success-soft-100);
-  color: var(--xz-color-success-fg-100);
+  color: var(--xz-color-success-text-100);
   border: 1px solid var(--xz-color-success-line-100);
 }
 
 .badge-danger {
   background: var(--xz-color-danger-bg-100);
-  color: var(--xz-color-danger-fg-50); /* white text on solid bg */
+  color: var(--xz-color-danger-fg-100); /* white text on solid bg */
 }
 ```
 
@@ -246,8 +248,8 @@ import type { ThemeConfig, ThemeName, ColorToken, TypographyToken } from '@fastw
 
 ```css
 .input {
-  background: var(--xz-color-bg-100);
-  color: var(--xz-color-fg-100);
+  background: var(--xz-color-surface-100);
+  color: var(--xz-color-text-100);
   border: 1px solid var(--xz-color-line-200);
   font: var(--xz-font-body1);
 }
@@ -261,9 +263,9 @@ import type { ThemeConfig, ThemeName, ColorToken, TypographyToken } from '@fastw
 
 ```css
 .text-muted {
-  color: var(--xz-color-fg-200);
+  color: var(--xz-color-text-200);
 }
 .text-disabled {
-  color: var(--xz-color-fg-300);
+  color: var(--xz-color-text-300);
 }
 ```

package/package.json

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