@patternfly/react-styles 6.5.0-prerelease.13 → 6.5.0-prerelease.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 (76) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/assets/images/compass--hero-bg.png +0 -0
  3. package/css/assets/images/compass--wallpaper-dark.jpg +0 -0
  4. package/css/assets/images/compass--wallpaper-light.jpg +0 -0
  5. package/css/assets/images/glass-brand-dark.jpg +0 -0
  6. package/css/assets/images/glass-brand-dark.png +0 -0
  7. package/css/assets/images/glass-brand-light.jpg +0 -0
  8. package/css/assets/images/glass-brand-light.png +0 -0
  9. package/css/components/Accordion/accordion.css +11 -1
  10. package/css/components/Accordion/accordion.d.ts +4 -1
  11. package/css/components/Accordion/accordion.js +4 -1
  12. package/css/components/Accordion/accordion.mjs +4 -1
  13. package/css/components/Alert/alert.css +2 -1
  14. package/css/components/Button/button.css +98 -19
  15. package/css/components/Button/button.d.ts +3 -0
  16. package/css/components/Button/button.js +3 -0
  17. package/css/components/Button/button.mjs +3 -0
  18. package/css/components/Card/card.css +34 -9
  19. package/css/components/Card/card.d.ts +1 -0
  20. package/css/components/Card/card.js +1 -0
  21. package/css/components/Card/card.mjs +1 -0
  22. package/css/components/ClipboardCopy/clipboard-copy.css +1 -1
  23. package/css/components/Compass/compass.css +6 -6
  24. package/css/components/DataList/data-list.css +2 -2
  25. package/css/components/DataList/data-list.d.ts +3 -1
  26. package/css/components/DataList/data-list.js +3 -1
  27. package/css/components/DataList/data-list.mjs +3 -1
  28. package/css/components/Drawer/drawer.css +11 -6
  29. package/css/components/Drawer/drawer.d.ts +5 -2
  30. package/css/components/Drawer/drawer.js +5 -2
  31. package/css/components/Drawer/drawer.mjs +5 -2
  32. package/css/components/DualListSelector/dual-list-selector.css +1 -1
  33. package/css/components/ExpandableSection/expandable-section.css +2 -2
  34. package/css/components/Form/form.css +1 -1
  35. package/css/components/JumpLinks/jump-links.css +1 -1
  36. package/css/components/Login/login.css +7 -3
  37. package/css/components/Masthead/masthead.css +49 -7
  38. package/css/components/Masthead/masthead.d.ts +4 -0
  39. package/css/components/Masthead/masthead.js +4 -0
  40. package/css/components/Masthead/masthead.mjs +4 -0
  41. package/css/components/MenuToggle/menu-toggle.css +26 -2
  42. package/css/components/MenuToggle/menu-toggle.d.ts +3 -0
  43. package/css/components/MenuToggle/menu-toggle.js +3 -0
  44. package/css/components/MenuToggle/menu-toggle.mjs +3 -0
  45. package/css/components/Nav/nav.css +19 -11
  46. package/css/components/Nav/nav.d.ts +3 -1
  47. package/css/components/Nav/nav.js +3 -1
  48. package/css/components/Nav/nav.mjs +3 -1
  49. package/css/components/NotificationDrawer/notification-drawer.css +11 -3
  50. package/css/components/Page/page.css +165 -6
  51. package/css/components/Page/page.d.ts +12 -1
  52. package/css/components/Page/page.js +12 -1
  53. package/css/components/Page/page.mjs +12 -1
  54. package/css/components/Panel/panel.css +14 -0
  55. package/css/components/Panel/panel.d.ts +2 -1
  56. package/css/components/Panel/panel.js +2 -1
  57. package/css/components/Panel/panel.mjs +2 -1
  58. package/css/components/Table/table-grid.css +4 -4
  59. package/css/components/Table/table.css +14 -9
  60. package/css/components/Table/table.d.ts +4 -2
  61. package/css/components/Table/table.js +4 -2
  62. package/css/components/Table/table.mjs +4 -2
  63. package/css/components/Tabs/tabs.css +2 -2
  64. package/css/components/ToggleGroup/toggle-group.css +33 -16
  65. package/css/components/Toolbar/toolbar.css +1 -1
  66. package/css/components/TreeView/tree-view.css +1 -1
  67. package/css/components/Wizard/wizard.css +21 -3
  68. package/css/components/Wizard/wizard.d.ts +3 -0
  69. package/css/components/Wizard/wizard.js +3 -0
  70. package/css/components/Wizard/wizard.mjs +3 -0
  71. package/css/components/_index.css +537 -118
  72. package/css/components/_index.d.ts +6 -1
  73. package/css/components/_index.js +6 -1
  74. package/css/components/_index.mjs +6 -1
  75. package/css/docs/components/DragDrop/examples/DragDrop.css +1 -1
  76. package/package.json +3 -3
