@wwtdev/bsds-css 3.1.1 → 3.2.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 (9) hide show
  1. package/dist/wwt-bsds-preset-v4.css +471 -0
  2. package/dist/wwt-bsds-preset.js +509 -494
  3. package/dist/wwt-bsds-tokens.css +13 -13
  4. package/dist/wwt-bsds-tokens.min.css +1 -1
  5. package/dist/wwt-bsds-utilities.css +2 -1
  6. package/dist/wwt-bsds-utilities.min.css +1 -1
  7. package/dist/wwt-bsds.css +15 -14
  8. package/dist/wwt-bsds.min.css +1 -1
  9. package/package.json +23 -18
package/dist/wwt-bsds-preset-v4.css ADDED
@@ -0,0 +1,471 @@
1
+ /* Tailwind v4 CSS Variables */
2
+ @theme inline {
3
+ /* Tailwind Resets */
4
+ --color-*: initial;
5
+ --container-*: initial;
6
+ --text-*: initial;
7
+
8
+ /* Colors — Palette */
9
+ --color-transparent: var(--bs-transparent);
10
+ --color-inherit: var(--bs-inherit);
11
+ --color-current: var(--bs-current);
12
+ --color-white: var(--bs-white);
13
+ --color-white-10: var(--bs-white-10);
14
+ --color-black: var(--bs-black);
15
+
16
+ --color-blue-10: var(--bs-blue-10);
17
+ --color-blue-100: var(--bs-blue-100);
18
+ --color-blue-200: var(--bs-blue-200);
19
+ --color-blue-300: var(--bs-blue-300);
20
+ --color-blue-400: var(--bs-blue-400);
21
+ --color-blue-500: var(--bs-blue-500);
22
+
23
+ --color-charcoal-100: var(--bs-charcoal-100);
24
+ --color-charcoal-200: var(--bs-charcoal-200);
25
+ --color-charcoal-300: var(--bs-charcoal-300);
26
+ --color-charcoal-400: var(--bs-charcoal-400);
27
+ --color-charcoal-500: var(--bs-charcoal-500);
28
+
29
+ --color-cobalt-10: var(--bs-cobalt-10);
30
+ --color-cobalt-100: var(--bs-cobalt-100);
31
+ --color-cobalt-200: var(--bs-cobalt-200);
32
+ --color-cobalt-300: var(--bs-cobalt-300);
33
+ --color-cobalt-400: var(--bs-cobalt-400);
34
+
35
+ --color-gold-10: var(--bs-gold-10);
36
+ --color-gold-100: var(--bs-gold-100);
37
+ --color-gold-200: var(--bs-gold-200);
38
+ --color-gold-300: var(--bs-gold-300);
39
+ --color-gold-400: var(--bs-gold-400);
40
+ --color-gold-500: var(--bs-gold-500);
41
+
42
+ --color-gray-50: var(--bs-gray-50);
43
+ --color-gray-100: var(--bs-gray-100);
44
+ --color-gray-150: var(--bs-gray-150);
45
+ --color-gray-200: var(--bs-gray-200);
46
+ --color-gray-300: var(--bs-gray-300);
47
+ --color-gray-400: var(--bs-gray-400);
48
+ --color-gray-500: var(--bs-gray-500);
49
+
50
+ --color-green-10: var(--bs-green-10);
51
+ --color-green-100: var(--bs-green-100);
52
+ --color-green-200: var(--bs-green-200);
53
+ --color-green-300: var(--bs-green-300);
54
+ --color-green-400: var(--bs-green-400);
55
+ --color-green-500: var(--bs-green-500);
56
+
57
+ --color-maroon-10: var(--bs-maroon-10);
58
+ --color-maroon-100: var(--bs-maroon-100);
59
+ --color-maroon-200: var(--bs-maroon-200);
60
+ --color-maroon-300: var(--bs-maroon-300);
61
+ --color-maroon-400: var(--bs-maroon-400);
62
+ --color-maroon-500: var(--bs-maroon-500);
63
+
64
+ --color-midnight-10: var(--bs-midnight-10);
65
+ --color-midnight-100: var(--bs-midnight-100);
66
+ --color-midnight-200: var(--bs-midnight-200);
67
+ --color-midnight-300: var(--bs-midnight-300);
68
+ --color-midnight-400: var(--bs-midnight-400);
69
+
70
+ --color-navy-10: var(--bs-navy-10);
71
+ --color-navy-100: var(--bs-navy-100);
72
+ --color-navy-200: var(--bs-navy-200);
73
+ --color-navy-300: var(--bs-navy-300);
74
+ --color-navy-400: var(--bs-navy-400);
75
+
76
+ --color-orange-10: var(--bs-orange-10);
77
+ --color-orange-100: var(--bs-orange-100);
78
+ --color-orange-200: var(--bs-orange-200);
79
+ --color-orange-300: var(--bs-orange-300);
80
+ --color-orange-400: var(--bs-orange-400);
81
+ --color-orange-500: var(--bs-orange-500);
82
+ --color-orange-brand: var(--bs-orange-brand);
83
+
84
+ --color-orchid-10: var(--bs-orchid-10);
85
+ --color-orchid-100: var(--bs-orchid-100);
86
+ --color-orchid-200: var(--bs-orchid-200);
87
+ --color-orchid-300: var(--bs-orchid-300);
88
+ --color-orchid-400: var(--bs-orchid-400);
89
+
90
+ --color-pink-10: var(--bs-pink-10);
91
+ --color-pink-100: var(--bs-pink-100);
92
+ --color-pink-200: var(--bs-pink-200);
93
+ --color-pink-300: var(--bs-pink-300);
94
+ --color-pink-400: var(--bs-pink-400);
95
+ --color-pink-500: var(--bs-pink-500);
96
+
97
+ --color-plum-10: var(--bs-plum-10);
98
+ --color-plum-100: var(--bs-plum-100);
99
+ --color-plum-200: var(--bs-plum-200);
100
+ --color-plum-300: var(--bs-plum-300);
101
+ --color-plum-400: var(--bs-plum-400);
102
+
103
+ --color-purple-10: var(--bs-purple-10);
104
+ --color-purple-100: var(--bs-purple-100);
105
+ --color-purple-200: var(--bs-purple-200);
106
+ --color-purple-300: var(--bs-purple-300);
107
+ --color-purple-400: var(--bs-purple-400);
108
+
109
+ --color-red-10: var(--bs-red-10);
110
+ --color-red-100: var(--bs-red-100);
111
+ --color-red-200: var(--bs-red-200);
112
+ --color-red-300: var(--bs-red-300);
113
+ --color-red-400: var(--bs-red-400);
114
+ --color-red-500: var(--bs-red-500);
115
+
116
+ --color-royal-10: var(--bs-royal-10);
117
+ --color-royal-100: var(--bs-royal-100);
118
+ --color-royal-200: var(--bs-royal-200);
119
+ --color-royal-300: var(--bs-royal-300);
120
+ --color-royal-400: var(--bs-royal-400);
121
+
122
+ --color-slate-400: var(--bs-slate-400);
123
+ --color-slate-500: var(--bs-slate-500);
124
+ --color-slate-600: var(--bs-slate-600);
125
+
126
+ --color-violet-10: var(--bs-violet-10);
127
+ --color-violet-100: var(--bs-violet-100);
128
+ --color-violet-200: var(--bs-violet-200);
129
+ --color-violet-300: var(--bs-violet-300);
130
+ --color-violet-400: var(--bs-violet-400);
131
+
132
+ --color-yellow-10: var(--bs-yellow-10);
133
+ --color-yellow-100: var(--bs-yellow-100);
134
+ --color-yellow-200: var(--bs-yellow-200);
135
+ --color-yellow-300: var(--bs-yellow-300);
136
+ --color-yellow-400: var(--bs-yellow-400);
137
+ --color-yellow-500: var(--bs-yellow-500);
138
+
139
+ --color-shadow-primary: var(--bs-shadow-primary);
140
+ --color-shadow-secondary: var(--bs-shadow-secondary);
141
+
142
+ /* Colors — Semantic (ink) */
143
+ --color-ink-base: var(--bs-ink-base);
144
+ --color-ink-medium: var(--bs-ink-medium);
145
+ --color-ink-light: var(--bs-ink-light);
146
+ --color-ink-disabled: var(--bs-ink-disabled);
147
+ --color-ink-primary: var(--bs-ink-primary);
148
+ --color-ink-secondary: var(--bs-ink-secondary);
149
+ --color-ink-accent-1: var(--bs-ink-accent-1);
150
+ --color-ink-accent-2: var(--bs-ink-accent-2);
151
+ --color-ink-accent-3: var(--bs-ink-accent-3);
152
+ --color-ink-accent-4: var(--bs-ink-accent-4);
153
+ --color-ink-positive: var(--bs-ink-positive);
154
+ --color-ink-warning: var(--bs-ink-warning);
155
+ --color-ink-negative: var(--bs-ink-negative);
156
+ --color-ink-white: var(--bs-ink-white);
157
+ --color-ink-invert-base: var(--bs-ink-invert-base);
158
+ --color-ink-invert-medium: var(--bs-ink-invert-medium);
159
+ --color-ink-invert-light: var(--bs-ink-invert-light);
160
+
161
+ /* Colors — Semantic (primary / secondary / accents) */
162
+ --color-primary-base-fixed: var(--bs-primary-base-fixed);
163
+ --color-primary-base: var(--bs-primary-base);
164
+ --color-primary-medium: var(--bs-primary-medium);
165
+ --color-primary-light: var(--bs-primary-light);
166
+ --color-primary-lightest: var(--bs-primary-lightest);
167
+ --color-primary-highlight: var(--bs-primary-highlight);
168
+
169
+ --color-secondary-base-fixed: var(--bs-secondary-base-fixed);
170
+ --color-secondary-base: var(--bs-secondary-base);
171
+ --color-secondary-medium: var(--bs-secondary-medium);
172
+ --color-secondary-light: var(--bs-secondary-light);
173
+ --color-secondary-lightest: var(--bs-secondary-lightest);
174
+ --color-secondary-highlight: var(--bs-secondary-highlight);
175
+
176
+ --color-accent-1-base-fixed: var(--bs-accent-1-base-fixed);
177
+ --color-accent-1-base: var(--bs-accent-1-base);
178
+ --color-accent-1-medium: var(--bs-accent-1-medium);
179
+ --color-accent-1-light: var(--bs-accent-1-light);
180
+ --color-accent-1-lightest: var(--bs-accent-1-lightest);
181
+ --color-accent-1-highlight: var(--bs-accent-1-highlight);
182
+
183
+ --color-accent-2-base-fixed: var(--bs-accent-2-base-fixed);
184
+ --color-accent-2-base: var(--bs-accent-2-base);
185
+ --color-accent-2-medium: var(--bs-accent-2-medium);
186
+ --color-accent-2-light: var(--bs-accent-2-light);
187
+ --color-accent-2-lightest: var(--bs-accent-2-lightest);
188
+ --color-accent-2-highlight: var(--bs-accent-2-highlight);
189
+
190
+ --color-accent-3-base-fixed: var(--bs-accent-3-base-fixed);
191
+ --color-accent-3-base: var(--bs-accent-3-base);
192
+ --color-accent-3-medium: var(--bs-accent-3-medium);
193
+ --color-accent-3-light: var(--bs-accent-3-light);
194
+ --color-accent-3-lightest: var(--bs-accent-3-lightest);
195
+ --color-accent-3-highlight: var(--bs-accent-3-highlight);
196
+
197
+ --color-accent-4-base: var(--bs-accent-4-base);
198
+ --color-accent-4-medium: var(--bs-accent-4-medium);
199
+ --color-accent-4-light: var(--bs-accent-4-light);
200
+ --color-accent-4-lightest: var(--bs-accent-4-lightest);
201
+ --color-accent-4-highlight: var(--bs-accent-4-highlight);
202
+
203
+ --color-accent-5-base: var(--bs-accent-5-base);
204
+ --color-accent-5-medium: var(--bs-accent-5-medium);
205
+ --color-accent-5-light: var(--bs-accent-5-light);
206
+ --color-accent-5-lightest: var(--bs-accent-5-lightest);
207
+ --color-accent-5-highlight: var(--bs-accent-5-highlight);
208
+
209
+ --color-accent-6-base: var(--bs-accent-6-base);
210
+ --color-accent-6-medium: var(--bs-accent-6-medium);
211
+ --color-accent-6-light: var(--bs-accent-6-light);
212
+ --color-accent-6-lightest: var(--bs-accent-6-lightest);
213
+ --color-accent-6-highlight: var(--bs-accent-6-highlight);
214
+
215
+ --color-accent-7-base: var(--bs-accent-7-base);
216
+ --color-accent-7-medium: var(--bs-accent-7-medium);
217
+ --color-accent-7-light: var(--bs-accent-7-light);
218
+ --color-accent-7-lightest: var(--bs-accent-7-lightest);
219
+ --color-accent-7-highlight: var(--bs-accent-7-highlight);
220
+
221
+ /* Colors — Semantic (neutral / status) */
222
+ --color-neutral-dark: var(--bs-neutral-dark);
223
+ --color-neutral-base: var(--bs-neutral-base);
224
+ --color-neutral-medium: var(--bs-neutral-medium);
225
+ --color-neutral-light: var(--bs-neutral-light);
226
+ --color-neutral-lightest: var(--bs-neutral-lightest);
227
+
228
+ --color-positive-base: var(--bs-positive-base);
229
+ --color-positive-medium: var(--bs-positive-medium);
230
+ --color-positive-highlight: var(--bs-positive-highlight);
231
+
232
+ --color-warning-base: var(--bs-warning-base);
233
+ --color-warning-medium: var(--bs-warning-medium);
234
+ --color-warning-highlight: var(--bs-warning-highlight);
235
+
236
+ --color-negative-base: var(--bs-negative-base);
237
+ --color-negative-medium: var(--bs-negative-medium);
238
+ --color-negative-highlight: var(--bs-negative-highlight);
239
+
240
+ /* Colors — Semantic (background) */
241
+ --color-bg-base: var(--bs-bg-base);
242
+ --color-bg-light: var(--bs-bg-light);
243
+ --color-bg-medium: var(--bs-bg-medium);
244
+ --color-bg-disabled: var(--bs-bg-disabled);
245
+ --color-bg-invert-base: var(--bs-bg-invert-base);
246
+ --color-bg-invert-light: var(--bs-bg-invert-light);
247
+ --color-bg-invert-medium: var(--bs-bg-invert-medium);
248
+ --color-bg-base-to-light: var(--bs-bg-base-to-light);
249
+ --color-bg-base-to-medium: var(--bs-bg-base-to-medium);
250
+ --color-bg-medium-to-base: var(--bs-bg-medium-to-base);
251
+ --color-bg-medium-to-light: var(--bs-bg-medium-to-light);
252
+ --color-bg-light-to-base: var(--bs-bg-light-to-base);
253
+ --color-bg-light-to-medium: var(--bs-bg-light-to-medium);
254
+
255
+ /* Colors — Semantic (border) */
256
+ --color-border-base: var(--bs-border-base);
257
+ --color-border-medium: var(--bs-border-medium);
258
+ --color-border-light: var(--bs-border-light);
259
+ --color-border-dark: var(--bs-border-dark);
260
+ --color-border-medium-to-light: var(--bs-border-medium-to-light);
261
+ --color-border-input: var(--bs-border-input);
262
+ --color-border-active: var(--bs-border-active);
263
+ --color-border-error: var(--bs-border-error);
264
+
265
+ /* Colors — DEPRECATED semantic aliases */
266
+ --color-ink-blue: var(--bs-ink-blue);
267
+ --color-ink-orange: var(--bs-ink-orange);
268
+ --color-ink-pink: var(--bs-ink-pink);
269
+ --color-ink-plum: var(--bs-ink-plum);
270
+ --color-ink-purple: var(--bs-ink-purple);
271
+ --color-ink-red: var(--bs-ink-red);
272
+ --color-ink-royal: var(--bs-ink-royal);
273
+ --color-ink-violet: var(--bs-ink-violet);
274
+ --color-ink-accent: var(--bs-ink-accent);
275
+ --color-blue-base: var(--bs-blue-base);
276
+ --color-blue-medium: var(--bs-blue-medium);
277
+ --color-blue-light: var(--bs-blue-light);
278
+ --color-blue-lightest: var(--bs-blue-lightest);
279
+ --color-gray-dark: var(--bs-gray-dark);
280
+ --color-gray-base: var(--bs-gray-base);
281
+ --color-gray-medium: var(--bs-gray-medium);
282
+ --color-gray-light: var(--bs-gray-light);
283
+ --color-gray-lightest: var(--bs-gray-lightest);
284
+ --color-navy-base: var(--bs-navy-base);
285
+ --color-navy-medium: var(--bs-navy-medium);
286
+ --color-navy-light: var(--bs-navy-light);
287
+ --color-navy-lightest: var(--bs-navy-lightest);
288
+ --color-warning: var(--bs-warning);
289
+ --color-orange-base: var(--bs-orange-base);
290
+ --color-orange-medium: var(--bs-orange-medium);
291
+ --color-orange-light: var(--bs-orange-light);
292
+ --color-orange-lightest: var(--bs-orange-lightest);
293
+ --color-pink-base: var(--bs-pink-base);
294
+ --color-pink-medium: var(--bs-pink-medium);
295
+ --color-pink-light: var(--bs-pink-light);
296
+ --color-pink-lightest: var(--bs-pink-lightest);
297
+ --color-plum-base: var(--bs-plum-base);
298
+ --color-plum-medium: var(--bs-plum-medium);
299
+ --color-plum-light: var(--bs-plum-light);
300
+ --color-plum-lightest: var(--bs-plum-lightest);
301
+ --color-purple-base: var(--bs-purple-base);
302
+ --color-purple-medium: var(--bs-purple-medium);
303
+ --color-purple-light: var(--bs-purple-light);
304
+ --color-purple-lightest: var(--bs-purple-lightest);
305
+ --color-red-base: var(--bs-red-base);
306
+ --color-red-medium: var(--bs-red-medium);
307
+ --color-red-light: var(--bs-red-light);
308
+ --color-red-lightest: var(--bs-red-lightest);
309
+ --color-royal-base: var(--bs-royal-base);
310
+ --color-royal-medium: var(--bs-royal-medium);
311
+ --color-royal-light: var(--bs-royal-light);
312
+ --color-royal-lightest: var(--bs-royal-lightest);
313
+ --color-violet-base: var(--bs-violet-base);
314
+ --color-violet-medium: var(--bs-violet-medium);
315
+ --color-violet-light: var(--bs-violet-light);
316
+ --color-violet-lightest: var(--bs-violet-lightest);
317
+
318
+ /* Font sizes */
319
+ /* Note: These are defined in the utilities section */
320
+
321
+ /* Font weights */
322
+ --font-weight-light: var(--bs-font-light);
323
+ --font-weight-normal: var(--bs-font-normal);
324
+ --font-weight-semibold: var(--bs-font-semibold);
325
+
326
+ /* ─── Spacing ────────────────────────────────────────────────────────────── */
327
+ --spacing-none: var(--bs-space-none);
328
+ --spacing-0: var(--bs-space-0);
329
+ --spacing-3xs: var(--bs-space-3xs);
330
+ --spacing-1: var(--bs-space-1);
331
+ --spacing-2xs: var(--bs-space-2xs);
332
+ --spacing-2: var(--bs-space-2);
333
+ --spacing-xs: var(--bs-space-xs);
334
+ --spacing-3: var(--bs-space-3);
335
+ --spacing-sm: var(--bs-space-sm);
336
+ --spacing-4: var(--bs-space-4);
337
+ --spacing-md: var(--bs-space-md);
338
+ --spacing-6: var(--bs-space-6);
339
+ --spacing-lg: var(--bs-space-lg);
340
+ --spacing-8: var(--bs-space-8);
341
+ --spacing-xl: var(--bs-space-xl);
342
+ --spacing-12: var(--bs-space-12);
343
+ --spacing-2xl: var(--bs-space-2xl);
344
+ --spacing-16: var(--bs-space-16);
345
+ --spacing-3xl: var(--bs-space-3xl);
346
+ --spacing-24: var(--bs-space-24);
347
+ --spacing-4xl: var(--bs-space-4xl);
348
+ --spacing-32: var(--bs-space-32);
349
+
350
+ /* ─── Line heights ───────────────────────────────────────────────────────── */
351
+ --leading-none: var(--bs-leading-none);
352
+ --leading-sm: var(--bs-leading-sm);
353
+ --leading-regular: var(--bs-leading-regular);
354
+ --leading-lg: var(--bs-leading-lg);
355
+
356
+ /* ─── Box shadows ────────────────────────────────────────────────────────── */
357
+ --shadow-DEFAULT: var(--bs-shadow-contentLow);
358
+ --shadow-content-low: var(--bs-shadow-contentLow);
359
+ --shadow-content-low-center: var(--bs-shadow-contentLowCenter);
360
+ --shadow-content-medium: var(--bs-shadow-contentMedium);
361
+ --shadow-content-high: var(--bs-shadow-contentHigh);
362
+ --shadow-drawer-left: var(--bs-shadow-drawerLeft);
363
+ --shadow-drawer-right: var(--bs-shadow-drawerRight);
364
+ --shadow-profile-photo: var(--bs-shadow-profilePhoto);
365
+
366
+ /* ─── Screens / breakpoints ──────────────────────────────────────────────── */
367
+ --breakpoint-wm: 752px;
368
+ --breakpoint-dt: 1166px;
369
+ }
370
+
371
+ /* ─── Custom utilities ────────────────────────────────────────────────────── */
372
+ /* Gradient utilities */
373
+ @utility bg-gradient-dark { background: var(--bs-gradient-dark); }
374
+ @utility bg-gradient-light { background: var(--bs-gradient-light); }
375
+ @utility bg-gradient-line { background: var(--bs-gradient-line); }
376
+ @utility bg-gradient-blue-center { background: var(--bs-gradient-blue-center); }
377
+ @utility bg-gradient-blue-mid-left { background: var(--bs-gradient-blue-mid-left); }
378
+ @utility bg-gradient-blue-mid-right { background: var(--bs-gradient-blue-mid-right); }
379
+ @utility bg-gradient-blue-bottom-center { background: var(--bs-gradient-blue-bottom-center); }
380
+ @utility bg-gradient-blue-top-center { background: var(--bs-gradient-blue-top-center); }
381
+ @utility bg-gradient-blue-top-left { background: var(--bs-gradient-blue-top-left); }
382
+ @utility bg-gradient-blue-bottom-right { background: var(--bs-gradient-blue-bottom-right); }
383
+ @utility bg-gradient-blue-top-right { background: var(--bs-gradient-blue-top-right); }
384
+ @utility bg-gradient-blue-bottom-left { background: var(--bs-gradient-blue-bottom-left); }
385
+ @utility bg-gradient-light-blue-transparent { background: var(--bs-gradient-light-blue-transparent); }
386
+ @utility bg-gradient-light-blue-opaque { background: var(--bs-gradient-light-blue-opaque); }
387
+ @utility bg-gradient-light-gray { background: var(--bs-gradient-light-gray); }
388
+ @utility bg-gradient-softchoice-light { background: var(--bs-gradient-softchoice-light); }
389
+ @utility bg-gradient-softchoice-dark { background: var(--bs-gradient-softchoice-dark); }
390
+
391
+ /* Atom AI utilities */
392
+ @utility bs-bg-atom-ai { background-image: var(--bs-gradient-atom-ai-bg); }
393
+ @utility bs-border-atom-ai {
394
+ --bg-color: var(--bs-bg-base);
395
+ background:
396
+ linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
397
+ var(--bs-gradient-atom-ai-border) border-box;
398
+ border: 2px solid transparent;
399
+ }
400
+
401
+ /*
402
+ * Custom background color utilities. Added in addition to theme tokens
403
+ * to allow for backwards compatibility.
404
+ * - Theme token usage: `bg-bg-base`
405
+ * - Utility usage: `bg-base`
406
+ */
407
+ @utility bg-base { background-color: var(--bs-bg-base); }
408
+ @utility bg-light { background-color: var(--bs-bg-light); }
409
+ @utility bg-medium { background-color: var(--bs-bg-medium); }
410
+ @utility bg-disabled { background-color: var(--bs-bg-disabled); }
411
+ @utility bg-invert-base { background-color: var(--bs-bg-invert-base); }
412
+ @utility bg-invert-light { background-color: var(--bs-bg-invert-light); }
413
+ @utility bg-invert-medium { background-color: var(--bs-bg-invert-medium); }
414
+ @utility bg-base-to-light { background: var(--bs-bg-base-to-light); }
415
+ @utility bg-base-to-medium { background: var(--bs-bg-base-to-medium); }
416
+ @utility bg-medium-to-base { background: var(--bs-bg-medium-to-base); }
417
+ @utility bg-medium-to-light { background: var(--bs-bg-medium-to-light); }
418
+ @utility bg-light-to-base { background: var(--bs-bg-light-to-base); }
419
+ @utility bg-light-to-medium { background: var(--bs-bg-light-to-medium); }
420
+
421
+ /*
422
+ * Custom border color utilities. Added in addition to theme tokens
423
+ * to allow for backwards compatibility.
424
+ * - Theme token usage: `border-border-base`
425
+ * - Utility usage: `border-base`
426
+ */
427
+ @utility border-base { border-color: var(--bs-border-base); }
428
+ @utility border-medium { border-color: var(--bs-border-medium); }
429
+ @utility border-light { border-color: var(--bs-border-light); }
430
+ @utility border-dark { border-color: var(--bs-border-dark); }
431
+ @utility border-medium-to-light { border-color: var(--bs-border-medium-to-light); }
432
+ @utility border-input { border-color: var(--bs-border-input); }
433
+ @utility border-active { border-color: var(--bs-border-active); }
434
+ @utility border-error { border-color: var(--bs-border-error); }
435
+
436
+ /* Responsive text size utility overrides */
437
+ @utility text-xs { font-size: var(--bs-text-xs); }
438
+ @utility text-sm { font-size: var(--bs-text-sm); }
439
+ @utility text-base { font-size: var(--bs-text-base); }
440
+ @utility text-md {
441
+ font-size: var(--bs-text-base);
442
+ @media (width >= 1166px) { font-size: var(--bs-text-md); }
443
+ }
444
+ @utility text-lg {
445
+ font-size: var(--bs-text-md);
446
+ @media (width >= 1166px) { font-size: var(--bs-text-lg); }
447
+ }
448
+ @utility text-xl {
449
+ font-size: var(--bs-text-lg);
450
+ @media (width >= 1166px) { font-size: var(--bs-text-xl); }
451
+ }
452
+ @utility text-2xl {
453
+ font-size: var(--bs-text-xl);
454
+ @media (width >= 1166px) { font-size: var(--bs-text-2xl); }
455
+ }
456
+ @utility text-3xl {
457
+ font-size: var(--bs-text-2xl);
458
+ @media (width >= 1166px) { font-size: var(--bs-text-3xl); }
459
+ }
460
+ @utility text-4xl {
461
+ font-size: var(--bs-text-3xl);
462
+ @media (width >= 1166px) { font-size: var(--bs-text-4xl); }
463
+ }
464
+ @utility text-5xl {
465
+ font-size: var(--bs-text-4xl);
466
+ @media (width >= 1166px) { font-size: var(--bs-text-5xl); }
467
+ }
468
+ @utility text-6xl {
469
+ font-size: var(--bs-text-5xl);
470
+ @media (width >= 1166px) { font-size: var(--bs-text-6xl); }
471
+ }