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

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 (19) 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/Button/button.css +3 -0
  5. package/components/Button/button.scss +4 -0
  6. package/components/Masthead/masthead.css +1 -1
  7. package/components/Masthead/masthead.scss +1 -1
  8. package/components/MenuToggle/menu-toggle.css +3 -0
  9. package/components/MenuToggle/menu-toggle.scss +4 -1
  10. package/components/Page/page.css +18 -17
  11. package/components/Page/page.scss +20 -21
  12. package/components/_index.css +25 -18
  13. package/package.json +1 -1
  14. package/patternfly-base-no-globals.css +2 -0
  15. package/patternfly-base.css +2 -0
  16. package/patternfly-no-globals.css +27 -18
  17. package/patternfly.css +27 -18
  18. package/patternfly.min.css +1 -1
  19. 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/Button/button.css CHANGED
@@ -860,6 +860,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
860
860
  justify-content: flex-start;
861
861
  width: 100%;
862
862
  }
863
+ .pf-v6-c-button.pf-m-docked .pf-v6-c-button__icon {
864
+ min-width: 1lh;
865
+ }
863
866
  @media (min-width: 62rem) {
864
867
  .pf-v6-c-button.pf-m-docked {
865
868
  justify-content: center;
package/components/Button/button.scss CHANGED
@@ -989,6 +989,10 @@
989
989
  justify-content: flex-start;
990
990
  width: 100%;
991
991
 
992
+ .#{$button}__icon {
993
+ min-width: 1lh;
994
+ }
995
+
992
996
  @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
993
997
  justify-content: center;
994
998
 
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/MenuToggle/menu-toggle.css CHANGED
@@ -357,6 +357,9 @@
357
357
  justify-content: flex-start;
358
358
  width: 100%;
359
359
  }
360
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__icon {
361
+ min-width: 1lh;
362
+ }
360
363
  @media (min-width: 62rem) {
361
364
  .pf-v6-c-menu-toggle.pf-m-docked {
362
365
  justify-content: center;
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -438,6 +438,10 @@
438
438
  justify-content: flex-start;
439
439
  width: 100%;
440
440
 
441
+ .#{$menu-toggle}__icon {
442
+ min-width: 1lh;
443
+ }
444
+
441
445
  @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
442
446
  justify-content: center;
443
447
  width: auto;
@@ -459,7 +463,6 @@
459
463
  display: revert;
460
464
  }
461
465
  }
462
-
463
466
  }
464
467
 
465
468
  // Register the property type for the custom property to be animatable
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
@@ -2483,6 +2483,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2483
2483
  justify-content: flex-start;
2484
2484
  width: 100%;
2485
2485
  }
2486
+ .pf-v6-c-button.pf-m-docked .pf-v6-c-button__icon {
2487
+ min-width: 1lh;
2488
+ }
2486
2489
  @media (min-width: 62rem) {
2487
2490
  .pf-v6-c-button.pf-m-docked {
2488
2491
  justify-content: center;
@@ -10672,7 +10675,7 @@ ul.pf-v6-c-list {
10672
10675
  --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--gutter--default);
10673
10676
  --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
10674
10677
  --pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
10675
- --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
10678
+ --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
10676
10679
  --pf-v6-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
10677
10680
  --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
10678
10681
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-t--global--spacer--md);
@@ -12303,6 +12306,9 @@ ul.pf-v6-c-list {
12303
12306
  justify-content: flex-start;
12304
12307
  width: 100%;
12305
12308
  }
12309
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__icon {
12310
+ min-width: 1lh;
12311
+ }
12306
12312
  @media (min-width: 62rem) {
12307
12313
  .pf-v6-c-menu-toggle.pf-m-docked {
12308
12314
  justify-content: center;
@@ -13698,11 +13704,6 @@ ul.pf-v6-c-list {
13698
13704
  .pf-v6-c-page {
13699
13705
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
13700
13706
  --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
13707
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
13707
13708
  --pf-v6-c-page__dock--Width: 15.625rem;
13708
13709
  --pf-v6-c-page__dock--desktop--Width: auto;
@@ -13721,6 +13722,11 @@ ul.pf-v6-c-list {
13721
13722
  --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
13722
13723
  --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
13724
  --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));
13725
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
13726
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
13727
+ --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
13728
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
13729
+ --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
13724
13730
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
13725
13731
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
13726
13732
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -13891,20 +13897,17 @@ ul.pf-v6-c-list {
13891
13897
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
13892
13898
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
13893
13899
  --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
13900
  --pf-v6-c-page--BackgroundColor--glass: transparent;
13898
13901
  --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);
13902
+ --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
13903
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--md);
13904
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--md);
13902
13905
  --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
13903
13906
  --pf-v6-c-page__sidebar-main--PaddingInlineStart--glass: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
13904
13907
  --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);
13908
+ --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--xs) * -1);
13909
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
13910
+ --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
13908
13911
  --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
