@fastwork/xosmoz-theme 0.55.0 → 0.57.0

package/README.md

@@ -61,17 +61,19 @@ Surface and layout colors that adapt between light and dark themes.
 
 | Variable | Purpose |
 |----------|---------|
+| `--xz-color-surface-50` | Base white surface |
 | `--xz-color-surface-100` | Primary page background |
 | `--xz-color-surface-200` | Elevated surface (cards, modals) |
 | `--xz-color-surface-300` | Table headers, sidebars |
 | `--xz-color-surface-400` | Popovers, tooltips |
 | `--xz-color-text-100` | Primary text |
 | `--xz-color-text-200` | Secondary/muted text (70% opacity) |
-| `--xz-color-text-300` | Tertiary/disabled text (50% opacity) |
+| `--xz-color-text-300` | Tertiary/disabled text (60% opacity) |
 | `--xz-color-bg-100` | Extreme base background (near-black in light, near-white in dark) |
+| `--xz-color-bg-200` | Darker base background |
 | `--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-soft-100` | Very subtle overlay (4% opacity of bg) |
+| `--xz-color-soft-200` | Subtle overlay (7% opacity of bg) |
 | `--xz-color-line-50` | Subtle borders |
 | `--xz-color-line-100` | Default borders |
 | `--xz-color-line-200` | Strong/emphasized borders |
@@ -87,6 +89,8 @@ Each category follows the same token structure — replace `{name}` with the cat
 |----------|---------|
 | `--xz-color-{name}-soft-100` | Lightest tinted background (badges, highlights) |
 | `--xz-color-{name}-soft-200` | Stronger tinted background (hover states) |
+| `--xz-color-{name}-soft-solid-100` | Light color-mixed background (solid, no transparency) |
+| `--xz-color-{name}-soft-solid-200` | Stronger color-mixed background (solid, no transparency) |
 | `--xz-color-{name}-line-100` | Subtle colored border |
 | `--xz-color-{name}-line-200` | Default colored border (input focus) |
 | `--xz-color-{name}-line-300` | Strong colored border (active states) |
@@ -94,8 +98,7 @@ Each category follows the same token structure — replace `{name}` with the cat
 | `--xz-color-{name}-bg-200` | Darker solid fill (hover state) |
 | `--xz-color-{name}-fg-100` | Text on solid backgrounds — pair with `bg-100`/`bg-200` (typically white) |
 | `--xz-color-{name}-text-100` | Colored text on surfaces (links, labels) |
-
-> **`neutral` exception:** also includes `--xz-color-neutral-text-200` — Muted neutral text, lighter than `text-100`.
+| `--xz-color-{name}-text-200` | Darker colored text on surfaces |
 
 **Usage example:**
 
@@ -117,6 +120,16 @@ Each category follows the same token structure — replace `{name}` with the cat
 }
 ```
 
+### Alpha Overlays
+
+Three alpha overlay scales with steps from 100 (10% opacity) to 1000 (100% opacity):
+
+```css
+--xz-color-black-alpha-{100-1000}  /* black with increasing opacity */
+--xz-color-white-alpha-{100-1000}  /* white with increasing opacity */
+--xz-color-overlay-{100-1000}      /* overlay (black-based) with increasing opacity */
+```
+
 ### Raw Color Palettes
 
 Single base color per palette. Available palettes: `fastwork`, `gray`, `green`, `yellow`, `red`, `orange`, `purple`, `cyan`.
@@ -154,8 +167,8 @@ Each palette color is defined using OKLCH
 **Font families:**
 
 ```css
---xz-font-family-primary    /* system-ui sans-serif stack */
---xz-font-family-secondary  /* "Fastwork" + "Noto Sans Thai" + system fallbacks */
+--xz-font-family-primary    /* "Google Sans" + system sans-serif stack */
+--xz-font-family-secondary  /* "Google Sans" + "Fastwork" + "Noto Sans Thai" + system fallbacks */
 ```
 
 **Line heights:**
@@ -169,10 +182,10 @@ Each palette color is defined using OKLCH
 --xz-line-height-200pct  /* 2 */
 ```
 
