@fastwork/xosmoz-theme 0.0.14 → 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 (26) hide show
  1. package/README.md +70 -97
  2. package/dist/base.css +208 -4
  3. package/dist/{index-B3oQ5FIa.d.mts → index-D8kHN4dA.d.mts} +8 -25
  4. package/dist/{index-B3oQ5FIa.d.ts → index-D8kHN4dA.d.ts} +8 -25
  5. package/dist/index.d.mts +61 -73
  6. package/dist/index.d.ts +61 -73
  7. package/dist/index.js +532 -541
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.mjs +533 -523
  10. package/dist/index.mjs.map +1 -1
  11. package/dist/themes/dark.css +174 -25
  12. package/dist/themes/light.css +175 -26
  13. package/dist/themes.css +349 -138
  14. package/dist/tokens.d.mts +1 -1
  15. package/dist/tokens.d.ts +1 -1
  16. package/dist/tokens.js +0 -244
  17. package/dist/tokens.js.map +1 -1
  18. package/dist/tokens.mjs +1 -234
  19. package/dist/tokens.mjs.map +1 -1
  20. package/package.json +55 -57
  21. package/dist/semantic.css +0 -51
  22. package/dist/themes/cyberpunk.css +0 -27
  23. package/dist/themes/forest.css +0 -27
  24. package/dist/themes/ocean.css +0 -27
  25. package/dist/variables.css +0 -290
  26. package/dist/xosmoz.css +0 -377
package/README.md CHANGED
@@ -18,24 +18,19 @@ Xosmoz includes a powerful multi-theme system inspired by DaisyUI. Choose from p
18
18
 
19
19
  - **light** - Clean, modern light theme (default)
20
20
  - **dark** - Elegant dark theme
21
- - **cyberpunk** - Neon colors on dark background
22
- - **forest** - Natural greens and earthy tones
23
- - **ocean** - Deep blues and aqua tones
24
21
 
25
22
  #### Quick Start
26
23
 
27
24
  ```css
28
- /* Import base design tokens */
29
- @import '@fastwork/xosmoz-theme/css/variables';
30
- @import '@fastwork/xosmoz-theme/css/base';
25
+ /* Import base styles and non-color tokens */
26
+ @import '@fastwork/xosmoz-theme/base.css';
31
27
 
32
- /* Import all themes */
33
- @import '@fastwork/xosmoz-theme/themes';
28
+ /* Import all themes (light + dark) */
29
+ @import '@fastwork/xosmoz-theme/themes.css';
34
30
 
35
- /* OR import specific themes only */
36
- @import '@fastwork/xosmoz-theme/themes/light';
37
- @import '@fastwork/xosmoz-theme/themes/dark';
38
- @import '@fastwork/xosmoz-theme/themes/cyberpunk';
31
+ /* OR import specific theme only */
32
+ @import '@fastwork/xosmoz-theme/themes/light.css';
33
+ /* @import '@fastwork/xosmoz-theme/themes/dark.css'; */
39
34
  ```
40
35
 
41
36
  Then set the theme via HTML attribute:
@@ -46,15 +41,6 @@ Then set the theme via HTML attribute:
46
41
 
47
42
  <!-- Dark theme -->
48
43
  <html data-theme="dark">...</html>
49
-
50
- <!-- Cyberpunk theme -->
51
- <html data-theme="cyberpunk">...</html>
52
-
53
- <!-- Forest theme -->
54
- <html data-theme="forest">...</html>
55
-
56
- <!-- Ocean theme -->
57
- <html data-theme="ocean">...</html>
58
44
  ```
59
45
 
60
46
  #### Using Theme Variables
@@ -63,22 +49,22 @@ All themes use the same semantic CSS variables, so your components work across a
63
49
 
64
50
  ```css
65
51
  .button {
66
- background-color: var(--xz-primary);
67
- color: var(--xz-primary-foreground);
52
+ background-color: var(--xz-color-primary-bg-100);
53
+ color: var(--xz-color-primary-fg);
68
54
  padding: var(--xz-spacing-4);
69
55
  border-radius: var(--xz-radius-md);
70
56
  }