13909
13912
  --pf-v6-c-page__sidebar-main--BackgroundColor--glass: var(--pf-v6-c-page__sidebar--BackgroundColor);
13910
13913
  --pf-v6-c-page__sidebar-main--BackdropFilter--glass: var(--pf-v6-c-page__sidebar--BackdropFilter);
@@ -13915,9 +13918,11 @@ ul.pf-v6-c-list {
13915
13918
  --pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass: 0;
13916
13919
  --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
13917
13920
  --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);
13921
+ --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--gutter--default);
13922
+ --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
13923
+ --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));
13924
+ --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));
13925
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
13921
13926
  }
13922
13927
  :where(.pf-v6-theme-glass) .pf-v6-c-page {
13923
13928
  --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
@@ -13940,6 +13945,8 @@ ul.pf-v6-c-list {
13940
13945
  --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
13941
13946
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
13942
13947
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--MaxHeight--glass);
13948
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight--glass);
13949
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass);
13943
13950
  }
13944
13951
  @media (min-width: 75rem) {
13945
13952
  .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.5",
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
  }
@@ -11737,6 +11739,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11737
11739
  justify-content: flex-start;
11738
11740
  width: 100%;
11739
11741
  }
11742
+ .pf-v6-c-button.pf-m-docked .pf-v6-c-button__icon {
11743
+ min-width: 1lh;
11744
+ }
11740
11745
  @media (min-width: 62rem) {
11741
11746
  .pf-v6-c-button.pf-m-docked {
11742
11747
  justify-content: center;
@@ -19926,7 +19931,7 @@ ul.pf-v6-c-list {
19926
19931
  --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--gutter--default);
19927
19932
  --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
19928
19933
  --pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
19929
- --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
19934
+ --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
19930
19935
  --pf-v6-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
19931
19936
  --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
19932
19937
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-t--global--spacer--md);
@@ -21557,6 +21562,9 @@ ul.pf-v6-c-list {
21557
21562
  justify-content: flex-start;
21558
21563
  width: 100%;
21559
21564
  }
21565
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__icon {
21566
+ min-width: 1lh;
21567
+ }
21560
21568
  @media (min-width: 62rem) {
21561
21569
  .pf-v6-c-menu-toggle.pf-m-docked {
21562
21570
  justify-content: center;
@@ -22952,11 +22960,6 @@ ul.pf-v6-c-list {
22952
22960
  .pf-v6-c-page {
22953
22961
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
22954
22962
  --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
22963
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
22961
22964
  --pf-v6-c-page__dock--Width: 15.625rem;
22962
22965
  --pf-v6-c-page__dock--desktop--Width: auto;
@@ -22975,6 +22978,11 @@ ul.pf-v6-c-list {
22975
22978
  --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
22976
22979
  --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
22980
  --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));
22981
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
22982
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
22983
+ --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
22984
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
22985
+ --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
22978
22986
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
22979
22987
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
22980
22988
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -23145,20 +23153,17 @@ ul.pf-v6-c-list {
23145
23153
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
23146
23154
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
23147
23155
  --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
23156
  --pf-v6-c-page--BackgroundColor--glass: transparent;
23152
23157
  --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);
23158
+ --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
23159
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--md);
23160
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--md);
23156
23161
  --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
23157
23162
  --pf-v6-c-page__sidebar-main--PaddingInlineStart--glass: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
23158
23163
  --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);
23164
+ --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--xs) * -1);
23165
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
23166
+ --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
23162
23167
  --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
23163
23168
  --pf-v6-c-page__sidebar-main--BackgroundColor--glass: var(--pf-v6-c-page__sidebar--BackgroundColor);
23164
23169
  --pf-v6-c-page__sidebar-main--BackdropFilter--glass: var(--pf-v6-c-page__sidebar--BackdropFilter);
@@ -23169,9 +23174,11 @@ ul.pf-v6-c-list {
23169
23174
  --pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass: 0;
23170
23175
  --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
23171
23176
  --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);
23177
+ --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--gutter--default);
23178
+ --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
23179
+ --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));
23180
+ --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));
23181
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
23175
23182
  }
23176
23183
  :where(.pf-v6-theme-glass) .pf-v6-c-page {
23177
23184
  --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
@@ -23194,6 +23201,8 @@ ul.pf-v6-c-list {
23194
23201
  --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
23195
23202
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
23196
23203
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--MaxHeight--glass);
23204
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight--glass);
23205
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass);
23197
23206
  }
23198
23207
  @media (min-width: 75rem) {
23199
23208
  .pf-v6-c-page {