@patternfly/patternfly 6.6.0-prerelease.3 → 6.6.0-prerelease.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/base/patternfly-variables.css +2 -0
  2. package/base/tokens/tokens-felt-glass.scss +2 -1
  3. package/base/tokens/tokens-glass.scss +2 -1
  4. package/components/Masthead/masthead.css +1 -1
  5. package/components/Masthead/masthead.scss +1 -1
  6. package/components/Page/page.css +18 -17
  7. package/components/Page/page.scss +20 -21
  8. package/components/_index.css +19 -18
  9. package/package.json +1 -1
  10. package/patternfly-base-no-globals.css +2 -0
  11. package/patternfly-base.css +2 -0
  12. package/patternfly-no-globals.css +21 -18
  13. package/patternfly.css +21 -18
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/base/patternfly-variables.css CHANGED
@@ -1764,6 +1764,7 @@
1764
1764
  --pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
1765
1765
  --pf-t--global--border--radius--glass--default: var(--pf-t--global--border--radius--medium);
1766
1766
  --pf-t--global--border--width--glass--default: var(--pf-t--global--border--width--regular);
1767
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
1767
1768
  --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
1768
1769
  --pf-t--global--background--image--default: var(--pf-t--global--background--image--glass, url("../assets/images/PF-Bkg-Generic-Light.svg"));
1769
1770
  --pf-t--global--box-shadow--glass--default: var(--pf-t--global--box-shadow--md);
@@ -1917,6 +1918,7 @@
1917
1918
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
1918
1919
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
1919
1920
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
1921
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
1920
1922
  --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
1921
1923
  --pf-t--global--background--image--default: var(--pf-t--global--background--image--felt--glass, url("../assets/images/Felt-Bkg-Generic-Light.svg"));
1922
1924
  }
package/base/tokens/tokens-felt-glass.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  // Do not edit directly
3
3
  // Generated on Mon, 01 Jun 2026 21:26:11 GMT
4
4
 
5
- // Only tokens that differ from base theme (23 tokens)
5
+ // Only tokens that differ from base theme (24 tokens)
6
6
  @mixin pf-v6-tokens {
7
7
  --pf-t--global--background--color--glass--primary--default: rgb(255, 255, 255, 0.5000);
8
8
  --pf-t--global--background--color--primary--clicked: rgb(199, 199, 199, 0.3000);
@@ -26,5 +26,6 @@
26
26
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
27
27
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
28
28
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
29
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
29
30
  --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
30
31
  }
package/base/tokens/tokens-glass.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  // Do not edit directly
3
3
  // Generated on Mon, 01 Jun 2026 21:26:11 GMT
4
4
 
5
- // Only tokens that differ from base theme (15 tokens)
5
+ // Only tokens that differ from base theme (16 tokens)
6
6
  @mixin pf-v6-tokens {
7
7
  --pf-t--global--background--color--glass--primary--default: rgb(255, 255, 255, 0.5000);
8
8
  --pf-t--global--background--color--primary--clicked: rgb(199, 199, 199, 0.3000);
@@ -18,5 +18,6 @@
18
18
  --pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
19
19
  --pf-t--global--border--radius--glass--default: var(--pf-t--global--border--radius--medium);
20
20
  --pf-t--global--border--width--glass--default: var(--pf-t--global--border--width--regular);
21
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
21
22
  --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
22
23
  }
package/components/Masthead/masthead.css CHANGED
@@ -3,7 +3,7 @@
3
3
  --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--gutter--default);
4
4
  --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
5
5
  --pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
6
- --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
6
+ --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
7
7
  --pf-v6-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
8
8
  --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
9
9
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-t--global--spacer--md);
package/components/Masthead/masthead.scss CHANGED
@@ -9,7 +9,7 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
9
9
  --#{$masthead}--ColumnGap: var(--pf-t--global--spacer--gutter--default);
10
10
  --#{$masthead}--BorderWidth: var(--pf-t--global--border--width--divider--default);
11
11
  --#{$masthead}--PaddingBlock: var(--pf-t--global--spacer--md);
