@patternfly/patternfly 6.5.0-prerelease.52 → 6.5.0-prerelease.54

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 (15) hide show
  1. package/components/Card/card.css +20 -8
  2. package/components/Card/card.scss +26 -7
  3. package/components/Wizard/wizard.css +20 -2
  4. package/components/Wizard/wizard.scss +22 -2
  5. package/components/_index.css +40 -10
  6. package/docs/components/Wizard/examples/Wizard.md +323 -0
  7. package/docs/demos/Card/examples/Card.md +564 -86
  8. package/docs/demos/CardView/examples/CardView.md +15 -1
  9. package/docs/demos/Compass/examples/Compass.md +393 -82
  10. package/docs/demos/Dashboard/examples/Dashboard.md +434 -100
  11. package/package.json +1 -1
  12. package/patternfly-no-globals.css +40 -10
  13. package/patternfly.css +40 -10
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/components/Card/card.css CHANGED
@@ -1,9 +1,10 @@
1
1
  .pf-v6-c-card {
2
2
  --pf-v6-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3
- --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
3
+ --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--subtle);
4
4
  --pf-v6-c-card--BorderStyle: solid;
5
5
  --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--box--default);
6
6
  --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--medium);
7
+ --pf-v6-c-card--BoxShadow: var(--pf-t--global--box-shadow--sm);
7
8
  --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
8
9
  --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9
10
  --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -33,7 +34,8 @@
33
34
  --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
34
35
  --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
35
36
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: -180deg;
36
- --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
37
+ --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-t--global--border--width--box--default);
38
+ --pf-v6-c-card--m-selectable--BorderColor: var(--pf-t--global--border--color--control--default);
37
39
  --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
38
40
  --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
39
41
  --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -70,13 +72,14 @@
70
72
  --pf-v6-c-card--m-display-lg--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--xl);
71
73
  --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
72
74
  --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
73
- --pf-v6-c-card--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
74
- --pf-v6-c-card--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
75
75
  --pf-v6-c-card--m-full-height--Height: 100%;
76
76
  --pf-v6-c-card--m-plain--BorderColor: transparent;
77
77
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
78
+ --pf-v6-c-card--m-plain--BoxShadow: none;
78
79
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
79
80
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
81
+ --pf-v6-c-card--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
82
+ --pf-v6-c-card--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default);
80
83
  }
81
84
 
82
85
  .pf-v6-c-card {
@@ -87,6 +90,7 @@
87
90
  background-color: var(--pf-v6-c-card--BackgroundColor);
88
91
  border: 0;
89
92
  border-radius: var(--pf-v6-c-card--BorderRadius);
93
+ box-shadow: var(--pf-v6-c-card--BoxShadow);
90
94
  }
91
95
  .pf-v6-c-card::before {
92
96
  position: absolute;
@@ -100,6 +104,7 @@
100
104
  gap: 0;
101
105
  }
102
106
  .pf-v6-c-card.pf-m-selectable, .pf-v6-c-card.pf-m-clickable {
107
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
103
108
  isolation: isolate;
104
109
  }
105
110
  .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
@@ -134,12 +139,16 @@
134
139
  .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
135
140
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
136
141
  }
137
- .pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
142
+ .pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card:has(.pf-v6-c-card__selectable-actions input.pf-v6-screen-reader) {
143
+ --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-as-tile--BackgroundColor);
144
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-as-tile--BorderColor);
145
+ }
146
+
147
+ .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
138
148
  --pf-v6-c-card__actions--PaddingInlineStart: 0;
139
149
  --pf-v6-c-card__actions--MarginBlockStart: 0;
140
150
  --pf-v6-c-card__actions--MarginBlockEnd: 0;
141
151
  }
142
-
143
152
  .pf-v6-c-card.pf-m-compact {
144
153
  --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize);
145
154
  --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-compact__body--FontSize);
@@ -163,13 +172,16 @@
163
172
  --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd);
164
173
  }
165
174
  .pf-v6-c-card.pf-m-secondary {
166
- --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
167
- --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-secondary--BorderWidth);
168
175
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
169
176
  }
177
+ .pf-v6-c-card.pf-m-secondary.pf-m-selectable:not(.pf-m-current, .pf-m-selected), .pf-v6-c-card.pf-m-secondary.pf-m-clickable:not(.pf-m-current, .pf-m-selected) {
178
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
179
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth);
180
+ }
170
181
  .pf-v6-c-card.pf-m-plain {
171
182
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
172
183
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
184
+ --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
173
185
  }
