@patternfly/patternfly 6.0.0-alpha.13 → 6.0.0-alpha.14

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 (10) hide show
  1. package/components/Badge/badge.css +23 -15
  2. package/components/Badge/badge.scss +25 -17
  3. package/docs/components/Badge/examples/Badge.md +21 -0
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +23 -20
  6. package/patternfly-theme-dark-unversioned.css +23 -20
  7. package/patternfly.css +23 -20
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
  10. package/components/Badge/themes/dark/badge.scss +0 -9
package/components/Badge/badge.css CHANGED
@@ -1,15 +1,22 @@
1
+ :root {
2
+ --pf-v5-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
3
+ --pf-v5-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
4
+ --pf-v5-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
5
+ --pf-v5-c-badge--PaddingRight: var(--pf-t--global--spacer--sm);
6
+ --pf-v5-c-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
7
+ --pf-v5-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
8
+ --pf-v5-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
9
+ --pf-v5-c-badge__toggle-icon--MarginLeft: var(--pf-t--global--spacer--xs);
10
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
11
+ --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
12
+ --pf-v5-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
13
+ --pf-v5-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
14
+ --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
15
+ --pf-v5-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
16
+ --pf-v5-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
17
+ }
18
+
1
19
  .pf-v5-c-badge {
2
- --pf-v5-c-badge--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
3
- --pf-v5-c-badge--FontSize: var(--pf-v5-global--FontSize--xs);
4
- --pf-v5-c-badge--FontWeight: var(--pf-v5-global--FontWeight--bold);
5
- --pf-v5-c-badge--PaddingRight: var(--pf-v5-global--spacer--sm);
6
- --pf-v5-c-badge--PaddingLeft: var(--pf-v5-global--spacer--sm);
7
- --pf-v5-c-badge--Color: var(--pf-v5-global--Color--dark-100);
8
- --pf-v5-c-badge--MinWidth: var(--pf-v5-global--spacer--xl);
9
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
10
- --pf-v5-c-badge--m-read--Color: var(--pf-v5-global--Color--dark-100);
11
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--100);
12
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
13
20
  display: inline-block;
14
21
  min-width: var(--pf-v5-c-badge--MinWidth);
15
22
  padding-inline-start: var(--pf-v5-c-badge--PaddingLeft);
@@ -25,14 +32,15 @@
25
32
  .pf-v5-c-badge.pf-m-read {
26
33
  --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-read--Color);
27
34
  --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
35
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-read__toggle-icon--Color);
28
36
  }
29
37
  .pf-v5-c-badge.pf-m-unread {
30
38
  --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-unread--Color);
31
39
  --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-unread--BackgroundColor);
40
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-unread__toggle-icon--Color);
32
41
  }
33
42
 
34
- :where(.pf-v5-theme-dark) .pf-v5-c-badge {
35
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--palette--black-500);
36
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
37
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--300);
43
+ .pf-v5-c-badge__toggle-icon {
44
+ margin-inline-start: var(--pf-v5-c-badge__toggle-icon--MarginLeft);
45
+ color: var(--pf-v5-c-badge__toggle-icon--Color);
38
46
  }
package/components/Badge/badge.scss CHANGED
@@ -1,21 +1,29 @@
1
1
  // @debug $badge; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$badge} {
3
+ :root {
4
4
  // Component
5
- --#{$badge}--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
6
- --#{$badge}--FontSize: var(--#{$pf-global}--FontSize--xs);
7
- --#{$badge}--FontWeight: var(--#{$pf-global}--FontWeight--bold);
8
- --#{$badge}--PaddingRight: var(--#{$pf-global}--spacer--sm);
9
- --#{$badge}--PaddingLeft: var(--#{$pf-global}--spacer--sm);
10
- --#{$badge}--Color: var(--#{$pf-global}--Color--dark-100);
11
- --#{$badge}--MinWidth: var(--#{$pf-global}--spacer--xl);
5
+ --#{$badge}--BorderRadius: var(--pf-t--global--border--radius--pill);
6
+ --#{$badge}--FontSize: var(--pf-t--global--font--size--body--sm);
7
+ --#{$badge}--FontWeight: var(--pf-t--global--font--weight--body--bold); // TODO - design calls for 500/semi-bold, do we need a token for that or is bold ok
8
+ --#{$badge}--PaddingRight: var(--pf-t--global--spacer--sm);
9
+ --#{$badge}--PaddingLeft: var(--pf-t--global--spacer--sm);
10
+ --#{$badge}--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
11
+ --#{$badge}--MinWidth: var(--pf-t--global--spacer--xl);
12
+
13
+ // Toggle icon
14
+ --#{$badge}__toggle-icon--MarginLeft: var(--pf-t--global--spacer--xs);
15
+ --#{$badge}__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
12
16
 
13
17
  // Modifiers
14
- --#{$badge}--m-read--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
15
- --#{$badge}--m-read--Color: var(--#{$pf-global}--Color--dark-100);
16
- --#{$badge}--m-unread--BackgroundColor: var(--#{$pf-global}--primary-color--100);
17
- --#{$badge}--m-unread--Color: var(--#{$pf-global}--Color--light-100);
18
+ --#{$badge}--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
19
+ --#{$badge}--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
20
+ --#{$badge}--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
21
+ --#{$badge}--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
22
+ --#{$badge}--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
23
+ --#{$badge}--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
24
+ }
18
25
 