12
- --#{$masthead}--PaddingInline: var(--pf-t--global--spacer--lg);
12
+ --#{$masthead}--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
13
13
  --#{$masthead}--BorderColor: var(--pf-t--global--border--color--default);
14
14
  --#{$masthead}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15
15
 
package/components/Page/page.css CHANGED
@@ -1,11 +1,6 @@
1
1
  .pf-v6-c-page {
2
2
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
3
3
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
4
- --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
5
- --pf-v6-c-page--m-dock__main-container--MarginBlockStart: 0;
6
- --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--lg);
7
- --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
8
- --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
9
4
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
10
5
  --pf-v6-c-page__dock--Width: 15.625rem;
11
6
  --pf-v6-c-page__dock--desktop--Width: auto;
@@ -24,6 +19,11 @@
24
19
  --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
25
20
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
26
21
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
22
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
23
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
24
+ --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
25
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
26
+ --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
27
27
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
28
28
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
29
29
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -194,20 +194,17 @@
194
194
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
195
195
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
196
196
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
197
- --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
198
- --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
199
- --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
200
197
  --pf-v6-c-page--BackgroundColor--glass: transparent;
201
198
  --pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
202
- --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
203
- --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
204
- --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
199
+ --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
200
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--md);
201
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--md);
205
202
  --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
206
203
  --pf-v6-c-page__sidebar-main--PaddingInlineStart--glass: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
207
204
  --pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
208
- --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--sm) * -1);
209
- --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-t--global--spacer--md);
210
- --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-t--global--spacer--md);
205
+ --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--xs) * -1);
206
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
207
+ --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
211
208
  --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
212
209
  --pf-v6-c-page__sidebar-main--BackgroundColor--glass: var(--pf-v6-c-page__sidebar--BackgroundColor);
213
210
  --pf-v6-c-page__sidebar-main--BackdropFilter--glass: var(--pf-v6-c-page__sidebar--BackdropFilter);
@@ -218,9 +215,11 @@
218
215
  --pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass: 0;
219
216
  --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
220
217
  --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
221
- --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
222
- --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
223
- --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
218
+ --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--gutter--default);
219
+ --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
220
+ --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
221
+ --pf-v6-c-page--m-dock__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
222
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
224
223
  }
225
224
  :where(.pf-v6-theme-glass) .pf-v6-c-page {
226
225
  --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
@@ -243,6 +242,8 @@
243
242
  --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
244
243
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
245
244
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--MaxHeight--glass);
245
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight--glass);
246
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass);
246
247
  }