174
186
  .pf-v6-c-card.pf-m-expanded .pf-v6-c-card__header-toggle-icon {
175
187
  transform: rotate(var(--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate));
package/components/Card/card.scss CHANGED
@@ -2,10 +2,11 @@
2
2
 
3
3
  @include pf-root($card) {
4
4
  --#{$card}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
5
- --#{$card}--BorderColor: var(--pf-t--global--border--color--default);
5
+ --#{$card}--BorderColor: var(--pf-t--global--border--color--subtle);
6
6
  --#{$card}--BorderStyle: solid;
7
7
  --#{$card}--BorderWidth: var(--pf-t--global--border--width--box--default);
8
8
  --#{$card}--BorderRadius: var(--pf-t--global--border--radius--medium);
9
+ --#{$card}--BoxShadow: var(--pf-t--global--box-shadow--sm);
9
10
  --#{$card}--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
10
11
  --#{$card}--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11
12
  --#{$card}--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -39,7 +40,8 @@
39
40
  --#{$card}--m-expanded__header-toggle-icon--Rotate: -180deg;
40
41
 
41
42
  // Selectable/Clickable
42
- --#{$card}--m-selectable--BorderWidth: var(--#{$card}--BorderWidth);
43
+ --#{$card}--m-selectable--BorderWidth: var(--pf-t--global--border--width--box--default);
44
+ --#{$card}--m-selectable--BorderColor: var(--pf-t--global--border--color--control--default);
43
45
 
44
46
  // Clickable clicked
45
47
  --#{$card}--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -97,8 +99,6 @@
97
99
 
98
100
  // Secondary
99
101
  --#{$card}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
100
- --#{$card}--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
101
- --#{$card}--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
102
102
 
103
103
  // Full height
104
104
  --#{$card}--m-full-height--Height: 100%;
@@ -106,10 +106,15 @@
106
106
  // Plain - no border or background color
107
107
  --#{$card}--m-plain--BorderColor: transparent;
108
108
  --#{$card}--m-plain--BackgroundColor: transparent;
109
+ --#{$card}--m-plain--BoxShadow: none;
109
110
 
110
111
  // Toggle right
111
112
  --#{$card}__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
112
113
  --#{$card}__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
114
+
115
+ // As tile
116
+ --#{$card}--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
117
+ --#{$card}--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default);
113
118
  }
114
119
 
115
120
  .#{$card} {
@@ -120,6 +125,7 @@
120
125
  background-color: var(--#{$card}--BackgroundColor);
121
126
  border: 0;
122
127
  border-radius: var(--#{$card}--BorderRadius);
128
+ box-shadow: var(--#{$card}--BoxShadow);
123
129
 
124
130
  &::before {
125
131
  position: absolute;
@@ -141,6 +147,8 @@
141
147
  // SELECTABLE or CLICKABLE CARDS
142
148
  &.pf-m-selectable,
143
149
  &.pf-m-clickable {
150
+ --#{$card}--BorderColor: var(--#{$card}--m-selectable--BorderColor);
151
+
144
152
  isolation: isolate;
145
153
 
146
154
  &::before {
@@ -196,8 +204,14 @@
196
204
  }
197
205
  // stylelint-enable selector-max-class
198
206
 
199
- // when the whole card is clickable and the card actions are invisible, remove the padding/margin so it doesn't take up space
207
+
200
208
  @at-root .#{$card}__actions:has(> .#{$card}__selectable-actions input.#{$pf-prefix}screen-reader), // targets "card as tile", which are selectable cards with inputs
209
+ &:has(.#{$card}__selectable-actions input.#{$pf-prefix}screen-reader) {
210
+ --#{$card}--BackgroundColor: var(--#{$card}--m-as-tile--BackgroundColor);
211
+ --#{$card}--BorderColor: var(--#{$card}--m-as-tile--BorderColor);
212
+ }
213
+
214
+ // when the whole card is clickable and the card actions are invisible, remove the padding/margin so it doesn't take up space
201
215
  &.pf-m-clickable:not(.pf-m-selectable) {
202
216
  --#{$card}__actions--PaddingInlineStart: 0;
203
217
  --#{$card}__actions--MarginBlockStart: 0;
@@ -229,14 +243,19 @@
229
243
  }
230
244
 
231
245
  &.pf-m-secondary {
232
- --#{$card}--BorderColor: var(--#{$card}--m-secondary--BorderColor);
233
- --#{$card}--BorderWidth: var(--#{$card}--m-secondary--BorderWidth);
234
246
  --#{$card}--BackgroundColor: var(--#{$card}--m-secondary--BackgroundColor);
247
+
248
+ &.pf-m-selectable:not(.pf-m-current, .pf-m-selected),
249
+ &.pf-m-clickable:not(.pf-m-current, .pf-m-selected) {
250
+ --#{$card}--BorderColor: var(--#{$card}--m-selectable--BorderColor);
251
+ --#{$card}--BorderWidth: var(--#{$card}--m-selectable--BorderWidth);
252
+ }
235
253
  }
236
254
 
237
255
  &.pf-m-plain {
238
256
  --#{$card}--BorderColor: var(--#{$card}--m-plain--BorderColor);
239
257
  --#{$card}--BackgroundColor: var(--#{$card}--m-plain--BackgroundColor);
258
+ --#{$card}--BoxShadow: var(--#{$card}--m-plain--BoxShadow);
240
259
  }
241
260
 
242
261
  &.pf-m-expanded {
package/components/Wizard/wizard.css CHANGED
@@ -3,6 +3,7 @@
3
3
  --pf-v6-c-wizard--Height--base: 100%;
4
4
  --pf-v6-c-modal-box--c-wizard--Height--base: 47.625rem;
5
5
  --pf-v6-c-wizard__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
6
+ --pf-v6-c-wizard--m-plain__header--BackgroundColor: transparent;
6
7
  --pf-v6-c-wizard__header--ZIndex: auto;
7
8
  --pf-v6-c-wizard__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
8
9
  --pf-v6-c-wizard__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -35,7 +36,7 @@
35
36
  --pf-v6-c-wizard__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
36
37
  --pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
37
38
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
38
- --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
39
+ --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
39
40
  --pf-v6-c-wizard__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
40
41
  --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
41
42
  --pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
@@ -69,6 +70,7 @@
69
70
  --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
70
71
  --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
71
72
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
73
+ --pf-v6-c-wizard--m-plain__toggle--BackgroundColor: transparent;
72
74
  --pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--z-index--xs);
73
75
  --pf-v6-c-wizard__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
74
76
  --pf-v6-c-wizard__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -93,17 +95,20 @@
93
95
  --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
94
96
  --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
95
97
  --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
96
- --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
98
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--floating--default);
99
+ --pf-v6-c-wizard--m-plain__nav--BackgroundColor: transparent;
97
100
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
98
101
  --pf-v6-c-wizard__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
99
102
  --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
100
103
  --pf-v6-c-wizard__nav--Width: 100%;
104
+ --pf-v6-c-wizard__nav--lg--BackgroundColor: var(--pf-t--global--background--color--primary--default);
101
105
  --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
102
106
  --pf-v6-c-wizard__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
103
107
  --pf-v6-c-wizard__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
104
108
  }
105
109
  @media screen and (min-width: 62rem) {
106
110
  .pf-v6-c-wizard {
111
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard__nav--lg--BackgroundColor);
107
112
  --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
108
113
  --pf-v6-c-wizard__nav--BoxShadow: none;
109
114
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
@@ -118,6 +123,7 @@
118
123
  --pf-v6-c-wizard__nav-list--nested--MarginBlockStart: var(--pf-t--global--spacer--md);
119
124
  --pf-v6-c-wizard__nav-item--MarginBlockStart: var(--pf-t--global--spacer--md);
120
125
  --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
126
+ --pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor: transparent;
121
127
  --pf-v6-c-wizard__outer-wrap--lg--PaddingInlineStart: var(--pf-v6-c-wizard__nav--Width);
122
128
  --pf-v6-c-wizard__outer-wrap--MinHeight: 15.625rem;
123
129
  --pf-v6-c-wizard__main--ZIndex: auto;
@@ -126,6 +132,7 @@
126
132
  --pf-v6-c-wizard__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
127
133
  --pf-v6-c-wizard__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
128
134
  --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
135
+ --pf-v6-c-wizard--m-plain__footer--BackgroundColor: transparent;
129
136
  --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
130
137
  --pf-v6-c-wizard__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
131
138
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -156,6 +163,17 @@
156
163
  .pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
157
164
  display: none;
158
165
  }
166
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
167
+ --pf-v6-c-wizard__header--BackgroundColor: var(--pf-v6-c-wizard--m-plain__header--BackgroundColor);
168
+ --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-v6-c-wizard--m-plain__toggle--BackgroundColor);
169
+ --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor);
170
+ --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-v6-c-wizard--m-plain__footer--BackgroundColor);
171
+ }
172
+ @media screen and (min-width: 62rem) {
173
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
174
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard--m-plain__nav--BackgroundColor);
175
+ }
176
+ }
159
177
 
