@thatch-health/slab-tokens 0.0.0

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 (24) hide show
  1. package/README.md +91 -0
  2. package/dist/app-tokens-raw/color/danger.tokens.json +1780 -0
  3. package/dist/app-tokens-raw/color/info.tokens.json +1780 -0
  4. package/dist/app-tokens-raw/color/neutral-inverted.tokens.json +1780 -0
  5. package/dist/app-tokens-raw/color/neutral.tokens.json +1780 -0
  6. package/dist/app-tokens-raw/color/success.tokens.json +1780 -0
  7. package/dist/app-tokens-raw/color/warning.tokens.json +1780 -0
  8. package/dist/app-tokens-raw/color-primitives.tokens.json +1551 -0
  9. package/dist/app-tokens-raw/resolver.json +130 -0
  10. package/dist/app-tokens-raw/spacing-primitives.tokens.json +210 -0
  11. package/dist/app-tokens-raw/spacing.tokens.json +952 -0
  12. package/dist/app-tokens-raw/type-primitives/default.tokens.json +676 -0
  13. package/dist/app-tokens-raw/type-primitives/selecta-inter.tokens.json +676 -0
  14. package/dist/app-tokens-raw/type-primitives/selecta.tokens.json +676 -0
  15. package/dist/app-tokens-raw/type.tokens.json +1763 -0
  16. package/dist/index.css +1025 -0
  17. package/dist/index.css.d.ts +1 -0
  18. package/dist/index.d.mts +5 -0
  19. package/dist/index.d.mts.map +1 -0
  20. package/dist/index.mjs +8 -0
  21. package/dist/index.mjs.map +1 -0
  22. package/dist/tailwind-plugin.cjs +424 -0
  23. package/dist/tailwind-plugin.d.ts +6 -0
  24. package/package.json +61 -0
