@patternfly/patternfly 6.0.0-alpha.80 → 6.0.0-alpha.82

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 (14) hide show
  1. package/components/DualListSelector/dual-list-selector.css +56 -48
  2. package/components/DualListSelector/dual-list-selector.scss +57 -50
  3. package/components/Wizard/wizard.css +128 -205
  4. package/components/Wizard/wizard.scss +128 -180
  5. package/docs/components/Wizard/examples/Wizard.md +31 -7
  6. package/docs/demos/Wizard/examples/Wizard.md +108 -18
  7. package/package.json +1 -1
  8. package/patternfly-no-globals.css +199 -257
  9. package/patternfly-theme-dark-unversioned.css +199 -257
  10. package/patternfly.css +199 -257
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
  13. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  14. package/components/Wizard/themes/dark/wizard.scss +0 -12
package/components/Wizard/wizard.scss CHANGED
@@ -1,71 +1,60 @@
1
1
  // @debug $wizard; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$wizard} {
3
+ :where(:root),
4
+ :where(.#{$wizard}) {
4
5
  --#{$wizard}--Height: 100%;
5
6
  --#{$modal-box}--c-wizard--FlexBasis: #{pf-size-prem(762px)}; // this is a specific height from design for the wizard in a modal
6
7
 
7
8
  // Header
8
- --#{$wizard}__header--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-100);
9
+ --#{$wizard}__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
9
10
  --#{$wizard}__header--ZIndex: auto;
10
- --#{$wizard}__header--PaddingTop: var(--#{$pf-global}--spacer--lg);
11
- --#{$wizard}__header--PaddingRight: var(--#{$pf-global}--spacer--md);
12
- --#{$wizard}__header--PaddingBottom: var(--#{$pf-global}--spacer--lg);
13
- --#{$wizard}__header--PaddingLeft: var(--#{$pf-global}--spacer--md);
14
- --#{$wizard}__header--lg--PaddingRight: var(--#{$pf-global}--spacer--md);
15
- --#{$wizard}__header--lg--PaddingLeft: var(--#{$pf-global}--spacer--md);
16
- --#{$wizard}__header--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
17
- --#{$wizard}__header--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
18
-
19
- @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
20
- --#{$wizard}__header--PaddingRight: var(--#{$wizard}__header--lg--PaddingRight);
21
- --#{$wizard}__header--PaddingLeft: var(--#{$wizard}__header--lg--PaddingLeft);
22
- }
23
-
24
- @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
25
- --#{$wizard}__header--PaddingRight: var(--#{$wizard}__header--xl--PaddingRight);
26
- --#{$wizard}__header--PaddingLeft: var(--#{$wizard}__header--xl--PaddingLeft);
27
- }
11
+ --#{$wizard}__header--PaddingTop: var(--pf-t--global--spacer--lg);
12
+ --#{$wizard}__header--PaddingRight: var(--pf-t--global--spacer--lg);
13
+ --#{$wizard}__header--PaddingBottom: var(--pf-t--global--spacer--lg);
14
+ --#{$wizard}__header--PaddingLeft: var(--pf-t--global--spacer--lg);
28
15
 
29
16
  // Close
30
- --#{$wizard}__close--Top: calc(var(--#{$pf-global}--spacer--lg) - var(--#{$pf-global}--spacer--form-element));
31
- --#{$wizard}__close--Right: 0;
32
- --#{$wizard}__close--xl--Right: var(--#{$pf-global}--spacer--lg);
33
- --#{$wizard}__close--FontSize: var(--#{$pf-global}--FontSize--xl);
34
-
35
- @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
36
- --#{$wizard}__close--Right: var(--#{$wizard}__close--xl--Right);
37
- }
17
+ --#{$wizard}__close--Top: calc(var(--pf-t--global--spacer--lg) - var(--#{$button}--m-plain--PaddingTop));
18
+ --#{$wizard}__close--Right: var(--pf-t--global--spacer--sm);
19
+ --#{$wizard}__close--FontSize: var(--pf-t--global--font--size--xl);
38
20
 
39
21
  // Title
40
- --#{$wizard}__title--PaddingRight: var(--#{$pf-global}--spacer--2xl);
22
+ --#{$wizard}__title--PaddingRight: var(--pf-t--global--spacer--2xl);
41
23
 
42
24
  // Title text
43
- --#{$wizard}__title-text--FontSize: var(--#{$pf-global}--FontSize--3xl);
44
- --#{$wizard}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading);
45
- --#{$wizard}__title-text--FontWeight: var(--#{$pf-global}--FontWeight--normal);
46
- --#{$wizard}__title-text--LineHeight: var(--#{$pf-global}--LineHeight--sm);
25
+ --#{$wizard}__title-text--FontSize: var(--pf-t--global--font--size--3xl);
26
+ --#{$wizard}__title-text--FontFamily: var(--pf-t--global--font--family--heading);
27
+ --#{$wizard}__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
28
+ --#{$wizard}__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
29
+ --#{$wizard}__title-text--Color: var(--pf-t--global--text--color--regular);
47
30
 
