@patternfly/patternfly 6.5.0-prerelease.57 → 6.5.0-prerelease.58

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 (24) hide show
  1. package/components/Accordion/accordion.css +1 -1
  2. package/components/Accordion/accordion.scss +1 -1
  3. package/components/DataList/data-list.css +1 -1
  4. package/components/DataList/data-list.scss +1 -1
  5. package/components/Drawer/drawer.css +1 -1
  6. package/components/Drawer/drawer.scss +1 -1
  7. package/components/Page/page.css +6 -6
  8. package/components/Page/page.scss +1 -1
  9. package/components/Table/table.css +1 -1
  10. package/components/Table/table.scss +1 -1
  11. package/components/Wizard/wizard.css +2 -2
  12. package/components/Wizard/wizard.scss +1 -1
  13. package/components/_index.css +12 -12
  14. package/docs/components/Accordion/examples/Accordion.md +1 -0
  15. package/docs/components/DataList/examples/DataList.md +1 -0
  16. package/docs/components/Drawer/examples/Drawer.md +2 -0
  17. package/docs/components/Page/examples/Page.md +2 -0
  18. package/docs/components/Table/examples/Table.md +1 -0
  19. package/docs/components/Wizard/examples/Wizard.md +1 -1
  20. package/package.json +1 -1
  21. package/patternfly-no-globals.css +12 -12
  22. package/patternfly.css +12 -12
  23. package/patternfly.min.css +1 -1
  24. package/patternfly.min.css.map +1 -1
package/components/Accordion/accordion.css CHANGED
@@ -104,7 +104,7 @@
104
104
  row-gap: var(--pf-v6-c-accordion--RowGap);
105
105
  background-color: var(--pf-v6-c-accordion--BackgroundColor);
106
106
  }
107
- :where(.pf-v6-theme-glass) .pf-v6-c-accordion:not(.pf-m-no-plain), .pf-v6-c-accordion.pf-m-plain {
107
+ :where(.pf-v6-theme-glass) .pf-v6-c-accordion:not(.pf-m-no-plain-on-glass), .pf-v6-c-accordion.pf-m-plain {
108
108
  --pf-v6-c-accordion--BackgroundColor: transparent;
109
109
  --pf-v6-c-accordion__expandable-content--BackgroundColor: transparent;
110
110
  --pf-v6-c-accordion__item--m-expanded--BackgroundColor: transparent;
package/components/Accordion/accordion.scss CHANGED
@@ -129,7 +129,7 @@
129
129
  row-gap: var(--#{$accordion}--RowGap);
130
130
  background-color: var(--#{$accordion}--BackgroundColor);
131
131
 
132
- @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain),
132
+ @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass),
133
133
  &.pf-m-plain {
134
134
  --#{$accordion}--BackgroundColor: transparent;
135
135
  --#{$accordion}__expandable-content--BackgroundColor: transparent;
package/components/DataList/data-list.css CHANGED
@@ -572,7 +572,7 @@
572
572
  .pf-v6-c-data-list.pf-m-drag-over {
573
573
  overflow-anchor: none;
574
574
  }
575
- :where(.pf-v6-theme-glass) .pf-v6-c-data-list:not(.pf-m-no-plain), .pf-v6-c-data-list.pf-m-plain {
575
+ :where(.pf-v6-theme-glass) .pf-v6-c-data-list:not(.pf-m-no-plain-on-glass), .pf-v6-c-data-list.pf-m-plain {
576
576
  --pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor);
577
577
  }
578
578
 
package/components/DataList/data-list.scss CHANGED
@@ -191,7 +191,7 @@
191
191
  overflow-anchor: none;
192
192
  }
193
193
 
194
- @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain),
194
+ @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass),
195
195
  &.pf-m-plain {
196
196
  --#{$data-list}__item--BackgroundColor: var(--#{$data-list}--pf-m-plain__item--BackgroundColor);
197
197
  }