package/dist/index.css ADDED
@@ -0,0 +1,1025 @@
1
+ /* -------------------------------------------
2
+ * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
3
+ * ------------------------------------------- */
4
+
5
+ :root, [data-font-family="default"] {
6
+ --slab-body-lg-default-font-family: var(--family-app);
7
+ --slab-body-lg-default-letter-spacing: var(--letter-spacing-300);
8
+ --slab-body-lg-default-line-height: var(--line-height-300);
9
+ --slab-body-lg-default-size: var(--size-300);
10
+ --slab-body-lg-default-weight: var(--weight-regular);
11
+ --slab-body-lg-strong-font-family: var(--family-app);
12
+ --slab-body-lg-strong-letter-spacing: var(--letter-spacing-300);
13
+ --slab-body-lg-strong-line-height: var(--line-height-300);
14
+ --slab-body-lg-strong-size: var(--size-300);
15
+ --slab-body-lg-strong-weight: var(--weight-medium);
16
+ --slab-body-md-default-font-family: var(--family-app);
17
+ --slab-body-md-default-letter-spacing: var(--letter-spacing-200);
18
+ --slab-body-md-default-line-height: var(--line-height-200);
19
+ --slab-body-md-default-size: var(--size-200);
20
+ --slab-body-md-default-weight: var(--weight-regular);
21
+ --slab-body-md-strong-font-family: var(--family-app);
22
+ --slab-body-md-strong-letter-spacing: var(--letter-spacing-200);
23
+ --slab-body-md-strong-line-height: var(--line-height-200);
24
+ --slab-body-md-strong-size: var(--size-200);
25
+ --slab-body-md-strong-weight: var(--weight-medium);
26
+ --slab-body-sm-default-font-family: var(--family-app);
27
+ --slab-body-sm-default-letter-spacing: var(--letter-spacing-100);
28
+ --slab-body-sm-default-line-height: var(--line-height-100);
29
+ --slab-body-sm-default-size: var(--size-100);
30
+ --slab-body-sm-default-weight: var(--weight-regular);
31
+ --slab-body-sm-strong-font-family: var(--family-app);
32
+ --slab-body-sm-strong-letter-spacing: var(--letter-spacing-100);
33
+ --slab-body-sm-strong-line-height: var(--line-height-100);
34
+ --slab-body-sm-strong-size: var(--size-100);
35
+ --slab-body-sm-strong-weight: var(--weight-medium);
36
+ --slab-display-lg-font-family: var(--family-display);
37
+ --slab-display-lg-letter-spacing: var(--letter-spacing-1000);
38
+ --slab-display-lg-line-height: var(--line-height-1000);
39
+ --slab-display-lg-size: var(--size-1000);
40
+ --slab-display-lg-weight: var(--weight-medium);
41
+ --slab-display-md-font-family: var(--family-display);
42
+ --slab-display-md-letter-spacing: var(--letter-spacing-900);
43
+ --slab-display-md-line-height: var(--line-height-900);
44
+ --slab-display-md-size: var(--size-900);
45
+ --slab-display-md-weight: var(--weight-medium);
46
+ --slab-display-sm-font-family: var(--family-display);
47
+ --slab-display-sm-letter-spacing: var(--letter-spacing-800);
48
+ --slab-display-sm-line-height: var(--line-height-800);
49
+ --slab-display-sm-size: var(--size-800);
50
+ --slab-display-sm-weight: var(--weight-medium);
51
+ --family-app: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
52
+ --family-display: "Selecta", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
53
+ --family-heading: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
54
+ --family-mono: "JetBrains Mono", ui-monospace, "SFMono - Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
55
+ --letter-spacing-100: 0;
56
+ --letter-spacing-200: 0;
57
+ --letter-spacing-300: 0;
58
+ --letter-spacing-400: 0;
59
+ --letter-spacing-500: 0;
60
+ --letter-spacing-600: 0;
61
+ --letter-spacing-700: 0;
62
+ --letter-spacing-800: -1px;
63
+ --letter-spacing-900: -1.600000023841858px;
64
+ --letter-spacing-1000: -3.799999952316284px;
65
+ --line-height-100: 1.125rem;
66
+ --line-height-200: 1.25rem;
67
+ --line-height-300: 1.5625rem;
68
+ --line-height-400: 1.5rem;
69
+ --line-height-500: 1.75rem;
70
+ --line-height-600: 2rem;
71
+ --line-height-700: 2.375rem;
72
+ --line-height-800: 3.3125rem;
73
+ --line-height-900: 4.1875rem;
74
+ --line-height-1000: 5.6875rem;
75
+ --size-100: 0.75rem;
76
+ --size-200: 0.875rem;
77
+ --size-300: 1rem;
78
+ --size-400: 1.125rem;
79
+ --size-500: 1.25rem;
80
+ --size-600: 1.5rem;
81
+ --size-700: 1.75rem;
82
+ --size-800: 3rem;
83
+ --size-900: 4rem;
84
+ --size-1000: 6rem;
85
+ --slab-size-icon-inner-lg: 1.25rem;
86
+ --slab-size-icon-inner-md: 1rem;
87
+ --slab-size-icon-inner-sm: 0.75rem;
88
+ --slab-size-icon-outer-lg: 2.5rem;
89
+ --slab-size-icon-outer-md: 2rem;
90
+ --slab-size-icon-outer-sm: 1.5rem;
91
+ --slab-size-lg: 2.5rem;
92
+ --slab-size-md: 2rem;
93
+ --slab-size-sm: 1.5rem;
94
+ --slab-size-xs: 1rem;
95
+ --weight-bold: 700;
96
+ --weight-control: 500;
97
+ --weight-light: 300;
98
+ --weight-medium: 500;
99
+ --weight-regular: 400;
100
+ --weight-semibold: 600;
101
+ --weight-thin: 100;
102
+ }
103
+
104
+ [data-font-family="selecta"] {
105
+ --slab-body-lg-default-font-family: var(--family-app);
106
+ --slab-body-lg-default-letter-spacing: var(--letter-spacing-300);
107
+ --slab-body-lg-default-line-height: var(--line-height-300);
108
+ --slab-body-lg-default-size: var(--size-300);
109
+ --slab-body-lg-default-weight: var(--weight-regular);
110
+ --slab-body-lg-strong-font-family: var(--family-app);
111
+ --slab-body-lg-strong-letter-spacing: var(--letter-spacing-300);
112
+ --slab-body-lg-strong-line-height: var(--line-height-300);
113
+ --slab-body-lg-strong-size: var(--size-300);
114
+ --slab-body-lg-strong-weight: var(--weight-medium);
115
+ --slab-body-md-default-font-family: var(--family-app);
116
+ --slab-body-md-default-letter-spacing: var(--letter-spacing-200);
117
+ --slab-body-md-default-line-height: var(--line-height-200);
118
+ --slab-body-md-default-size: var(--size-200);
119
+ --slab-body-md-default-weight: var(--weight-regular);
120
+ --slab-body-md-strong-font-family: var(--family-app);
121
+ --slab-body-md-strong-letter-spacing: var(--letter-spacing-200);
122
+ --slab-body-md-strong-line-height: var(--line-height-200);
123
+ --slab-body-md-strong-size: var(--size-200);
124
+ --slab-body-md-strong-weight: var(--weight-medium);
125
+ --slab-body-sm-default-font-family: var(--family-app);
126
+ --slab-body-sm-default-letter-spacing: var(--letter-spacing-100);
127
+ --slab-body-sm-default-line-height: var(--line-height-100);
128
+ --slab-body-sm-default-size: var(--size-100);
129
+ --slab-body-sm-default-weight: var(--weight-regular);
130
+ --slab-body-sm-strong-font-family: var(--family-app);
131
+ --slab-body-sm-strong-letter-spacing: var(--letter-spacing-100);
132
+ --slab-body-sm-strong-line-height: var(--line-height-100);
133
+ --slab-body-sm-strong-size: var(--size-100);
134
+ --slab-body-sm-strong-weight: var(--weight-medium);
135
+ --slab-display-lg-font-family: var(--family-display);
136
+ --slab-display-lg-letter-spacing: var(--letter-spacing-1000);
137
+ --slab-display-lg-line-height: var(--line-height-1000);
138
+ --slab-display-lg-size: var(--size-1000);
139
+ --slab-display-lg-weight: var(--weight-medium);
140
+ --slab-display-md-font-family: var(--family-display);
141
+ --slab-display-md-letter-spacing: var(--letter-spacing-900);
142
+ --slab-display-md-line-height: var(--line-height-900);
143
+ --slab-display-md-size: var(--size-900);
144
+ --slab-display-md-weight: var(--weight-medium);
145
+ --slab-display-sm-font-family: var(--family-display);
146
+ --slab-display-sm-letter-spacing: var(--letter-spacing-800);
147
+ --slab-display-sm-line-height: var(--line-height-800);
148
+ --slab-display-sm-size: var(--size-800);
149
+ --slab-display-sm-weight: var(--weight-medium);
150
+ --family-app: "Selecta", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
151
+ --family-display: "Selecta", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
152
+ --family-heading: "Selecta", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
153
+ --family-mono: "JetBrains Mono", ui-monospace, "SFMono - Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
154
+ --letter-spacing-100: 0.10000000149011612px;
155
+ --letter-spacing-200: 0.10000000149011612px;
156
+ --letter-spacing-300: 0;
157
+ --letter-spacing-400: 0;
158
+ --letter-spacing-500: -0.10000000149011612px;
159
+ --letter-spacing-600: -0.30000001192092896px;
160
+ --letter-spacing-700: -0.5px;
161
+ --letter-spacing-800: -1px;
162
+ --letter-spacing-900: -1.600000023841858px;
163
+ --letter-spacing-1000: -3.799999952316284px;
164
+ --line-height-100: 1.3125rem;
165
+ --line-height-200: 1.5625rem;
166
+ --line-height-300: 1.8125rem;
167
+ --line-height-400: 1.4375rem;
168
+ --line-height-500: 1.75rem;
169
+ --line-height-600: 2.125rem;
170
+ --line-height-700: 2.5625rem;
171
+ --line-height-800: 3.3125rem;
172
+ --line-height-900: 4.1875rem;
173
+ --line-height-1000: 5.6875rem;
174
+ --size-100: 0.875rem;
175
+ --size-200: 1rem;
176
+ --size-300: 1.125rem;
177
+ --size-400: 1.125rem;
178
+ --size-500: 1.375rem;
179
+ --size-600: 1.75rem;
180
+ --size-700: 2.25rem;
181
+ --size-800: 3rem;
182
+ --size-900: 4rem;
183
+ --size-1000: 6rem;
184
+ --slab-size-icon-inner-lg: 1.25rem;
185
+ --slab-size-icon-inner-md: 1rem;
186
+ --slab-size-icon-inner-sm: 0.75rem;
187
+ --slab-size-icon-outer-lg: 2.5rem;
188
+ --slab-size-icon-outer-md: 2rem;
189
+ --slab-size-icon-outer-sm: 1.5rem;
190
+ --slab-size-lg: 2.5rem;
191
+ --slab-size-md: 2rem;
192
+ --slab-size-sm: 1.5rem;
193
+ --slab-size-xs: 1rem;
194
+ --weight-bold: 700;
195
+ --weight-control: 400;
196
+ --weight-light: 300;
197
+ --weight-medium: 500;
198
+ --weight-regular: 400;
199
+ --weight-semibold: 600;
200
+ --weight-thin: 100;
201
+ }
202
+
203
+ [data-font-family="selecta-inter"] {
204
+ --slab-body-lg-default-font-family: var(--family-app);
205
+ --slab-body-lg-default-letter-spacing: var(--letter-spacing-300);
206
+ --slab-body-lg-default-line-height: var(--line-height-300);
207
+ --slab-body-lg-default-size: var(--size-300);
208
+ --slab-body-lg-default-weight: var(--weight-regular);
209
+ --slab-body-lg-strong-font-family: var(--family-app);
210
+ --slab-body-lg-strong-letter-spacing: var(--letter-spacing-300);
211
+ --slab-body-lg-strong-line-height: var(--line-height-300);
212
+ --slab-body-lg-strong-size: var(--size-300);
213
+ --slab-body-lg-strong-weight: var(--weight-medium);
214
+ --slab-body-md-default-font-family: var(--family-app);
215
+ --slab-body-md-default-letter-spacing: var(--letter-spacing-200);
216
+ --slab-body-md-default-line-height: var(--line-height-200);
217
+ --slab-body-md-default-size: var(--size-200);
218
+ --slab-body-md-default-weight: var(--weight-regular);
219
+ --slab-body-md-strong-font-family: var(--family-app);
220
+ --slab-body-md-strong-letter-spacing: var(--letter-spacing-200);
221
+ --slab-body-md-strong-line-height: var(--line-height-200);
222
+ --slab-body-md-strong-size: var(--size-200);
223
+ --slab-body-md-strong-weight: var(--weight-medium);
224
+ --slab-body-sm-default-font-family: var(--family-app);
225
+ --slab-body-sm-default-letter-spacing: var(--letter-spacing-100);
226
+ --slab-body-sm-default-line-height: var(--line-height-100);
227
+ --slab-body-sm-default-size: var(--size-100);
228
+ --slab-body-sm-default-weight: var(--weight-regular);
229
+ --slab-body-sm-strong-font-family: var(--family-app);
230
+ --slab-body-sm-strong-letter-spacing: var(--letter-spacing-100);
231
+ --slab-body-sm-strong-line-height: var(--line-height-100);
232
+ --slab-body-sm-strong-size: var(--size-100);
233
+ --slab-body-sm-strong-weight: var(--weight-medium);
234
+ --slab-display-lg-font-family: var(--family-display);
235
+ --slab-display-lg-letter-spacing: var(--letter-spacing-1000);
236
+ --slab-display-lg-line-height: var(--line-height-1000);
237
+ --slab-display-lg-size: var(--size-1000);
238
+ --slab-display-lg-weight: var(--weight-medium);
239
+ --slab-display-md-font-family: var(--family-display);
240
+ --slab-display-md-letter-spacing: var(--letter-spacing-900);
241
+ --slab-display-md-line-height: var(--line-height-900);
242
+ --slab-display-md-size: var(--size-900);
243
+ --slab-display-md-weight: var(--weight-medium);
244
+ --slab-display-sm-font-family: var(--family-display);
245
+ --slab-display-sm-letter-spacing: var(--letter-spacing-800);
246
+ --slab-display-sm-line-height: var(--line-height-800);
247
+ --slab-display-sm-size: var(--size-800);
248
+ --slab-display-sm-weight: var(--weight-medium);
249
+ --family-app: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
250
+ --family-display: "Selecta", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
251
+ --family-heading: "Selecta", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
252
+ --family-mono: "JetBrains Mono", ui-monospace, "SFMono - Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
253
+ --letter-spacing-100: 0;
254
+ --letter-spacing-200: 0;
255
+ --letter-spacing-300: 0;
256
+ --letter-spacing-400: 0;
257
+ --letter-spacing-500: -0.10000000149011612px;
258
+ --letter-spacing-600: -0.30000001192092896px;
259
+ --letter-spacing-700: -0.5px;
260
+ --letter-spacing-800: -1px;
261
+ --letter-spacing-900: -1.600000023841858px;
262
+ --letter-spacing-1000: -3.799999952316284px;
263
+ --line-height-100: 1.4375rem;
264
+ --line-height-200: 1.5rem;
265
+ --line-height-300: 1.5625rem;
266
+ --line-height-400: 1.4375rem;
267
+ --line-height-500: 1.75rem;
268
+ --line-height-600: 2.125rem;
269
+ --line-height-700: 2.5625rem;
270
+ --line-height-800: 3.3125rem;
271
+ --line-height-900: 4.1875rem;
272
+ --line-height-1000: 5.6875rem;
273
+ --size-100: 0.8125rem;
274
+ --size-200: 0.875rem;
275
+ --size-300: 1rem;
276
+ --size-400: 1.125rem;
277
+ --size-500: 1.375rem;
278
+ --size-600: 1.75rem;
279
+ --size-700: 2.25rem;
280
+ --size-800: 3rem;
281
+ --size-900: 4rem;
282
+ --size-1000: 6rem;
283
+ --slab-size-icon-inner-lg: 1.25rem;
284
+ --slab-size-icon-inner-md: 1rem;
285
+ --slab-size-icon-inner-sm: 0.75rem;
286
+ --slab-size-icon-outer-lg: 2.5rem;
287
+ --slab-size-icon-outer-md: 2rem;
288
+ --slab-size-icon-outer-sm: 1.5rem;
289
+ --slab-size-lg: 2.5rem;
290
+ --slab-size-md: 2rem;
291
+ --slab-size-sm: 1.5rem;
292
+ --slab-size-xs: 1rem;
293
+ --weight-bold: 700;
294
+ --weight-control: 450;
295
+ --weight-light: 300;
296
+ --weight-medium: 500;
297
+ --weight-regular: 400;
298
+ --weight-semibold: 600;
299
+ --weight-thin: 100;
300
+ }
301
+
302
+ :root, [data-color-mode="neutral"] {
303
+ --slab-action-ghost-bg: var(--gray-transparent-0);
304
+ --slab-action-ghost-focus-border: var(--brand-300);
305
+ --slab-action-ghost-icon: var(--gray-500);
306
+ --slab-action-ghost-text: var(--gray-800);
307
+ --slab-action-primary-bg: var(--brand-500);
308
+ --slab-action-primary-bg-end: var(--brand-500);
309
+ --slab-action-primary-bg-start: var(--brand-600);
310
+ --slab-action-primary-border: var(--brand-700);
311
+ --slab-action-primary-focus-border: var(--brand-300);
312
+ --slab-action-primary-icon: var(--gray-50);
313
+ --slab-action-primary-text: var(--gray-warm-0);
314
+ --slab-action-secondary-bg: var(--gray-100);
315
+ --slab-action-secondary-bg-end: var(--gray-warm-0);
316
+ --slab-action-secondary-bg-start: var(--gray-100);
317
+ --slab-action-secondary-border: var(--gray-300);
318
+ --slab-action-secondary-focus-border: var(--brand-300);
319
+ --slab-action-secondary-icon: var(--gray-500);
320
+ --slab-action-secondary-text: var(--gray-800);
321
+ --slab-action-tertiary-bg: var(--gray-transparent-0);
322
+ --slab-action-tertiary-focus-border: var(--brand-300);
323
+ --slab-action-tertiary-icon: var(--brand-400);
324
+ --slab-action-tertiary-text: var(--brand-500);
325
+ --slab-action-disabled-ghost-bg: var(--gray-transparent-0);
326
+ --slab-action-disabled-ghost-icon: var(--gray-400);
327
+ --slab-action-disabled-ghost-text: var(--gray-400);
328
+ --slab-action-disabled-primary-bg: var(--brand-400);
329
+ --slab-action-disabled-primary-bg-end: var(--brand-400);
330
+ --slab-action-disabled-primary-bg-start: var(--brand-400);
331
+ --slab-action-disabled-primary-border: var(--brand-400);
332
+ --slab-action-disabled-primary-icon: var(--gray-50);
333
+ --slab-action-disabled-primary-text: var(--gray-warm-0);
334
+ --slab-action-disabled-secondary-bg: var(--gray-200);
335
+ --slab-action-disabled-secondary-bg-end: var(--gray-200);
336
+ --slab-action-disabled-secondary-bg-start: var(--gray-200);
337
+ --slab-action-disabled-secondary-border: var(--gray-400);
338
+ --slab-action-disabled-secondary-icon: var(--gray-400);
339
+ --slab-action-disabled-secondary-text: var(--gray-400);
340
+ --slab-action-disabled-tertiary-bg: var(--gray-transparent-0);
341
+ --slab-action-disabled-tertiary-icon: var(--brand-300);
342
+ --slab-action-disabled-tertiary-text: var(--brand-400);
343
+ --slab-action-hover-ghost-bg: var(--gray-200);
344
+ --slab-action-hover-ghost-icon: var(--gray-500);
345
+ --slab-action-hover-ghost-text: var(--gray-800);
346
+ --slab-action-hover-primary-bg: var(--brand-600);
347
+ --slab-action-hover-primary-bg-end: var(--brand-600);
348
+ --slab-action-hover-primary-bg-start: var(--brand-700);
349
+ --slab-action-hover-primary-border: var(--brand-800);
350
+ --slab-action-hover-primary-icon: var(--gray-50);
351
+ --slab-action-hover-primary-text: var(--gray-warm-0);
352
+ --slab-action-hover-secondary-bg: var(--gray-200);
353
+ --slab-action-hover-secondary-bg-end: var(--gray-100);
354
+ --slab-action-hover-secondary-bg-start: var(--gray-200);
355
+ --slab-action-hover-secondary-border: var(--gray-400);
356
+ --slab-action-hover-secondary-icon: var(--gray-500);
357
+ --slab-action-hover-secondary-text: var(--gray-800);
358
+ --slab-action-hover-tertiary-bg: var(--brand-100);
359
+ --slab-action-hover-tertiary-icon: var(--brand-500);
360
+ --slab-action-hover-tertiary-text: var(--brand-600);
361
+ --slab-form-active-primary-bg: var(--brand-100);
362
+ --slab-form-active-primary-border: var(--brand-500);
363
+ --slab-form-active-primary-icon: var(--brand-500);
364
+ --slab-form-active-primary-text: var(--gray-800);
365
+ --slab-form-active-secondary-text: var(--gray-500);
366
+ --slab-form-primary-bg: var(--gray-warm-0);
367
+ --slab-form-primary-border: var(--gray-400);
368
+ --slab-form-primary-focus-border: var(--brand-300);
369
+ --slab-form-primary-icon: var(--gray-400);
370
+ --slab-form-primary-text: var(--gray-800);
371
+ --slab-form-secondary-text: var(--gray-500);
372
+ --slab-form-disabled-primary-bg: var(--gray-100);
373
+ --slab-form-disabled-primary-border: var(--gray-200);
374
+ --slab-form-disabled-primary-icon: var(--gray-400);
375
+ --slab-form-disabled-primary-text: var(--gray-800);
376
+ --slab-form-disabled-secondary-text: var(--gray-500);
377
+ --slab-surface-primary-bg: var(--gray-50);
378
+ --slab-surface-primary-border: var(--gray-400);
379
+ --slab-surface-primary-icon: var(--gray-500);
380
+ --slab-surface-primary-text: var(--gray-800);
381
+ --slab-surface-secondary-bg: var(--gray-warm-0);
382
+ --slab-surface-secondary-border: var(--gray-200);
383
+ --slab-surface-secondary-icon: var(--gray-400);
384
+ --slab-surface-secondary-text: var(--gray-500);
385
+ --slab-surface-tertiary-bg: var(--gray-100);
386
+ }
387
+
388
+ [data-color-mode="neutral-inverted"] {
389
+ --slab-action-ghost-bg: var(--gray-transparent-0);
390
+ --slab-action-ghost-focus-border: var(--brand-200);
391
+ --slab-action-ghost-icon: var(--gray-200);
392
+ --slab-action-ghost-text: var(--gray-0);
393
+ --slab-action-primary-bg: var(--brand-400);
394
+ --slab-action-primary-bg-end: var(--brand-300);
395
+ --slab-action-primary-bg-start: var(--brand-400);
396
+ --slab-action-primary-border: var(--brand-500);
397
+ --slab-action-primary-focus-border: var(--brand-200);
398
+ --slab-action-primary-icon: var(--gray-0);
399
+ --slab-action-primary-text: var(--gray-0);
400
+ --slab-action-secondary-bg: var(--gray-700);
401
+ --slab-action-secondary-bg-end: var(--gray-600);
402
+ --slab-action-secondary-bg-start: var(--gray-700);
403
+ --slab-action-secondary-border: var(--gray-500);
404
+ --slab-action-secondary-focus-border: var(--brand-200);
405
+ --slab-action-secondary-icon: var(--gray-200);
406
+ --slab-action-secondary-text: var(--gray-0);
407
+ --slab-action-tertiary-bg: var(--gray-transparent-0);
408
+ --slab-action-tertiary-focus-border: var(--brand-200);
409
+ --slab-action-tertiary-icon: var(--brand-200);
410
+ --slab-action-tertiary-text: var(--brand-300);
411
+ --slab-action-disabled-ghost-bg: var(--gray-transparent-0);
412
+ --slab-action-disabled-ghost-icon: var(--gray-600);
413
+ --slab-action-disabled-ghost-text: var(--gray-500);
414
+ --slab-action-disabled-primary-bg: var(--gray-600);
415
+ --slab-action-disabled-primary-bg-end: var(--gray-600);
416
+ --slab-action-disabled-primary-bg-start: var(--gray-600);
417
+ --slab-action-disabled-primary-border: var(--gray-600);
418
+ --slab-action-disabled-primary-icon: var(--gray-400);
419
+ --slab-action-disabled-primary-text: var(--gray-400);
420
+ --slab-action-disabled-secondary-bg: var(--gray-700);
421
+ --slab-action-disabled-secondary-bg-end: var(--gray-700);
422
+ --slab-action-disabled-secondary-bg-start: var(--gray-700);
423
+ --slab-action-disabled-secondary-border: var(--gray-600);
424
+ --slab-action-disabled-secondary-icon: var(--gray-500);
425
+ --slab-action-disabled-secondary-text: var(--gray-500);
426
+ --slab-action-disabled-tertiary-bg: var(--gray-transparent-0);
427
+ --slab-action-disabled-tertiary-icon: var(--gray-600);
428
+ --slab-action-disabled-tertiary-text: var(--gray-500);
429
+ --slab-action-hover-ghost-bg: var(--gray-700);
430
+ --slab-action-hover-ghost-icon: var(--gray-100);
431
+ --slab-action-hover-ghost-text: var(--gray-0);
432
+ --slab-action-hover-primary-bg: var(--brand-300);
433
+ --slab-action-hover-primary-bg-end: var(--brand-300);
434
+ --slab-action-hover-primary-bg-start: var(--brand-400);
435
+ --slab-action-hover-primary-border: var(--brand-400);
436
+ --slab-action-hover-primary-icon: var(--gray-0);
437
+ --slab-action-hover-primary-text: var(--gray-0);
438
+ --slab-action-hover-secondary-bg: var(--gray-600);
439
+ --slab-action-hover-secondary-bg-end: var(--gray-500);
440
+ --slab-action-hover-secondary-bg-start: var(--gray-600);
441
+ --slab-action-hover-secondary-border: var(--gray-400);
442
+ --slab-action-hover-secondary-icon: var(--gray-100);
443
+ --slab-action-hover-secondary-text: var(--gray-0);
444
+ --slab-action-hover-tertiary-bg: var(--gray-700);
445
+ --slab-action-hover-tertiary-icon: var(--brand-200);
446
+ --slab-action-hover-tertiary-text: var(--brand-200);
447
+ --slab-form-active-primary-bg: var(--gray-700);
448
+ --slab-form-active-primary-border: var(--brand-300);
449
+ --slab-form-active-primary-icon: var(--brand-300);
450
+ --slab-form-active-primary-text: var(--gray-0);
451
+ --slab-form-active-secondary-text: var(--gray-300);
452
+ --slab-form-primary-bg: var(--gray-700);
453
+ --slab-form-primary-border: var(--gray-500);
454
+ --slab-form-primary-focus-border: var(--brand-200);
455
+ --slab-form-primary-icon: var(--gray-300);
456
+ --slab-form-primary-text: var(--gray-0);
457
+ --slab-form-secondary-text: var(--gray-400);
458
+ --slab-form-disabled-primary-bg: var(--gray-700);
459
+ --slab-form-disabled-primary-border: var(--gray-600);
460
+ --slab-form-disabled-primary-icon: var(--gray-600);
461
+ --slab-form-disabled-primary-text: var(--gray-500);
462
+ --slab-form-disabled-secondary-text: var(--gray-600);
463
+ --slab-surface-primary-bg: var(--gray-800);
464
+ --slab-surface-primary-border: var(--gray-600);
465
+ --slab-surface-primary-icon: var(--gray-200);
466
+ --slab-surface-primary-text: var(--gray-0);
467
+ --slab-surface-secondary-bg: var(--gray-700);
468
+ --slab-surface-secondary-border: var(--gray-600);
469
+ --slab-surface-secondary-icon: var(--gray-400);
470
+ --slab-surface-secondary-text: var(--gray-300);
471
+ --slab-surface-tertiary-bg: var(--gray-700);
472
+ }
473
+
474
+ [data-color-mode="danger"] {
475
+ --slab-action-ghost-bg: var(--gray-transparent-0);
476
+ --slab-action-ghost-focus-border: var(--brand-300);
477
+ --slab-action-ghost-icon: var(--gray-500);
478
+ --slab-action-ghost-text: var(--gray-800);
479
+ --slab-action-primary-bg: var(--red-500);
480
+ --slab-action-primary-bg-end: var(--red-400);
481
+ --slab-action-primary-bg-start: var(--red-500);
482
+ --slab-action-primary-border: var(--red-500);
483
+ --slab-action-primary-focus-border: var(--brand-300);
484
+ --slab-action-primary-icon: var(--red-100);
485
+ --slab-action-primary-text: var(--gray-warm-0);
486
+ --slab-action-secondary-bg: var(--gray-100);
487
+ --slab-action-secondary-bg-end: var(--gray-warm-0);
488
+ --slab-action-secondary-bg-start: var(--gray-100);
489
+ --slab-action-secondary-border: var(--gray-300);
490
+ --slab-action-secondary-focus-border: var(--brand-300);
491
+ --slab-action-secondary-icon: var(--gray-500);
492
+ --slab-action-secondary-text: var(--gray-800);
493
+ --slab-action-tertiary-bg: var(--gray-transparent-0);
494
+ --slab-action-tertiary-focus-border: var(--brand-300);
495
+ --slab-action-tertiary-icon: var(--red-400);
496
+ --slab-action-tertiary-text: var(--red-500);
497
+ --slab-action-disabled-ghost-bg: var(--gray-transparent-0);
498
+ --slab-action-disabled-ghost-icon: var(--gray-400);
499
+ --slab-action-disabled-ghost-text: var(--gray-400);
500
+ --slab-action-disabled-primary-bg: var(--red-300);
501
+ --slab-action-disabled-primary-bg-end: var(--red-300);
502
+ --slab-action-disabled-primary-bg-start: var(--red-300);
503
+ --slab-action-disabled-primary-border: var(--red-300);
504
+ --slab-action-disabled-primary-icon: var(--gray-50);
505
+ --slab-action-disabled-primary-text: var(--gray-warm-0);
506
+ --slab-action-disabled-secondary-bg: var(--gray-200);
507
+ --slab-action-disabled-secondary-bg-end: var(--gray-200);
508
+ --slab-action-disabled-secondary-bg-start: var(--gray-200);
509
+ --slab-action-disabled-secondary-border: var(--gray-400);
510
+ --slab-action-disabled-secondary-icon: var(--gray-400);
511
+ --slab-action-disabled-secondary-text: var(--gray-400);
512
+ --slab-action-disabled-tertiary-bg: var(--gray-transparent-0);
513
+ --slab-action-disabled-tertiary-icon: var(--red-300);
514
+ --slab-action-disabled-tertiary-text: var(--red-400);
515
+ --slab-action-hover-ghost-bg: var(--gray-200);
516
+ --slab-action-hover-ghost-icon: var(--gray-500);
517
+ --slab-action-hover-ghost-text: var(--gray-800);
518
+ --slab-action-hover-primary-bg: var(--red-600);
519
+ --slab-action-hover-primary-bg-end: var(--red-500);
520
+ --slab-action-hover-primary-bg-start: var(--red-600);
521
+ --slab-action-hover-primary-border: var(--red-600);
522
+ --slab-action-hover-primary-icon: var(--red-300);
523
+ --slab-action-hover-primary-text: var(--gray-warm-0);
524
+ --slab-action-hover-secondary-bg: var(--gray-200);
525
+ --slab-action-hover-secondary-bg-end: var(--gray-100);
526
+ --slab-action-hover-secondary-bg-start: var(--gray-200);
527
+ --slab-action-hover-secondary-border: var(--gray-400);
528
+ --slab-action-hover-secondary-icon: var(--gray-500);
529
+ --slab-action-hover-secondary-text: var(--gray-800);
530
+ --slab-action-hover-tertiary-bg: var(--red-50);
531
+ --slab-action-hover-tertiary-icon: var(--red-400);
532
+ --slab-action-hover-tertiary-text: var(--red-500);
533
+ --slab-form-active-primary-bg: var(--red-50);
534
+ --slab-form-active-primary-border: var(--red-500);
535
+ --slab-form-active-primary-icon: var(--red-500);
536
+ --slab-form-active-primary-text: var(--gray-800);
537
+ --slab-form-active-secondary-text: var(--gray-500);
538
+ --slab-form-primary-bg: var(--gray-warm-0);
539
+ --slab-form-primary-border: var(--red-300);
540
+ --slab-form-primary-focus-border: var(--brand-300);
541
+ --slab-form-primary-icon: var(--gray-400);
542
+ --slab-form-primary-text: var(--gray-800);
543
+ --slab-form-secondary-text: var(--red-500);
544
+ --slab-form-disabled-primary-bg: var(--gray-100);
545
+ --slab-form-disabled-primary-border: var(--gray-200);
546
+ --slab-form-disabled-primary-icon: var(--gray-400);
547
+ --slab-form-disabled-primary-text: var(--gray-800);
548
+ --slab-form-disabled-secondary-text: var(--gray-500);
549
+ --slab-surface-primary-bg: var(--red-50);
550
+ --slab-surface-primary-border: var(--red-300);
551
+ --slab-surface-primary-icon: var(--red-400);
552
+ --slab-surface-primary-text: var(--red-500);
553
+ --slab-surface-secondary-bg: var(--red-100);
554
+ --slab-surface-secondary-border: var(--red-300);
555
+ --slab-surface-secondary-icon: var(--red-400);
556
+ --slab-surface-secondary-text: var(--red-400);
557
+ --slab-surface-tertiary-bg: var(--red-200);
558
+ }
559
+
560
+ [data-color-mode="info"] {
561
+ --slab-action-ghost-bg: var(--gray-transparent-0);
562
+ --slab-action-ghost-focus-border: var(--brand-300);
563
+ --slab-action-ghost-icon: var(--gray-500);
564
+ --slab-action-ghost-text: var(--gray-800);
565
+ --slab-action-primary-bg: var(--blue-500);
566
+ --slab-action-primary-bg-end: var(--blue-400);
567
+ --slab-action-primary-bg-start: var(--blue-500);
568
+ --slab-action-primary-border: var(--blue-500);
569
+ --slab-action-primary-focus-border: var(--brand-300);
570
+ --slab-action-primary-icon: var(--blue-100);
571
+ --slab-action-primary-text: var(--gray-warm-0);
572
+ --slab-action-secondary-bg: var(--gray-100);
573
+ --slab-action-secondary-bg-end: var(--gray-warm-0);
574
+ --slab-action-secondary-bg-start: var(--gray-100);
575
+ --slab-action-secondary-border: var(--gray-300);
576
+ --slab-action-secondary-focus-border: var(--brand-300);
577
+ --slab-action-secondary-icon: var(--gray-500);
578
+ --slab-action-secondary-text: var(--gray-800);
579
+ --slab-action-tertiary-bg: var(--gray-transparent-0);
580
+ --slab-action-tertiary-focus-border: var(--brand-300);
581
+ --slab-action-tertiary-icon: var(--blue-400);
582
+ --slab-action-tertiary-text: var(--blue-500);
583
+ --slab-action-disabled-ghost-bg: var(--gray-transparent-0);
584
+ --slab-action-disabled-ghost-icon: var(--gray-400);
585
+ --slab-action-disabled-ghost-text: var(--gray-400);
586
+ --slab-action-disabled-primary-bg: var(--blue-300);
587
+ --slab-action-disabled-primary-bg-end: var(--blue-300);
588
+ --slab-action-disabled-primary-bg-start: var(--blue-300);
589
+ --slab-action-disabled-primary-border: var(--blue-300);
590
+ --slab-action-disabled-primary-icon: var(--gray-50);
591
+ --slab-action-disabled-primary-text: var(--gray-warm-0);
592
+ --slab-action-disabled-secondary-bg: var(--gray-200);
593
+ --slab-action-disabled-secondary-bg-end: var(--gray-200);
594
+ --slab-action-disabled-secondary-bg-start: var(--gray-200);
595
+ --slab-action-disabled-secondary-border: var(--gray-400);
596
+ --slab-action-disabled-secondary-icon: var(--gray-400);
597
+ --slab-action-disabled-secondary-text: var(--gray-400);
598
+ --slab-action-disabled-tertiary-bg: var(--gray-transparent-0);
599
+ --slab-action-disabled-tertiary-icon: var(--blue-300);
600
+ --slab-action-disabled-tertiary-text: var(--blue-400);
601
+ --slab-action-hover-ghost-bg: var(--gray-200);
602
+ --slab-action-hover-ghost-icon: var(--gray-500);
603
+ --slab-action-hover-ghost-text: var(--gray-800);
604
+ --slab-action-hover-primary-bg: var(--blue-600);
605
+ --slab-action-hover-primary-bg-end: var(--blue-500);
606
+ --slab-action-hover-primary-bg-start: var(--blue-600);
607
+ --slab-action-hover-primary-border: var(--blue-600);
608
+ --slab-action-hover-primary-icon: var(--blue-300);
609
+ --slab-action-hover-primary-text: var(--gray-warm-0);
610
+ --slab-action-hover-secondary-bg: var(--gray-200);
611
+ --slab-action-hover-secondary-bg-end: var(--gray-100);
612
+ --slab-action-hover-secondary-bg-start: var(--gray-200);
613
+ --slab-action-hover-secondary-border: var(--gray-400);
614
+ --slab-action-hover-secondary-icon: var(--gray-500);
615
+ --slab-action-hover-secondary-text: var(--gray-800);
616
+ --slab-action-hover-tertiary-bg: var(--blue-50);
617
+ --slab-action-hover-tertiary-icon: var(--blue-400);
618
+ --slab-action-hover-tertiary-text: var(--blue-500);
619
+ --slab-form-active-primary-bg: var(--blue-50);
620
+ --slab-form-active-primary-border: var(--blue-500);
621
+ --slab-form-active-primary-icon: var(--blue-500);
622
+ --slab-form-active-primary-text: var(--gray-800);
623
+ --slab-form-active-secondary-text: var(--gray-500);
624
+ --slab-form-primary-bg: var(--gray-warm-0);
625
+ --slab-form-primary-border: var(--blue-300);
626
+ --slab-form-primary-focus-border: var(--brand-300);
627
+ --slab-form-primary-icon: var(--gray-400);
628
+ --slab-form-primary-text: var(--gray-800);
629
+ --slab-form-secondary-text: var(--blue-500);
630
+ --slab-form-disabled-primary-bg: var(--gray-100);
631
+ --slab-form-disabled-primary-border: var(--gray-200);
632
+ --slab-form-disabled-primary-icon: var(--gray-400);
633
+ --slab-form-disabled-primary-text: var(--gray-800);
634
+ --slab-form-disabled-secondary-text: var(--gray-500);
635
+ --slab-surface-primary-bg: var(--blue-50);
636
+ --slab-surface-primary-border: var(--blue-300);
637
+ --slab-surface-primary-icon: var(--blue-400);
638
+ --slab-surface-primary-text: var(--blue-500);
639
+ --slab-surface-secondary-bg: var(--blue-100);
640
+ --slab-surface-secondary-border: var(--blue-300);
641
+ --slab-surface-secondary-icon: var(--blue-400);
642
+ --slab-surface-secondary-text: var(--blue-400);
643
+ --slab-surface-tertiary-bg: var(--blue-200);
644
+ }
645
+
646
+ [data-color-mode="success"] {
647
+ --slab-action-ghost-bg: var(--gray-transparent-0);
648
+ --slab-action-ghost-focus-border: var(--brand-300);
649
+ --slab-action-ghost-icon: var(--gray-500);
650
+ --slab-action-ghost-text: var(--gray-800);
651
+ --slab-action-primary-bg: var(--green-500);
652
+ --slab-action-primary-bg-end: var(--green-400);
653
+ --slab-action-primary-bg-start: var(--green-500);
654
+ --slab-action-primary-border: var(--green-500);
655
+ --slab-action-primary-focus-border: var(--brand-300);
656
+ --slab-action-primary-icon: var(--green-100);
657
+ --slab-action-primary-text: var(--gray-warm-0);
658
+ --slab-action-secondary-bg: var(--gray-100);
659
+ --slab-action-secondary-bg-end: var(--gray-warm-0);
660
+ --slab-action-secondary-bg-start: var(--gray-100);
661
+ --slab-action-secondary-border: var(--gray-300);
662
+ --slab-action-secondary-focus-border: var(--brand-300);
663
+ --slab-action-secondary-icon: var(--gray-500);
664
+ --slab-action-secondary-text: var(--gray-800);
665
+ --slab-action-tertiary-bg: var(--gray-transparent-0);
666
+ --slab-action-tertiary-focus-border: var(--brand-300);
667
+ --slab-action-tertiary-icon: var(--green-400);
668
+ --slab-action-tertiary-text: var(--green-500);
669
+ --slab-action-disabled-ghost-bg: var(--gray-transparent-0);
670
+ --slab-action-disabled-ghost-icon: var(--gray-400);
671
+ --slab-action-disabled-ghost-text: var(--gray-400);
672
+ --slab-action-disabled-primary-bg: var(--green-300);
673
+ --slab-action-disabled-primary-bg-end: var(--green-300);
674
+ --slab-action-disabled-primary-bg-start: var(--green-300);
675
+ --slab-action-disabled-primary-border: var(--green-300);
676
+ --slab-action-disabled-primary-icon: var(--gray-50);
677
+ --slab-action-disabled-primary-text: var(--gray-warm-0);
678
+ --slab-action-disabled-secondary-bg: var(--gray-200);
679
+ --slab-action-disabled-secondary-bg-end: var(--gray-200);
680
+ --slab-action-disabled-secondary-bg-start: var(--gray-200);
681
+ --slab-action-disabled-secondary-border: var(--gray-400);
682
+ --slab-action-disabled-secondary-icon: var(--gray-400);
683
+ --slab-action-disabled-secondary-text: var(--gray-400);
684
+ --slab-action-disabled-tertiary-bg: var(--gray-transparent-0);
685
+ --slab-action-disabled-tertiary-icon: var(--green-300);
686
+ --slab-action-disabled-tertiary-text: var(--green-400);
687
+ --slab-action-hover-ghost-bg: var(--gray-200);
688
+ --slab-action-hover-ghost-icon: var(--gray-500);
689
+ --slab-action-hover-ghost-text: var(--gray-800);
690
+ --slab-action-hover-primary-bg: var(--green-600);
691
+ --slab-action-hover-primary-bg-end: var(--green-500);
692
+ --slab-action-hover-primary-bg-start: var(--green-600);
693
+ --slab-action-hover-primary-border: var(--green-600);
694
+ --slab-action-hover-primary-icon: var(--green-300);
695
+ --slab-action-hover-primary-text: var(--gray-warm-0);
696
+ --slab-action-hover-secondary-bg: var(--gray-200);
697
+ --slab-action-hover-secondary-bg-end: var(--gray-100);
698
+ --slab-action-hover-secondary-bg-start: var(--gray-200);
699
+ --slab-action-hover-secondary-border: var(--gray-400);
700
+ --slab-action-hover-secondary-icon: var(--gray-500);
701
+ --slab-action-hover-secondary-text: var(--gray-800);
702
+ --slab-action-hover-tertiary-bg: var(--green-50);
703
+ --slab-action-hover-tertiary-icon: var(--green-400);
704
+ --slab-action-hover-tertiary-text: var(--green-500);
705
+ --slab-form-active-primary-bg: var(--green-50);
706
+ --slab-form-active-primary-border: var(--green-500);
707
+ --slab-form-active-primary-icon: var(--green-500);
708
+ --slab-form-active-primary-text: var(--gray-800);
709
+ --slab-form-active-secondary-text: var(--gray-500);
710
+ --slab-form-primary-bg: var(--gray-warm-0);
711
+ --slab-form-primary-border: var(--green-300);
712
+ --slab-form-primary-focus-border: var(--brand-300);
713
+ --slab-form-primary-icon: var(--gray-400);
714
+ --slab-form-primary-text: var(--gray-800);
715
+ --slab-form-secondary-text: var(--green-500);
716
+ --slab-form-disabled-primary-bg: var(--gray-100);
717
+ --slab-form-disabled-primary-border: var(--gray-200);
718
+ --slab-form-disabled-primary-icon: var(--gray-400);
719
+ --slab-form-disabled-primary-text: var(--gray-800);
720
+ --slab-form-disabled-secondary-text: var(--gray-500);
721
+ --slab-surface-primary-bg: var(--green-50);
722
+ --slab-surface-primary-border: var(--green-300);
723
+ --slab-surface-primary-icon: var(--green-400);
724
+ --slab-surface-primary-text: var(--green-500);
725
+ --slab-surface-secondary-bg: var(--green-100);
726
+ --slab-surface-secondary-border: var(--green-300);
727
+ --slab-surface-secondary-icon: var(--green-400);
728
+ --slab-surface-secondary-text: var(--green-400);
729
+ --slab-surface-tertiary-bg: var(--green-200);
730
+ }
731
+
732
+ [data-color-mode="warning"] {
733
+ --slab-action-ghost-bg: var(--gray-transparent-0);
734
+ --slab-action-ghost-focus-border: var(--brand-300);
735
+ --slab-action-ghost-icon: var(--gray-500);
736
+ --slab-action-ghost-text: var(--gray-800);
737
+ --slab-action-primary-bg: var(--orange-500);
738
+ --slab-action-primary-bg-end: var(--orange-400);
739
+ --slab-action-primary-bg-start: var(--orange-500);
740
+ --slab-action-primary-border: var(--orange-500);
741
+ --slab-action-primary-focus-border: var(--brand-300);
742
+ --slab-action-primary-icon: var(--orange-100);
743
+ --slab-action-primary-text: var(--gray-warm-0);
744
+ --slab-action-secondary-bg: var(--gray-100);
745
+ --slab-action-secondary-bg-end: var(--gray-warm-0);
746
+ --slab-action-secondary-bg-start: var(--gray-100);
747
+ --slab-action-secondary-border: var(--gray-300);
748
+ --slab-action-secondary-focus-border: var(--brand-300);
749
+ --slab-action-secondary-icon: var(--gray-500);
750
+ --slab-action-secondary-text: var(--gray-800);
751
+ --slab-action-tertiary-bg: var(--gray-transparent-0);
752
+ --slab-action-tertiary-focus-border: var(--brand-300);
753
+ --slab-action-tertiary-icon: var(--orange-400);
754
+ --slab-action-tertiary-text: var(--orange-500);
755
+ --slab-action-disabled-ghost-bg: var(--gray-transparent-0);
756
+ --slab-action-disabled-ghost-icon: var(--gray-400);
757
+ --slab-action-disabled-ghost-text: var(--gray-400);
758
+ --slab-action-disabled-primary-bg: var(--orange-300);
759
+ --slab-action-disabled-primary-bg-end: var(--orange-300);
760
+ --slab-action-disabled-primary-bg-start: var(--orange-300);
761
+ --slab-action-disabled-primary-border: var(--orange-300);
762
+ --slab-action-disabled-primary-icon: var(--gray-50);
763
+ --slab-action-disabled-primary-text: var(--gray-warm-0);
764
+ --slab-action-disabled-secondary-bg: var(--gray-200);
765
+ --slab-action-disabled-secondary-bg-end: var(--gray-200);
766
+ --slab-action-disabled-secondary-bg-start: var(--gray-200);
767
+ --slab-action-disabled-secondary-border: var(--gray-400);
768
+ --slab-action-disabled-secondary-icon: var(--gray-400);
769
+ --slab-action-disabled-secondary-text: var(--gray-400);
770
+ --slab-action-disabled-tertiary-bg: var(--gray-transparent-0);
771
+ --slab-action-disabled-tertiary-icon: var(--orange-300);
772
+ --slab-action-disabled-tertiary-text: var(--orange-400);
773
+ --slab-action-hover-ghost-bg: var(--gray-200);
774
+ --slab-action-hover-ghost-icon: var(--gray-500);
775
+ --slab-action-hover-ghost-text: var(--gray-800);
776
+ --slab-action-hover-primary-bg: var(--orange-600);
777
+ --slab-action-hover-primary-bg-end: var(--orange-500);
778
+ --slab-action-hover-primary-bg-start: var(--orange-600);
779
+ --slab-action-hover-primary-border: var(--orange-600);
780
+ --slab-action-hover-primary-icon: var(--orange-300);
781
+ --slab-action-hover-primary-text: var(--gray-warm-0);
782
+ --slab-action-hover-secondary-bg: var(--gray-200);
783
+ --slab-action-hover-secondary-bg-end: var(--gray-100);
784
+ --slab-action-hover-secondary-bg-start: var(--gray-200);
785
+ --slab-action-hover-secondary-border: var(--gray-400);
786
+ --slab-action-hover-secondary-icon: var(--gray-500);
787
+ --slab-action-hover-secondary-text: var(--gray-800);
788
+ --slab-action-hover-tertiary-bg: var(--orange-50);
789
+ --slab-action-hover-tertiary-icon: var(--orange-400);
790
+ --slab-action-hover-tertiary-text: var(--orange-500);
791
+ --slab-form-active-primary-bg: var(--orange-50);
792
+ --slab-form-active-primary-border: var(--orange-500);
793
+ --slab-form-active-primary-icon: var(--orange-500);
794
+ --slab-form-active-primary-text: var(--gray-800);
795
+ --slab-form-active-secondary-text: var(--gray-500);
796
+ --slab-form-primary-bg: var(--gray-warm-0);
797
+ --slab-form-primary-border: var(--orange-300);
798
+ --slab-form-primary-focus-border: var(--brand-300);
799
+ --slab-form-primary-icon: var(--gray-400);
800
+ --slab-form-primary-text: var(--gray-800);
801
+ --slab-form-secondary-text: var(--orange-500);
802
+ --slab-form-disabled-primary-bg: var(--gray-100);
803
+ --slab-form-disabled-primary-border: var(--gray-200);
804
+ --slab-form-disabled-primary-icon: var(--gray-400);
805
+ --slab-form-disabled-primary-text: var(--gray-800);
806
+ --slab-form-disabled-secondary-text: var(--gray-500);
807
+ --slab-surface-primary-bg: var(--orange-50);
808
+ --slab-surface-primary-border: var(--orange-300);
809
+ --slab-surface-primary-icon: var(--orange-400);
810
+ --slab-surface-primary-text: var(--orange-500);
811
+ --slab-surface-secondary-bg: var(--orange-100);
812
+ --slab-surface-secondary-border: var(--orange-300);
813
+ --slab-surface-secondary-icon: var(--orange-400);
814
+ --slab-surface-secondary-text: var(--orange-400);
815
+ --slab-surface-tertiary-bg: var(--orange-200);
816
+ }
817
+
818
+ :root {
819
+ /* Bg default state */
820
+ --blue-50: rgb(93.73% 96.47% 100%);
821
+ /* Bg hover state */
822
+ --blue-100: rgb(87.84% 94.12% 100%);
823
+ /* Bg active state */
824
+ --blue-200: rgb(79.22% 90.2% 100%);
825
+ --blue-300: rgb(65.88% 84.71% 100%);
826
+ --blue-400: rgb(0% 58.04% 83.53%);
827
+ /* Text default state */
828
+ --blue-500: rgb(0.44% 28.81% 44.46%);
829
+ /* Text hover state */
830
+ --blue-600: rgb(0% 22.75% 35.29%);
831
+ /* Text active state */
832
+ --blue-700: rgb(0% 12.94% 20%);
833
+ --brand-50: rgb(98.82% 98.43% 99.22%);
834
+ --brand-100: rgb(97.84% 95.68% 100%);
835
+ --brand-200: rgb(94.51% 88.63% 100%);
836
+ /* Default colouring for link text, anything that needs the brand colour */
837
+ --brand-300: rgb(86% 71.53% 100%);
838
+ --brand-400: rgb(74.69% 47.54% 100%);
839
+ /* Default colouring for link text, anything that needs the brand colour */
840
+ --brand-500: rgb(61.3% 23.17% 100%);
841
+ /* hover */
842
+ --brand-600: rgb(47.84% 14.9% 81.18%);
843
+ /* active */
844
+ --brand-700: rgb(36.08% 10.98% 60.78%);
845
+ --brand-800: rgb(29.41% 10.2% 49.02%);
846
+ --slab-control-md-font-family: var(--family-app);
847
+ --slab-control-md-letter-spacing: var(--letter-spacing-200);
848
+ --slab-control-md-line-height: var(--line-height-200);
849
+ --slab-control-md-size: var(--size-200);
850
+ --slab-control-md-weight: var(--weight-control);
851
+ --slab-control-sm-font-family: var(--family-app);
852
+ --slab-control-sm-letter-spacing: var(--letter-spacing-100);
853
+ --slab-control-sm-line-height: var(--line-height-100);
854
+ --slab-control-sm-size: var(--size-100);
855
+ --slab-control-sm-weight: var(--weight-control);
856
+ --slab-gap-inline-lg: 16px;
857
+ --slab-gap-inline-md: 12px;
858
+ --slab-gap-inline-sm: 8px;
859
+ --slab-gap-inline-xl: 24px;
860
+ --slab-gap-inline-xs: 4px;
861
+ --slab-gap-stack-2xl: 32px;
862
+ --slab-gap-stack-3xl: 40px;
863
+ --slab-gap-stack-4xl: 64px;
864
+ --slab-gap-stack-lg: 16px;
865
+ --slab-gap-stack-md: 12px;
866
+ --slab-gap-stack-sm: 8px;
867
+ --slab-gap-stack-xl: 24px;
868
+ --slab-gap-stack-xs: 4px;
869
+ --gray-transparent-0: rgb(100% 100% 100% / 0);
870
+ --gray-transparent-500: rgb(18.82% 18.82% 18.82% / 0.5);
871
+ --gray-warm-0: rgb(100% 100% 100%);
872
+ --gray-warm-50: rgb(98.82% 98.43% 97.25%);
873
+ --gray-warm-100: rgb(95.69% 94.9% 92.55%);
874
+ /* Disabled border */
875
+ --gray-warm-200: rgb(92.55% 91.76% 89.41%);
876
+ --gray-warm-300: rgb(84.71% 83.92% 81.18%);
877
+ /* Icon disabled, inverse text on secondary bg, hover border */
878
+ --gray-warm-400: rgb(72.94% 72.16% 68.63%);
879
+ /* Inactive/disabled text, active border */
880
+ --gray-warm-500: rgb(49.02% 48.24% 45.1%);
881
+ /* Secondary text */
882
+ --gray-warm-600: rgb(37.65% 37.25% 34.51%);
883
+ /* Icon default */
884
+ --gray-warm-700: rgb(27.06% 26.67% 24.71%);
885
+ /* Default text, icon hover */
886
+ --gray-warm-800: rgb(18.43% 18.04% 16.47%);
887
+ --gray-warm-900: rgb(10.98% 10.59% 9.41%);
888
+ --gray-0: rgb(100% 100% 100%);
889
+ --gray-50: rgb(98.04% 98.04% 98.04%);
890
+ --gray-100: rgb(96.08% 96.08% 96.08%);
891
+ /* Disabled border */
892
+ --gray-200: rgb(89.67% 89.67% 89.67%);
893
+ --gray-300: rgb(81.18% 81.18% 81.18%);
894
+ /* Icon disabled, inverse text on secondary bg, hover border */
895
+ --gray-400: rgb(56.86% 56.86% 56.86%);
896
+ /* Inactive/disabled text, active border */
897
+ --gray-500: rgb(43.14% 43.14% 43.14%);
898
+ /* Secondary text */
899
+ --gray-600: rgb(32.16% 32.16% 32.16%);
900
+ /* Icon default */
901
+ --gray-700: rgb(25.88% 25.88% 25.88%);
902
+ /* Default text, icon hover */
903
+ --gray-800: rgb(18.82% 18.82% 18.82%);
904
+ --green-50: rgb(80.39% 99.61% 88.24%);
905
+ --green-100: rgb(70.59% 99.61% 82.35%);
906
+ --green-200: rgb(57.25% 99.61% 76.08%);
907
+ --green-300: rgb(27.72% 79.23% 40.35%);
908
+ --green-400: rgb(16.08% 51.76% 35.29%);
909
+ --green-500: rgb(4.71% 31.76% 19.61%);
910
+ --green-600: rgb(3.14% 23.92% 14.51%);
911
+ --green-700: rgb(3.53% 16.47% 10.59%);
912
+ --slab-header-lg-font-family: var(--family-heading);
913
+ --slab-header-lg-letter-spacing: var(--letter-spacing-600);
914
+ --slab-header-lg-line-height: var(--line-height-600);
915
+ --slab-header-lg-size: var(--size-600);
916
+ --slab-header-lg-weight: var(--weight-regular);
917
+ --slab-header-md-font-family: var(--family-heading);
918
+ --slab-header-md-letter-spacing: var(--letter-spacing-500);
919
+ --slab-header-md-line-height: var(--line-height-500);
920
+ --slab-header-md-size: var(--size-500);
921
+ --slab-header-md-weight: var(--weight-regular);
922
+ --slab-header-sm-font-family: var(--family-heading);
923
+ --slab-header-sm-letter-spacing: var(--letter-spacing-400);
924
+ --slab-header-sm-line-height: var(--line-height-400);
925
+ --slab-header-sm-size: var(--size-400);
926
+ --slab-header-sm-weight: var(--weight-regular);
927
+ --slab-header-xl-font-family: var(--family-heading);
928
+ --slab-header-xl-letter-spacing: var(--letter-spacing-700);
929
+ --slab-header-xl-line-height: var(--line-height-700);
930
+ --slab-header-xl-size: var(--size-700);
931
+ --slab-header-xl-weight: var(--weight-regular);
932
+ --slab-inset-square-lg: 16px;
933
+ --slab-inset-square-md: 8px;
934
+ /* adfsdf */
935
+ --slab-inset-square-sm: 4px;
936
+ --slab-inset-square-xl: 24px;
937
+ --slab-inset-squish-lg: 16px;
938
+ --slab-inset-squish-md: 16px;
939
+ --slab-inset-squish-offset-lg: 0;
940
+ --slab-inset-squish-offset-md: 0;
941
+ --slab-inset-squish-offset-sm: 0;
942
+ --slab-inset-squish-offset-xs: 0;
943
+ --slab-inset-squish-sm: 8px;
944
+ --slab-inset-squish-xs: 4px;
945
+ --slab-mono-lg-font-family: var(--family-mono);
946
+ --slab-mono-lg-letter-spacing: 0;
947
+ --slab-mono-lg-line-height: var(--line-height-300);
948
+ --slab-mono-lg-size: var(--size-300);
949
+ --slab-mono-lg-weight: var(--weight-regular);
950
+ --slab-mono-md-font-family: var(--family-mono);
951
+ --slab-mono-md-letter-spacing: 0;
952
+ --slab-mono-md-line-height: var(--line-height-200);
953
+ --slab-mono-md-size: var(--size-200);
954
+ --slab-mono-md-weight: var(--weight-regular);
955
+ --orange-50: rgb(100% 96.86% 92.94%);
956
+ --orange-100: rgb(100% 92.94% 83.53%);
957
+ --orange-200: rgb(99.61% 84.31% 66.67%);
958
+ --orange-300: rgb(100% 78.43% 47.45%);
959
+ --orange-400: rgb(69.8% 45.37% 0%);
960
+ --orange-500: rgb(43.47% 30.52% 0%);
961
+ --orange-600: rgb(31.93% 22.1% 0%);
962
+ --orange-700: rgb(14.51% 10.2% 0%);
963
+ --slab-radius-control: 4px;
964
+ --slab-radius-full: 99999px;
965
+ --slab-radius-lg: 20px;
966
+ --slab-radius-md: 12px;
967
+ --slab-radius-sm: 8px;
968
+ --slab-radius-xl: 28px;
969
+ --red-50: rgb(99.65% 93.45% 94.3%);
970
+ --red-100: rgb(98.39% 87.15% 87.15%);
971
+ --red-200: rgb(100% 75.44% 75.44%);
972
+ --red-300: rgb(97.75% 56.11% 56.11%);
973
+ --red-400: rgb(92.5% 22.18% 22.18%);
974
+ --red-500: rgb(71.22% 9.04% 9.04%);
975
+ --red-600: rgb(49.8% 11.37% 11.37%);
976
+ --red-700: rgb(27.06% 3.92% 3.92%);
977
+ --size-0px: 0;
978
+ --size-2px: 0.125rem;
979
+ --size-4px: 0.25rem;
980
+ --size-8px: 0.5rem;
981
+ --size-12px: 0.75rem;
982
+ --size-16px: 1rem;
983
+ --size-24px: 1.5rem;
984
+ --size-32px: 2rem;
985
+ --size-40px: 2.5rem;
986
+ --size-48px: 3rem;
987
+ --size-64px: 4rem;
988
+ --size-96px: 6rem;
989
+ --size-128px: 8rem;
990
+ --slate-50: rgb(95.03% 96.27% 97.52%);
991
+ --slate-100: rgb(88.63% 90.98% 94.12%);
992
+ --slate-200: rgb(79.61% 83.53% 88.24%);
993
+ --slate-300: rgb(58.04% 63.92% 72.16%);
994
+ --slate-400: rgb(39.22% 45.49% 54.51%);
995
+ --slate-500: rgb(27.84% 33.33% 41.18%);
996
+ --slate-600: rgb(20% 25.49% 33.33%);
997
+ --slate-700: rgb(11.76% 16.08% 23.14%);
998
+ --slab-stroke-border: 1px;
999
+ --slab-stroke-focus: 1px;
1000
+ /* Large bg fill for anything AI generated */
1001
+ --violet-50: rgb(97.25% 96.86% 100%);
1002
+ /* Large bg hover for anything AI generated */
1003
+ --violet-100: rgb(95.02% 94.19% 100%);
1004
+ /* Large bg active for anything AI generated */
1005
+ --violet-200: rgb(90.38% 88.63% 100%);
1006
+ /* Border colour and secondary hover for anything AI generated */
1007
+ --violet-300: rgb(79.81% 75.32% 100%);
1008
+ /* Icon colours and small bg for anything AI generated */
1009
+ --violet-400: rgb(50.2% 31.76% 100%);
1010
+ /* Text colours for anything AI generated */
1011
+ --violet-500: rgb(34.12% 0% 81.96%);
1012
+ --violet-600: rgb(29.8% 11.37% 58.43%);
1013
+ --violet-700: rgb(18.04% 6.27% 39.61%);
1014
+ --yellow-50: rgb(100% 99.22% 92.94%);
1015
+ --yellow-100: rgb(100% 96.86% 72.16%);
1016
+ --yellow-200: rgb(100% 93.33% 60.78%);
1017
+ --yellow-300: rgb(97.25% 84.31% 0%);
1018
+ --yellow-400: rgb(66.67% 57.25% 0.39%);
1019
+ /* caution default text */
1020
+ --yellow-500: rgb(30.98% 27.84% 0%);
1021
+ /* caution hover text */
1022
+ --yellow-600: rgb(20% 18.04% 0%);
1023
+ /* caution active text */
1024
+ --yellow-700: rgb(12.16% 10.98% 0%);
1025
+ }