48
31
  // Description
49
- --#{$wizard}__description--PaddingTop: var(--#{$pf-global}--spacer--sm);
50
- --#{$wizard}__description--Color: var(--#{$pf-global}--Color--light-200);
32
+ --#{$wizard}__description--PaddingTop: var(--pf-t--global--spacer--sm);
33
+ --#{$wizard}__description--Color: var(--pf-t--global--text--color--subtle);
51
34
 
52
35
  // Nav link
53
- --#{$wizard}__nav-link--Color: var(--#{$pf-global}--Color--100);
54
- --#{$wizard}__nav-link--BackgroundColor: transparent;
55
- --#{$wizard}__nav-link--TextDecoration: var(--#{$pf-global}--link--TextDecoration);
56
- --#{$wizard}__nav-link--hover--Color: var(--#{$pf-global}--link--Color);
57
- --#{$wizard}__nav-link--focus--Color: var(--#{$pf-global}--link--Color);
58
- --#{$wizard}__nav-link--m-current--Color: var(--#{$pf-global}--link--Color);
59
- --#{$wizard}__nav-link--m-current--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
60
- --#{$wizard}__nav-link--m-disabled--Color: var(--#{$pf-global}--disabled-color--100);
61
- --#{$wizard}__nav-list__nav-list__nav-link--m-current--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
36
+ --#{$wizard}__nav-link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
37
+ --#{$wizard}__nav-link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
38
+ --#{$wizard}__nav-link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
39
+ --#{$wizard}__nav-link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
40
+ --#{$wizard}__nav-link--Color: var(--pf-t--global--text--color--subtle);
41
+ --#{$wizard}__nav-link--TextDecoration: none;
42
+ --#{$wizard}__nav-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
43
+ --#{$wizard}__nav-link--BorderRadius: var(--pf-t--global--border--radius--small);
44
+ --#{$wizard}__nav-link--hover--Color: var(--pf-t--global--text--color--subtle);
45
+ --#{$wizard}__nav-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
46
+ --#{$wizard}__nav-link--hover--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
47
+ --#{$wizard}__nav-link--m-current--Color: var(--pf-t--global--text--color--regular);
48
+ --#{$wizard}__nav-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
49
+ --#{$wizard}__nav-link--m-current--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
50
+ --#{$wizard}__nav-link--m-disabled--Color: var(--pf-t--global--text--color--disabled);
51
+ --#{$wizard}__nav-link--m-disabled--BackgroundColor: transparent;
52
+ --#{$wizard}__nav-link--m-disabled--hover--MixBlendMode: normal;
62
53
 
63
54
  // Nav link toggle icon
64
- --#{$wizard}__nav-link-toggle--PaddingRight: var(--#{$pf-global}--spacer--sm);
65
- --#{$wizard}__nav-link-toggle--PaddingLeft: var(--#{$pf-global}--spacer--sm);
66
- --#{$wizard}__nav-link-toggle--Color: var(--#{$pf-global}--Color--200);
67
- --#{$wizard}__nav-link--hover__nav-link-toggle-icon--Color: var(--#{$pf-global}--Color--100);
68
- --#{$wizard}__nav-link--focus__nav-link-toggle-icon--Color: var(--#{$pf-global}--Color--100);
55
+ --#{$wizard}__nav-link-toggle--PaddingRight: var(--pf-t--global--spacer--sm);
56
+ --#{$wizard}__nav-link-toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
57
+ --#{$wizard}__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
69
58
  --#{$wizard}__nav-link-toggle-icon--Transition: var(--#{$pf-global}--Transition);
70
59
  --#{$wizard}__nav-link-toggle-icon--Rotate: 0;
71
60
  --#{$wizard}__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
@@ -73,56 +62,56 @@
73
62
  // Nav link number
74
63
  --#{$wizard}__nav-link--before--Width: 1.5rem;
75
64
  --#{$wizard}__nav-link--before--Height: 1.5rem;