71
57
 
72
58
  .card {
73
- background: var(--xz-card);
74
- color: var(--xz-card-foreground);
75
- border: 1px solid var(--xz-border);
59
+ background: var(--xz-color-bg-200);
60
+ color: var(--xz-color-content-100);
61
+ border: 1px solid var(--xz-color-border);
76
62
  box-shadow: var(--xz-shadow-md);
77
63
  }
78
64
 
79
65
  .alert-success {
80
- background: var(--xz-success);
81
- color: var(--xz-success-foreground);
66
+ background: var(--xz-color-success-bg-100);
67
+ color: var(--xz-color-success-fg);
82
68
  }
83
69
  ```
84
70
 
@@ -91,9 +77,8 @@ function setTheme(themeName) {
91
77
  }
92
78
 
93
79
  // Usage
94
- setTheme('dark'); // Switch to dark theme
95
- setTheme('cyberpunk'); // Switch to cyberpunk theme
96
- setTheme('light'); // Switch to light theme
80
+ setTheme('dark'); // Switch to dark theme
81
+ setTheme('light'); // Switch to light theme
97
82
 
98
83
  // Load saved theme on page load
99
84
  const savedTheme = localStorage.getItem('theme') || 'light';
@@ -108,12 +93,12 @@ You can create custom themes in two ways:
108
93
 
109
94
  ```css
110
95
  [data-theme="my-custom-theme"] {
111
- --xz-background: #ffffff;
112
- --xz-foreground: #000000;
113
- --xz-primary: #ff6b6b;
114
- --xz-primary-foreground: #ffffff;
115
- --xz-secondary: #4ecdc4;
116
- --xz-secondary-foreground: #ffffff;
96
+ --xz-color-bg-100: oklch(1.00 0 0);
97
+ --xz-color-bg-200: oklch(0.98 0 0);
98
+ --xz-color-content-100: oklch(0.20 0 0);
99
+ --xz-color-border: oklch(0.90 0.005 260);
100
+ --xz-color-primary-bg-100: oklch(0.58 .2524 30);
101
+ --xz-color-primary-fg: oklch(1 0 0);
117
102
  /* ... other theme variables */
118
103
  }
119
104
  ```
@@ -145,25 +130,28 @@ console.log(myTheme.colors.primary); // '#ff6b6b'
145
130
 
146
131
  All themes support these semantic CSS variables:
147
132
 
148
- - `--xz-background` / `--xz-foreground`
149
- - `--xz-primary` / `--xz-primary-foreground`
150
- - `--xz-secondary` / `--xz-secondary-foreground`
151
- - `--xz-accent` / `--xz-accent-foreground`
152
- - `--xz-success` / `--xz-success-foreground`
153
- - `--xz-warning` / `--xz-warning-foreground`
154
- - `--xz-destructive` / `--xz-destructive-foreground`
155
- - `--xz-muted` / `--xz-muted-foreground`
156
- - `--xz-card` / `--xz-card-foreground`
157
- - `--xz-popover` / `--xz-popover-foreground`
158
- - `--xz-border` / `--xz-input` / `--xz-ring`
133
+ **Base Colors:**
134
+ - `--xz-color-bg-100` / `--xz-color-bg-200` / `--xz-color-bg-300` / `--xz-color-bg-400` - Background shades
135
+ - `--xz-color-content-100` / `--xz-color-content-200` - Text/content colors
136
+ - `--xz-color-border` - Border color
137
+ - `--xz-color-input` - Input border color
138
+ - `--xz-color-ring` - Focus ring color
139
+
140
+ **Semantic Colors (primary, danger, success, warning, info):**
141
+ - `--xz-color-{name}-bg-100` - Main background color
142
+ - `--xz-color-{name}-bg-200` - Hover/darker background color
143
+ - `--xz-color-{name}-content-100` - Main content color
144
+ - `--xz-color-{name}-content-200` - Muted content color
145
+ - `--xz-color-{name}-fg` - Foreground/text color for use on background
159
146
 
160
147
  ### Using Design Tokens in JavaScript/TypeScript
161
148
 
162
149
  ```typescript
