@patternfly/patternfly 6.6.0-prerelease.2 → 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 (17) 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/Compass/compass.css +5 -1
  5. package/components/Compass/compass.scss +5 -1
  6. package/components/Masthead/masthead.css +1 -1
  7. package/components/Masthead/masthead.scss +1 -1
  8. package/components/Page/page.css +23 -18
  9. package/components/Page/page.scss +27 -22
  10. package/components/_index.css +29 -20
  11. package/package.json +2 -2
  12. package/patternfly-base-no-globals.css +2 -0
  13. package/patternfly-base.css +2 -0
  14. package/patternfly-no-globals.css +31 -20
  15. package/patternfly.css +31 -20
  16. package/patternfly.min.css +1 -1
  17. 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/Compass/compass.css CHANGED
@@ -315,15 +315,18 @@
315
315
  inset-inline-start: 0;
316
316
  z-index: var(--pf-v6-c-compass__dock--ZIndex);
317
317
  display: flex;
318
+ visibility: hidden;
318
319
  flex-direction: column;
319
320
  grid-area: dock;
320
321
  width: var(--pf-v6-c-compass__dock--Width);
321
322
  translate: -100% 0;
322
- transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide);
323
+ transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide), visibility 0s var(--pf-v6-c-compass__dock--TransitionDuration--slide);
323
324
  }
324
325
  .pf-v6-c-compass__dock.pf-m-expanded {
325
326
  --pf-v6-c-compass__dock--TransitionDuration--slide: var(--pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide);
327
+ visibility: visible;
326
328
  translate: 0;
329
+ transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide), visibility 0s 0s;
327
330
  }
