@patternfly/patternfly 6.0.0-alpha.10 → 6.0.0-alpha.12

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 (16) hide show
  1. package/components/Drawer/drawer.css +0 -1
  2. package/components/Drawer/drawer.scss +2 -1
  3. package/components/Page/page.css +51 -160
  4. package/components/Page/page.scss +53 -147
  5. package/components/Table/table.css +1 -11
  6. package/components/Table/table.scss +1 -11
  7. package/docs/components/Page/examples/Page.css +0 -8
  8. package/docs/components/Page/examples/Page.md +22 -21
  9. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -0
  10. package/package.json +1 -1
  11. package/patternfly-no-globals.css +101 -306
  12. package/patternfly-theme-dark-unversioned.css +101 -306
  13. package/patternfly.css +101 -306
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
  16. package/components/Page/themes/dark/page.scss +0 -69
package/components/Drawer/drawer.css CHANGED
@@ -205,7 +205,6 @@
205
205
  z-index: var(--pf-v5-c-drawer__content--ZIndex);
206
206
  flex-basis: var(--pf-v5-c-drawer__content--FlexBasis);
207
207
  order: 0;
208
- background-color: var(--pf-v5-c-drawer__content--BackgroundColor);
209
208
  }
210
209
  .pf-v5-c-drawer__content.pf-m-no-background {
211
210
  --pf-v5-c-drawer__content--BackgroundColor: transparent;
package/components/Drawer/drawer.scss CHANGED
@@ -270,7 +270,8 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
270
270
  z-index: var(--#{$drawer}__content--ZIndex);
271
271
  flex-basis: var(--#{$drawer}__content--FlexBasis);
272
272
  order: 0;
273
- background-color: var(--#{$drawer}__content--BackgroundColor);
273
+
274
+ // background-color: var(--#{$drawer}__content--BackgroundColor);
274
275
 
275
276
  &.pf-m-no-background {
276
277
  --#{$drawer}__content--BackgroundColor: transparent;
package/components/Page/page.css CHANGED
@@ -1,16 +1,4 @@
1
- .pf-v5-c-page__sidebar.pf-m-light {
2
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
3
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
4
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
5
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
6
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
11
- }
12
-
13
- .pf-v5-c-page__main-section[class*=pf-m-dark-], .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector, .pf-v5-c-page__header {
1
+ .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector {
14
2
  --pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
15
3
  --pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
16
4
  --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100);
@@ -21,7 +9,7 @@
21
9
  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
10
  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
23
11
  }
24
- .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button, .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button, .pf-v5-c-page__header .pf-v5-c-button {
12
+ .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button {
25
13
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
26
14
  }
27
15
 
@@ -102,28 +90,20 @@
102
90
  --pf-v5-c-page__header-tools-group--MarginLeft: var(--pf-t--global--spacer--xl);
103
91
  --pf-v5-c-page__header-tools-group--Display: flex;
104
92
  --pf-v5-c-page__header-tools-item--Display: block;
105
- --pf-v5-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
106
- --pf-v5-c-page__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--primary-color--200);
107
- --pf-v5-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
108
- --pf-v5-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--primary-color--200);
109
- --pf-v5-c-page__header-tools--c-button--m-selected--notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
110
93
  --pf-v5-c-page__header-tools--c-button--m-selected--before--Width: auto;
111
94
  --pf-v5-c-page__header-tools--c-button--m-selected--before--Height: auto;
112
- --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
113
- --pf-v5-c-page__header-tools--c-button--m-selected--before--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
114
- --pf-v5-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor: transparent;
115
95
  --pf-v5-c-page__sidebar--ZIndex: var(--pf-v5-global--ZIndex--sm);
116
96
  --pf-v5-c-page__sidebar--Width: 18.125rem;
117
97
  --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
118
- --pf-v5-c-page__sidebar--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
119
- --pf-v5-c-page__sidebar--m-light--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
120
- --pf-v5-c-page__sidebar--m-light--BorderRightColor: var(--pf-v5-global--BorderColor--100);
121
98
  --pf-v5-c-page__sidebar--BoxShadow: none;
122
99
  --pf-v5-c-page__sidebar--Transition: var(--pf-v5-global--Transition);
123
100
  --pf-v5-c-page__sidebar--TranslateX: -100%;
124
101
  --pf-v5-c-page__sidebar--TranslateZ: 0;
125
102
  --pf-v5-c-page__sidebar--m-expanded--TranslateX: 0;
126
103
  --pf-v5-c-page__sidebar--xl--TranslateX: 0;
104
+ --pf-v5-c-page__sidebar--MarginRight: 0;
105
+ --pf-v5-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
106
+ --pf-v5-c-page__sidebar--PaddingInlineStart: var(--pf-t--global--spacer--lg);
127
107
  --pf-v5-c-page__sidebar-header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
128
108
  --pf-v5-c-page__sidebar-header--BorderBottomColor: var(--pf-t--global--border--color--default);
129
109
  --pf-v5-c-page__sidebar-header--PaddingTop: var(--pf-t--global--spacer--sm);
@@ -136,58 +116,63 @@
136
116
  --pf-v5-c-page__sidebar-body--PaddingLeft: 0;
137
117
  --pf-v5-c-page__sidebar-body--m-page-insets--PaddingRight: var(--pf-v5-c-page--inset);
138
118
  --pf-v5-c-page__sidebar-body--m-page-insets--PaddingLeft: var(--pf-v5-c-page--inset);
139
- --pf-v5-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-v5-global--BackgroundColor--dark-200);
140
- --pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
141
- --pf-v5-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-v5-global--BackgroundColor--dark-200);
119
+ --pf-v5-c-page__sidebar-body--m-menu--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
120
+ --pf-v5-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-t--global--border--color--default);
121
+ --pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-t--global--border--width--button--default);
122
+ --pf-v5-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-t--global--border--color--default);
142
123
  --pf-v5-c-page__main--ZIndex: var(--pf-v5-global--ZIndex--xs);
