@fastwork/xosmoz-theme 0.54.0 → 0.56.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,6 +179,19 @@ 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),
+        300: Color(0xFF6294E8),
+      },
       bg: {
         100: Color(0xFF0669FF),
         200: Color(0xFF005CE4),
@@ -192,6 +205,19 @@ 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),
+        300: Color(0xFFDA7264),
+      },
       bg: {
         100: Color(0xFFE32A20),
         200: Color(0xFFD10606),
@@ -205,6 +231,19 @@ 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),
+        300: Color(0xFF6BA66A),
+      },
       bg: {
         100: Color(0xFF15C02D),
         200: Color(0xFF00AE23),
@@ -218,6 +257,19 @@ 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),
+        300: Color(0xFFAB9065),
+      },
       bg: {
         100: Color(0xFFFFB508),
         200: Color(0xFFEBA600),
@@ -231,6 +283,19 @@ 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),
+        300: Color(0xFF6B9EAA),
+      },
       bg: {
         100: Color(0xFF00CAE7),
         200: Color(0xFF00B9D3),
@@ -244,6 +309,19 @@ class XzColors {
       },
     ),
     neutral: XzRoleColor(
+      soft: {
+        100: Color(0x14596476),
+        200: Color(0x1F596476),
+      },
+      softSolid: {
+        100: Color(0xFFE7E8EB),
+        200: Color(0xFFDDDFE2),
+      },
+      line: {
+        100: Color(0xFFCED1D6),
+        200: Color(0xFFA5ABB5),
+        300: Color(0xFF8D95A2),
+      },
       bg: {
         100: Color(0xFF798598),
         200: Color(0xFF6A7689),
@@ -290,6 +368,19 @@ 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),
+        300: Color(0xFF5F7EB4),
+      },
       bg: {
         100: Color(0xFF0669FF),
         200: Color(0xFF347EFF),
@@ -297,8 +388,25 @@ class XzColors {
       fg: {
         100: Color(0xFFFFFFFF),
       },
+      text: {
+        100: Color(0xFF7EAEFF),
+        200: Color(0xFFB2CFFF),
+      },
     ),
     danger: XzRoleColor(
+      soft: {
+        100: Color(0x14FF8575),
+        200: Color(0x1FFF8575),
+      },
+      softSolid: {
+        100: Color(0xFF3D363F),
+        200: Color(0xFF493C43),
+      },
+      line: {
+        100: Color(0xFF5B4448),
+        200: Color(0xFF8F5A58),
+        300: Color(0xFFB06761),
+      },
       bg: {
         100: Color(0xFFE32A20),
         200: Color(0xFFF64032),
@@ -306,8 +414,25 @@ class XzColors {
       fg: {
         100: Color(0xFFFFFFFF),
       },
+      text: {
+        100: Color(0xFFFF8575),
+        200: Color(0xFFFFBAAF),
+      },
     ),
     success: XzRoleColor(
+      soft: {
+        100: Color(0x144BCD51),
+        200: Color(0x1F4BCD51),
+      },
+      softSolid: {
+        100: Color(0xFF2F3C3D),
+        200: Color(0xFF324540),
+      },
+      line: {
+        100: Color(0xFF365343),
+        200: Color(0xFF3F794B),
+        300: Color(0xFF44924F),
+      },
       bg: {
         100: Color(0xFF15C02D),
         200: Color(0xFF35D141),
@@ -315,8 +440,25 @@ class XzColors {
       fg: {
         100: Color(0xF2000000),
       },
+      text: {
+        100: Color(0xFF4BCD51),
+        200: Color(0xFF6FEE72),
+      },
     ),
     warning: XzRoleColor(
+      soft: {
+        100: Color(0x14E2A000),
+        200: Color(0x1FE2A000),
+      },
+      softSolid: {
+        100: Color(0xFF3A393B),
+        200: Color(0xFF443F3C),
+      },
+      line: {
+        100: Color(0xFF53493D),
+        200: Color(0xFF80653B),
+        300: Color(0xFF9D7736),
+      },
       bg: {
         100: Color(0xFFFFB508),
         200: Color(0xFFFFCC76),
@@ -324,8 +466,25 @@ class XzColors {
       fg: {
         100: Color(0xF2000000),
       },
+      text: {
+        100: Color(0xFFE2A000),
+        200: Color(0xFFFFC257),
+      },
     ),
     info: XzRoleColor(
+      soft: {
+        100: Color(0x1400C3DF),
+        200: Color(0x1F00C3DF),
+      },
+      softSolid: {
+        100: Color(0xFF2D3B47),
+        200: Color(0xFF2F4350),
+      },
+      line: {
+        100: Color(0xFF32505E),
+        200: Color(0xFF337487),
+        300: Color(0xFF308BA0),
+      },
       bg: {
         100: Color(0xFF00CAE7),
         200: Color(0xFF31DBF8),
@@ -333,8 +492,25 @@ class XzColors {
       fg: {
         100: Color(0xF2000000),
       },
+      text: {
+        100: Color(0xFF00C3DF),
+        200: Color(0xFF50E3FF),
+      },
     ),
     neutral: XzRoleColor(
+      soft: {
+        100: Color(0x14A2AFC3),
+        200: Color(0x1FA2AFC3),
+      },
+      softSolid: {
+        100: Color(0xFF343945),
+        200: Color(0xFF3B404C),
+      },
+      line: {
+        100: Color(0xFF454B58),
+        200: Color(0xFF626B7A),
+        300: Color(0xFF757F8F),
+      },
       bg: {
         100: Color(0xFF798598),
         200: Color(0xFF8894A7),
@@ -342,6 +518,10 @@ class XzColors {
       fg: {
         100: Color(0xFFFFFFFF),
       },
+      text: {
+        100: Color(0xFFA2AFC3),
+        200: Color(0xFFC2CFE3),
+      },
     ),
   );