@happyvertical/smrt-ui 0.40.67 → 0.40.69

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 (41) hide show
  1. package/dist/components/data/DataTable.svelte +1 -1
  2. package/dist/components/feedback/LoadingOverlay.svelte +1 -1
  3. package/dist/components/forms/Combobox.svelte +1 -1
  4. package/dist/components/forms/FilePicker.svelte +1 -1
  5. package/dist/components/forms/Input.svelte +1 -1
  6. package/dist/components/forms/InputGroup.svelte +1 -1
  7. package/dist/components/forms/Listbox.svelte +1 -1
  8. package/dist/components/forms/MultiSelect.svelte +1 -1
  9. package/dist/components/forms/RangeSlider.svelte +1 -1
  10. package/dist/components/forms/Select.svelte +1 -1
  11. package/dist/components/forms/Slider.svelte +1 -1
  12. package/dist/components/forms/TagsInput.svelte +1 -1
  13. package/dist/components/forms/Textarea.svelte +1 -1
  14. package/dist/components/roles/RoleSelector.svelte +10 -3
  15. package/dist/components/ui/Dropdown.svelte +11 -3
  16. package/dist/components/ui/Popover.svelte +1 -1
  17. package/dist/themes/ThemeProvider.svelte +40 -42
  18. package/dist/themes/ThemeProvider.svelte.d.ts +10 -0
  19. package/dist/themes/ThemeProvider.svelte.d.ts.map +1 -1
  20. package/dist/themes/__tests__/control-boundary-contrast.test.js +112 -0
  21. package/dist/themes/__tests__/css-generator.test.js +42 -0
  22. package/dist/themes/__tests__/styles-lockstep.test.js +32 -0
  23. package/dist/themes/__tests__/theme-provider.test.js +46 -8
  24. package/dist/themes/__tests__/theme-script.test.js +16 -11
  25. package/dist/themes/css-generator.d.ts +5 -0
  26. package/dist/themes/css-generator.d.ts.map +1 -1
  27. package/dist/themes/css-generator.js +5 -0
  28. package/dist/themes/glass/index.d.ts.map +1 -1
  29. package/dist/themes/glass/index.js +12 -4
  30. package/dist/themes/smrt/index.d.ts.map +1 -1
  31. package/dist/themes/smrt/index.js +8 -2
  32. package/dist/themes/studio/index.d.ts.map +1 -1
  33. package/dist/themes/studio/index.js +6 -2
  34. package/dist/themes/styles/glass.css +316 -84
  35. package/dist/themes/styles/material.css +355 -53
  36. package/dist/themes/styles/smrt.css +4 -4
  37. package/dist/themes/styles/studio.css +308 -72
  38. package/dist/themes/theme-script.d.ts +12 -4
  39. package/dist/themes/theme-script.d.ts.map +1 -1
  40. package/dist/themes/theme-script.js +14 -19
  41. package/package.json +3 -2
package/dist/themes/styles/glass.css CHANGED
@@ -8,43 +8,34 @@
8
8
  */
9
9
 