247
248
  @media (min-width: 75rem) {
248
249
  .pf-v6-c-page {
package/components/Page/page.scss CHANGED
@@ -9,13 +9,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
9
9
  --#{$page}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
10
10
  --#{$page}--inset: var(--pf-t--global--spacer--inset--page-chrome);
11
11
 
12
- // Docked nav
13
- --#{$page}--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
14
- --#{$page}--m-dock__main-container--MarginBlockStart: 0;
15
- --#{$page}--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--lg);
16
- --#{$page}--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
17
- --#{$page}--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
18
-
19
12
  // Header
20
13
  --#{$page}--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
21
14
 
@@ -40,6 +33,13 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
40
33
  --#{$page}__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
41
34
  --#{$page}__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
42
35
 
36
+ // Docked nav
37
+ --#{$page}--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
38
+ --#{$page}--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
39
+ --#{$page}--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
40
+ --#{$page}--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
41
+ --#{$page}--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
42
+
43
43
  // Sidebar
44
44
  --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
45
45
  --#{$page}__sidebar--Width--base: #{pf-size-prem(290px)};
@@ -235,23 +235,18 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
235
235
  --#{$page}__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
236
236
  --#{$page}__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
237
237
 
238
- // Docked nav
239
- --#{$page}--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
240
- --#{$page}--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
241
- --#{$page}--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
242
-
243
238
  // Glass theme
244
239
  --#{$page}--BackgroundColor--glass: transparent;
245
240
  --#{$page}__sidebar--Width--base--glass: calc(#{pf-size-prem(290px)} + var(--pf-t--global--spacer--inset--page-chrome) * 2);
246
- --#{$page}__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
247
- --#{$page}__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
248
- --#{$page}__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
241
+ --#{$page}__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
242
+ --#{$page}__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--md);
243
+ --#{$page}__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--md);
249
244
  --#{$page}__sidebar-main--PaddingBlockEnd--glass: var(--#{$page}__sidebar--PaddingBlockEnd);
250
245
  --#{$page}__sidebar-main--PaddingInlineStart--glass: var(--#{$page}__sidebar--PaddingInlineStart);
251
246
  --#{$page}__sidebar-main--PaddingInlineEnd--glass: var(--#{$page}__sidebar--PaddingInlineEnd);
252
- --#{$page}__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--sm) * -1);
253
- --#{$page}__sidebar-main--MarginBlockEnd--glass: var(--pf-t--global--spacer--md);
254
- --#{$page}__sidebar-main--MarginInlineStart--glass: var(--pf-t--global--spacer--md);
247
+ --#{$page}__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--xs) * -1);
248
+ --#{$page}__sidebar-main--MarginBlockEnd--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
249
+ --#{$page}__sidebar-main--MarginInlineStart--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
255
250
  --#{$page}__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
256
251
  --#{$page}__sidebar-main--BackgroundColor--glass: var(--#{$page}__sidebar--BackgroundColor);
257
252
  --#{$page}__sidebar-main--BackdropFilter--glass: var(--#{$page}__sidebar--BackdropFilter);
@@ -262,9 +257,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
262
257
  --#{$page}__sidebar-main--xl--MarginBlockStart--glass: 0;
263
258
  --#{$page}__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
264
259
  --#{$page}__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
265
- --#{$page}__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
266
- --#{$page}__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
267
- --#{$page}__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
260
+ --#{$page}__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--gutter--default);
261
+ --#{$page}__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
262
+ --#{$page}__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
263
+ --#{$page}--m-dock__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
264
+ --#{$page}--m-dock__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
268
265
 
269
266
  :where(.pf-v6-theme-glass) & {
270
267
  --#{$page}--BackgroundColor: var(--#{$page}--BackgroundColor--glass);
@@ -287,6 +284,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
287
284
  --#{$page}__sidebar-main--BoxShadow: var(--#{$page}__sidebar-main--BoxShadow--glass);
288
285
  --#{$page}__main-container--MarginBlockStart: var(--#{$page}__main-container--MarginBlockStart--glass);
289
286
  --#{$page}__main-container--MaxHeight: var(--#{$page}__main-container--MaxHeight--glass);
287
+ --#{$page}--m-dock__main-container--MaxHeight: var(--#{$page}--m-dock__main-container--MaxHeight--glass);
288
+ --#{$page}--m-dock__main-container--MarginBlockStart: var(--#{$page}--m-dock__main-container--MarginBlockStart--glass);
290
289
  }
291
290
 
292
291
  @media (min-width: $pf-v6-global--breakpoint--xl) {
package/components/_index.css CHANGED
@@ -10672,7 +10672,7 @@ ul.pf-v6-c-list {
10672
10672
  --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--gutter--default);
10673
10673
  --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
10674
10674
  --pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
10675
- --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
10675
+ --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
10676
10676
  --pf-v6-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
10677
10677
  --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
10678
10678
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-t--global--spacer--md);
@@ -13698,11 +13698,6 @@ ul.pf-v6-c-list {
13698
13698
  .pf-v6-c-page {
13699
13699
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
13700
13700
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
13701
- --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
13702
- --pf-v6-c-page--m-dock__main-container--MarginBlockStart: 0;
13703
- --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--lg);
13704
- --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
13705
- --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
13706
13701
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
13707
13702
  --pf-v6-c-page__dock--Width: 15.625rem;
13708
13703
  --pf-v6-c-page__dock--desktop--Width: auto;
@@ -13721,6 +13716,11 @@ ul.pf-v6-c-list {
13721
13716
  --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
13722
13717
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
13723
13718
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
13719
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
13720
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
13721
+ --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
13722
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
13723
+ --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
13724
13724
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
13725
13725
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
13726
13726
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -13891,20 +13891,17 @@ ul.pf-v6-c-list {
13891
13891
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
13892
13892
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
13893
13893
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
13894
- --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
13895
- --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
13896
- --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
13897
13894
  --pf-v6-c-page--BackgroundColor--glass: transparent;
13898
13895
  --pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
13899
- --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
13900
- --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
13901
- --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
13896
+ --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
13897
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--md);
13898
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--md);
13902
13899
  --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
13903
13900
  --pf-v6-c-page__sidebar-main--PaddingInlineStart--glass: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
13904
13901
  --pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
13905
- --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--sm) * -1);
13906
- --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-t--global--spacer--md);
13907
- --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-t--global--spacer--md);
13902
+ --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--xs) * -1);
13903
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
13904
+ --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
13908
13905
  --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
