@indico-data/design-system 3.4.0 → 3.5.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 (14) hide show
  1. package/lib/index.css +453 -166
  2. package/lib/index.esm.css +453 -166
  3. package/package.json +1 -1
  4. package/src/styles/index.scss +2 -0
  5. package/src/styles/primitives/_borderRadius.scss +20 -0
  6. package/src/styles/primitives/_breakpoints.scss +9 -0
  7. package/src/styles/{variables → primitives}/_colors.scss +26 -28
  8. package/src/styles/primitives/_iconSizes.scss +10 -0
  9. package/src/styles/primitives/_shadows.scss +9 -0
  10. package/src/styles/primitives/_spacing.scss +68 -0
  11. package/src/styles/primitives/_typography.scss +28 -0
  12. package/src/styles/primitives/index.scss +7 -0
  13. package/src/styles/tokens/_semantic-tokens.scss +172 -0
  14. package/src/styles/variables/index.scss +0 -1
package/lib/index.css CHANGED
@@ -32,6 +32,167 @@
32
32
  --pf-line-height-lg: calc(1.5 * var(--pf-font-size-base));
33
33
  }
34
34
 
35
+ :root {
36
+ --pf-icon-size-xs: 0.6rem;
37
+ --pf-icon-size-sm: 0.75rem;
38
+ --pf-icon-size-md: 1rem;
39
+ --pf-icon-size-lg: 1.5rem;
40
+ --pf-icon-size-xl: 2rem;
41
+ }
42
+
43
+ :root {
44
+ --pf-border-thin: thin;
45
+ --pf-border-sm: 1px;
46
+ --pf-border-md: 2px;
47
+ --pf-border-lg: 4px;
48
+ --pf-border-xl: 8px;
49
+ --pf-rounded: 4px;
50
+ --pf-rounded-0: 0px;
51
+ --pf-rounded-sm: 2px;
52
+ --pf-rounded-md: 4px;
53
+ --pf-rounded-lg: 8px;
54
+ --pf-rounded-xl: 24px;
55
+ --pf-rounded-pill: 9999px;
56
+ --pf-rounded-circle: 50%;
57
+ --pf-rounded-shaped: 24px 0;
58
+ }
59
+
60
+ :root [data-theme=light] {
61
+ --pf-border-color-primary: var(--pf-gray-color-300);
62
+ --pf-border-color-secondary: var(--pf-gray-color-250);
63
+ --pf-border-hover-color: var(--pf-gray-color-400);
64
+ --pf-border-color-soft: var(--pf-secondary-color-450);
65
+ --pf-border-color-accent: var(--pf-blue-color-450);
66
+ --pf-border-color-error: var(--pf-error-color);
67
+ --pf-border-color-warning: var(--pf-warning-color);
68
+ --pf-border-color-info: var(--pf-info-color);
69
+ --pf-border-color-success: var(--pf-success-color);
70
+ --pf-border-color-neutral: var(--pf-neutral-color);
71
+ --pf-border-color-pending: var(--pf-pending-color);
72
+ --pf-horizontal-line-color: var(--pf-border-color-primary);
73
+ }
74
+
75
+ :root [data-theme=dark],
76
+ :root {
77
+ --pf-border-color-primary: var(--pf-tertiary-color-700);
78
+ --pf-border-color-secondary: var(--pf-primary-color-600);
79
+ --pf-border-color-soft: var(--pf-secondary-color-600);
80
+ --pf-border-color-accent: var(--pf-secondary-color-400);
81
+ --pf-border-color-error: var(--pf-error-color);
82
+ --pf-border-color-warning: var(--pf-warning-color);
83
+ --pf-border-color-info: var(--pf-info-color);
84
+ --pf-border-color-success: var(--pf-success-color);
85
+ --pf-border-color-neutral: var(--pf-neutral-color);
86
+ --pf-border-color-pending: var(--pf-pending-color);
87
+ --pf-horizontal-line-color: var(--pf-border-color-primary);
88
+ }
89
+
90
+ :root {
91
+ --pf-padding-0: 0;
92
+ --pf-padding-1: 4px;
93
+ --pf-padding-2: 8px;
94
+ --pf-padding-3: 12px;
95
+ --pf-padding-4: 16px;
96
+ --pf-padding-5: 20px;
97
+ --pf-padding-6: 24px;
98
+ --pf-padding-7: 28px;
99
+ --pf-padding-8: 32px;
100
+ --pf-padding-9: 36px;
101
+ --pf-padding-10: 40px;
102
+ --pf-padding-11: 44px;
103
+ --pf-padding-12: 48px;
104
+ --pf-padding-13: 52px;
105
+ --pf-padding-14: 56px;
106
+ --pf-padding-15: 60px;
107
+ --pf-padding-16: 64px;
108
+ }
109
+
110
+ :root {
111
+ --pf-margin-auto: auto;
112
+ --pf-margin-0: 0;
113
+ --pf-margin-1: 4px;
114
+ --pf-margin-2: 8px;
115
+ --pf-margin-3: 12px;
116
+ --pf-margin-4: 16px;
117
+ --pf-margin-5: 20px;
118
+ --pf-margin-6: 24px;
119
+ --pf-margin-7: 28px;
120
+ --pf-margin-8: 32px;
121
+ --pf-margin-9: 36px;
122
+ --pf-margin-10: 40px;
123
+ --pf-margin-11: 44px;
124
+ --pf-margin-12: 48px;
125
+ --pf-margin-13: 52px;
126
+ --pf-margin-14: 56px;
127
+ --pf-margin-15: 60px;
128
+ --pf-margin-16: 64px;
129
+ --pf-negative-margin-1: -4px;
130
+ --pf-negative-margin-2: -8px;
131
+ --pf-negative-margin-3: -12px;
132
+ --pf-negative-margin-4: -16px;
133
+ --pf-negative-margin-5: -20px;
134
+ --pf-negative-margin-6: -24px;
135
+ --pf-negative-margin-7: -28px;
136
+ --pf-negative-margin-8: -32px;
137
+ --pf-negative-margin-9: -36px;
138
+ --pf-negative-margin-10: -40px;
139
+ --pf-negative-margin-11: -44px;
140
+ --pf-negative-margin-12: -48px;
141
+ --pf-negative-margin-13: -52px;
142
+ --pf-negative-margin-14: -56px;
143
+ --pf-negative-margin-15: -60px;
144
+ --pf-negative-margin-16: -64px;
145
+ }
146
+
147
+ :root {
148
+ --pf-gap-0: 0;
149
+ --pf-gap-1: 4px;
150
+ --pf-gap-2: 8px;
151
+ --pf-gap-3: 12px;
152
+ --pf-gap-4: 16px;
153
+ --pf-gap-5: 20px;
154
+ --pf-gap-6: 24px;
155
+ --pf-gap-7: 28px;
156
+ --pf-gap-8: 32px;
157
+ --pf-gap-9: 36px;
158
+ --pf-gap-10: 40px;
159
+ --pf-gap-11: 44px;
160
+ --pf-gap-12: 48px;
161
+ --pf-gap-13: 52px;
162
+ --pf-gap-14: 56px;
163
+ --pf-gap-15: 60px;
164
+ --pf-gap-16: 64px;
165
+ }
166
+
167
+ :root {
168
+ --pf-size-0: 0;
169
+ --pf-size-1: 4px;
170
+ --pf-size-2: 8px;
171
+ --pf-size-3: 12px;
172
+ --pf-size-4: 16px;
173
+ --pf-size-5: 20px;
174
+ --pf-size-6: 24px;
175
+ --pf-size-7: 28px;
176
+ --pf-size-8: 32px;
177
+ --pf-size-9: 36px;
178
+ --pf-size-10: 40px;
179
+ --pf-size-11: 44px;
180
+ --pf-size-12: 48px;
181
+ --pf-size-13: 52px;
182
+ --pf-size-14: 56px;
183
+ --pf-size-15: 60px;
184
+ --pf-size-16: 64px;
185
+ }
186
+
187
+ :root,
188
+ :root [data-theme=light],
189
+ :root [data-theme=dark] {
190
+ --pf-shadow-1: 1px 2px 4px 0px rgba(0, 0, 0, 0.1);
191
+ --pf-shadow-2: 5px 0 10px rgba(0, 0, 0, 0.3);
192
+ --pf-shadow-3: 0px 4px 12px rgba(0, 0, 0, 0.15);
193
+ --pf-focus-alignment: 0px 0px 0px 4px;
194
+ }
195
+
35
196
  :root {
36
197
  /** BASE COLORS **/
37
198
  --pf-blue-color: #2989ff;
@@ -170,35 +331,33 @@
170
331
  --pf-purple-color-800: #241736;
171
332
  --pf-purple-color-900: #130e1b;
172
333
  --pf-white-color: #ffffff;
173
- --pf-white-color-1: rgba(255, 255, 255, 0.01);
174
- --pf-white-color-3: rgba(255, 255, 255, 0.03);
175
- --pf-white-color-5: rgba(255, 255, 255, 0.05);
176
- --pf-white-color-10: rgba(255, 255, 255, 0.1);
177
- --pf-white-color-15: rgba(255, 255, 255, 0.15);
178
- --pf-white-color-20: rgba(255, 255, 255, 0.2);
179
- --pf-white-color-30: rgba(255, 255, 255, 0.3);
180
- --pf-white-color-40: rgba(255, 255, 255, 0.4);
181
- --pf-white-color-50: rgba(255, 255, 255, 0.5);
182
- --pf-white-color-60: rgba(255, 255, 255, 0.6);
183
- --pf-white-color-70: rgba(255, 255, 255, 0.7);
184
- --pf-white-color-80: rgba(255, 255, 255, 0.8);
185
- --pf-white-color-90: rgba(255, 255, 255, 0.9);
186
- --pf-white-color-100: rgba(255, 255, 255, 1);
334
+ --pf-opacity-white-50: rgba(255, 255, 255, 0.01);
335
+ --pf-opacity-white-100: rgba(255, 255, 255, 0.03);
336
+ --pf-opacity-white-150: rgba(255, 255, 255, 0.05);
337
+ --pf-opacity-white-200: rgba(255, 255, 255, 0.1);
338
+ --pf-opacity-white-250: rgba(255, 255, 255, 0.15);
339
+ --pf-opacity-white-300: rgba(255, 255, 255, 0.2);
340
+ --pf-opacity-white-400: rgba(255, 255, 255, 0.3);
341
+ --pf-opacity-white-450: rgba(255, 255, 255, 0.4);
342
+ --pf-opacity-white-500: rgba(255, 255, 255, 0.5);
343
+ --pf-opacity-white-600: rgba(255, 255, 255, 0.6);
344
+ --pf-opacity-white-700: rgba(255, 255, 255, 0.7);
345
+ --pf-opacity-white-800: rgba(255, 255, 255, 0.8);
346
+ --pf-opacity-white-900: rgba(255, 255, 255, 0.9);
187
347
  --pf-black-color: #000000;
188
- --pf-black-color-1: rgba(0, 0, 0, 0.01);
189
- --pf-black-color-3: rgba(0, 0, 0, 0.03);
190
- --pf-black-color-5: rgba(0, 0, 0, 0.05);
191
- --pf-black-color-10: rgba(0, 0, 0, 0.1);
192
- --pf-black-color-15: rgba(0, 0, 0, 0.15);
193
- --pf-black-color-20: rgba(0, 0, 0, 0.2);
194
- --pf-black-color-30: rgba(0, 0, 0, 0.3);
195
- --pf-black-color-40: rgba(0, 0, 0, 0.4);
196
- --pf-black-color-50: rgba(0, 0, 0, 0.5);
197
- --pf-black-color-60: rgba(0, 0, 0, 0.6);
198
- --pf-black-color-70: rgba(0, 0, 0, 0.7);
199
- --pf-black-color-80: rgba(0, 0, 0, 0.8);
200
- --pf-black-color-90: rgba(0, 0, 0, 0.9);
201
- --pf-black-color-100: rgba(0, 0, 0, 1);
348
+ --pf-opacity-black-50: rgba(0, 0, 0, 0.01);
349
+ --pf-opacity-black-100: rgba(0, 0, 0, 0.03);
350
+ --pf-opacity-black-150: rgba(0, 0, 0, 0.05);
351
+ --pf-opacity-black-200: rgba(0, 0, 0, 0.1);
352
+ --pf-opacity-black-250: rgba(0, 0, 0, 0.15);
353
+ --pf-opacity-black-300: rgba(0, 0, 0, 0.2);
354
+ --pf-opacity-black-400: rgba(0, 0, 0, 0.3);
355
+ --pf-opacity-black-450: rgba(0, 0, 0, 0.4);
356
+ --pf-opacity-black-500: rgba(0, 0, 0, 0.5);
357
+ --pf-opacity-black-600: rgba(0, 0, 0, 0.6);
358
+ --pf-opacity-black-700: rgba(0, 0, 0, 0.7);
359
+ --pf-opacity-black-800: rgba(0, 0, 0, 0.8);
360
+ --pf-opacity-black-900: rgba(0, 0, 0, 0.9);
202
361
  /** COLOR FAMILIES **/
203
362
  --pf-primary-color: #50647c;
204
363
  --pf-primary-color-50: #f9fafb;
@@ -270,164 +429,292 @@
270
429
  }
