@indico-data/design-system 3.0.1 → 3.0.2

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 (16) hide show
  1. package/lib/index.css +69 -53
  2. package/lib/index.esm.css +69 -53
  3. package/lib/index.esm.js +2 -2
  4. package/lib/index.esm.js.map +1 -1
  5. package/lib/index.js +2 -2
  6. package/lib/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/floatUI/styles/FloatUI.scss +1 -0
  9. package/src/components/pagination/Pagination.tsx +1 -1
  10. package/src/components/pagination/__tests__/Pagination.test.tsx +5 -0
  11. package/src/components/pill/styles/Pill.scss +33 -33
  12. package/src/components/tanstackTable/styles/table.scss +0 -18
  13. package/src/components/tooltip/Tooltip.tsx +0 -1
  14. package/src/styles/globals.scss +1 -1
  15. package/src/styles/variables/themes/dark.scss +17 -2
  16. package/src/styles/variables/themes/light.scss +17 -2
package/lib/index.css CHANGED
@@ -141,6 +141,7 @@
141
141
  --pf-yellow-color-400: #eaab3e;
142
142
  --pf-yellow-color-450: #dc9518;
143
143
  --pf-yellow-color-500: #ad791f;
144
+ --pf-yellow-color-550: #976f00;
144
145
  --pf-yellow-color-600: #825b17;
145
146
  --pf-yellow-color-700: #58421d;
146
147
  --pf-yellow-color-800: #32291b;
@@ -232,12 +233,26 @@
232
233
  --pf-black-color-90: rgba(0, 0, 0, 0.9);
233
234
  --pf-black-color-100: rgba(0, 0, 0, 1);
234
235
  --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);
235
238
  --pf-success-color: var(--pf-green-color-500);
236
- --pf-warning-color: var(--pf-yellow-color-400);
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);
237
244
  --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);
238
247
  --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);
239
250
  --pf-brand-color: var(--pf-brand-color-450);
240
- --pf-pending-color: var(--pf-orange-color-400);
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);
241
256
  }
242
257
 
243
258
  :root [data-theme=dark],
@@ -350,6 +365,7 @@
350
365
  --pf-yellow-color-400: #eaab3e;
351
366
  --pf-yellow-color-450: #dc9518;
352
367
  --pf-yellow-color-500: #ad791f;
368
+ --pf-yellow-color-550: #976f00;
353
369
  --pf-yellow-color-600: #825b17;
354
370
  --pf-yellow-color-700: #58421d;
355
371
  --pf-yellow-color-800: #32291b;
@@ -441,12 +457,26 @@
441
457
  --pf-black-color-90: rgba(0, 0, 0, 0.9);
442
458
  --pf-black-color-100: rgba(0, 0, 0, 1);
443
459
  --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);
444
462
  --pf-success-color: var(--pf-green-color-500);
445
- --pf-warning-color: var(--pf-yellow-color-400);
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);
446
468
  --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);
447
471
  --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);
448
474
  --pf-brand-color: var(--pf-brand-color-450);
449
- --pf-pending-color: var(--pf-orange-color-400);
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);
450
480
  }
451
481
 