13909
13906
  --pf-v6-c-page__sidebar-main--BackgroundColor--glass: var(--pf-v6-c-page__sidebar--BackgroundColor);
13910
13907
  --pf-v6-c-page__sidebar-main--BackdropFilter--glass: var(--pf-v6-c-page__sidebar--BackdropFilter);
@@ -13915,9 +13912,11 @@ ul.pf-v6-c-list {
13915
13912
  --pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass: 0;
13916
13913
  --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
13917
13914
  --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
13918
- --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
13919
- --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
13920
- --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
13915
+ --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--gutter--default);
13916
+ --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
13917
+ --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
13918
+ --pf-v6-c-page--m-dock__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
13919
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
13921
13920
  }
13922
13921
  :where(.pf-v6-theme-glass) .pf-v6-c-page {
13923
13922
  --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
@@ -13940,6 +13939,8 @@ ul.pf-v6-c-list {
13940
13939
  --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
13941
13940
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
13942
13941
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--MaxHeight--glass);
13942
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight--glass);
13943
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass);
13943
13944
  }
13944
13945
  @media (min-width: 75rem) {
13945
13946
  .pf-v6-c-page {
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
- "version": "6.6.0-prerelease.3",
4
+ "version": "6.6.0-prerelease.4",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals.css CHANGED
@@ -8086,6 +8086,7 @@
8086
8086
  --pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
8087
8087
  --pf-t--global--border--radius--glass--default: var(--pf-t--global--border--radius--medium);
8088
8088
  --pf-t--global--border--width--glass--default: var(--pf-t--global--border--width--regular);
8089
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
8089
8090
  --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
8090
8091
  --pf-t--global--background--image--default: var(--pf-t--global--background--image--glass, url("./assets/images/PF-Bkg-Generic-Light.svg"));
8091
8092
  --pf-t--global--box-shadow--glass--default: var(--pf-t--global--box-shadow--md);
@@ -8239,6 +8240,7 @@
8239
8240
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
8240
8241
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
8241
8242
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
8243
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
8242
8244
  --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
8243
8245
  --pf-t--global--background--image--default: var(--pf-t--global--background--image--felt--glass, url("./assets/images/Felt-Bkg-Generic-Light.svg"));
8244
8246
  }
package/patternfly-base.css CHANGED
@@ -8241,6 +8241,7 @@ button) {
8241
8241
  --pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
8242
8242
  --pf-t--global--border--radius--glass--default: var(--pf-t--global--border--radius--medium);
8243
8243
  --pf-t--global--border--width--glass--default: var(--pf-t--global--border--width--regular);
8244
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
8244
8245
  --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
8245
8246
  --pf-t--global--background--image--default: var(--pf-t--global--background--image--glass, url("./assets/images/PF-Bkg-Generic-Light.svg"));
8246
8247
  --pf-t--global--box-shadow--glass--default: var(--pf-t--global--box-shadow--md);
@@ -8394,6 +8395,7 @@ button) {
8394
8395
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
8395
8396
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
8396
8397
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
8398
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
8397
8399
  --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
8398
8400
  --pf-t--global--background--image--default: var(--pf-t--global--background--image--felt--glass, url("./assets/images/Felt-Bkg-Generic-Light.svg"));
8399
8401
  }
