@alviere/ui 0.8.1

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 (14) hide show
  1. package/LICENSE +201 -0
  2. package/README.md +93 -0
  3. package/dist/index.d.ts +133 -0
  4. package/dist/index.js +14279 -0
  5. package/dist/index.js.map +1 -0
  6. package/dist/index.umd.cjs +2 -0
  7. package/dist/index.umd.cjs.map +1 -0
  8. package/package.json +90 -0
  9. package/src/styles/themes/brand.css +274 -0
  10. package/src/styles/themes/dark.css +112 -0
  11. package/src/styles/themes/index.css +23 -0
  12. package/src/styles/themes/theme-brand.scss +273 -0
  13. package/src/styles/themes/theme-dark.scss +112 -0
  14. package/src/styles/themes/tokens.css +303 -0
package/src/styles/themes/theme-brand.scss ADDED
@@ -0,0 +1,273 @@
1
+ // =============================================================================
2
+ // ALVIERE UI - BRAND THEMES
3
+ // =============================================================================
4
+ //
5
+ // Brand-specific theme variants for Alviere UI components.
6
+ // These themes demonstrate how to customize the design tokens for different
7
+ // brand identities while maintaining accessibility and usability.
8
+ //
9
+ // Usage:
10
+ // ```html
11
+ // <html data-theme="brand-ocean">
12
+ // <link rel="stylesheet" href="design-tokens.css">
13
+ // <link rel="stylesheet" href="theme-brand-ocean.css">
14
+ // </html>
15
+ // ```
16
+
17
+ // =============================================================================
18
+ // OCEAN BRAND THEME
19
+ // =============================================================================
20
+
21
+ [data-theme="brand-ocean"],
22
+ :root[data-theme="brand-ocean"] {
23
+ // Ocean-inspired color palette
24
+ --alv-color-primary: #0ea5e9;
25
+ --alv-color-primary-hover: #0284c7;
26
+ --alv-color-primary-active: #0369a1;
27
+ --alv-color-primary-light: #e0f2fe;
28
+ --alv-color-primary-light-hover: #bae6fd;
29
+ --alv-color-on-primary: #ffffff;
30
+
31
+ // Ocean-themed semantic colors
32
+ --alv-color-success: #10b981;
33
+ --alv-color-success-light: #d1fae5;
34
+ --alv-color-success-border: #a7f3d0;
35
+ --alv-color-success-text: #065f46;
36
+ --alv-color-on-success: #ffffff;
37
+
38
+ --alv-color-error: #ef4444;
39
+ --alv-color-error-light: #fee2e2;
40
+ --alv-color-error-border: #fecaca;
41
+ --alv-color-error-text: #991b1b;
42
+ --alv-color-on-error: #ffffff;
43
+
44
+ --alv-color-warning: #f59e0b;
45
+ --alv-color-warning-light: #fef3c7;
46
+ --alv-color-warning-border: #fde68a;
47
+ --alv-color-warning-text: #92400e;
48
+ --alv-color-on-warning: #ffffff;
49
+
50
+ --alv-color-info: #06b6d4;
51
+ --alv-color-info-light: #cffafe;
52
+ --alv-color-info-border: #a5f3fc;
53
+ --alv-color-info-text: #155e75;
54
+ --alv-color-on-info: #ffffff;
55
+
56
+ // Ocean-inspired neutral palette
57
+ --alv-color-gray-50: #f8fafc;
58
+ --alv-color-gray-100: #f1f5f9;
59
+ --alv-color-gray-200: #e2e8f0;
60
+ --alv-color-gray-300: #cbd5e1;
61
+ --alv-color-gray-400: #94a3b8;
62
+ --alv-color-gray-500: #64748b;
63
+ --alv-color-gray-600: #475569;
64
+ --alv-color-gray-700: #334155;
65
+ --alv-color-gray-800: #1e293b;
66
+ --alv-color-gray-900: #0f172a;
67
+
68
+ // Ocean-themed surface colors
69
+ --alv-color-surface: #ffffff;
70
+ --alv-color-surface-secondary: #f8fafc;
71
+ --alv-color-surface-tertiary: #f1f5f9;
72
+ --alv-color-surface-elevated: #ffffff;
73
+
74
+ // Ocean-themed text colors
75
+ --alv-color-text-primary: #0f172a;
76
+ --alv-color-text-secondary: #475569;
77
+ --alv-color-text-tertiary: #64748b;
78
+ --alv-color-text-disabled: #94a3b8;
79
+ --alv-color-text-on-primary: #ffffff;
80
+ --alv-color-text-on-surface: #0f172a;
81
+
82
+ // Ocean-themed borders
83
+ --alv-color-border: #e2e8f0;
84
+ --alv-color-border-hover: #cbd5e1;
85
+ --alv-color-border-focus: #0ea5e9;
86
+ --alv-color-border-error: #ef4444;
87
+ --alv-color-border-success: #10b981;
88
+
89
+ // Ocean-themed backgrounds
90
+ --alv-color-background: #ffffff;
91
+ --alv-color-background-disabled: #f1f5f9;
92
+ --alv-color-background-hover: #f8fafc;
93
+ --alv-color-background-active: #f1f5f9;
94
+
95
+ // Component-specific ocean theme
96
+ --alv-button-secondary-bg-hover: #e0f2fe;
97
+ --alv-button-secondary-bg-active: #bae6fd;
98
+ --alv-spinner-color: var(--alv-color-primary);
99
+ --alv-timeline-color: var(--alv-color-gray-500);
100
+ --alv-timeline-completed-color: var(--alv-color-success);
101
+ }
102
+
103
+ // =============================================================================
104
+ // FOREST BRAND THEME
105
+ // =============================================================================
106
+
107
+ [data-theme="brand-forest"],
108
+ :root[data-theme="brand-forest"] {
109
+ // Forest-inspired color palette
110
+ --alv-color-primary: #059669;
111
+ --alv-color-primary-hover: #047857;
112
+ --alv-color-primary-active: #065f46;
113
+ --alv-color-primary-light: #d1fae5;
114
+ --alv-color-primary-light-hover: #a7f3d0;
115
+ --alv-color-on-primary: #ffffff;
116
+
117
+ // Forest-themed semantic colors
118
+ --alv-color-success: #10b981;
119
+ --alv-color-success-light: #d1fae5;
120
+ --alv-color-success-border: #a7f3d0;
121
+ --alv-color-success-text: #065f46;
122
+ --alv-color-on-success: #ffffff;
123
+
124
+ --alv-color-error: #dc2626;
125
+ --alv-color-error-light: #fee2e2;
126
+ --alv-color-error-border: #fecaca;
127
+ --alv-color-error-text: #991b1b;
128
+ --alv-color-on-error: #ffffff;
129
+
130
+ --alv-color-warning: #d97706;
131
+ --alv-color-warning-light: #fef3c7;
132
+ --alv-color-warning-border: #fde68a;
133
+ --alv-color-warning-text: #92400e;
134
+ --alv-color-on-warning: #ffffff;
135
+
136
+ --alv-color-info: #0891b2;
137
+ --alv-color-info-light: #cffafe;
138
+ --alv-color-info-border: #a5f3fc;
139
+ --alv-color-info-text: #155e75;
140
+ --alv-color-on-info: #ffffff;
141
+
142
+ // Forest-inspired neutral palette
143
+ --alv-color-gray-50: #f9fafb;
144
+ --alv-color-gray-100: #f3f4f6;
145
+ --alv-color-gray-200: #e5e7eb;
146
+ --alv-color-gray-300: #d1d5db;
147
+ --alv-color-gray-400: #9ca3af;
148
+ --alv-color-gray-500: #6b7280;
149
+ --alv-color-gray-600: #4b5563;
150
+ --alv-color-gray-700: #374151;
151
+ --alv-color-gray-800: #1f2937;
152
+ --alv-color-gray-900: #111827;
153
+
154
+ // Forest-themed surface colors
155
+ --alv-color-surface: #ffffff;
156
+ --alv-color-surface-secondary: #f9fafb;
157
+ --alv-color-surface-tertiary: #f3f4f6;
158
+ --alv-color-surface-elevated: #ffffff;
159
+
160
+ // Forest-themed text colors
161
+ --alv-color-text-primary: #111827;
162
+ --alv-color-text-secondary: #4b5563;
163
+ --alv-color-text-tertiary: #6b7280;
164
+ --alv-color-text-disabled: #9ca3af;
165
+ --alv-color-text-on-primary: #ffffff;
166
+ --alv-color-text-on-surface: #111827;
167
+
168
+ // Forest-themed borders
169
+ --alv-color-border: #e5e7eb;
170
+ --alv-color-border-hover: #d1d5db;
171
+ --alv-color-border-focus: #059669;
172
+ --alv-color-border-error: #dc2626;
173
+ --alv-color-border-success: #10b981;
174
+
175
+ // Forest-themed backgrounds
176
+ --alv-color-background: #ffffff;
177
+ --alv-color-background-disabled: #f3f4f6;
178
+ --alv-color-background-hover: #f9fafb;
179
+ --alv-color-background-active: #f3f4f6;
180
+
181
+ // Component-specific forest theme
182
+ --alv-button-secondary-bg-hover: #d1fae5;
183
+ --alv-button-secondary-bg-active: #a7f3d0;
184
+ --alv-spinner-color: var(--alv-color-primary);
185
+ --alv-timeline-color: var(--alv-color-gray-500);
186
+ --alv-timeline-completed-color: var(--alv-color-success);
187
+ }
188
+
189
+ // =============================================================================
190
+ // SUNSET BRAND THEME
191
+ // =============================================================================
192
+
193
+ [data-theme="brand-sunset"],
194
+ :root[data-theme="brand-sunset"] {
195
+ // Sunset-inspired color palette
196
+ --alv-color-primary: #ea580c;
197
+ --alv-color-primary-hover: #c2410c;
198
+ --alv-color-primary-active: #9a3412;
199
+ --alv-color-primary-light: #fed7aa;
200
+ --alv-color-primary-light-hover: #fdba74;
201
+ --alv-color-on-primary: #ffffff;
202
+
203
+ // Sunset-themed semantic colors
204
+ --alv-color-success: #16a34a;
205
+ --alv-color-success-light: #dcfce7;
206
+ --alv-color-success-border: #bbf7d0;
207
+ --alv-color-success-text: #166534;
208
+ --alv-color-on-success: #ffffff;
209
+
210
+ --alv-color-error: #dc2626;
211
+ --alv-color-error-light: #fee2e2;
212
+ --alv-color-error-border: #fecaca;
213
+ --alv-color-error-text: #991b1b;
214
+ --alv-color-on-error: #ffffff;
215
+
216
+ --alv-color-warning: #eab308;
217
+ --alv-color-warning-light: #fef3c7;
218
+ --alv-color-warning-border: #fde68a;
219
+ --alv-color-warning-text: #92400e;
220
+ --alv-color-on-warning: #ffffff;
221
+
222
+ --alv-color-info: #0891b2;
223
+ --alv-color-info-light: #cffafe;
224
+ --alv-color-info-border: #a5f3fc;
225
+ --alv-color-info-text: #155e75;
226
+ --alv-color-on-info: #ffffff;
227
+
228
+ // Sunset-inspired neutral palette
229
+ --alv-color-gray-50: #fefefe;
230
+ --alv-color-gray-100: #fef2f2;
231
+ --alv-color-gray-200: #fecaca;
232
+ --alv-color-gray-300: #fca5a5;
233
+ --alv-color-gray-400: #f87171;
234
+ --alv-color-gray-500: #ef4444;
235
+ --alv-color-gray-600: #dc2626;
236
+ --alv-color-gray-700: #b91c1c;
237
+ --alv-color-gray-800: #991b1b;
238
+ --alv-color-gray-900: #7f1d1d;
239
+
240
+ // Sunset-themed surface colors
241
+ --alv-color-surface: #ffffff;
242
+ --alv-color-surface-secondary: #fefefe;
243
+ --alv-color-surface-tertiary: #fef2f2;
244
+ --alv-color-surface-elevated: #ffffff;
245
+
246
+ // Sunset-themed text colors
247
+ --alv-color-text-primary: #7f1d1d;
248
+ --alv-color-text-secondary: #b91c1c;
249
+ --alv-color-text-tertiary: #dc2626;
250
+ --alv-color-text-disabled: #f87171;
251
+ --alv-color-text-on-primary: #ffffff;
252
+ --alv-color-text-on-surface: #7f1d1d;
253
+
254
+ // Sunset-themed borders
255
+ --alv-color-border: #fecaca;
256
+ --alv-color-border-hover: #fca5a5;
257
+ --alv-color-border-focus: #ea580c;
258
+ --alv-color-border-error: #dc2626;
259
+ --alv-color-border-success: #16a34a;
260
+
261
+ // Sunset-themed backgrounds
262
+ --alv-color-background: #ffffff;
263
+ --alv-color-background-disabled: #fef2f2;
264
+ --alv-color-background-hover: #fefefe;
265
+ --alv-color-background-active: #fef2f2;
266
+
267
+ // Component-specific sunset theme
268
+ --alv-button-secondary-bg-hover: #fed7aa;
269
+ --alv-button-secondary-bg-active: #fdba74;
270
+ --alv-spinner-color: var(--alv-color-primary);
271
+ --alv-timeline-color: var(--alv-color-gray-500);
272
+ --alv-timeline-completed-color: var(--alv-color-success);
273
+ }
package/src/styles/themes/theme-dark.scss ADDED
@@ -0,0 +1,112 @@
1
+ // =============================================================================
2
+ // ALVIERE UI - DARK THEME
3
+ // =============================================================================
4
+ //
5
+ // Dark theme variant for Alviere UI components.
6
+ // Apply by adding data-theme="dark" to your root element or
7
+ // by importing this file after the base tokens.
8
+ //
9
+ // Usage:
10
+ // ```html
11
+ // <html data-theme="dark">
12
+ // <link rel="stylesheet" href="design-tokens.css">
13
+ // <link rel="stylesheet" href="theme-dark.css">
14
+ // </html>
15
+ // ```
16
+
17
+ [data-theme="dark"],
18
+ :root[data-theme="dark"] {
19
+ // Primary brand colors (adjusted for dark mode)
20
+ --alv-color-primary: #60a5fa;
21
+ --alv-color-primary-hover: #3b82f6;
22
+ --alv-color-primary-active: #2563eb;
23
+ --alv-color-primary-light: #1e3a8a;
24
+ --alv-color-primary-light-hover: #1e40af;
25
+ --alv-color-on-primary: #0b1220;
26
+
27
+ // Semantic status colors (adjusted for dark mode)
28
+ --alv-color-success: #22c55e;
29
+ --alv-color-success-light: #14532d;
30
+ --alv-color-success-border: #166534;
31
+ --alv-color-success-text: #dcfce7;
32
+ --alv-color-on-success: #0b1220;
33
+
34
+ --alv-color-error: #ef4444;
35
+ --alv-color-error-light: #7f1d1d;
36
+ --alv-color-error-border: #991b1b;
37
+ --alv-color-error-text: #fecaca;
38
+ --alv-color-on-error: #ffffff;
39
+
40
+ --alv-color-warning: #f59e0b;
41
+ --alv-color-warning-light: #78350f;
42
+ --alv-color-warning-border: #92400e;
43
+ --alv-color-warning-text: #fef3c7;
44
+ --alv-color-on-warning: #0b1220;
45
+
46
+ --alv-color-info: #06b6d4;
47
+ --alv-color-info-light: #164e63;
48
+ --alv-color-info-border: #0e7490;
49
+ --alv-color-info-text: #cffafe;
50
+ --alv-color-on-info: #0b1220;
51
+
52
+ // Neutral grayscale (inverted for dark mode)
53
+ --alv-color-gray-50: #18181b;
54
+ --alv-color-gray-100: #27272a;
55
+ --alv-color-gray-200: #3f3f46;
56
+ --alv-color-gray-300: #52525b;
57
+ --alv-color-gray-400: #71717a;
58
+ --alv-color-gray-500: #a1a1aa;
59
+ --alv-color-gray-600: #d4d4d8;
60
+ --alv-color-gray-700: #e4e4e7;
61
+ --alv-color-gray-800: #f4f4f5;
62
+ --alv-color-gray-900: #fafafa;
63
+
64
+ // Surface colors
65
+ --alv-color-surface: #0b1220;
66
+ --alv-color-surface-secondary: #1e293b;
67
+ --alv-color-surface-tertiary: #334155;
68
+ --alv-color-surface-elevated: #1e293b;
69
+
70
+ // Text colors
71
+ --alv-color-text-primary: #f8fafc;
72
+ --alv-color-text-secondary: #cbd5e1;
73
+ --alv-color-text-tertiary: #94a3b8;
74
+ --alv-color-text-disabled: #64748b;
75
+ --alv-color-text-on-primary: #0b1220;
76
+ --alv-color-text-on-surface: #f8fafc;
77
+
78
+ // Border colors
79
+ --alv-color-border: #334155;
80
+ --alv-color-border-hover: #475569;
81
+ --alv-color-border-focus: #60a5fa;
82
+ --alv-color-border-error: #ef4444;
83
+ --alv-color-border-success: #22c55e;
84
+
85
+ // Background colors
86
+ --alv-color-background: #0b1220;
87
+ --alv-color-background-disabled: #1e293b;
88
+ --alv-color-background-hover: #1e293b;
89
+ --alv-color-background-active: #334155;
90
+
91
+ // Component-specific adjustments
92
+ --alv-button-secondary-bg-hover: #1e3a8a;
93
+ --alv-button-secondary-bg-active: #1e40af;
94
+ --alv-button-tertiary-bg-hover: #334155;
95
+ --alv-button-tertiary-bg-active: #475569;
96
+
97
+ --alv-spinner-color: var(--alv-color-text-primary);
98
+ --alv-timeline-color: var(--alv-color-gray-400);
99
+ --alv-timeline-pending-color: var(--alv-color-gray-500);
100
+
101
+ --alv-badge-secondary-bg: var(--alv-color-gray-700);
102
+ --alv-badge-secondary-text: var(--alv-color-gray-100);
103
+
104
+ --alv-list-bg: var(--alv-color-surface);
105
+ --alv-list-border: var(--alv-color-border);
106
+ --alv-list-item-bg-hover: var(--alv-color-background-hover);
107
+ --alv-list-item-bg-active: var(--alv-color-background-active);
108
+
109
+ --alv-radio-border: var(--alv-color-border);
110
+ --alv-radio-border-hover: var(--alv-color-border-hover);
111
+ --alv-radio-bg: var(--alv-color-background);
112
+ }
package/src/styles/themes/tokens.css ADDED
@@ -0,0 +1,303 @@
1
+ /* =============================================================================
2
+ ALVIERE UI DESIGN TOKENS - CSS VERSION
3
+ =============================================================================
4
+
5
+ This file contains the same design tokens as the SCSS version but in pure CSS
6
+ for easy integration into any project without SCSS compilation.
7
+
8
+ Usage:
9
+ ```html
10
+ <link rel="stylesheet" href="node_modules/@alviere/ui-svelte/themes/tokens.css">
11
+ ```
12
+
13
+ Then override tokens as needed:
14
+ ```css
15
+ :root {
16
+ --alv-color-primary: #your-brand-color;
17
+ }
18
+ ```
19
+ */
20
+
21
+ /* =============================================================================
22
+ SEMANTIC COLOR TOKENS
23
+ ============================================================================= */
24
+
25
+ :root {
26
+ /* Primary brand colors */
27
+ --alv-color-primary: #227e9e;
28
+ --alv-color-primary-hover: #1b6680;
29
+ --alv-color-primary-active: #145164;
30
+ --alv-color-primary-light: #e8f4f8;
31
+ --alv-color-primary-light-hover: #d1e8f0;
32
+ --alv-color-on-primary: #ffffff;
33
+
34
+ /* Semantic status colors */
35
+ --alv-color-success: #436b1d;
36
+ --alv-color-success-light: #d4edda;
37
+ --alv-color-success-border: #c3e6cb;
38
+ --alv-color-success-text: #155724;
39
+ --alv-color-on-success: #ffffff;
40
+ --alv-color-success-rgb: 67, 107, 29; /* For rgba usage */
41
+
42
+ --alv-color-error: #b3311f;
43
+ --alv-color-error-light: #f8d7da;
44
+ --alv-color-error-border: #f5c6cb;
45
+ --alv-color-error-text: #721c24;
46
+ --alv-color-on-error: #ffffff;
47
+ --alv-color-error-rgb: 179, 49, 31; /* For rgba usage */
48
+
49
+ --alv-color-warning: #ffc107;
50
+ --alv-color-warning-light: #fff3cd;
51
+ --alv-color-warning-border: #ffeaa7;
52
+ --alv-color-warning-text: #856404;
53
+ --alv-color-on-warning: #000000;
54
+
55
+ --alv-color-info: #175db8;
56
+ --alv-color-info-light: #d1ecf1;
57
+ --alv-color-info-border: #bee5eb;
58
+ --alv-color-info-text: #0c5460;
59
+ --alv-color-on-info: #ffffff;
60
+
61
+ /* Neutral grayscale */
62
+ --alv-color-gray-50: #fafafa;
63
+ --alv-color-gray-100: #f4f4f5;
64
+ --alv-color-gray-200: #e4e4e7;
65
+ --alv-color-gray-300: #d4d4d8;
66
+ --alv-color-gray-400: #a1a1aa;
67
+ --alv-color-gray-500: #71717a;
68
+ --alv-color-gray-600: #52525b;
69
+ --alv-color-gray-700: #3f3f46;
70
+ --alv-color-gray-800: #27272a;
71
+ --alv-color-gray-900: #18181b;
72
+
73
+ /* Surface colors */
74
+ --alv-color-surface: #ffffff;
75
+ --alv-color-surface-secondary: #f9fafb;
76
+ --alv-color-surface-tertiary: #f4f4f5;
77
+ --alv-color-surface-elevated: #ffffff;
78
+
79
+ /* Text colors */
80
+ --alv-color-text-primary: #18181b;
81
+ --alv-color-text-secondary: #52525b;
82
+ --alv-color-text-tertiary: #71717a;
83
+ --alv-color-text-disabled: #a1a1aa;
84
+ --alv-color-text-on-primary: #ffffff;
85
+ --alv-color-text-on-surface: #18181b;
86
+
87
+ /* Border colors */
88
+ --alv-color-border: #e4e4e7;
89
+ --alv-color-border-hover: #d4d4d8;
90
+ --alv-color-border-focus: #227e9e;
91
+ --alv-color-border-error: #b3311f;
92
+ --alv-color-border-success: #436b1d;
93
+
94
+ /* Background colors */
95
+ --alv-color-background: #ffffff;
96
+ --alv-color-background-disabled: #f4f4f5;
97
+ --alv-color-background-hover: #f9fafb;
98
+ --alv-color-background-active: #f4f4f5;
99
+ }
100
+
101
+ /* =============================================================================
102
+ TYPOGRAPHY TOKENS
103
+ ============================================================================= */
104
+
105
+ :root {
106
+ /* Font families */
107
+ --alv-font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
108
+ --alv-font-family-grotesque: 'Darker Grotesque', sans-serif;
109
+ --alv-font-family-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
110
+
111
+ /* Font sizes */
112
+ --alv-font-size-3xs: 0.625rem; /* 10px */
113
+ --alv-font-size-2xs: 0.75rem; /* 12px */
114
+ --alv-font-size-xs: 1rem; /* 16px */
115
+ --alv-font-size-sm: 1.125rem; /* 18px */
116
+ --alv-font-size-base: 1.25rem; /* 20px */
117
+ --alv-font-size-lg: 1.5rem; /* 24px */
118
+ --alv-font-size-xl: 1.75rem; /* 28px */
119
+
120
+ /* Font weights */
121
+ --alv-font-weight-light: 300;
122
+ --alv-font-weight-normal: 400;
123
+ --alv-font-weight-medium: 500;
124
+ --alv-font-weight-semibold: 600;
125
+ --alv-font-weight-bold: 700;
126
+
127
+ /* Line heights */
128
+ --alv-line-height-tight: 1.25;
129
+ --alv-line-height-normal: 1.5;
130
+ --alv-line-height-relaxed: 1.75;
131
+ }
132
+
133
+ /* =============================================================================
134
+ SPACING TOKENS
135
+ ============================================================================= */
136
+
137
+ :root {
138
+ --alv-spacing-xs: 0.25rem; /* 4px */
139
+ --alv-spacing-sm: 0.5rem; /* 8px */
140
+ --alv-spacing-md: 1rem; /* 16px */
141
+ --alv-spacing-lg: 1.5rem; /* 24px */
142
+ --alv-spacing-xl: 2rem; /* 32px */
143
+ --alv-spacing-2xl: 3rem; /* 48px */
144
+ --alv-spacing-3xl: 4rem; /* 64px */
145
+ }
146
+
147
+ /* =============================================================================
148
+ BORDER RADIUS TOKENS
149
+ ============================================================================= */
150
+
151
+ :root {
152
+ --alv-border-radius-none: 0;
153
+ --alv-border-radius-sm: 0.125rem; /* 2px */
154
+ --alv-border-radius: 0.25rem; /* 4px */
155
+ --alv-border-radius-md: 0.375rem; /* 6px */
156
+ --alv-border-radius-lg: 0.5rem; /* 8px */
157
+ --alv-border-radius-xl: 0.75rem; /* 12px */
158
+ --alv-border-radius-2xl: 1rem; /* 16px */
159
+ --alv-border-radius-full: 9999px;
160
+ }
161
+
162
+ /* =============================================================================
163
+ SHADOW TOKENS
164
+ ============================================================================= */
165
+
166
+ :root {
167
+ --alv-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
168
+ --alv-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
169
+ --alv-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
170
+ --alv-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
171
+ --alv-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
172
+ --alv-shadow-none: none;
173
+ }
174
+
175
+ /* =============================================================================
176
+ TRANSITION TOKENS
177
+ ============================================================================= */
178
+
179
+ :root {
180
+ --alv-transition-fast: 150ms ease-in-out;
181
+ --alv-transition-normal: 250ms ease-in-out;
182
+ --alv-transition-slow: 350ms ease-in-out;
183
+ --alv-transition-none: none;
184
+ }
185
+
186
+ /* =============================================================================
187
+ FORM CONTROL TOKENS
188
+ ============================================================================= */
189
+
190
+ :root {
191
+ /* Input heights */
192
+ --alv-input-height-sm: 2.5rem; /* 40px */
193
+ --alv-input-height: 3.25rem; /* 52px */
194
+ --alv-input-height-lg: 3.75rem; /* 60px */
195
+
196
+ /* Input padding */
197
+ --alv-input-padding-x: 0.75rem; /* 12px */
198
+ --alv-input-padding-y: 0.5rem; /* 8px */
199
+
200
+ /* Input colors */
201
+ --alv-input-border-color: var(--alv-color-border);
202
+ --alv-input-border-hover: var(--alv-color-border-hover);
203
+ --alv-input-border-focus: var(--alv-color-border-focus);
204
+ --alv-input-bg: var(--alv-color-background);
205
+ --alv-input-bg-disabled: var(--alv-color-background-disabled);
206
+ }
207
+
208
+ /* =============================================================================
209
+ Z-INDEX TOKENS
210
+ ============================================================================= */
211
+
212
+ :root {
213
+ --alv-z-dropdown: 1000;
214
+ --alv-z-sticky: 1020;
215
+ --alv-z-fixed: 1030;
216
+ --alv-z-modal-backdrop: 1040;
217
+ --alv-z-modal: 1050;
218
+ --alv-z-popover: 1060;
219
+ --alv-z-tooltip: 1070;
220
+ }
221
+
222
+ /* =============================================================================
223
+ COMPONENT-SPECIFIC TOKENS
224
+ ============================================================================= */
225
+
226
+ :root {
227
+ /* Button tokens */
228
+ --alv-button-primary-bg: var(--alv-color-primary);
229
+ --alv-button-primary-bg-hover: var(--alv-color-primary-hover);
230
+ --alv-button-primary-bg-active: var(--alv-color-primary-active);
231
+ --alv-button-primary-text: var(--alv-color-on-primary);
232
+ --alv-button-primary-border: var(--alv-color-primary);
233
+
234
+ --alv-button-secondary-bg: transparent;
235
+ --alv-button-secondary-bg-hover: var(--alv-color-primary-light);
236
+ --alv-button-secondary-bg-active: var(--alv-color-primary-light-hover);
237
+ --alv-button-secondary-text: var(--alv-color-primary);
238
+ --alv-button-secondary-border: var(--alv-color-primary);
239
+
240
+ --alv-button-tertiary-bg: transparent;
241
+ --alv-button-tertiary-bg-hover: var(--alv-color-gray-100);
242
+ --alv-button-tertiary-bg-active: var(--alv-color-gray-200);
243
+ --alv-button-tertiary-text: var(--alv-color-text-primary);
244
+ --alv-button-tertiary-border: transparent;
245
+
246
+ --alv-button-link-bg: transparent;
247
+ --alv-button-link-bg-hover: transparent;
248
+ --alv-button-link-bg-active: transparent;
249
+ --alv-button-link-text: var(--alv-color-primary);
250
+ --alv-button-link-text-hover: var(--alv-color-primary-hover);
251
+ --alv-button-link-border: transparent;
252
+
253
+ /* Spinner tokens */
254
+ --alv-spinner-color: var(--alv-color-text-primary);
255
+ --alv-spinner-size-sm: 1rem;
256
+ --alv-spinner-size-md: 1.5rem;
257
+ --alv-spinner-size-lg: 4rem;
258
+ --alv-spinner-stroke-width: 2px;
259
+
260
+ /* Timeline tokens */
261
+ --alv-timeline-color: var(--alv-color-gray-600);
262
+ --alv-timeline-completed-color: var(--alv-color-success);
263
+ --alv-timeline-error-color: var(--alv-color-error);
264
+ --alv-timeline-pending-color: var(--alv-color-gray-400);
265
+ --alv-timeline-step-size-sm: 1.25rem;
266
+ --alv-timeline-step-size-md: 2rem;
267
+ --alv-timeline-step-size-lg: 2.5rem;
268
+ --alv-timeline-connector-width: 3px;
269
+ --alv-timeline-font-size: var(--alv-font-size-base);
270
+
271
+ /* Badge tokens */
272
+ --alv-badge-primary-bg: var(--alv-color-primary);
273
+ --alv-badge-primary-text: var(--alv-color-on-primary);
274
+ --alv-badge-secondary-bg: var(--alv-color-gray-200);
275
+ --alv-badge-secondary-text: var(--alv-color-text-primary);
276
+ --alv-badge-success-bg: var(--alv-color-success);
277
+ --alv-badge-success-text: var(--alv-color-on-success);
278
+ --alv-badge-error-bg: var(--alv-color-error);
279
+ --alv-badge-error-text: var(--alv-color-on-error);
280
+ --alv-badge-warning-bg: var(--alv-color-warning);
281
+ --alv-badge-warning-text: var(--alv-color-on-warning);
282
+ --alv-badge-info-bg: var(--alv-color-info);
283
+ --alv-badge-info-text: var(--alv-color-on-info);
284
+
285
+ /* List tokens */
286
+ --alv-list-bg: var(--alv-color-surface);
287
+ --alv-list-border: var(--alv-color-border);
288
+ --alv-list-item-bg: transparent;
289
+ --alv-list-item-bg-hover: var(--alv-color-background-hover);
290
+ --alv-list-item-bg-active: var(--alv-color-background-active);
291
+ --alv-list-item-text: var(--alv-color-text-primary);
292
+ --alv-list-item-text-secondary: var(--alv-color-text-secondary);
293
+
294
+ /* Radio tokens */
295
+ --alv-radio-border: var(--alv-color-border);
296
+ --alv-radio-border-hover: var(--alv-color-border-hover);
297
+ --alv-radio-border-focus: var(--alv-color-border-focus);
298
+ --alv-radio-bg: var(--alv-color-background);
299
+ --alv-radio-checked-bg: var(--alv-color-primary);
300
+ --alv-radio-checked-border: var(--alv-color-primary);
301
+ --alv-radio-text: var(--alv-color-text-primary);
302
+ --alv-radio-text-disabled: var(--alv-color-text-disabled);
303
+ }