124
+ --pf-v5-c-page__main--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
125
+ --pf-v5-c-page__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
126
+ --pf-v5-c-page__main--MarginInlineStart: var(--pf-t--global--spacer--lg);
127
+ --pf-v5-c-page__main--MarginInlineEnd: var(--pf-t--global--spacer--lg);
128
+ --pf-v5-c-page__main--BorderRadius: var(--pf-t--global--border--radius--large);
129
+ --pf-v5-c-page__main--BorderWidth: var(--pf-t--global--spacer--sm);
130
+ --pf-v5-c-page__main--BorderColor: var(--pf-v5-c-page__main--BackgroundColor);
143
131
  --pf-v5-c-page__main-section--MarginTop: var(--pf-t--global--spacer--md);
144
132
  --pf-v5-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
145
- --pf-v5-c-page__main-section--PaddingRight: var(--pf-t--global--spacer--lg);
133
+ --pf-v5-c-page__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v5-c-page__main--BorderWidth));
146
134
  --pf-v5-c-page__main-section--PaddingBottom: 0;
147
- --pf-v5-c-page__main-section--PaddingLeft: var(--pf-t--global--spacer--lg);
135
+ --pf-v5-c-page__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v5-c-page__main--BorderWidth));
148
136
  --pf-v5-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
149
- --pf-v5-c-page__main-section--BackgroundColor: transparent;
150
- --pf-v5-c-page__main-section--m-light--BackgroundColor: transparent;
151
- --pf-v5-c-page__main-section--m-light-100--BackgroundColor: transparent;
152
- --pf-v5-c-page__main-section--m-dark-100--BackgroundColor: transparent;
153
- --pf-v5-c-page__main-section--m-dark-200--BackgroundColor: transparent;
137
+ --pf-v5-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
138
+ --pf-v5-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
154
139
  --pf-v5-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
