@indico-data/design-system 3.0.5 → 3.0.7

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 (7) hide show
  1. package/lib/index.css +90 -106
  2. package/lib/index.esm.css +90 -106
  3. package/package.json +1 -1
  4. package/src/components/pill/styles/Pill.scss +16 -16
  5. package/src/styles/globals.scss +15 -39
  6. package/src/styles/variables/themes/dark.scss +33 -30
  7. package/src/styles/variables/themes/light.scss +26 -22
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,26 +237,26 @@
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);
253
- --pf-pending-color: var(--pf-pink-color-450);
254
- --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
255
- --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
255
+ --pf-brand-color-dark: var(--pf-brand-color-550);
256
+ --pf-brand-color-light: var(--pf-brand-color-300);
257
+ --pf-pending-color: var(--pf-pink-color-500);
258
+ --pf-pending-color-dark: var(--pf-pink-color-600);
259
+ --pf-pending-color-light: var(--pf-pink-color-300);
256
260
  }
257
261
 
258
262
  :root [data-theme=dark],
@@ -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,26 +465,26 @@
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);
477
- --pf-pending-color: var(--pf-pink-color-450);
478
- --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
479
- --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
483
+ --pf-brand-color-dark: var(--pf-brand-color-550);
484
+ --pf-brand-color-light: var(--pf-brand-color-300);
485
+ --pf-pending-color: var(--pf-pink-color-500);
486
+ --pf-pending-color-dark: var(--pf-pink-color-600);
487
+ --pf-pending-color-light: var(--pf-pink-color-300);
480
488
  }
481
489
 
482
490
  :root {
@@ -670,26 +678,14 @@
670
678
  --pf-secondary-link-color: var(--pf-tertiary-color-700);
671
679
  --pf-secondary-link-hover-color: var(--pf-tertiary-color-800);
672
680
  --pf-active-link-color: var(--pf-brand-color-500);
673
- --pf-line-chart-color-one: #256579;
674
- --pf-line-chart-color-two: #277a93;
675
- --pf-line-chart-color-three: #2b97af;
676
- --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;
677
685
  --pf-line-chart-color-five: #81d1df;
678
- --pf-line-chart-color-six: #0e3d7e;
679
- --pf-line-chart-color-seven: #1562c1;
680
- --pf-line-chart-color-eight: #36a1e9;
681
- --pf-line-chart-color-nine: #83c5f6;
682
- --pf-line-chart-color-ten: #afd8f4;
683
- --pf-line-chart-color-eleven: #45267d;
684
- --pf-line-chart-color-twelve: #5d2fb1;
685
- --pf-line-chart-color-thirteen: #7047d2;
686
- --pf-line-chart-color-fourteen: #8d75d7;
687
- --pf-line-chart-color-fifteen: #bdaeea;
688
- --pf-line-chart-color-sixteen: #003b8c;
689
- --pf-line-chart-color-seventeen: #0060d6;
690
- --pf-line-chart-color-eighteen: #36a1ea;
691
- --pf-line-chart-color-nineteen: #2b97af;
692
- --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;
693
689
  }
694
690
 
695
691
  :root [data-theme=dark],
@@ -724,26 +720,14 @@
724
720
  --pf-secondary-link-color: var(--pf-tertiary-color-450);
725
721
  --pf-secondary-link-hover-color: var(--pf-tertiary-color-400);
726
722
  --pf-active-link-color: var(--pf-secondary-color-400);