10
10
  [data-theme="glass"][data-color-scheme="light"] {
11
- /* Primary - Apple system blue */
11
+ --smrt-theme-id: glass;
12
+ --smrt-theme-name: Glass;
13
+ --smrt-color-scheme: light;
14
+ --smrt-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
12
15
  --smrt-color-primary: #007aff;
13
16
  --smrt-color-on-primary: #ffffff;
14
17
  --smrt-color-primary-container: rgba(0, 122, 255, 0.15);
15
18
  --smrt-color-on-primary-container: #003d80;
16
-
17
- /* Secondary - System gray */
18
19
  --smrt-color-secondary: #6c757d;
19
20
  --smrt-color-on-secondary: #ffffff;
20
21
  --smrt-color-secondary-container: rgba(108, 117, 125, 0.12);
21
22
  --smrt-color-on-secondary-container: #2c3237;
22
-
23
- /* Tertiary - System indigo */
24
23
  --smrt-color-tertiary: #5856d6;
25
24
  --smrt-color-on-tertiary: #ffffff;
26
25
  --smrt-color-tertiary-container: rgba(88, 86, 214, 0.15);
27
26
  --smrt-color-on-tertiary-container: #2a2866;
28
-
29
- /* Error - System red */
30
27
  --smrt-color-error: #ff3b30;
31
28
  --smrt-color-on-error: #ffffff;
32
29
  --smrt-color-error-container: rgba(255, 59, 48, 0.15);
33
30
  --smrt-color-on-error-container: #801810;
34
-
35
- /* Warning - System orange */
36
31
  --smrt-color-warning: #ff9500;
37
32
  --smrt-color-on-warning: #000000;
38
33
  --smrt-color-warning-container: rgba(255, 149, 0, 0.15);
39
34
  --smrt-color-on-warning-container: #804a00;
40
-
41
- /* Success - System green */
42
35
  --smrt-color-success: #34c759;
43
36
  --smrt-color-on-success: #000000;
44
37
  --smrt-color-success-container: rgba(52, 199, 89, 0.15);
45
38
  --smrt-color-on-success-container: #1a642d;
46
-
47
- /* Surface - Translucent whites */
48
39
  --smrt-color-surface: rgba(255, 255, 255, 0.72);
49
40
  --smrt-color-on-surface: #000000;
50
41
  --smrt-color-surface-variant: rgba(255, 255, 255, 0.52);
@@ -56,39 +47,135 @@
56
47
  --smrt-color-surface-container-lowest: rgba(255, 255, 255, 0.42);
57
48
  --smrt-color-surface-dim: rgba(120, 120, 128, 0.16);
58
49
  --smrt-color-surface-bright: rgba(255, 255, 255, 0.95);
59
-
60
- /* Background */
61
50
  --smrt-color-background: #f2f2f7;
62
51
  --smrt-color-on-background: #000000;
63
-
64
- /* Outline - Subtle translucent borders */
65
- --smrt-color-outline: rgba(120, 120, 128, 0.29);
52
+ --smrt-color-outline: rgba(80, 80, 88, 0.75);
66
53
  --smrt-color-outline-variant: rgba(120, 120, 128, 0.16);
67
-
68
- /* Inverse */
69
54
  --smrt-color-inverse-surface: #1c1c1e;
70
55
  --smrt-color-inverse-on-surface: #ffffff;
71
56
  --smrt-color-inverse-primary: #66b0ff;
72
-
73
- /* Effects */
74
57
  --smrt-color-shadow: rgba(0, 0, 0, 0.12);
75
58
  --smrt-color-scrim: rgba(0, 0, 0, 0.4);
76
-
77
- /* Glass-specific */
78
59
  --smrt-color-glass-backdrop: rgba(255, 255, 255, 0.72);
79
60
  --smrt-color-glass-border: rgba(255, 255, 255, 0.3);
80
- --smrt-glass-blur: 20px;
81
- --smrt-glass-saturation: 180%;
82
- --smrt-glass-border-opacity: 0.3;
83
- --smrt-glass-background-opacity: 0.72;
84
-
85
- /* Theme metadata */
86
- --smrt-theme-id: glass;
87
- --smrt-theme-name: Glass;
88
- --smrt-color-scheme: light;
89
- --smrt-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
90
-
91
- /* Border Radius */
61
+ --smrt-typography-display-large-size: 3rem;
62
+ --smrt-typography-display-large-line-height: 1.1;
63
+ --smrt-typography-display-large-weight: 600;
64
+ --smrt-typography-display-large-tracking: -0.022em;
65
+ --smrt-typography-display-large-font-family: var(--smrt-font-family);
66
+ --smrt-typography-display-large-font: 600 3rem/1.1 var(--smrt-font-family);
67
+ --smrt-typography-display-medium-size: 2.5rem;
68
+ --smrt-typography-display-medium-line-height: 1.15;
69
+ --smrt-typography-display-medium-weight: 600;
70
+ --smrt-typography-display-medium-tracking: -0.021em;
71
+ --smrt-typography-display-medium-font-family: var(--smrt-font-family);
72
+ --smrt-typography-display-medium-font: 600 2.5rem/1.15 var(--smrt-font-family);
73
+ --smrt-typography-display-small-size: 2rem;
74
+ --smrt-typography-display-small-line-height: 1.2;
75
+ --smrt-typography-display-small-weight: 600;
76
+ --smrt-typography-display-small-tracking: -0.019em;
77
+ --smrt-typography-display-small-font-family: var(--smrt-font-family);
78
+ --smrt-typography-display-small-font: 600 2rem/1.2 var(--smrt-font-family);
79
+ --smrt-typography-headline-large-size: 1.75rem;
80
+ --smrt-typography-headline-large-line-height: 1.25;
81
+ --smrt-typography-headline-large-weight: 600;
82
+ --smrt-typography-headline-large-tracking: -0.017em;
83
+ --smrt-typography-headline-large-font-family: var(--smrt-font-family);
84
+ --smrt-typography-headline-large-font: 600 1.75rem/1.25 var(--smrt-font-family);
85
+ --smrt-typography-headline-medium-size: 1.5rem;
86
+ --smrt-typography-headline-medium-line-height: 1.3;
87
+ --smrt-typography-headline-medium-weight: 600;
88
+ --smrt-typography-headline-medium-tracking: -0.015em;
89
+ --smrt-typography-headline-medium-font-family: var(--smrt-font-family);
90
+ --smrt-typography-headline-medium-font: 600 1.5rem/1.3 var(--smrt-font-family);
91
+ --smrt-typography-headline-small-size: 1.25rem;
92
+ --smrt-typography-headline-small-line-height: 1.35;
93
+ --smrt-typography-headline-small-weight: 600;
94
+ --smrt-typography-headline-small-tracking: -0.012em;
95
+ --smrt-typography-headline-small-font-family: var(--smrt-font-family);
96
+ --smrt-typography-headline-small-font: 600 1.25rem/1.35 var(--smrt-font-family);
97
+ --smrt-typography-title-large-size: 1.25rem;
98
+ --smrt-typography-title-large-line-height: 1.4;
99
+ --smrt-typography-title-large-weight: 600;
100
+ --smrt-typography-title-large-tracking: -0.012em;
101
+ --smrt-typography-title-large-font-family: var(--smrt-font-family);
102
+ --smrt-typography-title-large-font: 600 1.25rem/1.4 var(--smrt-font-family);
103
+ --smrt-typography-title-medium-size: 1.0625rem;
104
+ --smrt-typography-title-medium-line-height: 1.4;
105
+ --smrt-typography-title-medium-weight: 600;
106
+ --smrt-typography-title-medium-tracking: -0.011em;
107
+ --smrt-typography-title-medium-font-family: var(--smrt-font-family);
108
+ --smrt-typography-title-medium-font: 600 1.0625rem/1.4 var(--smrt-font-family);
109
+ --smrt-typography-title-small-size: 0.9375rem;
110
+ --smrt-typography-title-small-line-height: 1.4;
111
+ --smrt-typography-title-small-weight: 600;
112
+ --smrt-typography-title-small-tracking: -0.009em;
113
+ --smrt-typography-title-small-font-family: var(--smrt-font-family);
114
+ --smrt-typography-title-small-font: 600 0.9375rem/1.4 var(--smrt-font-family);
115
+ --smrt-typography-body-large-size: 1.0625rem;
116
+ --smrt-typography-body-large-line-height: 1.5;
117
+ --smrt-typography-body-large-weight: 400;
118
+ --smrt-typography-body-large-tracking: -0.011em;
119
+ --smrt-typography-body-large-font-family: var(--smrt-font-family);
120
+ --smrt-typography-body-large-font: 400 1.0625rem/1.5 var(--smrt-font-family);
121
+ --smrt-typography-body-medium-size: 0.9375rem;
122
+ --smrt-typography-body-medium-line-height: 1.5;
123
+ --smrt-typography-body-medium-weight: 400;
124
+ --smrt-typography-body-medium-tracking: -0.009em;
125
+ --smrt-typography-body-medium-font-family: var(--smrt-font-family);
126
+ --smrt-typography-body-medium-font: 400 0.9375rem/1.5 var(--smrt-font-family);
127
+ --smrt-typography-body-small-size: 0.8125rem;
128
+ --smrt-typography-body-small-line-height: 1.4;
129
+ --smrt-typography-body-small-weight: 400;
130
+ --smrt-typography-body-small-tracking: -0.006em;
131
+ --smrt-typography-body-small-font-family: var(--smrt-font-family);
132
+ --smrt-typography-body-small-font: 400 0.8125rem/1.4 var(--smrt-font-family);
133
+ --smrt-typography-label-large-size: 0.9375rem;
134
+ --smrt-typography-label-large-line-height: 1.4;
135
+ --smrt-typography-label-large-weight: 500;
136
+ --smrt-typography-label-large-tracking: -0.009em;
137
+ --smrt-typography-label-large-font-family: var(--smrt-font-family);
138
+ --smrt-typography-label-large-font: 500 0.9375rem/1.4 var(--smrt-font-family);
139
+ --smrt-typography-label-medium-size: 0.8125rem;
140
+ --smrt-typography-label-medium-line-height: 1.4;
141
+ --smrt-typography-label-medium-weight: 500;
142
+ --smrt-typography-label-medium-tracking: -0.006em;
143
+ --smrt-typography-label-medium-font-family: var(--smrt-font-family);
144
+ --smrt-typography-label-medium-font: 500 0.8125rem/1.4 var(--smrt-font-family);
145
+ --smrt-typography-label-small-size: 0.6875rem;
146
+ --smrt-typography-label-small-line-height: 1.3;
147
+ --smrt-typography-label-small-weight: 600;
148
+ --smrt-typography-label-small-tracking: -0.004em;
149
+ --smrt-typography-label-small-font-family: var(--smrt-font-family);
150
+ --smrt-typography-label-small-font: 600 0.6875rem/1.3 var(--smrt-font-family);
151
+ --smrt-spacing-0: 0;
152
+ --smrt-spacing-1: 0.25rem;
153
+ --smrt-spacing-2: 0.5rem;
154
+ --smrt-spacing-3: 0.75rem;
155
+ --smrt-spacing-4: 1rem;
156
+ --smrt-spacing-5: 1.25rem;
157
+ --smrt-spacing-6: 1.5rem;
158
+ --smrt-spacing-7: 1.75rem;
159
+ --smrt-spacing-8: 2rem;
160
+ --smrt-spacing-9: 2.25rem;
161
+ --smrt-spacing-10: 2.5rem;
162
+ --smrt-spacing-11: 2.75rem;
163
+ --smrt-spacing-12: 3rem;
164
+ --smrt-spacing-14: 3.5rem;
165
+ --smrt-spacing-16: 4rem;
166
+ --smrt-spacing-20: 5rem;
167
+ --smrt-spacing-24: 6rem;
168
+ --smrt-spacing-0_5: 0.125rem;
169
+ --smrt-spacing-1_5: 0.375rem;
170
+ --smrt-spacing-2_5: 0.625rem;
171
+ --smrt-spacing-3_5: 0.875rem;
172
+ --smrt-spacing-xs: 0.25rem;
173
+ --smrt-spacing-sm: 0.5rem;
174
+ --smrt-spacing-md: 1rem;
175
+ --smrt-spacing-lg: 1.5rem;
176
+ --smrt-spacing-xl: 2rem;
177
+ --smrt-spacing-2xl: 3rem;
178
+ --smrt-spacing-3xl: 4rem;
92
179
  --smrt-radius-none: 0;
93
180
  --smrt-radius-sm: 0.25rem;
94
181
  --smrt-radius-md: 0.5rem;
@@ -97,69 +184,89 @@
97
184
  --smrt-radius-2xl: 1.5rem;
98
185
  --smrt-radius-3xl: 2rem;
99
186
  --smrt-radius-full: 9999px;
100
-
101
- /* Elevation - Softer, more diffuse shadows */
187
+ --smrt-radius-extra-small: 0.25rem;
188
+ --smrt-radius-small: 0.25rem;
189
+ --smrt-radius-medium: 0.5rem;
190
+ --smrt-radius-large: 0.75rem;
191
+ --smrt-radius-extra-large: 1rem;
102
192
  --smrt-elevation-0: none;
103
193
  --smrt-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
104
194
  --smrt-elevation-2: 0 3px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03);