155
140
  --pf-v5-c-page__main-nav--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
156
141
  --pf-v5-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v5-c-page__sidebar--Width));
157
142
  --pf-v5-c-page--section--m-sticky-top--ZIndex: var(--pf-v5-global--ZIndex--md);
158
- --pf-v5-c-page--section--m-sticky-top--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
143
+ --pf-v5-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
159
144
  --pf-v5-c-page--section--m-sticky-bottom--ZIndex: var(--pf-v5-global--ZIndex--md);
160
- --pf-v5-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
161
- --pf-v5-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
145
+ --pf-v5-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm-top);
146
+ --pf-v5-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm-bottom);
162
147
  --pf-v5-c-page--section--m-shadow-bottom--ZIndex: var(--pf-v5-global--ZIndex--xs);
163
- --pf-v5-c-page--section--m-shadow-top--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
148
+ --pf-v5-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm-top);
164
149
  --pf-v5-c-page--section--m-shadow-top--ZIndex: var(--pf-v5-global--ZIndex--xs);
165
- --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
166
- --pf-v5-c-page__main-nav--PaddingTop: var(--pf-v5-global--spacer--md);
150
+ --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
151
+ --pf-v5-c-page__main-nav--PaddingTop: var(--pf-t--global--spacer--md);
167
152
  --pf-v5-c-page__main-nav--PaddingRight: 0;
168
153
  --pf-v5-c-page__main-nav--PaddingLeft: 0;
169
- --pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom: var(--pf-v5-global--spacer--md);
170
- --pf-v5-c-page__main-nav--xl--PaddingRight: var(--pf-v5-global--spacer--sm);
171
- --pf-v5-c-page__main-nav--xl--PaddingLeft: var(--pf-v5-global--spacer--sm);
172
- --pf-v5-c-page__main-subnav--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
173
- --pf-v5-c-page__main-subnav--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
174
- --pf-v5-c-page__main-subnav--BorderTopColor: var(--pf-v5-global--palette--black-800);
154
+ --pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom: var(--pf-t--global--spacer--md);
155
+ --pf-v5-c-page__main-nav--xl--PaddingRight: var(--pf-t--global--spacer--sm);
156
+ --pf-v5-c-page__main-nav--xl--PaddingLeft: var(--pf-t--global--spacer--sm);
157
+ --pf-v5-c-page__main-subnav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
158
+ --pf-v5-c-page__main-subnav--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
159
+ --pf-v5-c-page__main-subnav--BorderTopColor: var(--pf-t--global--border--color--default);
175
160
  --pf-v5-c-page__main-subnav--BorderLeftWidth: 0;
176
- --pf-v5-c-page__main-subnav--BorderLeftColor: var(--pf-v5-global--palette--black-800);
177
- --pf-v5-c-page__sidebar--main__main-subnav--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
161
+ --pf-v5-c-page__main-subnav--BorderLeftColor: var(--pf-t--global--border--color--default);
162
+ --pf-v5-c-page__sidebar--main__main-subnav--BorderLeftWidth: var(--pf-t--global--border--width--divider--default);
178
163
  --pf-v5-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth: 0;
179
164
  --pf-v5-c-page__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
180
- --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-t--global--spacer--md);
165
+ --pf-v5-c-page__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v5-c-page__main--BorderWidth));
181
166
  --pf-v5-c-page__main-breadcrumb--PaddingBottom: 0;
182
- --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-t--global--spacer--lg);
167
+ --pf-v5-c-page__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v5-c-page__main--BorderWidth));
168
+ --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
183
169
  --pf-v5-c-page__main-tabs--PaddingTop: 0;
184
170
  --pf-v5-c-page__main-tabs--PaddingRight: 0;
185
171
  --pf-v5-c-page__main-tabs--PaddingBottom: 0;