328
331
  @media (min-width: 62rem) {
329
332
  .pf-v6-c-compass__dock {
@@ -331,6 +334,7 @@
331
334
  --pf-v6-c-compass__dock-main--BorderInlineEndColor: var(--pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor);
332
335
  position: revert;
333
336
  inset: revert;
337
+ visibility: revert;
334
338
  width: auto;
335
339
  translate: 0;
336
340
  }
package/components/Compass/compass.scss CHANGED
@@ -324,16 +324,19 @@
324
324
  inset-inline-start: 0;
325
325
  z-index: var(--#{$compass}__dock--ZIndex);
326
326
  display: flex;
327
+ visibility: hidden;
327
328
  flex-direction: column;
328
329
  grid-area: dock;
329
330
  width: var(--#{$compass}__dock--Width);
330
331
  translate: -100% 0;
331
- transition: translate var(--#{$compass}__dock--TransitionDuration--slide) var(--#{$compass}__dock--TransitionTimingFunction--slide);
332
+ transition: translate var(--#{$compass}__dock--TransitionDuration--slide) var(--#{$compass}__dock--TransitionTimingFunction--slide), visibility 0s var(--#{$compass}__dock--TransitionDuration--slide);
332
333
 
333
334
  &.pf-m-expanded {
334
335
  --#{$compass}__dock--TransitionDuration--slide: var(--#{$compass}__dock--m-expanded--TransitionDuration--slide);
335
336
 
337
+ visibility: visible;
336
338
  translate: 0;
339
+ transition: translate var(--#{$compass}__dock--TransitionDuration--slide) var(--#{$compass}__dock--TransitionTimingFunction--slide), visibility 0s 0s;
337
340
  }
338
341
 
339
342
  @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
@@ -342,6 +345,7 @@
342
345
 
343
346
  position: revert;
344
347
  inset: revert;
348
+ visibility: revert;
345
349
  width: auto;
346
350
  translate: 0;
347
351
  }
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 {
@@ -394,10 +395,11 @@
394
395
  inset-inline-start: 0;
395
396
  z-index: var(--pf-v6-c-page__dock--ZIndex);
396
397
  display: flex;
398
+ visibility: hidden;
397
399
  flex-direction: column;
398
400
  grid-area: dock;
399
401
  width: var(--pf-v6-c-page__dock--Width);
400
- transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide);
402
+ transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide), visibility 0s var(--pf-v6-c-page__dock--TransitionDuration--slide);
401
403
  translate: -100% 0;
402
404
  }
403
405
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__dock {
@@ -406,7 +408,9 @@
406
408
 
407
409
  .pf-v6-c-page__dock.pf-m-expanded {
408
410
  --pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-v6-c-page__dock--m-expanded--TransitionDuration--slide);
411
+ visibility: visible;
409
412
  translate: 0;
413
+ transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide), visibility 0s 0s;
410
414
  }
411
415
  @media (min-width: 62rem) {
412
416
  .pf-v6-c-page__dock {
@@ -414,6 +418,7 @@
414
418
  --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
415
419
  position: revert;
416
420
  inset: revert;
421
+ visibility: revert;
417
422
  width: auto;
418
423
  translate: 0;
419
424
  }
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) {
@@ -425,10 +424,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
425
424
  inset-inline-start: 0;
426
425
  z-index: var(--#{$page}__dock--ZIndex);
427
426
  display: flex;
427
+ visibility: hidden;
428
428
  flex-direction: column;
429
429
  grid-area: dock;
430
430
  width: var(--#{$page}__dock--Width);
431
- transition: translate var(--#{$page}__dock--TransitionDuration--slide) var(--#{$page}__dock--TransitionTimingFunction--slide);
431
+ transition: translate var(--#{$page}__dock--TransitionDuration--slide) var(--#{$page}__dock--TransitionTimingFunction--slide), visibility 0s var(--#{$page}__dock--TransitionDuration--slide);
432
432
 
433
433
  @include pf-v6-bidirectional-style(
434
434
  $prop: translate,
@@ -439,7 +439,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
439
439
  &.pf-m-expanded {
440
440
  --#{$page}__dock--TransitionDuration--slide: var(--#{$page}__dock--m-expanded--TransitionDuration--slide);
441
441
 
442
+ visibility: visible;
442
443
  translate: 0;
444
+ transition:
445
+ translate var(--#{$page}__dock--TransitionDuration--slide) var(--#{$page}__dock--TransitionTimingFunction--slide),
446
+ visibility 0s 0s;
443
447
  }
444
448
 
445
449
  @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
@@ -448,6 +452,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
448
452
 
449
453
  position: revert;
450
454
  inset: revert;
455
+ visibility: revert;
451
456
  width: auto;
452
457
  translate: 0;
453
458
  }
package/components/_index.css CHANGED
@@ -4003,15 +4003,18 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
4003
4003
  inset-inline-start: 0;
4004
4004
  z-index: var(--pf-v6-c-compass__dock--ZIndex);
4005
4005
  display: flex;
4006
+ visibility: hidden;
4006
4007
  flex-direction: column;
4007
4008
  grid-area: dock;
4008
4009
  width: var(--pf-v6-c-compass__dock--Width);
4009
4010
  translate: -100% 0;
4010
- transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide);
4011
+ transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide), visibility 0s var(--pf-v6-c-compass__dock--TransitionDuration--slide);
4011
4012
  }
4012
4013
  .pf-v6-c-compass__dock.pf-m-expanded {
4013
4014
  --pf-v6-c-compass__dock--TransitionDuration--slide: var(--pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide);
4015
+ visibility: visible;
4014
4016
  translate: 0;
4017
+ transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide), visibility 0s 0s;
4015
4018
  }
4016
4019
  @media (min-width: 62rem) {
4017
4020
  .pf-v6-c-compass__dock {
@@ -4019,6 +4022,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
4019
4022
  --pf-v6-c-compass__dock-main--BorderInlineEndColor: var(--pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor);
4020
4023
  position: revert;
4021
4024
  inset: revert;
4025
+ visibility: revert;
4022
4026
  width: auto;
4023
4027
  translate: 0;
4024
4028
  }
@@ -10668,7 +10672,7 @@ ul.pf-v6-c-list {
10668
10672
  --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--gutter--default);
10669
10673
  --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
10670
10674
  --pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
10671
- --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);
10672
10676
  --pf-v6-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
10673
10677
  --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
10674
10678
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-t--global--spacer--md);
@@ -13694,11 +13698,6 @@ ul.pf-v6-c-list {
13694
13698
  .pf-v6-c-page {
13695
13699
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
13696
13700
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
13697
- --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
13698
- --pf-v6-c-page--m-dock__main-container--MarginBlockStart: 0;
13699
- --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--lg);
13700
- --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
13701
- --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
13702
13701
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
13703
13702
  --pf-v6-c-page__dock--Width: 15.625rem;
13704
13703
  --pf-v6-c-page__dock--desktop--Width: auto;
@@ -13717,6 +13716,11 @@ ul.pf-v6-c-list {
13717
13716
  --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
13718
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));
13719
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;
13720
13724
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
13721
13725
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
13722
13726
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -13887,20 +13891,17 @@ ul.pf-v6-c-list {
13887
13891
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
13888
13892
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
13889
13893
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
13890
- --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
13891
- --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
13892
- --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
13893
13894
  --pf-v6-c-page--BackgroundColor--glass: transparent;
13894
13895
  --pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
13895
- --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
13896
- --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
13897
- --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);
13898
13899
  --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
13899
13900
  --pf-v6-c-page__sidebar-main--PaddingInlineStart--glass: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
13900
13901
  --pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
13901
- --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--sm) * -1);
13902
- --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-t--global--spacer--md);
13903
- --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));
13904
13905
  --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
