@indico-data/design-system 3.0.4 → 3.0.6

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 (15) hide show
  1. package/lib/index.css +156 -85
  2. package/lib/index.esm.css +156 -85
  3. package/package.json +1 -1
  4. package/src/components/forms/radio/Radio.stories.tsx +17 -13
  5. package/src/components/forms/radio/styles/Radio.scss +0 -1
  6. package/src/styles/_gap.scss +18 -0
  7. package/src/styles/_padding.scss +15 -11
  8. package/src/styles/globals.scss +15 -39
  9. package/src/styles/index.scss +1 -0
  10. package/src/styles/variables/_gap.scss +19 -0
  11. package/src/styles/variables/index.scss +1 -0
  12. package/src/styles/variables/themes/dark.scss +30 -27
  13. package/src/styles/variables/themes/light.scss +23 -19
  14. package/src/stylesAndAnimations/sizing/Sizing.mdx +19 -19
  15. package/src/stylesAndAnimations/utilityClasses/UtilityClassesData.ts +17 -0
package/lib/index.css CHANGED
@@ -57,6 +57,7 @@
57
57
  --pf-secondary-color-400: #3ea2ea;
58
58
  --pf-secondary-color-450: #188bdc;
59
59
  --pf-secondary-color-500: #1474b8;
60
+ --pf-secondary-color-550: #1268a5;
60
61
  --pf-secondary-color-600: #0f578a;
61
62
  --pf-secondary-color-700: #1d4058;
62
63
  --pf-secondary-color-800: #132939;
@@ -75,17 +76,18 @@
75
76
  --pf-tertiary-color-700: #4b5364;
76
77
  --pf-tertiary-color-800: #2c303a;
77
78
  --pf-tertiary-color-900: #111317;
78
- --pf-gray-color: #b2b2b2;
79
+ --pf-gray-color: #808080;
79
80
  --pf-gray-color-50: #ffffff;
80
- --pf-gray-color-100: #f8f8f8;
81
+ --pf-gray-color-100: #f7f7f7;
81
82
  --pf-gray-color-150: #f2f2f2;
82
83
  --pf-gray-color-200: #e6e6e6;
83
84
  --pf-gray-color-250: #d9d9d9;
84
85
  --pf-gray-color-300: #cccccc;
85
86
  --pf-gray-color-400: #b2b2b2;
86
- --pf-gray-color-450: #999999;
87
- --pf-gray-color-500: #7f7f7f;
88
- --pf-gray-color-600: #666666;
87
+ --pf-gray-color-450: #949494;
88
+ --pf-gray-color-500: #808080;
89
+ --pf-gray-color-550: #666666;
90
+ --pf-gray-color-600: #606060;
89
91
  --pf-gray-color-700: #4d4d4d;
90
92
  --pf-gray-color-800: #333333;
91
93
  --pf-gray-color-900: #000000;
@@ -170,7 +172,8 @@
170
172
  --pf-teal-color-400: #3eeaea;
171
173
  --pf-teal-color-450: #25d0d0;
172
174
  --pf-teal-color-500: #29a3a3;
173
- --pf-teal-color-600: #267373;
175
+ --pf-teal-color-550: #267373;
176
+ --pf-teal-color-600: #1c5656;
174
177
  --pf-teal-color-700: #235252;
175
178
  --pf-teal-color-800: #1b3232;
176
179
  --pf-teal-color-900: #101818;
@@ -184,6 +187,7 @@
184
187
  --pf-brand-color-400: #2989ff;
185
188
  --pf-brand-color-450: #0070f5;
186
189
  --pf-brand-color-500: #005ccc;
190
+ --pf-brand-color-550: #0054b8;
187
191
  --pf-brand-color-600: #004599;
188
192
  --pf-brand-color-700: #06356f;
189
193
  --pf-brand-color-800: #082345;
@@ -233,23 +237,23 @@
233
237
  --pf-black-color-90: rgba(0, 0, 0, 0.9);
234
238
  --pf-black-color-100: rgba(0, 0, 0, 1);
235
239
  --pf-error-color: var(--pf-red-color-450);
236
- --pf-error-color-dark: color-mix(in srgb, var(--pf-red-color-450) 75%, black);
237
- --pf-error-color-light: color-mix(in srgb, var(--pf-red-color-450) 60%, white);
240
+ --pf-error-color-dark: var(--pf-red-color-500);
241
+ --pf-error-color-light: var(--pf-red-color-300);
238
242
  --pf-success-color: var(--pf-green-color-500);
239
- --pf-success-color-dark: color-mix(in srgb, var(--pf-green-color-500) 70%, black);
240
- --pf-success-color-light: color-mix(in srgb, var(--pf-green-color-500) 60%, white);
241
- --pf-warning-color: var(--pf-yellow-color-450);
242
- --pf-warning-color-dark: color-mix(in srgb, var(--pf-yellow-color-450) 50%, black);
243
- --pf-warning-color-light: color-mix(in srgb, var(--pf-yellow-color-50) 60%, white);
243
+ --pf-success-color-dark: var(--pf-green-color-600);
244
+ --pf-success-color-light: var(--pf-green-color-400);
245
+ --pf-warning-color: var(--pf-yellow-color-400);
246
+ --pf-warning-color-dark: var(--pf-yellow-color-550);
247
+ --pf-warning-color-light: var(--pf-yellow-color-300);
244
248
  --pf-neutral-color: var(--pf-gray-color-500);
245
- --pf-neutral-color-dark: color-mix(in srgb, var(--pf-gray-color-500) 75%, black);
246
- --pf-neutral-color-light: color-mix(in srgb, var(--pf-gray-color-500) 60%, white);
249
+ --pf-neutral-color-dark: var(--pf-gray-color-600);
250
+ --pf-neutral-color-light: var(--pf-gray-color-400);
247
251
  --pf-info-color: var(--pf-secondary-color-450);
248
- --pf-info-color-dark: color-mix(in srgb, var(--pf-secondary-color-450) 75%, black);
249
- --pf-info-color-light: color-mix(in srgb, var(--pf-secondary-color-450) 60%, white);
252
+ --pf-info-color-dark: var(--pf-secondary-color-550);
253
+ --pf-info-color-light: var(--pf-secondary-color-400);
250
254
  --pf-brand-color: var(--pf-brand-color-450);
251
- --pf-brand-color-dark: color-mix(in srgb, var(--pf-brand-color-450) 75%, black);
252
- --pf-brand-color-light: color-mix(in srgb, var(--pf-brand-color-450) 60%, white);
255
+ --pf-brand-color-dark: var(--pf-brand-color-550);
256
+ --pf-brand-color-light: var(--pf-brand-color-300);
253
257
  --pf-pending-color: var(--pf-pink-color-450);
254
258
  --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
255
259
  --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
@@ -281,6 +285,7 @@
281
285
  --pf-secondary-color-400: #3ea2ea;
282
286
  --pf-secondary-color-450: #188bdc;
283
287
  --pf-secondary-color-500: #1474b8;
288
+ --pf-secondary-color-550: #1268a5;
284
289
  --pf-secondary-color-600: #0f578a;
285
290
  --pf-secondary-color-700: #1d4058;
286
291
  --pf-secondary-color-800: #132939;
@@ -299,19 +304,20 @@
299
304
  --pf-tertiary-color-700: #4b5364;
300
305
  --pf-tertiary-color-800: #2c303a;
301
306
  --pf-tertiary-color-900: #111317;
302
- --pf-gray-color: #b2b2b2;
307
+ --pf-gray-color: #808080;
303
308
  --pf-gray-color-50: #ffffff;
304
- --pf-gray-color-100: #fafafa;
305
- --pf-gray-color-150: #f5f5f5;
306
- --pf-gray-color-200: #f0f0f0;
307
- --pf-gray-color-250: #ebebeb;
308
- --pf-gray-color-300: #e6e6e6;
309
- --pf-gray-color-400: #dedede;
310
- --pf-gray-color-450: #c7c7c7;
311
- --pf-gray-color-500: #b2b2b2;
312
- --pf-gray-color-600: #8f8f8f;
313
- --pf-gray-color-700: #5e5959;
314
- --pf-gray-color-800: #272525;
309
+ --pf-gray-color-100: #f7f7f7;
310
+ --pf-gray-color-150: #f2f2f2;
311
+ --pf-gray-color-200: #e6e6e6;
312
+ --pf-gray-color-250: #d9d9d9;
313
+ --pf-gray-color-300: #cccccc;
314
+ --pf-gray-color-400: #b2b2b2;
315
+ --pf-gray-color-450: #949494;
316
+ --pf-gray-color-500: #808080;
317
+ --pf-gray-color-550: #666666;
318
+ --pf-gray-color-600: #606060;
319
+ --pf-gray-color-700: #4d4d4d;
320
+ --pf-gray-color-800: #333333;
315
321
  --pf-gray-color-900: #000000;