package/components/Drawer/drawer.css CHANGED
@@ -473,7 +473,7 @@
473
473
  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
474
474
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
475
475
  }
476
- :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline:not(.pf-m-no-plain) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-inline.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static:not(.pf-m-no-plain) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-static.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
476
+ :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline:not(.pf-m-no-plain-on-glass) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-inline.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static:not(.pf-m-no-plain-on-glass) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-static.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
477
477
  background: transparent;
478
478
  }
479
479
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
package/components/Drawer/drawer.scss CHANGED
@@ -567,7 +567,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
567
567
 
568
568
  &.pf-m-inline,
569
569
  &.pf-m-static {
570
- @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain),
570
+ @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass),
571
571
  &.pf-m-plain {
572
572
  > .#{$drawer}__main > .#{$drawer}__panel {
573
573
  background: transparent;
package/components/Page/page.css CHANGED
@@ -721,16 +721,16 @@
721
721
  outline: 0;
722
722
  }
723
723
 
724
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-subnav:not(.pf-m-no-plain), .pf-v6-c-page__main-subnav.pf-m-plain,
725
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-breadcrumb:not(.pf-m-no-plain),
724
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-subnav:not(.pf-m-no-plain-on-glass), .pf-v6-c-page__main-subnav.pf-m-plain,
725
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-breadcrumb:not(.pf-m-no-plain-on-glass),
726
726
  .pf-v6-c-page__main-breadcrumb.pf-m-plain,
727
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-tabs:not(.pf-m-no-plain),
727
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-tabs:not(.pf-m-no-plain-on-glass),
728
728
  .pf-v6-c-page__main-tabs.pf-m-plain,
729
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-section:not(.pf-m-no-plain),
729
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-section:not(.pf-m-no-plain-on-glass),
730
730
  .pf-v6-c-page__main-section.pf-m-plain,
731
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-wizard:not(.pf-m-no-plain),
731
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-wizard:not(.pf-m-no-plain-on-glass),
732
732
  .pf-v6-c-page__main-wizard.pf-m-plain,
733
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-group:not(.pf-m-no-plain),
733
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-group:not(.pf-m-no-plain-on-glass),
734
734
  .pf-v6-c-page__main-group.pf-m-plain {
735
735
  --pf-v6-c-page__main-section--BackgroundColor: transparent;
736
736
  --pf-v6-c-page__main-subnav--BackgroundColor: transparent;
package/components/Page/page.scss CHANGED
@@ -645,7 +645,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
645
645
  .#{$page}__main-section,
646
646
  .#{$page}__main-wizard,
647
647
  .#{$page}__main-group {
648
- @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain),
648
+ @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass),
649
649
  &.pf-m-plain {
650
650
  --#{$page}__main-section--BackgroundColor: transparent;
651
651
  --#{$page}__main-subnav--BackgroundColor: transparent;
package/components/Table/table.css CHANGED
@@ -169,7 +169,7 @@
169
169
  width: 100%;
170
170
  background-color: var(--pf-v6-c-table--BackgroundColor);
171
171
  }
172
- :where(.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain), .pf-v6-c-table.pf-m-plain {
172
+ :where(.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain-on-glass), .pf-v6-c-table.pf-m-plain {
173
173
  --pf-v6-c-table--BackgroundColor: transparent;
174
174
  --pf-v6-c-table__expandable-row-content--BackgroundColor: transparent;
175
175
  --pf-v6-c-table__expandable-row-content--PaddingInlineStart: 0;
package/components/Table/table.scss CHANGED
@@ -266,7 +266,7 @@
266
266
  width: 100%;
267
267
  background-color: var(--#{$table}--BackgroundColor);
268
268
 
269
- @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain),
269
+ @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass),
270
270
  &.pf-m-plain {
271
271
  --#{$table}--BackgroundColor: transparent;
272
272
  --#{$table}__expandable-row-content--BackgroundColor: transparent;
package/components/Wizard/wizard.css CHANGED
@@ -163,14 +163,14 @@
163
163
  .pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
164
164
  display: none;
165
165
  }
166
- :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
166
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
167
167
  --pf-v6-c-wizard__header--BackgroundColor: var(--pf-v6-c-wizard--m-plain__header--BackgroundColor);
168
168
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-v6-c-wizard--m-plain__toggle--BackgroundColor);
169
169
  --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor);