271
430
 
272
431
  :root {
273
- --pf-icon-size-xs: 0.6rem;
274
- --pf-icon-size-sm: 0.75rem;
275
- --pf-icon-size-md: 1rem;
276
- --pf-icon-size-lg: 1.5rem;
277
- --pf-icon-size-xl: 2rem;
432
+ --pf-border-radius-0: 0;
433
+ --pf-border-radius-xxs: 2px;
434
+ --pf-border-radius-xs: 4px;
435
+ --pf-border-radius-sm: 6px;
436
+ --pf-border-radius-md: 8px;
437
+ --pf-border-radius-lg: 10px;
438
+ --pf-border-radius-xl: 12px;
439
+ --pf-border-radius-2xl: 16px;
440
+ --pf-border-radius-3xl: 24px;
441
+ --pf-border-radius-4xl: 32px;
442
+ --pf-border-radius-5xl: 40px;
443
+ --pf-border-radius-6xl: 48px;
444
+ --pf-border-radius-7xl: 56px;
445
+ --pf-border-radius-8xl: 64px;
446
+ --pf-border-radius-9xl: 72px;
447
+ --pf-border-radius-10xl: 80px;
448
+ --pf-border-radius-full: 999px;
449
+ --pf-border-radius-circle: 50%;
278
450
  }