76
- --#{$wizard}__nav-link--before--Top: 0;
77
- --#{$wizard}__nav-link--before--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
78
- --#{$wizard}__nav-link--before--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
79
- --#{$wizard}__nav-link--before--Color: var(--#{$pf-global}--Color--100);
80
- --#{$wizard}__nav-link--before--FontSize: var(--#{$pf-global}--FontSize--sm);
81
- --#{$wizard}__nav-link--before--TranslateX: calc(-100% - var(--#{$pf-global}--spacer--sm));
82
- --#{$wizard}__nav-link--m-current--before--BackgroundColor: var(--#{$pf-global}--active-color--100);
83
- --#{$wizard}__nav-link--m-current--before--Color: var(--#{$pf-global}--Color--light-100);
65
+ --#{$wizard}__nav-link--before--Top: calc(calc(var(--#{$wizard}__nav-link--PaddingBlockStart) + var(--#{$wizard}__nav-link--PaddingBlockEnd) + 1em * var(--pf-t--global--font--line-height--body)) / 2); // half of the link button it's beside
66
+ --#{$wizard}__nav-link--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
67
+ --#{$wizard}__nav-link--before--BorderRadius: var(--pf-t--global--border--radius--large);
68
+ --#{$wizard}__nav-link--before--Color: var(--pf-t--global--text--color--regular);
69
+ --#{$wizard}__nav-link--before--FontSize: var(--pf-t--global--font--size--body--default);
70
+ --#{$wizard}__nav-link--before--TranslateX: calc(-100% - var(--pf-t--global--spacer--xs));
71
+ --#{$wizard}__nav-link--before--TranslateY: -50%;
72
+ --#{$wizard}__nav-link--m-current--before--BackgroundColor: var(--pf-t--global--color--brand--default);
73
+ --#{$wizard}__nav-link--m-current--before--Color: var(--pf-t--global--text--color--on-brand--default);
84
74
  --#{$wizard}__nav-link--m-disabled--before--BackgroundColor: transparent;
85
- --#{$wizard}__nav-link--m-disabled--before--Color: var(--#{$pf-global}--disabled-color--100);
75
+ --#{$wizard}__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
86
76
 
87
77
  // Toggle
88
- --#{$wizard}__toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
89
- --#{$wizard}__toggle--ZIndex: var(--#{$pf-global}--ZIndex--xs);
90
- --#{$wizard}__toggle--BoxShadow: var(--#{$pf-global}--BoxShadow--md-bottom);
91
- --#{$wizard}__toggle--PaddingTop: var(--#{$pf-global}--spacer--lg);
92
- --#{$wizard}__toggle--PaddingRight: var(--#{$pf-global}--spacer--md);
93
- --#{$wizard}__toggle--PaddingBottom: var(--#{$pf-global}--spacer--lg);
94
- --#{$wizard}__toggle--PaddingLeft: calc(var(--#{$pf-global}--spacer--md) + var(--#{$wizard}__nav-link--before--Width) + var(--#{$pf-global}--spacer--sm));
95
- --#{$wizard}__toggle--m-expanded--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
96
- --#{$wizard}__toggle--m-expanded--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
97
- --#{$wizard}--m-in-page__toggle--xl--PaddingLeft: calc(var(--#{$pf-global}--spacer--xl) + var(--#{$wizard}__nav-link--before--Width) + var(--#{$pf-global}--spacer--sm));
78
+ --#{$wizard}__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
79
+ --#{$wizard}__toggle--ZIndex: var(--pf-t--global--Zindex--xs);
80
+ --#{$wizard}__toggle--PaddingTop: var(--pf-t--global--spacer--lg);
81
+ --#{$wizard}__toggle--PaddingRight: var(--pf-t--global--spacer--md);
82
+ --#{$wizard}__toggle--PaddingBottom: var(--pf-t--global--spacer--lg);
83
+ --#{$wizard}__toggle--PaddingLeft: calc(var(--pf-t--global--spacer--lg) + var(--#{$wizard}__nav-link--before--Width) + var(--pf-t--global--spacer--sm));
84
+ --#{$wizard}__toggle--BorderBottomWidth: var(--pf-t--global--border--width--regular);
85
+ --#{$wizard}__toggle--BorderBottomColor: var(--pf-t--global--border--color--default);
86
+ --#{$wizard}--m-in-page__toggle--xl--PaddingLeft: calc(var(--pf-t--global--spacer--xl) + var(--#{$wizard}__nav-link--before--Width) + var(--pf-t--global--spacer--sm));
98
87
 
99
88
  // Toggle number
100
- --#{$wizard}__toggle-num--before--Top: 0;
89
+ --#{$wizard}__toggle-num--before--Top: #{pf-size-prem(-2px)}; // TODO this should probably be calculated
101
90
 
102
91
  // Toggle list item
103
- --#{$wizard}__toggle-list-item--not-last-child--MarginRight: var(--#{$pf-global}--spacer--sm);
104
- --#{$wizard}__toggle-list-item--MarginBottom: var(--#{$pf-global}--spacer--xs);
92
+ --#{$wizard}__toggle-list-item--not-last-child--MarginRight: var(--pf-t--global--spacer--sm);
93
+ --#{$wizard}__toggle-list-item--MarginBottom: var(--pf-t--global--spacer--xs);
105
94
 
106
95
  // Toggle list
107
- --#{$wizard}__toggle-list--MarginRight: var(--#{$pf-global}--spacer--sm);
96
+ --#{$wizard}__toggle-list--MarginRight: var(--pf-t--global--spacer--sm);
108
97
  --#{$wizard}__toggle-list--MarginBottom: calc(var(--#{$wizard}__toggle-list-item--MarginBottom) * -1);
109
98
 
110
99
  // Toggle separator
