@fastwork/xosmoz-theme 0.48.0 → 0.49.0

package/README.md

@@ -72,9 +72,10 @@ Surface and layout colors that adapt between light and dark themes.
 | `--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 |
+| `--xz-color-line-50` | Subtle borders |
+| `--xz-color-line-100` | Default borders |
+| `--xz-color-line-200` | Strong/emphasized borders |
+| `--xz-color-line-300` | Strongest borders |
 
 ### Semantic Colors
 
@@ -294,7 +295,7 @@ Override any CSS variable for a custom theme:
   --xz-color-surface-100: oklch(1.00 0 0);
   --xz-color-surface-200: oklch(0.98 0.005 260);
   --xz-color-text-100: oklch(0.20 0.006 285);
-  --xz-color-line-100: oklch(0.95 0 1 / 0.95);
+  --xz-color-line-50: oklch(0.95 0 1 / 0.95);
   --xz-color-primary-bg-100: oklch(0.58 0.25 30);
   --xz-color-primary-fg-100: oklch(1 0 0 / 0.95);
   --xz-color-primary-text-100: oklch(0.58 0.25 30);
@@ -316,7 +317,7 @@ Then activate it:
 .card {
   background: var(--xz-color-surface-200);
   color: var(--xz-color-text-100);
-  border: 1px solid var(--xz-color-line-100);
+  border: 1px solid var(--xz-color-line-50);
   border-radius: 0.75rem;
   box-shadow: var(--xz-box-shadow-200);
 }
@@ -368,7 +369,7 @@ Then activate it:
 .input {
   background: var(--xz-color-surface-100);
   color: var(--xz-color-text-100);
-  border: 1px solid var(--xz-color-line-200);
+  border: 1px solid var(--xz-color-line-100);
   font: var(--xz-font-body1);
 }
 .input:focus {

package/dist/base.css

@@ -124,19 +124,19 @@ body {
     --xz-font-heading4: 700 2rem/1.5 Google Sans, "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
     --xz-font-heading5: 700 1.625rem/1.5 Google Sans, "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
     --xz-font-heading6: 700 1.5rem/1.5 Google Sans, "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-    --xz-font-title1: 700 1.25rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-    --xz-font-title2: 700 1.125rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-    --xz-font-title3: 700 1rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-    --xz-font-title4: 700 0.875rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-    --xz-font-subtitle1-bold: 700 0.875rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-    --xz-font-subtitle1-regular: 400 0.875rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-    --xz-font-subtitle2-bold: 700 0.75rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-    --xz-font-subtitle2-regular: 400 0.75rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-    --xz-font-subtitle3-bold: 700 0.625rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-    --xz-font-subtitle3-regular: 400 0.625rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-    --xz-font-body1: 400 0.875rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-    --xz-font-body2: 400 0.75rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-    --xz-font-body3: 400 0.625rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-    --xz-font-body4: 400 0.5rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+    --xz-font-title1: 700 1.5rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+    --xz-font-title2: 700 1.25rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+    --xz-font-title3: 700 1.125rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+    --xz-font-title4: 700 1rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+    --xz-font-subtitle1-bold: 700 1rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+    --xz-font-subtitle1-regular: 400 1rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+    --xz-font-subtitle2-bold: 700 0.875rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+    --xz-font-subtitle2-regular: 400 0.875rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+    --xz-font-subtitle3-bold: 700 0.75rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+    --xz-font-subtitle3-regular: 400 0.75rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+    --xz-font-body1: 400 1rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+    --xz-font-body2: 400 0.875rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+    --xz-font-body3: 400 0.75rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+    --xz-font-body4: 400 0.625rem/1.5 Google Sans, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   }
 }

package/dist/dart/xz_colors.generated.dart

@@ -168,14 +168,15 @@ class XzColors {
       200: Color(0x122B313B),
     }),
     text: XzBaseScale({
-      100: Color(0xFF18181B),
-      200: Color(0xB318181B),
-      300: Color(0x9918181B),
+      100: Color(0xFF161616),
+      200: Color(0xB3161616),
+      300: Color(0x99161616),
     }),
     line: XzBaseScale({
-      100: Color(0xF2E9EDF4),
-      200: Color(0xF2DADEE5),
-      300: Color(0xF2CACED4),
+      50: Color(0xF7EBEFF5),
+      100: Color(0xF7DADEE5),
+      200: Color(0xF7CACED4),
+      300: Color(0xF7BABEC4),
     }),
     primary: XzRoleColor(
       soft: {
@@ -356,14 +357,15 @@ class XzColors {
       200: Color(0x12F1F5FC),
     }),
     text: XzBaseScale({
-      100: Color(0xFFEEF2F9),
-      200: Color(0xA6EEF2F9),
-      300: Color(0x8CEEF2F9),
+      100: Color(0xFFF2F2F2),
+      200: Color(0xA6F2F2F2),
+      300: Color(0x8CF2F2F2),
     }),
     line: XzBaseScale({
-      100: Color(0xF23E424D),
-      200: Color(0xF2484D58),
-      300: Color(0xF25E636F),
+      50: Color(0xF23E424D),
+      100: Color(0xF2484D58),
+      200: Color(0xF25E636F),
+      300: Color(0xF2757A87),
     }),
     primary: XzRoleColor(
       soft: {

package/dist/figma-tokens/Dark.json

@@ -145,12 +145,12 @@
           "$value": {
             "colorSpace": "srgb",
             "components": [
-              0.933333,
               0.94902,
-              0.976471
+              0.94902,
+              0.94902
             ],
             "alpha": 1,
-            "hex": "#EEF2F9"
+            "hex": "#F2F2F2"
           }
         },
         "200": {
@@ -158,12 +158,12 @@
           "$value": {
             "colorSpace": "srgb",
             "components": [
-              0.933333,
               0.94902,
-              0.976471
+              0.94902,
+              0.94902
             ],
             "alpha": 0.6509803921568628,
-            "hex": "#EEF2F9A6"
+            "hex": "#F2F2F2A6"
           }
         },
         "300": {
@@ -171,17 +171,17 @@
           "$value": {
             "colorSpace": "srgb",
             "components": [
-              0.933333,
               0.94902,
-              0.976471
+              0.94902,
+              0.94902
             ],
             "alpha": 0.5490196078431373,
-            "hex": "#EEF2F98C"
+            "hex": "#F2F2F28C"
           }
         }
       },
       "line": {
-        "100": {
+        "50": {
           "$type": "color",
           "$value": {
             "colorSpace": "srgb",
@@ -194,7 +194,7 @@
             "hex": "#3E424DF2"
           }
         },
-        "200": {
+        "100": {
           "$type": "color",
           "$value": {
             "colorSpace": "srgb",
@@ -207,7 +207,7 @@
             "hex": "#484D58F2"
           }
         },
-        "300": {
+        "200": {
           "$type": "color",
           "$value": {
             "colorSpace": "srgb",
@@ -219,6 +219,19 @@
             "alpha": 0.9490196078431372,
             "hex": "#5E636FF2"
           }
+        },
+        "300": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [
+              0.458824,
+              0.478431,
+              0.529412
+            ],
+            "alpha": 0.9490196078431372,
+            "hex": "#757A87F2"
+          }
         }
       }
     },

package/dist/figma-tokens/Light.json

@@ -145,12 +145,12 @@
           "$value": {
             "colorSpace": "srgb",
             "components": [
-              0.094118,
-              0.094118,
-              0.105882
+              0.086275,
+              0.086275,
+              0.086275
             ],
             "alpha": 1,
-            "hex": "#18181B"
+            "hex": "#161616"
           }
         },
         "200": {
@@ -158,12 +158,12 @@
           "$value": {
             "colorSpace": "srgb",
             "components": [
-              0.094118,
-              0.094118,
-              0.105882
+              0.086275,
+              0.086275,
+              0.086275
             ],
             "alpha": 0.7019607843137254,
-            "hex": "#18181BB3"
+            "hex": "#161616B3"
           }
         },
         "300": {
@@ -171,30 +171,30 @@
           "$value": {
             "colorSpace": "srgb",
             "components": [
-              0.094118,
-              0.094118,
-              0.105882
+              0.086275,
+              0.086275,
+              0.086275
             ],
             "alpha": 0.6,
-            "hex": "#18181B99"
+            "hex": "#16161699"
           }
         }
       },
       "line": {
-        "100": {
+        "50": {
           "$type": "color",
           "$value": {
             "colorSpace": "srgb",
             "components": [
-              0.913725,
-              0.929412,
-              0.956863
+              0.921569,
+              0.937255,
+              0.960784
             ],
-            "alpha": 0.9490196078431372,
-            "hex": "#E9EDF4F2"
+            "alpha": 0.9686274509803922,
+            "hex": "#EBEFF5F7"
           }
         },
-        "200": {
+        "100": {
           "$type": "color",
           "$value": {
             "colorSpace": "srgb",
@@ -203,11 +203,11 @@
               0.870588,
               0.898039
             ],
-            "alpha": 0.9490196078431372,
-            "hex": "#DADEE5F2"
+            "alpha": 0.9686274509803922,
+            "hex": "#DADEE5F7"
           }
         },
-        "300": {
+        "200": {
           "$type": "color",
           "$value": {
             "colorSpace": "srgb",
@@ -216,8 +216,21 @@
               0.807843,
               0.831373
             ],
-            "alpha": 0.9490196078431372,
-            "hex": "#CACED4F2"
+            "alpha": 0.9686274509803922,
+            "hex": "#CACED4F7"
+          }
+        },
+        "300": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [
+              0.729412,
+              0.745098,
+              0.768627
+            ],
+            "alpha": 0.9686274509803922,
+            "hex": "#BABEC4F7"
           }
         }
       }

package/dist/index.js

@@ -107,7 +107,7 @@ var titles = {
     fontFamily: fontFamily.primary,
     fontSize: {
       desktop: fontSize[700],
-      mobile: fontSize[600]
+      mobile: fontSize[700]
     },
     fontWeight: fontWeight[700],
     lineHeight: lineHeight["150pct"]
@@ -116,7 +116,7 @@ var titles = {
     fontFamily: fontFamily.primary,
     fontSize: {
       desktop: fontSize[600],
-      mobile: fontSize[500]
+      mobile: fontSize[600]
     },
     fontWeight: fontWeight[700],
     lineHeight: lineHeight["150pct"]
@@ -125,7 +125,7 @@ var titles = {
     fontFamily: fontFamily.primary,
     fontSize: {
       desktop: fontSize[500],
-      mobile: fontSize[400]
+      mobile: fontSize[500]
     },
     fontWeight: fontWeight[700],
     lineHeight: lineHeight["150pct"]
@@ -134,7 +134,7 @@ var titles = {
     fontFamily: fontFamily.primary,
     fontSize: {
       desktop: fontSize[400],
-      mobile: fontSize[300]
+      mobile: fontSize[400]
     },
     fontWeight: fontWeight[700],
     lineHeight: lineHeight["150pct"]
@@ -145,7 +145,7 @@ var subtitles = {
     fontFamily: fontFamily.primary,
     fontSize: {
       desktop: fontSize[400],
-      mobile: fontSize[300]
+      mobile: fontSize[400]
     },
     fontWeight: fontWeight[700],
     lineHeight: lineHeight["150pct"]
@@ -154,7 +154,7 @@ var subtitles = {
     fontFamily: fontFamily.primary,
     fontSize: {
       desktop: fontSize[400],
-      mobile: fontSize[300]
+      mobile: fontSize[400]
     },
     fontWeight: fontWeight[400],
     lineHeight: lineHeight["150pct"]
@@ -163,7 +163,7 @@ var subtitles = {
     fontFamily: fontFamily.primary,
     fontSize: {
       desktop: fontSize[300],
-      mobile: fontSize[200]
+      mobile: fontSize[300]
     },
     fontWeight: fontWeight[700],
     lineHeight: lineHeight["150pct"]
@@ -172,7 +172,7 @@ var subtitles = {
     fontFamily: fontFamily.primary,
     fontSize: {
       desktop: fontSize[300],
-      mobile: fontSize[200]
+      mobile: fontSize[300]
     },
     fontWeight: fontWeight[400],
     lineHeight: lineHeight["150pct"]
@@ -181,7 +181,7 @@ var subtitles = {
     fontFamily: fontFamily.primary,
     fontSize: {
       desktop: fontSize[200],
-      mobile: fontSize[100]
+      mobile: fontSize[200]
     },
     fontWeight: fontWeight[700],
     lineHeight: lineHeight["150pct"]
@@ -190,7 +190,7 @@ var subtitles = {
     fontFamily: fontFamily.primary,
     fontSize: {
       desktop: fontSize[200],
-      mobile: fontSize[100]
+      mobile: fontSize[200]
     },
     fontWeight: fontWeight[400],
     lineHeight: lineHeight["150pct"]
@@ -201,7 +201,7 @@ var body = {
     fontFamily: fontFamily.primary,
     fontSize: {
       desktop: fontSize[400],
-      mobile: fontSize[300]
+      mobile: fontSize[400]
     },
     fontWeight: fontWeight[400],
     lineHeight: lineHeight["150pct"]
@@ -210,7 +210,7 @@ var body = {
     fontFamily: fontFamily.primary,
     fontSize: {
       desktop: fontSize[300],
-      mobile: fontSize[200]
+      mobile: fontSize[300]
     },
     fontWeight: fontWeight[400],
     lineHeight: lineHeight["150pct"]
@@ -219,7 +219,7 @@ var body = {
     fontFamily: fontFamily.primary,
     fontSize: {
       desktop: fontSize[200],
-      mobile: fontSize[100]
+      mobile: fontSize[200]
     },
     fontWeight: fontWeight[400],
     lineHeight: lineHeight["150pct"]
@@ -228,7 +228,7 @@ var body = {
     fontFamily: fontFamily.primary,
     fontSize: {
       desktop: fontSize[100],
-      mobile: fontSize[50]
+      mobile: fontSize[100]
     },
     fontWeight: fontWeight[400],
     lineHeight: lineHeight["150pct"]
@@ -311,14 +311,15 @@ var lightTheme = {
       200: `color-mix(in oklab, var(--xz-color-bg-100) 7%, transparent)`
     },
     text: {
-      100: "oklch(21% 0.006 285.885)",
+      100: "oklch(0.2 0 0)",
       200: "color-mix(in oklab, var(--xz-color-text-100) 70%, transparent)",
       300: "color-mix(in oklab, var(--xz-color-text-100) 60%, transparent)"
     },
     line: {
-      100: "oklch(0.945 0.01 260 / 0.95)",
-      200: "oklch(0.90 0.01 260 / 0.95)",
-      300: "oklch(0.85 0.01 260 / 0.95)"
+      50: "oklch(0.95 0.01 260 / 0.97)",
+      100: "oklch(0.90 0.01 260 / 0.97)",
+      200: "oklch(0.85 0.01 260 / 0.97)",
+      300: "oklch(0.80 0.01 260 / 0.97)"
     },
     primary: {
       soft: {
@@ -630,14 +631,15 @@ var darkTheme = {
       100: "oklch(0 0 0)"
     },
     text: {
-      100: "oklch(0.96 0.01 260 / 1)",
+      100: "oklch(0.96 0 0)",
       200: "color-mix(in oklab, var(--xz-color-text-100) 65%, transparent)",
       300: "color-mix(in oklab, var(--xz-color-text-100) 55%, transparent)"
     },
     line: {
-      100: "oklch(0.38 0.02 269 / 0.95)",
-      200: "oklch(0.42 0.02 269 / 0.95)",
-      300: "oklch(0.50 0.02 269 / 0.95)"
+      50: "oklch(0.38 0.02 269 / 0.95)",
+      100: "oklch(0.42 0.02 269 / 0.95)",
+      200: "oklch(0.50 0.02 269 / 0.95)",
+      300: "oklch(0.58 0.02 269 / 0.95)"
     },
     primary: {
       soft: {