163
- import { colors, typography, spacing } from '@fastwork/xosmoz-theme';
150
+ import { lightTheme, darkTheme, typography, spacing } from '@fastwork/xosmoz-theme';
164
151
 
165
- // Access color tokens
166
- console.log(colors.primary[500]); // '#0ea5e9'
152
+ // Access color tokens from themes
153
+ console.log(lightTheme.colors.fastwork[500]); // 'oklch(0.72 .1881 260)'
154
+ console.log(darkTheme.colors.gray[300]); // 'oklch(0.90 0.005 260)'
167
155
 
168
156
  // Access typography
169
157
  console.log(typography.fontSize.lg); // '1.125rem'
@@ -172,38 +160,27 @@ console.log(typography.fontSize.lg); // '1.125rem'
172
160
  console.log(spacing[4]); // '1rem'
173
161
  ```
174
162
 
175
- ### Using the Theme Object
176
-
177
- ```typescript
178
- import { defaultTheme, createTheme } from '@fastwork/xosmoz-theme';
179
-
180
- // Use default theme
181
- console.log(defaultTheme);
182
-
183
- // Create custom theme
184
- const customTheme = createTheme({
185
- colors: {
186
- primary: {
187
- // Override primary colors
188
- 500: '#custom-color',
189
- // ... other shades
190
- },
191
- },
192
- });
193
- ```
194
-
195
163
  ### Generate CSS Variables Programmatically
196
164
 
197
165
  ```typescript
198
- import { generateCSSVariables, defaultTheme } from '@fastwork/xosmoz-theme';
166
+ import { generateCSSVariables, lightTheme, typography, spacing, borderRadius, shadows } from '@fastwork/xosmoz-theme';
167
+
168
+ // Construct a complete theme object
169
+ const themeObject = {
170
+ colors: lightTheme.colors,
171
+ typography,
172
+ spacing,
173
+ borderRadius,
174
+ shadows,
175
+ };
199
176
 
200
177
  // Generate CSS custom properties as a string
201
- const cssVars = generateCSSVariables(defaultTheme);
178
+ const cssVars = generateCSSVariables(themeObject);
202
179
  console.log(cssVars);
203
180
  // Output:
204
181
  // :root {
205
- // --xz-color-primary-50: #f0f9ff;
206
- // --xz-color-primary-100: #e0f2fe;
182
+ // --xosmoz-color-fastwork-100: oklch(0.96 .0223 260);
183
+ // --xosmoz-color-fastwork-200: oklch(0.94 .0299 260);
207
184
  // ...
208
185
  // }
209
186
  ```
@@ -240,32 +217,28 @@ console.log(cssVars);
240
217
 
241
218
  After building, the following CSS files are generated in `dist/`:
242
219
 
243
- ### Design Token Files
244
- - **`variables.css`** - All design token CSS variables (colors, typography, spacing, etc.)
245
- - **`base.css`** - Base styles and CSS resets
246
- - **`xosmoz.css`** - Complete legacy bundle (variables + semantic + base)
247
-
248
- ### Theme Files (DaisyUI-style)
249
- - **`themes.css`** - All 5 predefined themes in one file
250
- - **`themes/light.css`** - Light theme only
251
- - **`themes/dark.css`** - Dark theme only
252
- - **`themes/cyberpunk.css`** - Cyberpunk theme only
253
- - **`themes/forest.css`** - Forest theme only
254
- - **`themes/ocean.css`** - Ocean 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
255
225
 
256
226
  ### Import Examples
257
227
 
258
228
  ```css