316
322
  --pf-red-color: #a3292d;
317
323
  --pf-red-color-50: #fdf6f8;
@@ -394,7 +400,8 @@
394
400
  --pf-teal-color-400: #3eeaea;
395
401
  --pf-teal-color-450: #25d0d0;
396
402
  --pf-teal-color-500: #29a3a3;
397
- --pf-teal-color-600: #267373;
403
+ --pf-teal-color-550: #267373;
404
+ --pf-teal-color-600: #1c5656;
398
405
  --pf-teal-color-700: #235252;
399
406
  --pf-teal-color-800: #1b3232;
400
407
  --pf-teal-color-900: #101818;
@@ -408,6 +415,7 @@
408
415
  --pf-brand-color-400: #2989ff;
409
416
  --pf-brand-color-450: #0070f5;
410
417
  --pf-brand-color-500: #005ccc;
418
+ --pf-brand-color-550: #0054b8;
411
419
  --pf-brand-color-600: #004599;
412
420
  --pf-brand-color-700: #06356f;
413
421
  --pf-brand-color-800: #082345;
@@ -457,23 +465,23 @@
457
465
  --pf-black-color-90: rgba(0, 0, 0, 0.9);
458
466
  --pf-black-color-100: rgba(0, 0, 0, 1);
459
467
  --pf-error-color: var(--pf-red-color-450);
460
- --pf-error-color-dark: color-mix(in srgb, var(--pf-red-color-450) 75%, black);
461
- --pf-error-color-light: color-mix(in srgb, var(--pf-red-color-450) 60%, white);
468
+ --pf-error-color-dark: var(--pf-red-color-500);
469
+ --pf-error-color-light: var(--pf-red-color-300);
462
470
  --pf-success-color: var(--pf-green-color-500);
463
- --pf-success-color-dark: color-mix(in srgb, var(--pf-green-color-500) 70%, black);
464
- --pf-success-color-light: color-mix(in srgb, var(--pf-green-color-500) 60%, white);
465
- --pf-warning-color: var(--pf-yellow-color-450);
466
- --pf-warning-color-dark: color-mix(in srgb, var(--pf-yellow-color-450) 50%, black);
467
- --pf-warning-color-light: color-mix(in srgb, var(--pf-yellow-color-50) 60%, white);
471
+ --pf-success-color-dark: var(--pf-green-color-600);
472
+ --pf-success-color-light: var(--pf-green-color-400);
473
+ --pf-warning-color: var(--pf-yellow-color-400);
474
+ --pf-warning-color-dark: var(--pf-yellow-color-550);
475
+ --pf-warning-color-light: var(--pf-yellow-color-300);
468
476
  --pf-neutral-color: var(--pf-gray-color-500);
469
- --pf-neutral-color-dark: color-mix(in srgb, var(--pf-gray-color-500) 75%, black);
470
- --pf-neutral-color-light: color-mix(in srgb, var(--pf-gray-color-500) 60%, white);
477
+ --pf-neutral-color-dark: var(--pf-gray-color-600);
478
+ --pf-neutral-color-light: var(--pf-gray-color-400);
471
479
  --pf-info-color: var(--pf-secondary-color-450);
472
- --pf-info-color-dark: color-mix(in srgb, var(--pf-secondary-color-450) 75%, black);
473
- --pf-info-color-light: color-mix(in srgb, var(--pf-secondary-color-450) 60%, white);
480
+ --pf-info-color-dark: var(--pf-secondary-color-550);
481
+ --pf-info-color-light: var(--pf-secondary-color-400);
474
482
  --pf-brand-color: var(--pf-brand-color-450);
475
- --pf-brand-color-dark: color-mix(in srgb, var(--pf-brand-color-450) 75%, black);
476
- --pf-brand-color-light: color-mix(in srgb, var(--pf-brand-color-450) 60%, white);
483
+ --pf-brand-color-dark: var(--pf-brand-color-550);
484
+ --pf-brand-color-light: var(--pf-brand-color-300);
477
485
  --pf-pending-color: var(--pf-pink-color-450);
478
486
  --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
479
487
  --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
@@ -591,6 +599,26 @@
591
599
  --pf-negative-margin-16: -64px;
592
600
  }
593
601
 
602
+ :root {
603
+ --pf-gap-0: 0;
604
+ --pf-gap-1: 4px;
605
+ --pf-gap-2: 8px;
606
+ --pf-gap-3: 12px;
607
+ --pf-gap-4: 16px;
608
+ --pf-gap-5: 20px;
609
+ --pf-gap-6: 24px;
610
+ --pf-gap-7: 28px;
611
+ --pf-gap-8: 32px;
612
+ --pf-gap-9: 36px;
613
+ --pf-gap-10: 40px;
614
+ --pf-gap-11: 44px;
615
+ --pf-gap-12: 48px;
616
+ --pf-gap-13: 52px;
617
+ --pf-gap-14: 56px;
618
+ --pf-gap-15: 60px;
619
+ --pf-gap-16: 64px;
620
+ }
621
+
594
622
  :root {
595
623
  --pf-size-0: 0;
596
624
  --pf-size-1: 4px;
@@ -650,26 +678,14 @@
650
678
  --pf-secondary-link-color: var(--pf-tertiary-color-700);
651
679
  --pf-secondary-link-hover-color: var(--pf-tertiary-color-800);
652
680
  --pf-active-link-color: var(--pf-brand-color-500);
653
- --pf-line-chart-color-one: #256579;
654
- --pf-line-chart-color-two: #277a93;
655
- --pf-line-chart-color-three: #2b97af;
656
- --pf-line-chart-color-four: #4db8cb;
681
+ --pf-line-chart-color-one: #2b97af;
682
+ --pf-line-chart-color-two: #3ca7bd;
683
+ --pf-line-chart-color-three: #4db8cb;
684
+ --pf-line-chart-color-four: #67c4d5;
657
685
  --pf-line-chart-color-five: #81d1df;
658
- --pf-line-chart-color-six: #0e3d7e;
659
- --pf-line-chart-color-seven: #1562c1;
660
- --pf-line-chart-color-eight: #36a1e9;
661
- --pf-line-chart-color-nine: #83c5f6;
662
- --pf-line-chart-color-ten: #afd8f4;
663
- --pf-line-chart-color-eleven: #45267d;
664
- --pf-line-chart-color-twelve: #5d2fb1;
665
- --pf-line-chart-color-thirteen: #7047d2;
666
- --pf-line-chart-color-fourteen: #8d75d7;
667
- --pf-line-chart-color-fifteen: #bdaeea;
668
- --pf-line-chart-color-sixteen: #003b8c;
669
- --pf-line-chart-color-seventeen: #0060d6;
670
- --pf-line-chart-color-eighteen: #36a1ea;
671
- --pf-line-chart-color-nineteen: #2b97af;
672
- --pf-line-chart-color-twenty: #7047d2;
686
+ --pf-line-chart-color-six: #b5e4ec;
687
+ --pf-line-chart-color-seven: #c6eaf1;
688
+ --pf-line-chart-color-eight: #d7f1f6;
673
689
  }
674
690
 
675
691
  :root [data-theme=dark],
@@ -704,26 +720,14 @@
704
720
  --pf-secondary-link-color: var(--pf-tertiary-color-450);
705
721
  --pf-secondary-link-hover-color: var(--pf-tertiary-color-400);
706
722
  --pf-active-link-color: var(--pf-secondary-color-400);