package/css/components/ToggleGroup/toggle-group.css CHANGED
@@ -6,30 +6,37 @@
6
6
  --pf-v6-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default);
7
7
  --pf-v6-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body);
8
8
  --pf-v6-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular);
9
- --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
9
+ --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--control--default);
10
10
  --pf-v6-c-toggle-group__button--ZIndex: auto;
11
- --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
11
+ --pf-v6-c-toggle-group__button--hover--Color: var(--pf-t--global--text--color--on-brand--subtle--default);
12
+ --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--color--brand--subtle--default);
12
13
  --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
13
- --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
14
+ --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--brand--subtle--hover);
14
15
  --pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
15
16
  --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
16
17
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--control--default);
17
18
  --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
18
- --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--tiny);
19
- --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--tiny);
20
- --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--tiny);
21
- --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--tiny);
19
+ --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--control--default);
20
+ --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--control--default);
21
+ --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--control--default);
22
+ --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--control--default);
22
23
  --pf-v6-c-toggle-group__icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
23
- --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
24
- --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
25
- --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
26
- --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
24
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-t--global--icon--color--regular);
25
+ --pf-v6-c-toggle-group__icon--hover--Color: var(--pf-t--global--icon--color--on-brand--subtle--default);
26
+ --pf-v6-c-toggle-group__icon--m-selected--Color: var(--pf-t--global--icon--color--on-brand--subtle--default);
27
+ --pf-v6-c-toggle-group__icon--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
28
+ --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--subtle--default);
29
+ --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--subtle--default);
30
+ --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--brand--subtle--clicked);
31
+ --pf-v6-c-toggle-group__button--m-selected--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
32
+ --pf-v6-c-toggle-group__button--m-selected--after--BorderColor: var(--pf-t--global--border--color--brand--subtle--clicked);
33
+ --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
34
+ --pf-v6-c-toggle-group__button--m-selected--selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--brand--subtle--clicked);
27
35
  --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
28
- --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
29
36
  --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
30
37
  --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
31
- --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
32
- --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
38
+ --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--control--default);
39
+ --pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--control--default);
33
40
  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
34
41
  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
35
42
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -97,9 +104,11 @@
97
104
  }
98
105
  .pf-v6-c-toggle-group__button:is(:hover, :focus) {
99
106
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
107
+ --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--hover--Color);
100
108
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
101
109
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
102
110
  --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--hover--after--BorderWidth);
111
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--hover--Color);
103
112
  text-decoration-line: none;
104
113
  }
105
114
  .pf-v6-c-toggle-group__button.pf-m-selected {
@@ -107,22 +116,30 @@
107
116
  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
108
117
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
109
118
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
119
+ --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderWidth);
120
+ --pf-v6-c-toggle-group__button--after--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderColor);
110
121
  --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth);
122
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--m-selected--Color);
111
123
  }
112
124
  .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
113
125
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);
114
126
  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--disabled--Color);
115
127
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--disabled--ZIndex);
116
128
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--disabled--before--BorderColor);
129
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--disabled--Color);
117
130
  pointer-events: none;
118
131
  }
119
132
 
120
133
  .pf-v6-c-toggle-group__item:has(.pf-m-selected) + .pf-v6-c-toggle-group__item:has(.pf-m-selected) {
121
- --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
134
+ --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected--selected--before--BorderInlineStartColor);
122
135
  }
123
136
 
124
137
  .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
125
- --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
138
+ --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor);
139
+ }
140
+
141
+ .pf-v6-c-toggle-group__icon {
142
+ color: var(--pf-v6-c-toggle-group__icon--Color);
126
143
  }
127
144
 
128
145
  .pf-v6-c-toggle-group__icon + .pf-v6-c-toggle-group__text,