259
- /* Recommended: Base tokens + all themes */
260
- @import '@fastwork/xosmoz-theme/css/variables';
261
- @import '@fastwork/xosmoz-theme/css/base';
262
- @import '@fastwork/xosmoz-theme/themes';
263
-
264
- /* OR: Import only specific themes */
265
- @import '@fastwork/xosmoz-theme/css/variables';
266
- @import '@fastwork/xosmoz-theme/css/base';
267
- @import '@fastwork/xosmoz-theme/themes/light';
268
- @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';
269
242
  ```
270
243
 
271
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,
@@ -15,9 +30,198 @@ html {
15
30
  }
16
31
 
17
32
  body {
18
- font-family: var(--xz-font-family-sans);
33
+ font-family: var(--xz-font-family-primary);
19
34
  font-size: var(--xz-font-size-base);
20
35
  line-height: var(--xz-line-height-normal);
21
- color: var(--xz-foreground);
22
- background-color: var(--xz-background);
36
+ color: var(--xz-color-content-100);
37
+ background-color: var(--xz-color-bg-100);
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
+ }
23
227
  }
package/dist/{index-B3oQ5FIa.d.mts → index-D8kHN4dA.d.mts} RENAMED
@@ -2,7 +2,6 @@
2
2
  * Theme type definitions
3
3
  */
4
4
  interface ColorToken {
5
- 50: string;
6
5
  100: string;
7
6
  200: string;
8
7
  300: string;
@@ -12,20 +11,20 @@ interface ColorToken {
12
11
  700: string;
13
12
  800: string;
14
13
  900: string;
15
- 1000?: string;
16
- 1100?: string;
14
+ 1000: string;
17
15
  }
18
16
  interface ThemeColors {
19
- primary: ColorToken;
20
- neutral: ColorToken;
17
+ fastwork: ColorToken;
18
+ gray: ColorToken;
21
19
  green: ColorToken;
22
- yellow: ColorToken;
20
+ mint: ColorToken;
21
+ amber: ColorToken;
23
22
  red: ColorToken;
24
23
  orange: ColorToken;
25
24
  purple: ColorToken;
26
25
  cyan: ColorToken;
27
- 'black-alpha': ColorToken;
28
- 'white-alpha': ColorToken;
26
+ blackAlpha: ColorToken;
27
+ whiteAlpha: ColorToken;
29
28
  }
30
29
  interface TypographyScale {
31
30
  50: string;
@@ -179,22 +178,6 @@ interface Theme {
179
178
  shadows: Shadows;
180
179
  }
181
180
 
182
- /**
183
- * Color design tokens
184
- */
185
-
186
- declare const primary: ColorToken;
187
- declare const neutral: ColorToken;
188
- declare const green: ColorToken;
189
- declare const yellow: ColorToken;
190
- declare const red: ColorToken;
191
- declare const orange: ColorToken;
192
- declare const purple: ColorToken;
193
- declare const cyan: ColorToken;
194
- declare const blackAlpha: ColorToken;
195
- declare const whiteAlpha: ColorToken;
196
- declare const colors: ThemeColors;
197
-
198
181
  /**
199
182
  * Typography design tokens
200
183
  */
@@ -256,4 +239,4 @@ declare const shadows: Shadows;
256
239
 
257
240
  declare const borderRadius: BorderRadius;
258
241
 
259
- export { type TitleTokens as A, type BodyTokens as B, type ColorToken as C, type SpacingScale as D, type BorderRadius as E, type FontWeights as F, type Shadows as G, type HeadingTokens as H, type SubtitleTokens as S, type Theme as T, purple as a, blackAlpha as b, cyan as c, colors as d, fontWeight as e, fontSize as f, green as g, fontFamily as h, headings as i, body as j, typography as k, lineHeight as l, spacing as m, neutral as n, orange as o, primary as p, shadows as q, red as r, subtitles as s, titles as t, borderRadius as u, type ThemeColors as v, whiteAlpha as w, type TypographyScale as x, yellow as y, type TypographyToken as z };
242
+ export { type BodyTokens as B, type ColorToken as C, type FontWeights as F, type HeadingTokens as H, type SubtitleTokens as S, type ThemeColors as T, fontWeight as a, fontFamily as b, body as c, typography as d, spacing as e, fontSize as f, shadows as g, headings as h, borderRadius as i, type TypographyScale as j, type TypographyToken as k, lineHeight as l, type TitleTokens as m, type SpacingScale as n, type BorderRadius as o, type Shadows as p, type Theme as q, subtitles as s, titles as t };
package/dist/{index-B3oQ5FIa.d.ts → index-D8kHN4dA.d.ts} RENAMED
@@ -2,7 +2,6 @@
2
2
  * Theme type definitions
3
3
  */
4
4
  interface ColorToken {
5
- 50: string;
6
5
  100: string;
7
6
  200: string;
8
7
  300: string;
@@ -12,20 +11,20 @@ interface ColorToken {
12
11
  700: string;
13
12
  800: string;
14
13
  900: string;
15
- 1000?: string;
16
- 1100?: string;
14
+ 1000: string;
17
15
  }
18
16
  interface ThemeColors {
19
- primary: ColorToken;
20
- neutral: ColorToken;
17
+ fastwork: ColorToken;
18
+ gray: ColorToken;
21
19
  green: ColorToken;
22
- yellow: ColorToken;
20
+ mint: ColorToken;
21
+ amber: ColorToken;
23
22
  red: ColorToken;
24
23
  orange: ColorToken;
25
24
  purple: ColorToken;
26
25
  cyan: ColorToken;
27
- 'black-alpha': ColorToken;
28
- 'white-alpha': ColorToken;
26
+ blackAlpha: ColorToken;
27
+ whiteAlpha: ColorToken;
29
28
  }
30
29
  interface TypographyScale {
31
30
  50: string;
@@ -179,22 +178,6 @@ interface Theme {
179
178
  shadows: Shadows;
180
179
  }
181
180
 
182
- /**
183
- * Color design tokens
184
- */
185
-
186
- declare const primary: ColorToken;
187
- declare const neutral: ColorToken;
188
- declare const green: ColorToken;
189
- declare const yellow: ColorToken;
190
- declare const red: ColorToken;
191
- declare const orange: ColorToken;
192
- declare const purple: ColorToken;
193
- declare const cyan: ColorToken;
194
- declare const blackAlpha: ColorToken;
195
- declare const whiteAlpha: ColorToken;
196
- declare const colors: ThemeColors;
197
-
198
181
  /**
199
182
  * Typography design tokens
200
183
  */
@@ -256,4 +239,4 @@ declare const shadows: Shadows;
256
239
 
257
240
  declare const borderRadius: BorderRadius;
258
241
 
259
- export { type TitleTokens as A, type BodyTokens as B, type ColorToken as C, type SpacingScale as D, type BorderRadius as E, type FontWeights as F, type Shadows as G, type HeadingTokens as H, type SubtitleTokens as S, type Theme as T, purple as a, blackAlpha as b, cyan as c, colors as d, fontWeight as e, fontSize as f, green as g, fontFamily as h, headings as i, body as j, typography as k, lineHeight as l, spacing as m, neutral as n, orange as o, primary as p, shadows as q, red as r, subtitles as s, titles as t, borderRadius as u, type ThemeColors as v, whiteAlpha as w, type TypographyScale as x, yellow as y, type TypographyToken as z };
242
+ export { type BodyTokens as B, type ColorToken as C, type FontWeights as F, type HeadingTokens as H, type SubtitleTokens as S, type ThemeColors as T, fontWeight as a, fontFamily as b, body as c, typography as d, spacing as e, fontSize as f, shadows as g, headings as h, borderRadius as i, type TypographyScale as j, type TypographyToken as k, lineHeight as l, type TitleTokens as m, type SpacingScale as n, type BorderRadius as o, type Shadows as p, type Theme as q, subtitles as s, titles as t };