452
482
  :root {
@@ -723,7 +753,7 @@ a:hover,
723
753
  .react-tooltip {
724
754
  z-index: 5;
725
755
  background-color: var(--pf-tooltip-background-color);
726
- border: var(--pf-border-sm) solid var(--pf-border-color-primary);
756
+ color: var(--pf-tooltip-font-color);
727
757
  opacity: 1 !important;
728
758
  text-wrap: wrap;
729
759
  }
@@ -2121,6 +2151,7 @@ body div[class*=select__single-value] {
2121
2151
  }
2122
2152
 
2123
2153
  .floatui-content {
2154
+ border: solid var(--pf-border-thin) var(--pf-border-color-secondary);
2124
2155
  border-radius: var(--pf-floatui-border-radius);
2125
2156
  box-shadow: var(--pf-floatui-box-shadow);
2126
2157
  background: var(--pf-floatui-background-color);
@@ -2642,21 +2673,6 @@ body div[class*=select__single-value] {
2642
2673
  vertical-align: middle;
2643
2674
  height: 100%;
2644
2675
  border: var(--pf-border-sm) solid var(--pf-border-color-primary);
2645
- animation: none;
2646
- }
2647
- @keyframes shimmer {
2648
- 0% {
2649
- background-color: var(--pf-primary-color-700) 40;
2650
- }
2651
- 50% {
2652
- background-color: var(--pf-primary-color-700);
2653
- }
2654
- 100% {
2655
- background-color: var(--pf-primary-color-700) 40;
2656
- }
2657
- }
2658
- .tanstack-table__centered-row.is-loading {
2659
- animation: shimmer 3s ease-in-out infinite;
2660
2676
  }
2661
2677
  .tanstack-table__centered-row svg {
2662
2678
  margin: 0 auto;
@@ -2672,64 +2688,64 @@ body div[class*=select__single-value] {
2672
2688
  }
2673
2689
 
2674
2690
  :root [data-theme=light] {
2675
- --pf-pill-info-background-color: var(--pf-secondary-color-500);
2691
+ --pf-pill-info-background-color: var(--pf-info-color-dark);
2676
2692
  --pf-pill-info-font-color: var(--pf-secondary-color-50);
2677
- --pf-pill-info-border-color: var(--pf-secondary-color-500);
2678
- --pf-pill-error-background-color: var(--pf-red-color-450);
2693
+ --pf-pill-info-border-color: var(--pf-info-color-dark);
2694
+ --pf-pill-error-background-color: var(--pf-error-color-dark);
2679
2695
  --pf-pill-error-font-color: var(--pf-red-color-50);
2680
- --pf-pill-error-border-color: var(--pf-red-color-450);
2681
- --pf-pill-warning-background-color: var(--pf-yellow-color-450);
2696
+ --pf-pill-error-border-color: var(--pf-error-color-dark);
2697
+ --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2682
2698
  --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2683
- --pf-pill-warning-border-color: var(--pf-yellow-color-450);
2699
+ --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2684
2700
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2685
2701
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2686
2702
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2687
- --pf-pill-success-background-color: var(--pf-green-color-600);
2703
+ --pf-pill-success-background-color: var(--pf-success-color-dark);
2688
2704
  --pf-pill-success-font-color: var(--pf-green-color-50);
2689
- --pf-pill-success-border-color: var(--pf-green-color-600);
2690
- --pf-pill-purple-background-color: var(--pf-purple-color-450);
2705
+ --pf-pill-success-border-color: var(--pf-success-color-dark);
2706
+ --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2691
2707
  --pf-pill-purple-font-color: var(--pf-purple-color-50);
2692
- --pf-pill-purple-border-color: var(--pf-purple-color-450);
2693
- --pf-pill-pending-background-color: var(--pf-pink-color-450);
2708
+ --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2709
+ --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2694
2710
  --pf-pill-pending-font-color: var(--pf-pink-color-50);
2695
- --pf-pill-pending-border-color: var(--pf-pink-color-450);
2696
- --pf-pill-orange-background-color: var(--pf-orange-color-450);
2711
+ --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2712
+ --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2697
2713
  --pf-pill-orange-font-color: var(--pf-orange-color-50);
2698
- --pf-pill-orange-border-color: var(--pf-orange-color-450);
2699
- --pf-pill-teal-background-color: var(--pf-teal-color-600);
2714
+ --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2715
+ --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2700
2716
  --pf-pill-teal-font-color: var(--pf-teal-color-50);
2701
- --pf-pill-teal-border-color: var(--pf-teal-color-600);
2717
+ --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2702
2718
  }
2703
2719
 
2704
2720
  :root [data-theme=dark],
2705
2721
  :root {
2706
- --pf-pill-info-background-color: var(--pf-secondary-color-500);
2722
+ --pf-pill-info-background-color: var(--pf-info-color-dark);
2707
2723
  --pf-pill-info-font-color: var(--pf-secondary-color-50);
2708
- --pf-pill-info-border-color: var(--pf-secondary-color-500);
2709
- --pf-pill-error-background-color: var(--pf-red-color-450);
2724
+ --pf-pill-info-border-color: var(--pf-info-color-dark);
2725
+ --pf-pill-error-background-color: var(--pf-error-color-dark);
2710
2726
  --pf-pill-error-font-color: var(--pf-red-color-50);
2711
- --pf-pill-error-border-color: var(--pf-red-color-450);
2712
- --pf-pill-warning-background-color: var(--pf-yellow-color-450);
2727
+ --pf-pill-error-border-color: var(--pf-error-color-dark);
2728
+ --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2713
2729
  --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2714
- --pf-pill-warning-border-color: var(--pf-yellow-color-450);
2730
+ --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2715
2731
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2716
2732
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2717
2733
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2718
- --pf-pill-success-background-color: var(--pf-green-color-600);
2734
+ --pf-pill-success-background-color: var(--pf-success-color-dark);
2719
2735
  --pf-pill-success-font-color: var(--pf-green-color-50);
2720
- --pf-pill-success-border-color: var(--pf-green-color-600);
2721
- --pf-pill-purple-background-color: var(--pf-purple-color-450);
2736
+ --pf-pill-success-border-color: var(--pf-success-color-dark);
2737
+ --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2722
2738
  --pf-pill-purple-font-color: var(--pf-purple-color-50);
2723
- --pf-pill-purple-border-color: var(--pf-purple-color-450);
2724
- --pf-pill-pending-background-color: var(--pf-pink-color-450);
2725
- --pf-pill-pipendingnk-font-color: var(--pf-pink-color-50);
2726
- --pf-pill-pending-border-color: var(--pf-pink-color-450);
2727
- --pf-pill-orange-background-color: var(--pf-orange-color-450);
2739
+ --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2740
+ --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2741
+ --pf-pill-pending-font-color: var(--pf-pink-color-50);
2742
+ --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2743
+ --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2728
2744
  --pf-pill-orange-font-color: var(--pf-orange-color-50);
2729
- --pf-pill-orange-border-color: var(--pf-orange-color-450);
2730
- --pf-pill-teal-background-color: var(--pf-teal-color-600);
2745
+ --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2746
+ --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2731
2747
  --pf-pill-teal-font-color: var(--pf-teal-color-50);
2732
- --pf-pill-teal-border-color: var(--pf-teal-color-600);
2748
+ --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2733
2749
  }
2734
2750
 
2735
2751
  .pill {
package/lib/index.esm.css CHANGED
@@ -141,6 +141,7 @@
141
141
  --pf-yellow-color-400: #eaab3e;
142
142
  --pf-yellow-color-450: #dc9518;
143
143
  --pf-yellow-color-500: #ad791f;
144
+ --pf-yellow-color-550: #976f00;
144
145
  --pf-yellow-color-600: #825b17;
145
146
  --pf-yellow-color-700: #58421d;
146
147
  --pf-yellow-color-800: #32291b;
@@ -232,12 +233,26 @@
232
233
  --pf-black-color-90: rgba(0, 0, 0, 0.9);
233
234
  --pf-black-color-100: rgba(0, 0, 0, 1);
234
235
  --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);
235
238
  --pf-success-color: var(--pf-green-color-500);
236
- --pf-warning-color: var(--pf-yellow-color-400);
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);
237
244
  --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);
238
247
  --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);
