@indico-data/design-system 3.0.6 → 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 (6) hide show
  1. package/lib/index.css +22 -22
  2. package/lib/index.esm.css +22 -22
  3. package/package.json +1 -1
  4. package/src/components/pill/styles/Pill.scss +16 -16
  5. package/src/styles/variables/themes/dark.scss +3 -3
  6. package/src/styles/variables/themes/light.scss +3 -3
package/lib/index.css CHANGED
@@ -254,9 +254,9 @@
254
254
  --pf-brand-color: var(--pf-brand-color-450);
255
255
  --pf-brand-color-dark: var(--pf-brand-color-550);
256
256
  --pf-brand-color-light: var(--pf-brand-color-300);
257
- --pf-pending-color: var(--pf-pink-color-450);
258
- --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
259
- --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
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);
260
260
  }
261
261
 
262
262
  :root [data-theme=dark],
@@ -482,9 +482,9 @@
482
482
  --pf-brand-color: var(--pf-brand-color-450);
483
483
  --pf-brand-color-dark: var(--pf-brand-color-550);
484
484
  --pf-brand-color-light: var(--pf-brand-color-300);
485
- --pf-pending-color: var(--pf-pink-color-450);
486
- --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
487
- --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
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);
488
488
  }
489
489
 
490
490
  :root {
@@ -2673,62 +2673,62 @@ body div[class*=select__single-value] {
2673
2673
 
2674
2674
  :root [data-theme=light] {
2675
2675
  --pf-pill-info-background-color: var(--pf-info-color-dark);
2676
- --pf-pill-info-font-color: var(--pf-secondary-color-50);
2676
+ --pf-pill-info-font-color: var(--pf-gray-color-50);
2677
2677
  --pf-pill-info-border-color: var(--pf-info-color-dark);
2678
2678
  --pf-pill-error-background-color: var(--pf-error-color-dark);
2679
- --pf-pill-error-font-color: var(--pf-red-color-50);
2679
+ --pf-pill-error-font-color: var(--pf-gray-color-50);
2680
2680
  --pf-pill-error-border-color: var(--pf-error-color-dark);
2681
2681
  --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2682
- --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2682
+ --pf-pill-warning-font-color: var(--pf-gray-color-50);
2683
2683
  --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2684
2684
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2685
2685
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2686
2686
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2687
2687
  --pf-pill-success-background-color: var(--pf-success-color-dark);
2688
- --pf-pill-success-font-color: var(--pf-green-color-50);
2688
+ --pf-pill-success-font-color: var(--pf-gray-color-50);
2689
2689
  --pf-pill-success-border-color: var(--pf-success-color-dark);
2690
2690
  --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2691
- --pf-pill-purple-font-color: var(--pf-purple-color-50);
2691
+ --pf-pill-purple-font-color: var(--pf-gray-color-50);
2692
2692
  --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2693
2693
  --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2694
- --pf-pill-pending-font-color: var(--pf-pink-color-50);
2694
+ --pf-pill-pending-font-color: var(--pf-gray-color-50);
2695
2695
  --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2696
2696
  --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2697
- --pf-pill-orange-font-color: var(--pf-orange-color-50);
2697
+ --pf-pill-orange-font-color: var(--pf-gray-color-50);
2698
2698
  --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2699
2699
  --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2700
- --pf-pill-teal-font-color: var(--pf-teal-color-50);
2700
+ --pf-pill-teal-font-color: var(--pf-gray-color-50);
2701
2701
  --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2702
2702
  }
2703
2703
 
2704
2704
  :root [data-theme=dark],
2705
2705
  :root {
2706
2706
  --pf-pill-info-background-color: var(--pf-info-color-dark);
2707
- --pf-pill-info-font-color: var(--pf-secondary-color-50);
2707
+ --pf-pill-info-font-color: var(--pf-gray-color-50);
2708
2708
  --pf-pill-info-border-color: var(--pf-info-color-dark);
2709
2709
  --pf-pill-error-background-color: var(--pf-error-color-dark);
2710
- --pf-pill-error-font-color: var(--pf-red-color-50);
2710
+ --pf-pill-error-font-color: var(--pf-gray-color-50);
2711
2711
  --pf-pill-error-border-color: var(--pf-error-color-dark);
2712
2712
  --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2713
- --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2713
+ --pf-pill-warning-font-color: var(--pf-gray-color-50);
2714
2714
  --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2715
2715
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2716
2716
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2717
2717
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2718
2718
  --pf-pill-success-background-color: var(--pf-success-color-dark);
2719
- --pf-pill-success-font-color: var(--pf-green-color-50);
2719
+ --pf-pill-success-font-color: var(--pf-gray-color-50);
2720
2720
  --pf-pill-success-border-color: var(--pf-success-color-dark);
2721
2721
  --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2722
- --pf-pill-purple-font-color: var(--pf-purple-color-50);
2722
+ --pf-pill-purple-font-color: var(--pf-gray-color-50);
2723
2723
  --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2724
2724
  --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2725
- --pf-pill-pending-font-color: var(--pf-pink-color-50);
2725
+ --pf-pill-pending-font-color: var(--pf-gray-color-50);
2726
2726
  --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2727
2727
  --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2728
- --pf-pill-orange-font-color: var(--pf-orange-color-50);
2728
+ --pf-pill-orange-font-color: var(--pf-gray-color-50);
2729
2729
  --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2730
2730
  --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2731
- --pf-pill-teal-font-color: var(--pf-teal-color-50);
2731
+ --pf-pill-teal-font-color: var(--pf-gray-color-50);
2732
2732
  --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2733
2733
  }
2734
2734
 
package/lib/index.esm.css CHANGED
@@ -254,9 +254,9 @@
254
254
  --pf-brand-color: var(--pf-brand-color-450);
255
255
  --pf-brand-color-dark: var(--pf-brand-color-550);
256
256
  --pf-brand-color-light: var(--pf-brand-color-300);
257
- --pf-pending-color: var(--pf-pink-color-450);
258
- --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
259
- --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
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);
260
260
  }