279
451
 
280
452
  :root {
281
- --pf-border-thin: thin;
282
- --pf-border-sm: 1px;
283
- --pf-border-md: 2px;
284
- --pf-border-lg: 4px;
285
- --pf-border-xl: 8px;
286
- --pf-rounded: 4px;
287
- --pf-rounded-0: 0px;
288
- --pf-rounded-sm: 2px;
289
- --pf-rounded-md: 4px;
290
- --pf-rounded-lg: 8px;
291
- --pf-rounded-xl: 24px;
292
- --pf-rounded-pill: 9999px;
293
- --pf-rounded-circle: 50%;
294
- --pf-rounded-shaped: 24px 0;
295
- }
296
-
297
- :root [data-theme=light] {
298
- --pf-border-color-primary: var(--pf-gray-color-300);
299
- --pf-border-color-secondary: var(--pf-gray-color-250);
300
- --pf-border-hover-color: var(--pf-gray-color-400);
301
- --pf-border-color-soft: var(--pf-secondary-color-450);
302
- --pf-border-color-accent: var(--pf-blue-color-450);
303
- --pf-border-color-error: var(--pf-error-color);
304
- --pf-border-color-warning: var(--pf-warning-color);
305
- --pf-border-color-info: var(--pf-info-color);
306
- --pf-border-color-success: var(--pf-success-color);
307
- --pf-border-color-neutral: var(--pf-neutral-color);
308
- --pf-border-color-pending: var(--pf-pending-color);
309
- --pf-horizontal-line-color: var(--pf-border-color-primary);
453
+ /** BREAKPOINT PRIMITIVES **/
454
+ --pf-breakpoint-xs: 480px;
455
+ --pf-breakpoint-sm: 600px;
456
+ --pf-breakpoint-md: 768px;
457
+ --pf-breakpoint-lg: 1280px;
458
+ --pf-breakpoint-xl: 1440px;
459
+ --pf-breakpoint-2xl: 1920px;
310
460
  }