170
170
  --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-v6-c-wizard--m-plain__footer--BackgroundColor);
171
171
  }
172
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 {
173
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
174
174
  --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard--m-plain__nav--BackgroundColor);
175
175
  }
176
176
  }
package/components/Wizard/wizard.scss CHANGED
@@ -224,7 +224,7 @@
224
224
  }
225
225
  }
226
226
 
227
- @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain),
227
+ @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass),
228
228
  &.pf-m-plain {
229
229
  --#{$wizard}__header--BackgroundColor: var(--#{$wizard}--m-plain__header--BackgroundColor);
230
230
  --#{$wizard}__toggle--BackgroundColor: var(--#{$wizard}--m-plain__toggle--BackgroundColor);
package/components/_index.css CHANGED
@@ -306,7 +306,7 @@
306
306
  row-gap: var(--pf-v6-c-accordion--RowGap);
307
307
  background-color: var(--pf-v6-c-accordion--BackgroundColor);
308
308
  }
309
- :where(.pf-v6-theme-glass) .pf-v6-c-accordion:not(.pf-m-no-plain), .pf-v6-c-accordion.pf-m-plain {
309
+ :where(.pf-v6-theme-glass) .pf-v6-c-accordion:not(.pf-m-no-plain-on-glass), .pf-v6-c-accordion.pf-m-plain {
310
310
  --pf-v6-c-accordion--BackgroundColor: transparent;
311
311
  --pf-v6-c-accordion__expandable-content--BackgroundColor: transparent;
312
312
  --pf-v6-c-accordion__item--m-expanded--BackgroundColor: transparent;
@@ -4828,7 +4828,7 @@ ul) {
4828
4828
  .pf-v6-c-data-list.pf-m-drag-over {
4829
4829
  overflow-anchor: none;
4830
4830
  }
4831
- :where(.pf-v6-theme-glass) .pf-v6-c-data-list:not(.pf-m-no-plain), .pf-v6-c-data-list.pf-m-plain {
4831
+ :where(.pf-v6-theme-glass) .pf-v6-c-data-list:not(.pf-m-no-plain-on-glass), .pf-v6-c-data-list.pf-m-plain {
4832
4832
  --pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor);
4833
4833
  }
4834
4834
 
@@ -6725,7 +6725,7 @@ ul) {
6725
6725
  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
6726
6726
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
6727
6727
  }
6728
- :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline:not(.pf-m-no-plain) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-inline.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static:not(.pf-m-no-plain) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-static.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6728
+ :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline:not(.pf-m-no-plain-on-glass) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-inline.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static:not(.pf-m-no-plain-on-glass) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-static.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6729
6729
  background: transparent;
6730
6730
  }
6731
6731
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -14154,16 +14154,16 @@ ul.pf-v6-c-list {
14154
14154
  outline: 0;
14155
14155
  }
14156
14156
 
14157
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-subnav:not(.pf-m-no-plain), .pf-v6-c-page__main-subnav.pf-m-plain,
14158
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-breadcrumb:not(.pf-m-no-plain),
14157
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-subnav:not(.pf-m-no-plain-on-glass), .pf-v6-c-page__main-subnav.pf-m-plain,
14158
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-breadcrumb:not(.pf-m-no-plain-on-glass),
14159
14159
  .pf-v6-c-page__main-breadcrumb.pf-m-plain,