261
261
 
262
262
  :root [data-theme=dark],
@@ -482,9 +482,9 @@
482
482
  --pf-brand-color: var(--pf-brand-color-450);
483
483
  --pf-brand-color-dark: var(--pf-brand-color-550);
484
484
  --pf-brand-color-light: var(--pf-brand-color-300);
485
- --pf-pending-color: var(--pf-pink-color-450);
486
- --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
487
- --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
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);
488
488
  }
489
489
 
490
490
  :root {
@@ -2673,62 +2673,62 @@ body div[class*=select__single-value] {
2673
2673
 
2674
2674
  :root [data-theme=light] {
2675
2675
  --pf-pill-info-background-color: var(--pf-info-color-dark);
2676
- --pf-pill-info-font-color: var(--pf-secondary-color-50);
2676
+ --pf-pill-info-font-color: var(--pf-gray-color-50);
2677
2677
  --pf-pill-info-border-color: var(--pf-info-color-dark);
2678
2678
  --pf-pill-error-background-color: var(--pf-error-color-dark);
2679
- --pf-pill-error-font-color: var(--pf-red-color-50);
2679
+ --pf-pill-error-font-color: var(--pf-gray-color-50);
2680
2680
  --pf-pill-error-border-color: var(--pf-error-color-dark);
2681
2681
  --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2682
- --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2682
+ --pf-pill-warning-font-color: var(--pf-gray-color-50);
2683
2683
  --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2684
2684
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2685
2685
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2686
2686
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2687
2687
  --pf-pill-success-background-color: var(--pf-success-color-dark);
2688
- --pf-pill-success-font-color: var(--pf-green-color-50);
2688
+ --pf-pill-success-font-color: var(--pf-gray-color-50);
2689
2689
  --pf-pill-success-border-color: var(--pf-success-color-dark);
2690
2690
  --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2691
- --pf-pill-purple-font-color: var(--pf-purple-color-50);
2691
+ --pf-pill-purple-font-color: var(--pf-gray-color-50);
2692
2692
  --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2693
2693
  --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2694
- --pf-pill-pending-font-color: var(--pf-pink-color-50);
2694
+ --pf-pill-pending-font-color: var(--pf-gray-color-50);
2695
2695
  --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2696
2696
  --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2697
- --pf-pill-orange-font-color: var(--pf-orange-color-50);
2697
+ --pf-pill-orange-font-color: var(--pf-gray-color-50);
2698
2698
  --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2699
2699
  --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2700
- --pf-pill-teal-font-color: var(--pf-teal-color-50);
2700
+ --pf-pill-teal-font-color: var(--pf-gray-color-50);
2701
2701
  --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2702
2702
  }
2703
2703
 
2704
2704
  :root [data-theme=dark],
2705
2705
  :root {
2706
2706
  --pf-pill-info-background-color: var(--pf-info-color-dark);
2707
- --pf-pill-info-font-color: var(--pf-secondary-color-50);
2707
+ --pf-pill-info-font-color: var(--pf-gray-color-50);
2708
2708
  --pf-pill-info-border-color: var(--pf-info-color-dark);
2709
2709
  --pf-pill-error-background-color: var(--pf-error-color-dark);
2710
- --pf-pill-error-font-color: var(--pf-red-color-50);
2710
+ --pf-pill-error-font-color: var(--pf-gray-color-50);
2711
2711
  --pf-pill-error-border-color: var(--pf-error-color-dark);
2712
2712
  --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2713
- --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2713
+ --pf-pill-warning-font-color: var(--pf-gray-color-50);
2714
2714
  --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2715
2715
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2716
2716
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2717
2717
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2718
2718
  --pf-pill-success-background-color: var(--pf-success-color-dark);
2719
- --pf-pill-success-font-color: var(--pf-green-color-50);
2719
+ --pf-pill-success-font-color: var(--pf-gray-color-50);
2720
2720
  --pf-pill-success-border-color: var(--pf-success-color-dark);
2721
2721
  --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2722
- --pf-pill-purple-font-color: var(--pf-purple-color-50);
2722
+ --pf-pill-purple-font-color: var(--pf-gray-color-50);
2723
2723
  --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2724
2724
  --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2725
- --pf-pill-pending-font-color: var(--pf-pink-color-50);
2725
+ --pf-pill-pending-font-color: var(--pf-gray-color-50);
2726
2726
  --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2727
2727
  --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2728
- --pf-pill-orange-font-color: var(--pf-orange-color-50);
2728
+ --pf-pill-orange-font-color: var(--pf-gray-color-50);
2729
2729
  --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2730
2730
  --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2731
- --pf-pill-teal-font-color: var(--pf-teal-color-50);
2731
+ --pf-pill-teal-font-color: var(--pf-gray-color-50);
2732
2732
  --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2733
2733
  }
2734
2734
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@indico-data/design-system",
3
- "version": "3.0.6",
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/variables/themes/dark.scss CHANGED
@@ -261,7 +261,7 @@
261
261
  --pf-brand-color: var(--pf-brand-color-450);
262
262
  --pf-brand-color-dark: var(--pf-brand-color-550);
263
263
  --pf-brand-color-light: var(--pf-brand-color-300);
264
- --pf-pending-color: var(--pf-pink-color-450);
265
- --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
266
- --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
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);
267
267
  }
package/src/styles/variables/themes/light.scss CHANGED
@@ -260,7 +260,7 @@
260
260
  --pf-brand-color: var(--pf-brand-color-450);
261
261
  --pf-brand-color-dark: var(--pf-brand-color-550);
262
262
  --pf-brand-color-light: var(--pf-brand-color-300);
263
- --pf-pending-color: var(--pf-pink-color-450);
264
- --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
265
- --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
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);
266
266
  }