@tanishraj/ui-kit 2.5.6 → 2.6.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 (12) hide show
  1. package/dist/animation.css +115 -0
  2. package/dist/globals.css +116 -1
  3. package/dist/index.cjs.js +2 -2
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.es.js +19 -19
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/themes/indigo.css +3 -0
  8. package/dist/themes/violet.css +6 -0
  9. package/package.json +7 -7
  10. package/readme.md +0 -4
  11. package/dist/themes/primary.css +0 -558
  12. package/dist/themes/secondary.css +0 -555
package/dist/themes/secondary.css DELETED
@@ -1,555 +0,0 @@
1
- @theme {
2
- /* FONTS */
3
- --font-body:
4
- 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial,
5
- sans-serif;
6
- --font-display:
7
- 'Fira Code', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial,
8
- sans-serif;
9
- --font-mono:
10
- 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
11
- 'Liberation Mono', 'Courier New', monospace;
12
-
13
- /* Text Styles */
14
- --text-xs: 12px;
15
- --text-xs--line-height: 16px;
16
- --text-xs--paragraph-spacing: 12px;
17
-
18
- --text-sm: 14px;
19
- --text-sm--line-height: 20px;
20
- --text-sm--paragraph-spacing: 14px;
21
-
22
- --text-base: 16px;
23
- --text-base--line-height: 24px;
24
- --text-base--paragraph-spacing: 16px;
25
-
26
- --text-lg: 18px;
27
- --text-lg--line-height: 28px;
28
- --text-lg--paragraph-spacing: 18px;
29
-
30
- --text-xl: 20px;
31
- --text-xl--line-height: 28px;
32
- --text-xl--paragraph-spacing: 20px;
33
-
34
- --text-2xl: 24px;
35
- --text-2xl--line-height: 32px;
36
- --text-2xl--paragraph-spacing: 24px;
37
-
38
- --text-3xl: 30px;
39
- --text-3xl--line-height: 36px;
40
- --text-3xl--paragraph-spacing: 30px;
41
-
42
- --text-4xl: 36px;
43
- --text-4xl--line-height: 40px;
44
- --text-4xl--paragraph-spacing: 36px;
45
-
46
- --text-5xl: 48px;
47
- --text-5xl--line-height: 48px;
48
- --text-5xl--paragraph-spacing: 48px;
49
-
50
- --text-6xl: 60px;
51
- --text-6xl--line-height: 60px;
52
- --text-6xl--paragraph-spacing: 60px;
53
-
54
- --text-7xl: 72px;
55
- --text-7xl--line-height: 72px;
56
- --text-7xl--paragraph-spacing: 72px;
57
-
58
- --text-8xl: 96px;
59
- --text-8xl--line-height: 96px;
60
- --text-8xl--paragraph-spacing: 96px;
61
-
62
- --text-9xl: 128px;
63
- --text-9xl--line-height: 128px;
64
- --text-9xl--paragraph-spacing: 128px;
65
-
66
- /* Font Weight */
67
- --font-weight-regular: 400;
68
- --font-weight-medium: 500;
69
- --font-weight-semibold: 600;
70
- --font-weight-bold: 700;
71
-
72
- /* Border Radius */
73
- --radius-none: 0px;
74
- --radius-sm: 2px;
75
- --radius: 4px;
76
- --radius-md: 6px;
77
- --radius-lg: 8px;
78
- --radius-xl: 12px;
79
- --radius-2xl: 16px;
80
- --radius-3xl: 24px;
81
- --radius-full: 9999px;
82
-
83
- /* Border Width */
84
- --default-border-width: 1px;
85
- --border-width-0: 0px;
86
- --border-width-2: 2px;
87
- --border-width-4: 4px;
88
- --border-width-8: 8px;
89
-
90
- /* Spacing */
91
- --spacing-0: calc(var(--spacing) * 0);
92
- --spacing-px: 1px;
93
- --spacing-0-5: calc(var(--spacing) * 0.5);
94
- --spacing-1: calc(var(--spacing) * 1);
95
- --spacing-1-5: calc(var(--spacing) * 1.5);
96
- --spacing-2: calc(var(--spacing) * 2);
97
- --spacing-2-5: calc(var(--spacing) * 2.5);
98
- --spacing-3: calc(var(--spacing) * 3);
99
- --spacing-3-5: calc(var(--spacing) * 3.5);
100
- --spacing-4: calc(var(--spacing) * 4);
101
- --spacing-5: calc(var(--spacing) * 5);
102
- --spacing-6: calc(var(--spacing) * 6);
103
- --spacing-7: calc(var(--spacing) * 7);
104
- --spacing-8: calc(var(--spacing) * 8);
105
- --spacing-9: calc(var(--spacing) * 9);
106
- --spacing-10: calc(var(--spacing) * 10);
107
- --spacing-11: calc(var(--spacing) * 11);
108
- --spacing-12: calc(var(--spacing) * 12);
109
- --spacing-14: calc(var(--spacing) * 14);
110
- --spacing-16: calc(var(--spacing) * 16);
111
- --spacing-20: calc(var(--spacing) * 20);
112
- --spacing-24: calc(var(--spacing) * 24);
113
- --spacing-28: calc(var(--spacing) * 28);
114
- --spacing-32: calc(var(--spacing) * 32);
115
- --spacing-36: calc(var(--spacing) * 36);
116
- --spacing-40: calc(var(--spacing) * 40);
117
- --spacing-44: calc(var(--spacing) * 44);
118
- --spacing-48: calc(var(--spacing) * 48);
119
- --spacing-52: calc(var(--spacing) * 52);
120
- --spacing-56: calc(var(--spacing) * 56);
121
- --spacing-60: calc(var(--spacing) * 60);
122
- --spacing-64: calc(var(--spacing) * 64);
123
- --spacing-72: calc(var(--spacing) * 72);
124
- --spacing-80: calc(var(--spacing) * 80);
125
- --spacing-96: calc(var(--spacing) * 96);
126
-
127
- /* Shadow */
128
- --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
129
- --shadow: 0 1px 2px 0 rgb(0 0 0 / 5%), 0 1px 2px 0 rgb(0 0 0 / 5%);
130
- --shadow-md: 0 4px 4px -1px rgb(0 0 0 / 10%), 0 4px 4px -2px rgb(0 0 0 / 10%);
131
- --shadow-lg:
132
- 0 4px 6px -4px rgb(0 0 0 / 10%), 0 10px 15px -3px rgb(0 0 0 / 10%);
133
- --shadow-xl:
134
- 0 8px 10px -6px rgb(0 0 0 / 10%), 0 20px 25px -5px rgb(0 0 0 / 10%);
135
- --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);
136
- --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 5%);
137
-
138
- /* Blur */
139
- --blur-none: 0px;
140
- --blur-sm: 4px;
141
- --blur: 8px;
142
- --blur-md: 12px;
143
- --blur-lg: 16px;
144
- --blur-xl: 24px;
145
- --blur-2xl: 40px;
146
- --blur-3xl: 64px;
147
-
148
- /* Background Blur */
149
- --backdrop-blur-none: var(--blur-none);
150
- --backdrop-blur-sm: var(--blur-sm);
151
- --backdrop-blur: var(--blur);
152
- --backdrop-blur-md: var(--blur-md);
153
- --backdrop-blur-lg: var(--blur-lg);
154
- --backdrop-blur-xl: var(--blur-xl);
155
- --backdrop-blur-2xl: var(--blur-2xl);
156
- --backdrop-blur-3xl: var(--blur-3xl);
157
-
158
- /* Breakpoints */
159
- --breakpoint-sm: 640px;
160
- --breakpoint-md: 768px;
161
- --breakpoint-lg: 1024px;
162
- --breakpoint-xl: 1280px;
163
- --breakpoint-2xl: 1536px;
164
-
165
- /* Semantic Colors */
166
- --base-black: #000000;
167
- --base-white: #ffffff;
168
- --base-transparent: #ffffff00;
169
-
170
- /* Neutral */
171
- --neutral-50: #fafaf9;
172
- --neutral-100: #f5f5f4;
173
- --neutral-200: #e7e5e4;
174
- --neutral-300: #d6d3d1;
175
- --neutral-400: #a8a29e;
176
- --neutral-500: #78716c;
177
- --neutral-600: #57534e;
178
- --neutral-700: #3a3934;
179
- --neutral-800: #191923;
180
- --neutral-900: #0a0a0f;
181
- --neutral-950: #02182b;
182
-
183
- /* Primary */
184
- --primary-50: #ece9f6;
185
- --primary-100: #c8c1e3;
186
- --primary-200: #9f93cf;
187
- --primary-300: #7665ba;
188
- --primary-400: #5947a1;
189
- --primary-500: #3d348b;
190
- --primary-600: #322a72;
191
- --primary-700: #272058;
192
- --primary-800: #1c1740;
193
- --primary-900: #110e2a;
194
- --primary-950: #0a0a0f;
195
-
196
- /* info */
197
- --info-50: #ecfeff;
198
- --info-100: #cffafe;
199
- --info-200: #a5f3fc;
200
- --info-300: #67e8f9;
201
- --info-400: #22d3ee;
202
- --info-500: #06b6d4;
203
- --info-600: #0891b2;
204
- --info-700: #0e7490;
205
- --info-800: #155e75;
206
- --info-900: #164e63;
207
- --info-950: #083344;
208
-
209
- /* Success */
210
- --success-50: #e0f5ee;
211
- --success-100: #b3e6d3;
212
- --success-200: #80d8ba;
213
- --success-300: #4dc99f;
214
- --success-400: #1aba83;
215
- --success-500: #00a878;
216
- --success-600: #008660;
217
- --success-700: #006448;
218
- --success-800: #004330;
219
- --success-900: #002118;
220
- --success-950: #00100c;
221
-
222
- /* Warning */
223
- --warning-50: #fef0e0;
224
- --warning-100: #fbd5af;
225
- --warning-200: #f9c68f;
226
- --warning-300: #f7b66f;
227
- --warning-400: #f5a653;
228
- --warning-500: #f39237;
229
- --warning-600: #d77820;
230
- --warning-700: #aa5e15;
231
- --warning-800: #7c450f;
232
- --warning-900: #4e2b09;
233
- --warning-950: #271505;
234
-
235
- /* danger */
236
- --danger-50: #fdebef;
237
- --danger-100: #fac1cb;
238
- --danger-200: #f7a4b3;
239
- --danger-300: #f4869b;
240
- --danger-400: #f16982;
241
- --danger-500: #ee4b6a;
242
- --danger-600: #cc2a4a;
243
- --danger-700: #a01e38;
244
- --danger-800: #751629;
245
- --danger-900: #4a0e1a;
246
- --danger-950: #25070d;
247
-
248
- /* Default Background + Inverted */
249
- --background-color-default: var(--neutral-100);
250
- --background-color-default-hovered: var(--neutral-200);
251
- --background-color-default-pressed: var(--neutral-300);
252
- --background-color-default-focused: var(--neutral-100);
253
- --background-color-default-loading: var(--neutral-300);
254
- --background-color-default-inverted: var(--neutral-700);
255
- --background-color-default-hovered-inverted: var(--neutral-800);
256
- --background-color-default-pressed-inverted: var(--neutral-900);
257
- --background-color-default-focused-inverted: var(--neutral-700);
258
- --background-color-default-loading-inverted: var(--neutral-900);
259
-
260
- /* Primary Background + Inverted */
261
- --background-color-primary: var(--primary-700);
262
- --background-color-primary-hovered: var(--primary-800);
263
- --background-color-primary-pressed: var(--primary-900);
264
- --background-color-primary-focused: var(--primary-700);
265
- --background-color-primary-loading: var(--primary-900);
266
- --background-color-primary-inverted: var(--primary-100);
267
- --background-color-primary-hovered-inverted: var(--primary-200);
268
- --background-color-primary-pressed-inverted: var(--primary-300);
269
- --background-color-primary-focused-inverted: var(--primary-100);
270
- --background-color-primary-loading-inverted: var(--primary-300);
271
-
272
- /* Info Background + Inverted */
273
- --background-color-info: var(--info-700);
274
- --background-color-info-hovered: var(--info-800);
275
- --background-color-info-pressed: var(--info-900);
276
- --background-color-info-focused: var(--info-700);
277
- --background-color-info-loading: var(--info-900);
278
- --background-color-info-inverted: var(--info-100);
279
- --background-color-info-hovered-inverted: var(--info-200);
280
- --background-color-info-pressed-inverted: var(--info-300);
281
- --background-color-info-focused-inverted: var(--info-100);
282
- --background-color-info-loading-inverted: var(--info-300);
283
-
284
- /* Success Background + Inverted */
285
- --background-color-success: var(--success-700);
286
- --background-color-success-hovered: var(--success-800);
287
- --background-color-success-pressed: var(--success-900);
288
- --background-color-success-focused: var(--success-700);
289
- --background-color-success-loading: var(--success-900);
290
- --background-color-success-inverted: var(--success-100);
291
- --background-color-success-hovered-inverted: var(--success-200);
292
- --background-color-success-pressed-inverted: var(--success-300);
293
- --background-color-success-focused-inverted: var(--success-100);
294
- --background-color-success-loading-inverted: var(--success-300);
295
-
296
- /* Warning Background + Inverted */
297
- --background-color-warning: var(--warning-700);
298
- --background-color-warning-hovered: var(--warning-800);
299
- --background-color-warning-pressed: var(--warning-900);
300
- --background-color-warning-focused: var(--warning-700);
301
- --background-color-warning-loading: var(--warning-900);
302
- --background-color-warning-inverted: var(--warning-100);
303
- --background-color-warning-hovered-inverted: var(--warning-200);
304
- --background-color-warning-pressed-inverted: var(--warning-300);
305
- --background-color-warning-focused-inverted: var(--warning-100);
306
- --background-color-warning-loading-inverted: var(--warning-300);
307
-
308
- /* Danger Background + Inverted */
309
- --background-color-danger: var(--danger-700);
310
- --background-color-danger-hovered: var(--danger-800);
311
- --background-color-danger-pressed: var(--danger-900);
312
- --background-color-danger-focused: var(--danger-700);
313
- --background-color-danger-loading: var(--danger-900);
314
- --background-color-danger-inverted: var(--danger-100);
315
- --background-color-danger-hovered-inverted: var(--danger-200);
316
- --background-color-danger-pressed-inverted: var(--danger-300);
317
- --background-color-danger-focused-inverted: var(--danger-100);
318
- --background-color-danger-loading-inverted: var(--danger-300);
319
-
320
- /* Text + Inverted */
321
- --text-color-white: var(--base-white);
322
- --text-color-white-inverted: var(--neutral-950);
323
- --text-color-default: var(--neutral-950);
324
- --text-color-default-inverted: var(--base-white);
325
- --text-color-primary: var(--primary-700);
326
- --text-color-primary-inverted: var(--primary-100);
327
- --text-color-info: var(--info-700);
328
- --text-color-info-inverted: var(--info-100);
329
- --text-color-success: var(--success-700);
330
- --text-color-success-inverted: var(--success-100);
331
- --text-color-warning: var(--warning-700);
332
- --text-color-warning-inverted: var(--warning-100);
333
- --text-color-danger: var(--danger-700);
334
- --text-color-danger-inverted: var(--danger-100);
335
- --text-color-placeholder: var(--neutral-500);
336
- --text-color-placeholder-inverted: var(--neutral-500);
337
- --text-color-caption: var(--neutral-600);
338
- --text-color-caption-inverted: var(--neutral-100);
339
- --text-color-link: var(--blue-700);
340
- --text-color-link-inverted: var(--blue-100);
341
- --text-color-visited: var(--purple-700);
342
- --text-color-visited-inverted: var(--purple-100);
343
- --text-color-loading: var(--neutral-700);
344
- --text-color-loading-inverted: var(--neutral-100);
345
- --text-color-disabled: var(--neutral-400);
346
-
347
- /* Border */
348
- --border-color-base: var(--base-white);
349
- --border-color-default: var(--neutral-400);
350
- --border-color-primary: var(--primary-700);
351
- --border-color-info: var(--info-700);
352
- --border-color-success: var(--success-700);
353
- --border-color-warning: var(--warning-700);
354
- --border-color-danger: var(--danger-700);
355
- --border-color-ring: var(--blue-300);
356
- --border-color-disabled: var(--neutral-300);
357
- }
358
-
359
- @layer base {
360
- :root.light {
361
- color-scheme: light;
362
- }
363
-
364
- :root.dark {
365
- color-scheme: dark;
366
-
367
- /* Default Background + Inverted */
368
- --background-color-default: var(--neutral-900);
369
- --background-color-default-hovered: var(--neutral-800);
370
- --background-color-default-pressed: var(--neutral-700);
371
- --background-color-default-focused: var(--neutral-900);
372
- --background-color-default-loading: var(--neutral-700);
373
- --background-color-default-inverted: var(--neutral-100);
374
- --background-color-default-hovered-inverted: var(--neutral-200);
375
- --background-color-default-pressed-inverted: var(--neutral-300);
376
- --background-color-default-focused-inverted: var(--neutral-100);
377
- --background-color-default-loading-inverted: var(--neutral-300);
378
-
379
- /* Primary Background + Inverted */
380
- --background-color-primary: var(--primary-300);
381
- --background-color-primary-hovered: var(--primary-200);
382
- --background-color-primary-pressed: var(--primary-100);
383
- --background-color-primary-focused: var(--primary-300);
384
- --background-color-primary-loading: var(--primary-100);
385
- --background-color-primary-inverted: var(--primary-900);
386
- --background-color-primary-hovered-inverted: var(--primary-800);
387
- --background-color-primary-pressed-inverted: var(--primary-700);
388
- --background-color-primary-focused-inverted: var(--primary-900);
389
- --background-color-primary-loading-inverted: var(--primary-700);
390
-
391
- /* Info Background + Inverted */
392
- --background-color-info: var(--info-300);
393
- --background-color-info-hovered: var(--info-200);
394
- --background-color-info-pressed: var(--info-100);
395
- --background-color-info-focused: var(--info-300);
396
- --background-color-info-loading: var(--info-100);
397
- --background-color-info-inverted: var(--info-900);
398
- --background-color-info-hovered-inverted: var(--info-800);
399
- --background-color-info-pressed-inverted: var(--info-700);
400
- --background-color-info-focused-inverted: var(--info-900);
401
- --background-color-info-loading-inverted: var(--info-700);
402
-
403
- /* Success Background + Inverted */
404
- --background-color-success: var(--success-300);
405
- --background-color-success-hovered: var(--success-200);
406
- --background-color-success-pressed: var(--success-100);
407
- --background-color-success-focused: var(--success-300);
408
- --background-color-success-loading: var(--success-100);
409
- --background-color-success-inverted: var(--success-900);
410
- --background-color-success-hovered-inverted: var(--success-800);
411
- --background-color-success-pressed-inverted: var(--success-700);
412
- --background-color-success-focused-inverted: var(--success-900);
413
- --background-color-success-loading-inverted: var(--success-700);
414
-
415
- /* Warning Background + Inverted */
416
- --background-color-warning: var(--warning-300);
417
- --background-color-warning-hovered: var(--warning-200);
418
- --background-color-warning-pressed: var(--warning-100);
419
- --background-color-warning-focused: var(--warning-300);
420
- --background-color-warning-loading: var(--warning-100);
421
- --background-color-warning-inverted: var(--warning-900);
422
- --background-color-warning-hovered-inverted: var(--warning-800);
423
- --background-color-warning-pressed-inverted: var(--warning-700);
424
- --background-color-warning-focused-inverted: var(--warning-900);
425
- --background-color-warning-loading-inverted: var(--warning-700);
426
-
427
- /* Danger Background + Inverted */
428
- --background-color-danger: var(--danger-300);
429
- --background-color-danger-hovered: var(--danger-200);
430
- --background-color-danger-pressed: var(--danger-100);
431
- --background-color-danger-focused: var(--danger-300);
432
- --background-color-danger-loading: var(--danger-100);
433
- --background-color-danger-inverted: var(--danger-900);
434
- --background-color-danger-hovered-inverted: var(--danger-800);
435
- --background-color-danger-pressed-inverted: var(--danger-700);
436
- --background-color-danger-focused-inverted: var(--danger-900);
437
- --background-color-danger-loading-inverted: var(--danger-700);
438
-
439
- /* Text + Inverted */
440
- --text-color-white: var(--neutral-950);
441
- --text-color-white-inverted: var(--base-white);
442
- --text-color-default: var(--base-white);
443
- --text-color-default-inverted: var(--neutral-950);
444
- --text-color-primary: var(--primary-300);
445
- --text-color-primary-inverted: var(--primary-900);
446
- --text-color-info: var(--info-300);
447
- --text-color-info-inverted: var(--info-900);
448
- --text-color-success: var(--success-300);
449
- --text-color-success-inverted: var(--success-900);
450
- --text-color-warning: var(--warning-300);
451
- --text-color-warning-inverted: var(--warning-900);
452
- --text-color-danger: var(--danger-300);
453
- --text-color-danger-inverted: var(--danger-900);
454
- --text-color-placeholder: var(--neutral-500);
455
- --text-color-placeholder-inverted: var(--neutral-500);
456
- --text-color-caption: var(--neutral-400);
457
- --text-color-caption-inverted: var(--neutral-900);
458
- --text-color-link: var(--blue-300);
459
- --text-color-link-inverted: var(--blue-900);
460
- --text-color-visited: var(--purple-300);
461
- --text-color-visited-inverted: var(--purple-900);
462
- --text-color-loading: var(--neutral-300);
463
- --text-color-loading-inverted: var(--neutral-900);
464
- --text-color-disabled: var(--neutral-600);
465
-
466
- /* Border */
467
- --border-color-base: var(--gray-950);
468
- --border-color-default: var(--neutral-600);
469
- --border-color-primary: var(--primary-300);
470
- --border-color-info: var(--info-300);
471
- --border-color-success: var(--success-300);
472
- --border-color-warning: var(--warning-300);
473
- --border-color-danger: var(--danger-300);
474
- --border-color-ring: var(--blue-700);
475
- --border-color-disabled: var(--neutral-700);
476
- }
477
- }
478
-
479
- @utility paragraph-xs {
480
- font-size: var(--text-xs);
481
- line-height: var(--text-xs--line-height);
482
- margin-bottom: var(--text-xs--paragraph-spacing);
483
- }
484
-
485
- @utility paragraph-sm {
486
- font-size: var(--text-sm);
487
- line-height: var(--text-sm--line-height);
488
- margin-bottom: var(--text-sm--paragraph-spacing);
489
- }
490
-
491
- @utility paragraph-base {
492
- font-size: var(--text-base);
493
- line-height: var(--text-base--line-height);
494
- margin-bottom: var(--text-base--paragraph-spacing);
495
- }
496
-
497
- @utility paragraph-lg {
498
- font-size: var(--text-lg);
499
- line-height: var(--text-lg--line-height);
500
- margin-bottom: var(--text-lg--paragraph-spacing);
501
- }
502
-
503
- @utility paragraph-xl {
504
- font-size: var(--text-xl);
505
- line-height: var(--text-xl--line-height);
506
- margin-bottom: var(--text-xl--paragraph-spacing);
507
- }
508
-
509
- @utility paragraph-2xl {
510
- font-size: var(--text-2xl);
511
- line-height: var(--text-2xl--line-height);
512
- margin-bottom: var(--text-2xl--paragraph-spacing);
513
- }
514
-
515
- @utility paragraph-3xl {
516
- font-size: var(--text-3xl);
517
- line-height: var(--text-3xl--line-height);
518
- margin-bottom: var(--text-3xl--paragraph-spacing);
519
- }
520
-
521
- @utility paragraph-4xl {
522
- font-size: var(--text-4xl);
523
- line-height: var(--text-4xl--line-height);
524
- margin-bottom: var(--text-4xl--paragraph-spacing);
525
- }
526
-
527
- @utility paragraph-5xl {
528
- font-size: var(--text-5xl);
529
- line-height: var(--text-5xl--line-height);
530
- margin-bottom: var(--text-5xl--paragraph-spacing);
531
- }
532
-
533
- @utility paragraph-6xl {
534
- font-size: var(--text-6xl);
535
- line-height: var(--text-6xl--line-height);
536
- margin-bottom: var(--text-6xl--paragraph-spacing);
537
- }
538
-
539
- @utility paragraph-7xl {
540
- font-size: var(--text-7xl);
541
- line-height: var(--text-7xl--line-height);
542
- margin-bottom: var(--text-7xl--paragraph-spacing);
543
- }
544
-
545
- @utility paragraph-8xl {
546
- font-size: var(--text-8xl);
547
- line-height: var(--text-8xl--line-height);
548
- margin-bottom: var(--text-8xl--paragraph-spacing);
549
- }
550
-
551
- @utility paragraph-9xl {
552
- font-size: var(--text-9xl);
553
- line-height: var(--text-9xl--line-height);
554
- margin-bottom: var(--text-9xl--paragraph-spacing);
555
- }