@thatch-health/slab-tokens 0.0.2 → 0.0.4

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.
@@ -0,0 +1,1885 @@
1
+ /* Autogenerated by Terrazzo — DO NOT EDIT */
2
+
3
+ @utility bg-action-disabled-ghost {
4
+ background: var(--slab-action-disabled-ghost-bg);
5
+ }
6
+
7
+ @utility bg-action-disabled-primary {
8
+ background: var(--slab-action-disabled-primary-bg);
9
+ }
10
+
11
+ @utility bg-action-disabled-secondary {
12
+ background: var(--slab-action-disabled-secondary-bg);
13
+ }
14
+
15
+ @utility bg-action-disabled-tertiary {
16
+ background: var(--slab-action-disabled-tertiary-bg);
17
+ }
18
+
19
+ @utility bg-action-ghost {
20
+ background: var(--slab-action-ghost-bg);
21
+ }
22
+
23
+ @utility bg-action-hover-ghost {
24
+ background: var(--slab-action-hover-ghost-bg);
25
+ }
26
+
27
+ @utility bg-action-hover-primary {
28
+ background: var(--slab-action-hover-primary-bg);
29
+ }
30
+
31
+ @utility bg-action-hover-secondary {
32
+ background: var(--slab-action-hover-secondary-bg);
33
+ }
34
+
35
+ @utility bg-action-hover-tertiary {
36
+ background: var(--slab-action-hover-tertiary-bg);
37
+ }
38
+
39
+ @utility bg-action-primary {
40
+ background: var(--slab-action-primary-bg);
41
+ }
42
+
43
+ @utility bg-action-secondary {
44
+ background: var(--slab-action-secondary-bg);
45
+ }
46
+
47
+ @utility bg-action-tertiary {
48
+ background: var(--slab-action-tertiary-bg);
49
+ }
50
+
51
+ @utility bg-form-active-primary {
52
+ background: var(--slab-form-active-primary-bg);
53
+ }
54
+
55
+ @utility bg-form-disabled-primary {
56
+ background: var(--slab-form-disabled-primary-bg);
57
+ }
58
+
59
+ @utility bg-form-primary {
60
+ background: var(--slab-form-primary-bg);
61
+ }
62
+
63
+ @utility bg-surface-primary {
64
+ background: var(--slab-surface-primary-bg);
65
+ }
66
+
67
+ @utility bg-surface-secondary {
68
+ background: var(--slab-surface-secondary-bg);
69
+ }
70
+
71
+ @utility bg-surface-tertiary {
72
+ background: var(--slab-surface-tertiary-bg);
73
+ }
74
+
75
+ @utility border-action-disabled-primary {
76
+ borderColor: var(--slab-action-disabled-primary-border);
77
+ }
78
+
79
+ @utility border-action-disabled-secondary {
80
+ borderColor: var(--slab-action-disabled-secondary-border);
81
+ }
82
+
83
+ @utility border-action-hover-primary {
84
+ borderColor: var(--slab-action-hover-primary-border);
85
+ }
86
+
87
+ @utility border-action-hover-secondary {
88
+ borderColor: var(--slab-action-hover-secondary-border);
89
+ }
90
+
91
+ @utility border-action-primary {
92
+ borderColor: var(--slab-action-primary-border);
93
+ }
94
+
95
+ @utility border-action-secondary {
96
+ borderColor: var(--slab-action-secondary-border);
97
+ }
98
+
99
+ @utility border-b-stroke {
100
+ border-bottom-width: var(--slab-stroke-border);
101
+ }
102
+
103
+ @utility border-b-stroke-focus {
104
+ border-bottom-width: var(--slab-stroke-focus);
105
+ }
106
+
107
+ @utility border-form-active-primary {
108
+ borderColor: var(--slab-form-active-primary-border);
109
+ }
110
+
111
+ @utility border-form-disabled-primary {
112
+ borderColor: var(--slab-form-disabled-primary-border);
113
+ }
114
+
115
+ @utility border-form-primary {
116
+ borderColor: var(--slab-form-primary-border);
117
+ }
118
+
119
+ @utility border-l-stroke {
120
+ border-left-width: var(--slab-stroke-border);
121
+ }
122
+
123
+ @utility border-l-stroke-focus {
124
+ border-left-width: var(--slab-stroke-focus);
125
+ }
126
+
127
+ @utility border-r-stroke {
128
+ border-right-width: var(--slab-stroke-border);
129
+ }
130
+
131
+ @utility border-r-stroke-focus {
132
+ border-right-width: var(--slab-stroke-focus);
133
+ }
134
+
135
+ @utility border-stroke {
136
+ borderWidth: var(--slab-stroke-border);
137
+ }
138
+
139
+ @utility border-stroke-focus {
140
+ borderWidth: var(--slab-stroke-focus);
141
+ }
142
+
143
+ @utility border-surface-primary {
144
+ borderColor: var(--slab-surface-primary-border);
145
+ }
146
+
147
+ @utility border-surface-secondary {
148
+ borderColor: var(--slab-surface-secondary-border);
149
+ }
150
+
151
+ @utility border-t-stroke {
152
+ border-top-width: var(--slab-stroke-border);
153
+ }
154
+
155
+ @utility border-t-stroke-focus {
156
+ border-top-width: var(--slab-stroke-focus);
157
+ }
158
+
159
+ @utility border-x-stroke {
160
+ border-right-width: var(--slab-stroke-border);
161
+ border-left-width: var(--slab-stroke-border);
162
+ }
163
+
164
+ @utility border-x-stroke-focus {
165
+ border-right-width: var(--slab-stroke-focus);
166
+ border-left-width: var(--slab-stroke-focus);
167
+ }
168
+
169
+ @utility border-y-stroke {
170
+ border-bottom-width: var(--slab-stroke-border);
171
+ border-top-width: var(--slab-stroke-border);
172
+ }
173
+
174
+ @utility border-y-stroke-focus {
175
+ border-bottom-width: var(--slab-stroke-focus);
176
+ border-top-width: var(--slab-stroke-focus);
177
+ }
178
+
179
+ @utility font-body-lg {
180
+ font-family: var(--slab-body-lg-default-font-family);
181
+ }
182
+
183
+ @utility font-body-lg-strong {
184
+ font-family: var(--slab-body-lg-strong-font-family);
185
+ }
186
+
187
+ @utility font-body-md {
188
+ font-family: var(--slab-body-md-default-font-family);
189
+ }
190
+
191
+ @utility font-body-md-strong {
192
+ font-family: var(--slab-body-md-strong-font-family);
193
+ }
194
+
195
+ @utility font-body-sm {
196
+ font-family: var(--slab-body-sm-default-font-family);
197
+ }
198
+
199
+ @utility font-body-sm-strong {
200
+ font-family: var(--slab-body-sm-strong-font-family);
201
+ }
202
+
203
+ @utility font-control-md {
204
+ font-family: var(--slab-control-md-font-family);
205
+ }
206
+
207
+ @utility font-control-sm {
208
+ font-family: var(--slab-control-sm-font-family);
209
+ }
210
+
211
+ @utility font-display-lg {
212
+ font-family: var(--slab-display-lg-font-family);
213
+ }
214
+
215
+ @utility font-display-md {
216
+ font-family: var(--slab-display-md-font-family);
217
+ }
218
+
219
+ @utility font-display-sm {
220
+ font-family: var(--slab-display-sm-font-family);
221
+ }
222
+
223
+ @utility font-header-lg {
224
+ font-family: var(--slab-header-lg-font-family);
225
+ }
226
+
227
+ @utility font-header-md {
228
+ font-family: var(--slab-header-md-font-family);
229
+ }
230
+
231
+ @utility font-header-sm {
232
+ font-family: var(--slab-header-sm-font-family);
233
+ }
234
+
235
+ @utility font-header-xl {
236
+ font-family: var(--slab-header-xl-font-family);
237
+ }
238
+
239
+ @utility font-mono-lg {
240
+ font-family: var(--slab-mono-lg-font-family);
241
+ }
242
+
243
+ @utility font-mono-md {
244
+ font-family: var(--slab-mono-md-font-family);
245
+ }
246
+
247
+ @utility font-weight-body-lg {
248
+ font-weight: var(--slab-body-lg-default-weight);
249
+ }
250
+
251
+ @utility font-weight-body-lg-strong {
252
+ font-weight: var(--slab-body-lg-strong-weight);
253
+ }
254
+
255
+ @utility font-weight-body-md {
256
+ font-weight: var(--slab-body-md-default-weight);
257
+ }
258
+
259
+ @utility font-weight-body-md-strong {
260
+ font-weight: var(--slab-body-md-strong-weight);
261
+ }
262
+
263
+ @utility font-weight-body-sm {
264
+ font-weight: var(--slab-body-sm-default-weight);
265
+ }
266
+
267
+ @utility font-weight-body-sm-strong {
268
+ font-weight: var(--slab-body-sm-strong-weight);
269
+ }
270
+
271
+ @utility font-weight-control-md {
272
+ font-weight: var(--slab-control-md-weight);
273
+ }
274
+
275
+ @utility font-weight-control-sm {
276
+ font-weight: var(--slab-control-sm-weight);
277
+ }
278
+
279
+ @utility font-weight-display-lg {
280
+ font-weight: var(--slab-display-lg-weight);
281
+ }
282
+
283
+ @utility font-weight-display-md {
284
+ font-weight: var(--slab-display-md-weight);
285
+ }
286
+
287
+ @utility font-weight-display-sm {
288
+ font-weight: var(--slab-display-sm-weight);
289
+ }
290
+
291
+ @utility font-weight-header-lg {
292
+ font-weight: var(--slab-header-lg-weight);
293
+ }
294
+
295
+ @utility font-weight-header-md {
296
+ font-weight: var(--slab-header-md-weight);
297
+ }
298
+
299
+ @utility font-weight-header-sm {
300
+ font-weight: var(--slab-header-sm-weight);
301
+ }
302
+
303
+ @utility font-weight-header-xl {
304
+ font-weight: var(--slab-header-xl-weight);
305
+ }
306
+
307
+ @utility font-weight-mono-lg {
308
+ font-weight: var(--slab-mono-lg-weight);
309
+ }
310
+
311
+ @utility font-weight-mono-md {
312
+ font-weight: var(--slab-mono-md-weight);
313
+ }
314
+
315
+ @utility from-action-disabled-primary {
316
+ --tw-gradient-from: var(--slab-action-disabled-primary-bg-start);
317
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
318
+ }
319
+
320
+ @utility from-action-disabled-secondary {
321
+ --tw-gradient-from: var(--slab-action-disabled-secondary-bg-start);
322
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
323
+ }
324
+
325
+ @utility from-action-hover-primary {
326
+ --tw-gradient-from: var(--slab-action-hover-primary-bg-start);
327
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
328
+ }
329
+
330
+ @utility from-action-hover-secondary {
331
+ --tw-gradient-from: var(--slab-action-hover-secondary-bg-start);
332
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
333
+ }
334
+
335
+ @utility from-action-primary {
336
+ --tw-gradient-from: var(--slab-action-primary-bg-start);
337
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
338
+ }
339
+
340
+ @utility from-action-secondary {
341
+ --tw-gradient-from: var(--slab-action-secondary-bg-start);
342
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
343
+ }
344
+
345
+ @utility gap-inline-lg {
346
+ gap: var(--slab-gap-inline-lg);
347
+ }
348
+
349
+ @utility gap-inline-md {
350
+ gap: var(--slab-gap-inline-md);
351
+ }
352
+
353
+ @utility gap-inline-sm {
354
+ gap: var(--slab-gap-inline-sm);
355
+ }
356
+
357
+ @utility gap-inline-xl {
358
+ gap: var(--slab-gap-inline-xl);
359
+ }
360
+
361
+ @utility gap-inline-xs {
362
+ gap: var(--slab-gap-inline-xs);
363
+ }
364
+
365
+ @utility gap-stack-2xl {
366
+ gap: var(--slab-gap-stack-2xl);
367
+ }
368
+
369
+ @utility gap-stack-3xl {
370
+ gap: var(--slab-gap-stack-3xl);
371
+ }
372
+
373
+ @utility gap-stack-4xl {
374
+ gap: var(--slab-gap-stack-4xl);
375
+ }
376
+
377
+ @utility gap-stack-lg {
378
+ gap: var(--slab-gap-stack-lg);
379
+ }
380
+
381
+ @utility gap-stack-md {
382
+ gap: var(--slab-gap-stack-md);
383
+ }
384
+
385
+ @utility gap-stack-sm {
386
+ gap: var(--slab-gap-stack-sm);
387
+ }
388
+
389
+ @utility gap-stack-xl {
390
+ gap: var(--slab-gap-stack-xl);
391
+ }
392
+
393
+ @utility gap-stack-xs {
394
+ gap: var(--slab-gap-stack-xs);
395
+ }
396
+
397
+ @utility gap-x-lg {
398
+ column-gap: var(--slab-gap-inline-lg);
399
+ }
400
+
401
+ @utility gap-x-md {
402
+ column-gap: var(--slab-gap-inline-md);
403
+ }
404
+
405
+ @utility gap-x-sm {
406
+ column-gap: var(--slab-gap-inline-sm);
407
+ }
408
+
409
+ @utility gap-x-xl {
410
+ column-gap: var(--slab-gap-inline-xl);
411
+ }
412
+
413
+ @utility gap-x-xs {
414
+ column-gap: var(--slab-gap-inline-xs);
415
+ }
416
+
417
+ @utility gap-y-2xl {
418
+ row-gap: var(--slab-gap-stack-2xl);
419
+ }
420
+
421
+ @utility gap-y-3xl {
422
+ row-gap: var(--slab-gap-stack-3xl);
423
+ }
424
+
425
+ @utility gap-y-4xl {
426
+ row-gap: var(--slab-gap-stack-4xl);
427
+ }
428
+
429
+ @utility gap-y-lg {
430
+ row-gap: var(--slab-gap-stack-lg);
431
+ }
432
+
433
+ @utility gap-y-md {
434
+ row-gap: var(--slab-gap-stack-md);
435
+ }
436
+
437
+ @utility gap-y-sm {
438
+ row-gap: var(--slab-gap-stack-sm);
439
+ }
440
+
441
+ @utility gap-y-xl {
442
+ row-gap: var(--slab-gap-stack-xl);
443
+ }
444
+
445
+ @utility gap-y-xs {
446
+ row-gap: var(--slab-gap-stack-xs);
447
+ }
448
+
449
+ @utility h-size-icon-inner-lg {
450
+ height: var(--slab-size-icon-inner-lg);
451
+ }
452
+
453
+ @utility h-size-icon-inner-md {
454
+ height: var(--slab-size-icon-inner-md);
455
+ }
456
+
457
+ @utility h-size-icon-inner-sm {
458
+ height: var(--slab-size-icon-inner-sm);
459
+ }
460
+
461
+ @utility h-size-icon-outer-lg {
462
+ height: var(--slab-size-icon-outer-lg);
463
+ }
464
+
465
+ @utility h-size-icon-outer-md {
466
+ height: var(--slab-size-icon-outer-md);
467
+ }
468
+
469
+ @utility h-size-icon-outer-sm {
470
+ height: var(--slab-size-icon-outer-sm);
471
+ }
472
+
473
+ @utility h-size-lg {
474
+ height: var(--slab-size-lg);
475
+ }
476
+
477
+ @utility h-size-md {
478
+ height: var(--slab-size-md);
479
+ }
480
+
481
+ @utility h-size-sm {
482
+ height: var(--slab-size-sm);
483
+ }
484
+
485
+ @utility h-size-xs {
486
+ height: var(--slab-size-xs);
487
+ }
488
+
489
+ @utility icon-action-disabled-ghost {
490
+ color: var(--slab-action-disabled-ghost-icon);
491
+ }
492
+
493
+ @utility icon-action-disabled-primary {
494
+ color: var(--slab-action-disabled-primary-icon);
495
+ }
496
+
497
+ @utility icon-action-disabled-secondary {
498
+ color: var(--slab-action-disabled-secondary-icon);
499
+ }
500
+
501
+ @utility icon-action-disabled-tertiary {
502
+ color: var(--slab-action-disabled-tertiary-icon);
503
+ }
504
+
505
+ @utility icon-action-ghost {
506
+ color: var(--slab-action-ghost-icon);
507
+ }
508
+
509
+ @utility icon-action-hover-ghost {
510
+ color: var(--slab-action-hover-ghost-icon);
511
+ }
512
+
513
+ @utility icon-action-hover-primary {
514
+ color: var(--slab-action-hover-primary-icon);
515
+ }
516
+
517
+ @utility icon-action-hover-secondary {
518
+ color: var(--slab-action-hover-secondary-icon);
519
+ }
520
+
521
+ @utility icon-action-hover-tertiary {
522
+ color: var(--slab-action-hover-tertiary-icon);
523
+ }
524
+
525
+ @utility icon-action-primary {
526
+ color: var(--slab-action-primary-icon);
527
+ }
528
+
529
+ @utility icon-action-secondary {
530
+ color: var(--slab-action-secondary-icon);
531
+ }
532
+
533
+ @utility icon-action-tertiary {
534
+ color: var(--slab-action-tertiary-icon);
535
+ }
536
+
537
+ @utility icon-form-active-primary {
538
+ color: var(--slab-form-active-primary-icon);
539
+ }
540
+
541
+ @utility icon-form-disabled-primary {
542
+ color: var(--slab-form-disabled-primary-icon);
543
+ }
544
+
545
+ @utility icon-form-primary {
546
+ color: var(--slab-form-primary-icon);
547
+ }
548
+
549
+ @utility icon-surface-primary {
550
+ color: var(--slab-surface-primary-icon);
551
+ }
552
+
553
+ @utility icon-surface-secondary {
554
+ color: var(--slab-surface-secondary-icon);
555
+ }
556
+
557
+ @utility leading-body-lg {
558
+ line-height: var(--slab-body-lg-default-line-height);
559
+ }
560
+
561
+ @utility leading-body-lg-strong {
562
+ line-height: var(--slab-body-lg-strong-line-height);
563
+ }
564
+
565
+ @utility leading-body-md {
566
+ line-height: var(--slab-body-md-default-line-height);
567
+ }
568
+
569
+ @utility leading-body-md-strong {
570
+ line-height: var(--slab-body-md-strong-line-height);
571
+ }
572
+
573
+ @utility leading-body-sm {
574
+ line-height: var(--slab-body-sm-default-line-height);
575
+ }
576
+
577
+ @utility leading-body-sm-strong {
578
+ line-height: var(--slab-body-sm-strong-line-height);
579
+ }
580
+
581
+ @utility leading-control-md {
582
+ line-height: var(--slab-control-md-line-height);
583
+ }
584
+
585
+ @utility leading-control-sm {
586
+ line-height: var(--slab-control-sm-line-height);
587
+ }
588
+
589
+ @utility leading-display-lg {
590
+ line-height: var(--slab-display-lg-line-height);
591
+ }
592
+
593
+ @utility leading-display-md {
594
+ line-height: var(--slab-display-md-line-height);
595
+ }
596
+
597
+ @utility leading-display-sm {
598
+ line-height: var(--slab-display-sm-line-height);
599
+ }
600
+
601
+ @utility leading-header-lg {
602
+ line-height: var(--slab-header-lg-line-height);
603
+ }
604
+
605
+ @utility leading-header-md {
606
+ line-height: var(--slab-header-md-line-height);
607
+ }
608
+
609
+ @utility leading-header-sm {
610
+ line-height: var(--slab-header-sm-line-height);
611
+ }
612
+
613
+ @utility leading-header-xl {
614
+ line-height: var(--slab-header-xl-line-height);
615
+ }
616
+
617
+ @utility leading-mono-lg {
618
+ line-height: var(--slab-mono-lg-line-height);
619
+ }
620
+
621
+ @utility leading-mono-md {
622
+ line-height: var(--slab-mono-md-line-height);
623
+ }
624
+
625
+ @utility m-inset-square-lg {
626
+ margin: var(--slab-inset-square-lg);
627
+ }
628
+
629
+ @utility m-inset-square-md {
630
+ margin: var(--slab-inset-square-md);
631
+ }
632
+
633
+ @utility m-inset-square-sm {
634
+ margin: var(--slab-inset-square-sm);
635
+ }
636
+
637
+ @utility m-inset-square-xl {
638
+ margin: var(--slab-inset-square-xl);
639
+ }
640
+
641
+ @utility m-inset-squish-lg {
642
+ margin: var(--slab-inset-squish-lg);
643
+ }
644
+
645
+ @utility m-inset-squish-md {
646
+ margin: var(--slab-inset-squish-md);
647
+ }
648
+
649
+ @utility m-inset-squish-offset-lg {
650
+ margin: var(--slab-inset-squish-offset-lg);
651
+ }
652
+
653
+ @utility m-inset-squish-offset-md {
654
+ margin: var(--slab-inset-squish-offset-md);
655
+ }
656
+
657
+ @utility m-inset-squish-offset-sm {
658
+ margin: var(--slab-inset-squish-offset-sm);
659
+ }
660
+
661
+ @utility m-inset-squish-offset-xs {
662
+ margin: var(--slab-inset-squish-offset-xs);
663
+ }
664
+
665
+ @utility m-inset-squish-sm {
666
+ margin: var(--slab-inset-squish-sm);
667
+ }
668
+
669
+ @utility m-inset-squish-xs {
670
+ margin: var(--slab-inset-squish-xs);
671
+ }
672
+
673
+ @utility mb-inset-square-lg {
674
+ margin-bottom: var(--slab-inset-square-lg);
675
+ }
676
+
677
+ @utility mb-inset-square-md {
678
+ margin-bottom: var(--slab-inset-square-md);
679
+ }
680
+
681
+ @utility mb-inset-square-sm {
682
+ margin-bottom: var(--slab-inset-square-sm);
683
+ }
684
+
685
+ @utility mb-inset-square-xl {
686
+ margin-bottom: var(--slab-inset-square-xl);
687
+ }
688
+
689
+ @utility mb-inset-squish-lg {
690
+ margin-bottom: var(--slab-inset-squish-lg);
691
+ }
692
+
693
+ @utility mb-inset-squish-md {
694
+ margin-bottom: var(--slab-inset-squish-md);
695
+ }
696
+
697
+ @utility mb-inset-squish-offset-lg {
698
+ margin-bottom: var(--slab-inset-squish-offset-lg);
699
+ }
700
+
701
+ @utility mb-inset-squish-offset-md {
702
+ margin-bottom: var(--slab-inset-squish-offset-md);
703
+ }
704
+
705
+ @utility mb-inset-squish-offset-sm {
706
+ margin-bottom: var(--slab-inset-squish-offset-sm);
707
+ }
708
+
709
+ @utility mb-inset-squish-offset-xs {
710
+ margin-bottom: var(--slab-inset-squish-offset-xs);
711
+ }
712
+
713
+ @utility mb-inset-squish-sm {
714
+ margin-bottom: var(--slab-inset-squish-sm);
715
+ }
716
+
717
+ @utility mb-inset-squish-xs {
718
+ margin-bottom: var(--slab-inset-squish-xs);
719
+ }
720
+
721
+ @utility min-h-size-icon-inner-lg {
722
+ min-height: var(--slab-size-icon-inner-lg);
723
+ }
724
+
725
+ @utility min-h-size-icon-inner-md {
726
+ min-height: var(--slab-size-icon-inner-md);
727
+ }
728
+
729
+ @utility min-h-size-icon-inner-sm {
730
+ min-height: var(--slab-size-icon-inner-sm);
731
+ }
732
+
733
+ @utility min-h-size-icon-outer-lg {
734
+ min-height: var(--slab-size-icon-outer-lg);
735
+ }
736
+
737
+ @utility min-h-size-icon-outer-md {
738
+ min-height: var(--slab-size-icon-outer-md);
739
+ }
740
+
741
+ @utility min-h-size-icon-outer-sm {
742
+ min-height: var(--slab-size-icon-outer-sm);
743
+ }
744
+
745
+ @utility min-h-size-lg {
746
+ min-height: var(--slab-size-lg);
747
+ }
748
+
749
+ @utility min-h-size-md {
750
+ min-height: var(--slab-size-md);
751
+ }
752
+
753
+ @utility min-h-size-sm {
754
+ min-height: var(--slab-size-sm);
755
+ }
756
+
757
+ @utility min-h-size-xs {
758
+ min-height: var(--slab-size-xs);
759
+ }
760
+
761
+ @utility min-w-size-icon-inner-lg {
762
+ min-width: var(--slab-size-icon-inner-lg);
763
+ }
764
+
765
+ @utility min-w-size-icon-inner-md {
766
+ min-width: var(--slab-size-icon-inner-md);
767
+ }
768
+
769
+ @utility min-w-size-icon-inner-sm {
770
+ min-width: var(--slab-size-icon-inner-sm);
771
+ }
772
+
773
+ @utility min-w-size-icon-outer-lg {
774
+ min-width: var(--slab-size-icon-outer-lg);
775
+ }
776
+
777
+ @utility min-w-size-icon-outer-md {
778
+ min-width: var(--slab-size-icon-outer-md);
779
+ }
780
+
781
+ @utility min-w-size-icon-outer-sm {
782
+ min-width: var(--slab-size-icon-outer-sm);
783
+ }
784
+
785
+ @utility min-w-size-lg {
786
+ min-width: var(--slab-size-lg);
787
+ }
788
+
789
+ @utility min-w-size-md {
790
+ min-width: var(--slab-size-md);
791
+ }
792
+
793
+ @utility min-w-size-sm {
794
+ min-width: var(--slab-size-sm);
795
+ }
796
+
797
+ @utility min-w-size-xs {
798
+ min-width: var(--slab-size-xs);
799
+ }
800
+
801
+ @utility ml-inset-square-lg {
802
+ margin-left: var(--slab-inset-square-lg);
803
+ }
804
+
805
+ @utility ml-inset-square-md {
806
+ margin-left: var(--slab-inset-square-md);
807
+ }
808
+
809
+ @utility ml-inset-square-sm {
810
+ margin-left: var(--slab-inset-square-sm);
811
+ }
812
+
813
+ @utility ml-inset-square-xl {
814
+ margin-left: var(--slab-inset-square-xl);
815
+ }
816
+
817
+ @utility ml-inset-squish-lg {
818
+ margin-left: var(--slab-inset-squish-lg);
819
+ }
820
+
821
+ @utility ml-inset-squish-md {
822
+ margin-left: var(--slab-inset-squish-md);
823
+ }
824
+
825
+ @utility ml-inset-squish-offset-lg {
826
+ margin-left: var(--slab-inset-squish-offset-lg);
827
+ }
828
+
829
+ @utility ml-inset-squish-offset-md {
830
+ margin-left: var(--slab-inset-squish-offset-md);
831
+ }
832
+
833
+ @utility ml-inset-squish-offset-sm {
834
+ margin-left: var(--slab-inset-squish-offset-sm);
835
+ }
836
+
837
+ @utility ml-inset-squish-offset-xs {
838
+ margin-left: var(--slab-inset-squish-offset-xs);
839
+ }
840
+
841
+ @utility ml-inset-squish-sm {
842
+ margin-left: var(--slab-inset-squish-sm);
843
+ }
844
+
845
+ @utility ml-inset-squish-xs {
846
+ margin-left: var(--slab-inset-squish-xs);
847
+ }
848
+
849
+ @utility mr-inset-square-lg {
850
+ margin-right: var(--slab-inset-square-lg);
851
+ }
852
+
853
+ @utility mr-inset-square-md {
854
+ margin-right: var(--slab-inset-square-md);
855
+ }
856
+
857
+ @utility mr-inset-square-sm {
858
+ margin-right: var(--slab-inset-square-sm);
859
+ }
860
+
861
+ @utility mr-inset-square-xl {
862
+ margin-right: var(--slab-inset-square-xl);
863
+ }
864
+
865
+ @utility mr-inset-squish-lg {
866
+ margin-right: var(--slab-inset-squish-lg);
867
+ }
868
+
869
+ @utility mr-inset-squish-md {
870
+ margin-right: var(--slab-inset-squish-md);
871
+ }
872
+
873
+ @utility mr-inset-squish-offset-lg {
874
+ margin-right: var(--slab-inset-squish-offset-lg);
875
+ }
876
+
877
+ @utility mr-inset-squish-offset-md {
878
+ margin-right: var(--slab-inset-squish-offset-md);
879
+ }
880
+
881
+ @utility mr-inset-squish-offset-sm {
882
+ margin-right: var(--slab-inset-squish-offset-sm);
883
+ }
884
+
885
+ @utility mr-inset-squish-offset-xs {
886
+ margin-right: var(--slab-inset-squish-offset-xs);
887
+ }
888
+
889
+ @utility mr-inset-squish-sm {
890
+ margin-right: var(--slab-inset-squish-sm);
891
+ }
892
+
893
+ @utility mr-inset-squish-xs {
894
+ margin-right: var(--slab-inset-squish-xs);
895
+ }
896
+
897
+ @utility mt-inset-square-lg {
898
+ margin-top: var(--slab-inset-square-lg);
899
+ }
900
+
901
+ @utility mt-inset-square-md {
902
+ margin-top: var(--slab-inset-square-md);
903
+ }
904
+
905
+ @utility mt-inset-square-sm {
906
+ margin-top: var(--slab-inset-square-sm);
907
+ }
908
+
909
+ @utility mt-inset-square-xl {
910
+ margin-top: var(--slab-inset-square-xl);
911
+ }
912
+
913
+ @utility mt-inset-squish-lg {
914
+ margin-top: var(--slab-inset-squish-lg);
915
+ }
916
+
917
+ @utility mt-inset-squish-md {
918
+ margin-top: var(--slab-inset-squish-md);
919
+ }
920
+
921
+ @utility mt-inset-squish-offset-lg {
922
+ margin-top: var(--slab-inset-squish-offset-lg);
923
+ }
924
+
925
+ @utility mt-inset-squish-offset-md {
926
+ margin-top: var(--slab-inset-squish-offset-md);
927
+ }
928
+
929
+ @utility mt-inset-squish-offset-sm {
930
+ margin-top: var(--slab-inset-squish-offset-sm);
931
+ }
932
+
933
+ @utility mt-inset-squish-offset-xs {
934
+ margin-top: var(--slab-inset-squish-offset-xs);
935
+ }
936
+
937
+ @utility mt-inset-squish-sm {
938
+ margin-top: var(--slab-inset-squish-sm);
939
+ }
940
+
941
+ @utility mt-inset-squish-xs {
942
+ margin-top: var(--slab-inset-squish-xs);
943
+ }
944
+
945
+ @utility mx-inset-square-lg {
946
+ margin-right: var(--slab-inset-square-lg);
947
+ margin-left: var(--slab-inset-square-lg);
948
+ }
949
+
950
+ @utility mx-inset-square-md {
951
+ margin-right: var(--slab-inset-square-md);
952
+ margin-left: var(--slab-inset-square-md);
953
+ }
954
+
955
+ @utility mx-inset-square-sm {
956
+ margin-right: var(--slab-inset-square-sm);
957
+ margin-left: var(--slab-inset-square-sm);
958
+ }
959
+
960
+ @utility mx-inset-square-xl {
961
+ margin-right: var(--slab-inset-square-xl);
962
+ margin-left: var(--slab-inset-square-xl);
963
+ }
964
+
965
+ @utility mx-inset-squish-lg {
966
+ margin-right: var(--slab-inset-squish-lg);
967
+ margin-left: var(--slab-inset-squish-lg);
968
+ }
969
+
970
+ @utility mx-inset-squish-md {
971
+ margin-right: var(--slab-inset-squish-md);
972
+ margin-left: var(--slab-inset-squish-md);
973
+ }
974
+
975
+ @utility mx-inset-squish-offset-lg {
976
+ margin-right: var(--slab-inset-squish-offset-lg);
977
+ margin-left: var(--slab-inset-squish-offset-lg);
978
+ }
979
+
980
+ @utility mx-inset-squish-offset-md {
981
+ margin-right: var(--slab-inset-squish-offset-md);
982
+ margin-left: var(--slab-inset-squish-offset-md);
983
+ }
984
+
985
+ @utility mx-inset-squish-offset-sm {
986
+ margin-right: var(--slab-inset-squish-offset-sm);
987
+ margin-left: var(--slab-inset-squish-offset-sm);
988
+ }
989
+
990
+ @utility mx-inset-squish-offset-xs {
991
+ margin-right: var(--slab-inset-squish-offset-xs);
992
+ margin-left: var(--slab-inset-squish-offset-xs);
993
+ }
994
+
995
+ @utility mx-inset-squish-sm {
996
+ margin-right: var(--slab-inset-squish-sm);
997
+ margin-left: var(--slab-inset-squish-sm);
998
+ }
999
+
1000
+ @utility mx-inset-squish-xs {
1001
+ margin-right: var(--slab-inset-squish-xs);
1002
+ margin-left: var(--slab-inset-squish-xs);
1003
+ }
1004
+
1005
+ @utility my-inset-square-lg {
1006
+ margin-bottom: var(--slab-inset-square-lg);
1007
+ margin-top: var(--slab-inset-square-lg);
1008
+ }
1009
+
1010
+ @utility my-inset-square-md {
1011
+ margin-bottom: var(--slab-inset-square-md);
1012
+ margin-top: var(--slab-inset-square-md);
1013
+ }
1014
+
1015
+ @utility my-inset-square-sm {
1016
+ margin-bottom: var(--slab-inset-square-sm);
1017
+ margin-top: var(--slab-inset-square-sm);
1018
+ }
1019
+
1020
+ @utility my-inset-square-xl {
1021
+ margin-bottom: var(--slab-inset-square-xl);
1022
+ margin-top: var(--slab-inset-square-xl);
1023
+ }
1024
+
1025
+ @utility my-inset-squish-lg {
1026
+ margin-bottom: var(--slab-inset-squish-lg);
1027
+ margin-top: var(--slab-inset-squish-lg);
1028
+ }
1029
+
1030
+ @utility my-inset-squish-md {
1031
+ margin-bottom: var(--slab-inset-squish-md);
1032
+ margin-top: var(--slab-inset-squish-md);
1033
+ }
1034
+
1035
+ @utility my-inset-squish-offset-lg {
1036
+ margin-bottom: var(--slab-inset-squish-offset-lg);
1037
+ margin-top: var(--slab-inset-squish-offset-lg);
1038
+ }
1039
+
1040
+ @utility my-inset-squish-offset-md {
1041
+ margin-bottom: var(--slab-inset-squish-offset-md);
1042
+ margin-top: var(--slab-inset-squish-offset-md);
1043
+ }
1044
+
1045
+ @utility my-inset-squish-offset-sm {
1046
+ margin-bottom: var(--slab-inset-squish-offset-sm);
1047
+ margin-top: var(--slab-inset-squish-offset-sm);
1048
+ }
1049
+
1050
+ @utility my-inset-squish-offset-xs {
1051
+ margin-bottom: var(--slab-inset-squish-offset-xs);
1052
+ margin-top: var(--slab-inset-squish-offset-xs);
1053
+ }
1054
+
1055
+ @utility my-inset-squish-sm {
1056
+ margin-bottom: var(--slab-inset-squish-sm);
1057
+ margin-top: var(--slab-inset-squish-sm);
1058
+ }
1059
+
1060
+ @utility my-inset-squish-xs {
1061
+ margin-bottom: var(--slab-inset-squish-xs);
1062
+ margin-top: var(--slab-inset-squish-xs);
1063
+ }
1064
+
1065
+ @utility p-inset-square-lg {
1066
+ padding: var(--slab-inset-square-lg);
1067
+ }
1068
+
1069
+ @utility p-inset-square-md {
1070
+ padding: var(--slab-inset-square-md);
1071
+ }
1072
+
1073
+ @utility p-inset-square-sm {
1074
+ padding: var(--slab-inset-square-sm);
1075
+ }
1076
+
1077
+ @utility p-inset-square-xl {
1078
+ padding: var(--slab-inset-square-xl);
1079
+ }
1080
+
1081
+ @utility p-inset-squish-lg {
1082
+ padding: var(--slab-inset-squish-lg);
1083
+ }
1084
+
1085
+ @utility p-inset-squish-md {
1086
+ padding: var(--slab-inset-squish-md);
1087
+ }
1088
+
1089
+ @utility p-inset-squish-offset-lg {
1090
+ padding: var(--slab-inset-squish-offset-lg);
1091
+ }
1092
+
1093
+ @utility p-inset-squish-offset-md {
1094
+ padding: var(--slab-inset-squish-offset-md);
1095
+ }
1096
+
1097
+ @utility p-inset-squish-offset-sm {
1098
+ padding: var(--slab-inset-squish-offset-sm);
1099
+ }
1100
+
1101
+ @utility p-inset-squish-offset-xs {
1102
+ padding: var(--slab-inset-squish-offset-xs);
1103
+ }
1104
+
1105
+ @utility p-inset-squish-sm {
1106
+ padding: var(--slab-inset-squish-sm);
1107
+ }
1108
+
1109
+ @utility p-inset-squish-xs {
1110
+ padding: var(--slab-inset-squish-xs);
1111
+ }
1112
+
1113
+ @utility pb-inset-square-lg {
1114
+ padding-bottom: var(--slab-inset-square-lg);
1115
+ }
1116
+
1117
+ @utility pb-inset-square-md {
1118
+ padding-bottom: var(--slab-inset-square-md);
1119
+ }
1120
+
1121
+ @utility pb-inset-square-sm {
1122
+ padding-bottom: var(--slab-inset-square-sm);
1123
+ }
1124
+
1125
+ @utility pb-inset-square-xl {
1126
+ padding-bottom: var(--slab-inset-square-xl);
1127
+ }
1128
+
1129
+ @utility pb-inset-squish-lg {
1130
+ padding-bottom: var(--slab-inset-squish-lg);
1131
+ }
1132
+
1133
+ @utility pb-inset-squish-md {
1134
+ padding-bottom: var(--slab-inset-squish-md);
1135
+ }
1136
+
1137
+ @utility pb-inset-squish-offset-lg {
1138
+ padding-bottom: var(--slab-inset-squish-offset-lg);
1139
+ }
1140
+
1141
+ @utility pb-inset-squish-offset-md {
1142
+ padding-bottom: var(--slab-inset-squish-offset-md);
1143
+ }
1144
+
1145
+ @utility pb-inset-squish-offset-sm {
1146
+ padding-bottom: var(--slab-inset-squish-offset-sm);
1147
+ }
1148
+
1149
+ @utility pb-inset-squish-offset-xs {
1150
+ padding-bottom: var(--slab-inset-squish-offset-xs);
1151
+ }
1152
+
1153
+ @utility pb-inset-squish-sm {
1154
+ padding-bottom: var(--slab-inset-squish-sm);
1155
+ }
1156
+
1157
+ @utility pb-inset-squish-xs {
1158
+ padding-bottom: var(--slab-inset-squish-xs);
1159
+ }
1160
+
1161
+ @utility pl-inset-square-lg {
1162
+ padding-left: var(--slab-inset-square-lg);
1163
+ }
1164
+
1165
+ @utility pl-inset-square-md {
1166
+ padding-left: var(--slab-inset-square-md);
1167
+ }
1168
+
1169
+ @utility pl-inset-square-sm {
1170
+ padding-left: var(--slab-inset-square-sm);
1171
+ }
1172
+
1173
+ @utility pl-inset-square-xl {
1174
+ padding-left: var(--slab-inset-square-xl);
1175
+ }
1176
+
1177
+ @utility pl-inset-squish-lg {
1178
+ padding-left: var(--slab-inset-squish-lg);
1179
+ }
1180
+
1181
+ @utility pl-inset-squish-md {
1182
+ padding-left: var(--slab-inset-squish-md);
1183
+ }
1184
+
1185
+ @utility pl-inset-squish-offset-lg {
1186
+ padding-left: var(--slab-inset-squish-offset-lg);
1187
+ }
1188
+
1189
+ @utility pl-inset-squish-offset-md {
1190
+ padding-left: var(--slab-inset-squish-offset-md);
1191
+ }
1192
+
1193
+ @utility pl-inset-squish-offset-sm {
1194
+ padding-left: var(--slab-inset-squish-offset-sm);
1195
+ }
1196
+
1197
+ @utility pl-inset-squish-offset-xs {
1198
+ padding-left: var(--slab-inset-squish-offset-xs);
1199
+ }
1200
+
1201
+ @utility pl-inset-squish-sm {
1202
+ padding-left: var(--slab-inset-squish-sm);
1203
+ }
1204
+
1205
+ @utility pl-inset-squish-xs {
1206
+ padding-left: var(--slab-inset-squish-xs);
1207
+ }
1208
+
1209
+ @utility pr-inset-square-lg {
1210
+ padding-right: var(--slab-inset-square-lg);
1211
+ }
1212
+
1213
+ @utility pr-inset-square-md {
1214
+ padding-right: var(--slab-inset-square-md);
1215
+ }
1216
+
1217
+ @utility pr-inset-square-sm {
1218
+ padding-right: var(--slab-inset-square-sm);
1219
+ }
1220
+
1221
+ @utility pr-inset-square-xl {
1222
+ padding-right: var(--slab-inset-square-xl);
1223
+ }
1224
+
1225
+ @utility pr-inset-squish-lg {
1226
+ padding-right: var(--slab-inset-squish-lg);
1227
+ }
1228
+
1229
+ @utility pr-inset-squish-md {
1230
+ padding-right: var(--slab-inset-squish-md);
1231
+ }
1232
+
1233
+ @utility pr-inset-squish-offset-lg {
1234
+ padding-right: var(--slab-inset-squish-offset-lg);
1235
+ }
1236
+
1237
+ @utility pr-inset-squish-offset-md {
1238
+ padding-right: var(--slab-inset-squish-offset-md);
1239
+ }
1240
+
1241
+ @utility pr-inset-squish-offset-sm {
1242
+ padding-right: var(--slab-inset-squish-offset-sm);
1243
+ }
1244
+
1245
+ @utility pr-inset-squish-offset-xs {
1246
+ padding-right: var(--slab-inset-squish-offset-xs);
1247
+ }
1248
+
1249
+ @utility pr-inset-squish-sm {
1250
+ padding-right: var(--slab-inset-squish-sm);
1251
+ }
1252
+
1253
+ @utility pr-inset-squish-xs {
1254
+ padding-right: var(--slab-inset-squish-xs);
1255
+ }
1256
+
1257
+ @utility pt-inset-square-lg {
1258
+ padding-top: var(--slab-inset-square-lg);
1259
+ }
1260
+
1261
+ @utility pt-inset-square-md {
1262
+ padding-top: var(--slab-inset-square-md);
1263
+ }
1264
+
1265
+ @utility pt-inset-square-sm {
1266
+ padding-top: var(--slab-inset-square-sm);
1267
+ }
1268
+
1269
+ @utility pt-inset-square-xl {
1270
+ padding-top: var(--slab-inset-square-xl);
1271
+ }
1272
+
1273
+ @utility pt-inset-squish-lg {
1274
+ padding-top: var(--slab-inset-squish-lg);
1275
+ }
1276
+
1277
+ @utility pt-inset-squish-md {
1278
+ padding-top: var(--slab-inset-squish-md);
1279
+ }
1280
+
1281
+ @utility pt-inset-squish-offset-lg {
1282
+ padding-top: var(--slab-inset-squish-offset-lg);
1283
+ }
1284
+
1285
+ @utility pt-inset-squish-offset-md {
1286
+ padding-top: var(--slab-inset-squish-offset-md);
1287
+ }
1288
+
1289
+ @utility pt-inset-squish-offset-sm {
1290
+ padding-top: var(--slab-inset-squish-offset-sm);
1291
+ }
1292
+
1293
+ @utility pt-inset-squish-offset-xs {
1294
+ padding-top: var(--slab-inset-squish-offset-xs);
1295
+ }
1296
+
1297
+ @utility pt-inset-squish-sm {
1298
+ padding-top: var(--slab-inset-squish-sm);
1299
+ }
1300
+
1301
+ @utility pt-inset-squish-xs {
1302
+ padding-top: var(--slab-inset-squish-xs);
1303
+ }
1304
+
1305
+ @utility px-inset-square-lg {
1306
+ padding-right: var(--slab-inset-square-lg);
1307
+ padding-left: var(--slab-inset-square-lg);
1308
+ }
1309
+
1310
+ @utility px-inset-square-md {
1311
+ padding-right: var(--slab-inset-square-md);
1312
+ padding-left: var(--slab-inset-square-md);
1313
+ }
1314
+
1315
+ @utility px-inset-square-sm {
1316
+ padding-right: var(--slab-inset-square-sm);
1317
+ padding-left: var(--slab-inset-square-sm);
1318
+ }
1319
+
1320
+ @utility px-inset-square-xl {
1321
+ padding-right: var(--slab-inset-square-xl);
1322
+ padding-left: var(--slab-inset-square-xl);
1323
+ }
1324
+
1325
+ @utility px-inset-squish-lg {
1326
+ padding-right: var(--slab-inset-squish-lg);
1327
+ padding-left: var(--slab-inset-squish-lg);
1328
+ }
1329
+
1330
+ @utility px-inset-squish-md {
1331
+ padding-right: var(--slab-inset-squish-md);
1332
+ padding-left: var(--slab-inset-squish-md);
1333
+ }
1334
+
1335
+ @utility px-inset-squish-offset-lg {
1336
+ padding-right: var(--slab-inset-squish-offset-lg);
1337
+ padding-left: var(--slab-inset-squish-offset-lg);
1338
+ }
1339
+
1340
+ @utility px-inset-squish-offset-md {
1341
+ padding-right: var(--slab-inset-squish-offset-md);
1342
+ padding-left: var(--slab-inset-squish-offset-md);
1343
+ }
1344
+
1345
+ @utility px-inset-squish-offset-sm {
1346
+ padding-right: var(--slab-inset-squish-offset-sm);
1347
+ padding-left: var(--slab-inset-squish-offset-sm);
1348
+ }
1349
+
1350
+ @utility px-inset-squish-offset-xs {
1351
+ padding-right: var(--slab-inset-squish-offset-xs);
1352
+ padding-left: var(--slab-inset-squish-offset-xs);
1353
+ }
1354
+
1355
+ @utility px-inset-squish-sm {
1356
+ padding-right: var(--slab-inset-squish-sm);
1357
+ padding-left: var(--slab-inset-squish-sm);
1358
+ }
1359
+
1360
+ @utility px-inset-squish-xs {
1361
+ padding-right: var(--slab-inset-squish-xs);
1362
+ padding-left: var(--slab-inset-squish-xs);
1363
+ }
1364
+
1365
+ @utility py-inset-square-lg {
1366
+ padding-bottom: var(--slab-inset-square-lg);
1367
+ padding-top: var(--slab-inset-square-lg);
1368
+ }
1369
+
1370
+ @utility py-inset-square-md {
1371
+ padding-bottom: var(--slab-inset-square-md);
1372
+ padding-top: var(--slab-inset-square-md);
1373
+ }
1374
+
1375
+ @utility py-inset-square-sm {
1376
+ padding-bottom: var(--slab-inset-square-sm);
1377
+ padding-top: var(--slab-inset-square-sm);
1378
+ }
1379
+
1380
+ @utility py-inset-square-xl {
1381
+ padding-bottom: var(--slab-inset-square-xl);
1382
+ padding-top: var(--slab-inset-square-xl);
1383
+ }
1384
+
1385
+ @utility py-inset-squish-lg {
1386
+ padding-bottom: var(--slab-inset-squish-lg);
1387
+ padding-top: var(--slab-inset-squish-lg);
1388
+ }
1389
+
1390
+ @utility py-inset-squish-md {
1391
+ padding-bottom: var(--slab-inset-squish-md);
1392
+ padding-top: var(--slab-inset-squish-md);
1393
+ }
1394
+
1395
+ @utility py-inset-squish-offset-lg {
1396
+ padding-bottom: var(--slab-inset-squish-offset-lg);
1397
+ padding-top: var(--slab-inset-squish-offset-lg);
1398
+ }
1399
+
1400
+ @utility py-inset-squish-offset-md {
1401
+ padding-bottom: var(--slab-inset-squish-offset-md);
1402
+ padding-top: var(--slab-inset-squish-offset-md);
1403
+ }
1404
+
1405
+ @utility py-inset-squish-offset-sm {
1406
+ padding-bottom: var(--slab-inset-squish-offset-sm);
1407
+ padding-top: var(--slab-inset-squish-offset-sm);
1408
+ }
1409
+
1410
+ @utility py-inset-squish-offset-xs {
1411
+ padding-bottom: var(--slab-inset-squish-offset-xs);
1412
+ padding-top: var(--slab-inset-squish-offset-xs);
1413
+ }
1414
+
1415
+ @utility py-inset-squish-sm {
1416
+ padding-bottom: var(--slab-inset-squish-sm);
1417
+ padding-top: var(--slab-inset-squish-sm);
1418
+ }
1419
+
1420
+ @utility py-inset-squish-xs {
1421
+ padding-bottom: var(--slab-inset-squish-xs);
1422
+ padding-top: var(--slab-inset-squish-xs);
1423
+ }
1424
+
1425
+ @utility ring-action-ghost {
1426
+ outline-color: var(--slab-action-ghost-focus-border);
1427
+ }
1428
+
1429
+ @utility ring-action-primary {
1430
+ outline-color: var(--slab-action-primary-focus-border);
1431
+ }
1432
+
1433
+ @utility ring-action-secondary {
1434
+ outline-color: var(--slab-action-secondary-focus-border);
1435
+ }
1436
+
1437
+ @utility ring-action-tertiary {
1438
+ outline-color: var(--slab-action-tertiary-focus-border);
1439
+ }
1440
+
1441
+ @utility ring-form-primary {
1442
+ outline-color: var(--slab-form-primary-focus-border);
1443
+ }
1444
+
1445
+ @utility rounded-sl-control {
1446
+ border-radius: var(--slab-radius-control);
1447
+ }
1448
+
1449
+ @utility rounded-sl-full {
1450
+ border-radius: var(--slab-radius-full);
1451
+ }
1452
+
1453
+ @utility rounded-sl-lg {
1454
+ border-radius: var(--slab-radius-lg);
1455
+ }
1456
+
1457
+ @utility rounded-sl-md {
1458
+ border-radius: var(--slab-radius-md);
1459
+ }
1460
+
1461
+ @utility rounded-sl-sm {
1462
+ border-radius: var(--slab-radius-sm);
1463
+ }
1464
+
1465
+ @utility rounded-sl-xl {
1466
+ border-radius: var(--slab-radius-xl);
1467
+ }
1468
+
1469
+ @utility text-action-disabled-ghost {
1470
+ color: var(--slab-action-disabled-ghost-text);
1471
+ }
1472
+
1473
+ @utility text-action-disabled-primary {
1474
+ color: var(--slab-action-disabled-primary-text);
1475
+ }
1476
+
1477
+ @utility text-action-disabled-secondary {
1478
+ color: var(--slab-action-disabled-secondary-text);
1479
+ }
1480
+
1481
+ @utility text-action-disabled-tertiary {
1482
+ color: var(--slab-action-disabled-tertiary-text);
1483
+ }
1484
+
1485
+ @utility text-action-ghost {
1486
+ color: var(--slab-action-ghost-text);
1487
+ }
1488
+
1489
+ @utility text-action-hover-ghost {
1490
+ color: var(--slab-action-hover-ghost-text);
1491
+ }
1492
+
1493
+ @utility text-action-hover-primary {
1494
+ color: var(--slab-action-hover-primary-text);
1495
+ }
1496
+
1497
+ @utility text-action-hover-secondary {
1498
+ color: var(--slab-action-hover-secondary-text);
1499
+ }
1500
+
1501
+ @utility text-action-hover-tertiary {
1502
+ color: var(--slab-action-hover-tertiary-text);
1503
+ }
1504
+
1505
+ @utility text-action-primary {
1506
+ color: var(--slab-action-primary-text);
1507
+ }
1508
+
1509
+ @utility text-action-secondary {
1510
+ color: var(--slab-action-secondary-text);
1511
+ }
1512
+
1513
+ @utility text-action-tertiary {
1514
+ color: var(--slab-action-tertiary-text);
1515
+ }
1516
+
1517
+ @utility text-body-lg {
1518
+ font-size: var(--slab-body-lg-default-size);
1519
+ }
1520
+
1521
+ @utility text-body-lg-strong {
1522
+ font-size: var(--slab-body-lg-strong-size);
1523
+ }
1524
+
1525
+ @utility text-body-md {
1526
+ font-size: var(--slab-body-md-default-size);
1527
+ }
1528
+
1529
+ @utility text-body-md-strong {
1530
+ font-size: var(--slab-body-md-strong-size);
1531
+ }
1532
+
1533
+ @utility text-body-sm {
1534
+ font-size: var(--slab-body-sm-default-size);
1535
+ }
1536
+
1537
+ @utility text-body-sm-strong {
1538
+ font-size: var(--slab-body-sm-strong-size);
1539
+ }
1540
+
1541
+ @utility text-control-md {
1542
+ font-size: var(--slab-control-md-size);
1543
+ }
1544
+
1545
+ @utility text-control-sm {
1546
+ font-size: var(--slab-control-sm-size);
1547
+ }
1548
+
1549
+ @utility text-display-lg {
1550
+ font-size: var(--slab-display-lg-size);
1551
+ }
1552
+
1553
+ @utility text-display-md {
1554
+ font-size: var(--slab-display-md-size);
1555
+ }
1556
+
1557
+ @utility text-display-sm {
1558
+ font-size: var(--slab-display-sm-size);
1559
+ }
1560
+
1561
+ @utility text-form-active-primary {
1562
+ color: var(--slab-form-active-primary-text);
1563
+ }
1564
+
1565
+ @utility text-form-active-secondary {
1566
+ color: var(--slab-form-active-secondary-text);
1567
+ }
1568
+
1569
+ @utility text-form-disabled-primary {
1570
+ color: var(--slab-form-disabled-primary-text);
1571
+ }
1572
+
1573
+ @utility text-form-disabled-secondary {
1574
+ color: var(--slab-form-disabled-secondary-text);
1575
+ }
1576
+
1577
+ @utility text-form-primary {
1578
+ color: var(--slab-form-primary-text);
1579
+ }
1580
+
1581
+ @utility text-form-secondary {
1582
+ color: var(--slab-form-secondary-text);
1583
+ }
1584
+
1585
+ @utility text-header-lg {
1586
+ font-size: var(--slab-header-lg-size);
1587
+ }
1588
+
1589
+ @utility text-header-md {
1590
+ font-size: var(--slab-header-md-size);
1591
+ }
1592
+
1593
+ @utility text-header-sm {
1594
+ font-size: var(--slab-header-sm-size);
1595
+ }
1596
+
1597
+ @utility text-header-xl {
1598
+ font-size: var(--slab-header-xl-size);
1599
+ }
1600
+
1601
+ @utility text-mono-lg {
1602
+ font-size: var(--slab-mono-lg-size);
1603
+ }
1604
+
1605
+ @utility text-mono-md {
1606
+ font-size: var(--slab-mono-md-size);
1607
+ }
1608
+
1609
+ @utility text-surface-primary {
1610
+ color: var(--slab-surface-primary-text);
1611
+ }
1612
+
1613
+ @utility text-surface-secondary {
1614
+ color: var(--slab-surface-secondary-text);
1615
+ }
1616
+
1617
+ @utility to-action-disabled-primary {
1618
+ --tw-gradient-to: var(--slab-action-disabled-primary-bg-end);
1619
+ }
1620
+
1621
+ @utility to-action-disabled-secondary {
1622
+ --tw-gradient-to: var(--slab-action-disabled-secondary-bg-end);
1623
+ }
1624
+
1625
+ @utility to-action-hover-primary {
1626
+ --tw-gradient-to: var(--slab-action-hover-primary-bg-end);
1627
+ }
1628
+
1629
+ @utility to-action-hover-secondary {
1630
+ --tw-gradient-to: var(--slab-action-hover-secondary-bg-end);
1631
+ }
1632
+
1633
+ @utility to-action-primary {
1634
+ --tw-gradient-to: var(--slab-action-primary-bg-end);
1635
+ }
1636
+
1637
+ @utility to-action-secondary {
1638
+ --tw-gradient-to: var(--slab-action-secondary-bg-end);
1639
+ }
1640
+
1641
+ @utility tracking-body-lg {
1642
+ letter-spacing: var(--slab-body-lg-default-letter-spacing);
1643
+ }
1644
+
1645
+ @utility tracking-body-lg-strong {
1646
+ letter-spacing: var(--slab-body-lg-strong-letter-spacing);
1647
+ }
1648
+
1649
+ @utility tracking-body-md {
1650
+ letter-spacing: var(--slab-body-md-default-letter-spacing);
1651
+ }
1652
+
1653
+ @utility tracking-body-md-strong {
1654
+ letter-spacing: var(--slab-body-md-strong-letter-spacing);
1655
+ }
1656
+
1657
+ @utility tracking-body-sm {
1658
+ letter-spacing: var(--slab-body-sm-default-letter-spacing);
1659
+ }
1660
+
1661
+ @utility tracking-body-sm-strong {
1662
+ letter-spacing: var(--slab-body-sm-strong-letter-spacing);
1663
+ }
1664
+
1665
+ @utility tracking-control-md {
1666
+ letter-spacing: var(--slab-control-md-letter-spacing);
1667
+ }
1668
+
1669
+ @utility tracking-control-sm {
1670
+ letter-spacing: var(--slab-control-sm-letter-spacing);
1671
+ }
1672
+
1673
+ @utility tracking-display-lg {
1674
+ letter-spacing: var(--slab-display-lg-letter-spacing);
1675
+ }
1676
+
1677
+ @utility tracking-display-md {
1678
+ letter-spacing: var(--slab-display-md-letter-spacing);
1679
+ }
1680
+
1681
+ @utility tracking-display-sm {
1682
+ letter-spacing: var(--slab-display-sm-letter-spacing);
1683
+ }
1684
+
1685
+ @utility tracking-header-lg {
1686
+ letter-spacing: var(--slab-header-lg-letter-spacing);
1687
+ }
1688
+
1689
+ @utility tracking-header-md {
1690
+ letter-spacing: var(--slab-header-md-letter-spacing);
1691
+ }
1692
+
1693
+ @utility tracking-header-sm {
1694
+ letter-spacing: var(--slab-header-sm-letter-spacing);
1695
+ }
1696
+
1697
+ @utility tracking-header-xl {
1698
+ letter-spacing: var(--slab-header-xl-letter-spacing);
1699
+ }
1700
+
1701
+ @utility tracking-mono-lg {
1702
+ letter-spacing: var(--slab-mono-lg-letter-spacing);
1703
+ }
1704
+
1705
+ @utility tracking-mono-md {
1706
+ letter-spacing: var(--slab-mono-md-letter-spacing);
1707
+ }
1708
+
1709
+ @utility w-size-icon-inner-lg {
1710
+ width: var(--slab-size-icon-inner-lg);
1711
+ }
1712
+
1713
+ @utility w-size-icon-inner-md {
1714
+ width: var(--slab-size-icon-inner-md);
1715
+ }
1716
+
1717
+ @utility w-size-icon-inner-sm {
1718
+ width: var(--slab-size-icon-inner-sm);
1719
+ }
1720
+
1721
+ @utility w-size-icon-outer-lg {
1722
+ width: var(--slab-size-icon-outer-lg);
1723
+ }
1724
+
1725
+ @utility w-size-icon-outer-md {
1726
+ width: var(--slab-size-icon-outer-md);
1727
+ }
1728
+
1729
+ @utility w-size-icon-outer-sm {
1730
+ width: var(--slab-size-icon-outer-sm);
1731
+ }
1732
+
1733
+ @utility w-size-lg {
1734
+ width: var(--slab-size-lg);
1735
+ }
1736
+
1737
+ @utility w-size-md {
1738
+ width: var(--slab-size-md);
1739
+ }
1740
+
1741
+ @utility w-size-sm {
1742
+ width: var(--slab-size-sm);
1743
+ }
1744
+
1745
+ @utility w-size-xs {
1746
+ width: var(--slab-size-xs);
1747
+ }
1748
+
1749
+ @layer components {
1750
+ .prose-body-lg {
1751
+ font-family: var(--slab-body-lg-default-font-family);
1752
+ letter-spacing: var(--slab-body-lg-default-letter-spacing);
1753
+ line-height: var(--slab-body-lg-default-line-height);
1754
+ font-size: var(--slab-body-lg-default-size);
1755
+ font-weight: var(--slab-body-lg-default-weight);
1756
+ }
1757
+
1758
+ .prose-body-lg-strong {
1759
+ font-family: var(--slab-body-lg-strong-font-family);
1760
+ letter-spacing: var(--slab-body-lg-strong-letter-spacing);
1761
+ line-height: var(--slab-body-lg-strong-line-height);
1762
+ font-size: var(--slab-body-lg-strong-size);
1763
+ font-weight: var(--slab-body-lg-strong-weight);
1764
+ }
1765
+
1766
+ .prose-body-md {
1767
+ font-family: var(--slab-body-md-default-font-family);
1768
+ letter-spacing: var(--slab-body-md-default-letter-spacing);
1769
+ line-height: var(--slab-body-md-default-line-height);
1770
+ font-size: var(--slab-body-md-default-size);
1771
+ font-weight: var(--slab-body-md-default-weight);
1772
+ }
1773
+
1774
+ .prose-body-md-strong {
1775
+ font-family: var(--slab-body-md-strong-font-family);
1776
+ letter-spacing: var(--slab-body-md-strong-letter-spacing);
1777
+ line-height: var(--slab-body-md-strong-line-height);
1778
+ font-size: var(--slab-body-md-strong-size);
1779
+ font-weight: var(--slab-body-md-strong-weight);
1780
+ }
1781
+
1782
+ .prose-body-sm {
1783
+ font-family: var(--slab-body-sm-default-font-family);
1784
+ letter-spacing: var(--slab-body-sm-default-letter-spacing);
1785
+ line-height: var(--slab-body-sm-default-line-height);
1786
+ font-size: var(--slab-body-sm-default-size);
1787
+ font-weight: var(--slab-body-sm-default-weight);
1788
+ }
1789
+
1790
+ .prose-body-sm-strong {
1791
+ font-family: var(--slab-body-sm-strong-font-family);
1792
+ letter-spacing: var(--slab-body-sm-strong-letter-spacing);
1793
+ line-height: var(--slab-body-sm-strong-line-height);
1794
+ font-size: var(--slab-body-sm-strong-size);
1795
+ font-weight: var(--slab-body-sm-strong-weight);
1796
+ }
1797
+
1798
+ .prose-control-md {
1799
+ font-family: var(--slab-control-md-font-family);
1800
+ letter-spacing: var(--slab-control-md-letter-spacing);
1801
+ line-height: var(--slab-control-md-line-height);
1802
+ font-size: var(--slab-control-md-size);
1803
+ font-weight: var(--slab-control-md-weight);
1804
+ }
1805
+
1806
+ .prose-control-sm {
1807
+ font-family: var(--slab-control-sm-font-family);
1808
+ letter-spacing: var(--slab-control-sm-letter-spacing);
1809
+ line-height: var(--slab-control-sm-line-height);
1810
+ font-size: var(--slab-control-sm-size);
1811
+ font-weight: var(--slab-control-sm-weight);
1812
+ }
1813
+
1814
+ .prose-display-lg {
1815
+ font-family: var(--slab-display-lg-font-family);
1816
+ letter-spacing: var(--slab-display-lg-letter-spacing);
1817
+ line-height: var(--slab-display-lg-line-height);
1818
+ font-size: var(--slab-display-lg-size);
1819
+ font-weight: var(--slab-display-lg-weight);
1820
+ }
1821
+
1822
+ .prose-display-md {
1823
+ font-family: var(--slab-display-md-font-family);
1824
+ letter-spacing: var(--slab-display-md-letter-spacing);
1825
+ line-height: var(--slab-display-md-line-height);
1826
+ font-size: var(--slab-display-md-size);
1827
+ font-weight: var(--slab-display-md-weight);
1828
+ }
1829
+
1830
+ .prose-display-sm {
1831
+ font-family: var(--slab-display-sm-font-family);
1832
+ letter-spacing: var(--slab-display-sm-letter-spacing);
1833
+ line-height: var(--slab-display-sm-line-height);
1834
+ font-size: var(--slab-display-sm-size);
1835
+ font-weight: var(--slab-display-sm-weight);
1836
+ }
1837
+
1838
+ .prose-header-lg {
1839
+ font-family: var(--slab-header-lg-font-family);
1840
+ letter-spacing: var(--slab-header-lg-letter-spacing);
1841
+ line-height: var(--slab-header-lg-line-height);
1842
+ font-size: var(--slab-header-lg-size);
1843
+ font-weight: var(--slab-header-lg-weight);
1844
+ }
1845
+
1846
+ .prose-header-md {
1847
+ font-family: var(--slab-header-md-font-family);
1848
+ letter-spacing: var(--slab-header-md-letter-spacing);
1849
+ line-height: var(--slab-header-md-line-height);
1850
+ font-size: var(--slab-header-md-size);
1851
+ font-weight: var(--slab-header-md-weight);
1852
+ }
1853
+
1854
+ .prose-header-sm {
1855
+ font-family: var(--slab-header-sm-font-family);
1856
+ letter-spacing: var(--slab-header-sm-letter-spacing);
1857
+ line-height: var(--slab-header-sm-line-height);
1858
+ font-size: var(--slab-header-sm-size);
1859
+ font-weight: var(--slab-header-sm-weight);
1860
+ }
1861
+
1862
+ .prose-header-xl {
1863
+ font-family: var(--slab-header-xl-font-family);
1864
+ letter-spacing: var(--slab-header-xl-letter-spacing);
1865
+ line-height: var(--slab-header-xl-line-height);
1866
+ font-size: var(--slab-header-xl-size);
1867
+ font-weight: var(--slab-header-xl-weight);
1868
+ }
1869
+
1870
+ .prose-mono-lg {
1871
+ font-family: var(--slab-mono-lg-font-family);
1872
+ letter-spacing: var(--slab-mono-lg-letter-spacing);
1873
+ line-height: var(--slab-mono-lg-line-height);
1874
+ font-size: var(--slab-mono-lg-size);
1875
+ font-weight: var(--slab-mono-lg-weight);
1876
+ }
1877
+
1878
+ .prose-mono-md {
1879
+ font-family: var(--slab-mono-md-font-family);
1880
+ letter-spacing: var(--slab-mono-md-letter-spacing);
1881
+ line-height: var(--slab-mono-md-line-height);
1882
+ font-size: var(--slab-mono-md-size);
1883
+ font-weight: var(--slab-mono-md-weight);
1884
+ }
1885
+ }