727
- --pf-line-chart-color-one: #2b97af;
728
- --pf-line-chart-color-two: #4db8cb;
729
- --pf-line-chart-color-three: #81d1df;
730
- --pf-line-chart-color-four: #b5e4ec;
731
- --pf-line-chart-color-five: #d7f1f6;
732
- --pf-line-chart-color-six: #042d6a;
733
- --pf-line-chart-color-seven: #0955b3;
734
- --pf-line-chart-color-eight: #1f8fe0;
735
- --pf-line-chart-color-nine: #5bbeed;
736
- --pf-line-chart-color-ten: #a8dcfa;
737
- --pf-line-chart-color-eleven: #572baf;
738
- --pf-line-chart-color-twelve: #774dcb;
739
- --pf-line-chart-color-thirteen: #9d81df;
740
- --pf-line-chart-color-fourteen: #c5b5ec;
741
- --pf-line-chart-color-fifteen: #e0d7f6;
742
- --pf-line-chart-color-sixteen: #0070f5;
743
- --pf-line-chart-color-seventeen: #36a1ea;
744
- --pf-line-chart-color-eighteen: #80c3f2;
745
- --pf-line-chart-color-nineteen: #4db8cb;
746
- --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;
747
731
  }
748
732
 
749
733
  html,
@@ -2689,62 +2673,62 @@ body div[class*=select__single-value] {
2689
2673
 
2690
2674
  :root [data-theme=light] {
2691
2675
  --pf-pill-info-background-color: var(--pf-info-color-dark);
2692
- --pf-pill-info-font-color: var(--pf-secondary-color-50);
2676
+ --pf-pill-info-font-color: var(--pf-gray-color-50);
2693
2677
  --pf-pill-info-border-color: var(--pf-info-color-dark);
2694
2678
  --pf-pill-error-background-color: var(--pf-error-color-dark);
2695
- --pf-pill-error-font-color: var(--pf-red-color-50);
2679
+ --pf-pill-error-font-color: var(--pf-gray-color-50);
2696
2680
  --pf-pill-error-border-color: var(--pf-error-color-dark);
2697
2681
  --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2698
- --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2682
+ --pf-pill-warning-font-color: var(--pf-gray-color-50);
2699
2683
  --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2700
2684
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2701
2685
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2702
2686
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2703
2687
  --pf-pill-success-background-color: var(--pf-success-color-dark);
2704
- --pf-pill-success-font-color: var(--pf-green-color-50);
2688
+ --pf-pill-success-font-color: var(--pf-gray-color-50);
2705
2689
  --pf-pill-success-border-color: var(--pf-success-color-dark);
2706
2690
  --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2707
- --pf-pill-purple-font-color: var(--pf-purple-color-50);
2691
+ --pf-pill-purple-font-color: var(--pf-gray-color-50);
2708
2692
  --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2709
2693
  --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2710
- --pf-pill-pending-font-color: var(--pf-pink-color-50);
2694
+ --pf-pill-pending-font-color: var(--pf-gray-color-50);
2711
2695
  --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2712
2696
  --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2713
- --pf-pill-orange-font-color: var(--pf-orange-color-50);
2697
+ --pf-pill-orange-font-color: var(--pf-gray-color-50);
2714
2698
  --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2715
2699
  --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2716
- --pf-pill-teal-font-color: var(--pf-teal-color-50);
2700
+ --pf-pill-teal-font-color: var(--pf-gray-color-50);
2717
2701
  --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2718
2702
  }
2719
2703
 
2720
2704
  :root [data-theme=dark],
2721
2705
  :root {
2722
2706
  --pf-pill-info-background-color: var(--pf-info-color-dark);
2723
- --pf-pill-info-font-color: var(--pf-secondary-color-50);
2707
+ --pf-pill-info-font-color: var(--pf-gray-color-50);
2724
2708
  --pf-pill-info-border-color: var(--pf-info-color-dark);
2725
2709
  --pf-pill-error-background-color: var(--pf-error-color-dark);
2726
- --pf-pill-error-font-color: var(--pf-red-color-50);
2710
+ --pf-pill-error-font-color: var(--pf-gray-color-50);
2727
2711
  --pf-pill-error-border-color: var(--pf-error-color-dark);
2728
2712
  --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2729
- --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2713
+ --pf-pill-warning-font-color: var(--pf-gray-color-50);
2730
2714
  --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2731
2715
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2732
2716
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2733
2717
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2734
2718
  --pf-pill-success-background-color: var(--pf-success-color-dark);
2735
- --pf-pill-success-font-color: var(--pf-green-color-50);
2719
+ --pf-pill-success-font-color: var(--pf-gray-color-50);
2736
2720
  --pf-pill-success-border-color: var(--pf-success-color-dark);
2737
2721
  --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2738
- --pf-pill-purple-font-color: var(--pf-purple-color-50);
2722
+ --pf-pill-purple-font-color: var(--pf-gray-color-50);
2739
2723
  --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2740
2724
  --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2741
- --pf-pill-pending-font-color: var(--pf-pink-color-50);
2725
+ --pf-pill-pending-font-color: var(--pf-gray-color-50);
2742
2726
  --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2743
2727
  --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2744
- --pf-pill-orange-font-color: var(--pf-orange-color-50);
2728
+ --pf-pill-orange-font-color: var(--pf-gray-color-50);
2745
2729
  --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2746
2730
  --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2747
- --pf-pill-teal-font-color: var(--pf-teal-color-50);
2731
+ --pf-pill-teal-font-color: var(--pf-gray-color-50);
2748
2732
  --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2749
2733
  }
2750
2734
 
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,26 +237,26 @@
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);
253
- --pf-pending-color: var(--pf-pink-color-450);
254
- --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
255
- --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
255
+ --pf-brand-color-dark: var(--pf-brand-color-550);
256
+ --pf-brand-color-light: var(--pf-brand-color-300);
257
+ --pf-pending-color: var(--pf-pink-color-500);
258
+ --pf-pending-color-dark: var(--pf-pink-color-600);
259
+ --pf-pending-color-light: var(--pf-pink-color-300);
256
260
  }
