@fastwork/xosmoz-theme 0.0.15 → 0.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +25 -27
  2. package/dist/base.css +205 -1
  3. package/package.json +55 -57
  4. package/dist/semantic.css +0 -51
  5. package/dist/variables.css +0 -332
  6. package/dist/xosmoz.css +0 -419
package/README.md CHANGED
@@ -22,16 +22,15 @@ Xosmoz includes a powerful multi-theme system inspired by DaisyUI. Choose from p
22
22
  #### Quick Start
23
23
 
24
24
  ```css
25
- /* Import base design tokens */
26
- @import '@fastwork/xosmoz-theme/css/variables';
27
- @import '@fastwork/xosmoz-theme/css/base';
25
+ /* Import base styles and non-color tokens */
26
+ @import '@fastwork/xosmoz-theme/base.css';
28
27
 
29
- /* Import all themes */
30
- @import '@fastwork/xosmoz-theme/themes';
28
+ /* Import all themes (light + dark) */
29
+ @import '@fastwork/xosmoz-theme/themes.css';
31
30
 
32
- /* OR import specific themes only */
33
- @import '@fastwork/xosmoz-theme/themes/light';
34
- @import '@fastwork/xosmoz-theme/themes/dark';
31
+ /* OR import specific theme only */
32
+ @import '@fastwork/xosmoz-theme/themes/light.css';
33
+ /* @import '@fastwork/xosmoz-theme/themes/dark.css'; */
35
34
  ```
36
35
 
37
36
  Then set the theme via HTML attribute:
@@ -218,29 +217,28 @@ console.log(cssVars);
218
217
 
219
218
  After building, the following CSS files are generated in `dist/`:
220
219
 
221
- ### Design Token Files
222
- - **`variables.css`** - All design token CSS variables (colors, typography, spacing, etc.)
223
- - **`base.css`** - Base styles and CSS resets
224
- - **`xosmoz.css`** - Complete legacy bundle (variables + semantic + base)
225
-
226
- ### Theme Files
227
- - **`themes.css`** - All predefined themes in one file
228
- - **`themes/light.css`** - Light theme only
229
- - **`themes/dark.css`** - Dark theme only
220
+ ### Files
221
+ - **`base.css`** - Base styles, CSS resets, and non-color design tokens (typography, spacing, borders, shadows)
222
+ - **`themes.css`** - All predefined themes (light + dark) in one file
223
+ - **`themes/light.css`** - Light theme colors only
224
+ - **`themes/dark.css`** - Dark theme colors only
230
225
 
231
226
  ### Import Examples
232
227
 
233
228
  ```css
234
- /* Recommended: Base tokens + all themes */
235
- @import '@fastwork/xosmoz-theme/css/variables';
236
- @import '@fastwork/xosmoz-theme/css/base';
237
- @import '@fastwork/xosmoz-theme/themes';
238
-
239
- /* OR: Import only specific themes */
240
- @import '@fastwork/xosmoz-theme/css/variables';
241
- @import '@fastwork/xosmoz-theme/css/base';
242
- @import '@fastwork/xosmoz-theme/themes/light';
243
- @import '@fastwork/xosmoz-theme/themes/dark';
229
+ /* Recommended: Base + all themes */
230
+ @import '@fastwork/xosmoz-theme/base.css';
231
+ @import '@fastwork/xosmoz-theme/themes.css';
232
+
233
+ /* OR: Base + specific theme only */
234
+ @import '@fastwork/xosmoz-theme/base.css';
235
+ @import '@fastwork/xosmoz-theme/themes/light.css';
236
+ ```
237
+
238
+ ```javascript
239
+ // In JavaScript/TypeScript
240
+ import '@fastwork/xosmoz-theme/base.css';
241
+ import '@fastwork/xosmoz-theme/themes.css';
244
242
  ```
245
243
 
246
244
  ## Development
package/dist/base.css CHANGED
@@ -1,4 +1,19 @@
1
- /* Xosmoz Base Styles */
1
+ /**
2
+ * Xosmoz Design System - Base Styles
3
+ *
4
+ * This file includes:
5
+ * - CSS Reset
6
+ * - Design token CSS variables (typography, spacing, borders, shadows)
7
+ *
8
+ * Note: Color tokens are in separate theme files (themes/light.css, themes/dark.css)
9
+ * Import both base.css and your chosen theme file.
10
+ *
11
+ * Example:
12
+ * @import '@fastwork/xosmoz-theme/base.css';
13
+ * @import '@fastwork/xosmoz-theme/themes/light.css';
14
+ */
15
+
16
+ /* CSS Reset */
2
17
 
3
18
  *,
4
19
  *::before,
@@ -21,3 +36,192 @@ body {
21
36
  color: var(--xz-color-content-100);
22
37
  background-color: var(--xz-color-bg-100);
23
38
  }
