@patternfly/patternfly 6.0.0-alpha.12 → 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 (18) hide show
  1. package/base/patternfly-variables.css +4 -4
  2. package/base/tokens/_tokens-font.scss +4 -4
  3. package/components/Badge/badge.css +23 -15
  4. package/components/Badge/badge.scss +25 -17
  5. package/components/Page/page.css +3 -3
  6. package/components/Page/page.scss +3 -3
  7. package/docs/components/Badge/examples/Badge.md +21 -0
  8. package/package.json +1 -1
  9. package/patternfly-base-no-globals-theme-dark-unversioned.css +4 -4
  10. package/patternfly-base-no-globals.css +4 -4
  11. package/patternfly-base-theme-dark-unversioned.css +4 -4
  12. package/patternfly-base.css +4 -4
  13. package/patternfly-no-globals.css +30 -27
  14. package/patternfly-theme-dark-unversioned.css +30 -27
  15. package/patternfly.css +30 -27
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
  18. package/components/Badge/themes/dark/badge.scss +0 -9
package/base/patternfly-variables.css CHANGED
@@ -850,10 +850,10 @@
850
850
  :root:where(.pf-v5-theme-dark) {
851
851
  --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--200);
852
852
  --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 50%);
853
- --pf-t--global--box-shadow--sm-top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
854
- --pf-t--global--box-shadow--sm-right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
855
- --pf-t--global--box-shadow--sm-bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
856
- --pf-t--global--box-shadow--sm-left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
853
+ --pf-t--global--box-shadow--sm--top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
854
+ --pf-t--global--box-shadow--sm--right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
855
+ --pf-t--global--box-shadow--sm--bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
856
+ --pf-t--global--box-shadow--sm--left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
857
857
  --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 50%);
858
858
  --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
859
859
  }
package/base/tokens/_tokens-font.scss CHANGED
@@ -85,10 +85,10 @@
85
85
 
86
86
  // box shadow
87
87
  --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 50%);
88
- --pf-t--global--box-shadow--sm-top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
89
- --pf-t--global--box-shadow--sm-right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
90
- --pf-t--global--box-shadow--sm-bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
91
- --pf-t--global--box-shadow--sm-left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
88
+ --pf-t--global--box-shadow--sm--top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
89
+ --pf-t--global--box-shadow--sm--right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
90
+ --pf-t--global--box-shadow--sm--bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
91
+ --pf-t--global--box-shadow--sm--left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
92
92
  --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 50%);
93
93
  --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
94
94
  }
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/components/Page/page.css CHANGED
@@ -142,10 +142,10 @@
142
142
  --pf-v5-c-page--section--m-sticky-top--ZIndex: var(--pf-v5-global--ZIndex--md);
143
143
  --pf-v5-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
144
144
  --pf-v5-c-page--section--m-sticky-bottom--ZIndex: var(--pf-v5-global--ZIndex--md);
145
- --pf-v5-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm-top);
146
- --pf-v5-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm-bottom);
145
+ --pf-v5-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
146
+ --pf-v5-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
147
147
  --pf-v5-c-page--section--m-shadow-bottom--ZIndex: var(--pf-v5-global--ZIndex--xs);
148
- --pf-v5-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm-top);
148
+ --pf-v5-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
149
149
  --pf-v5-c-page--section--m-shadow-top--ZIndex: var(--pf-v5-global--ZIndex--xs);
150
150
  --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
151
151
  --pf-v5-c-page__main-nav--PaddingTop: var(--pf-t--global--spacer--md);
package/components/Page/page.scss CHANGED
@@ -132,12 +132,12 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
132
132
  --#{$page}--section--m-sticky-top--ZIndex: var(--#{$pf-global}--ZIndex--md);
133
133
  --#{$page}--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
134
134
  --#{$page}--section--m-sticky-bottom--ZIndex: var(--#{$pf-global}--ZIndex--md);
135
- --#{$page}--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm-top);
135
+ --#{$page}--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
136
136
 
137
137
  // Shadows
138
- --#{$page}--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm-bottom);
138
+ --#{$page}--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
139
139
  --#{$page}--section--m-shadow-bottom--ZIndex: var(--#{$pf-global}--ZIndex--xs);