13905
13906
  --pf-v6-c-page__sidebar-main--BackgroundColor--glass: var(--pf-v6-c-page__sidebar--BackgroundColor);
13906
13907
  --pf-v6-c-page__sidebar-main--BackdropFilter--glass: var(--pf-v6-c-page__sidebar--BackdropFilter);
@@ -13911,9 +13912,11 @@ ul.pf-v6-c-list {
13911
13912
  --pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass: 0;
13912
13913
  --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
13913
13914
  --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
13914
- --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
13915
- --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
13916
- --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);
13917
13920
  }
13918
13921
  :where(.pf-v6-theme-glass) .pf-v6-c-page {
13919
13922
  --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
@@ -13936,6 +13939,8 @@ ul.pf-v6-c-list {
13936
13939
  --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
13937
13940
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
13938
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);
13939
13944
  }
13940
13945
  @media (min-width: 75rem) {
13941
13946
  .pf-v6-c-page {
@@ -14087,10 +14092,11 @@ ul.pf-v6-c-list {
14087
14092
  inset-inline-start: 0;
14088
14093
  z-index: var(--pf-v6-c-page__dock--ZIndex);
14089
14094
  display: flex;
14095
+ visibility: hidden;
14090
14096
  flex-direction: column;
14091
14097
  grid-area: dock;
14092
14098
  width: var(--pf-v6-c-page__dock--Width);
14093
- transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide);
14099
+ transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide), visibility 0s var(--pf-v6-c-page__dock--TransitionDuration--slide);
14094
14100
  translate: -100% 0;
14095
14101
  }
14096
14102
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__dock {
@@ -14099,7 +14105,9 @@ ul.pf-v6-c-list {
14099
14105
 
14100
14106
  .pf-v6-c-page__dock.pf-m-expanded {
14101
14107
  --pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-v6-c-page__dock--m-expanded--TransitionDuration--slide);
14108
+ visibility: visible;
14102
14109
  translate: 0;
14110
+ transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide), visibility 0s 0s;
14103
14111
  }
14104
14112
  @media (min-width: 62rem) {
14105
14113
  .pf-v6-c-page__dock {
@@ -14107,6 +14115,7 @@ ul.pf-v6-c-list {
14107
14115
  --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
14108
14116
  position: revert;
14109
14117
  inset: revert;
14118
+ visibility: revert;
14110
14119
  width: auto;
14111
14120
  translate: 0;
14112
14121
  }
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.2",
4
+ "version": "6.6.0-prerelease.4",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -71,7 +71,7 @@
71
71
  "@commitlint/config-conventional": "^19.1.0",
72
72
  "@fortawesome/fontawesome": "^1.1.8",
73
73
  "@octokit/rest": "^20.1.0",
74
- "@patternfly/documentation-framework": "6.44.0",
74
+ "@patternfly/documentation-framework": "6.44.1",
75
75
  "@patternfly/patternfly-a11y": "5.1.0",
76
76
  "@patternfly/react-code-editor": "6.5.1",
77
77
  "@patternfly/react-core": "6.5.1",
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
  }