707
- --pf-line-chart-color-one: #2b97af;
708
- --pf-line-chart-color-two: #4db8cb;
709
- --pf-line-chart-color-three: #81d1df;
710
- --pf-line-chart-color-four: #b5e4ec;
711
- --pf-line-chart-color-five: #d7f1f6;
712
- --pf-line-chart-color-six: #042d6a;
713
- --pf-line-chart-color-seven: #0955b3;
714
- --pf-line-chart-color-eight: #1f8fe0;
715
- --pf-line-chart-color-nine: #5bbeed;
716
- --pf-line-chart-color-ten: #a8dcfa;
717
- --pf-line-chart-color-eleven: #572baf;
718
- --pf-line-chart-color-twelve: #774dcb;
719
- --pf-line-chart-color-thirteen: #9d81df;
720
- --pf-line-chart-color-fourteen: #c5b5ec;
721
- --pf-line-chart-color-fifteen: #e0d7f6;
722
- --pf-line-chart-color-sixteen: #0070f5;
723
- --pf-line-chart-color-seventeen: #36a1ea;
724
- --pf-line-chart-color-eighteen: #80c3f2;
725
- --pf-line-chart-color-nineteen: #4db8cb;
726
- --pf-line-chart-color-twenty: #774dcb;
723
+ --pf-line-chart-color-one: #256579;
724
+ --pf-line-chart-color-two: #266f86;
725
+ --pf-line-chart-color-three: #277a93;
726
+ --pf-line-chart-color-four: #2989a1;
727
+ --pf-line-chart-color-five: #2b97af;
728
+ --pf-line-chart-color-six: #4db8cb;
729
+ --pf-line-chart-color-seven: #67c5d5;
730
+ --pf-line-chart-color-eight: #81d1df;
727
731
  }
728
732
 
729
733
  html,
@@ -1347,7 +1351,6 @@ a:hover,
1347
1351
 
1348
1352
  .radio-wrapper {
1349
1353
  display: flex;
1350
- margin-bottom: var(--pf-margin-2);
1351
1354
  align-items: center;
1352
1355
  }
1353
1356
 
@@ -8008,6 +8011,74 @@ p,
8008
8011
  margin-top: var(--pf-negative-margin-16);
8009
8012
  }
8010
8013
 