311
461
 
312
- :root [data-theme=dark],
313
462
  :root {
314
- --pf-border-color-primary: var(--pf-tertiary-color-700);
315
- --pf-border-color-secondary: var(--pf-primary-color-600);
316
- --pf-border-color-soft: var(--pf-secondary-color-600);
317
- --pf-border-color-accent: var(--pf-secondary-color-400);
318
- --pf-border-color-error: var(--pf-error-color);
319
- --pf-border-color-warning: var(--pf-warning-color);
320
- --pf-border-color-info: var(--pf-info-color);
321
- --pf-border-color-success: var(--pf-success-color);
322
- --pf-border-color-neutral: var(--pf-neutral-color);
323
- --pf-border-color-pending: var(--pf-pending-color);
324
- --pf-horizontal-line-color: var(--pf-border-color-primary);
463
+ --pf-icon-size-xs: 10px;
464
+ --pf-icon-size-sm: 12px;
465
+ --pf-icon-size-md: 16px;
466
+ --pf-icon-size-lg: 24px;
467
+ --pf-icon-size-xl: 32px;
468
+ --pf-icon-size-2xl: 48px;
469
+ --pf-icon-size-3xl: 64px;
325
470
  }
326
471
 
327
472
  :root {
328
- --pf-padding-0: 0;
329
- --pf-padding-1: 4px;
330
- --pf-padding-2: 8px;
331
- --pf-padding-3: 12px;
332
- --pf-padding-4: 16px;
333
- --pf-padding-5: 20px;
334
- --pf-padding-6: 24px;
335
- --pf-padding-7: 28px;
336
- --pf-padding-8: 32px;
337
- --pf-padding-9: 36px;
338
- --pf-padding-10: 40px;
339
- --pf-padding-11: 44px;
340
- --pf-padding-12: 48px;
341
- --pf-padding-13: 52px;
342
- --pf-padding-14: 56px;
343
- --pf-padding-15: 60px;
344
- --pf-padding-16: 64px;
473
+ --pf-shadow-xs: rgba(0, 0, 0, 0.1);
474
+ --pf-shadow-sm: rgba(0, 0, 0, 0.15);
475
+ --pf-shadow-md: rgba(0, 0, 0, 0.2);
476
+ --pf-shadow-lg: rgba(0, 0, 0, 0.25);
477
+ --pf-shadow-xl: rgba(0, 0, 0, 0.3);
478
+ --pf-shadow-2xl: rgba(0, 0, 0, 0.35);
479
+ --pf-shadow-inner: rgba(0, 0, 0, 0.2);
345
480
  }
346
481
 