257
261
 
258
262
  :root [data-theme=dark],
@@ -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,26 +465,26 @@
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);
477
- --pf-pending-color: var(--pf-pink-color-450);
478
- --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
479
- --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
483
+ --pf-brand-color-dark: var(--pf-brand-color-550);
484
+ --pf-brand-color-light: var(--pf-brand-color-300);
485
+ --pf-pending-color: var(--pf-pink-color-500);
486
+ --pf-pending-color-dark: var(--pf-pink-color-600);
487
+ --pf-pending-color-light: var(--pf-pink-color-300);
480
488
  }
481
489
 
482
490
  :root {
@@ -670,26 +678,14 @@
670
678
  --pf-secondary-link-color: var(--pf-tertiary-color-700);
671
679
  --pf-secondary-link-hover-color: var(--pf-tertiary-color-800);
672
680
  --pf-active-link-color: var(--pf-brand-color-500);
673
- --pf-line-chart-color-one: #256579;
674
- --pf-line-chart-color-two: #277a93;
675
- --pf-line-chart-color-three: #2b97af;
676
- --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;
677
685
  --pf-line-chart-color-five: #81d1df;
678
- --pf-line-chart-color-six: #0e3d7e;
679
- --pf-line-chart-color-seven: #1562c1;
680
- --pf-line-chart-color-eight: #36a1e9;
681
- --pf-line-chart-color-nine: #83c5f6;
682
- --pf-line-chart-color-ten: #afd8f4;
683
- --pf-line-chart-color-eleven: #45267d;
684
- --pf-line-chart-color-twelve: #5d2fb1;
685
- --pf-line-chart-color-thirteen: #7047d2;
686
- --pf-line-chart-color-fourteen: #8d75d7;
687
- --pf-line-chart-color-fifteen: #bdaeea;
688
- --pf-line-chart-color-sixteen: #003b8c;
689
- --pf-line-chart-color-seventeen: #0060d6;
690
- --pf-line-chart-color-eighteen: #36a1ea;
691
- --pf-line-chart-color-nineteen: #2b97af;
692
- --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;
693
689
  }
694
690
 
695
691
  :root [data-theme=dark],
@@ -724,26 +720,14 @@
724
720
  --pf-secondary-link-color: var(--pf-tertiary-color-450);
725
721
  --pf-secondary-link-hover-color: var(--pf-tertiary-color-400);
726
722
  --pf-active-link-color: var(--pf-secondary-color-400);