14160
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-tabs:not(.pf-m-no-plain),
14160
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-tabs:not(.pf-m-no-plain-on-glass),
14161
14161
  .pf-v6-c-page__main-tabs.pf-m-plain,
14162
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-section:not(.pf-m-no-plain),
14162
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-section:not(.pf-m-no-plain-on-glass),
14163
14163
  .pf-v6-c-page__main-section.pf-m-plain,
14164
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-wizard:not(.pf-m-no-plain),
14164
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-wizard:not(.pf-m-no-plain-on-glass),
14165
14165
  .pf-v6-c-page__main-wizard.pf-m-plain,
14166
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-group:not(.pf-m-no-plain),
14166
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-group:not(.pf-m-no-plain-on-glass),
14167
14167
  .pf-v6-c-page__main-group.pf-m-plain {
14168
14168
  --pf-v6-c-page__main-section--BackgroundColor: transparent;
14169
14169
  --pf-v6-c-page__main-subnav--BackgroundColor: transparent;
@@ -18913,7 +18913,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18913
18913
  width: 100%;
18914
18914
  background-color: var(--pf-v6-c-table--BackgroundColor);
18915
18915
  }
18916
- :where(.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain), .pf-v6-c-table.pf-m-plain {
18916
+ :where(.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain-on-glass), .pf-v6-c-table.pf-m-plain {
18917
18917
  --pf-v6-c-table--BackgroundColor: transparent;
18918
18918
  --pf-v6-c-table__expandable-row-content--BackgroundColor: transparent;
18919
18919
  --pf-v6-c-table__expandable-row-content--PaddingInlineStart: 0;
@@ -25038,14 +25038,14 @@ label.pf-v6-c-tree-view__node-text {
25038
25038
  .pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
25039
25039
  display: none;
25040
25040
  }
25041
- :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
25041
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
25042
25042
  --pf-v6-c-wizard__header--BackgroundColor: var(--pf-v6-c-wizard--m-plain__header--BackgroundColor);
25043
25043
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-v6-c-wizard--m-plain__toggle--BackgroundColor);
25044
25044
  --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor);
25045
25045
  --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-v6-c-wizard--m-plain__footer--BackgroundColor);
25046
25046
  }
25047
25047
  @media screen and (min-width: 62rem) {
25048
- :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
25048
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
25049
25049
  --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard--m-plain__nav--BackgroundColor);
25050
25050
  }
25051
25051
  }
package/docs/components/Accordion/examples/Accordion.md CHANGED
@@ -1078,6 +1078,7 @@ Another variation is using the definition list:
1078
1078
  | `.pf-v6-c-accordion__expandable-content` | `<div>`, `<dd>` | Initiates expandable content. **Must be paired with a button** |
1079
1079
  | `.pf-v6-c-accordion__expandable-content-body` | `<div>` | Initiates expandable content body. **Required** |
1080
1080
  | `.pf-m-plain` | `.pf-v6-c-accordion` | Modifies the accordion have plain styles. |
1081
+ | `.pf-m-no-plain-on-glass` | `.pf-v6-c-accordion` | Prevents the accordion from automatically applying plain styling when glass theme is enabled. |
1081
1082
  | `.pf-m-bordered` | `.pf-v6-c-accordion` | Modifies the accordion to add borders between items. |
1082
1083
  | `.pf-m-display-lg` | `.pf-v6-c-accordion` | Modifies the accordion for large display styling. This variation is for marketing/web use cases. |
1083
1084
  | `.pf-m-toggle-start` | `.pf-v6-c-accordion` | Modifies accordion styling when accordion toggle icons are rendered at the start of the toggle, before the toggle text. |
package/docs/components/DataList/examples/DataList.md CHANGED
@@ -2190,6 +2190,7 @@ When a list item includes more than one block of content, it can be difficult fo
2190
2190
  | Class | Applied to | Outcome |
2191
2191
  | -- | -- | -- |