347
482
  :root {
348
- --pf-margin-auto: auto;
349
- --pf-margin-0: 0;
350
- --pf-margin-1: 4px;
351
- --pf-margin-2: 8px;
352
- --pf-margin-3: 12px;
353
- --pf-margin-4: 16px;
354
- --pf-margin-5: 20px;
355
- --pf-margin-6: 24px;
356
- --pf-margin-7: 28px;
357
- --pf-margin-8: 32px;
358
- --pf-margin-9: 36px;
359
- --pf-margin-10: 40px;
360
- --pf-margin-11: 44px;
361
- --pf-margin-12: 48px;
362
- --pf-margin-13: 52px;
363
- --pf-margin-14: 56px;
364
- --pf-margin-15: 60px;
365
- --pf-margin-16: 64px;
366
- --pf-negative-margin-1: -4px;
367
- --pf-negative-margin-2: -8px;
368
- --pf-negative-margin-3: -12px;
369
- --pf-negative-margin-4: -16px;
370
- --pf-negative-margin-5: -20px;
371
- --pf-negative-margin-6: -24px;
372
- --pf-negative-margin-7: -28px;
373
- --pf-negative-margin-8: -32px;
374
- --pf-negative-margin-9: -36px;
375
- --pf-negative-margin-10: -40px;
376
- --pf-negative-margin-11: -44px;
377
- --pf-negative-margin-12: -48px;
378
- --pf-negative-margin-13: -52px;
379
- --pf-negative-margin-14: -56px;
380
- --pf-negative-margin-15: -60px;
381
- --pf-negative-margin-16: -64px;
483
+ --pf-spacing-negative-27xl: -384px;
484
+ --pf-spacing-negative-26xl: -320px;
485
+ --pf-spacing-negative-25xl: -288px;
486
+ --pf-spacing-negative-24xl: -256px;
487
+ --pf-spacing-negative-23xl: -240px;
488
+ --pf-spacing-negative-22xl: -224px;
489
+ --pf-spacing-negative-21xl: -208px;
490
+ --pf-spacing-negative-20xl: -192px;
491
+ --pf-spacing-negative-19xl: -176px;
492
+ --pf-spacing-negative-18xl: -160px;
493
+ --pf-spacing-negative-17xl: -144px;
494
+ --pf-spacing-negative-16xl: -128px;
495
+ --pf-spacing-negative-15xl: -112px;
496
+ --pf-spacing-negative-14xl: -96px;
497
+ --pf-spacing-negative-13xl: -80px;
498
+ --pf-spacing-negative-12xl: -64px;
499
+ --pf-spacing-negative-11xl: -56px;
500
+ --pf-spacing-negative-10xl: -48px;
501
+ --pf-spacing-negative-9xl: -44px;
502
+ --pf-spacing-negative-8xl: -40px;
503
+ --pf-spacing-negative-7xl: -36px;
504
+ --pf-spacing-negative-6xl: -32px;
505
+ --pf-spacing-negative-5xl: -28px;
506
+ --pf-spacing-negative-4xl: -24px;
507
+ --pf-spacing-negative-3xl: -20px;
508
+ --pf-spacing-negative-2xl: -16px;
509
+ --pf-spacing-negative-xl: -14px;
510
+ --pf-spacing-negative-lg: -12px;
511
+ --pf-spacing-negative-sm: -8px;
512
+ --pf-spacing-negative-xs: -6px;
513
+ --pf-spacing-negative-xxs: -4px;
514
+ --pf-spacing-negative-micro: -2px;
515
+ --pf-spacing-none: 0;
516
+ --pf-spacing-micro: 2px;
517
+ --pf-spacing-xxs: 4px;
518
+ --pf-spacing-xs: 6px;
519
+ --pf-spacing-sm: 8px;
520
+ --pf-spacing-md: 10px;
521
+ --pf-spacing-lg: 12px;
522
+ --pf-spacing-xl: 14px;
523
+ --pf-spacing-2xl: 16px;
524
+ --pf-spacing-3xl: 20px;
525
+ --pf-spacing-4xl: 24px;
526
+ --pf-spacing-5xl: 28px;
527
+ --pf-spacing-6xl: 32px;
528
+ --pf-spacing-7xl: 36px;
529
+ --pf-spacing-8xl: 40px;
530
+ --pf-spacing-9xl: 44px;
531
+ --pf-spacing-10xl: 48px;
532
+ --pf-spacing-11xl: 56px;
533
+ --pf-spacing-12xl: 64px;
534
+ --pf-spacing-13xl: 80px;
535
+ --pf-spacing-14xl: 96px;
536
+ --pf-spacing-15xl: 112px;
537
+ --pf-spacing-16xl: 128px;
538
+ --pf-spacing-17xl: 144px;
539
+ --pf-spacing-18xl: 160px;
540
+ --pf-spacing-19xl: 176px;
541
+ --pf-spacing-20xl: 192px;
542
+ --pf-spacing-21xl: 208px;
543
+ --pf-spacing-22xl: 224px;
544
+ --pf-spacing-23xl: 240px;
545
+ --pf-spacing-24xl: 256px;
546
+ --pf-spacing-25xl: 288px;
547
+ --pf-spacing-26xl: 320px;
548
+ --pf-spacing-27xl: 384px;
382
549
  }
383
550
 