105
195
  --smrt-elevation-3: 0 6px 12px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
106
196
  --smrt-elevation-4: 0 12px 24px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.05);
107
197
  --smrt-elevation-5: 0 24px 48px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.06);
108
-
109
- /* Duration */
110
198
  --smrt-duration-instant: 0ms;
111
199
  --smrt-duration-fast: 100ms;
112
200
  --smrt-duration-normal: 200ms;
113
201
  --smrt-duration-slow: 300ms;
114
202
  --smrt-duration-slower: 500ms;
115
-
116
- /* Easing - Apple style */
203
+ --smrt-duration-short1: 50ms;
204
+ --smrt-duration-short2: 100ms;
205
+ --smrt-duration-short3: 150ms;
206
+ --smrt-duration-short4: 200ms;
207
+ --smrt-duration-medium1: 250ms;
208
+ --smrt-duration-medium2: 300ms;
209
+ --smrt-duration-medium3: 350ms;
210
+ --smrt-duration-medium4: 400ms;
211
+ --smrt-duration-long1: 450ms;
212
+ --smrt-duration-long2: 500ms;
213
+ --smrt-duration-long3: 550ms;
214
+ --smrt-duration-long4: 600ms;
117
215
  --smrt-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
118
216
  --smrt-easing-standard-decelerate: cubic-bezier(0, 0, 0.2, 1);