140
- --#{$page}--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm-top);
140
+ --#{$page}--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
141
141
  --#{$page}--section--m-shadow-top--ZIndex: var(--#{$pf-global}--ZIndex--xs);
142
142
 
143
143
  // Main section horizontal nav
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.12",
4
+ "version": "6.0.0-alpha.14",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals-theme-dark-unversioned.css CHANGED
@@ -877,10 +877,10 @@
877
877
  :root:where(.pf-v5-theme-dark) {
878
878
  --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--200);
879
879
  --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 50%);
880
- --pf-t--global--box-shadow--sm-top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
881
- --pf-t--global--box-shadow--sm-right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
882
- --pf-t--global--box-shadow--sm-bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
883
- --pf-t--global--box-shadow--sm-left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
880
+ --pf-t--global--box-shadow--sm--top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
881
+ --pf-t--global--box-shadow--sm--right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
882
+ --pf-t--global--box-shadow--sm--bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
883
+ --pf-t--global--box-shadow--sm--left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
884
884
  --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 50%);
885
885
  --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
886
886
  }
package/patternfly-base-no-globals.css CHANGED
@@ -877,10 +877,10 @@
877
877
  :root:where(.pf-v5-theme-dark) {
878
878
  --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--200);
879
879
  --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 50%);
880
- --pf-t--global--box-shadow--sm-top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
881
- --pf-t--global--box-shadow--sm-right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
882
- --pf-t--global--box-shadow--sm-bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
883
- --pf-t--global--box-shadow--sm-left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
880
+ --pf-t--global--box-shadow--sm--top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
881
+ --pf-t--global--box-shadow--sm--right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
882
+ --pf-t--global--box-shadow--sm--bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
883
+ --pf-t--global--box-shadow--sm--left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
884
884
  --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 50%);
885
885
  --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
886
886
  }
package/patternfly-base-theme-dark-unversioned.css CHANGED
@@ -877,10 +877,10 @@
877
877
  :root:where(.pf-v5-theme-dark) {
878
878
  --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--200);
879
879
  --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 50%);
880
- --pf-t--global--box-shadow--sm-top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
881
- --pf-t--global--box-shadow--sm-right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
882
- --pf-t--global--box-shadow--sm-bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
883
- --pf-t--global--box-shadow--sm-left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
880
+ --pf-t--global--box-shadow--sm--top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
881
+ --pf-t--global--box-shadow--sm--right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
882
+ --pf-t--global--box-shadow--sm--bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
883
+ --pf-t--global--box-shadow--sm--left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
884
884
  --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 50%);
885
885
  --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
886
886
  }
package/patternfly-base.css CHANGED
@@ -877,10 +877,10 @@
877
877
  :root:where(.pf-v5-theme-dark) {
878
878
  --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--200);
879
879
  --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 50%);
880
- --pf-t--global--box-shadow--sm-top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
881
- --pf-t--global--box-shadow--sm-right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
882
- --pf-t--global--box-shadow--sm-bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
883
- --pf-t--global--box-shadow--sm-left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
880
+ --pf-t--global--box-shadow--sm--top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
881
+ --pf-t--global--box-shadow--sm--right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
882
+ --pf-t--global--box-shadow--sm--bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
883
+ --pf-t--global--box-shadow--sm--left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
884
884
  --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 50%);
885
885
  --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
886
886
  }
package/patternfly-no-globals.css CHANGED
@@ -940,10 +940,10 @@
940
940
  :root:where(.pf-v5-theme-dark) {
941
941
  --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--200);
942
942
  --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 50%);
943
- --pf-t--global--box-shadow--sm-top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
944
- --pf-t--global--box-shadow--sm-right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
945
- --pf-t--global--box-shadow--sm-bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
946
- --pf-t--global--box-shadow--sm-left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
943
+ --pf-t--global--box-shadow--sm--top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
944
+ --pf-t--global--box-shadow--sm--right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
945
+ --pf-t--global--box-shadow--sm--bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
946
+ --pf-t--global--box-shadow--sm--left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
947
947
  --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 50%);
948
948
  --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
949
949
  }