160
178
  .pf-v6-c-wizard__header {
161
179
  position: relative;
package/components/Wizard/wizard.scss CHANGED
@@ -7,6 +7,7 @@
7
7
 
8
8
  // Header
9
9
  --#{$wizard}__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
10
+ --#{$wizard}--m-plain__header--BackgroundColor: transparent;
10
11
  --#{$wizard}__header--ZIndex: auto;
11
12
  --#{$wizard}__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
12
13
  --#{$wizard}__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -57,7 +58,7 @@
57
58
  --#{$wizard}__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
58
59
  --#{$wizard}__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
59
60
  --#{$wizard}__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
60
- --#{$wizard}__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
61
+ --#{$wizard}__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
61
62
  --#{$wizard}__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
62
63
  --#{$wizard}__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
63
64
  --#{$wizard}__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
@@ -99,6 +100,7 @@
99
100
 
100
101
  // Toggle
101
102
  --#{$wizard}__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
103
+ --#{$wizard}--m-plain__toggle--BackgroundColor: transparent;
102
104
  --#{$wizard}__toggle--ZIndex: var(--pf-t--global--z-index--xs);
103
105
  --#{$wizard}__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
104
106
  --#{$wizard}__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -137,16 +139,19 @@
137
139
 
138
140
  // Nav
139
141
  --#{$wizard}__nav--ZIndex: var(--pf-t--global--z-index--sm);
140
- --#{$wizard}__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
142
+ --#{$wizard}__nav--BackgroundColor: var(--pf-t--global--background--color--floating--default);
143
+ --#{$wizard}--m-plain__nav--BackgroundColor: transparent;
141
144
  --#{$wizard}__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
142
145
  --#{$wizard}__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
143
146
  --#{$wizard}__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
144
147
  --#{$wizard}__nav--Width: 100%;
148
+ --#{$wizard}__nav--lg--BackgroundColor: var(--pf-t--global--background--color--primary--default);
145
149
  --#{$wizard}__nav--lg--Width: #{pf-size-prem(250px)};
146
150
  --#{$wizard}__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
147
151
  --#{$wizard}__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
148
152
 
149
153
  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
154
+ --#{$wizard}__nav--BackgroundColor: var(--#{$wizard}__nav--lg--BackgroundColor);
150
155
  --#{$wizard}__nav--Width: var(--#{$wizard}__nav--lg--Width);
151
156
  --#{$wizard}__nav--BoxShadow: none;
152
157
  --#{$wizard}__nav--BorderBlockEndWidth: 0;
@@ -165,6 +170,7 @@
165
170
 
166
171
  // Outer wrap
167
172
  --#{$wizard}__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
173
+ --#{$wizard}--m-plain__outer-wrap--BackgroundColor: transparent;
168
174
  --#{$wizard}__outer-wrap--lg--PaddingInlineStart: var(--#{$wizard}__nav--Width);
169
175
  --#{$wizard}__outer-wrap--MinHeight: #{pf-size-prem(250px)};
170
176
 
@@ -179,6 +185,7 @@
179
185
 
180
186
  // Footer
181
187
  --#{$wizard}__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
188
+ --#{$wizard}--m-plain__footer--BackgroundColor: transparent;
182
189
  --#{$wizard}__footer--ZIndex: var(--pf-t--global--z-index--xs);
183
190
  --#{$wizard}__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
184
191
  --#{$wizard}__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -186,6 +193,7 @@
186
193
  --#{$wizard}__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
187
194
  --#{$wizard}__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
188
195
  --#{$wizard}__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
196
+
189
197
  }