119
217
  --smrt-easing-standard-accelerate: cubic-bezier(0.4, 0, 1, 1);
120
218
  --smrt-easing-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
121
219
  --smrt-easing-emphasized-decelerate: cubic-bezier(0.16, 1, 0.3, 1);
122
220
  --smrt-easing-emphasized-accelerate: cubic-bezier(0.4, 0, 0.2, 1);
221
+ --smrt-font-family-mono: ui-monospace, "SF Mono", "Monaco", "Cascadia Code", "Consolas", monospace;
222
+ --smrt-typography-weight-normal: 400;
223
+ --smrt-typography-weight-medium: 500;
224
+ --smrt-typography-weight-semibold: 600;
225
+ --smrt-typography-weight-bold: 700;
226
+ --smrt-z-index-dropdown: 1000;
227
+ --smrt-z-index-sticky: 1100;
228
+ --smrt-z-index-overlay: 1200;
229
+ --smrt-z-index-modal: 1300;
230
+ --smrt-z-index-dialog: 1300;
231
+ --smrt-z-index-popover: 1400;
232
+ --smrt-z-index-toast: 1500;
233
+ --smrt-z-index-tooltip: 1600;
234
+ --smrt-z-index-loading: 1700;
235
+ --smrt-glass-blur: 20px;
236
+ --smrt-glass-saturation: 180%;
237
+ --smrt-glass-border-opacity: 0.3;
238
+ --smrt-glass-background-opacity: 0.72;
123
239
  }