39
+
40
+
41
+ :root {
42
+ --xz-font-size-50: 0.5rem;
43
+ --xz-font-size-100: 0.625rem;
44
+ --xz-font-size-200: 0.75rem;
45
+ --xz-font-size-300: 0.875rem;
46
+ --xz-font-size-400: 1rem;
47
+ --xz-font-size-500: 1.125rem;
48
+ --xz-font-size-600: 1.25rem;
49
+ --xz-font-size-700: 1.5rem;
50
+ --xz-font-size-800: 1.625rem;
51
+ --xz-font-size-900: 2rem;
52
+ --xz-font-size-1000: 2.375rem;
53
+ --xz-font-size-1100: 2.5rem;
54
+ --xz-font-size-1200: 2.6875rem;
55
+ --xz-font-size-1300: 3rem;
56
+ --xz-font-size-1400: 3.5rem;
57
+ --xz-font-size-1500: 4rem;
58
+ --xz-font-size-1600: 4.5rem;
59
+
60
+ --xz-font-weight-100: 100;
61
+ --xz-font-weight-200: 200;
62
+ --xz-font-weight-300: 300;
63
+ --xz-font-weight-400: 400;
64
+ --xz-font-weight-500: 500;
65
+ --xz-font-weight-600: 600;
66
+ --xz-font-weight-700: 700;
67
+ --xz-font-weight-800: 800;
68
+ --xz-font-weight-900: 900;
69
+
70
+ --xz-font-family-primary: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
71
+ --xz-font-family-secondary: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
72
+
73
+ --xz-line-height-100pct: 1;
74
+ --xz-line-height-125pct: 1.25;
75
+ --xz-line-height-135pct: 1.35;
76
+ --xz-line-height-150pct: 1.5;
77
+ --xz-line-height-165pct: 1.65;
78
+ --xz-line-height-200pct: 2;
79
+
80
+ --xz-heading-h1-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
81
+ --xz-heading-h1-font-size: 4.5rem;
82
+ --xz-heading-h1-font-weight: 700;
83
+ --xz-heading-h2-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
84
+ --xz-heading-h2-font-size: 4rem;
85
+ --xz-heading-h2-font-weight: 700;
86
+ --xz-heading-h3-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
87
+ --xz-heading-h3-font-size: 3.5rem;
88
+ --xz-heading-h3-font-weight: 700;
89
+ --xz-heading-h4-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
90
+ --xz-heading-h4-font-size: 3rem;
91
+ --xz-heading-h4-font-weight: 700;
92
+ --xz-heading-h5-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
93
+ --xz-heading-h5-font-size: 2.5rem;
94
+ --xz-heading-h5-font-weight: 700;
95
+ --xz-heading-h6-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
96
+ --xz-heading-h6-font-size: 2rem;
97
+ --xz-heading-h6-font-weight: 700;
98
+
99
+ --xz-title-title1-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
100
+ --xz-title-title1-font-size: 1.5rem;
101
+ --xz-title-title1-font-weight: 700;
102
+ --xz-title-title2-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
103
+ --xz-title-title2-font-size: 1.25rem;
104
+ --xz-title-title2-font-weight: 700;
105
+ --xz-title-title3-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
106
+ --xz-title-title3-font-size: 1.125rem;
107
+ --xz-title-title3-font-weight: 700;
108
+ --xz-title-title4-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
109
+ --xz-title-title4-font-size: 1rem;
110
+ --xz-title-title4-font-weight: 700;
111
+
112
+ --xz-subtitle-subtitle1Bold-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
113
+ --xz-subtitle-subtitle1Bold-font-size: 1rem;
114
+ --xz-subtitle-subtitle1Bold-font-weight: 700;
115
+ --xz-subtitle-subtitle1Regular-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
116
+ --xz-subtitle-subtitle1Regular-font-size: 1rem;
117
+ --xz-subtitle-subtitle1Regular-font-weight: 400;
118
+ --xz-subtitle-subtitle2Bold-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
119
+ --xz-subtitle-subtitle2Bold-font-size: 0.875rem;
120
+ --xz-subtitle-subtitle2Bold-font-weight: 700;
121
+ --xz-subtitle-subtitle2Regular-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
122
+ --xz-subtitle-subtitle2Regular-font-size: 0.875rem;
123
+ --xz-subtitle-subtitle2Regular-font-weight: 400;
124
+ --xz-subtitle-subtitle3Bold-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
125
+ --xz-subtitle-subtitle3Bold-font-size: 0.75rem;
126
+ --xz-subtitle-subtitle3Bold-font-weight: 700;
127
+ --xz-subtitle-subtitle3Regular-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
128
+ --xz-subtitle-subtitle3Regular-font-size: 0.75rem;
129
+ --xz-subtitle-subtitle3Regular-font-weight: 400;
130
+
131
+ --xz-body-body1-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
132
+ --xz-body-body1-font-size: 1rem;
133
+ --xz-body-body1-font-weight: 400;
134
+ --xz-body-body2-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
135
+ --xz-body-body2-font-size: 0.875rem;
136
+ --xz-body-body2-font-weight: 400;
137
+ --xz-body-body3-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
138
+ --xz-body-body3-font-size: 0.75rem;
139
+ --xz-body-body3-font-weight: 400;
140
+ --xz-body-body4-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
141
+ --xz-body-body4-font-size: 0.625rem;
142
+ --xz-body-body4-font-weight: 400;
143
+
144
+ --xz-spacing-0: 0;
145
+ --xz-spacing-1: 0.25rem;
146
+ --xz-spacing-2: 0.5rem;
147
+ --xz-spacing-3: 0.75rem;
148
+ --xz-spacing-4: 1rem;
149
+ --xz-spacing-5: 1.25rem;
150
+ --xz-spacing-6: 1.5rem;
151
+ --xz-spacing-7: 1.75rem;
152
+ --xz-spacing-8: 2rem;
153
+ --xz-spacing-9: 2.25rem;
154
+ --xz-spacing-10: 2.5rem;
155
+ --xz-spacing-11: 2.75rem;
156
+ --xz-spacing-12: 3rem;
157
+ --xz-spacing-14: 3.5rem;
158
+ --xz-spacing-16: 4rem;
159
+ --xz-spacing-20: 5rem;
160
+ --xz-spacing-24: 6rem;
161
+ --xz-spacing-28: 7rem;
162
+ --xz-spacing-32: 8rem;
163
+ --xz-spacing-36: 9rem;
164
+ --xz-spacing-40: 10rem;
165
+ --xz-spacing-44: 11rem;
166
+ --xz-spacing-48: 12rem;
167
+ --xz-spacing-52: 13rem;
168
+ --xz-spacing-56: 14rem;
169
+ --xz-spacing-60: 15rem;
170
+ --xz-spacing-64: 16rem;
171
+ --xz-spacing-72: 18rem;
172
+ --xz-spacing-80: 20rem;
173
+ --xz-spacing-96: 24rem;
174
+ --xz-spacing-px: 1px;
175
+ --xz-spacing-0_5: 0.125rem;
176
+ --xz-spacing-1_5: 0.375rem;
177
+ --xz-spacing-2_5: 0.625rem;
178
+ --xz-spacing-3_5: 0.875rem;
179
+
180
+ --xz-radius-none: 0;
181
+ --xz-radius-sm: 0.125rem;
182
+ --xz-radius-base: 0.25rem;
183
+ --xz-radius-md: 0.375rem;
184
+ --xz-radius-lg: 0.5rem;
185
+ --xz-radius-xl: 0.75rem;
186
+ --xz-radius-2xl: 1rem;
187
+ --xz-radius-3xl: 1.5rem;
188
+ --xz-radius-full: 9999px;
189
+
190
+ --xz-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
191
+ --xz-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
192
+ --xz-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
193
+ --xz-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
194
+ --xz-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
195
+ --xz-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
196
+ --xz-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
197
+ --xz-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
198
+ --xz-shadow-none: 0 0 #0000;
199
+ }
200
+
201
+ @media (max-width: 768px) {
202
+ :root {
203
+ --xz-heading-h1-font-size: 3rem;
204
+ --xz-heading-h2-font-size: 2.6875rem;
205
+ --xz-heading-h3-font-size: 2.375rem;
206
+ --xz-heading-h4-font-size: 2rem;
207
+ --xz-heading-h5-font-size: 1.625rem;
208
+ --xz-heading-h6-font-size: 1.5rem;
209
+
210
+ --xz-title-title1-font-size: 1.25rem;
211
+ --xz-title-title2-font-size: 1.125rem;
212
+ --xz-title-title3-font-size: 1rem;
213
+ --xz-title-title4-font-size: 0.875rem;
214
+
215
+ --xz-subtitle-subtitle1Bold-font-size: 0.875rem;
216
+ --xz-subtitle-subtitle1Regular-font-size: 0.875rem;
217
+ --xz-subtitle-subtitle2Bold-font-size: 0.75rem;
218
+ --xz-subtitle-subtitle2Regular-font-size: 0.75rem;
219
+ --xz-subtitle-subtitle3Bold-font-size: 0.625rem;
220
+ --xz-subtitle-subtitle3Regular-font-size: 0.625rem;
221
+
222
+ --xz-body-body1-font-size: 0.875rem;
223
+ --xz-body-body2-font-size: 0.75rem;
224
+ --xz-body-body3-font-size: 0.625rem;
225
+ --xz-body-body4-font-size: 0.5rem;
226
+ }
227
+ }
package/package.json CHANGED
@@ -1,59 +1,57 @@
1
1
  {
2
- "name": "@fastwork/xosmoz-theme",
3
- "version": "0.0.15",
4
- "description": "Xosmoz Theme - Design tokens and theming system for Xosmoz",
5
- "main": "./dist/index.js",
6
- "module": "./dist/index.mjs",
7
- "types": "./dist/index.d.ts",
8
- "exports": {
9
- ".": {
10
- "types": "./dist/index.d.ts",
11
- "import": "./dist/index.mjs",
12
- "require": "./dist/index.js"
13
- },
14
- "./tokens": {
15
- "types": "./dist/tokens.d.ts",
16
- "import": "./dist/tokens.mjs",
17
- "require": "./dist/tokens.js"
18
- },
19
- "./css": "./dist/xosmoz.css",
20
- "./css/variables": "./dist/variables.css",
21
- "./css/semantic": "./dist/semantic.css",
22
- "./css/base": "./dist/base.css",
23
- "./themes": "./dist/themes.css",
24
- "./themes/light": "./dist/themes/light.css",
25
- "./themes/dark": "./dist/themes/dark.css"
26
- },
27
- "files": [
28
- "dist"
29
- ],
30
- "scripts": {
31
- "build": "yarn build:ts && yarn build:css && yarn build:themes",
32
- "build:ts": "tsup",
33
- "build:css": "node scripts/generate-css.mjs",
34
- "build:themes": "node scripts/generate-themes.mjs",
35
- "dev": "tsup --watch",
36
- "lint": "eslint src/**/*.ts",
37
- "clean": "rm -rf dist"
38
- },
39
- "keywords": [
40
- "design-system",
41
- "theme",
42
- "design-tokens",
43
- "xosmoz",
44
- "ui"
45
- ],
46
- "author": "",
47
- "license": "MIT",
48
- "devDependencies": {
49
- "@types/node": "^20.11.0",
50
- "tsup": "^8.0.0",
51
- "typescript": "^5.4.0"
52
- },
53
- "publishConfig": {
54
- "access": "public"
55
- },
56
- "dependencies": {
57
- "apcach": "^0.6.4"
58
- }
2
+ "name": "@fastwork/xosmoz-theme",
3
+ "version": "0.0.16",
4
+ "description": "Xosmoz Theme - Design tokens and theming system for Xosmoz",
5
+ "main": "./dist/index.js",
6
+ "module": "./dist/index.mjs",
7
+ "types": "./dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./dist/index.d.ts",
11
+ "import": "./dist/index.mjs",
12
+ "require": "./dist/index.js"
13
+ },
14
+ "./tokens": {
15
+ "types": "./dist/tokens.d.ts",
16
+ "import": "./dist/tokens.mjs",
17
+ "require": "./dist/tokens.js"
18
+ },
19
+ "./css": "./dist/base.css",
20
+ "./base.css": "./dist/base.css",
21
+ "./themes.css": "./dist/themes.css",
22
+ "./themes/light.css": "./dist/themes/light.css",
23
+ "./themes/dark.css": "./dist/themes/dark.css"
24
+ },
25
+ "files": [
26
+ "dist"
27
+ ],
28
+ "scripts": {
29
+ "build": "yarn build:ts && yarn build:css && yarn build:themes",
30
+ "build:ts": "tsup",
31
+ "build:css": "node scripts/generate-css.mjs",
32
+ "build:themes": "node scripts/generate-themes.mjs",
33
+ "dev": "tsup --watch",
34
+ "lint": "eslint src/**/*.ts",
35
+ "clean": "rm -rf dist"
36
+ },
37
+ "keywords": [
38
+ "design-system",
39
+ "theme",
40
+ "design-tokens",
41
+ "xosmoz",
42
+ "ui"
43
+ ],
44
+ "author": "",
45
+ "license": "MIT",
46
+ "devDependencies": {
47
+ "@types/node": "^20.11.0",
48
+ "tsup": "^8.0.0",
49
+ "typescript": "^5.4.0"
50
+ },
51
+ "publishConfig": {
52
+ "access": "public"
53
+ },
54
+ "dependencies": {
55
+ "apcach": "^0.6.4"
56
+ }
59
57
  }