190
198
 
191
199
  .#{$wizard} {
@@ -215,6 +223,18 @@
215
223
  display: none;
216
224
  }
217
225
  }
226
+
227
+ @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain),
228
+ &.pf-m-plain {
229
+ --#{$wizard}__header--BackgroundColor: var(--#{$wizard}--m-plain__header--BackgroundColor);
230
+ --#{$wizard}__toggle--BackgroundColor: var(--#{$wizard}--m-plain__toggle--BackgroundColor);
231
+ --#{$wizard}__outer-wrap--BackgroundColor: var(--#{$wizard}--m-plain__outer-wrap--BackgroundColor);
232
+ --#{$wizard}__footer--BackgroundColor: var(--#{$wizard}--m-plain__footer--BackgroundColor);
233
+
234
+ @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
235
+ --#{$wizard}__nav--BackgroundColor: var(--#{$wizard}--m-plain__nav--BackgroundColor);
236
+ }
237
+ }
218
238
  }
219
239
 
220
240
  .#{$wizard}__header {
package/components/_index.css CHANGED
@@ -2811,10 +2811,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2811
2811
 
2812
2812
  .pf-v6-c-card {
2813
2813
  --pf-v6-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default);
2814
- --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
2814
+ --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--subtle);
2815
2815
  --pf-v6-c-card--BorderStyle: solid;