124
240
 
125
241
  [data-theme="glass"][data-color-scheme="dark"] {
126
- /* Primary - Lighter blue for dark mode */
242
+ --smrt-theme-id: glass;
243
+ --smrt-theme-name: Glass;
244
+ --smrt-color-scheme: dark;
245
+ --smrt-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
127
246
  --smrt-color-primary: #0a84ff;
128
247
  --smrt-color-on-primary: #000000;
129
248
  --smrt-color-primary-container: rgba(10, 132, 255, 0.25);
130
249
  --smrt-color-on-primary-container: #b3d9ff;
131
-
132
- /* Secondary */
133
250
  --smrt-color-secondary: #8e8e93;
134
251
  --smrt-color-on-secondary: #000000;
135
252
  --smrt-color-secondary-container: rgba(142, 142, 147, 0.2);
136
253
  --smrt-color-on-secondary-container: #e5e5ea;
137
-
138
- /* Tertiary */
139
254
  --smrt-color-tertiary: #5e5ce6;
140
255
  --smrt-color-on-tertiary: #ffffff;
141
256
  --smrt-color-tertiary-container: rgba(94, 92, 230, 0.25);
142
257
  --smrt-color-on-tertiary-container: #d4d3ff;
143
-
144
- /* Error */
145
258
  --smrt-color-error: #ff453a;
146
259
  --smrt-color-on-error: #000000;
147
260
  --smrt-color-error-container: rgba(255, 69, 58, 0.25);
148
261
  --smrt-color-on-error-container: #ffcac7;
149
-
150
- /* Warning */
151
262
  --smrt-color-warning: #ff9f0a;
152
263
  --smrt-color-on-warning: #000000;
153
264
  --smrt-color-warning-container: rgba(255, 159, 10, 0.25);
154
265
  --smrt-color-on-warning-container: #ffe3b3;
155
-
156
- /* Success */
157
266
  --smrt-color-success: #30d158;
158
267
  --smrt-color-on-success: #000000;
159
268
  --smrt-color-success-container: rgba(48, 209, 88, 0.25);
160
269
  --smrt-color-on-success-container: #b8f5c9;
161
-
162
- /* Surface - Translucent darks */
163
270
  --smrt-color-surface: rgba(30, 30, 30, 0.72);
164
271
  --smrt-color-on-surface: #ffffff;
165
272
  --smrt-color-surface-variant: rgba(44, 44, 46, 0.65);
@@ -171,39 +278,135 @@
171
278
  --smrt-color-surface-container-lowest: rgba(28, 28, 30, 0.55);
172
279
  --smrt-color-surface-dim: rgba(0, 0, 0, 0.3);
173
280
  --smrt-color-surface-bright: rgba(58, 58, 60, 0.9);
174
-
175
- /* Background */
176
281
  --smrt-color-background: #000000;
177
282
  --smrt-color-on-background: #ffffff;
178
-
179
- /* Outline */
180
- --smrt-color-outline: rgba(84, 84, 88, 0.65);
283
+ --smrt-color-outline: rgba(160, 160, 166, 0.8);
181
284
  --smrt-color-outline-variant: rgba(84, 84, 88, 0.35);
182
-
183
- /* Inverse */
184
285
  --smrt-color-inverse-surface: #f2f2f7;
185
286
  --smrt-color-inverse-on-surface: #000000;
186
287
  --smrt-color-inverse-primary: #007aff;
187
-
188
- /* Effects */
189
288
  --smrt-color-shadow: rgba(0, 0, 0, 0.4);
190
289
  --smrt-color-scrim: rgba(0, 0, 0, 0.6);
191
-
192
- /* Glass-specific */
193
290
  --smrt-color-glass-backdrop: rgba(30, 30, 30, 0.72);
194
291
  --smrt-color-glass-border: rgba(255, 255, 255, 0.1);
195
- --smrt-glass-blur: 20px;
196
- --smrt-glass-saturation: 180%;
197
- --smrt-glass-border-opacity: 0.3;
198
- --smrt-glass-background-opacity: 0.72;
199
-
200
- /* Theme metadata */
201
- --smrt-theme-id: glass;
202
- --smrt-theme-name: Glass;
203
- --smrt-color-scheme: dark;
204
- --smrt-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
205
-
206
- /* Border Radius (same as light) */
292
+ --smrt-typography-display-large-size: 3rem;
293
+ --smrt-typography-display-large-line-height: 1.1;
294
+ --smrt-typography-display-large-weight: 600;
295
+ --smrt-typography-display-large-tracking: -0.022em;
296
+ --smrt-typography-display-large-font-family: var(--smrt-font-family);
297
+ --smrt-typography-display-large-font: 600 3rem/1.1 var(--smrt-font-family);
298
+ --smrt-typography-display-medium-size: 2.5rem;
299
+ --smrt-typography-display-medium-line-height: 1.15;
300
+ --smrt-typography-display-medium-weight: 600;
301
+ --smrt-typography-display-medium-tracking: -0.021em;
302
+ --smrt-typography-display-medium-font-family: var(--smrt-font-family);
303
+ --smrt-typography-display-medium-font: 600 2.5rem/1.15 var(--smrt-font-family);
304
+ --smrt-typography-display-small-size: 2rem;
305
+ --smrt-typography-display-small-line-height: 1.2;
306
+ --smrt-typography-display-small-weight: 600;
307
+ --smrt-typography-display-small-tracking: -0.019em;
308
+ --smrt-typography-display-small-font-family: var(--smrt-font-family);
309
+ --smrt-typography-display-small-font: 600 2rem/1.2 var(--smrt-font-family);
310
+ --smrt-typography-headline-large-size: 1.75rem;
311
+ --smrt-typography-headline-large-line-height: 1.25;
312
+ --smrt-typography-headline-large-weight: 600;
313
+ --smrt-typography-headline-large-tracking: -0.017em;
314
+ --smrt-typography-headline-large-font-family: var(--smrt-font-family);
315
+ --smrt-typography-headline-large-font: 600 1.75rem/1.25 var(--smrt-font-family);
316
+ --smrt-typography-headline-medium-size: 1.5rem;
317
+ --smrt-typography-headline-medium-line-height: 1.3;
318
+ --smrt-typography-headline-medium-weight: 600;
319
+ --smrt-typography-headline-medium-tracking: -0.015em;
320
+ --smrt-typography-headline-medium-font-family: var(--smrt-font-family);
321
+ --smrt-typography-headline-medium-font: 600 1.5rem/1.3 var(--smrt-font-family);
322
+ --smrt-typography-headline-small-size: 1.25rem;
323
+ --smrt-typography-headline-small-line-height: 1.35;
324
+ --smrt-typography-headline-small-weight: 600;
325
+ --smrt-typography-headline-small-tracking: -0.012em;
326
+ --smrt-typography-headline-small-font-family: var(--smrt-font-family);
327
+ --smrt-typography-headline-small-font: 600 1.25rem/1.35 var(--smrt-font-family);
328
+ --smrt-typography-title-large-size: 1.25rem;
329
+ --smrt-typography-title-large-line-height: 1.4;
330
+ --smrt-typography-title-large-weight: 600;
331
+ --smrt-typography-title-large-tracking: -0.012em;
332
+ --smrt-typography-title-large-font-family: var(--smrt-font-family);
333
+ --smrt-typography-title-large-font: 600 1.25rem/1.4 var(--smrt-font-family);
334
+ --smrt-typography-title-medium-size: 1.0625rem;
335
+ --smrt-typography-title-medium-line-height: 1.4;
336
+ --smrt-typography-title-medium-weight: 600;
337
+ --smrt-typography-title-medium-tracking: -0.011em;
338
+ --smrt-typography-title-medium-font-family: var(--smrt-font-family);
339
+ --smrt-typography-title-medium-font: 600 1.0625rem/1.4 var(--smrt-font-family);
340
+ --smrt-typography-title-small-size: 0.9375rem;
341
+ --smrt-typography-title-small-line-height: 1.4;
342
+ --smrt-typography-title-small-weight: 600;
343
+ --smrt-typography-title-small-tracking: -0.009em;
344
+ --smrt-typography-title-small-font-family: var(--smrt-font-family);
345
+ --smrt-typography-title-small-font: 600 0.9375rem/1.4 var(--smrt-font-family);
346
+ --smrt-typography-body-large-size: 1.0625rem;
347
+ --smrt-typography-body-large-line-height: 1.5;
348
+ --smrt-typography-body-large-weight: 400;
349
+ --smrt-typography-body-large-tracking: -0.011em;
350
+ --smrt-typography-body-large-font-family: var(--smrt-font-family);
351
+ --smrt-typography-body-large-font: 400 1.0625rem/1.5 var(--smrt-font-family);
352
+ --smrt-typography-body-medium-size: 0.9375rem;
353
+ --smrt-typography-body-medium-line-height: 1.5;
354
+ --smrt-typography-body-medium-weight: 400;
355
+ --smrt-typography-body-medium-tracking: -0.009em;
356
+ --smrt-typography-body-medium-font-family: var(--smrt-font-family);
357
+ --smrt-typography-body-medium-font: 400 0.9375rem/1.5 var(--smrt-font-family);
358
+ --smrt-typography-body-small-size: 0.8125rem;
359
+ --smrt-typography-body-small-line-height: 1.4;
360
+ --smrt-typography-body-small-weight: 400;
361
+ --smrt-typography-body-small-tracking: -0.006em;
362
+ --smrt-typography-body-small-font-family: var(--smrt-font-family);
363
+ --smrt-typography-body-small-font: 400 0.8125rem/1.4 var(--smrt-font-family);
364
+ --smrt-typography-label-large-size: 0.9375rem;
365
+ --smrt-typography-label-large-line-height: 1.4;
366
+ --smrt-typography-label-large-weight: 500;
367
+ --smrt-typography-label-large-tracking: -0.009em;
368
+ --smrt-typography-label-large-font-family: var(--smrt-font-family);
369
+ --smrt-typography-label-large-font: 500 0.9375rem/1.4 var(--smrt-font-family);
370
+ --smrt-typography-label-medium-size: 0.8125rem;
371
+ --smrt-typography-label-medium-line-height: 1.4;
372
+ --smrt-typography-label-medium-weight: 500;
373
+ --smrt-typography-label-medium-tracking: -0.006em;
374
+ --smrt-typography-label-medium-font-family: var(--smrt-font-family);
375
+ --smrt-typography-label-medium-font: 500 0.8125rem/1.4 var(--smrt-font-family);
376
+ --smrt-typography-label-small-size: 0.6875rem;
377
+ --smrt-typography-label-small-line-height: 1.3;
378
+ --smrt-typography-label-small-weight: 600;
379
+ --smrt-typography-label-small-tracking: -0.004em;
380
+ --smrt-typography-label-small-font-family: var(--smrt-font-family);
381
+ --smrt-typography-label-small-font: 600 0.6875rem/1.3 var(--smrt-font-family);
382
+ --smrt-spacing-0: 0;
383
+ --smrt-spacing-1: 0.25rem;
384
+ --smrt-spacing-2: 0.5rem;
385
+ --smrt-spacing-3: 0.75rem;
386
+ --smrt-spacing-4: 1rem;
387
+ --smrt-spacing-5: 1.25rem;
388
+ --smrt-spacing-6: 1.5rem;
389
+ --smrt-spacing-7: 1.75rem;
390
+ --smrt-spacing-8: 2rem;
391
+ --smrt-spacing-9: 2.25rem;
392
+ --smrt-spacing-10: 2.5rem;
393
+ --smrt-spacing-11: 2.75rem;
394
+ --smrt-spacing-12: 3rem;
395
+ --smrt-spacing-14: 3.5rem;
396
+ --smrt-spacing-16: 4rem;
397
+ --smrt-spacing-20: 5rem;
398
+ --smrt-spacing-24: 6rem;
399
+ --smrt-spacing-0_5: 0.125rem;
400
+ --smrt-spacing-1_5: 0.375rem;
401
+ --smrt-spacing-2_5: 0.625rem;
402
+ --smrt-spacing-3_5: 0.875rem;
403
+ --smrt-spacing-xs: 0.25rem;
404
+ --smrt-spacing-sm: 0.5rem;
405
+ --smrt-spacing-md: 1rem;
406
+ --smrt-spacing-lg: 1.5rem;
407
+ --smrt-spacing-xl: 2rem;
408
+ --smrt-spacing-2xl: 3rem;
409
+ --smrt-spacing-3xl: 4rem;
207
410
  --smrt-radius-none: 0;
208
411
  --smrt-radius-sm: 0.25rem;
209
412
  --smrt-radius-md: 0.5rem;
@@ -212,29 +415,58 @@
212
415
  --smrt-radius-2xl: 1.5rem;
213
416
  --smrt-radius-3xl: 2rem;
214
417
  --smrt-radius-full: 9999px;
215
-
216
- /* Elevation (same as light) */
418
+ --smrt-radius-extra-small: 0.25rem;
419
+ --smrt-radius-small: 0.25rem;
420
+ --smrt-radius-medium: 0.5rem;
421
+ --smrt-radius-large: 0.75rem;
422
+ --smrt-radius-extra-large: 1rem;
217
423
  --smrt-elevation-0: none;
218
424
  --smrt-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
219
425
  --smrt-elevation-2: 0 3px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03);