-**Font shorthand tokens** — responsive, with desktop sizes scaling down on mobile (≤768px):
+**Font shorthand tokens** — headings are responsive (scale down on mobile ≤768px), other tokens use fixed sizes:
 
 ```css
-/* Headings — secondary font, bold */
+/* Headings — secondary font, bold, responsive */
 --xz-font-heading1  /* 72px desktop / 48px mobile */
 --xz-font-heading2  /* 64px desktop / 43px mobile */
 --xz-font-heading3  /* 56px desktop / 38px mobile */
@@ -181,24 +194,24 @@ Each palette color is defined using OKLCH
 --xz-font-heading6  /* 32px desktop / 24px mobile */
 
 /* Titles — primary font, bold */
---xz-font-title1    /* 24px desktop / 20px mobile */
---xz-font-title2    /* 20px desktop / 18px mobile */
---xz-font-title3    /* 18px desktop / 16px mobile */
---xz-font-title4    /* 16px desktop / 14px mobile */
+--xz-font-title1    /* 24px */
+--xz-font-title2    /* 20px */
+--xz-font-title3    /* 18px */
+--xz-font-title4    /* 16px */
 
 /* Subtitles — primary font, bold or regular */
 --xz-font-subtitle1-bold
---xz-font-subtitle1-regular  /* 16px desktop / 14px mobile */
+--xz-font-subtitle1-regular  /* 16px */
 --xz-font-subtitle2-bold
---xz-font-subtitle2-regular  /* 14px desktop / 12px mobile */
+--xz-font-subtitle2-regular  /* 14px */
 --xz-font-subtitle3-bold
---xz-font-subtitle3-regular  /* 12px desktop / 10px mobile */
+--xz-font-subtitle3-regular  /* 12px */
 
 /* Body — primary font, regular */
---xz-font-body1  /* 16px desktop / 14px mobile */
---xz-font-body2  /* 14px desktop / 12px mobile */
---xz-font-body3  /* 12px desktop / 10px mobile */
---xz-font-body4  /* 10px desktop / 8px mobile */
+--xz-font-body1  /* 16px */
+--xz-font-body2  /* 14px */
+--xz-font-body3  /* 12px */
+--xz-font-body4  /* 10px */
 ```
 
 Usage: `font: var(--xz-font-heading1);`
@@ -224,7 +237,7 @@ lightTheme.palette.fastwork.value          // 'oklch(0.57 0.237 260.608)'
 
 // Access semantic colors
 lightTheme.colors.primary.bg[100]     // solid fill color
-lightTheme.colors.primary.fg[100]     // 'oklch(1 0 0 / 0.95)' — white for text on solid bg
+lightTheme.colors.primary.fg[100]     // 'oklch(1 0 0 / 1)' — white for text on solid bg
 lightTheme.colors.primary.text[100]   // colored text
 lightTheme.colors.orange.bg[100]      // orange solid fill
 lightTheme.colors.purple.soft[100]    // purple tinted background
@@ -251,8 +264,8 @@ import { fontSize, fontWeight, fontFamily, lineHeight, font, typography } from '
 fontSize[400]         // '1rem'
 fontSize[700]         // '1.5rem'
 fontWeight[700]       // 700
-fontFamily.primary    // system sans-serif stack
-fontFamily.secondary  // "Fastwork" + fallbacks
+fontFamily.primary    // "Google Sans" + system sans-serif stack
+fontFamily.secondary  // "Google Sans" + "Fastwork" + "Noto Sans Thai" + fallbacks
 lineHeight['150pct']  // '1.5'
 
 // Semantic font tokens
@@ -393,6 +406,7 @@ Then activate it:
 | `@fastwork/xosmoz-theme/themes.css` | All themes (light + dark) |
 | `@fastwork/xosmoz-theme/themes/light.css` | Light theme colors only |
 | `@fastwork/xosmoz-theme/themes/dark.css` | Dark theme colors only |
+| `@fastwork/xosmoz-theme/llms.txt` | LLM context file for AI tooling |
 
 ## Development
 

package/dist/dart/xz_colors.generated.dart