384
551
  :root {
385
- --pf-gap-0: 0;
386
- --pf-gap-1: 4px;
387
- --pf-gap-2: 8px;
388
- --pf-gap-3: 12px;
389
- --pf-gap-4: 16px;
390
- --pf-gap-5: 20px;
391
- --pf-gap-6: 24px;
392
- --pf-gap-7: 28px;
393
- --pf-gap-8: 32px;
394
- --pf-gap-9: 36px;
395
- --pf-gap-10: 40px;
396
- --pf-gap-11: 44px;
397
- --pf-gap-12: 48px;
398
- --pf-gap-13: 52px;
399
- --pf-gap-14: 56px;
400
- --pf-gap-15: 60px;
401
- --pf-gap-16: 64px;
552
+ /** Font Family **/
553
+ --pf-font-family: Noto Sans;
554
+ /** Font Weights **/
555
+ --pf-font-weight-light: 300;
556
+ --pf-font-weight-regular: 400;
557
+ --pf-font-weight-medium: 500;
558
+ --pf-font-weight-semibold: 600;
559
+ --pf-font-weight-bold: 700;
560
+ /** Font Sizes **/
561
+ --pf-font-size-xs: 0.625rem; /* 10px */
562
+ --pf-font-size-sm: 0.75rem; /* 12px */
563
+ --pf-font-size-base: 0.8125rem; /* 13px */
564
+ --pf-font-size-md: 0.875rem; /* 14px */
565
+ --pf-font-size-lg: 0.9375rem; /* 15px */
566
+ --pf-font-size-xl: 1rem; /* 16px */
567
+ --pf-font-size-2xl: 1.125rem; /* 18px */
568
+ --pf-font-size-3xl: 1.25rem; /* 20px */
569
+ --pf-font-size-4xl: 1.5rem; /* 24px */
570
+ --pf-font-size-5xl: 1.875rem; /* 30px */
571
+ --pf-font-size-6xl: 2.125rem; /* 34px */
572
+ --pf-font-size-7xl: 2.25rem; /* 36px */
573
+ --pf-font-size-8xl: 3rem; /* 48px */
574
+ --pf-font-size-9xl: 3.75rem; /* 60px */
575
+ --pf-font-size-10xl: 6rem; /* 96px */
402
576
  }
403
577
 