111
- --#{$wizard}__toggle-separator--MarginLeft: var(--#{$pf-global}--spacer--sm);
112
- --#{$wizard}__toggle-separator--Color: var(--#{$pf-global}--BorderColor--200);
100
+ --#{$wizard}__toggle-separator--MarginLeft: var(--pf-t--global--spacer--sm);
101
+ --#{$wizard}__toggle-separator--Color: var(--pf-t--global--border--color--default);
113
102
 
114
103
  // Toggle icon
115
- --#{$wizard}__toggle-icon--LineHeight: var(--#{$pf-global}--LineHeight--md);
104
+ --#{$wizard}__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
116
105
  --#{$wizard}__toggle--m-expanded__toggle-icon--Rotate: 180deg;
117
106
 
118
107
  // Nav
119
- --#{$wizard}__nav--ZIndex: var(--#{$pf-global}--ZIndex--xs);
120
- --#{$wizard}__nav--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
121
- --#{$wizard}__nav--BoxShadow: var(--#{$pf-global}--BoxShadow--md-bottom);
108
+ --#{$wizard}__nav--ZIndex: var(--pf-t--global--Zindex--xs);
109
+ --#{$wizard}__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
110
+ --#{$wizard}__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
122
111
  --#{$wizard}__nav--Width: 100%;
123
112
  --#{$wizard}__nav--lg--Width: #{pf-size-prem(250px)};
124
- --#{$wizard}__nav--lg--BorderRightWidth: var(--#{$pf-global}--BorderWidth--sm);
125
- --#{$wizard}__nav--lg--BorderRightColor: var(--#{$pf-global}--BorderColor--100);
113
+ --#{$wizard}__nav--lg--BorderRightWidth: var(--pf-t--global--border--width--regular);
114
+ --#{$wizard}__nav--lg--BorderRightColor: var(--pf-t--global--border--color--default);
126
115
 
127
116
  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
128
117
  --#{$wizard}__nav--Width: var(--#{$wizard}__nav--lg--Width);
@@ -130,38 +119,18 @@
130
119
  }
131
120
 
132
121
  // Nav list (nested)
133
- --#{$wizard}__nav-list--PaddingTop: var(--#{$pf-global}--spacer--lg);
134
- --#{$wizard}__nav-list--PaddingRight: var(--#{$pf-global}--spacer--md);
135
- --#{$wizard}__nav-list--PaddingBottom: var(--#{$pf-global}--spacer--lg);
136
- --#{$wizard}__nav-list--PaddingLeft: calc(var(--#{$pf-global}--spacer--md) + var(--#{$wizard}__nav-link--before--Width) + var(--#{$pf-global}--spacer--sm));
137
- --#{$wizard}__nav-list--lg--PaddingTop: var(--#{$pf-global}--spacer--md);
138
- --#{$wizard}__nav-list--lg--PaddingRight: var(--#{$pf-global}--spacer--md);
139
- --#{$wizard}__nav-list--lg--PaddingBottom: var(--#{$pf-global}--spacer--md);
140
- --#{$wizard}__nav-list--xl--PaddingTop: var(--#{$pf-global}--spacer--lg);
141
- --#{$wizard}__nav-list--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
142
- --#{$wizard}__nav-list--xl--PaddingBottom: var(--#{$pf-global}--spacer--lg);
143
- --#{$wizard}__nav-list--xl--PaddingLeft: calc(var(--#{$pf-global}--spacer--lg) + var(--#{$wizard}__nav-link--before--Width) + var(--#{$pf-global}--spacer--sm));
144
- --#{$wizard}__nav-list--nested--MarginLeft: var(--#{$pf-global}--spacer--md);
145
- --#{$wizard}__nav-list--nested--MarginTop: var(--#{$pf-global}--spacer--md);
146
-
147
- @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
148
- --#{$wizard}__nav-list--PaddingTop: var(--#{$wizard}__nav-list--lg--PaddingTop);
149
- --#{$wizard}__nav-list--PaddingRight: var(--#{$wizard}__nav-list--lg--PaddingRight);
150
- --#{$wizard}__nav-list--PaddingBottom: var(--#{$wizard}__nav-list--lg--PaddingBottom);
151
- }
152
-
153
- @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
154
- --#{$wizard}__nav-list--PaddingTop: var(--#{$wizard}__nav-list--xl--PaddingTop);
155
- --#{$wizard}__nav-list--PaddingRight: var(--#{$wizard}__nav-list--xl--PaddingRight);
156
- --#{$wizard}__nav-list--PaddingBottom: var(--#{$wizard}__nav-list--xl--PaddingBottom);
157
- --#{$wizard}__nav-list--PaddingLeft: var(--#{$wizard}__nav-list--xl--PaddingLeft);
158
- }
122
+ --#{$wizard}__nav-list--PaddingTop: var(--pf-t--global--spacer--lg);
123
+ --#{$wizard}__nav-list--PaddingRight: var(--pf-t--global--spacer--lg);
124
+ --#{$wizard}__nav-list--PaddingBottom: var(--pf-t--global--spacer--lg);
125
+ --#{$wizard}__nav-list--PaddingLeft: calc(var(--pf-t--global--spacer--lg) + var(--#{$wizard}__nav-link--before--Width) + var(--pf-t--global--spacer--sm));
126
+ --#{$wizard}__nav-list--nested--MarginLeft: var(--pf-t--global--spacer--md);
127
+ --#{$wizard}__nav-list--nested--MarginTop: var(--pf-t--global--spacer--md);
159
128
 