package/dist/semantic.css DELETED
@@ -1,51 +0,0 @@
1
- :root {
2
- /* Semantic colors - Light mode */
3
- --xz-background: var(--xz-color-neutral-50);
4
- --xz-foreground: var(--xz-color-neutral-900);
5
- --xz-muted: var(--xz-color-neutral-100);
6
- --xz-muted-foreground: var(--xz-color-neutral-600);
7
- --xz-border: var(--xz-color-neutral-200);
8
- --xz-input: var(--xz-color-neutral-200);
9
- --xz-ring: var(--xz-color-primary-500);
10
-
11
- /* Component colors */
12
- --xz-card: var(--xz-color-neutral-50);
13
- --xz-card-foreground: var(--xz-color-neutral-900);
14
- --xz-popover: var(--xz-color-neutral-50);
15
- --xz-popover-foreground: var(--xz-color-neutral-900);
16
-
17
- /* Button colors */
18
- --xz-primary: var(--xz-color-primary-500);
19
- --xz-primary-foreground: var(--xz-color-neutral-50);
20
- --xz-secondary: var(--xz-color-secondary-500);
21
- --xz-secondary-foreground: var(--xz-color-neutral-50);
22
- --xz-accent: var(--xz-color-accent-500);
23
- --xz-accent-foreground: var(--xz-color-neutral-50);
24
-
25
- /* Status colors */
26
- --xz-success: var(--xz-color-success-500);
27
- --xz-success-foreground: var(--xz-color-neutral-50);
28
- --xz-warning: var(--xz-color-warning-500);
29
- --xz-warning-foreground: var(--xz-color-neutral-50);
30
- --xz-error: var(--xz-color-error-500);
31
- --xz-error-foreground: var(--xz-color-neutral-50);
32
- --xz-info: var(--xz-color-info-500);
33
- --xz-info-foreground: var(--xz-color-neutral-50);
34
- }
35
-
36
- [data-theme="dark"] {
37
- /* Semantic colors - Dark mode */
38
- --xz-background: var(--xz-color-neutral-900);
39
- --xz-foreground: var(--xz-color-neutral-50);
40
- --xz-muted: var(--xz-color-neutral-900);
41
- --xz-muted-foreground: var(--xz-color-neutral-400);
42
- --xz-border: var(--xz-color-neutral-800);
43
- --xz-input: var(--xz-color-neutral-800);
44
- --xz-ring: var(--xz-color-primary-400);
45
-
46
- /* Component colors */
47
- --xz-card: var(--xz-color-neutral-900);
48
- --xz-card-foreground: var(--xz-color-neutral-50);
49
- --xz-popover: var(--xz-color-neutral-900);
50
- --xz-popover-foreground: var(--xz-color-neutral-50);
51
- }
package/dist/variables.css DELETED
@@ -1,332 +0,0 @@
1
- :root {
2
- --xz-color-bg-100: oklch(1.00 0.00 260);
3
- --xz-color-bg-200: oklch(0.98 0.005 260);
4
- --xz-color-bg-300: oklch(0.95 0.01 260);
5
- --xz-color-bg-400: oklch(0.92 0.01 260);
6
- --xz-color-content-100: oklch(21% 0.006 285.885);
7
- --xz-color-content-200: color-mix(in oklab, var(--xz-color-content-100) 60%, transparent);
8
- --xz-color-line-100: oklch(0 0 0 / 0.1);
9
- --xz-color-line-200: oklch(0 0 0 / 0.2);
10
- --xz-color-line-300: oklch(0 0 0 / 0.3);
11
- --xz-color-primary-soft: [object Object];
12
- --xz-color-primary-line: [object Object];
13
- --xz-color-primary-bg: [object Object];
14
- --xz-color-primary-content: [object Object];
15
- --xz-color-primary-fg: oklch(1 0 0);
16
- --xz-color-danger-soft: [object Object];
17
- --xz-color-danger-line: [object Object];
18
- --xz-color-danger-bg: [object Object];
19
- --xz-color-danger-content: [object Object];
20
- --xz-color-danger-fg: oklch(1 0 0);
21
- --xz-color-success-soft: [object Object];
22
- --xz-color-success-line: [object Object];
23
- --xz-color-success-bg: [object Object];
24
- --xz-color-success-content: [object Object];
25
- --xz-color-success-fg: oklch(1 0 0);
26
- --xz-color-warning-soft: [object Object];
27
- --xz-color-warning-line: [object Object];
28
- --xz-color-warning-bg: [object Object];
29
- --xz-color-warning-content: [object Object];
30
- --xz-color-warning-fg: oklch(1 0 0);
31
- --xz-color-info-soft: [object Object];
32
- --xz-color-info-line: [object Object];
33
- --xz-color-info-bg: [object Object];
34
- --xz-color-info-content: [object Object];
35
- --xz-color-info-fg: oklch(1 0 0);
36
- --xz-color-fastwork-100: oklch(0.96 .0223 260);
37
- --xz-color-fastwork-200: oklch(0.94 .0299 260);
38
- --xz-color-fastwork-300: oklch(0.92 .0369 260);
39
- --xz-color-fastwork-400: oklch(0.90 .0471 260);
40
- --xz-color-fastwork-500: oklch(0.84 .1018 260);
41
- --xz-color-fastwork-600: oklch(0.72 .1881 260);
42
- --xz-color-fastwork-700: oklch(0.58 .2524 260);
43
- --xz-color-fastwork-800: oklch(0.54 .2482 260);
44
- --xz-color-fastwork-900: oklch(0.54 .2320 260);
45
- --xz-color-fastwork-1000: oklch(0.28 .1041 260);
46
- --xz-color-gray-100: oklch(0.96 0.005 260);
47
- --xz-color-gray-200: oklch(0.94 0.005 260);
48
- --xz-color-gray-300: oklch(0.92 0.005 260);
49
- --xz-color-gray-400: oklch(0.90 0.005 260);
50
- --xz-color-gray-500: oklch(0.84 0.005 260);
51
- --xz-color-gray-600: oklch(0.72 0.005 260);
52
- --xz-color-gray-700: oklch(0.62 0.005 260);
53
- --xz-color-gray-800: oklch(0.58 0.005 260);
54
- --xz-color-gray-900: oklch(0.54 0.005 260);
55
- --xz-color-gray-1000: oklch(0.28 0.005 260);
56
- --xz-color-green-100: oklch(0.96 .0223 143);
57
- --xz-color-green-200: oklch(0.94 .0299 143);
58
- --xz-color-green-300: oklch(0.92 .0369 143);
59
- --xz-color-green-400: oklch(0.90 .0471 143);
60
- --xz-color-green-500: oklch(0.84 .1018 143);
61
- --xz-color-green-600: oklch(0.72 .1881 143);
62
- --xz-color-green-700: oklch(0.62 .2524 143);
63
- --xz-color-green-800: oklch(0.58 .2482 143);
64
- --xz-color-green-900: oklch(0.54 .2320 143);
65
- --xz-color-green-1000: oklch(0.28 .1041 143);
66
- --xz-color-mint-100: oklch(0.96 .0223 163);
67
- --xz-color-mint-200: oklch(0.94 .0299 163);
68
- --xz-color-mint-300: oklch(0.92 .0369 163);
69
- --xz-color-mint-400: oklch(0.90 .0471 163);
70
- --xz-color-mint-500: oklch(0.84 .1018 163);
71
- --xz-color-mint-600: oklch(0.72 .1881 163);
72
- --xz-color-mint-700: oklch(0.62 .2524 163);
73
- --xz-color-mint-800: oklch(0.58 .2482 163);
74
- --xz-color-mint-900: oklch(0.54 .2320 163);
75
- --xz-color-mint-1000: oklch(0.28 .1041 163);
76
- --xz-color-amber-100: oklch(0.96 .0223 79);
77
- --xz-color-amber-200: oklch(0.94 .0299 79);
78
- --xz-color-amber-300: oklch(0.92 .0369 79);
79
- --xz-color-amber-400: oklch(0.90 .0471 79);
80
- --xz-color-amber-500: oklch(0.84 .1018 79);
81
- --xz-color-amber-600: oklch(0.72 .1881 79);
82
- --xz-color-amber-700: oklch(0.62 .2524 79);
83
- --xz-color-amber-800: oklch(0.58 .2482 79);
84
- --xz-color-amber-900: oklch(0.54 .2320 79);
85
- --xz-color-amber-1000: oklch(0.28 .1041 79);
86
- --xz-color-red-100: oklch(0.96 .0223 30);
87
- --xz-color-red-200: oklch(0.94 .0299 30);
88
- --xz-color-red-300: oklch(0.92 .0369 30);
89
- --xz-color-red-400: oklch(0.90 .0471 30);
90
- --xz-color-red-500: oklch(0.84 .1018 30);
91
- --xz-color-red-600: oklch(0.72 .1881 30);
92
- --xz-color-red-700: oklch(0.62 .2524 30);
93
- --xz-color-red-800: oklch(0.58 .2482 30);
94
- --xz-color-red-900: oklch(0.54 .2320 30);
95
- --xz-color-red-1000: oklch(0.28 .1041 30);
96
- --xz-color-orange-100: oklch(0.96 .0223 48);
97
- --xz-color-orange-200: oklch(0.94 .0299 48);
98
- --xz-color-orange-300: oklch(0.92 .0369 48);
99
- --xz-color-orange-400: oklch(0.90 .0471 48);
100
- --xz-color-orange-500: oklch(0.84 .1018 48);
101
- --xz-color-orange-600: oklch(0.72 .1881 48);
102
- --xz-color-orange-700: oklch(0.62 .2524 48);
103
- --xz-color-orange-800: oklch(0.58 .2482 48);
104
- --xz-color-orange-900: oklch(0.54 .2320 48);
105
- --xz-color-orange-1000: oklch(0.28 .1041 48);
106
- --xz-color-purple-100: oklch(0.96 .0223 293);
107
- --xz-color-purple-200: oklch(0.94 .0299 293);
108
- --xz-color-purple-300: oklch(0.92 .0369 293);
109
- --xz-color-purple-400: oklch(0.90 .0471 293);
110
- --xz-color-purple-500: oklch(0.84 .1018 293);
111
- --xz-color-purple-600: oklch(0.72 .1881 293);
112
- --xz-color-purple-700: oklch(0.62 .2524 293);
113
- --xz-color-purple-800: oklch(0.58 .2482 293);
114
- --xz-color-purple-900: oklch(0.54 .2320 293);
115
- --xz-color-purple-1000: oklch(0.28 .1041 293);
116
- --xz-color-cyan-100: oklch(0.96 .0223 213);
117
- --xz-color-cyan-200: oklch(0.94 .0299 213);
118
- --xz-color-cyan-300: oklch(0.92 .0369 213);
119
- --xz-color-cyan-400: oklch(0.90 .0471 213);
120
- --xz-color-cyan-500: oklch(0.84 .1018 213);
121
- --xz-color-cyan-600: oklch(0.72 .1881 213);
122
- --xz-color-cyan-700: oklch(0.62 .2524 213);
123
- --xz-color-cyan-800: oklch(0.58 .2482 213);
124
- --xz-color-cyan-900: oklch(0.54 .2320 213);
125
- --xz-color-cyan-1000: oklch(0.28 .1041 213);
126
- --xz-color-blackAlpha-100: oklch(0 0 0 / 0.1);
127
- --xz-color-blackAlpha-200: oklch(0 0 0 / 0.2);
128
- --xz-color-blackAlpha-300: oklch(0 0 0 / 0.3);
129
- --xz-color-blackAlpha-400: oklch(0 0 0 / 0.4);
130
- --xz-color-blackAlpha-500: oklch(0 0 0 / 0.5);
131
- --xz-color-blackAlpha-600: oklch(0 0 0 / 0.6);
132
- --xz-color-blackAlpha-700: oklch(0 0 0 / 0.7);
133
- --xz-color-blackAlpha-800: oklch(0 0 0 / 0.8);
134
- --xz-color-blackAlpha-900: oklch(0 0 0 / 0.9);
135
- --xz-color-blackAlpha-1000: oklch(0 0 0 / 1);
136
- --xz-color-whiteAlpha-100: oklch(1 0 0 / 0.1);
137
- --xz-color-whiteAlpha-200: oklch(1 0 0 / 0.2);
138
- --xz-color-whiteAlpha-300: oklch(1 0 0 / 0.3);
139
- --xz-color-whiteAlpha-400: oklch(1 0 0 / 0.4);
140
- --xz-color-whiteAlpha-500: oklch(1 0 0 / 0.5);
141
- --xz-color-whiteAlpha-600: oklch(1 0 0 / 0.6);
142
- --xz-color-whiteAlpha-700: oklch(1 0 0 / 0.7);
143
- --xz-color-whiteAlpha-800: oklch(1 0 0 / 0.8);
144
- --xz-color-whiteAlpha-900: oklch(1 0 0 / 0.9);
145
- --xz-color-whiteAlpha-1000: oklch(1 0 0 / 1);
146
-
147
- --xz-font-size-50: 0.5rem;
148
- --xz-font-size-100: 0.625rem;
149
- --xz-font-size-200: 0.75rem;
150
- --xz-font-size-300: 0.875rem;
151
- --xz-font-size-400: 1rem;
152
- --xz-font-size-500: 1.125rem;
153
- --xz-font-size-600: 1.25rem;
154
- --xz-font-size-700: 1.5rem;
155
- --xz-font-size-800: 1.625rem;
156
- --xz-font-size-900: 2rem;
157
- --xz-font-size-1000: 2.375rem;
158
- --xz-font-size-1100: 2.5rem;
159
- --xz-font-size-1200: 2.6875rem;
160
- --xz-font-size-1300: 3rem;
161
- --xz-font-size-1400: 3.5rem;
162
- --xz-font-size-1500: 4rem;
163
- --xz-font-size-1600: 4.5rem;
164
-
165
- --xz-font-weight-100: 100;
166
- --xz-font-weight-200: 200;
167
- --xz-font-weight-300: 300;
168
- --xz-font-weight-400: 400;
169
- --xz-font-weight-500: 500;
170
- --xz-font-weight-600: 600;
171
- --xz-font-weight-700: 700;
172
- --xz-font-weight-800: 800;
173
- --xz-font-weight-900: 900;
174
-
175
- --xz-font-family-primary: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
176
- --xz-font-family-secondary: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
177
-
178
- --xz-line-height-100pct: 1;
179
- --xz-line-height-125pct: 1.25;
180
- --xz-line-height-135pct: 1.35;
181
- --xz-line-height-150pct: 1.5;
182
- --xz-line-height-165pct: 1.65;
183
- --xz-line-height-200pct: 2;
184
-
185
- --xz-heading-h1-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
186
- --xz-heading-h1-font-size: 4.5rem;
187
- --xz-heading-h1-font-weight: 700;
188
- --xz-heading-h2-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
189
- --xz-heading-h2-font-size: 4rem;
190
- --xz-heading-h2-font-weight: 700;
191
- --xz-heading-h3-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
192
- --xz-heading-h3-font-size: 3.5rem;
193
- --xz-heading-h3-font-weight: 700;
194
- --xz-heading-h4-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
195
- --xz-heading-h4-font-size: 3rem;
196
- --xz-heading-h4-font-weight: 700;
197
- --xz-heading-h5-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
198
- --xz-heading-h5-font-size: 2.5rem;
199
- --xz-heading-h5-font-weight: 700;
200
- --xz-heading-h6-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
201
- --xz-heading-h6-font-size: 2rem;
202
- --xz-heading-h6-font-weight: 700;
203
-
204
- --xz-title-title1-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
205
- --xz-title-title1-font-size: 1.5rem;
206
- --xz-title-title1-font-weight: 700;
207
- --xz-title-title2-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
208
- --xz-title-title2-font-size: 1.25rem;
209
- --xz-title-title2-font-weight: 700;
210
- --xz-title-title3-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
211
- --xz-title-title3-font-size: 1.125rem;
212
- --xz-title-title3-font-weight: 700;
213
- --xz-title-title4-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
214
- --xz-title-title4-font-size: 1rem;
215
- --xz-title-title4-font-weight: 700;
216
-
217
- --xz-subtitle-subtitle1Bold-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
218
- --xz-subtitle-subtitle1Bold-font-size: 1rem;
219
- --xz-subtitle-subtitle1Bold-font-weight: 700;
220
- --xz-subtitle-subtitle1Regular-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
221
- --xz-subtitle-subtitle1Regular-font-size: 1rem;
222
- --xz-subtitle-subtitle1Regular-font-weight: 400;
223
- --xz-subtitle-subtitle2Bold-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
224
- --xz-subtitle-subtitle2Bold-font-size: 0.875rem;
225
- --xz-subtitle-subtitle2Bold-font-weight: 700;
226
- --xz-subtitle-subtitle2Regular-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
227
- --xz-subtitle-subtitle2Regular-font-size: 0.875rem;
228
- --xz-subtitle-subtitle2Regular-font-weight: 400;
229
- --xz-subtitle-subtitle3Bold-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
230
- --xz-subtitle-subtitle3Bold-font-size: 0.75rem;
231
- --xz-subtitle-subtitle3Bold-font-weight: 700;
232
- --xz-subtitle-subtitle3Regular-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
233
- --xz-subtitle-subtitle3Regular-font-size: 0.75rem;
234
- --xz-subtitle-subtitle3Regular-font-weight: 400;
235
-
236
- --xz-body-body1-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
237
- --xz-body-body1-font-size: 1rem;
238
- --xz-body-body1-font-weight: 400;
239
- --xz-body-body2-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
240
- --xz-body-body2-font-size: 0.875rem;
241
- --xz-body-body2-font-weight: 400;
242
- --xz-body-body3-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
243
- --xz-body-body3-font-size: 0.75rem;
244
- --xz-body-body3-font-weight: 400;
245
- --xz-body-body4-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
246
- --xz-body-body4-font-size: 0.625rem;
247
- --xz-body-body4-font-weight: 400;
248
-
249
- --xz-spacing-0: 0;
250
- --xz-spacing-1: 0.25rem;
251
- --xz-spacing-2: 0.5rem;
252
- --xz-spacing-3: 0.75rem;
253
- --xz-spacing-4: 1rem;
254
- --xz-spacing-5: 1.25rem;
255
- --xz-spacing-6: 1.5rem;
256
- --xz-spacing-7: 1.75rem;
257
- --xz-spacing-8: 2rem;
258
- --xz-spacing-9: 2.25rem;
259
- --xz-spacing-10: 2.5rem;
260
- --xz-spacing-11: 2.75rem;
261
- --xz-spacing-12: 3rem;
262
- --xz-spacing-14: 3.5rem;
263
- --xz-spacing-16: 4rem;
264
- --xz-spacing-20: 5rem;
265
- --xz-spacing-24: 6rem;
266
- --xz-spacing-28: 7rem;
267
- --xz-spacing-32: 8rem;
268
- --xz-spacing-36: 9rem;
269
- --xz-spacing-40: 10rem;
270
- --xz-spacing-44: 11rem;
271
- --xz-spacing-48: 12rem;
272
- --xz-spacing-52: 13rem;
273
- --xz-spacing-56: 14rem;
274
- --xz-spacing-60: 15rem;
275
- --xz-spacing-64: 16rem;
276
- --xz-spacing-72: 18rem;
277
- --xz-spacing-80: 20rem;
278
- --xz-spacing-96: 24rem;
279
- --xz-spacing-px: 1px;
280
- --xz-spacing-0_5: 0.125rem;
281
- --xz-spacing-1_5: 0.375rem;
282
- --xz-spacing-2_5: 0.625rem;
283
- --xz-spacing-3_5: 0.875rem;
284
-
285
- --xz-radius-none: 0;
286
- --xz-radius-sm: 0.125rem;
287
- --xz-radius-base: 0.25rem;
288
- --xz-radius-md: 0.375rem;
289
- --xz-radius-lg: 0.5rem;
290
- --xz-radius-xl: 0.75rem;
291
- --xz-radius-2xl: 1rem;
292
- --xz-radius-3xl: 1.5rem;
293
- --xz-radius-full: 9999px;
294
-
295
- --xz-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
296
- --xz-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
297
- --xz-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
298
- --xz-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
299
- --xz-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
300
- --xz-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
301
- --xz-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
302
- --xz-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
303
- --xz-shadow-none: 0 0 #0000;
304
- }
305
-
306
- @media (max-width: 768px) {
307
- :root {
308
- --xz-heading-h1-font-size: 3rem;
309
- --xz-heading-h2-font-size: 2.6875rem;
310
- --xz-heading-h3-font-size: 2.375rem;
311
- --xz-heading-h4-font-size: 2rem;
312
- --xz-heading-h5-font-size: 1.625rem;
313
- --xz-heading-h6-font-size: 1.5rem;
314
-
315
- --xz-title-title1-font-size: 1.25rem;
316
- --xz-title-title2-font-size: 1.125rem;
317
- --xz-title-title3-font-size: 1rem;
318
- --xz-title-title4-font-size: 0.875rem;
319
-
320
- --xz-subtitle-subtitle1Bold-font-size: 0.875rem;
321
- --xz-subtitle-subtitle1Regular-font-size: 0.875rem;
322
- --xz-subtitle-subtitle2Bold-font-size: 0.75rem;
323
- --xz-subtitle-subtitle2Regular-font-size: 0.75rem;
324
- --xz-subtitle-subtitle3Bold-font-size: 0.625rem;
325
- --xz-subtitle-subtitle3Regular-font-size: 0.625rem;
326
-
327
- --xz-body-body1-font-size: 0.875rem;
328
- --xz-body-body2-font-size: 0.75rem;
329
- --xz-body-body3-font-size: 0.625rem;
330
- --xz-body-body4-font-size: 0.5rem;
331
- }
332
- }
package/dist/xosmoz.css DELETED
@@ -1,419 +0,0 @@
1
- /**
2
- * Xosmoz Design System - Complete CSS Bundle
3
- * Generated from design tokens
4
- *
5
- * This file includes:
6
- * - All design token CSS variables
7
- * - Semantic color variables (light/dark mode)
8
- * - Base styles and resets
9
- */
10
-
11
- :root {
12
- --xz-color-bg-100: oklch(1.00 0.00 260);
13
- --xz-color-bg-200: oklch(0.98 0.005 260);
14
- --xz-color-bg-300: oklch(0.95 0.01 260);
15
- --xz-color-bg-400: oklch(0.92 0.01 260);
16
- --xz-color-content-100: oklch(21% 0.006 285.885);
17
- --xz-color-content-200: color-mix(in oklab, var(--xz-color-content-100) 60%, transparent);
18
- --xz-color-line-100: oklch(0 0 0 / 0.1);
19
- --xz-color-line-200: oklch(0 0 0 / 0.2);
20
- --xz-color-line-300: oklch(0 0 0 / 0.3);
21
- --xz-color-primary-soft: [object Object];
22
- --xz-color-primary-line: [object Object];
23
- --xz-color-primary-bg: [object Object];
24
- --xz-color-primary-content: [object Object];
25
- --xz-color-primary-fg: oklch(1 0 0);
26
- --xz-color-danger-soft: [object Object];
27
- --xz-color-danger-line: [object Object];
28
- --xz-color-danger-bg: [object Object];
29
- --xz-color-danger-content: [object Object];
30
- --xz-color-danger-fg: oklch(1 0 0);
31
- --xz-color-success-soft: [object Object];
32
- --xz-color-success-line: [object Object];
33
- --xz-color-success-bg: [object Object];
34
- --xz-color-success-content: [object Object];
35
- --xz-color-success-fg: oklch(1 0 0);
36
- --xz-color-warning-soft: [object Object];
37
- --xz-color-warning-line: [object Object];
38
- --xz-color-warning-bg: [object Object];
39
- --xz-color-warning-content: [object Object];
40
- --xz-color-warning-fg: oklch(1 0 0);
41
- --xz-color-info-soft: [object Object];
42
- --xz-color-info-line: [object Object];
43
- --xz-color-info-bg: [object Object];
44
- --xz-color-info-content: [object Object];
45
- --xz-color-info-fg: oklch(1 0 0);
46
- --xz-color-fastwork-100: oklch(0.96 .0223 260);
47
- --xz-color-fastwork-200: oklch(0.94 .0299 260);
48
- --xz-color-fastwork-300: oklch(0.92 .0369 260);
49
- --xz-color-fastwork-400: oklch(0.90 .0471 260);
50
- --xz-color-fastwork-500: oklch(0.84 .1018 260);
51
- --xz-color-fastwork-600: oklch(0.72 .1881 260);
52
- --xz-color-fastwork-700: oklch(0.58 .2524 260);
53
- --xz-color-fastwork-800: oklch(0.54 .2482 260);
54
- --xz-color-fastwork-900: oklch(0.54 .2320 260);
55
- --xz-color-fastwork-1000: oklch(0.28 .1041 260);
56
- --xz-color-gray-100: oklch(0.96 0.005 260);
57
- --xz-color-gray-200: oklch(0.94 0.005 260);
58
- --xz-color-gray-300: oklch(0.92 0.005 260);
59
- --xz-color-gray-400: oklch(0.90 0.005 260);
60
- --xz-color-gray-500: oklch(0.84 0.005 260);
61
- --xz-color-gray-600: oklch(0.72 0.005 260);
62
- --xz-color-gray-700: oklch(0.62 0.005 260);
63
- --xz-color-gray-800: oklch(0.58 0.005 260);
64
- --xz-color-gray-900: oklch(0.54 0.005 260);
65
- --xz-color-gray-1000: oklch(0.28 0.005 260);
66
- --xz-color-green-100: oklch(0.96 .0223 143);
67
- --xz-color-green-200: oklch(0.94 .0299 143);
68
- --xz-color-green-300: oklch(0.92 .0369 143);
69
- --xz-color-green-400: oklch(0.90 .0471 143);
70
- --xz-color-green-500: oklch(0.84 .1018 143);
71
- --xz-color-green-600: oklch(0.72 .1881 143);
72
- --xz-color-green-700: oklch(0.62 .2524 143);
73
- --xz-color-green-800: oklch(0.58 .2482 143);
74
- --xz-color-green-900: oklch(0.54 .2320 143);
75
- --xz-color-green-1000: oklch(0.28 .1041 143);
76
- --xz-color-mint-100: oklch(0.96 .0223 163);
77
- --xz-color-mint-200: oklch(0.94 .0299 163);
78
- --xz-color-mint-300: oklch(0.92 .0369 163);
79
- --xz-color-mint-400: oklch(0.90 .0471 163);
80
- --xz-color-mint-500: oklch(0.84 .1018 163);
81
- --xz-color-mint-600: oklch(0.72 .1881 163);
82
- --xz-color-mint-700: oklch(0.62 .2524 163);
83
- --xz-color-mint-800: oklch(0.58 .2482 163);
84
- --xz-color-mint-900: oklch(0.54 .2320 163);
85
- --xz-color-mint-1000: oklch(0.28 .1041 163);
86
- --xz-color-amber-100: oklch(0.96 .0223 79);
87
- --xz-color-amber-200: oklch(0.94 .0299 79);
88
- --xz-color-amber-300: oklch(0.92 .0369 79);
89
- --xz-color-amber-400: oklch(0.90 .0471 79);
90
- --xz-color-amber-500: oklch(0.84 .1018 79);
91
- --xz-color-amber-600: oklch(0.72 .1881 79);
92
- --xz-color-amber-700: oklch(0.62 .2524 79);
93
- --xz-color-amber-800: oklch(0.58 .2482 79);
94
- --xz-color-amber-900: oklch(0.54 .2320 79);
95
- --xz-color-amber-1000: oklch(0.28 .1041 79);
96
- --xz-color-red-100: oklch(0.96 .0223 30);
97
- --xz-color-red-200: oklch(0.94 .0299 30);
98
- --xz-color-red-300: oklch(0.92 .0369 30);
99
- --xz-color-red-400: oklch(0.90 .0471 30);
100
- --xz-color-red-500: oklch(0.84 .1018 30);
101
- --xz-color-red-600: oklch(0.72 .1881 30);
102
- --xz-color-red-700: oklch(0.62 .2524 30);
103
- --xz-color-red-800: oklch(0.58 .2482 30);
104
- --xz-color-red-900: oklch(0.54 .2320 30);
105
- --xz-color-red-1000: oklch(0.28 .1041 30);
106
- --xz-color-orange-100: oklch(0.96 .0223 48);
107
- --xz-color-orange-200: oklch(0.94 .0299 48);
108
- --xz-color-orange-300: oklch(0.92 .0369 48);
109
- --xz-color-orange-400: oklch(0.90 .0471 48);
110
- --xz-color-orange-500: oklch(0.84 .1018 48);
111
- --xz-color-orange-600: oklch(0.72 .1881 48);
112
- --xz-color-orange-700: oklch(0.62 .2524 48);
113
- --xz-color-orange-800: oklch(0.58 .2482 48);
114
- --xz-color-orange-900: oklch(0.54 .2320 48);
115
- --xz-color-orange-1000: oklch(0.28 .1041 48);
116
- --xz-color-purple-100: oklch(0.96 .0223 293);
117
- --xz-color-purple-200: oklch(0.94 .0299 293);
118
- --xz-color-purple-300: oklch(0.92 .0369 293);
119
- --xz-color-purple-400: oklch(0.90 .0471 293);
120
- --xz-color-purple-500: oklch(0.84 .1018 293);
121
- --xz-color-purple-600: oklch(0.72 .1881 293);
122
- --xz-color-purple-700: oklch(0.62 .2524 293);
123
- --xz-color-purple-800: oklch(0.58 .2482 293);
124
- --xz-color-purple-900: oklch(0.54 .2320 293);
125
- --xz-color-purple-1000: oklch(0.28 .1041 293);
126
- --xz-color-cyan-100: oklch(0.96 .0223 213);
127
- --xz-color-cyan-200: oklch(0.94 .0299 213);
128
- --xz-color-cyan-300: oklch(0.92 .0369 213);
129
- --xz-color-cyan-400: oklch(0.90 .0471 213);
130
- --xz-color-cyan-500: oklch(0.84 .1018 213);
131
- --xz-color-cyan-600: oklch(0.72 .1881 213);
132
- --xz-color-cyan-700: oklch(0.62 .2524 213);
133
- --xz-color-cyan-800: oklch(0.58 .2482 213);
134
- --xz-color-cyan-900: oklch(0.54 .2320 213);
135
- --xz-color-cyan-1000: oklch(0.28 .1041 213);
136
- --xz-color-blackAlpha-100: oklch(0 0 0 / 0.1);
137
- --xz-color-blackAlpha-200: oklch(0 0 0 / 0.2);
138
- --xz-color-blackAlpha-300: oklch(0 0 0 / 0.3);
139
- --xz-color-blackAlpha-400: oklch(0 0 0 / 0.4);
140
- --xz-color-blackAlpha-500: oklch(0 0 0 / 0.5);
141
- --xz-color-blackAlpha-600: oklch(0 0 0 / 0.6);
142
- --xz-color-blackAlpha-700: oklch(0 0 0 / 0.7);
143
- --xz-color-blackAlpha-800: oklch(0 0 0 / 0.8);
144
- --xz-color-blackAlpha-900: oklch(0 0 0 / 0.9);
145
- --xz-color-blackAlpha-1000: oklch(0 0 0 / 1);
146
- --xz-color-whiteAlpha-100: oklch(1 0 0 / 0.1);
147
- --xz-color-whiteAlpha-200: oklch(1 0 0 / 0.2);
148
- --xz-color-whiteAlpha-300: oklch(1 0 0 / 0.3);
149
- --xz-color-whiteAlpha-400: oklch(1 0 0 / 0.4);
150
- --xz-color-whiteAlpha-500: oklch(1 0 0 / 0.5);
151
- --xz-color-whiteAlpha-600: oklch(1 0 0 / 0.6);
152
- --xz-color-whiteAlpha-700: oklch(1 0 0 / 0.7);
153
- --xz-color-whiteAlpha-800: oklch(1 0 0 / 0.8);
154
- --xz-color-whiteAlpha-900: oklch(1 0 0 / 0.9);
155
- --xz-color-whiteAlpha-1000: oklch(1 0 0 / 1);
156
-
157
- --xz-font-size-50: 0.5rem;
158
- --xz-font-size-100: 0.625rem;
159
- --xz-font-size-200: 0.75rem;
160
- --xz-font-size-300: 0.875rem;
161
- --xz-font-size-400: 1rem;
162
- --xz-font-size-500: 1.125rem;
163
- --xz-font-size-600: 1.25rem;
164
- --xz-font-size-700: 1.5rem;
165
- --xz-font-size-800: 1.625rem;
166
- --xz-font-size-900: 2rem;
167
- --xz-font-size-1000: 2.375rem;
168
- --xz-font-size-1100: 2.5rem;
169
- --xz-font-size-1200: 2.6875rem;
170
- --xz-font-size-1300: 3rem;
171
- --xz-font-size-1400: 3.5rem;
172
- --xz-font-size-1500: 4rem;
173
- --xz-font-size-1600: 4.5rem;
174
-
175
- --xz-font-weight-100: 100;
176
- --xz-font-weight-200: 200;
177
- --xz-font-weight-300: 300;
178
- --xz-font-weight-400: 400;
179
- --xz-font-weight-500: 500;
180
- --xz-font-weight-600: 600;
181
- --xz-font-weight-700: 700;
182
- --xz-font-weight-800: 800;
183
- --xz-font-weight-900: 900;
184
-
185
- --xz-font-family-primary: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
186
- --xz-font-family-secondary: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
187
-
188
- --xz-line-height-100pct: 1;
189
- --xz-line-height-125pct: 1.25;
190
- --xz-line-height-135pct: 1.35;
191
- --xz-line-height-150pct: 1.5;
192
- --xz-line-height-165pct: 1.65;
193
- --xz-line-height-200pct: 2;
194
-
195
- --xz-heading-h1-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
196
- --xz-heading-h1-font-size: 4.5rem;
197
- --xz-heading-h1-font-weight: 700;
198
- --xz-heading-h2-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
199
- --xz-heading-h2-font-size: 4rem;
200
- --xz-heading-h2-font-weight: 700;
201
- --xz-heading-h3-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
202
- --xz-heading-h3-font-size: 3.5rem;
203
- --xz-heading-h3-font-weight: 700;
204
- --xz-heading-h4-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
205
- --xz-heading-h4-font-size: 3rem;
206
- --xz-heading-h4-font-weight: 700;
207
- --xz-heading-h5-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
208
- --xz-heading-h5-font-size: 2.5rem;
209
- --xz-heading-h5-font-weight: 700;
210
- --xz-heading-h6-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
211
- --xz-heading-h6-font-size: 2rem;
212
- --xz-heading-h6-font-weight: 700;
213
-
214
- --xz-title-title1-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
215
- --xz-title-title1-font-size: 1.5rem;
216
- --xz-title-title1-font-weight: 700;
217
- --xz-title-title2-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
218
- --xz-title-title2-font-size: 1.25rem;
219
- --xz-title-title2-font-weight: 700;
220
- --xz-title-title3-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
221
- --xz-title-title3-font-size: 1.125rem;
222
- --xz-title-title3-font-weight: 700;
223
- --xz-title-title4-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
224
- --xz-title-title4-font-size: 1rem;
225
- --xz-title-title4-font-weight: 700;
226
-
227
- --xz-subtitle-subtitle1Bold-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
228
- --xz-subtitle-subtitle1Bold-font-size: 1rem;
229
- --xz-subtitle-subtitle1Bold-font-weight: 700;
230
- --xz-subtitle-subtitle1Regular-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
231
- --xz-subtitle-subtitle1Regular-font-size: 1rem;
232
- --xz-subtitle-subtitle1Regular-font-weight: 400;
233
- --xz-subtitle-subtitle2Bold-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
234
- --xz-subtitle-subtitle2Bold-font-size: 0.875rem;
235
- --xz-subtitle-subtitle2Bold-font-weight: 700;
236
- --xz-subtitle-subtitle2Regular-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
237
- --xz-subtitle-subtitle2Regular-font-size: 0.875rem;
238
- --xz-subtitle-subtitle2Regular-font-weight: 400;
239
- --xz-subtitle-subtitle3Bold-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
240
- --xz-subtitle-subtitle3Bold-font-size: 0.75rem;
241
- --xz-subtitle-subtitle3Bold-font-weight: 700;
242
- --xz-subtitle-subtitle3Regular-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
243
- --xz-subtitle-subtitle3Regular-font-size: 0.75rem;
244
- --xz-subtitle-subtitle3Regular-font-weight: 400;
245
-
246
- --xz-body-body1-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
247
- --xz-body-body1-font-size: 1rem;
248
- --xz-body-body1-font-weight: 400;
249
- --xz-body-body2-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
250
- --xz-body-body2-font-size: 0.875rem;
251
- --xz-body-body2-font-weight: 400;
252
- --xz-body-body3-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
253
- --xz-body-body3-font-size: 0.75rem;
254
- --xz-body-body3-font-weight: 400;
255
- --xz-body-body4-font-family: "Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
256
- --xz-body-body4-font-size: 0.625rem;
257
- --xz-body-body4-font-weight: 400;
258
-
259
- --xz-spacing-0: 0;
260
- --xz-spacing-1: 0.25rem;
261
- --xz-spacing-2: 0.5rem;
262
- --xz-spacing-3: 0.75rem;
263
- --xz-spacing-4: 1rem;
264
- --xz-spacing-5: 1.25rem;
265
- --xz-spacing-6: 1.5rem;
266
- --xz-spacing-7: 1.75rem;
267
- --xz-spacing-8: 2rem;
268
- --xz-spacing-9: 2.25rem;
269
- --xz-spacing-10: 2.5rem;
270
- --xz-spacing-11: 2.75rem;
271
- --xz-spacing-12: 3rem;
272
- --xz-spacing-14: 3.5rem;
273
- --xz-spacing-16: 4rem;
274
- --xz-spacing-20: 5rem;
275
- --xz-spacing-24: 6rem;
276
- --xz-spacing-28: 7rem;
277
- --xz-spacing-32: 8rem;
278
- --xz-spacing-36: 9rem;
279
- --xz-spacing-40: 10rem;
280
- --xz-spacing-44: 11rem;
281
- --xz-spacing-48: 12rem;
282
- --xz-spacing-52: 13rem;
283
- --xz-spacing-56: 14rem;
284
- --xz-spacing-60: 15rem;
285
- --xz-spacing-64: 16rem;
286
- --xz-spacing-72: 18rem;
287
- --xz-spacing-80: 20rem;
288
- --xz-spacing-96: 24rem;
289
- --xz-spacing-px: 1px;
290
- --xz-spacing-0_5: 0.125rem;
291
- --xz-spacing-1_5: 0.375rem;
292
- --xz-spacing-2_5: 0.625rem;
293
- --xz-spacing-3_5: 0.875rem;
294
-
295
- --xz-radius-none: 0;
296
- --xz-radius-sm: 0.125rem;
297
- --xz-radius-base: 0.25rem;
298
- --xz-radius-md: 0.375rem;
299
- --xz-radius-lg: 0.5rem;
300
- --xz-radius-xl: 0.75rem;
301
- --xz-radius-2xl: 1rem;
302
- --xz-radius-3xl: 1.5rem;
303
- --xz-radius-full: 9999px;
304
-
305
- --xz-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
306
- --xz-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
307
- --xz-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
308
- --xz-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
309
- --xz-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
310
- --xz-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
311
- --xz-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
312
- --xz-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
313
- --xz-shadow-none: 0 0 #0000;
314
- }
315
-
316
- @media (max-width: 768px) {
317
- :root {
318
- --xz-heading-h1-font-size: 3rem;
319
- --xz-heading-h2-font-size: 2.6875rem;
320
- --xz-heading-h3-font-size: 2.375rem;
321
- --xz-heading-h4-font-size: 2rem;
322
- --xz-heading-h5-font-size: 1.625rem;
323
- --xz-heading-h6-font-size: 1.5rem;
324
-
325
- --xz-title-title1-font-size: 1.25rem;
326
- --xz-title-title2-font-size: 1.125rem;
327
- --xz-title-title3-font-size: 1rem;
328
- --xz-title-title4-font-size: 0.875rem;
329
-
330
- --xz-subtitle-subtitle1Bold-font-size: 0.875rem;
331
- --xz-subtitle-subtitle1Regular-font-size: 0.875rem;
332
- --xz-subtitle-subtitle2Bold-font-size: 0.75rem;
333
- --xz-subtitle-subtitle2Regular-font-size: 0.75rem;
334
- --xz-subtitle-subtitle3Bold-font-size: 0.625rem;
335
- --xz-subtitle-subtitle3Regular-font-size: 0.625rem;
336
-
337
- --xz-body-body1-font-size: 0.875rem;
338
- --xz-body-body2-font-size: 0.75rem;
339
- --xz-body-body3-font-size: 0.625rem;
340
- --xz-body-body4-font-size: 0.5rem;
341
- }
342
- }
343
-
344
- :root {
345
- /* Semantic colors - Light mode */
346
- --xz-background: var(--xz-color-neutral-50);
347
- --xz-foreground: var(--xz-color-neutral-900);
348
- --xz-muted: var(--xz-color-neutral-100);
349
- --xz-muted-foreground: var(--xz-color-neutral-600);
350
- --xz-border: var(--xz-color-neutral-200);
351
- --xz-input: var(--xz-color-neutral-200);
352
- --xz-ring: var(--xz-color-primary-500);
353
-
354
- /* Component colors */
355
- --xz-card: var(--xz-color-neutral-50);
356
- --xz-card-foreground: var(--xz-color-neutral-900);
357
- --xz-popover: var(--xz-color-neutral-50);
358
- --xz-popover-foreground: var(--xz-color-neutral-900);
359
-
360
- /* Button colors */
361
- --xz-primary: var(--xz-color-primary-500);
362
- --xz-primary-foreground: var(--xz-color-neutral-50);
363
- --xz-secondary: var(--xz-color-secondary-500);
364
- --xz-secondary-foreground: var(--xz-color-neutral-50);
365
- --xz-accent: var(--xz-color-accent-500);
366
- --xz-accent-foreground: var(--xz-color-neutral-50);
367
-
368
- /* Status colors */
369
- --xz-success: var(--xz-color-success-500);
370
- --xz-success-foreground: var(--xz-color-neutral-50);
371
- --xz-warning: var(--xz-color-warning-500);
372
- --xz-warning-foreground: var(--xz-color-neutral-50);
373
- --xz-error: var(--xz-color-error-500);
374
- --xz-error-foreground: var(--xz-color-neutral-50);
375
- --xz-info: var(--xz-color-info-500);
376
- --xz-info-foreground: var(--xz-color-neutral-50);
377
- }
378
-
379
- [data-theme="dark"] {
380
- /* Semantic colors - Dark mode */
381
- --xz-background: var(--xz-color-neutral-900);
382
- --xz-foreground: var(--xz-color-neutral-50);
383
- --xz-muted: var(--xz-color-neutral-900);
384
- --xz-muted-foreground: var(--xz-color-neutral-400);
385
- --xz-border: var(--xz-color-neutral-800);
386
- --xz-input: var(--xz-color-neutral-800);
387
- --xz-ring: var(--xz-color-primary-400);
388
-
389
- /* Component colors */
390
- --xz-card: var(--xz-color-neutral-900);
391
- --xz-card-foreground: var(--xz-color-neutral-50);
392
- --xz-popover: var(--xz-color-neutral-900);
393
- --xz-popover-foreground: var(--xz-color-neutral-50);
394
- }
395
-
396
- /* Xosmoz Base Styles */
397
-
398
- *,
399
- *::before,
400
- *::after {
401
- box-sizing: border-box;
402
- margin: 0;
403
- padding: 0;
404
- }
405
-
406
- html {
407
- -webkit-font-smoothing: antialiased;
408
- -moz-osx-font-smoothing: grayscale;
409
- text-rendering: optimizeLegibility;
410
- }
411
-
412
- body {
413
- font-family: var(--xz-font-family-primary);
414
- font-size: var(--xz-font-size-base);
415
- line-height: var(--xz-line-height-normal);
416
- color: var(--xz-color-content-100);
417
- background-color: var(--xz-color-bg-100);
418
- }
419
-