2192
2192
  | `.pf-m-plain` | `.pf-v6-c-data-list` | Modifies a data list to have a transparent background. |
2193
+ | `.pf-m-no-plain-on-glass` | `.pf-v6-c-data-list` | Prevents the data list from automatically applying plain styling when glass theme is enabled. |
2193
2194
 
2194
2195
  ## Data list as grid
2195
2196
 
package/docs/components/Drawer/examples/Drawer.md CHANGED
@@ -1135,6 +1135,8 @@ cssPrefix: pf-v6-c-drawer
1135
1135
  | `.pf-m-padding` | `.pf-v6-c-drawer__body` | Modifies the element to add padding. |
1136
1136
  | `.pf-m-no-padding` | `.pf-v6-c-drawer__body` | Modifies the element to remove padding. |
1137
1137
  | `.pf-m-no-background` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__panel` | Modifies the drawer element background color to transparent. |
1138
+ | `.pf-m-plain` | `.pf-v6-c-drawer__panel.pf-m-inline`, `.pf-v6-c-drawer__panel.pf-m-static` | Applies plain styling to the drawer panel. |
1139
+ | `.pf-m-no-plain-on-glass` | `.pf-v6-c-drawer__panel.pf-m-inline`, `.pf-v6-c-drawer__panel.pf-m-static` | Prevents the drawer panel from automatically applying plain styling when glass theme is enabled. |
1138
1140
  | `.pf-m-primary` | `.pf-v6-c-drawer__content` | Modifies the drawer content to use the primary background color. |
1139
1141
  | `.pf-m-secondary` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__content`, `.pf-v6-c-drawer__panel` | Modifies the drawer element to use the secondary background color. |
1140
1142
  | `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel width at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
package/docs/components/Page/examples/Page.md CHANGED
@@ -614,6 +614,8 @@ This component provides the basic chrome for a page, including sidebar and main
614
614
  | `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
615
615
  | `.pf-m-fill` | `.pf-v6-c-page__main-container`, `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__sidebar-body` | Modifies the element to grow to fill the available space. Note that `.pf-v6-c-page__main-container` must also have `.pf-m-fill` applied in order for the section to have space to stretch to full height.|
616
616
  | `.pf-m-no-fill` | `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__sidebar-body` | Modifies the element not to grow to fill the available vertical space. |
617
+ | `.pf-m-plain` | `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__main-breadcrumb`, `.pf-v6-c-page__main-subnav`, and `.pf-v6-c-page__main-tabs` | Applies plain styling to the section. |
618
+ | `.pf-m-no-plain-on-glass` | `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__main-breadcrumb`, `.pf-v6-c-page__main-subnav`, and `.pf-v6-c-page__main-tabs` | Prevents the section from automatically applying plain styling when glass theme is enabled. |
617
619
  | `.pf-m-limit-width` | `.pf-v6-c-page__main-section` | Modifies a page section to limit the `max-width` of the content inside. |
618
620
  | `.pf-m-align-center` | `.pf-v6-c-page__main-section.pf-m-limit-width` | Modifies a page section body to align center. |
619
621
  | `.pf-m-sticky-top{-on-[breakpoint]-height}` | `.pf-v6-c-page__main-*` | Modifies a section/group to be sticky to the top of its container at an optional height breakpoint. |
package/docs/components/Table/examples/Table.md CHANGED
@@ -8507,6 +8507,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
8507
8507
  | Class | Applied to | Outcome |
8508
8508
  | -- | -- | -- |
8509
8509
  | `.pf-m-plain` | `.pf-v6-c-table` | Modifies the table to have a transparent background. |
8510
+ | `.pf-m-no-plain-on-glass` | `.pf-v6-c-table` | Prevents the table from automatically applying plain styling when glass theme is enabled. |
8510
8511
 
8511
8512
  ## Compact variant
8512
8513
 