220
426
  --smrt-elevation-3: 0 6px 12px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
221
427
  --smrt-elevation-4: 0 12px 24px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.05);
222
428
  --smrt-elevation-5: 0 24px 48px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.06);
223
-
224
- /* Duration (same as light) */
225
429
  --smrt-duration-instant: 0ms;
226
430
  --smrt-duration-fast: 100ms;
227
431
  --smrt-duration-normal: 200ms;
228
432
  --smrt-duration-slow: 300ms;
229
433
  --smrt-duration-slower: 500ms;
230
-
231
- /* Easing (same as light) */
434
+ --smrt-duration-short1: 50ms;
435
+ --smrt-duration-short2: 100ms;
436
+ --smrt-duration-short3: 150ms;
437
+ --smrt-duration-short4: 200ms;
438
+ --smrt-duration-medium1: 250ms;
439
+ --smrt-duration-medium2: 300ms;
440
+ --smrt-duration-medium3: 350ms;
441
+ --smrt-duration-medium4: 400ms;
442
+ --smrt-duration-long1: 450ms;
443
+ --smrt-duration-long2: 500ms;
444
+ --smrt-duration-long3: 550ms;
445
+ --smrt-duration-long4: 600ms;
232
446
  --smrt-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
233
447
  --smrt-easing-standard-decelerate: cubic-bezier(0, 0, 0.2, 1);