239
250
  --pf-brand-color: var(--pf-brand-color-450);
240
- --pf-pending-color: var(--pf-orange-color-400);
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);
241
256
  }
242
257
 
243
258
  :root [data-theme=dark],
@@ -350,6 +365,7 @@
350
365
  --pf-yellow-color-400: #eaab3e;
351
366
  --pf-yellow-color-450: #dc9518;
352
367
  --pf-yellow-color-500: #ad791f;
368
+ --pf-yellow-color-550: #976f00;
353
369
  --pf-yellow-color-600: #825b17;
354
370
  --pf-yellow-color-700: #58421d;
355
371
  --pf-yellow-color-800: #32291b;
@@ -441,12 +457,26 @@
441
457
  --pf-black-color-90: rgba(0, 0, 0, 0.9);
442
458
  --pf-black-color-100: rgba(0, 0, 0, 1);
443
459
  --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);
444
462
  --pf-success-color: var(--pf-green-color-500);
445
- --pf-warning-color: var(--pf-yellow-color-400);
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);
446
468
  --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);
447
471
  --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);
448
474
  --pf-brand-color: var(--pf-brand-color-450);
449
- --pf-pending-color: var(--pf-orange-color-400);
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);
450
480
  }
451
481
 
452
482
  :root {
@@ -723,7 +753,7 @@ a:hover,
723
753
  .react-tooltip {
724
754
  z-index: 5;
725
755
  background-color: var(--pf-tooltip-background-color);
726
- border: var(--pf-border-sm) solid var(--pf-border-color-primary);
756
+ color: var(--pf-tooltip-font-color);
727
757
  opacity: 1 !important;
728
758
  text-wrap: wrap;
729
759
  }
@@ -2121,6 +2151,7 @@ body div[class*=select__single-value] {
2121
2151
  }
2122
2152
 
2123
2153
  .floatui-content {
2154
+ border: solid var(--pf-border-thin) var(--pf-border-color-secondary);
2124
2155
  border-radius: var(--pf-floatui-border-radius);
2125
2156
  box-shadow: var(--pf-floatui-box-shadow);
2126
2157
  background: var(--pf-floatui-background-color);
@@ -2642,21 +2673,6 @@ body div[class*=select__single-value] {
2642
2673
  vertical-align: middle;
2643
2674
  height: 100%;
2644
2675
  border: var(--pf-border-sm) solid var(--pf-border-color-primary);
2645
- animation: none;
2646
- }
2647
- @keyframes shimmer {
2648
- 0% {
2649
- background-color: var(--pf-primary-color-700) 40;
2650
- }
2651
- 50% {
2652
- background-color: var(--pf-primary-color-700);
2653
- }
2654
- 100% {
2655
- background-color: var(--pf-primary-color-700) 40;
2656
- }
2657
- }
2658
- .tanstack-table__centered-row.is-loading {
2659
- animation: shimmer 3s ease-in-out infinite;
2660
2676
  }
2661
2677
  .tanstack-table__centered-row svg {
2662
2678
  margin: 0 auto;
@@ -2672,64 +2688,64 @@ body div[class*=select__single-value] {
2672
2688
  }
2673
2689
 
2674
2690
  :root [data-theme=light] {
2675
- --pf-pill-info-background-color: var(--pf-secondary-color-500);
2691
+ --pf-pill-info-background-color: var(--pf-info-color-dark);
2676
2692
  --pf-pill-info-font-color: var(--pf-secondary-color-50);
2677
- --pf-pill-info-border-color: var(--pf-secondary-color-500);
2678
- --pf-pill-error-background-color: var(--pf-red-color-450);
2693
+ --pf-pill-info-border-color: var(--pf-info-color-dark);
2694
+ --pf-pill-error-background-color: var(--pf-error-color-dark);
2679
2695
  --pf-pill-error-font-color: var(--pf-red-color-50);
2680
- --pf-pill-error-border-color: var(--pf-red-color-450);
2681
- --pf-pill-warning-background-color: var(--pf-yellow-color-450);
2696
+ --pf-pill-error-border-color: var(--pf-error-color-dark);
2697
+ --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2682
2698
  --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2683
- --pf-pill-warning-border-color: var(--pf-yellow-color-450);
2699
+ --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2684
2700
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2685
2701
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2686
2702
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2687
- --pf-pill-success-background-color: var(--pf-green-color-600);
2703
+ --pf-pill-success-background-color: var(--pf-success-color-dark);
2688
2704
  --pf-pill-success-font-color: var(--pf-green-color-50);
2689
- --pf-pill-success-border-color: var(--pf-green-color-600);
2690
- --pf-pill-purple-background-color: var(--pf-purple-color-450);
2705
+ --pf-pill-success-border-color: var(--pf-success-color-dark);
2706
+ --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2691
2707
  --pf-pill-purple-font-color: var(--pf-purple-color-50);
2692
- --pf-pill-purple-border-color: var(--pf-purple-color-450);
2693
- --pf-pill-pending-background-color: var(--pf-pink-color-450);
2708
+ --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2709
+ --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2694
2710
  --pf-pill-pending-font-color: var(--pf-pink-color-50);
2695
- --pf-pill-pending-border-color: var(--pf-pink-color-450);
2696
- --pf-pill-orange-background-color: var(--pf-orange-color-450);
2711
+ --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2712
+ --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2697
2713
  --pf-pill-orange-font-color: var(--pf-orange-color-50);
2698
- --pf-pill-orange-border-color: var(--pf-orange-color-450);
2699
- --pf-pill-teal-background-color: var(--pf-teal-color-600);
2714
+ --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2715
+ --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2700
2716
  --pf-pill-teal-font-color: var(--pf-teal-color-50);
2701
- --pf-pill-teal-border-color: var(--pf-teal-color-600);
2717
+ --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2702
2718
  }
2703
2719
 
2704
2720
  :root [data-theme=dark],
2705
2721
  :root {
2706
- --pf-pill-info-background-color: var(--pf-secondary-color-500);
2722
+ --pf-pill-info-background-color: var(--pf-info-color-dark);
2707
2723
  --pf-pill-info-font-color: var(--pf-secondary-color-50);
2708
- --pf-pill-info-border-color: var(--pf-secondary-color-500);
2709
- --pf-pill-error-background-color: var(--pf-red-color-450);
2724
+ --pf-pill-info-border-color: var(--pf-info-color-dark);
2725
+ --pf-pill-error-background-color: var(--pf-error-color-dark);
2710
2726
  --pf-pill-error-font-color: var(--pf-red-color-50);
2711
- --pf-pill-error-border-color: var(--pf-red-color-450);
2712
- --pf-pill-warning-background-color: var(--pf-yellow-color-450);
2727
+ --pf-pill-error-border-color: var(--pf-error-color-dark);
2728
+ --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2713
2729
  --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2714
- --pf-pill-warning-border-color: var(--pf-yellow-color-450);
2730
+ --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2715
2731
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2716
2732
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2717
2733
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2718
- --pf-pill-success-background-color: var(--pf-green-color-600);
2734
+ --pf-pill-success-background-color: var(--pf-success-color-dark);
2719
2735
  --pf-pill-success-font-color: var(--pf-green-color-50);
2720
- --pf-pill-success-border-color: var(--pf-green-color-600);
2721
- --pf-pill-purple-background-color: var(--pf-purple-color-450);
2736
+ --pf-pill-success-border-color: var(--pf-success-color-dark);
2737
+ --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2722
2738
  --pf-pill-purple-font-color: var(--pf-purple-color-50);
2723
- --pf-pill-purple-border-color: var(--pf-purple-color-450);
2724
- --pf-pill-pending-background-color: var(--pf-pink-color-450);
2725
- --pf-pill-pipendingnk-font-color: var(--pf-pink-color-50);
2726
- --pf-pill-pending-border-color: var(--pf-pink-color-450);
2727
- --pf-pill-orange-background-color: var(--pf-orange-color-450);
2739
+ --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2740
+ --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2741
+ --pf-pill-pending-font-color: var(--pf-pink-color-50);
2742
+ --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2743
+ --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2728
2744
  --pf-pill-orange-font-color: var(--pf-orange-color-50);
2729
- --pf-pill-orange-border-color: var(--pf-orange-color-450);
2730
- --pf-pill-teal-background-color: var(--pf-teal-color-600);
2745
+ --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2746
+ --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2731
2747
  --pf-pill-teal-font-color: var(--pf-teal-color-50);
2732
- --pf-pill-teal-border-color: var(--pf-teal-color-600);
2748
+ --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2733
2749
  }
2734
2750
 
2735
2751
  .pill {
package/lib/index.esm.js CHANGED
@@ -5517,7 +5517,7 @@ const Pagination = (_a) => {
5517
5517
  const hasError = Number(inputValue) > totalPages || Number(inputValue) < 1;
5518
5518
  return (jsx("div", Object.assign({ className: classes }, rest, { children: jsx(Container, { children: jsxs(Row, { gutterWidth: 12, align: "center", children: [jsx(Col, { xs: "content", children: jsx("div", { className: "pagination__previous", children: jsx(Button$1, { "data-testid": "pagination-previous-button", ariaLabel: "Previous Page", variant: "link", onClick: handlePreviousPage, iconLeft: "chevron-left", isDisabled: isPreviousButtonDisabled }) }) }), jsx(Col, { xs: "content", children: jsx("div", { className: "pagination__current-page", children: jsx(LabeledInput, { "data-testid": "pagination-current-page-input", className: classNames('pagination__current-page-input', {
5519
5519
  'has-error': hasError,
5520
- }), value: inputValue, name: "currentPage", label: "Current Page", hasHiddenLabel: true, onKeyDown: (e) => {
5520
+ }), value: totalPages === 0 ? '0' : inputValue, name: "currentPage", label: "Current Page", hasHiddenLabel: true, onKeyDown: (e) => {
5521
5521
  if (e.key === 'Enter') {
5522
5522
  validateAndUpdatePage(e.currentTarget.value);
5523
5523
  }
@@ -43035,7 +43035,7 @@ const h="react-tooltip-core-styles",w="react-tooltip-base-styles",b={core:!1,bas
43035
43035
 
43036
43036
  const Tooltip = (_a) => {
43037
43037
  var { id, clickToShow, delayShow, delayHide, children, zIndex = 1000, place = 'top' } = _a, rest = __rest(_a, ["id", "clickToShow", "delayShow", "delayHide", "children", "zIndex", "place"]);
43038
- return (jsx(M, Object.assign({ border: "solid var(--pf-border-thin)var(--pf-border-color)", style: {
43038
+ return (jsx(M, Object.assign({ style: {
43039
43039
  backgroundColor: 'var(--pf-tooltip-background-color)',
43040
43040
  color: 'var(--pf-tooltip-font-color)',
43041
43041
  zIndex,