2816
2816
  --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--box--default);
2817
2817
  --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--medium);
2818
+ --pf-v6-c-card--BoxShadow: var(--pf-t--global--box-shadow--sm);
2818
2819
  --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
2819
2820
  --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
2820
2821
  --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -2844,7 +2845,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2844
2845
  --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
2845
2846
  --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
2846
2847
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: -180deg;
2847
- --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
2848
+ --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-t--global--border--width--box--default);
2849
+ --pf-v6-c-card--m-selectable--BorderColor: var(--pf-t--global--border--color--control--default);
2848
2850
  --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
2849
2851
  --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
2850
2852
  --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -2881,13 +2883,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2881
2883
  --pf-v6-c-card--m-display-lg--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--xl);
2882
2884
  --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
2883
2885
  --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
2884
- --pf-v6-c-card--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
2885
- --pf-v6-c-card--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
2886
2886
  --pf-v6-c-card--m-full-height--Height: 100%;
2887
2887
  --pf-v6-c-card--m-plain--BorderColor: transparent;
2888
2888
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
2889
+ --pf-v6-c-card--m-plain--BoxShadow: none;
2889
2890
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
2890
2891
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
2892
+ --pf-v6-c-card--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
2893
+ --pf-v6-c-card--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default);
2891
2894
  }
2892
2895
 
2893
2896
  .pf-v6-c-card {
@@ -2898,6 +2901,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2898
2901
  background-color: var(--pf-v6-c-card--BackgroundColor);
2899
2902
  border: 0;
2900
2903
  border-radius: var(--pf-v6-c-card--BorderRadius);
2904
+ box-shadow: var(--pf-v6-c-card--BoxShadow);
2901
2905
  }
2902
2906
  .pf-v6-c-card::before {
2903
2907
  position: absolute;
@@ -2911,6 +2915,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2911
2915
  gap: 0;
2912
2916
  }
2913
2917
  .pf-v6-c-card.pf-m-selectable, .pf-v6-c-card.pf-m-clickable {
2918
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
2914
2919
  isolation: isolate;
2915
2920
  }
2916
2921
  .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
@@ -2945,12 +2950,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2945
2950
  .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
2946
2951
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
2947
2952
  }
2948
- .pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
2953
+ .pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card:has(.pf-v6-c-card__selectable-actions input.pf-v6-screen-reader) {
2954
+ --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-as-tile--BackgroundColor);
2955
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-as-tile--BorderColor);
2956
+ }
2957
+
2958
+ .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
2949
2959
  --pf-v6-c-card__actions--PaddingInlineStart: 0;
2950
2960
  --pf-v6-c-card__actions--MarginBlockStart: 0;
2951
2961
  --pf-v6-c-card__actions--MarginBlockEnd: 0;
2952
2962
  }
2953
-
2954
2963
  .pf-v6-c-card.pf-m-compact {
2955
2964
  --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize);
2956
2965
  --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-compact__body--FontSize);
@@ -2974,13 +2983,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2974
2983
  --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd);
2975
2984
  }
2976
2985
  .pf-v6-c-card.pf-m-secondary {
2977
- --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
2978
- --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-secondary--BorderWidth);
2979
2986
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
2980
2987
  }
2988
+ .pf-v6-c-card.pf-m-secondary.pf-m-selectable:not(.pf-m-current, .pf-m-selected), .pf-v6-c-card.pf-m-secondary.pf-m-clickable:not(.pf-m-current, .pf-m-selected) {
2989
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
2990
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth);
2991
+ }
2981
2992
  .pf-v6-c-card.pf-m-plain {
2982
2993
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
2983
2994
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
2995
+ --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
2984
2996
  }