727
- --pf-line-chart-color-one: #2b97af;
728
- --pf-line-chart-color-two: #4db8cb;
729
- --pf-line-chart-color-three: #81d1df;
730
- --pf-line-chart-color-four: #b5e4ec;
731
- --pf-line-chart-color-five: #d7f1f6;
732
- --pf-line-chart-color-six: #042d6a;
733
- --pf-line-chart-color-seven: #0955b3;
734
- --pf-line-chart-color-eight: #1f8fe0;
735
- --pf-line-chart-color-nine: #5bbeed;
736
- --pf-line-chart-color-ten: #a8dcfa;
737
- --pf-line-chart-color-eleven: #572baf;
738
- --pf-line-chart-color-twelve: #774dcb;
739
- --pf-line-chart-color-thirteen: #9d81df;
740
- --pf-line-chart-color-fourteen: #c5b5ec;
741
- --pf-line-chart-color-fifteen: #e0d7f6;
742
- --pf-line-chart-color-sixteen: #0070f5;
743
- --pf-line-chart-color-seventeen: #36a1ea;
744
- --pf-line-chart-color-eighteen: #80c3f2;
745
- --pf-line-chart-color-nineteen: #4db8cb;
746
- --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;
747
731
  }
748
732
 
749
733
  html,
@@ -2689,62 +2673,62 @@ body div[class*=select__single-value] {
2689
2673
 
2690
2674
  :root [data-theme=light] {
2691
2675
  --pf-pill-info-background-color: var(--pf-info-color-dark);
2692
- --pf-pill-info-font-color: var(--pf-secondary-color-50);
2676
+ --pf-pill-info-font-color: var(--pf-gray-color-50);
2693
2677
  --pf-pill-info-border-color: var(--pf-info-color-dark);
2694
2678
  --pf-pill-error-background-color: var(--pf-error-color-dark);
2695
- --pf-pill-error-font-color: var(--pf-red-color-50);
2679
+ --pf-pill-error-font-color: var(--pf-gray-color-50);
2696
2680
  --pf-pill-error-border-color: var(--pf-error-color-dark);
2697
2681
  --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2698
- --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2682
+ --pf-pill-warning-font-color: var(--pf-gray-color-50);
2699
2683
  --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2700
2684
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2701
2685
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2702
2686
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2703
2687
  --pf-pill-success-background-color: var(--pf-success-color-dark);
2704
- --pf-pill-success-font-color: var(--pf-green-color-50);
2688
+ --pf-pill-success-font-color: var(--pf-gray-color-50);
2705
2689
  --pf-pill-success-border-color: var(--pf-success-color-dark);
2706
2690
  --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2707
- --pf-pill-purple-font-color: var(--pf-purple-color-50);
2691
+ --pf-pill-purple-font-color: var(--pf-gray-color-50);
2708
2692
  --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2709
2693
  --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2710
- --pf-pill-pending-font-color: var(--pf-pink-color-50);
2694
+ --pf-pill-pending-font-color: var(--pf-gray-color-50);
2711
2695
  --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2712
2696
  --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2713
- --pf-pill-orange-font-color: var(--pf-orange-color-50);
2697
+ --pf-pill-orange-font-color: var(--pf-gray-color-50);
2714
2698
  --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2715
2699
  --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2716
- --pf-pill-teal-font-color: var(--pf-teal-color-50);
2700
+ --pf-pill-teal-font-color: var(--pf-gray-color-50);
2717
2701
  --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2718
2702
  }
2719
2703
 
2720
2704
  :root [data-theme=dark],
2721
2705
  :root {
2722
2706
  --pf-pill-info-background-color: var(--pf-info-color-dark);
2723
- --pf-pill-info-font-color: var(--pf-secondary-color-50);
2707
+ --pf-pill-info-font-color: var(--pf-gray-color-50);
2724
2708
  --pf-pill-info-border-color: var(--pf-info-color-dark);
2725
2709
  --pf-pill-error-background-color: var(--pf-error-color-dark);
2726
- --pf-pill-error-font-color: var(--pf-red-color-50);
2710
+ --pf-pill-error-font-color: var(--pf-gray-color-50);
2727
2711
  --pf-pill-error-border-color: var(--pf-error-color-dark);
2728
2712
  --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2729
- --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2713
+ --pf-pill-warning-font-color: var(--pf-gray-color-50);
2730
2714
  --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2731
2715
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2732
2716
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2733
2717
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2734
2718
  --pf-pill-success-background-color: var(--pf-success-color-dark);
2735
- --pf-pill-success-font-color: var(--pf-green-color-50);
2719
+ --pf-pill-success-font-color: var(--pf-gray-color-50);
2736
2720
  --pf-pill-success-border-color: var(--pf-success-color-dark);
2737
2721
  --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2738
- --pf-pill-purple-font-color: var(--pf-purple-color-50);
2722
+ --pf-pill-purple-font-color: var(--pf-gray-color-50);
2739
2723
  --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2740
2724
  --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2741
- --pf-pill-pending-font-color: var(--pf-pink-color-50);
2725
+ --pf-pill-pending-font-color: var(--pf-gray-color-50);
2742
2726
  --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2743
2727
  --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2744
- --pf-pill-orange-font-color: var(--pf-orange-color-50);
2728
+ --pf-pill-orange-font-color: var(--pf-gray-color-50);
2745
2729
  --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2746
2730
  --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2747
- --pf-pill-teal-font-color: var(--pf-teal-color-50);
2731
+ --pf-pill-teal-font-color: var(--pf-gray-color-50);
2748
2732
  --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2749
2733
  }
2750
2734
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@indico-data/design-system",
3
- "version": "3.0.5",
3
+ "version": "3.0.7",
4
4
  "description": "",
5
5
  "author": "",
6
6
  "main": "lib/index.js",
package/src/components/pill/styles/Pill.scss CHANGED
@@ -1,15 +1,15 @@
1
1
  // Light Theme Specific Variables
2
2
  :root [data-theme='light'] {
3
3
  --pf-pill-info-background-color: var(--pf-info-color-dark);
4
- --pf-pill-info-font-color: var(--pf-secondary-color-50);
4
+ --pf-pill-info-font-color: var(--pf-gray-color-50);
5
5
  --pf-pill-info-border-color: var(--pf-info-color-dark);
6
6
 
7
7
  --pf-pill-error-background-color: var(--pf-error-color-dark);
8
- --pf-pill-error-font-color: var(--pf-red-color-50);
8
+ --pf-pill-error-font-color: var(--pf-gray-color-50);
9
9
  --pf-pill-error-border-color: var(--pf-error-color-dark);
10
10
 
11
11
  --pf-pill-warning-background-color: var(--pf-warning-color-dark);
12
- --pf-pill-warning-font-color: var(--pf-yellow-color-50);
12
+ --pf-pill-warning-font-color: var(--pf-gray-color-50);
13
13
  --pf-pill-warning-border-color: var(--pf-warning-color-dark);
14
14
 
15
15
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
@@ -17,23 +17,23 @@
17
17
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
18
18
 
19
19
  --pf-pill-success-background-color: var(--pf-success-color-dark);
20
- --pf-pill-success-font-color: var(--pf-green-color-50);
20
+ --pf-pill-success-font-color: var(--pf-gray-color-50);
21
21
  --pf-pill-success-border-color: var(--pf-success-color-dark);
22
22
 
23
23
  --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
24
- --pf-pill-purple-font-color: var(--pf-purple-color-50);
24
+ --pf-pill-purple-font-color: var(--pf-gray-color-50);
25
25
  --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
26
26
 
27
27
  --pf-pill-pending-background-color: var(--pf-pending-color-dark);
28
- --pf-pill-pending-font-color: var(--pf-pink-color-50);
28
+ --pf-pill-pending-font-color: var(--pf-gray-color-50);
29
29
  --pf-pill-pending-border-color: var(--pf-pending-color-dark);
30
30
 
31
31
  --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
32
- --pf-pill-orange-font-color: var(--pf-orange-color-50);
32
+ --pf-pill-orange-font-color: var(--pf-gray-color-50);
33
33
  --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
34
34
 
35
35
  --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
36
- --pf-pill-teal-font-color: var(--pf-teal-color-50);
36
+ --pf-pill-teal-font-color: var(--pf-gray-color-50);
37
37
  --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
38
38
  }
39
39
 
@@ -41,15 +41,15 @@
41
41
  :root [data-theme='dark'],
42
42
  :root {
43
43
  --pf-pill-info-background-color: var(--pf-info-color-dark);
44
- --pf-pill-info-font-color: var(--pf-secondary-color-50);
44
+ --pf-pill-info-font-color: var(--pf-gray-color-50);
45
45
  --pf-pill-info-border-color: var(--pf-info-color-dark);
46
46
 
47
47
  --pf-pill-error-background-color: var(--pf-error-color-dark);
48
- --pf-pill-error-font-color: var(--pf-red-color-50);
48
+ --pf-pill-error-font-color: var(--pf-gray-color-50);
49
49
  --pf-pill-error-border-color: var(--pf-error-color-dark);
50
50
 
51
51
  --pf-pill-warning-background-color: var(--pf-warning-color-dark);
52
- --pf-pill-warning-font-color: var(--pf-yellow-color-50);
52
+ --pf-pill-warning-font-color: var(--pf-gray-color-50);
53
53
  --pf-pill-warning-border-color: var(--pf-warning-color-dark);
54
54
 
55
55
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
@@ -57,23 +57,23 @@
57
57
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
58
58
 
59
59
  --pf-pill-success-background-color: var(--pf-success-color-dark);
60
- --pf-pill-success-font-color: var(--pf-green-color-50);
60
+ --pf-pill-success-font-color: var(--pf-gray-color-50);
61
61
  --pf-pill-success-border-color: var(--pf-success-color-dark);
62
62
 
63
63
  --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
64
- --pf-pill-purple-font-color: var(--pf-purple-color-50);
64
+ --pf-pill-purple-font-color: var(--pf-gray-color-50);
65
65
  --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
66
66
 
67
67
  --pf-pill-pending-background-color: var(--pf-pending-color-dark);
68
- --pf-pill-pending-font-color: var(--pf-pink-color-50);
68
+ --pf-pill-pending-font-color: var(--pf-gray-color-50);
69
69
  --pf-pill-pending-border-color: var(--pf-pending-color-dark);
70
70
 
71
71
  --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
72
- --pf-pill-orange-font-color: var(--pf-orange-color-50);
72
+ --pf-pill-orange-font-color: var(--pf-gray-color-50);
73
73
  --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
74
74
 
75
75
  --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
76
- --pf-pill-teal-font-color: var(--pf-teal-color-50);
76
+ --pf-pill-teal-font-color: var(--pf-gray-color-50);
77
77
  --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
78
78
  }
79
79
 
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/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,24 +244,24 @@
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);
261
- --pf-pending-color: var(--pf-pink-color-450);
262
- --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
263
- --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
262
+ --pf-brand-color-dark: var(--pf-brand-color-550);
263
+ --pf-brand-color-light: var(--pf-brand-color-300);
264
+ --pf-pending-color: var(--pf-pink-color-500);
265
+ --pf-pending-color-dark: var(--pf-pink-color-600);
266
+ --pf-pending-color-light: var(--pf-pink-color-300);
264
267
  }
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,24 +243,24 @@
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);
259
- --pf-pending-color: var(--pf-pink-color-450);
260
- --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
261
- --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
261
+ --pf-brand-color-dark: var(--pf-brand-color-550);
262
+ --pf-brand-color-light: var(--pf-brand-color-300);
263
+ --pf-pending-color: var(--pf-pink-color-500);
264
+ --pf-pending-color-dark: var(--pf-pink-color-600);
265
+ --pf-pending-color-light: var(--pf-pink-color-300);
262
266
  }