186
- --pf-v5-c-page__main-tabs--PaddingLeft: 0;
187
- --pf-v5-c-page__main-wizard--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
188
- --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
189
- --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
190
- --pf-v5-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
172
+ --pf-v5-c-page__main-tabs--BackgroundColor: var(--pf-t--global--background--color--primary--default);
173
+ --pf-v5-c-page__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
174
+ --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-t--global--border--color--default);
175
+ --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-t--global--border--width--button--default);
191
176
  }
192
177
  @media (min-width: 1200px) {
193
178
  :root {
@@ -237,7 +222,6 @@
237
222
  }
238
223
 
239
224
  .pf-v5-c-page__header {
240
- color: var(--pf-v5-global--Color--100);
241
225
  display: grid;
242
226
  grid-template-columns: auto auto;
243
227
  align-items: center;
@@ -333,35 +317,6 @@
333
317
  .pf-v5-c-page__header-tools-item {
334
318
  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-page__header-tools-item--Display);
335
319
  }
336
- .pf-v5-c-page__header-tools-item .pf-v5-c-notification-badge.pf-m-read:hover {
337
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor);
338
- }
339
- .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button {
340
- background-color: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
341
- border-radius: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--BorderRadius);
342
- }
343
- .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button::before {
344
- position: absolute;
345
- inset: 0;
346
- width: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--Width);
347
- height: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--Height);
348
- content: "";
349
- }
350
- .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge.pf-m-unread {
351
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor);
352
- }
353
- .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge.pf-m-unread::after {
354
- border-color: var(--pf-v5-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor);
355
- }
356
- .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge.pf-m-attention {
357
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
358
- }
359
- .pf-v5-c-page__header-tools-item .pf-v5-c-button:focus .pf-v5-c-notification-badge.pf-m-unread {
360
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-page__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor);
361
- }
362
- .pf-v5-c-page__header-tools-item .pf-v5-c-button:focus .pf-v5-c-notification-badge.pf-m-attention {
363
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor);
364
- }
365
320
 
366
321
  .pf-v5-c-page__sidebar {
367
322
  z-index: var(--pf-v5-c-page__sidebar--ZIndex);
@@ -399,11 +354,6 @@
399
354
  max-width: 0;
400
355
  overflow: hidden;
401
356
  }
402
- .pf-v5-c-page__sidebar.pf-m-light {
403
- color: var(--pf-v5-global--Color--100);
404
- --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-c-page__sidebar--m-light--BackgroundColor);
405
- border-inline-end: var(--pf-v5-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v5-c-page__sidebar--m-light--BorderRightColor);
406
- }
407
357
 
408
358
  .pf-v5-c-page__sidebar-header {
409
359
  padding-block-start: var(--pf-v5-c-page__sidebar-header--PaddingTop);
@@ -426,7 +376,7 @@
426
376
  flex-grow: 1;
427
377
  }
428
378
  .pf-v5-c-page__sidebar-body.pf-m-menu {
429
- background-color: var(--pf-v5-global--palette--black-900);
379
+ background-color: var(--pf-v5-c-page__sidebar-body--m-menu--BackgroundColor);
430
380
  border-block-start: var(--pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-v5-c-page__sidebar-body--m-menu--BorderTopColor);
431
381
  }
432
382
  .pf-v5-c-page__sidebar-body.pf-m-menu + .pf-v5-c-page__sidebar-body.pf-m-menu {
@@ -684,16 +634,14 @@
684
634
  }
685
635
 