404
- :root {
405
- --pf-size-0: 0;
406
- --pf-size-1: 4px;
407
- --pf-size-2: 8px;
408
- --pf-size-3: 12px;
409
- --pf-size-4: 16px;
410
- --pf-size-5: 20px;
411
- --pf-size-6: 24px;
412
- --pf-size-7: 28px;
413
- --pf-size-8: 32px;
414
- --pf-size-9: 36px;
415
- --pf-size-10: 40px;
416
- --pf-size-11: 44px;
417
- --pf-size-12: 48px;
418
- --pf-size-13: 52px;
419
- --pf-size-14: 56px;
420
- --pf-size-15: 60px;
421
- --pf-size-16: 64px;
578
+ :root [data-theme=light] {
579
+ --pf-semantic-utility-info-default: var(--pf-secondary-color-450);
580
+ --pf-semantic-utility-info-light: var(--pf-secondary-color-400);
581
+ --pf-semantic-utility-info-dark: var(--pf-secondary-color-550);
582
+ --pf-semantic-utility-warning-default: var(--pf-yellow-color-400);
583
+ --pf-semantic-utility-warning-light: var(--pf-yellow-color-300);
584
+ --pf-semantic-utility-warning-dark: var(--pf-yellow-color-550);
585
+ --pf-semantic-utility-error-default: var(--pf-red-color-450);
586
+ --pf-semantic-utility-error-light: var(--pf-red-color-300);
587
+ --pf-semantic-utility-error-dark: var(--pf-red-color-600);
588
+ --pf-semantic-utility-success-default: var(--pf-green-color-500);
589
+ --pf-semantic-utility-success-light: var(--pf-green-color-400);
590
+ --pf-semantic-utility-success-dark: var(--pf-green-color-600);
591
+ --pf-semantic-utility-neutral-default: var(--pf-gray-color-500);
592
+ --pf-semantic-utility-neutral-light: var(--pf-gray-color-400);
593
+ --pf-semantic-utility-neutral-dark: var(--pf-gray-color-600);
594
+ --pf-semantic-utility-brand-default: var(--pf-blue-color-450);
595
+ --pf-semantic-utility-brand-light: var(--pf-blue-color-300);
596
+ --pf-semantic-utility-brand-dark: var(--pf-blue-color-550);
597
+ --pf-semantic-utility-pending-default: var(--pf-pink-color-500);
598
+ --pf-semantic-utility-pending-light: var(--pf-pink-color-300);
599
+ --pf-semantic-utility-pending-dark: var(--pf-pink-color-600);
600
+ --pf-semantic-utility-orange-default: var(--pf-orange-color-400);
601
+ --pf-semantic-utility-orange-light: var(--pf-orange-color-300);
602
+ --pf-semantic-utility-orange-dark: var(--pf-orange-color-500);
603
+ --pf-semantic-utility-purple-default: var(--pf-purple-color-500);
604
+ --pf-semantic-utility-purple-light: var(--pf-purple-color-300);
605
+ --pf-semantic-utility-purple-dark: var(--pf-purple-color-600);
606
+ --pf-semantic-utility-teal-default: var(--pf-teal-color-550);
607
+ --pf-semantic-utility-teal-light: var(--pf-teal-color-300);
608
+ --pf-semantic-utility-teal-dark: var(--pf-teal-color-600);
609
+ --pf-semantic-page-background: var(--pf-gray-color-100);
610
+ --pf-semantic-background-primary: var(--pf-gray-color-150);
611
+ --pf-semantic-background-secondary: var(--pf-gray-color-50);
612
+ --pf-semantic-background-tertiary: var(--pf-gray-color-200);
613
+ --pf-semantic-background-quaternary: var(--pf-gray-color-250);
614
+ --pf-semantic-background-accent: var(--pf-secondary-color-200);
615
+ --pf-semantic-background-highlight: var(--pf-blue-color-250);
616
+ --pf-semantic-background-brand-solid: var(--pf-blue-color-500);
617
+ --pf-semantic-background-brand-hover: var(--pf-blue-color-600);
618
+ --pf-semantic-background-inverted: var(--pf-tertiary-color-900);
619
+ --pf-semantic-border-primary: var(--pf-gray-color-300);
620
+ --pf-semantic-border-secondary: var(--pf-gray-color-250);
621
+ --pf-semantic-border-hover: var(--pf-gray-color-400);
622
+ --pf-semantic-border-soft: var(--pf-secondary-color-450);
623
+ --pf-semantic-border-accent: var(--pf-blue-color-450);
624
+ --pf-semantic-border-error: var(--pf-red-color-450);
625
+ --pf-semantic-border-warning: var(--pf-yellow-color-400);
626
+ --pf-semantic-border-pending: var(--pf-orange-color-400);
627
+ --pf-semantic-border-success: var(--pf-green-color-500);
628
+ --pf-semantic-border-info: var(--pf-secondary-color-450);
629
+ --pf-semantic-border-neutral: var(--pf-gray-color-500);
630
+ --pf-semantic-logo-primary: var(--pf-blue-color-450);
631
+ --pf-semantic-logo-secondary: var(--pf-primary-color-800);
632
+ --pf-semantic-font-regular: var(--pf-primary-color-800);
633
+ --pf-semantic-font-inverted: var(--pf-gray-color-50);
634
+ --pf-semantic-font-soft: var(--pf-gray-color-700);
635
+ --pf-semantic-font-mute: var(--pf-gray-color-800);
636
+ --pf-semantic-font-link: var(--pf-blue-color-500);
637
+ --pf-semantic-font-placeholder: var(--pf-gray-color-450);
638
+ --pf-semantic-font-disabled: var(--pf-gray-color-400);
639
+ --pf-semantic-font-accent: var(--pf-blue-color-500);
640
+ --pf-semantic-font-error: var(--pf-red-color-450);
641
+ --pf-semantic-font-success: var(--pf-green-color-600);
642
+ --pf-semantic-elevation-1: var(--pf-opacity-black-100);
643
+ --pf-semantic-elevation-2: var(--pf-opacity-black-150);
644
+ --pf-semantic-elevation-3: var(--pf-opacity-black-200);
645
+ --pf-semantic-elevation-4: var(--pf-opacity-black-250);
646
+ --pf-semantic-elevation-5: var(--pf-opacity-black-300);
422
647
  }
423
648
 
424
- :root,
425
- :root [data-theme=light],
426
649
  :root [data-theme=dark] {
427
- --pf-shadow-1: 1px 2px 4px 0px rgba(0, 0, 0, 0.1);
428
- --pf-shadow-2: 5px 0 10px rgba(0, 0, 0, 0.3);
429
- --pf-shadow-3: 0px 4px 12px rgba(0, 0, 0, 0.15);
430
- --pf-focus-alignment: 0px 0px 0px 4px;
650
+ --pf-semantic-utility-info-default: var(--pf-secondary-color-450);
651
+ --pf-semantic-utility-info-light: var(--pf-secondary-color-400);
652
+ --pf-semantic-utility-info-dark: var(--pf-secondary-color-550);
653
+ --pf-semantic-utility-warning-default: var(--pf-yellow-color-400);
654
+ --pf-semantic-utility-warning-light: var(--pf-yellow-color-300);
655
+ --pf-semantic-utility-warning-dark: var(--pf-yellow-color-550);
656
+ --pf-semantic-utility-error-default: var(--pf-red-color-450);
657
+ --pf-semantic-utility-error-light: var(--pf-red-color-300);
658
+ --pf-semantic-utility-error-dark: var(--pf-red-color-500);
659
+ --pf-semantic-utility-success-default: var(--pf-green-color-500);
660
+ --pf-semantic-utility-success-light: var(--pf-green-color-400);
661
+ --pf-semantic-utility-success-dark: var(--pf-green-color-600);
662
+ --pf-semantic-utility-neutral-default: var(--pf-gray-color-500);
663
+ --pf-semantic-utility-neutral-light: var(--pf-gray-color-400);
664
+ --pf-semantic-utility-neutral-dark: var(--pf-gray-color-600);
665
+ --pf-semantic-utility-brand-default: var(--pf-blue-color-450);
666
+ --pf-semantic-utility-brand-light: var(--pf-blue-color-300);
667
+ --pf-semantic-utility-brand-dark: var(--pf-blue-color-550);
668
+ --pf-semantic-utility-pending-default: var(--pf-pink-color-500);
669
+ --pf-semantic-utility-pending-light: var(--pf-pink-color-300);
670
+ --pf-semantic-utility-pending-dark: var(--pf-pink-color-600);
671
+ --pf-semantic-utility-orange-default: var(--pf-orange-color-400);
672
+ --pf-semantic-utility-orange-light: var(--pf-orange-color-300);
673
+ --pf-semantic-utility-orange-dark: var(--pf-orange-color-500);
674
+ --pf-semantic-utility-purple-default: var(--pf-purple-color-500);
675
+ --pf-semantic-utility-purple-light: var(--pf-purple-color-300);
676
+ --pf-semantic-utility-purple-dark: var(--pf-purple-color-600);
677
+ --pf-semantic-utility-teal-default: var(--pf-teal-color-550);
678
+ --pf-semantic-utility-teal-light: var(--pf-teal-color-300);
679
+ --pf-semantic-utility-teal-dark: var(--pf-teal-color-600);
680
+ --pf-semantic-page-background: var(--pf-primary-color-700);
681
+ --pf-semantic-background-primary: var(--pf-primary-color-900);
682
+ --pf-semantic-background-secondary: var(--pf-primary-color-800);
683
+ --pf-semantic-background-tertiary: var(--pf-primary-color-600);
684
+ --pf-semantic-background-quaternary: var(--pf-primary-color-500);
685
+ --pf-semantic-background-accent: var(--pf-blue-color-800);
686
+ --pf-semantic-background-highlight: var(--pf-blue-color-700);
687
+ --pf-semantic-background-brand-solid: var(--pf-secondary-color-450);
688
+ --pf-semantic-background-brand-hover: var(--pf-secondary-color-600);
689
+ --pf-semantic-background-inverted: var(--pf-tertiary-color-100);
690
+ --pf-semantic-border-primary: var(--pf-tertiary-color-700);
691
+ --pf-semantic-border-secondary: var(--pf-primary-color-600);
692
+ --pf-semantic-border-hover: var(--pf-tertiary-color-600);
693
+ --pf-semantic-border-soft: var(--pf-secondary-color-600);
694
+ --pf-semantic-border-accent: var(--pf-secondary-color-400);
695
+ --pf-semantic-border-error: var(--pf-red-color-450);
696
+ --pf-semantic-border-warning: var(--pf-yellow-color-400);
697
+ --pf-semantic-border-pending: var(--pf-orange-color-400);
698
+ --pf-semantic-border-success: var(--pf-green-color-500);
699
+ --pf-semantic-border-info: var(--pf-secondary-color-450);
700
+ --pf-semantic-border-neutral: var(--pf-gray-color-500);
701
+ --pf-semantic-logo-primary: var(--pf-blue-color-450);
702
+ --pf-semantic-logo-secondary: var(--pf-gray-color-50);
703
+ --pf-semantic-font-regular: var(--pf-gray-color-50);
704
+ --pf-semantic-font-inverted: var(--pf-gray-color-900);
705
+ --pf-semantic-font-soft: var(--pf-tertiary-color-300);
706
+ --pf-semantic-font-mute: var(--pf-tertiary-color-400);
707
+ --pf-semantic-font-link: var(--pf-secondary-color-400);
708
+ --pf-semantic-font-placeholder: var(--pf-tertiary-color-450);
709
+ --pf-semantic-font-disabled: var(--pf-tertiary-color-700);
710
+ --pf-semantic-font-accent: var(--pf-secondary-color-400);
711
+ --pf-semantic-font-error: var(--pf-red-color-300);
712
+ --pf-semantic-font-success: var(--pf-green-color-400);
713
+ --pf-semantic-elevation-1: var(--pf-opacity-black-200);
714
+ --pf-semantic-elevation-2: var(--pf-opacity-black-250);
715
+ --pf-semantic-elevation-3: var(--pf-opacity-black-300);
716
+ --pf-semantic-elevation-4: var(--pf-opacity-black-400);
717
+ --pf-semantic-elevation-5: var(--pf-opacity-black-450);
431
718
  }
432
719
 
433
720
  .cursor--pointer {