package/patternfly-no-globals.css CHANGED
@@ -8086,6 +8086,7 @@
8086
8086
  --pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
8087
8087
  --pf-t--global--border--radius--glass--default: var(--pf-t--global--border--radius--medium);
8088
8088
  --pf-t--global--border--width--glass--default: var(--pf-t--global--border--width--regular);
8089
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
8089
8090
  --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
8090
8091
  --pf-t--global--background--image--default: var(--pf-t--global--background--image--glass, url("./assets/images/PF-Bkg-Generic-Light.svg"));
8091
8092
  --pf-t--global--box-shadow--glass--default: var(--pf-t--global--box-shadow--md);
@@ -8239,6 +8240,7 @@
8239
8240
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
8240
8241
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
8241
8242
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
8243
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
8242
8244
  --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
8243
8245
  --pf-t--global--background--image--default: var(--pf-t--global--background--image--felt--glass, url("./assets/images/Felt-Bkg-Generic-Light.svg"));
8244
8246
  }
@@ -19926,7 +19928,7 @@ ul.pf-v6-c-list {
19926
19928
  --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--gutter--default);
19927
19929
  --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
19928
19930
  --pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
19929
- --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
19931
+ --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
19930
19932
  --pf-v6-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
19931
19933
  --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
19932
19934
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-t--global--spacer--md);
@@ -22952,11 +22954,6 @@ ul.pf-v6-c-list {
22952
22954
  .pf-v6-c-page {
22953
22955
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
22954
22956
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
22955
- --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
22956
- --pf-v6-c-page--m-dock__main-container--MarginBlockStart: 0;
22957
- --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--lg);
22958
- --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
22959
- --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
22960
22957
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
22961
22958
  --pf-v6-c-page__dock--Width: 15.625rem;
22962
22959
  --pf-v6-c-page__dock--desktop--Width: auto;
@@ -22975,6 +22972,11 @@ ul.pf-v6-c-list {
22975
22972
  --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
22976
22973
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
22977
22974
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
22975
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
22976
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
22977
+ --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
22978
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
22979
+ --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
22978
22980
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
22979
22981
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
22980
22982
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -23145,20 +23147,17 @@ ul.pf-v6-c-list {
23145
23147
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
23146
23148
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
23147
23149
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
23148
- --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
23149
- --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
23150
- --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
23151
23150
  --pf-v6-c-page--BackgroundColor--glass: transparent;
23152
23151
  --pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
23153
- --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
23154
- --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
23155
- --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
23152
+ --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
23153
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--md);
23154
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--md);
23156
23155
  --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
23157
23156
  --pf-v6-c-page__sidebar-main--PaddingInlineStart--glass: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
23158
23157
  --pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
23159
- --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--sm) * -1);
23160
- --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-t--global--spacer--md);
23161
- --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-t--global--spacer--md);
23158
+ --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--xs) * -1);
23159
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
23160
+ --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
23162
23161
  --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
23163
23162
  --pf-v6-c-page__sidebar-main--BackgroundColor--glass: var(--pf-v6-c-page__sidebar--BackgroundColor);
23164
23163
  --pf-v6-c-page__sidebar-main--BackdropFilter--glass: var(--pf-v6-c-page__sidebar--BackdropFilter);
@@ -23169,9 +23168,11 @@ ul.pf-v6-c-list {
23169
23168
  --pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass: 0;
23170
23169
  --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
23171
23170
  --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
23172
- --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
23173
- --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
23174
- --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
23171
+ --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--gutter--default);
23172
+ --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
23173
+ --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
23174
+ --pf-v6-c-page--m-dock__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
23175
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
23175
23176
  }
23176
23177
  :where(.pf-v6-theme-glass) .pf-v6-c-page {
23177
23178
  --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
@@ -23194,6 +23195,8 @@ ul.pf-v6-c-list {
23194
23195
  --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
23195
23196
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
23196
23197
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--MaxHeight--glass);
23198
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight--glass);
23199
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass);
23197
23200
  }