@@ -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 {
@@ -21673,10 +21676,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21673
21676
  --pf-v5-c-page--section--m-sticky-top--ZIndex: var(--pf-v5-global--ZIndex--md);
21674
21677
  --pf-v5-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
21675
21678
  --pf-v5-c-page--section--m-sticky-bottom--ZIndex: var(--pf-v5-global--ZIndex--md);
21676
- --pf-v5-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm-top);
21677
- --pf-v5-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm-bottom);
21679
+ --pf-v5-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
21680
+ --pf-v5-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
21678
21681
  --pf-v5-c-page--section--m-shadow-bottom--ZIndex: var(--pf-v5-global--ZIndex--xs);
21679
- --pf-v5-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm-top);
21682
+ --pf-v5-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
21680
21683
  --pf-v5-c-page--section--m-shadow-top--ZIndex: var(--pf-v5-global--ZIndex--xs);
21681
21684
  --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21682
21685
  --pf-v5-c-page__main-nav--PaddingTop: var(--pf-t--global--spacer--md);
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -940,10 +940,10 @@
940
940
  :root:where(.pf-v5-theme-dark) {
941
941
  --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--200);
942
942
  --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 50%);
943
- --pf-t--global--box-shadow--sm-top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
944
- --pf-t--global--box-shadow--sm-right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
945
- --pf-t--global--box-shadow--sm-bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
946
- --pf-t--global--box-shadow--sm-left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
943
+ --pf-t--global--box-shadow--sm--top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
944
+ --pf-t--global--box-shadow--sm--right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
945
+ --pf-t--global--box-shadow--sm--bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
946
+ --pf-t--global--box-shadow--sm--left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
947
947
  --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 50%);
948
948
  --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
949
949
  }
@@ -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 {
@@ -21789,10 +21792,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21789
21792
  --pf-v5-c-page--section--m-sticky-top--ZIndex: var(--pf-v5-global--ZIndex--md);
21790
21793
  --pf-v5-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
21791
21794
  --pf-v5-c-page--section--m-sticky-bottom--ZIndex: var(--pf-v5-global--ZIndex--md);
21792
- --pf-v5-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm-top);
21793
- --pf-v5-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm-bottom);
21795
+ --pf-v5-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
21796
+ --pf-v5-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
21794
21797
  --pf-v5-c-page--section--m-shadow-bottom--ZIndex: var(--pf-v5-global--ZIndex--xs);
21795
- --pf-v5-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm-top);
21798
+ --pf-v5-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
21796
21799
  --pf-v5-c-page--section--m-shadow-top--ZIndex: var(--pf-v5-global--ZIndex--xs);
21797
21800
  --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21798
21801
  --pf-v5-c-page__main-nav--PaddingTop: var(--pf-t--global--spacer--md);
package/patternfly.css CHANGED
@@ -940,10 +940,10 @@
940
940
  :root:where(.pf-v5-theme-dark) {
941
941
  --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--200);
942
942
  --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 50%);
943
- --pf-t--global--box-shadow--sm-top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
944
- --pf-t--global--box-shadow--sm-right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
945
- --pf-t--global--box-shadow--sm-bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
946
- --pf-t--global--box-shadow--sm-left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
943
+ --pf-t--global--box-shadow--sm--top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
944
+ --pf-t--global--box-shadow--sm--right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
945
+ --pf-t--global--box-shadow--sm--bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
946
+ --pf-t--global--box-shadow--sm--left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
947
947
  --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 50%);
948
948
  --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
949
949
  }
@@ -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 {
@@ -21789,10 +21792,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21789
21792
  --pf-v5-c-page--section--m-sticky-top--ZIndex: var(--pf-v5-global--ZIndex--md);
21790
21793
  --pf-v5-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
21791
21794
  --pf-v5-c-page--section--m-sticky-bottom--ZIndex: var(--pf-v5-global--ZIndex--md);
21792
- --pf-v5-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm-top);
21793
- --pf-v5-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm-bottom);
21795
+ --pf-v5-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
21796
+ --pf-v5-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
21794
21797
  --pf-v5-c-page--section--m-shadow-bottom--ZIndex: var(--pf-v5-global--ZIndex--xs);
21795
- --pf-v5-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm-top);
21798
+ --pf-v5-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
21796
21799
  --pf-v5-c-page--section--m-shadow-top--ZIndex: var(--pf-v5-global--ZIndex--xs);
21797
21800
  --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21798
21801
  --pf-v5-c-page__main-nav--PaddingTop: var(--pf-t--global--spacer--md);