160
129
  // Nav item
161
- --#{$wizard}__nav-item--MarginTop: var(--#{$pf-global}--spacer--md);
130
+ --#{$wizard}__nav-item--MarginTop: var(--pf-t--global--spacer--md);
162
131
 
163
132
  // Outer wrap
164
- --#{$wizard}__outer-wrap--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
133
+ --#{$wizard}__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
165
134
  --#{$wizard}__outer-wrap--lg--PaddingLeft: var(--#{$wizard}__nav--Width);
166
135
  --#{$wizard}__outer-wrap--MinHeight: #{pf-size-prem(250px)};
167
136
 
@@ -169,45 +138,26 @@
169
138
  --#{$wizard}__main--ZIndex: auto;
170
139
 
171
140
  // Body
172
- --#{$wizard}__main-body--PaddingTop: var(--#{$pf-global}--spacer--md);
173
- --#{$wizard}__main-body--PaddingRight: var(--#{$pf-global}--spacer--md);
174
- --#{$wizard}__main-body--PaddingBottom: var(--#{$pf-global}--spacer--md);
175
- --#{$wizard}__main-body--PaddingLeft: var(--#{$pf-global}--spacer--md);
176
- --#{$wizard}__main-body--xl--PaddingTop: var(--#{$pf-global}--spacer--lg);
177
- --#{$wizard}__main-body--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
178
- --#{$wizard}__main-body--xl--PaddingBottom: var(--#{$pf-global}--spacer--lg);
179
- --#{$wizard}__main-body--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
180
-
181
- @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
182
- --#{$wizard}__main-body--PaddingTop: var(--#{$wizard}__main-body--xl--PaddingTop);
183
- --#{$wizard}__main-body--PaddingRight: var(--#{$wizard}__main-body--xl--PaddingRight);
184
- --#{$wizard}__main-body--PaddingBottom: var(--#{$wizard}__main-body--xl--PaddingBottom);
185
- --#{$wizard}__main-body--PaddingLeft: var(--#{$wizard}__main-body--xl--PaddingLeft);
186
- }
141
+ --#{$wizard}__main-body--PaddingTop: var(--pf-t--global--spacer--lg);
142
+ --#{$wizard}__main-body--PaddingRight: var(--pf-t--global--spacer--lg);
143
+ --#{$wizard}__main-body--PaddingBottom: var(--pf-t--global--spacer--lg);
144
+ --#{$wizard}__main-body--PaddingLeft: var(--pf-t--global--spacer--lg);
187
145
 
188
146
  // Footer
189
- --#{$wizard}__footer--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
190
- --#{$wizard}__footer--ZIndex: var(--#{$pf-global}--ZIndex--xs);
191
- --#{$wizard}__footer--PaddingTop: var(--#{$pf-global}--spacer--md);
192
- --#{$wizard}__footer--PaddingRight: var(--#{$pf-global}--spacer--md);
193
- --#{$wizard}__footer--PaddingBottom: var(--#{$pf-global}--spacer--sm);
194
- --#{$wizard}__footer--PaddingLeft: var(--#{$pf-global}--spacer--md);
195
- --#{$wizard}__footer--xl--PaddingTop: var(--#{$pf-global}--spacer--lg);
196
- --#{$wizard}__footer--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
197
- --#{$wizard}__footer--xl--PaddingBottom: var(--#{$pf-global}--spacer--md);
198
- --#{$wizard}__footer--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
199
- --#{$wizard}__footer--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top);
200
- --#{$wizard}__footer--child--MarginRight: var(--#{$pf-global}--spacer--md);
201
- --#{$wizard}__footer--child--MarginBottom: var(--#{$pf-global}--spacer--sm);
202
- --#{$wizard}__footer-cancel--MarginLeft: calc(var(--#{$pf-global}--spacer--2xl) - var(--#{$wizard}__footer--child--MarginRight));
203
-
204
- @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
205
- --#{$wizard}__footer--PaddingTop: var(--#{$wizard}__footer--xl--PaddingTop);
206
- --#{$wizard}__footer--PaddingRight: var(--#{$wizard}__footer--xl--PaddingRight);
207
- --#{$wizard}__footer--PaddingBottom: var(--#{$wizard}__footer--xl--PaddingBottom);
208
- --#{$wizard}__footer--PaddingLeft: var(--#{$wizard}__footer--xl--PaddingLeft);
209
- }
147
+ --#{$wizard}__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
148
+ --#{$wizard}__footer--ZIndex: var(--pf-t--global--Zindex--xs);
149
+ --#{$wizard}__footer--PaddingTop: var(--pf-t--global--spacer--lg);
150
+ --#{$wizard}__footer--PaddingRight: var(--pf-t--global--spacer--lg);
151
+ --#{$wizard}__footer--PaddingBottom: var(--pf-t--global--spacer--md);
152
+ --#{$wizard}__footer--PaddingLeft: var(--pf-t--global--spacer--lg);
153
+ --#{$wizard}__footer--BorderWidth: var(--pf-t--global--border--width--divider--default);
154
+ --#{$wizard}__footer--BorderColor: var(--pf-t--global--border--color--default);
155
+ --#{$wizard}__footer--child--MarginRight: var(--pf-t--global--spacer--md);
156
+ --#{$wizard}__footer--child--MarginBottom: var(--pf-t--global--spacer--sm);
157
+ --#{$wizard}__footer-cancel--MarginLeft: calc(var(--pf-t--global--spacer--2xl) - var(--#{$wizard}__footer--child--MarginRight));
158
+ }
210
159
 