8014
+ .gap-0 {
8015
+ gap: var(--pf-gap-0);
8016
+ }
8017
+
8018
+ .gap-1 {
8019
+ gap: var(--pf-gap-1);
8020
+ }
8021
+
8022
+ .gap-2 {
8023
+ gap: var(--pf-gap-2);
8024
+ }
8025
+
8026
+ .gap-3 {
8027
+ gap: var(--pf-gap-3);
8028
+ }
8029
+
8030
+ .gap-4 {
8031
+ gap: var(--pf-gap-4);
8032
+ }
8033
+
8034
+ .gap-5 {
8035
+ gap: var(--pf-gap-5);
8036
+ }
8037
+
8038
+ .gap-6 {
8039
+ gap: var(--pf-gap-6);
8040
+ }
8041
+
8042
+ .gap-7 {
8043
+ gap: var(--pf-gap-7);
8044
+ }
8045
+
8046
+ .gap-8 {
8047
+ gap: var(--pf-gap-8);
8048
+ }
8049
+
8050
+ .gap-9 {
8051
+ gap: var(--pf-gap-9);
8052
+ }
8053
+
8054
+ .gap-10 {
8055
+ gap: var(--pf-gap-10);
8056
+ }
8057
+
8058
+ .gap-11 {
8059
+ gap: var(--pf-gap-11);
8060
+ }
8061
+
8062
+ .gap-12 {
8063
+ gap: var(--pf-gap-12);
8064
+ }
8065
+
8066
+ .gap-13 {
8067
+ gap: var(--pf-gap-13);
8068
+ }
8069
+
8070
+ .gap-14 {
8071
+ gap: var(--pf-gap-14);
8072
+ }
8073
+
8074
+ .gap-15 {
8075
+ gap: var(--pf-gap-15);
8076
+ }
8077
+
8078
+ .gap-16 {
8079
+ gap: var(--pf-gap-16);
8080
+ }
8081
+
8011
8082
  @keyframes spin {
8012
8083
  0% {
8013
8084
  transform: rotate(0deg);
package/lib/index.esm.css CHANGED
@@ -57,6 +57,7 @@
57
57
  --pf-secondary-color-400: #3ea2ea;
58
58
  --pf-secondary-color-450: #188bdc;
59
59
  --pf-secondary-color-500: #1474b8;
60
+ --pf-secondary-color-550: #1268a5;
60
61
  --pf-secondary-color-600: #0f578a;
61
62
  --pf-secondary-color-700: #1d4058;
62
63
  --pf-secondary-color-800: #132939;
@@ -75,17 +76,18 @@
75
76
  --pf-tertiary-color-700: #4b5364;
76
77
  --pf-tertiary-color-800: #2c303a;
77
78
  --pf-tertiary-color-900: #111317;
78
- --pf-gray-color: #b2b2b2;
79
+ --pf-gray-color: #808080;
79
80
  --pf-gray-color-50: #ffffff;
80
- --pf-gray-color-100: #f8f8f8;
81
+ --pf-gray-color-100: #f7f7f7;
81
82
  --pf-gray-color-150: #f2f2f2;
82
83
  --pf-gray-color-200: #e6e6e6;
83
84
  --pf-gray-color-250: #d9d9d9;
84
85
  --pf-gray-color-300: #cccccc;
85
86
  --pf-gray-color-400: #b2b2b2;
86
- --pf-gray-color-450: #999999;
87
- --pf-gray-color-500: #7f7f7f;
88
- --pf-gray-color-600: #666666;
87
+ --pf-gray-color-450: #949494;
88
+ --pf-gray-color-500: #808080;
89
+ --pf-gray-color-550: #666666;
90
+ --pf-gray-color-600: #606060;
89
91
  --pf-gray-color-700: #4d4d4d;
90
92
  --pf-gray-color-800: #333333;
91
93
  --pf-gray-color-900: #000000;
@@ -170,7 +172,8 @@
170
172
  --pf-teal-color-400: #3eeaea;
171
173
  --pf-teal-color-450: #25d0d0;
172
174
  --pf-teal-color-500: #29a3a3;
173
- --pf-teal-color-600: #267373;
175
+ --pf-teal-color-550: #267373;
176
+ --pf-teal-color-600: #1c5656;
174
177
  --pf-teal-color-700: #235252;
175
178
  --pf-teal-color-800: #1b3232;
176
179
  --pf-teal-color-900: #101818;
@@ -184,6 +187,7 @@
184
187
  --pf-brand-color-400: #2989ff;
185
188
  --pf-brand-color-450: #0070f5;
186
189
  --pf-brand-color-500: #005ccc;
190
+ --pf-brand-color-550: #0054b8;
187
191
  --pf-brand-color-600: #004599;
188
192
  --pf-brand-color-700: #06356f;
189
193
  --pf-brand-color-800: #082345;
@@ -233,23 +237,23 @@
233
237
  --pf-black-color-90: rgba(0, 0, 0, 0.9);
234
238
  --pf-black-color-100: rgba(0, 0, 0, 1);
235
239
  --pf-error-color: var(--pf-red-color-450);
236
- --pf-error-color-dark: color-mix(in srgb, var(--pf-red-color-450) 75%, black);
237
- --pf-error-color-light: color-mix(in srgb, var(--pf-red-color-450) 60%, white);
240
+ --pf-error-color-dark: var(--pf-red-color-500);
241
+ --pf-error-color-light: var(--pf-red-color-300);
238
242
  --pf-success-color: var(--pf-green-color-500);
239
- --pf-success-color-dark: color-mix(in srgb, var(--pf-green-color-500) 70%, black);
240
- --pf-success-color-light: color-mix(in srgb, var(--pf-green-color-500) 60%, white);
241
- --pf-warning-color: var(--pf-yellow-color-450);
242
- --pf-warning-color-dark: color-mix(in srgb, var(--pf-yellow-color-450) 50%, black);
243
- --pf-warning-color-light: color-mix(in srgb, var(--pf-yellow-color-50) 60%, white);
243
+ --pf-success-color-dark: var(--pf-green-color-600);
244
+ --pf-success-color-light: var(--pf-green-color-400);
245
+ --pf-warning-color: var(--pf-yellow-color-400);
246
+ --pf-warning-color-dark: var(--pf-yellow-color-550);
247
+ --pf-warning-color-light: var(--pf-yellow-color-300);
244
248
  --pf-neutral-color: var(--pf-gray-color-500);
245
- --pf-neutral-color-dark: color-mix(in srgb, var(--pf-gray-color-500) 75%, black);
246
- --pf-neutral-color-light: color-mix(in srgb, var(--pf-gray-color-500) 60%, white);
249
+ --pf-neutral-color-dark: var(--pf-gray-color-600);
250
+ --pf-neutral-color-light: var(--pf-gray-color-400);
247
251
  --pf-info-color: var(--pf-secondary-color-450);
248
- --pf-info-color-dark: color-mix(in srgb, var(--pf-secondary-color-450) 75%, black);
249
- --pf-info-color-light: color-mix(in srgb, var(--pf-secondary-color-450) 60%, white);
252
+ --pf-info-color-dark: var(--pf-secondary-color-550);
253
+ --pf-info-color-light: var(--pf-secondary-color-400);
250
254
  --pf-brand-color: var(--pf-brand-color-450);
251
- --pf-brand-color-dark: color-mix(in srgb, var(--pf-brand-color-450) 75%, black);
252
- --pf-brand-color-light: color-mix(in srgb, var(--pf-brand-color-450) 60%, white);
255
+ --pf-brand-color-dark: var(--pf-brand-color-550);
256
+ --pf-brand-color-light: var(--pf-brand-color-300);
253
257
  --pf-pending-color: var(--pf-pink-color-450);
254
258
  --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
255
259
  --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
@@ -281,6 +285,7 @@
281
285
  --pf-secondary-color-400: #3ea2ea;
282
286
  --pf-secondary-color-450: #188bdc;
283
287
  --pf-secondary-color-500: #1474b8;
288
+ --pf-secondary-color-550: #1268a5;
284
289
  --pf-secondary-color-600: #0f578a;
285
290
  --pf-secondary-color-700: #1d4058;
286
291
  --pf-secondary-color-800: #132939;
@@ -299,19 +304,20 @@
299
304
  --pf-tertiary-color-700: #4b5364;
300
305
  --pf-tertiary-color-800: #2c303a;
301
306
  --pf-tertiary-color-900: #111317;
302
- --pf-gray-color: #b2b2b2;
307
+ --pf-gray-color: #808080;
303
308
  --pf-gray-color-50: #ffffff;
304
- --pf-gray-color-100: #fafafa;
305
- --pf-gray-color-150: #f5f5f5;
306
- --pf-gray-color-200: #f0f0f0;
307
- --pf-gray-color-250: #ebebeb;
308
- --pf-gray-color-300: #e6e6e6;
309
- --pf-gray-color-400: #dedede;
310
- --pf-gray-color-450: #c7c7c7;
311
- --pf-gray-color-500: #b2b2b2;
312
- --pf-gray-color-600: #8f8f8f;
313
- --pf-gray-color-700: #5e5959;
314
- --pf-gray-color-800: #272525;
309
+ --pf-gray-color-100: #f7f7f7;
310
+ --pf-gray-color-150: #f2f2f2;
311
+ --pf-gray-color-200: #e6e6e6;
312
+ --pf-gray-color-250: #d9d9d9;
313
+ --pf-gray-color-300: #cccccc;
314
+ --pf-gray-color-400: #b2b2b2;
315
+ --pf-gray-color-450: #949494;
316
+ --pf-gray-color-500: #808080;
317
+ --pf-gray-color-550: #666666;
318
+ --pf-gray-color-600: #606060;
319
+ --pf-gray-color-700: #4d4d4d;
320
+ --pf-gray-color-800: #333333;
315
321
  --pf-gray-color-900: #000000;
316
322
  --pf-red-color: #a3292d;
317
323
  --pf-red-color-50: #fdf6f8;
@@ -394,7 +400,8 @@
394
400
  --pf-teal-color-400: #3eeaea;
395
401
  --pf-teal-color-450: #25d0d0;
396
402
  --pf-teal-color-500: #29a3a3;
397
- --pf-teal-color-600: #267373;
403
+ --pf-teal-color-550: #267373;
404
+ --pf-teal-color-600: #1c5656;
398
405
  --pf-teal-color-700: #235252;
399
406
  --pf-teal-color-800: #1b3232;
400
407
  --pf-teal-color-900: #101818;
@@ -408,6 +415,7 @@
408
415
  --pf-brand-color-400: #2989ff;
409
416
  --pf-brand-color-450: #0070f5;
410
417
  --pf-brand-color-500: #005ccc;
418
+ --pf-brand-color-550: #0054b8;
411
419
  --pf-brand-color-600: #004599;
412
420
  --pf-brand-color-700: #06356f;
413
421
  --pf-brand-color-800: #082345;
@@ -457,23 +465,23 @@
457
465
  --pf-black-color-90: rgba(0, 0, 0, 0.9);
458
466
  --pf-black-color-100: rgba(0, 0, 0, 1);
459
467
  --pf-error-color: var(--pf-red-color-450);
460
- --pf-error-color-dark: color-mix(in srgb, var(--pf-red-color-450) 75%, black);
461
- --pf-error-color-light: color-mix(in srgb, var(--pf-red-color-450) 60%, white);
468
+ --pf-error-color-dark: var(--pf-red-color-500);
469
+ --pf-error-color-light: var(--pf-red-color-300);
462
470
  --pf-success-color: var(--pf-green-color-500);
463
- --pf-success-color-dark: color-mix(in srgb, var(--pf-green-color-500) 70%, black);
464
- --pf-success-color-light: color-mix(in srgb, var(--pf-green-color-500) 60%, white);
465
- --pf-warning-color: var(--pf-yellow-color-450);
466
- --pf-warning-color-dark: color-mix(in srgb, var(--pf-yellow-color-450) 50%, black);
467
- --pf-warning-color-light: color-mix(in srgb, var(--pf-yellow-color-50) 60%, white);
471
+ --pf-success-color-dark: var(--pf-green-color-600);
472
+ --pf-success-color-light: var(--pf-green-color-400);
473
+ --pf-warning-color: var(--pf-yellow-color-400);
474
+ --pf-warning-color-dark: var(--pf-yellow-color-550);
475
+ --pf-warning-color-light: var(--pf-yellow-color-300);
468
476
  --pf-neutral-color: var(--pf-gray-color-500);
469
- --pf-neutral-color-dark: color-mix(in srgb, var(--pf-gray-color-500) 75%, black);
470
- --pf-neutral-color-light: color-mix(in srgb, var(--pf-gray-color-500) 60%, white);
477
+ --pf-neutral-color-dark: var(--pf-gray-color-600);
478
+ --pf-neutral-color-light: var(--pf-gray-color-400);
471
479
  --pf-info-color: var(--pf-secondary-color-450);
472
- --pf-info-color-dark: color-mix(in srgb, var(--pf-secondary-color-450) 75%, black);
473
- --pf-info-color-light: color-mix(in srgb, var(--pf-secondary-color-450) 60%, white);
480
+ --pf-info-color-dark: var(--pf-secondary-color-550);
481
+ --pf-info-color-light: var(--pf-secondary-color-400);
474
482
  --pf-brand-color: var(--pf-brand-color-450);
475
- --pf-brand-color-dark: color-mix(in srgb, var(--pf-brand-color-450) 75%, black);
476
- --pf-brand-color-light: color-mix(in srgb, var(--pf-brand-color-450) 60%, white);
483
+ --pf-brand-color-dark: var(--pf-brand-color-550);
484
+ --pf-brand-color-light: var(--pf-brand-color-300);
477
485
  --pf-pending-color: var(--pf-pink-color-450);
478
486
  --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
479
487
  --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
@@ -591,6 +599,26 @@
591
599
  --pf-negative-margin-16: -64px;
592
600
  }
593
601
 
602
+ :root {
603
+ --pf-gap-0: 0;
604
+ --pf-gap-1: 4px;
605
+ --pf-gap-2: 8px;
606
+ --pf-gap-3: 12px;
607
+ --pf-gap-4: 16px;
608
+ --pf-gap-5: 20px;
609
+ --pf-gap-6: 24px;
610
+ --pf-gap-7: 28px;
611
+ --pf-gap-8: 32px;
612
+ --pf-gap-9: 36px;
613
+ --pf-gap-10: 40px;
614
+ --pf-gap-11: 44px;
615
+ --pf-gap-12: 48px;
616
+ --pf-gap-13: 52px;
617
+ --pf-gap-14: 56px;
618
+ --pf-gap-15: 60px;
619
+ --pf-gap-16: 64px;
620
+ }
621
+
594
622
  :root {
595
623
  --pf-size-0: 0;
596
624
  --pf-size-1: 4px;
@@ -650,26 +678,14 @@
650
678
  --pf-secondary-link-color: var(--pf-tertiary-color-700);
651
679
  --pf-secondary-link-hover-color: var(--pf-tertiary-color-800);
652
680
  --pf-active-link-color: var(--pf-brand-color-500);
653
- --pf-line-chart-color-one: #256579;
654
- --pf-line-chart-color-two: #277a93;
655
- --pf-line-chart-color-three: #2b97af;
656
- --pf-line-chart-color-four: #4db8cb;
681
+ --pf-line-chart-color-one: #2b97af;
682
+ --pf-line-chart-color-two: #3ca7bd;
683
+ --pf-line-chart-color-three: #4db8cb;
684
+ --pf-line-chart-color-four: #67c4d5;
657
685
  --pf-line-chart-color-five: #81d1df;
658
- --pf-line-chart-color-six: #0e3d7e;
659
- --pf-line-chart-color-seven: #1562c1;
660
- --pf-line-chart-color-eight: #36a1e9;
661
- --pf-line-chart-color-nine: #83c5f6;
662
- --pf-line-chart-color-ten: #afd8f4;
663
- --pf-line-chart-color-eleven: #45267d;
664
- --pf-line-chart-color-twelve: #5d2fb1;
665
- --pf-line-chart-color-thirteen: #7047d2;
666
- --pf-line-chart-color-fourteen: #8d75d7;
667
- --pf-line-chart-color-fifteen: #bdaeea;
668
- --pf-line-chart-color-sixteen: #003b8c;
669
- --pf-line-chart-color-seventeen: #0060d6;
670
- --pf-line-chart-color-eighteen: #36a1ea;
671
- --pf-line-chart-color-nineteen: #2b97af;
672
- --pf-line-chart-color-twenty: #7047d2;
686
+ --pf-line-chart-color-six: #b5e4ec;
687
+ --pf-line-chart-color-seven: #c6eaf1;
688
+ --pf-line-chart-color-eight: #d7f1f6;
673
689
  }
674
690
 
675
691
  :root [data-theme=dark],
@@ -704,26 +720,14 @@
704
720
  --pf-secondary-link-color: var(--pf-tertiary-color-450);
705
721
  --pf-secondary-link-hover-color: var(--pf-tertiary-color-400);
706
722
  --pf-active-link-color: var(--pf-secondary-color-400);
707
- --pf-line-chart-color-one: #2b97af;
708
- --pf-line-chart-color-two: #4db8cb;
709
- --pf-line-chart-color-three: #81d1df;
710
- --pf-line-chart-color-four: #b5e4ec;
711
- --pf-line-chart-color-five: #d7f1f6;
712
- --pf-line-chart-color-six: #042d6a;
713
- --pf-line-chart-color-seven: #0955b3;
714
- --pf-line-chart-color-eight: #1f8fe0;
715
- --pf-line-chart-color-nine: #5bbeed;
716
- --pf-line-chart-color-ten: #a8dcfa;
717
- --pf-line-chart-color-eleven: #572baf;
718
- --pf-line-chart-color-twelve: #774dcb;
719
- --pf-line-chart-color-thirteen: #9d81df;
720
- --pf-line-chart-color-fourteen: #c5b5ec;
721
- --pf-line-chart-color-fifteen: #e0d7f6;
722
- --pf-line-chart-color-sixteen: #0070f5;
723
- --pf-line-chart-color-seventeen: #36a1ea;
724
- --pf-line-chart-color-eighteen: #80c3f2;
725
- --pf-line-chart-color-nineteen: #4db8cb;
726
- --pf-line-chart-color-twenty: #774dcb;
723
+ --pf-line-chart-color-one: #256579;
724
+ --pf-line-chart-color-two: #266f86;
725
+ --pf-line-chart-color-three: #277a93;
726
+ --pf-line-chart-color-four: #2989a1;
727
+ --pf-line-chart-color-five: #2b97af;
728
+ --pf-line-chart-color-six: #4db8cb;
729
+ --pf-line-chart-color-seven: #67c5d5;
730
+ --pf-line-chart-color-eight: #81d1df;
727
731
  }