package/css/components/Toolbar/toolbar.css CHANGED
@@ -44,7 +44,7 @@
44
44
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
45
45
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
46
46
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
47
- --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
47
+ --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: -180deg;
48
48
  --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
49
49
  --pf-v6-c-toolbar__item--m-label--FontWeight: var(--pf-t--global--font--weight--body--bold);
50
50
  --pf-v6-c-toolbar__group--m-label-group--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
package/css/components/TreeView/tree-view.css CHANGED
@@ -66,7 +66,7 @@
66
66
  --pf-v6-c-tree-view__node-icon--Color: var(--pf-t--global--icon--color--subtle);
67
67
  --pf-v6-c-tree-view__node-toggle-icon--base--Rotate: 0;
68
68
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
69
- --pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
69
+ --pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: -180deg;
70
70
  --pf-v6-c-tree-view__node--m-disabled--Color: var(--pf-t--global--text--color--disabled);
71
71
  --pf-v6-c-tree-view__node-icon--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
72
72
  --pf-v6-c-tree-view__node-toggle--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
package/css/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);
@@ -46,7 +47,7 @@
46
47
  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
47
48
  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
48
49
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
49
- --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
50
+ --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: -180deg;
50
51
  --pf-v6-c-wizard__nav-link--before--Width: var(--pf-t--global--icon--size--font--xl);
51
52
  --pf-v6-c-wizard__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
52
53
  --pf-v6-c-wizard__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);
@@ -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/css/components/Wizard/wizard.d.ts CHANGED
@@ -5,6 +5,8 @@ declare const _default: {
5
5
  "modalBox": "pf-v6-c-modal-box",
6
6
  "modifiers": {
7
7
  "finished": "pf-m-finished",
8
+ "noPlain": "pf-m-no-plain",
9
+ "plain": "pf-m-plain",
8
10
  "expanded": "pf-m-expanded",
9
11
  "danger": "pf-m-danger",
10
12
  "warning": "pf-m-warning",
@@ -14,6 +16,7 @@ declare const _default: {
14
16
  "disabled": "pf-m-disabled",
15
17
  "noPadding": "pf-m-no-padding"
16
18
  },
19
+ "themeGlass": "pf-v6-theme-glass",
17
20
  "wizard": "pf-v6-c-wizard",
18
21
  "wizardClose": "pf-v6-c-wizard__close",
19
22
  "wizardDescription": "pf-v6-c-wizard__description",
package/css/components/Wizard/wizard.js CHANGED
@@ -7,6 +7,8 @@ exports.default = {
7
7
  "modalBox": "pf-v6-c-modal-box",
8
8
  "modifiers": {
9
9
  "finished": "pf-m-finished",
10
+ "noPlain": "pf-m-no-plain",
11
+ "plain": "pf-m-plain",
10
12
  "expanded": "pf-m-expanded",
11
13
  "danger": "pf-m-danger",
12
14
  "warning": "pf-m-warning",
@@ -16,6 +18,7 @@ exports.default = {
16
18
  "disabled": "pf-m-disabled",
17
19
  "noPadding": "pf-m-no-padding"
18
20
  },
21
+ "themeGlass": "pf-v6-theme-glass",
19
22
  "wizard": "pf-v6-c-wizard",
20
23
  "wizardClose": "pf-v6-c-wizard__close",
21
24
  "wizardDescription": "pf-v6-c-wizard__description",
package/css/components/Wizard/wizard.mjs CHANGED
@@ -5,6 +5,8 @@ export default {
5
5
  "modalBox": "pf-v6-c-modal-box",
6
6
  "modifiers": {
7
7
  "finished": "pf-m-finished",
8
+ "noPlain": "pf-m-no-plain",
9
+ "plain": "pf-m-plain",
8
10
  "expanded": "pf-m-expanded",
9
11
  "danger": "pf-m-danger",
10
12
  "warning": "pf-m-warning",
@@ -14,6 +16,7 @@ export default {
14
16
  "disabled": "pf-m-disabled",
15
17
  "noPadding": "pf-m-no-padding"
16
18
  },
19
+ "themeGlass": "pf-v6-theme-glass",
17
20
  "wizard": "pf-v6-c-wizard",
18
21
  "wizardClose": "pf-v6-c-wizard__close",
19
22
  "wizardDescription": "pf-v6-c-wizard__description",