package/docs/components/Wizard/examples/Wizard.md CHANGED
@@ -4187,7 +4187,7 @@ wrapperTag: div
4187
4187
  | `.pf-m-expanded` | `.pf-v6-c-wizard__toggle`, `.pf-v6-c-wizard__nav` | Modifies the mobile steps toggle and steps menu for the expanded state. |
4188
4188
  | `.pf-m-finished` | `.pf-v6-c-wizard` | Modifies the wizard for the finished state. |
4189
4189
  | `.pf-m-plain` | `.pf-v6-c-wizard` | Modifies the wizard to have a transparent background. |
4190
- | `.pf-m-no-plain` | `.pf-v6-c-wizard` | Prevents the wizard from automatically applying plain styling when glass theme is enabled. |
4190
+ | `.pf-m-no-plain-on-glass` | `.pf-v6-c-wizard` | Prevents the wizard from automatically applying plain styling when glass theme is enabled. |
4191
4191
  | `.pf-m-expandable` | `.pf-v6-c-wizard__nav-item` | Modifies a nav item for the expandable state. |
4192
4192
  | `.pf-m-expanded` | `.pf-v6-c-wizard__nav-item` | Modifies a nav item for the expanded state. |
4193
4193
  | `.pf-m-current` | `.pf-v6-c-wizard__nav-link` | Modifies a step link for the current state. **Required** |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.57",
4
+ "version": "6.5.0-prerelease.58",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -9447,7 +9447,7 @@
9447
9447
  row-gap: var(--pf-v6-c-accordion--RowGap);
9448
9448
  background-color: var(--pf-v6-c-accordion--BackgroundColor);
9449
9449
  }
9450
- :where(.pf-v6-theme-glass) .pf-v6-c-accordion:not(.pf-m-no-plain), .pf-v6-c-accordion.pf-m-plain {
9450
+ :where(.pf-v6-theme-glass) .pf-v6-c-accordion:not(.pf-m-no-plain-on-glass), .pf-v6-c-accordion.pf-m-plain {
9451
9451
  --pf-v6-c-accordion--BackgroundColor: transparent;
9452
9452
  --pf-v6-c-accordion__expandable-content--BackgroundColor: transparent;
9453
9453
  --pf-v6-c-accordion__item--m-expanded--BackgroundColor: transparent;
@@ -13969,7 +13969,7 @@ ul) {
13969
13969
  .pf-v6-c-data-list.pf-m-drag-over {
13970
13970
  overflow-anchor: none;
13971
13971
  }
13972
- :where(.pf-v6-theme-glass) .pf-v6-c-data-list:not(.pf-m-no-plain), .pf-v6-c-data-list.pf-m-plain {
13972
+ :where(.pf-v6-theme-glass) .pf-v6-c-data-list:not(.pf-m-no-plain-on-glass), .pf-v6-c-data-list.pf-m-plain {
13973
13973
  --pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor);
13974
13974
  }
13975
13975
 
@@ -15866,7 +15866,7 @@ ul) {
15866
15866
  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
15867
15867
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
15868
15868
  }
15869
- :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline:not(.pf-m-no-plain) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-inline.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static:not(.pf-m-no-plain) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-static.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
15869
+ :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline:not(.pf-m-no-plain-on-glass) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-inline.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static:not(.pf-m-no-plain-on-glass) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-static.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
15870
15870
  background: transparent;
15871
15871
  }
15872
15872
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -23295,16 +23295,16 @@ ul.pf-v6-c-list {
23295
23295
  outline: 0;
23296
23296
  }
23297
23297
 
23298
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-subnav:not(.pf-m-no-plain), .pf-v6-c-page__main-subnav.pf-m-plain,
23299
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-breadcrumb:not(.pf-m-no-plain),
23298
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-subnav:not(.pf-m-no-plain-on-glass), .pf-v6-c-page__main-subnav.pf-m-plain,
23299
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-breadcrumb:not(.pf-m-no-plain-on-glass),
23300
23300
  .pf-v6-c-page__main-breadcrumb.pf-m-plain,