160
+ .#{$wizard} {
211
161
  position: relative;
212
162
  display: flex;
213
163
  flex-direction: column;
@@ -220,7 +170,7 @@
220
170
  }
221
171
 
222
172
  // stylelint-disable selector-not-notation
223
- // update to single :not() in breaking change
173
+ // TODO update to single :not() in breaking change
224
174
  > :not(.#{$wizard}__outer-wrap):not(.#{$drawer}) {
225
175
  flex-shrink: 0;
226
176
  }
@@ -237,8 +187,6 @@
237
187
  }
238
188
 
239
189
  .#{$wizard}__header {
240
- @include pf-v5-t-dark;
241
-
242
190
  position: relative;
243
191
  z-index: var(--#{$wizard}__header--ZIndex);
244
192
  padding-block-start: var(--#{$wizard}__header--PaddingTop);
@@ -269,6 +217,7 @@
269
217
  font-size: var(--#{$wizard}__title-text--FontSize);
270
218
  font-weight: var(--#{$wizard}__title-text--FontWeight);
271
219
  line-height: var(--#{$wizard}__title-text--LineHeight);
220
+ color: var(--#{$wizard}__title-text--Color);
272
221
  }
273
222
 
274
223
  .#{$wizard}__description {
@@ -292,18 +241,16 @@
292
241
  padding-inline-start: var(--#{$wizard}__toggle--PaddingLeft);
293
242
  padding-inline-end: var(--#{$wizard}__toggle--PaddingRight);
294
243
  background-color: var(--#{$wizard}__toggle--BackgroundColor);
295
- border: 0;
296
- box-shadow: var(--#{$wizard}__toggle--BoxShadow);
244
+ border-block-start: 0;
245
+ border-block-end: var(--#{$wizard}__toggle--BorderBottomWidth) solid var(--#{$wizard}__toggle--BorderBottomColor);
246
+ border-inline-start: 0;
247
+ border-inline-end: 0;
297
248
 
298
249
  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
299
250
  display: none;
300
251
  }
301
252
 
302
253
  &.pf-m-expanded {
303
- --#{$wizard}__toggle--BoxShadow: none;
304
-
305
- border-block-end: var(--#{$wizard}__toggle--m-expanded--BorderBottomWidth) solid var(--#{$wizard}__toggle--m-expanded--BorderBottomColor);
306
-
307
254
  .#{$wizard}__toggle-icon {
308
255
  transform: rotate(var(--#{$wizard}__toggle--m-expanded__toggle-icon--Rotate));
309
256
  }
@@ -331,6 +278,7 @@
331
278
  }
332
279
 
333
280
  .#{$wizard}__toggle-num {
281
+ --#{$wizard}__nav-link--before--TranslateY: 0;
334
282
  --#{$wizard}__nav-link--before--Top: var(--#{$wizard}__toggle-num--before--Top);
335
283
  }
336
284
 
@@ -445,26 +393,36 @@
445
393
  --#{$wizard}__nav-link-toggle-icon--Rotate: var(--#{$wizard}__nav-item--m-expanded__link-toggle-icon--Rotate);
446
394
  }
447
395
  }
396
+
397
+ :where(:hover) {
398
+ --#{$wizard}__nav-link--Color: var({$wizard}__nav-link--hover--Color);
399
+ --#{$wizard}__nav-link--BackgroundColor: var({$wizard}__nav-link--hover--BackgroundColor);
400
+ }
448
401
  }
449
402
 
450
403
  .#{$wizard}__nav-link {
451
404
  position: relative;
452
405
  display: inline-block;
453
406
  width: 100%;
407
+ padding-block-start: var(--#{$wizard}__nav-link--PaddingBlockStart);
408
+ padding-block-end: var(--#{$wizard}__nav-link--PaddingBlockEnd);
409
+ padding-inline-start: var(--#{$wizard}__nav-link--PaddingInlineStart);
410
+ padding-inline-end: var(--#{$wizard}__nav-link--PaddingInlineEnd);
454
411
  color: var(--#{$wizard}__nav-link--Color);
455
412
  text-align: start; // needed for when the item is a button
456
413
  text-decoration: var(--#{$wizard}__nav-link--TextDecoration);
457
414
  word-break: break-word;
458
415
  background-color: var(--#{$wizard}__nav-link--BackgroundColor);
459
- border: 0;
416
+ border: none;
417
+ border-radius: var(--#{$wizard}__nav-link--BorderRadius);
460
418
 
461
419
  // Common step number styles
462
420
  @at-root .#{$wizard}__toggle-num,
463
421
  &::before {
464
422
  @include pf-v5-bidirectional-style(
465
423
  $prop: transform,
466
- $ltr-val: translateX(var(--#{$wizard}__nav-link--before--TranslateX)),
467
- $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$wizard}__nav-link--before--TranslateX))})
424
+ $ltr-val: translateX(var(--#{$wizard}__nav-link--before--TranslateX)) translateY(var(--#{$wizard}__nav-link--before--TranslateY)),
425
+ $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$wizard}__nav-link--before--TranslateX))}) translateY(var(--#{$wizard}__nav-link--before--TranslateY))
468
426
  );
469
427
 
470
428
  position: absolute;
@@ -484,25 +442,15 @@
484
442
 
485
443
  // Nav step number
486
444
  &::before {
487
- inset-block-start: 0;
488
445
  content: counter(wizard-nav-count);
489
446
  counter-increment: wizard-nav-count;
490
447
  }
491
448
 
492
- &:hover {
493
- --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--hover--Color);
494
- --#{$wizard}__nav-link-toggle--Color: var(--#{$wizard}__nav-link--hover__nav-link-toggle-icon--Color);
495
- }
496
-
497
- &:focus {
498
- --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--focus--Color);
499
- --#{$wizard}__nav-link-toggle--Color: var(--#{$wizard}__nav-link--focus__nav-link-toggle-icon--Color);
500
- }
501
-
502
449
  &.pf-m-current {
503
450
  --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--m-current--Color);
451
+ --#{$wizard}__nav-link--BackgroundColor: var(--#{$wizard}__nav-link--m-current--BackgroundColor);
504
452
 
505
- font-weight: var(--#{$wizard}__nav-link--m-current--FontWeight);
453
+ mix-blend-mode: var(--#{$wizard}__nav-link--m-current--MixBlendMode);
506
454
 
507
455
  @at-root .#{$wizard}__toggle-num,
508
456
  &::before {
@@ -511,9 +459,19 @@
511
459
  }
512
460
  }
513
461
 
462
+ &:where(:hover, :focus) {
463
+ --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--hover--Color);
464
+ --#{$wizard}__nav-link--BackgroundColor: var(--#{$wizard}__nav-link--hover--BackgroundColor);
465
+
466
+ mix-blend-mode: var(--#{$wizard}__nav-link--hover--MixBlendMode);
467
+ }
468
+
469
+ // override the button background/color for disabled nav links
514
470
  &:disabled,
515
471
  &.pf-m-disabled {
516
472
  --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--m-disabled--Color);
473
+ --#{$wizard}__nav-link--BackgroundColor: var(--#{$wizard}__nav-link--m-disabled--BackgroundColor);
474
+ --#{$wizard}__nav-link--hover--MixBlendMode: var(--#{$wizard}__nav-link--m-disabled--hover--MixBlendMode);
517
475
 
518
476
  pointer-events: none;
519
477
 
@@ -572,6 +530,7 @@
572
530
  padding-inline-start: var(--#{$wizard}__footer--PaddingLeft);
573
531
  padding-inline-end: var(--#{$wizard}__footer--PaddingRight);
574
532
  background-color: var(--#{$wizard}__footer--BackgroundColor);
533
+ border-block-start: var(--#{$wizard}__footer--BorderWidth) solid var(--#{$wizard}__footer--BorderColor);
575
534
 
576
535
  > * {
577
536
  margin-block-end: var(--#{$wizard}__footer--child--MarginBottom);
@@ -580,14 +539,6 @@
580
539
  margin-inline-end: var(--#{$wizard}__footer--child--MarginRight);
581
540
  }
582
541
  }
583
-
584
- // Limit shadow to a child of modal and main-wizard since we can ensure wizard footer is fixed in those usages
585
- // Make a regular style in a breaking change release
586
- .#{$page}__main-wizard &,
587
- .#{$modal-box} &,
588
- .#{$drawer} > & {
589
- box-shadow: var(--#{$wizard}__footer--BoxShadow);
590
- }
591
542
  }
592
543
 
593
544
  .#{$wizard}__footer-cancel {
@@ -595,8 +546,5 @@
595
546
  }
596
547
 
597
548
  // stylelint-disable no-invalid-position-at-import-rule
598
- @import "themes/dark/wizard";
599
549
 
600
- @include pf-v5-theme-dark {
601
- @include pf-v5-theme-dark-wizard;
602
- }
550
+
package/docs/components/Wizard/examples/Wizard.md CHANGED
@@ -53,11 +53,19 @@ wrapperTag: div
53
53
  <li class="pf-v5-c-wizard__nav-item">
54
54
  <button class="pf-v5-c-wizard__nav-link" type="button">Information</button>
55
55
  </li>
56
- <li class="pf-v5-c-wizard__nav-item">
56
+ <li class="pf-v5-c-wizard__nav-item pf-m-expandable pf-m-expanded">
57
57
  <button
58
58
  class="pf-v5-c-wizard__nav-link pf-m-current"
59
59
  type="button"
60
- >Configuration</button>
60
+ aria-expanded="true"
61
+ >
62
+ <span class="pf-v5-c-wizard__nav-link-text">Configuration</span>
63
+ <span class="pf-v5-c-wizard__nav-link-toggle">
64
+ <span class="pf-v5-c-wizard__nav-link-toggle-icon">
65
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
66
+ </span>
67
+ </span>
68
+ </button>
61
69
  <ol class="pf-v5-c-wizard__nav-list" role="list">
62
70
  <li class="pf-v5-c-wizard__nav-item">
63
71
  <button class="pf-v5-c-wizard__nav-link" type="button">Substep A</button>
@@ -291,11 +299,19 @@ wrapperTag: div
291
299
  <li class="pf-v5-c-wizard__nav-item">
292
300
  <button class="pf-v5-c-wizard__nav-link" type="button">Information</button>
293
301
  </li>
294
- <li class="pf-v5-c-wizard__nav-item">
302
+ <li class="pf-v5-c-wizard__nav-item pf-m-expandable pf-m-expanded">
295
303
  <button
296
304
  class="pf-v5-c-wizard__nav-link pf-m-current"
297
305
  type="button"
298
- >Configuration</button>
306
+ aria-expanded="true"
307
+ >
308
+ <span class="pf-v5-c-wizard__nav-link-text">Configuration</span>
309
+ <span class="pf-v5-c-wizard__nav-link-toggle">
310
+ <span class="pf-v5-c-wizard__nav-link-toggle-icon">
311
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
312
+ </span>
313
+ </span>
314
+ </button>
299
315
  <ol class="pf-v5-c-wizard__nav-list" role="list">
300
316
  <li class="pf-v5-c-wizard__nav-item">
301
317
  <button class="pf-v5-c-wizard__nav-link" type="button">Substep A</button>
@@ -480,11 +496,19 @@ wrapperTag: div
480
496
  <li class="pf-v5-c-wizard__nav-item">
481
497
  <button class="pf-v5-c-wizard__nav-link" type="button">Information</button>
482
498
  </li>
483
- <li class="pf-v5-c-wizard__nav-item">
499
+ <li class="pf-v5-c-wizard__nav-item pf-m-expandable pf-m-expanded">
484
500
  <button
485
501
  class="pf-v5-c-wizard__nav-link pf-m-current"
486
502
  type="button"
487
- >Configuration</button>
503
+ aria-expanded="true"
504
+ >
505
+ <span class="pf-v5-c-wizard__nav-link-text">Configuration</span>
506
+ <span class="pf-v5-c-wizard__nav-link-toggle">
507
+ <span class="pf-v5-c-wizard__nav-link-toggle-icon">
508
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
509
+ </span>
510
+ </span>
511
+ </button>
488
512
  <ol class="pf-v5-c-wizard__nav-list" role="list">
489
513
  <li class="pf-v5-c-wizard__nav-item">
490
514
  <button class="pf-v5-c-wizard__nav-link" type="button">Substep A</button>
@@ -1362,7 +1386,7 @@ wrapperTag: div
1362
1386
  | `.pf-v5-c-wizard__nav` | `<nav>` | Initiates the steps nav. **Required** |
1363
1387
  | `.pf-v5-c-wizard__nav-list` | `<ol>` | Initiates a list of steps. **Required** |
1364
1388
  | `.pf-v5-c-wizard__nav-item` | `<li>` | Initiates a step list item. **Required** |
1365
- | `.pf-v5-c-wizard__nav-link` | `<a>` | Initiates a step link. **Required** |
1389
+ | `.pf-v5-c-wizard__nav-link` | `<a>`, `<button>` | Initiates a step link. **Required** |
1366
1390
  | `.pf-v5-c-wizard__nav-link-text` | `<span>` | Initiates the link text container. **Required when nav item is expandable** |
1367
1391
  | `.pf-v5-c-wizard__nav-link-toggle` | `<span>` | Initiates the toggle container. **Required when nav item is expandable** |
1368
1392
  | `.pf-v5-c-wizard__nav-link-toggle-icon` | `<span>` | Initiates the toggle icon container. **Required when nav item is expandable** |