26
+ .#{$badge} {
19
27
  display: inline-block;
20
28
  min-width: var(--#{$badge}--MinWidth);
21
29
  padding-inline-start: var(--#{$badge}--PaddingLeft);
@@ -31,17 +39,17 @@
31
39
  &.pf-m-read {
32
40
  --#{$badge}--Color: var(--#{$badge}--m-read--Color);
33
41
  --#{$badge}--BackgroundColor: var(--#{$badge}--m-read--BackgroundColor);
42
+ --#{$badge}__toggle-icon--Color: var(--#{$badge}--m-read__toggle-icon--Color);
34
43
  }
35
44
 
36
45
  &.pf-m-unread {
37
46
  --#{$badge}--Color: var(--#{$badge}--m-unread--Color);
38
47
  --#{$badge}--BackgroundColor: var(--#{$badge}--m-unread--BackgroundColor);
48
+ --#{$badge}__toggle-icon--Color: var(--#{$badge}--m-unread__toggle-icon--Color);
39
49
  }
40
50
  }
41
51
 
42
- // stylelint-disable no-invalid-position-at-import-rule
43
- @import "themes/dark/badge";
44
-
45
- @include pf-v5-theme-dark {
46
- @include pf-v5-theme-dark-badge;
52
+ .#{$badge}__toggle-icon {
53
+ margin-inline-start: var(--#{$badge}__toggle-icon--MarginLeft);
54
+ color: var(--#{$badge}__toggle-icon--Color);
47
55
  }
package/docs/components/Badge/examples/Badge.md CHANGED
@@ -36,6 +36,26 @@ cssPrefix: pf-v5-c-badge
36
36
 
37
37
  ```
38
38
 
39
+ ### Badge as toggle
40
+
41
+ ```html
42
+ <span class="pf-v5-c-badge pf-m-read">
43
+ 7
44
+ <span class="pf-v5-c-badge__toggle-icon">
45
+ <i class="fas fa-caret-down"></i>
46
+ </span>
47
+ </span>
48
+ <span class="pf-v5-c-badge pf-m-unread">
49
+ 7
50
+ <span class="pf-v5-screen-reader">unread messages</span>
51
+
52
+ <span class="pf-v5-c-badge__toggle-icon">
53
+ <i class="fas fa-caret-down"></i>
54
+ </span>
55
+ </span>
56
+
57
+ ```
58
+
39
59
  ## Documentation
40
60
 
41
61
  ### Overview
@@ -47,5 +67,6 @@ Always add a modifier class. Never use the class `.pf-v5-c-badge` on its own.
47
67
  | Class | Applied to | Outcome |
48
68
  | -- | -- | -- |
49
69
  | `.pf-v5-c-badge` | `<span>` | Initiates a badge. **Always use with a modifier class.** |
70
+ | `.pf-v5-c-badge__toggle-icon` | `<span>` | Initiates a badge toggle icon. |
50
71
  | `.pf-m-read` | `.pf-v5-c-badge` | Applies read badge styling. |
51
72
  | `.pf-m-unread` | `.pf-v5-c-badge` | Applies unread badge styling. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.13",
4
+ "version": "6.0.0-alpha.14",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -7515,18 +7515,25 @@
7515
7515
  box-shadow: var(--pf-v5-c-back-to-top--c-button--BoxShadow);
7516
7516
  }
7517
7517
 
7518
+ :root {
7519
+ --pf-v5-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
7520
+ --pf-v5-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
7521
+ --pf-v5-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
7522
+ --pf-v5-c-badge--PaddingRight: var(--pf-t--global--spacer--sm);
7523
+ --pf-v5-c-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
7524
+ --pf-v5-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
7525
+ --pf-v5-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
7526
+ --pf-v5-c-badge__toggle-icon--MarginLeft: var(--pf-t--global--spacer--xs);
7527
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
7528
+ --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
7529
+ --pf-v5-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
7530
+ --pf-v5-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
7531
+ --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
7532
+ --pf-v5-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
7533
+ --pf-v5-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
7534
+ }
7535
+
7518
7536
  .pf-v5-c-badge {
7519
- --pf-v5-c-badge--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
7520
- --pf-v5-c-badge--FontSize: var(--pf-v5-global--FontSize--xs);
7521
- --pf-v5-c-badge--FontWeight: var(--pf-v5-global--FontWeight--bold);
7522
- --pf-v5-c-badge--PaddingRight: var(--pf-v5-global--spacer--sm);
7523
- --pf-v5-c-badge--PaddingLeft: var(--pf-v5-global--spacer--sm);
7524
- --pf-v5-c-badge--Color: var(--pf-v5-global--Color--dark-100);
7525
- --pf-v5-c-badge--MinWidth: var(--pf-v5-global--spacer--xl);
7526
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
7527
- --pf-v5-c-badge--m-read--Color: var(--pf-v5-global--Color--dark-100);
7528
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--100);
7529
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
7530
7537
  display: inline-block;
7531
7538
  min-width: var(--pf-v5-c-badge--MinWidth);
7532
7539
  padding-inline-start: var(--pf-v5-c-badge--PaddingLeft);
@@ -7542,21 +7549,17 @@
7542
7549
  .pf-v5-c-badge.pf-m-read {
7543
7550
  --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-read--Color);
7544
7551
  --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
7552
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-read__toggle-icon--Color);
7545
7553
  }
7546
7554
  .pf-v5-c-badge.pf-m-unread {
7547
7555
  --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-unread--Color);
7548
7556
  --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-unread--BackgroundColor);
7557
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-unread__toggle-icon--Color);
7549
7558
  }
7550
7559
 
7551
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,
7552
- :where(.pf-v5-theme-dark) .pf-v5-c-login__footer .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button {
7553
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
7554
- }
7555
-
7556
- :where(.pf-v5-theme-dark) .pf-v5-c-badge {
7557
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--palette--black-500);
7558
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
7559
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--300);
7560
+ .pf-v5-c-badge__toggle-icon {
7561
+ margin-inline-start: var(--pf-v5-c-badge__toggle-icon--MarginLeft);
7562
+ color: var(--pf-v5-c-badge__toggle-icon--Color);
7560
7563
  }
7561
7564
 
7562
7565
  .pf-v5-c-banner {
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -7631,18 +7631,25 @@ button) {
7631
7631
  box-shadow: var(--pf-v5-c-back-to-top--c-button--BoxShadow);
7632
7632
  }
7633
7633
 
7634
+ :root {
7635
+ --pf-v5-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
7636
+ --pf-v5-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
7637
+ --pf-v5-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
7638
+ --pf-v5-c-badge--PaddingRight: var(--pf-t--global--spacer--sm);
7639
+ --pf-v5-c-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
7640
+ --pf-v5-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
7641
+ --pf-v5-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
7642
+ --pf-v5-c-badge__toggle-icon--MarginLeft: var(--pf-t--global--spacer--xs);
7643
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
7644
+ --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
7645
+ --pf-v5-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
7646
+ --pf-v5-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
7647
+ --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
7648
+ --pf-v5-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
7649
+ --pf-v5-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
7650
+ }
7651
+
7634
7652
  .pf-v5-c-badge {
7635
- --pf-v5-c-badge--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
7636
- --pf-v5-c-badge--FontSize: var(--pf-v5-global--FontSize--xs);
7637
- --pf-v5-c-badge--FontWeight: var(--pf-v5-global--FontWeight--bold);
7638
- --pf-v5-c-badge--PaddingRight: var(--pf-v5-global--spacer--sm);
7639
- --pf-v5-c-badge--PaddingLeft: var(--pf-v5-global--spacer--sm);
7640
- --pf-v5-c-badge--Color: var(--pf-v5-global--Color--dark-100);
7641
- --pf-v5-c-badge--MinWidth: var(--pf-v5-global--spacer--xl);
7642
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
7643
- --pf-v5-c-badge--m-read--Color: var(--pf-v5-global--Color--dark-100);
7644
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--100);
7645
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
7646
7653
  display: inline-block;
7647
7654
  min-width: var(--pf-v5-c-badge--MinWidth);
7648
7655
  padding-inline-start: var(--pf-v5-c-badge--PaddingLeft);
@@ -7658,21 +7665,17 @@ button) {
7658
7665
  .pf-v5-c-badge.pf-m-read {
7659
7666
  --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-read--Color);
7660
7667
  --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
7668
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-read__toggle-icon--Color);
7661
7669
  }
7662
7670
  .pf-v5-c-badge.pf-m-unread {
7663
7671
  --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-unread--Color);
7664
7672
  --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-unread--BackgroundColor);
7673
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-unread__toggle-icon--Color);
7665
7674
  }
7666
7675
 
7667
- :where(.pf-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,
7668
- :where(.pf-theme-dark) .pf-v5-c-login__footer .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-banner .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button {
7669
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
7670
- }
7671
-
7672
- :where(.pf-theme-dark) .pf-v5-c-badge {
7673
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--palette--black-500);
7674
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
7675
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--300);
7676
+ .pf-v5-c-badge__toggle-icon {
7677
+ margin-inline-start: var(--pf-v5-c-badge__toggle-icon--MarginLeft);
7678
+ color: var(--pf-v5-c-badge__toggle-icon--Color);
7676
7679
  }
7677
7680
 
7678
7681
  .pf-v5-c-banner {
package/patternfly.css CHANGED
@@ -7631,18 +7631,25 @@ button) {
7631
7631
  box-shadow: var(--pf-v5-c-back-to-top--c-button--BoxShadow);
7632
7632
  }
7633
7633
 
7634
+ :root {
7635
+ --pf-v5-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
7636
+ --pf-v5-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
7637
+ --pf-v5-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
7638
+ --pf-v5-c-badge--PaddingRight: var(--pf-t--global--spacer--sm);
7639
+ --pf-v5-c-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
7640
+ --pf-v5-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
7641
+ --pf-v5-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
7642
+ --pf-v5-c-badge__toggle-icon--MarginLeft: var(--pf-t--global--spacer--xs);
7643
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
7644
+ --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
7645
+ --pf-v5-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
7646
+ --pf-v5-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
7647
+ --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
7648
+ --pf-v5-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
7649
+ --pf-v5-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
7650
+ }
7651
+
7634
7652
  .pf-v5-c-badge {
7635
- --pf-v5-c-badge--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
7636
- --pf-v5-c-badge--FontSize: var(--pf-v5-global--FontSize--xs);
7637
- --pf-v5-c-badge--FontWeight: var(--pf-v5-global--FontWeight--bold);
7638
- --pf-v5-c-badge--PaddingRight: var(--pf-v5-global--spacer--sm);
7639
- --pf-v5-c-badge--PaddingLeft: var(--pf-v5-global--spacer--sm);
7640
- --pf-v5-c-badge--Color: var(--pf-v5-global--Color--dark-100);
7641
- --pf-v5-c-badge--MinWidth: var(--pf-v5-global--spacer--xl);
7642
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
7643
- --pf-v5-c-badge--m-read--Color: var(--pf-v5-global--Color--dark-100);
7644
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--100);
7645
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
7646
7653
  display: inline-block;
7647
7654
  min-width: var(--pf-v5-c-badge--MinWidth);
7648
7655
  padding-inline-start: var(--pf-v5-c-badge--PaddingLeft);
@@ -7658,21 +7665,17 @@ button) {
7658
7665
  .pf-v5-c-badge.pf-m-read {
7659
7666
  --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-read--Color);
7660
7667
  --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
7668
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-read__toggle-icon--Color);
7661
7669
  }
7662
7670
  .pf-v5-c-badge.pf-m-unread {
7663
7671
  --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-unread--Color);
7664
7672
  --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-unread--BackgroundColor);
7673
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-unread__toggle-icon--Color);
7665
7674
  }
7666
7675
 
7667
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,
7668
- :where(.pf-v5-theme-dark) .pf-v5-c-login__footer .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button {
7669
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
7670
- }
7671
-
7672
- :where(.pf-v5-theme-dark) .pf-v5-c-badge {
7673
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--palette--black-500);
7674
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
7675
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--300);
7676
+ .pf-v5-c-badge__toggle-icon {
7677
+ margin-inline-start: var(--pf-v5-c-badge__toggle-icon--MarginLeft);
7678
+ color: var(--pf-v5-c-badge__toggle-icon--Color);
7676
7679
  }
7677
7680
 
7678
7681
  .pf-v5-c-banner {