23301
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-tabs:not(.pf-m-no-plain),
23301
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-tabs:not(.pf-m-no-plain-on-glass),
23302
23302
  .pf-v6-c-page__main-tabs.pf-m-plain,
23303
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-section:not(.pf-m-no-plain),
23303
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-section:not(.pf-m-no-plain-on-glass),
23304
23304
  .pf-v6-c-page__main-section.pf-m-plain,
23305
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-wizard:not(.pf-m-no-plain),
23305
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-wizard:not(.pf-m-no-plain-on-glass),
23306
23306
  .pf-v6-c-page__main-wizard.pf-m-plain,
23307
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-group:not(.pf-m-no-plain),
23307
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-group:not(.pf-m-no-plain-on-glass),
23308
23308
  .pf-v6-c-page__main-group.pf-m-plain {
23309
23309
  --pf-v6-c-page__main-section--BackgroundColor: transparent;
23310
23310
  --pf-v6-c-page__main-subnav--BackgroundColor: transparent;
@@ -28054,7 +28054,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
28054
28054
  width: 100%;
28055
28055
  background-color: var(--pf-v6-c-table--BackgroundColor);
28056
28056
  }
28057
- :where(.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain), .pf-v6-c-table.pf-m-plain {
28057
+ :where(.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain-on-glass), .pf-v6-c-table.pf-m-plain {
28058
28058
  --pf-v6-c-table--BackgroundColor: transparent;
28059
28059
  --pf-v6-c-table__expandable-row-content--BackgroundColor: transparent;
28060
28060
  --pf-v6-c-table__expandable-row-content--PaddingInlineStart: 0;
@@ -34179,14 +34179,14 @@ label.pf-v6-c-tree-view__node-text {
34179
34179
  .pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
34180
34180
  display: none;
34181
34181
  }
34182
- :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
34182
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
34183
34183
  --pf-v6-c-wizard__header--BackgroundColor: var(--pf-v6-c-wizard--m-plain__header--BackgroundColor);
34184
34184
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-v6-c-wizard--m-plain__toggle--BackgroundColor);
34185
34185
  --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor);
34186
34186
  --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-v6-c-wizard--m-plain__footer--BackgroundColor);
34187
34187
  }
34188
34188
  @media screen and (min-width: 62rem) {
34189
- :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
34189
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
34190
34190
  --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard--m-plain__nav--BackgroundColor);
34191
34191
  }
34192
34192
  }
package/patternfly.css CHANGED
@@ -9594,7 +9594,7 @@ button) {
9594
9594
  row-gap: var(--pf-v6-c-accordion--RowGap);
9595
9595
  background-color: var(--pf-v6-c-accordion--BackgroundColor);
9596
9596
  }
9597
- :where(.pf-v6-theme-glass) .pf-v6-c-accordion:not(.pf-m-no-plain), .pf-v6-c-accordion.pf-m-plain {
9597
+ :where(.pf-v6-theme-glass) .pf-v6-c-accordion:not(.pf-m-no-plain-on-glass), .pf-v6-c-accordion.pf-m-plain {
9598
9598
  --pf-v6-c-accordion--BackgroundColor: transparent;
9599
9599
  --pf-v6-c-accordion__expandable-content--BackgroundColor: transparent;
9600
9600
  --pf-v6-c-accordion__item--m-expanded--BackgroundColor: transparent;
@@ -14116,7 +14116,7 @@ ul) {
14116
14116
  .pf-v6-c-data-list.pf-m-drag-over {
14117
14117
  overflow-anchor: none;
14118
14118
  }
14119
- :where(.pf-v6-theme-glass) .pf-v6-c-data-list:not(.pf-m-no-plain), .pf-v6-c-data-list.pf-m-plain {
14119
+ :where(.pf-v6-theme-glass) .pf-v6-c-data-list:not(.pf-m-no-plain-on-glass), .pf-v6-c-data-list.pf-m-plain {
14120
14120
  --pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor);
14121
14121
  }
14122
14122
 
@@ -16013,7 +16013,7 @@ ul) {
16013
16013
  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
16014
16014
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
16015
16015
  }
16016
- :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline:not(.pf-m-no-plain) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-inline.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static:not(.pf-m-no-plain) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-static.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
16016
+ :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline:not(.pf-m-no-plain-on-glass) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-inline.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static:not(.pf-m-no-plain-on-glass) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-static.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
16017
16017
  background: transparent;
16018
16018
  }