@@ -179,14 +179,6 @@ class XzColors {
       300: Color(0xF7BABEC4),
     }),
     primary: XzRoleColor(
-      soft: {
-        100: Color(0x140057D8),
-        200: Color(0x1F0057D8),
-      },
-      softSolid: {
-        100: Color(0xFFE1E9F7),
-        200: Color(0xFFD3E0F6),
-      },
       line: {
         100: Color(0xFFBED2F4),
         200: Color(0xFF84ACED),
@@ -205,14 +197,6 @@ class XzColors {
       },
     ),
     danger: XzRoleColor(
-      soft: {
-        100: Color(0x14BC0002),
-        200: Color(0x1FBC0002),
-      },
-      softSolid: {
-        100: Color(0xFFF6E4E1),
-        200: Color(0xFFF4D7D3),
-      },
       line: {
         100: Color(0xFFF1C5BE),
         200: Color(0xFFE49285),
@@ -231,14 +215,6 @@ class XzColors {
       },
     ),
     success: XzRoleColor(
-      soft: {
-        100: Color(0x14007915),
-        200: Color(0x1F007915),
-      },
-      softSolid: {
-        100: Color(0xFFE2ECE2),
-        200: Color(0xFFD5E4D4),
-      },
       line: {
         100: Color(0xFFC2D8C1),
         200: Color(0xFF8CB98A),
@@ -257,14 +233,6 @@ class XzColors {
       },
     ),
     warning: XzRoleColor(
-      soft: {
-        100: Color(0x14835B00),
-        200: Color(0x1F835B00),
-      },
-      softSolid: {
-        100: Color(0xFFECE8E1),
-        200: Color(0xFFE5DED3),
-      },
       line: {
         100: Color(0xFFDACFBF),
         200: Color(0xFFBDA886),
@@ -283,14 +251,6 @@ class XzColors {
       },
     ),
     info: XzRoleColor(
-      soft: {
-        100: Color(0x14007081),
-        200: Color(0x1F007081),
-      },
-      softSolid: {
-        100: Color(0xFFE2EAEC),
-        200: Color(0xFFD5E2E5),
-      },
       line: {
         100: Color(0xFFC2D5DA),
         200: Color(0xFF8CB3BB),
@@ -310,12 +270,12 @@ class XzColors {
     ),
     neutral: XzRoleColor(
       soft: {
-        100: Color(0x140059D2),
-        200: Color(0x1F0059D2),
+        100: Color(0x14596476),
+        200: Color(0x1F596476),
       },
       softSolid: {
-        100: Color(0xFFE1E9F6),
-        200: Color(0xFFD3E0F5),
+        100: Color(0xFFE7E8EB),
+        200: Color(0xFFDDDFE2),
       },
       line: {
         100: Color(0xFFBED2F3),
@@ -368,14 +328,6 @@ class XzColors {
       300: Color(0xF2757A87),
     }),
     primary: XzRoleColor(
-      soft: {
-        100: Color(0x147EAEFF),
-        200: Color(0x1F7EAEFF),
-      },
-      softSolid: {
-        100: Color(0xFF32394A),
-        200: Color(0xFF364054),
-      },
       line: {
         100: Color(0xFF3E4B65),
         200: Color(0xFF526A95),
@@ -394,14 +346,6 @@ class XzColors {
       },
     ),
     danger: XzRoleColor(
-      soft: {
-        100: Color(0x14FF8575),
-        200: Color(0x1FFF8575),
-      },
-      softSolid: {
-        100: Color(0xFF3D363F),
-        200: Color(0xFF493C43),
-      },
       line: {
         100: Color(0xFF5B4448),
         200: Color(0xFF8F5A58),
@@ -420,14 +364,6 @@ class XzColors {
       },
     ),
     success: XzRoleColor(
-      soft: {
-        100: Color(0x144BCD51),
-        200: Color(0x1F4BCD51),
-      },
-      softSolid: {
-        100: Color(0xFF2F3C3D),
-        200: Color(0xFF324540),
-      },
       line: {
         100: Color(0xFF365343),
         200: Color(0xFF3F794B),
@@ -446,14 +382,6 @@ class XzColors {
       },
     ),
     warning: XzRoleColor(
-      soft: {
-        100: Color(0x14E2A000),
-        200: Color(0x1FE2A000),
-      },
-      softSolid: {
-        100: Color(0xFF3A393B),
-        200: Color(0xFF443F3C),
-      },
       line: {
         100: Color(0xFF53493D),
         200: Color(0xFF80653B),
@@ -472,14 +400,6 @@ class XzColors {
       },
     ),
     info: XzRoleColor(
-      soft: {
-        100: Color(0x1400C3DF),
-        200: Color(0x1F00C3DF),
-      },
-      softSolid: {
-        100: Color(0xFF2D3B47),
-        200: Color(0xFF2F4350),
-      },
       line: {
         100: Color(0xFF32505E),
         200: Color(0xFF337487),
@@ -498,18 +418,10 @@ class XzColors {
       },
     ),
     neutral: XzRoleColor(
-      soft: {
-        100: Color(0x147CAEFF),
-        200: Color(0x1F7CAEFF),
-      },
-      softSolid: {
-        100: Color(0xFF31394A),
-        200: Color(0xFF364054),
-      },
       line: {
-        100: Color(0xFF3D4B65),
-        200: Color(0xFF526A95),
-        300: Color(0xFF5E7EB4),
+        100: Color(0xFF454B58),
+        200: Color(0xFF626B7A),
+        300: Color(0xFF757F8F),
       },
       bg: {
         100: Color(0xFF798598),
@@ -519,8 +431,8 @@ class XzColors {
         100: Color(0xFFFFFFFF),
       },
       text: {
-        100: Color(0xFF7CAEFF),
-        200: Color(0xFFB1CFFF),
+        100: Color(0xFFA2AFC3),
+        200: Color(0xFFC2CFE3),
       },
     ),
   );