728
732
 
729
733
  html,
@@ -1347,7 +1351,6 @@ a:hover,
1347
1351
 
1348
1352
  .radio-wrapper {
1349
1353
  display: flex;
1350
- margin-bottom: var(--pf-margin-2);
1351
1354
  align-items: center;
1352
1355
  }
1353
1356
 
@@ -8008,6 +8011,74 @@ p,
8008
8011
  margin-top: var(--pf-negative-margin-16);
8009
8012
  }
8010
8013
 
8014
+ .gap-0 {
8015
+ gap: var(--pf-gap-0);
8016
+ }
8017
+
8018
+ .gap-1 {
8019
+ gap: var(--pf-gap-1);
8020
+ }
8021
+
8022
+ .gap-2 {
8023
+ gap: var(--pf-gap-2);
8024
+ }
8025
+
8026
+ .gap-3 {
8027
+ gap: var(--pf-gap-3);
8028
+ }
8029
+
8030
+ .gap-4 {
8031
+ gap: var(--pf-gap-4);
8032
+ }
8033
+
8034
+ .gap-5 {
8035
+ gap: var(--pf-gap-5);
8036
+ }
8037
+
8038
+ .gap-6 {
8039
+ gap: var(--pf-gap-6);
8040
+ }
8041
+
8042
+ .gap-7 {
8043
+ gap: var(--pf-gap-7);
8044
+ }
8045
+
8046
+ .gap-8 {
8047
+ gap: var(--pf-gap-8);
8048
+ }
8049
+
8050
+ .gap-9 {
8051
+ gap: var(--pf-gap-9);
8052
+ }
8053
+
8054
+ .gap-10 {
8055
+ gap: var(--pf-gap-10);
8056
+ }
8057
+
8058
+ .gap-11 {
8059
+ gap: var(--pf-gap-11);
8060
+ }
8061
+
8062
+ .gap-12 {
8063
+ gap: var(--pf-gap-12);
8064
+ }
8065
+
8066
+ .gap-13 {
8067
+ gap: var(--pf-gap-13);
8068
+ }
8069
+
8070
+ .gap-14 {
8071
+ gap: var(--pf-gap-14);
8072
+ }
8073
+
8074
+ .gap-15 {
8075
+ gap: var(--pf-gap-15);
8076
+ }
8077
+
8078
+ .gap-16 {
8079
+ gap: var(--pf-gap-16);
8080
+ }
8081
+
8011
8082
  @keyframes spin {
8012
8083
  0% {
8013
8084
  transform: rotate(0deg);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@indico-data/design-system",
3
- "version": "3.0.4",
3
+ "version": "3.0.6",
4
4
  "description": "",
5
5
  "author": "",
6
6
  "main": "lib/index.js",
package/src/components/forms/radio/Radio.stories.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Meta, StoryObj } from '@storybook/react';
2
- import { Radio, RadioProps } from './Radio';
3
- import { SetStateAction, useState } from 'react';
2
+ import { Radio } from './Radio';
3
+ import { Col, Row } from '@/components/grid';
4
4
 
5
5
  const meta: Meta = {
6
6
  title: 'Forms/Radio',
@@ -104,17 +104,21 @@ export const Default: Story = {
104
104
  return (
105
105
  <div>
106
106
  <h2 className="mb-2">Radio Buttons</h2>
107
- {radioList.map((radio) => (
108
- <Radio
109
- key={radio.id}
110
- onChange={handleChange}
111
- id={radio.id}
112
- label={radio.label}
113
- name={radio.name}
114
- value={radio.value}
115
- isDisabled={args.isDisabled}
116
- />
117
- ))}
107
+ <Row direction="column" className="gap-2">
108
+ {radioList.map((radio) => (
109
+ <Col xs={12} key={radio.id}>
110
+ <Radio
111
+ key={radio.id}
112
+ onChange={handleChange}
113
+ id={radio.id}
114
+ label={radio.label}
115
+ name={radio.name}
116
+ value={radio.value}
117
+ isDisabled={args.isDisabled}
118
+ />
119
+ </Col>
120
+ ))}
121
+ </Row>
118
122
  </div>
119
123
  );
120
124
  },
package/src/components/forms/radio/styles/Radio.scss CHANGED
@@ -14,7 +14,6 @@
14
14
 
15
15
  .radio-wrapper {
16
16
  display: flex;
17
- margin-bottom: var(--pf-margin-2);
18
17
  align-items: center;
19
18
  }
20
19
  .radio-input {
package/src/styles/_gap.scss ADDED
@@ -0,0 +1,18 @@
1
+ $sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16;
2
+ $classes: (
3
+ 'gap': 'gap',
4
+ );
5
+
6
+ @each $class, $property in $classes {
7
+ @each $size in $sizes {
8
+ .#{$class}-#{$size} {
9
+ @if type-of($property) == list {
10
+ @each $prop in $property {
11
+ #{$prop}: var(--pf-gap-#{$size});
12
+ }
13
+ } @else {
14
+ #{$property}: var(--pf-gap-#{$size});
15
+ }
16
+ }
17
+ }
18
+ }
package/src/styles/_padding.scss CHANGED
@@ -1,24 +1,28 @@
1
1
  $sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16;
2
2
  $classes: (
3
- "pa": "padding",
4
- "px": ("padding-left", "padding-right"),
5
- "py": ("padding-top", "padding-bottom"),
6
- "pl": "padding-left",
7
- "pr": "padding-right",
8
- "pb": "padding-bottom",
9
- "pt": "padding-top"
3
+ 'pa': 'padding',
4
+ 'px': (
5
+ 'padding-left',
6
+ 'padding-right',
7
+ ),
8
+ 'py': (
9
+ 'padding-top',
10
+ 'padding-bottom',
11
+ ),
12
+ 'pl': 'padding-left',
13
+ 'pr': 'padding-right',
14
+ 'pb': 'padding-bottom',
15
+ 'pt': 'padding-top',
10
16
  );
11
17
 
12
18
  @each $class, $property in $classes {
13
19
  @each $size in $sizes {
14
20
  .#{$class}-#{$size} {
15
- @if type-of($property)==list {
21
+ @if type-of($property) ==list {
16
22
  @each $prop in $property {
17
23
  #{$prop}: var(--pf-padding-#{$size});
18
24
  }
19
- }
20
-
21
- @else {
25
+ } @else {
22
26
  #{$property}: var(--pf-padding-#{$size});
23
27
  }
24
28
  }
package/src/styles/globals.scss CHANGED
@@ -42,26 +42,14 @@
42
42
  // Chart Colors
43
43
  // ***********************************************************************************************************************************
44
44
 
45
- --pf-line-chart-color-one: #256579;
46
- --pf-line-chart-color-two: #277a93;
47
- --pf-line-chart-color-three: #2b97af;
48
- --pf-line-chart-color-four: #4db8cb;
45
+ --pf-line-chart-color-one: #2b97af;
46
+ --pf-line-chart-color-two: #3ca7bd;
47
+ --pf-line-chart-color-three: #4db8cb;
48
+ --pf-line-chart-color-four: #67c4d5;
49
49
  --pf-line-chart-color-five: #81d1df;
50
- --pf-line-chart-color-six: #0e3d7e;
51
- --pf-line-chart-color-seven: #1562c1;
52
- --pf-line-chart-color-eight: #36a1e9;
53
- --pf-line-chart-color-nine: #83c5f6;
54
- --pf-line-chart-color-ten: #afd8f4;
55
- --pf-line-chart-color-eleven: #45267d;
56
- --pf-line-chart-color-twelve: #5d2fb1;
57
- --pf-line-chart-color-thirteen: #7047d2;
58
- --pf-line-chart-color-fourteen: #8d75d7;
59
- --pf-line-chart-color-fifteen: #bdaeea;
60
- --pf-line-chart-color-sixteen: #003b8c;
61
- --pf-line-chart-color-seventeen: #0060d6;
62
- --pf-line-chart-color-eighteen: #36a1ea;
63
- --pf-line-chart-color-nineteen: #2b97af;
64
- --pf-line-chart-color-twenty: #7047d2;
50
+ --pf-line-chart-color-six: #b5e4ec;
51
+ --pf-line-chart-color-seven: #c6eaf1;
52
+ --pf-line-chart-color-eight: #d7f1f6;
65
53
  }
66
54
 
67
55
  :root [data-theme='dark'],
@@ -109,26 +97,14 @@
109
97
  // Chart Colors
110
98
  // ***********************************************************************************************************************************
111
99
 
112
- --pf-line-chart-color-one: #2b97af;
113
- --pf-line-chart-color-two: #4db8cb;
114
- --pf-line-chart-color-three: #81d1df;
115
- --pf-line-chart-color-four: #b5e4ec;
116
- --pf-line-chart-color-five: #d7f1f6;
117
- --pf-line-chart-color-six: #042d6a;
118
- --pf-line-chart-color-seven: #0955b3;
119
- --pf-line-chart-color-eight: #1f8fe0;
120
- --pf-line-chart-color-nine: #5bbeed;
121
- --pf-line-chart-color-ten: #a8dcfa;
122
- --pf-line-chart-color-eleven: #572baf;
123
- --pf-line-chart-color-twelve: #774dcb;
124
- --pf-line-chart-color-thirteen: #9d81df;
125
- --pf-line-chart-color-fourteen: #c5b5ec;
126
- --pf-line-chart-color-fifteen: #e0d7f6;
127
- --pf-line-chart-color-sixteen: #0070f5;
128
- --pf-line-chart-color-seventeen: #36a1ea;
129
- --pf-line-chart-color-eighteen: #80c3f2;
130
- --pf-line-chart-color-nineteen: #4db8cb;
131
- --pf-line-chart-color-twenty: #774dcb;
100
+ --pf-line-chart-color-one: #256579;
101
+ --pf-line-chart-color-two: #266f86;
102
+ --pf-line-chart-color-three: #277a93;
103
+ --pf-line-chart-color-four: #2989a1;
104
+ --pf-line-chart-color-five: #2b97af;
105
+ --pf-line-chart-color-six: #4db8cb;
106
+ --pf-line-chart-color-seven: #67c5d5;
107
+ --pf-line-chart-color-eight: #81d1df;
132
108
  }
133
109
 
134
110
  // Global Styles
package/src/styles/index.scss CHANGED
@@ -39,4 +39,5 @@
39
39
  @import 'borders';
40
40
  @import 'padding';
41
41
  @import 'margin';
42
+ @import 'gap';
42
43
  @import 'animations';
package/src/styles/variables/_gap.scss ADDED
@@ -0,0 +1,19 @@
1
+ :root {
2
+ --pf-gap-0: 0;
3
+ --pf-gap-1: 4px;
4
+ --pf-gap-2: 8px;
5
+ --pf-gap-3: 12px;
6
+ --pf-gap-4: 16px;
7
+ --pf-gap-5: 20px;
8
+ --pf-gap-6: 24px;
9
+ --pf-gap-7: 28px;
10
+ --pf-gap-8: 32px;
11
+ --pf-gap-9: 36px;
12
+ --pf-gap-10: 40px;
13
+ --pf-gap-11: 44px;
14
+ --pf-gap-12: 48px;
15
+ --pf-gap-13: 52px;
16
+ --pf-gap-14: 56px;
17
+ --pf-gap-15: 60px;
18
+ --pf-gap-16: 64px;
19
+ }
package/src/styles/variables/index.scss CHANGED
@@ -4,5 +4,6 @@
4
4
  @import 'borders';
5
5
  @import 'padding';
6
6
  @import 'margin';
7
+ @import 'gap';
7
8
  @import 'size';
8
9
  @import 'dropshadows';
package/src/styles/variables/themes/dark.scss CHANGED
@@ -29,6 +29,7 @@
29
29
  --pf-secondary-color-400: #3ea2ea;
30
30
  --pf-secondary-color-450: #188bdc;
31
31
  --pf-secondary-color-500: #1474b8;
32
+ --pf-secondary-color-550: #1268a5;
32
33
  --pf-secondary-color-600: #0f578a;
33
34
  --pf-secondary-color-700: #1d4058;
34
35
  --pf-secondary-color-800: #132939;
@@ -52,20 +53,21 @@
52
53
  --pf-tertiary-color-900: #111317;
53
54
 
54
55
  // Gray Color
55
- --pf-gray-color: #b2b2b2;
56
+ --pf-gray-color: #808080;
56
57
 
57
58
  --pf-gray-color-50: #ffffff;
58
- --pf-gray-color-100: #fafafa;
59
- --pf-gray-color-150: #f5f5f5;
60
- --pf-gray-color-200: #f0f0f0;
61
- --pf-gray-color-250: #ebebeb;
62
- --pf-gray-color-300: #e6e6e6;
63
- --pf-gray-color-400: #dedede;
64
- --pf-gray-color-450: #c7c7c7;
65
- --pf-gray-color-500: #b2b2b2;
66
- --pf-gray-color-600: #8f8f8f;
67
- --pf-gray-color-700: #5e5959;
68
- --pf-gray-color-800: #272525;
59
+ --pf-gray-color-100: #f7f7f7;
60
+ --pf-gray-color-150: #f2f2f2;
61
+ --pf-gray-color-200: #e6e6e6;
62
+ --pf-gray-color-250: #d9d9d9;
63
+ --pf-gray-color-300: #cccccc;
64
+ --pf-gray-color-400: #b2b2b2;
65
+ --pf-gray-color-450: #949494;
66
+ --pf-gray-color-500: #808080;
67
+ --pf-gray-color-550: #666666;
68
+ --pf-gray-color-600: #606060;
69
+ --pf-gray-color-700: #4d4d4d;
70
+ --pf-gray-color-800: #333333;
69
71
  --pf-gray-color-900: #000000;
70
72
 
71
73
  //Red color
@@ -166,12 +168,12 @@
166
168
  --pf-teal-color-400: #3eeaea;
167
169
  --pf-teal-color-450: #25d0d0;
168
170
  --pf-teal-color-500: #29a3a3;
169
- --pf-teal-color-600: #267373;
171
+ --pf-teal-color-550: #267373;
172
+ --pf-teal-color-600: #1c5656;
170
173
  --pf-teal-color-700: #235252;
171
174
  --pf-teal-color-800: #1b3232;
172
175
  --pf-teal-color-900: #101818;
173
176
 
174
- // Brand Color
175
177
  --pf-brand-color: #2989ff;
176
178
 
177
179
  --pf-brand-color-50: #f6fafd;
@@ -183,6 +185,7 @@
183
185
  --pf-brand-color-400: #2989ff;
184
186
  --pf-brand-color-450: #0070f5;
185
187
  --pf-brand-color-500: #005ccc;
188
+ --pf-brand-color-550: #0054b8;
186
189
  --pf-brand-color-600: #004599;
187
190
  --pf-brand-color-700: #06356f;
188
191
  --pf-brand-color-800: #082345;
@@ -241,23 +244,23 @@
241
244
 
242
245
  // Utility Colors
243
246
  --pf-error-color: var(--pf-red-color-450);
244
- --pf-error-color-dark: color-mix(in srgb, var(--pf-red-color-450) 75%, black);
245
- --pf-error-color-light: color-mix(in srgb, var(--pf-red-color-450) 60%, white);
247
+ --pf-error-color-dark: var(--pf-red-color-500);
248
+ --pf-error-color-light: var(--pf-red-color-300);
246
249
  --pf-success-color: var(--pf-green-color-500);
247
- --pf-success-color-dark: color-mix(in srgb, var(--pf-green-color-500) 70%, black);
248
- --pf-success-color-light: color-mix(in srgb, var(--pf-green-color-500) 60%, white);
249
- --pf-warning-color: var(--pf-yellow-color-450);
250
- --pf-warning-color-dark: color-mix(in srgb, var(--pf-yellow-color-450) 50%, black);
251
- --pf-warning-color-light: color-mix(in srgb, var(--pf-yellow-color-50) 60%, white);
250
+ --pf-success-color-dark: var(--pf-green-color-600);
251
+ --pf-success-color-light: var(--pf-green-color-400);
252
+ --pf-warning-color: var(--pf-yellow-color-400);
253
+ --pf-warning-color-dark: var(--pf-yellow-color-550);
254
+ --pf-warning-color-light: var(--pf-yellow-color-300);
252
255
  --pf-neutral-color: var(--pf-gray-color-500);
253
- --pf-neutral-color-dark: color-mix(in srgb, var(--pf-gray-color-500) 75%, black);
254
- --pf-neutral-color-light: color-mix(in srgb, var(--pf-gray-color-500) 60%, white);
256
+ --pf-neutral-color-dark: var(--pf-gray-color-600);
257
+ --pf-neutral-color-light: var(--pf-gray-color-400);
255
258
  --pf-info-color: var(--pf-secondary-color-450);
256
- --pf-info-color-dark: color-mix(in srgb, var(--pf-secondary-color-450) 75%, black);
257
- --pf-info-color-light: color-mix(in srgb, var(--pf-secondary-color-450) 60%, white);
259
+ --pf-info-color-dark: var(--pf-secondary-color-550);
260
+ --pf-info-color-light: var(--pf-secondary-color-400);
258
261
  --pf-brand-color: var(--pf-brand-color-450);
259
- --pf-brand-color-dark: color-mix(in srgb, var(--pf-brand-color-450) 75%, black);
260
- --pf-brand-color-light: color-mix(in srgb, var(--pf-brand-color-450) 60%, white);
262
+ --pf-brand-color-dark: var(--pf-brand-color-550);
263
+ --pf-brand-color-light: var(--pf-brand-color-300);
261
264
  --pf-pending-color: var(--pf-pink-color-450);
262
265
  --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
263
266
  --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
package/src/styles/variables/themes/light.scss CHANGED
@@ -28,6 +28,7 @@
28
28
  --pf-secondary-color-400: #3ea2ea;
29
29
  --pf-secondary-color-450: #188bdc;
30
30
  --pf-secondary-color-500: #1474b8;
31
+ --pf-secondary-color-550: #1268a5;
31
32
  --pf-secondary-color-600: #0f578a;
32
33
  --pf-secondary-color-700: #1d4058;
33
34
  --pf-secondary-color-800: #132939;
@@ -51,18 +52,19 @@
51
52
  --pf-tertiary-color-900: #111317;
52
53
 
53
54
  // Gray Color
54
- --pf-gray-color: #b2b2b2;
55
+ --pf-gray-color: #808080;
55
56
 
56
57
  --pf-gray-color-50: #ffffff;
57
- --pf-gray-color-100: #f8f8f8;
58
+ --pf-gray-color-100: #f7f7f7;
58
59
  --pf-gray-color-150: #f2f2f2;
59
60
  --pf-gray-color-200: #e6e6e6;
60
61
  --pf-gray-color-250: #d9d9d9;
61
62
  --pf-gray-color-300: #cccccc;
62
63
  --pf-gray-color-400: #b2b2b2;
63
- --pf-gray-color-450: #999999;
64
- --pf-gray-color-500: #7f7f7f;
65
- --pf-gray-color-600: #666666;
64
+ --pf-gray-color-450: #949494;
65
+ --pf-gray-color-500: #808080;
66
+ --pf-gray-color-550: #666666;
67
+ --pf-gray-color-600: #606060;
66
68
  --pf-gray-color-700: #4d4d4d;
67
69
  --pf-gray-color-800: #333333;
68
70
  --pf-gray-color-900: #000000;
@@ -165,7 +167,8 @@
165
167
  --pf-teal-color-400: #3eeaea;
166
168
  --pf-teal-color-450: #25d0d0;
167
169
  --pf-teal-color-500: #29a3a3;
168
- --pf-teal-color-600: #267373;
170
+ --pf-teal-color-550: #267373;
171
+ --pf-teal-color-600: #1c5656;
169
172
  --pf-teal-color-700: #235252;
170
173
  --pf-teal-color-800: #1b3232;
171
174
  --pf-teal-color-900: #101818;
@@ -181,6 +184,7 @@
181
184
  --pf-brand-color-400: #2989ff;
182
185
  --pf-brand-color-450: #0070f5;
183
186
  --pf-brand-color-500: #005ccc;
187
+ --pf-brand-color-550: #0054b8;
184
188
  --pf-brand-color-600: #004599;
185
189
  --pf-brand-color-700: #06356f;
186
190
  --pf-brand-color-800: #082345;
@@ -239,23 +243,23 @@
239
243
 
240
244
  // Utility Colors
241
245
  --pf-error-color: var(--pf-red-color-450);
242
- --pf-error-color-dark: color-mix(in srgb, var(--pf-red-color-450) 75%, black);
243
- --pf-error-color-light: color-mix(in srgb, var(--pf-red-color-450) 60%, white);
246
+ --pf-error-color-dark: var(--pf-red-color-500);
247
+ --pf-error-color-light: var(--pf-red-color-300);
244
248
  --pf-success-color: var(--pf-green-color-500);
245
- --pf-success-color-dark: color-mix(in srgb, var(--pf-green-color-500) 70%, black);
246
- --pf-success-color-light: color-mix(in srgb, var(--pf-green-color-500) 60%, white);
247
- --pf-warning-color: var(--pf-yellow-color-450);
248
- --pf-warning-color-dark: color-mix(in srgb, var(--pf-yellow-color-450) 50%, black);
249
- --pf-warning-color-light: color-mix(in srgb, var(--pf-yellow-color-50) 60%, white);
249
+ --pf-success-color-dark: var(--pf-green-color-600);
250
+ --pf-success-color-light: var(--pf-green-color-400);
251
+ --pf-warning-color: var(--pf-yellow-color-400);
252
+ --pf-warning-color-dark: var(--pf-yellow-color-550);
253
+ --pf-warning-color-light: var(--pf-yellow-color-300);
250
254
  --pf-neutral-color: var(--pf-gray-color-500);
251
- --pf-neutral-color-dark: color-mix(in srgb, var(--pf-gray-color-500) 75%, black);
252
- --pf-neutral-color-light: color-mix(in srgb, var(--pf-gray-color-500) 60%, white);
255
+ --pf-neutral-color-dark: var(--pf-gray-color-600);
256
+ --pf-neutral-color-light: var(--pf-gray-color-400);
253
257
  --pf-info-color: var(--pf-secondary-color-450);
254
- --pf-info-color-dark: color-mix(in srgb, var(--pf-secondary-color-450) 75%, black);
255
- --pf-info-color-light: color-mix(in srgb, var(--pf-secondary-color-450) 60%, white);
258
+ --pf-info-color-dark: var(--pf-secondary-color-550);
259
+ --pf-info-color-light: var(--pf-secondary-color-400);
256
260
  --pf-brand-color: var(--pf-brand-color-450);
257
- --pf-brand-color-dark: color-mix(in srgb, var(--pf-brand-color-450) 75%, black);
258
- --pf-brand-color-light: color-mix(in srgb, var(--pf-brand-color-450) 60%, white);
261
+ --pf-brand-color-dark: var(--pf-brand-color-550);
262
+ --pf-brand-color-light: var(--pf-brand-color-300);
259
263
  --pf-pending-color: var(--pf-pink-color-450);
260
264
  --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
261
265
  --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
package/src/stylesAndAnimations/sizing/Sizing.mdx CHANGED
@@ -1,14 +1,14 @@
1
1
  import { Canvas, Meta, Controls } from '@storybook/blocks';
2
2
  import * as Sizing from './Sizing.stories';
3
3
 
4
- <Meta title="Utility Classes/Sizing" />
5
- # Sizing
6
- The Sizing utility classes follow this pattern of usage.
4
+ <Meta title="Utility Classes/Sizing" /># Sizing The Sizing utility classes follow this pattern of
5
+ usage.
7
6
 
8
7
  Instructuions: `{property}{direction}-{size}` The property applies the type of spacing:
9
8
 
10
9
  - `m` - applies margin
11
10
  - `p` - applies padding
11
+ - `gap` - applies gap
12
12
 
13
13
  ### The direction designates the side the property applies to:
14
14
 
@@ -23,22 +23,22 @@ Instructuions: `{property}{direction}-{size}` The property applies the type of s
23
23
  ### The size controls the increment of the property in 4px intervals:
24
24
 
25
25
  - `0` - eliminates all margin and padding by setting it to 0
26
- - `1` - sets margin or padding 4px
27
- - `2` - sets margin or padding 8px
28
- - `3` - sets margin or padding 12px
29
- - `4` - sets margin or padding 16px
30
- - `5` - sets margin or padding 20px
31
- - `6` - sets margin or padding 24px
32
- - `7` - sets margin or padding 28px
33
- - `8` - sets margin or padding 32px
34
- - `9` - sets margin or padding 36px
35
- - `10` - sets margin or padding 40px
36
- - `11` - sets margin or padding 44px
37
- - `12` - sets margin or padding 48px
38
- - `13` - sets margin or padding 52px
39
- - `14` - sets margin or padding 56px
40
- - `15` - sets margin or padding 60px
41
- - `16` - sets margin or padding 64px
26
+ - `1` - sets margin or padding or gap to 4px
27
+ - `2` - sets margin or padding or gap to 8px
28
+ - `3` - sets margin or padding or gap to 12px
29
+ - `4` - sets margin or padding or gap to 16px
30
+ - `5` - sets margin or padding or gap to 20px
31
+ - `6` - sets margin or padding or gap to 24px
32
+ - `7` - sets margin or padding or gap to 28px
33
+ - `8` - sets margin or padding or gap to 32px
34
+ - `9` - sets margin or padding or gap to 36px
35
+ - `10` - sets margin or padding or gap to 40px
36
+ - `11` - sets margin or padding or gap to 44px
37
+ - `12` - sets margin or padding or gap to 48px
38
+ - `13` - sets margin or padding or gap to 52px
39
+ - `14` - sets margin or padding or gap to 56px
40
+ - `15` - sets margin or padding or gap to 60px
41
+ - `16` - sets margin or padding or gap to 64px
42
42
  - `n1` - sets margin to -4px
43
43
  - `n2` - sets margin to -8px
44
44
  - `n3` - sets margin to -12px
package/src/stylesAndAnimations/utilityClasses/UtilityClassesData.ts CHANGED
@@ -217,6 +217,23 @@ export const utilityClassesData: UtilityClassData[] = [
217
217
  { className: 'pa-14', css: 'padding: var(--pf-padding-14);', category: 'Sizing' },
218
218
  { className: 'pa-15', css: 'padding: var(--pf-padding-15);', category: 'Sizing' },
219
219
  { className: 'pa-16', css: 'padding: var(--pf-padding-16);', category: 'Sizing' },
220
+ { className: 'gap-0', css: 'gap: var(--pf-gap-0);', category: 'Sizing' },
221
+ { className: 'gap-1', css: 'gap: var(--pf-gap-1);', category: 'Sizing' },
222
+ { className: 'gap-2', css: 'gap: var(--pf-gap-2);', category: 'Sizing' },
223
+ { className: 'gap-3', css: 'gap: var(--pf-gap-3);', category: 'Sizing' },
224
+ { className: 'gap-4', css: 'gap: var(--pf-gap-4);', category: 'Sizing' },
225
+ { className: 'gap-5', css: 'gap: var(--pf-gap-5);', category: 'Sizing' },
226
+ { className: 'gap-6', css: 'gap: var(--pf-gap-6);', category: 'Sizing' },
227
+ { className: 'gap-7', css: 'gap: var(--pf-gap-7);', category: 'Sizing' },
228
+ { className: 'gap-8', css: 'gap: var(--pf-gap-8);', category: 'Sizing' },
229
+ { className: 'gap-9', css: 'gap: var(--pf-gap-9);', category: 'Sizing' },
230
+ { className: 'gap-10', css: 'gap: var(--pf-gap-10);', category: 'Sizing' },
231
+ { className: 'gap-11', css: 'gap: var(--pf-gap-11);', category: 'Sizing' },
232
+ { className: 'gap-12', css: 'gap: var(--pf-gap-12);', category: 'Sizing' },
233
+ { className: 'gap-13', css: 'gap: var(--pf-gap-13);', category: 'Sizing' },
234
+ { className: 'gap-14', css: 'gap: var(--pf-gap-14);', category: 'Sizing' },
235
+ { className: 'gap-15', css: 'gap: var(--pf-gap-15);', category: 'Sizing' },
236
+ { className: 'gap-16', css: 'gap: var(--pf-gap-16);', category: 'Sizing' },
220
237
 
221
238
  // Icon Sizes
222
239
  { className: 'icon-xs', css: 'font-size: var(--pf-icon-size-xs);', category: 'Icon' },