16019
16019
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -23442,16 +23442,16 @@ ul.pf-v6-c-list {
23442
23442
  outline: 0;
23443
23443
  }
23444
23444
 
23445
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-subnav:not(.pf-m-no-plain), .pf-v6-c-page__main-subnav.pf-m-plain,
23446
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-breadcrumb:not(.pf-m-no-plain),
23445
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-subnav:not(.pf-m-no-plain-on-glass), .pf-v6-c-page__main-subnav.pf-m-plain,
23446
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-breadcrumb:not(.pf-m-no-plain-on-glass),
23447
23447
  .pf-v6-c-page__main-breadcrumb.pf-m-plain,
23448
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-tabs:not(.pf-m-no-plain),
23448
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-tabs:not(.pf-m-no-plain-on-glass),
23449
23449
  .pf-v6-c-page__main-tabs.pf-m-plain,
23450
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-section:not(.pf-m-no-plain),
23450
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-section:not(.pf-m-no-plain-on-glass),
23451
23451
  .pf-v6-c-page__main-section.pf-m-plain,
23452
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-wizard:not(.pf-m-no-plain),
23452
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-wizard:not(.pf-m-no-plain-on-glass),
23453
23453
  .pf-v6-c-page__main-wizard.pf-m-plain,
23454
- :where(.pf-v6-theme-glass) .pf-v6-c-page__main-group:not(.pf-m-no-plain),
23454
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-group:not(.pf-m-no-plain-on-glass),
23455
23455
  .pf-v6-c-page__main-group.pf-m-plain {
23456
23456
  --pf-v6-c-page__main-section--BackgroundColor: transparent;
23457
23457
  --pf-v6-c-page__main-subnav--BackgroundColor: transparent;
@@ -28201,7 +28201,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
28201
28201
  width: 100%;
28202
28202
  background-color: var(--pf-v6-c-table--BackgroundColor);
28203
28203
  }
28204
- :where(.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain), .pf-v6-c-table.pf-m-plain {
28204
+ :where(.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain-on-glass), .pf-v6-c-table.pf-m-plain {
28205
28205
  --pf-v6-c-table--BackgroundColor: transparent;
28206
28206
  --pf-v6-c-table__expandable-row-content--BackgroundColor: transparent;
28207
28207
  --pf-v6-c-table__expandable-row-content--PaddingInlineStart: 0;
@@ -34326,14 +34326,14 @@ label.pf-v6-c-tree-view__node-text {
34326
34326
  .pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
34327
34327
  display: none;
34328
34328
  }
34329
- :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
34329
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
34330
34330
  --pf-v6-c-wizard__header--BackgroundColor: var(--pf-v6-c-wizard--m-plain__header--BackgroundColor);
34331
34331
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-v6-c-wizard--m-plain__toggle--BackgroundColor);
34332
34332
  --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor);
34333
34333
  --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-v6-c-wizard--m-plain__footer--BackgroundColor);
34334
34334
  }
34335
34335
  @media screen and (min-width: 62rem) {
34336
- :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
34336
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
34337
34337
  --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard--m-plain__nav--BackgroundColor);
34338
34338
  }
34339
34339
  }