686
636
  .pf-v5-c-page__main {
637
+ align-self: start;
638
+ max-height: var(--pf-v5-c-page__main--MaxHeight);
687
639
  margin-block-start: 0;
688
- margin-inline-start: var(--pf-t--global--spacer--lg);
689
- margin-inline-end: var(--pf-t--global--spacer--lg);
690
- }
691
-
692
- .pf-v5-c-page__main-list {
693
- padding-block-end: var(--pf-t--global--spacer--lg);
694
- margin-block-end: var(--pf-t--global--spacer--lg);
695
- background-color: var(--pf-t--global--background--color--primary--default);
696
- border-radius: var(--pf-t--global--border--radius--large);
640
+ margin-inline-start: var(--pf-v5-c-page__main--MarginInlineStart);
641
+ margin-inline-end: var(--pf-v5-c-page__main--MarginInlineEnd);
642
+ background: var(--pf-v5-c-page__main--BackgroundColor);
643
+ border: var(--pf-v5-c-page__main--BorderWidth) solid var(--pf-v5-c-page__main--BorderColor);
644
+ border-radius: var(--pf-v5-c-page__main--BorderRadius);
697
645
  }
698
646
 
699
647
  .pf-v5-c-page__main,
@@ -841,20 +789,8 @@
841
789
  padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
842
790
  background-color: var(--pf-v5-c-page__main-section--BackgroundColor);
843
791
  }
844
- .pf-v5-c-page__main-section.pf-m-light {
845
- --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-light--BackgroundColor);
846
- }
847
- .pf-v5-c-page__main-section.pf-m-light-100 {
848
- --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-light-100--BackgroundColor);
849
- }
850
- .pf-v5-c-page__main-section[class*=pf-m-dark-] {
851
- color: var(--pf-v5-global--Color--100);
852
- }
853
- .pf-v5-c-page__main-section.pf-m-dark-100 {
854
- --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-dark-100--BackgroundColor);
855
- }
856
- .pf-v5-c-page__main-section.pf-m-dark-200 {
857
- --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-dark-200--BackgroundColor);
792
+ .pf-v5-c-page__main-section.pf-m-secondary {
793
+ --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-secondary--BackgroundColor);
858
794
  }
859
795
  .pf-v5-c-page__main-section.pf-m-padding {
860
796
  padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
@@ -984,9 +920,6 @@
984
920
  .pf-v5-c-page__main-wizard:first-child {
985
921
  --pf-v5-c-page__main-wizard--BorderTopWidth: 0;
986
922
  }
987
- .pf-v5-c-page__main-wizard.pf-m-light-200 {
988
- --pf-v5-c-page__main-wizard--BackgroundColor: var(--pf-v5-c-page__main-wizard--m-light-200--BackgroundColor);
989
- }
990
923
 
991
924
  .pf-v5-c-page__main-wizard .pf-v5-c-page__main-body {
992
925
  min-height: 0;
@@ -1025,46 +958,4 @@
1025
958
  }
1026
959
  .pf-v5-c-page__drawer > .pf-v5-c-drawer {
1027
960
  flex: 1 0 auto;
1028
- }
1029
-
1030
- :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button,
1031
- :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button,
1032
- :where(.pf-v5-theme-dark) .pf-v5-c-page__header .pf-v5-c-button {
1033
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
1034
- }
1035
-
1036
- :where(.pf-v5-theme-dark):root {
1037
- --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
1038
- --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1039
- --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
1040
- --pf-v5-c-page__header--BackgroundColor: var(--pf-v5-global--palette--black-1000);
1041
- }
1042
- :where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button {
1043
- color: var(--pf-v5-global--Color--100);
1044
- }
1045
- :where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge:hover::before {
1046
- background-color: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
1047
- }
1048
- :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar {
1049
- border-inline-end: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
1050
- }
1051
- :where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-bottom {
1052
- --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1053
- }
1054
- :where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-bottom {
1055
- --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1056
- }
1057
- :where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-bottom {
1058
- --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1059
- --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1060
- --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1061
- --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1062
- }
1063
- :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-bottom {
1064
- --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1065
- }
1066
- :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
1067
- :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
1068
- :where(.pf-v5-theme-dark) .pf-v5-c-page__header {
1069
- color: var(--pf-v5-global--Color--100);
1070
961
  }