2985
2997
  .pf-v6-c-card.pf-m-expanded .pf-v6-c-card__header-toggle-icon {
2986
2998
  transform: rotate(var(--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate));
@@ -24705,6 +24717,7 @@ label.pf-v6-c-tree-view__node-text {
24705
24717
  --pf-v6-c-wizard--Height--base: 100%;
24706
24718
  --pf-v6-c-modal-box--c-wizard--Height--base: 47.625rem;
24707
24719
  --pf-v6-c-wizard__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
24720
+ --pf-v6-c-wizard--m-plain__header--BackgroundColor: transparent;
24708
24721
  --pf-v6-c-wizard__header--ZIndex: auto;
24709
24722
  --pf-v6-c-wizard__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
24710
24723
  --pf-v6-c-wizard__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -24737,7 +24750,7 @@ label.pf-v6-c-tree-view__node-text {
24737
24750
  --pf-v6-c-wizard__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
24738
24751
  --pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
24739
24752
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
24740
- --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
24753
+ --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
24741
24754
  --pf-v6-c-wizard__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
24742
24755
  --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
24743
24756
  --pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
@@ -24771,6 +24784,7 @@ label.pf-v6-c-tree-view__node-text {
24771
24784
  --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
24772
24785
  --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
24773
24786
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
24787
+ --pf-v6-c-wizard--m-plain__toggle--BackgroundColor: transparent;
24774
24788
  --pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--z-index--xs);
24775
24789
  --pf-v6-c-wizard__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
24776
24790
  --pf-v6-c-wizard__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -24795,17 +24809,20 @@ label.pf-v6-c-tree-view__node-text {
24795
24809
  --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
24796
24810
  --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
24797
24811
  --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
24798
- --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
24812
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--floating--default);
24813
+ --pf-v6-c-wizard--m-plain__nav--BackgroundColor: transparent;
24799
24814
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
24800
24815
  --pf-v6-c-wizard__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
24801
24816
  --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
24802
24817
  --pf-v6-c-wizard__nav--Width: 100%;
24818
+ --pf-v6-c-wizard__nav--lg--BackgroundColor: var(--pf-t--global--background--color--primary--default);
24803
24819
  --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
24804
24820
  --pf-v6-c-wizard__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
24805
24821
  --pf-v6-c-wizard__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
24806
24822
  }
24807
24823
  @media screen and (min-width: 62rem) {
24808
24824
  .pf-v6-c-wizard {
24825
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard__nav--lg--BackgroundColor);
24809
24826
  --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
24810
24827
  --pf-v6-c-wizard__nav--BoxShadow: none;
24811
24828
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
@@ -24820,6 +24837,7 @@ label.pf-v6-c-tree-view__node-text {
24820
24837
  --pf-v6-c-wizard__nav-list--nested--MarginBlockStart: var(--pf-t--global--spacer--md);
24821
24838
  --pf-v6-c-wizard__nav-item--MarginBlockStart: var(--pf-t--global--spacer--md);
24822
24839
  --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
24840
+ --pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor: transparent;
24823
24841
  --pf-v6-c-wizard__outer-wrap--lg--PaddingInlineStart: var(--pf-v6-c-wizard__nav--Width);
24824
24842
  --pf-v6-c-wizard__outer-wrap--MinHeight: 15.625rem;
24825
24843
  --pf-v6-c-wizard__main--ZIndex: auto;
@@ -24828,6 +24846,7 @@ label.pf-v6-c-tree-view__node-text {
24828
24846
  --pf-v6-c-wizard__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
24829
24847
  --pf-v6-c-wizard__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
24830
24848
  --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
24849
+ --pf-v6-c-wizard--m-plain__footer--BackgroundColor: transparent;
24831
24850
  --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
24832
24851
  --pf-v6-c-wizard__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
24833
24852
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -24858,6 +24877,17 @@ label.pf-v6-c-tree-view__node-text {
24858
24877
  .pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
24859
24878
  display: none;
24860
24879
  }
24880
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
24881
+ --pf-v6-c-wizard__header--BackgroundColor: var(--pf-v6-c-wizard--m-plain__header--BackgroundColor);
24882
+ --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-v6-c-wizard--m-plain__toggle--BackgroundColor);
24883
+ --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor);
24884
+ --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-v6-c-wizard--m-plain__footer--BackgroundColor);
24885
+ }
24886
+ @media screen and (min-width: 62rem) {
24887
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
24888
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard--m-plain__nav--BackgroundColor);
24889
+ }
24890
+ }
24861
24891
 
24862
24892
  .pf-v6-c-wizard__header {
24863
24893
  position: relative;