23198
23201
  @media (min-width: 75rem) {
23199
23202
  .pf-v6-c-page {
package/patternfly.css CHANGED
@@ -8241,6 +8241,7 @@ button) {
8241
8241
  --pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
8242
8242
  --pf-t--global--border--radius--glass--default: var(--pf-t--global--border--radius--medium);
8243
8243
  --pf-t--global--border--width--glass--default: var(--pf-t--global--border--width--regular);
8244
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
8244
8245
  --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
8245
8246
  --pf-t--global--background--image--default: var(--pf-t--global--background--image--glass, url("./assets/images/PF-Bkg-Generic-Light.svg"));
8246
8247
  --pf-t--global--box-shadow--glass--default: var(--pf-t--global--box-shadow--md);
@@ -8394,6 +8395,7 @@ button) {
8394
8395
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
8395
8396
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
8396
8397
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
8398
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
8397
8399
  --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
8398
8400
  --pf-t--global--background--image--default: var(--pf-t--global--background--image--felt--glass, url("./assets/images/Felt-Bkg-Generic-Light.svg"));
8399
8401
  }
@@ -20081,7 +20083,7 @@ ul.pf-v6-c-list {
20081
20083
  --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--gutter--default);
20082
20084
  --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
20083
20085
  --pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
20084
- --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
20086
+ --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
20085
20087
  --pf-v6-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
20086
20088
  --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
20087
20089
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-t--global--spacer--md);
@@ -23107,11 +23109,6 @@ ul.pf-v6-c-list {
23107
23109
  .pf-v6-c-page {
23108
23110
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
23109
23111
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
23110
- --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
23111
- --pf-v6-c-page--m-dock__main-container--MarginBlockStart: 0;
23112
- --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--lg);
23113
- --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
23114
- --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
23115
23112
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
23116
23113
  --pf-v6-c-page__dock--Width: 15.625rem;
23117
23114
  --pf-v6-c-page__dock--desktop--Width: auto;
@@ -23130,6 +23127,11 @@ ul.pf-v6-c-list {
23130
23127
  --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
23131
23128
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
23132
23129
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
23130
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
23131
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
23132
+ --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
23133
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
23134
+ --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
23133
23135
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
23134
23136
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
23135
23137
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -23300,20 +23302,17 @@ ul.pf-v6-c-list {
23300
23302
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
23301
23303
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
23302
23304
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
23303
- --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
23304
- --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
23305
- --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
23306
23305
  --pf-v6-c-page--BackgroundColor--glass: transparent;
23307
23306
  --pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
23308
- --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
23309
- --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
23310
- --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
23307
+ --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
23308
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--md);
23309
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--md);
23311
23310
  --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
23312
23311
  --pf-v6-c-page__sidebar-main--PaddingInlineStart--glass: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
23313
23312
  --pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
23314
- --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--sm) * -1);
23315
- --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-t--global--spacer--md);
23316
- --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-t--global--spacer--md);
23313
+ --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--xs) * -1);
23314
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
23315
+ --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
23317
23316
  --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
23318
23317
  --pf-v6-c-page__sidebar-main--BackgroundColor--glass: var(--pf-v6-c-page__sidebar--BackgroundColor);
23319
23318
  --pf-v6-c-page__sidebar-main--BackdropFilter--glass: var(--pf-v6-c-page__sidebar--BackdropFilter);
@@ -23324,9 +23323,11 @@ ul.pf-v6-c-list {
23324
23323
  --pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass: 0;
23325
23324
  --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
23326
23325
  --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
23327
- --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
23328
- --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
23329
- --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
23326
+ --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--gutter--default);
23327
+ --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
23328
+ --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
23329
+ --pf-v6-c-page--m-dock__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
23330
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
23330
23331
  }
23331
23332
  :where(.pf-v6-theme-glass) .pf-v6-c-page {
23332
23333
  --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
@@ -23349,6 +23350,8 @@ ul.pf-v6-c-list {
23349
23350
  --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
23350
23351
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
23351
23352
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--MaxHeight--glass);
23353
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight--glass);
23354
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass);
23352
23355
  }
23353
23356
  @media (min-width: 75rem) {
23354
23357
  .pf-v6-c-page {