234
448
  --smrt-easing-standard-accelerate: cubic-bezier(0.4, 0, 1, 1);
235
449
  --smrt-easing-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
236
450
  --smrt-easing-emphasized-decelerate: cubic-bezier(0.16, 1, 0.3, 1);
237
451
  --smrt-easing-emphasized-accelerate: cubic-bezier(0.4, 0, 0.2, 1);
452
+ --smrt-font-family-mono: ui-monospace, "SF Mono", "Monaco", "Cascadia Code", "Consolas", monospace;
453
+ --smrt-typography-weight-normal: 400;
454
+ --smrt-typography-weight-medium: 500;
455
+ --smrt-typography-weight-semibold: 600;
456
+ --smrt-typography-weight-bold: 700;
457
+ --smrt-z-index-dropdown: 1000;
458
+ --smrt-z-index-sticky: 1100;
459
+ --smrt-z-index-overlay: 1200;
460
+ --smrt-z-index-modal: 1300;
461
+ --smrt-z-index-dialog: 1300;
462
+ --smrt-z-index-popover: 1400;
463
+ --smrt-z-index-toast: 1500;
464
+ --smrt-z-index-tooltip: 1600;
465
+ --smrt-z-index-loading: 1700;
466
+ --smrt-glass-blur: 20px;
467
+ --smrt-glass-saturation: 180%;
468
+ --smrt-glass-border-opacity: 0.3;
469
+ --smrt-glass-background-opacity: 0.72;
238
470
  }
239
471
 
240
472
  /* Glass utility classes */