@patternfly/patternfly 6.5.0-prerelease.90 → 6.5.0-prerelease.92

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/tokens/tokens-local-felt-glass-dark.scss +2 -2
  2. package/base/tokens/tokens-local-felt-glass.scss +2 -2
  3. package/base/tokens/tokens-local-glass-dark.scss +2 -2
  4. package/base/tokens/tokens-local-glass.scss +2 -2
  5. package/base/tokens/tokens-local.scss +1 -1
  6. package/components/Compass/compass.css +24 -0
  7. package/components/Compass/compass.scss +24 -0
  8. package/components/Drawer/drawer.css +10 -6
  9. package/components/Drawer/drawer.scss +12 -9
  10. package/components/_index.css +34 -6
  11. package/docs/demos/Compass/examples/Compass.md +12 -4
  12. package/package.json +1 -1
  13. package/patternfly-no-globals.css +34 -6
  14. package/patternfly.css +34 -6
  15. package/patternfly.min.css +1 -1
  16. package/patternfly.min.css.map +1 -1
  17. package/sass-utilities/scss-variables.scss +3 -0
package/base/tokens/tokens-local-felt-glass-dark.scss CHANGED
@@ -1,5 +1,5 @@
1
- @use '../../sass-utilities/init' as *;
1
+ @use '../../sass-utilities/' as *;
2
2
 
3
3
  @mixin pf-v6-tokens {
4
- --pf-t--global--background--image--default: var(--pf-t--global--background--image--felt--glass--dark, url("./assets/images/Felt-Bkg-Generic-Dark.svg"));
4
+ --pf-t--global--background--image--default: var(--pf-t--global--background--image--felt--glass--dark, url("#{$pf-v6-global--image-path}/Felt-Bkg-Generic-Dark.svg"));
5
5
  }
package/base/tokens/tokens-local-felt-glass.scss CHANGED
@@ -1,5 +1,5 @@
1
- @use '../../sass-utilities/init' as *;
1
+ @use '../../sass-utilities/' as *;
2
2
 
3
3
  @mixin pf-v6-tokens {
4
- --pf-t--global--background--image--default: var(--pf-t--global--background--image--felt--glass, url("./assets/images/Felt-Bkg-Generic-Light.svg"));
4
+ --pf-t--global--background--image--default: var(--pf-t--global--background--image--felt--glass, url("#{$pf-v6-global--image-path}/Felt-Bkg-Generic-Light.svg"));
5
5
  }
package/base/tokens/tokens-local-glass-dark.scss CHANGED
@@ -1,5 +1,5 @@
1
- @use '../../sass-utilities/init' as *;
1
+ @use '../../sass-utilities/' as *;
2
2
 
3
3
  @mixin pf-v6-tokens {
4
- --pf-t--global--background--image--default: var(--pf-t--global--background--image--glass--dark, url("./assets/images/PF-Bkg-Generic-Dark.svg"));
4
+ --pf-t--global--background--image--default: var(--pf-t--global--background--image--glass--dark, url("#{$pf-v6-global--image-path}/PF-Bkg-Generic-Dark.svg"));
5
5
  }
package/base/tokens/tokens-local-glass.scss CHANGED
@@ -1,6 +1,6 @@
1
- @use '../../sass-utilities/init' as *;
1
+ @use '../../sass-utilities/' as *;
2
2
 
3
3
  @mixin pf-v6-tokens {
4
- --pf-t--global--background--image--default: var(--pf-t--global--background--image--glass, url("./assets/images/PF-Bkg-Generic-Light.svg"));
4
+ --pf-t--global--background--image--default: var(--pf-t--global--background--image--glass, url("#{$pf-v6-global--image-path}/PF-Bkg-Generic-Light.svg"));
5
5
  --pf-t--global--box-shadow--glass--default: var(--pf-t--global--box-shadow--md);
6
6
  }
package/base/tokens/tokens-local.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use '../../sass-utilities/init' as *;
1
+ @use '../../sass-utilities/' as *;
2
2
 
3
3
  // LOCAL TOKENS
4
4
 
package/components/Compass/compass.css CHANGED
@@ -70,9 +70,25 @@
70
70
  }
71
71
  .pf-v6-c-compass {
72
72
  --pf-v6-c-compass--BackgroundColor--glass: transparent;
73
+ --pf-v6-c-compass__content--MarginBlockStart--glass: calc(var(--pf-v6-c-compass__content--PaddingBlockStart--glass) * -1);
74
+ --pf-v6-c-compass__content--MarginBlockEnd--glass: calc(var(--pf-v6-c-compass__content--PaddingBlockEnd--glass) * -1);
75
+ --pf-v6-c-compass__content--MarginInlineStart--glass: calc(var(--pf-v6-c-compass__content--PaddingInlineStart--glass) * -1);
76
+ --pf-v6-c-compass__content--MarginInlineEnd--glass: calc(var(--pf-v6-c-compass__content--PaddingInlineEnd--glass) * -1);
77
+ --pf-v6-c-compass__content--PaddingBlockStart--glass: var(--pf-t--global--spacer--sm);
78
+ --pf-v6-c-compass__content--PaddingBlockEnd--glass: var(--pf-t--global--spacer--md);
79
+ --pf-v6-c-compass__content--PaddingInlineStart--glass: var(--pf-t--global--spacer--md);
80
+ --pf-v6-c-compass__content--PaddingInlineEnd--glass: var(--pf-t--global--spacer--md);
73
81
  }
74
82
  :where(.pf-v6-theme-glass) .pf-v6-c-compass {
75
83
  --pf-v6-c-compass--BackgroundColor: var(--pf-v6-c-compass--BackgroundColor--glass);
84
+ --pf-v6-c-compass__content--MarginBlockStart: var(--pf-v6-c-compass__content--MarginBlockStart--glass);
85
+ --pf-v6-c-compass__content--MarginBlockEnd: var(--pf-v6-c-compass__content--MarginBlockEnd--glass);
86
+ --pf-v6-c-compass__content--MarginInlineStart: var(--pf-v6-c-compass__content--MarginInlineStart--glass);
87
+ --pf-v6-c-compass__content--MarginInlineEnd: var(--pf-v6-c-compass__content--MarginInlineEnd--glass);
88
+ --pf-v6-c-compass__content--PaddingBlockStart: var(--pf-v6-c-compass__content--PaddingBlockStart--glass);
89
+ --pf-v6-c-compass__content--PaddingBlockEnd: var(--pf-v6-c-compass__content--PaddingBlockEnd--glass);
90
+ --pf-v6-c-compass__content--PaddingInlineStart: var(--pf-v6-c-compass__content--PaddingInlineStart--glass);
91
+ --pf-v6-c-compass__content--PaddingInlineEnd: var(--pf-v6-c-compass__content--PaddingInlineEnd--glass);
76
92
  }
77
93
 
78
94
  .pf-v6-c-compass {
@@ -369,6 +385,14 @@
369
385
  flex: 1 0 0;
370
386
  flex-direction: column;
371
387
  min-height: 0;
388
+ padding-block-start: var(--pf-v6-c-compass__content--PaddingBlockStart, 0);
389
+ padding-block-end: var(--pf-v6-c-compass__content--PaddingBlockEnd, 0);
390
+ padding-inline-start: var(--pf-v6-c-compass__content--PaddingInlineStart, 0);
391
+ padding-inline-end: var(--pf-v6-c-compass__content--PaddingInlineEnd, 0);
392
+ margin-block-start: var(--pf-v6-c-compass__content--MarginBlockStart, 0);
393
+ margin-block-end: var(--pf-v6-c-compass__content--MarginBlockEnd, 0);
394
+ margin-inline-start: var(--pf-v6-c-compass__content--MarginInlineStart, 0);
395
+ margin-inline-end: var(--pf-v6-c-compass__content--MarginInlineEnd, 0);
372
396
  overflow: auto;
373
397
  }
374
398
  .pf-v6-c-compass__content > *:last-child {
package/components/Compass/compass.scss CHANGED
@@ -80,9 +80,25 @@
80
80
 
81
81
  // Glass theme
82
82
  --#{$compass}--BackgroundColor--glass: transparent;
83
+ --#{$compass}__content--MarginBlockStart--glass: calc(var(--#{$compass}__content--PaddingBlockStart--glass) * -1);
84
+ --#{$compass}__content--MarginBlockEnd--glass: calc(var(--#{$compass}__content--PaddingBlockEnd--glass) * -1);
85
+ --#{$compass}__content--MarginInlineStart--glass: calc(var(--#{$compass}__content--PaddingInlineStart--glass) * -1);
86
+ --#{$compass}__content--MarginInlineEnd--glass: calc(var(--#{$compass}__content--PaddingInlineEnd--glass) * -1);
87
+ --#{$compass}__content--PaddingBlockStart--glass: var(--pf-t--global--spacer--sm);
88
+ --#{$compass}__content--PaddingBlockEnd--glass: var(--pf-t--global--spacer--md);
89
+ --#{$compass}__content--PaddingInlineStart--glass: var(--pf-t--global--spacer--md);
90
+ --#{$compass}__content--PaddingInlineEnd--glass: var(--pf-t--global--spacer--md);
83
91
 
84
92
  :where(.pf-v6-theme-glass) & {
85
93
  --#{$compass}--BackgroundColor: var(--#{$compass}--BackgroundColor--glass);
94
+ --#{$compass}__content--MarginBlockStart: var(--#{$compass}__content--MarginBlockStart--glass);
95
+ --#{$compass}__content--MarginBlockEnd: var(--#{$compass}__content--MarginBlockEnd--glass);
96
+ --#{$compass}__content--MarginInlineStart: var(--#{$compass}__content--MarginInlineStart--glass);
97
+ --#{$compass}__content--MarginInlineEnd: var(--#{$compass}__content--MarginInlineEnd--glass);
98
+ --#{$compass}__content--PaddingBlockStart: var(--#{$compass}__content--PaddingBlockStart--glass);
99
+ --#{$compass}__content--PaddingBlockEnd: var(--#{$compass}__content--PaddingBlockEnd--glass);
100
+ --#{$compass}__content--PaddingInlineStart: var(--#{$compass}__content--PaddingInlineStart--glass);
101
+ --#{$compass}__content--PaddingInlineEnd: var(--#{$compass}__content--PaddingInlineEnd--glass);
86
102
  }
87
103
  }
88
104
 
@@ -382,6 +398,14 @@
382
398
  flex: 1 0 0;
383
399
  flex-direction: column;
384
400
  min-height: 0;
401
+ padding-block-start: var(--#{$compass}__content--PaddingBlockStart, 0);
402
+ padding-block-end: var(--#{$compass}__content--PaddingBlockEnd, 0);
403
+ padding-inline-start: var(--#{$compass}__content--PaddingInlineStart, 0);
404
+ padding-inline-end: var(--#{$compass}__content--PaddingInlineEnd, 0);
405
+ margin-block-start: var(--#{$compass}__content--MarginBlockStart, 0);
406
+ margin-block-end: var(--#{$compass}__content--MarginBlockEnd, 0);
407
+ margin-inline-start: var(--#{$compass}__content--MarginInlineStart, 0);
408
+ margin-inline-end: var(--#{$compass}__content--MarginInlineEnd, 0);
385
409
  overflow: auto;
386
410
 
387
411
  > *:last-child {
package/components/Drawer/drawer.css CHANGED
@@ -16,7 +16,7 @@
16
16
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer__panel--after--Width);
17
17
  --pf-v6-c-drawer__panel--BorderInlineEndWidth: 0;
18
18
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
19
- --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19
+ --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--floating--default);
20
20
  --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
21
21
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
22
22
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -35,6 +35,7 @@
35
35
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
36
36
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
37
37
  --pf-v6-c-drawer__panel--md--FlexBasis--max: 100%;
38
+ --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-t--global--background--color--primary--default);
38
39
  --pf-v6-c-drawer__panel--xl--MinWidth: 28.125rem;
39
40
  --pf-v6-c-drawer__panel--xl--FlexBasis: 28.125rem;
40
41
  --pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
@@ -227,11 +228,6 @@
227
228
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
228
229
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
229
230
  }
230
- .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass, .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass {
231
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
232
- --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
233
- backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
234
- }
235
231
  .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
236
232
  order: 0;
237
233
  margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
@@ -564,9 +560,17 @@
564
560
  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
565
561
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
566
562
  }
563
+ .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
564
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--md--BackgroundColor);
565
+ }
567
566
  :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass), :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass) {
568
567
  --pf-v6-c-drawer__panel--BackgroundColor: transparent;
569
568
  }
569
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass {
570
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
571
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
572
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
573
+ }
570
574
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
571
575
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
572
576
  }
package/components/Drawer/drawer.scss CHANGED
@@ -30,7 +30,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
30
30
  --#{$drawer}__panel--BorderInlineStartWidth: var(--#{$drawer}__panel--after--Width); // default is left side
31
31
  --#{$drawer}__panel--BorderInlineEndWidth: 0;
32
32
  --#{$drawer}__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
33
- --#{$drawer}__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
33
+ --#{$drawer}__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--floating--default);
34
34
  --#{$drawer}__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
35
35
  --#{$drawer}__panel--RowGap: var(--pf-t--global--spacer--sm);
36
36
  --#{$drawer}__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -49,6 +49,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
49
49
  --#{$drawer}__panel--md--FlexBasis--min: #{pf-size-prem(24px)};
50
50
  --#{$drawer}__panel--md--FlexBasis: 50%;
51
51
  --#{$drawer}__panel--md--FlexBasis--max: 100%;
52
+ --#{$drawer}__panel--m-inline--md--BackgroundColor: var(--pf-t--global--background--color--primary--default);
52
53
  --#{$drawer}__panel--xl--MinWidth: #{pf-size-prem(450px)};
53
54
  --#{$drawer}__panel--xl--FlexBasis: #{pf-size-prem(450px)};
54
55
  --#{$drawer}--m-panel-bottom__panel--md--MinHeight: 50%;
@@ -261,13 +262,6 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
261
262
  > .#{$drawer}__main > .#{$drawer}__panel:not(.pf-m-no-border, .pf-m-resizable) {
262
263
  padding-inline-start: var(--#{$drawer}--m-inline__panel--PaddingInlineStart);
263
264
  }
264
-
265
- > .#{$drawer}__main > .#{$drawer}__panel.pf-m-glass {
266
- --#{$drawer}__panel--BackgroundColor: var(--#{$drawer}__panel--m-glass--BackgroundColor);
267
- --#{$drawer}__panel--BorderColor: var(--#{$drawer}__panel--m-glass--BorderColor);
268
-
269
- backdrop-filter: var(--#{$drawer}__panel--m-glass--BackdropFilter);
270
- }
271
265
  }
272
266
 
273
267
  &.pf-m-panel-left > .#{$drawer}__main {
@@ -662,11 +656,20 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
662
656
 
663
657
  &.pf-m-inline,
664
658
  &.pf-m-static {
659
+ --#{$drawer}__panel--BackgroundColor: var(--#{$drawer}__panel--m-inline--md--BackgroundColor);
660
+
665
661
  > .#{$drawer}__main > .#{$drawer}__panel {
666
- @at-root :where(:root:not(.pf-v6-theme-glass)) &.pf-m-plain,
662
+ :where(:root:not(.pf-v6-theme-glass)) &.pf-m-plain,
667
663
  :where(:root.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass) {
668
664
  --#{$drawer}__panel--BackgroundColor: transparent;
669
665
  }
666
+
667
+ :where(:root.pf-v6-theme-glass) &.pf-m-glass {
668
+ --#{$drawer}__panel--BackgroundColor: var(--#{$drawer}__panel--m-glass--BackgroundColor);
669
+ --#{$drawer}__panel--BorderColor: var(--#{$drawer}__panel--m-glass--BorderColor);
670
+
671
+ backdrop-filter: var(--#{$drawer}__panel--m-glass--BackdropFilter);
672
+ }
670
673
  }
671
674
  }
672
675
 
package/components/_index.css CHANGED
@@ -3754,9 +3754,25 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3754
3754
  }
3755
3755
  .pf-v6-c-compass {
3756
3756
  --pf-v6-c-compass--BackgroundColor--glass: transparent;
3757
+ --pf-v6-c-compass__content--MarginBlockStart--glass: calc(var(--pf-v6-c-compass__content--PaddingBlockStart--glass) * -1);
3758
+ --pf-v6-c-compass__content--MarginBlockEnd--glass: calc(var(--pf-v6-c-compass__content--PaddingBlockEnd--glass) * -1);
3759
+ --pf-v6-c-compass__content--MarginInlineStart--glass: calc(var(--pf-v6-c-compass__content--PaddingInlineStart--glass) * -1);
3760
+ --pf-v6-c-compass__content--MarginInlineEnd--glass: calc(var(--pf-v6-c-compass__content--PaddingInlineEnd--glass) * -1);
3761
+ --pf-v6-c-compass__content--PaddingBlockStart--glass: var(--pf-t--global--spacer--sm);
3762
+ --pf-v6-c-compass__content--PaddingBlockEnd--glass: var(--pf-t--global--spacer--md);
3763
+ --pf-v6-c-compass__content--PaddingInlineStart--glass: var(--pf-t--global--spacer--md);
3764
+ --pf-v6-c-compass__content--PaddingInlineEnd--glass: var(--pf-t--global--spacer--md);
3757
3765
  }
3758
3766
  :where(.pf-v6-theme-glass) .pf-v6-c-compass {
3759
3767
  --pf-v6-c-compass--BackgroundColor: var(--pf-v6-c-compass--BackgroundColor--glass);
3768
+ --pf-v6-c-compass__content--MarginBlockStart: var(--pf-v6-c-compass__content--MarginBlockStart--glass);
3769
+ --pf-v6-c-compass__content--MarginBlockEnd: var(--pf-v6-c-compass__content--MarginBlockEnd--glass);
3770
+ --pf-v6-c-compass__content--MarginInlineStart: var(--pf-v6-c-compass__content--MarginInlineStart--glass);
3771
+ --pf-v6-c-compass__content--MarginInlineEnd: var(--pf-v6-c-compass__content--MarginInlineEnd--glass);
3772
+ --pf-v6-c-compass__content--PaddingBlockStart: var(--pf-v6-c-compass__content--PaddingBlockStart--glass);
3773
+ --pf-v6-c-compass__content--PaddingBlockEnd: var(--pf-v6-c-compass__content--PaddingBlockEnd--glass);
3774
+ --pf-v6-c-compass__content--PaddingInlineStart: var(--pf-v6-c-compass__content--PaddingInlineStart--glass);
3775
+ --pf-v6-c-compass__content--PaddingInlineEnd: var(--pf-v6-c-compass__content--PaddingInlineEnd--glass);
3760
3776
  }
3761
3777
 
3762
3778
  .pf-v6-c-compass {
@@ -4053,6 +4069,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
4053
4069
  flex: 1 0 0;
4054
4070
  flex-direction: column;
4055
4071
  min-height: 0;
4072
+ padding-block-start: var(--pf-v6-c-compass__content--PaddingBlockStart, 0);
4073
+ padding-block-end: var(--pf-v6-c-compass__content--PaddingBlockEnd, 0);
4074
+ padding-inline-start: var(--pf-v6-c-compass__content--PaddingInlineStart, 0);
4075
+ padding-inline-end: var(--pf-v6-c-compass__content--PaddingInlineEnd, 0);
4076
+ margin-block-start: var(--pf-v6-c-compass__content--MarginBlockStart, 0);
4077
+ margin-block-end: var(--pf-v6-c-compass__content--MarginBlockEnd, 0);
4078
+ margin-inline-start: var(--pf-v6-c-compass__content--MarginInlineStart, 0);
4079
+ margin-inline-end: var(--pf-v6-c-compass__content--MarginInlineEnd, 0);
4056
4080
  overflow: auto;
4057
4081
  }
4058
4082
  .pf-v6-c-compass__content > *:last-child {
@@ -6380,7 +6404,7 @@ ul) {
6380
6404
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer__panel--after--Width);
6381
6405
  --pf-v6-c-drawer__panel--BorderInlineEndWidth: 0;
6382
6406
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
6383
- --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
6407
+ --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--floating--default);
6384
6408
  --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
6385
6409
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
6386
6410
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -6399,6 +6423,7 @@ ul) {
6399
6423
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
6400
6424
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6401
6425
  --pf-v6-c-drawer__panel--md--FlexBasis--max: 100%;
6426
+ --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-t--global--background--color--primary--default);
6402
6427
  --pf-v6-c-drawer__panel--xl--MinWidth: 28.125rem;
6403
6428
  --pf-v6-c-drawer__panel--xl--FlexBasis: 28.125rem;
6404
6429
  --pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
@@ -6591,11 +6616,6 @@ ul) {
6591
6616
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
6592
6617
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
6593
6618
  }
6594
- .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass, .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass {
6595
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
6596
- --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
6597
- backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
6598
- }
6599
6619
  .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6600
6620
  order: 0;
6601
6621
  margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
@@ -6928,9 +6948,17 @@ ul) {
6928
6948
  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
6929
6949
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
6930
6950
  }
6951
+ .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
6952
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--md--BackgroundColor);
6953
+ }
6931
6954
  :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass), :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass) {
6932
6955
  --pf-v6-c-drawer__panel--BackgroundColor: transparent;
6933
6956
  }
6957
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass {
6958
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
6959
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
6960
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
6961
+ }
6934
6962
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6935
6963
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
6936
6964
  }
package/docs/demos/Compass/examples/Compass.md CHANGED
@@ -8458,7 +8458,9 @@ This demo showcases how you can position a side-panel drawer on top of the other
8458
8458
  </div>
8459
8459
  </div>
8460
8460
  <div class="pf-v6-c-compass__content">
8461
- <div class="pf-v6-c-panel pf-m-glass">
8461
+ <div
8462
+ class="pf-v6-c-panel pf-m-glass pf-m-scrollable-auto-height pf-m-scrollable"
8463
+ >
8462
8464
  <div class="pf-v6-c-panel__main">
8463
8465
  <div class="pf-v6-c-panel__main-body">[so much room for activities]</div>
8464
8466
  </div>
@@ -9027,7 +9029,9 @@ This demo showcases how you can position a side-panel drawer on top of the other
9027
9029
  </div>
9028
9030
  </div>
9029
9031
  <div class="pf-v6-c-compass__content">
9030
- <div class="pf-v6-c-panel pf-m-glass">
9032
+ <div
9033
+ class="pf-v6-c-panel pf-m-glass pf-m-scrollable-auto-height pf-m-scrollable"
9034
+ >
9031
9035
  <div class="pf-v6-c-panel__main">
9032
9036
  <div class="pf-v6-c-panel__main-body">[so much room for activities]</div>
9033
9037
  </div>
@@ -9596,7 +9600,9 @@ This demo showcases how you can position a side-panel drawer on top of the other
9596
9600
  </div>
9597
9601
  </div>
9598
9602
  <div class="pf-v6-c-compass__content">
9599
- <div class="pf-v6-c-panel pf-m-glass">
9603
+ <div
9604
+ class="pf-v6-c-panel pf-m-glass pf-m-scrollable-auto-height pf-m-scrollable"
9605
+ >
9600
9606
  <div class="pf-v6-c-panel__main">
9601
9607
  <div class="pf-v6-c-panel__main-body">[so much room for activities]</div>
9602
9608
  </div>
@@ -10165,7 +10171,9 @@ This demo showcases how you can position a side-panel drawer on top of the other
10165
10171
  </div>
10166
10172
  </div>
10167
10173
  <div class="pf-v6-c-compass__content">
10168
- <div class="pf-v6-c-panel pf-m-glass">
10174
+ <div
10175
+ class="pf-v6-c-panel pf-m-glass pf-m-scrollable-auto-height pf-m-scrollable"
10176
+ >
10169
10177
  <div class="pf-v6-c-panel__main">
10170
10178
  <div class="pf-v6-c-panel__main-body">[so much room for activities]</div>
10171
10179
  </div>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.90",
4
+ "version": "6.5.0-prerelease.92",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -12905,9 +12905,25 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12905
12905
  }
12906
12906
  .pf-v6-c-compass {
12907
12907
  --pf-v6-c-compass--BackgroundColor--glass: transparent;
12908
+ --pf-v6-c-compass__content--MarginBlockStart--glass: calc(var(--pf-v6-c-compass__content--PaddingBlockStart--glass) * -1);
12909
+ --pf-v6-c-compass__content--MarginBlockEnd--glass: calc(var(--pf-v6-c-compass__content--PaddingBlockEnd--glass) * -1);
12910
+ --pf-v6-c-compass__content--MarginInlineStart--glass: calc(var(--pf-v6-c-compass__content--PaddingInlineStart--glass) * -1);
12911
+ --pf-v6-c-compass__content--MarginInlineEnd--glass: calc(var(--pf-v6-c-compass__content--PaddingInlineEnd--glass) * -1);
12912
+ --pf-v6-c-compass__content--PaddingBlockStart--glass: var(--pf-t--global--spacer--sm);
12913
+ --pf-v6-c-compass__content--PaddingBlockEnd--glass: var(--pf-t--global--spacer--md);
12914
+ --pf-v6-c-compass__content--PaddingInlineStart--glass: var(--pf-t--global--spacer--md);
12915
+ --pf-v6-c-compass__content--PaddingInlineEnd--glass: var(--pf-t--global--spacer--md);
12908
12916
  }
12909
12917
  :where(.pf-v6-theme-glass) .pf-v6-c-compass {
12910
12918
  --pf-v6-c-compass--BackgroundColor: var(--pf-v6-c-compass--BackgroundColor--glass);
12919
+ --pf-v6-c-compass__content--MarginBlockStart: var(--pf-v6-c-compass__content--MarginBlockStart--glass);
12920
+ --pf-v6-c-compass__content--MarginBlockEnd: var(--pf-v6-c-compass__content--MarginBlockEnd--glass);
12921
+ --pf-v6-c-compass__content--MarginInlineStart: var(--pf-v6-c-compass__content--MarginInlineStart--glass);
12922
+ --pf-v6-c-compass__content--MarginInlineEnd: var(--pf-v6-c-compass__content--MarginInlineEnd--glass);
12923
+ --pf-v6-c-compass__content--PaddingBlockStart: var(--pf-v6-c-compass__content--PaddingBlockStart--glass);
12924
+ --pf-v6-c-compass__content--PaddingBlockEnd: var(--pf-v6-c-compass__content--PaddingBlockEnd--glass);
12925
+ --pf-v6-c-compass__content--PaddingInlineStart: var(--pf-v6-c-compass__content--PaddingInlineStart--glass);
12926
+ --pf-v6-c-compass__content--PaddingInlineEnd: var(--pf-v6-c-compass__content--PaddingInlineEnd--glass);
12911
12927
  }
12912
12928
 
12913
12929
  .pf-v6-c-compass {
@@ -13204,6 +13220,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
13204
13220
  flex: 1 0 0;
13205
13221
  flex-direction: column;
13206
13222
  min-height: 0;
13223
+ padding-block-start: var(--pf-v6-c-compass__content--PaddingBlockStart, 0);
13224
+ padding-block-end: var(--pf-v6-c-compass__content--PaddingBlockEnd, 0);
13225
+ padding-inline-start: var(--pf-v6-c-compass__content--PaddingInlineStart, 0);
13226
+ padding-inline-end: var(--pf-v6-c-compass__content--PaddingInlineEnd, 0);
13227
+ margin-block-start: var(--pf-v6-c-compass__content--MarginBlockStart, 0);
13228
+ margin-block-end: var(--pf-v6-c-compass__content--MarginBlockEnd, 0);
13229
+ margin-inline-start: var(--pf-v6-c-compass__content--MarginInlineStart, 0);
13230
+ margin-inline-end: var(--pf-v6-c-compass__content--MarginInlineEnd, 0);
13207
13231
  overflow: auto;
13208
13232
  }
13209
13233
  .pf-v6-c-compass__content > *:last-child {
@@ -15531,7 +15555,7 @@ ul) {
15531
15555
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer__panel--after--Width);
15532
15556
  --pf-v6-c-drawer__panel--BorderInlineEndWidth: 0;
15533
15557
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
15534
- --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
15558
+ --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--floating--default);
15535
15559
  --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
15536
15560
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
15537
15561
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -15550,6 +15574,7 @@ ul) {
15550
15574
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
15551
15575
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
15552
15576
  --pf-v6-c-drawer__panel--md--FlexBasis--max: 100%;
15577
+ --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-t--global--background--color--primary--default);
15553
15578
  --pf-v6-c-drawer__panel--xl--MinWidth: 28.125rem;
15554
15579
  --pf-v6-c-drawer__panel--xl--FlexBasis: 28.125rem;
15555
15580
  --pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
@@ -15742,11 +15767,6 @@ ul) {
15742
15767
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
15743
15768
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
15744
15769
  }
15745
- .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass, .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass {
15746
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
15747
- --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
15748
- backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
15749
- }
15750
15770
  .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
15751
15771
  order: 0;
15752
15772
  margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
@@ -16079,9 +16099,17 @@ ul) {
16079
16099
  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
16080
16100
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
16081
16101
  }
16102
+ .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
16103
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--md--BackgroundColor);
16104
+ }
16082
16105
  :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass), :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass) {
16083
16106
  --pf-v6-c-drawer__panel--BackgroundColor: transparent;
16084
16107
  }
16108
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass {
16109
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
16110
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
16111
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
16112
+ }
16085
16113
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
16086
16114
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
16087
16115
  }
package/patternfly.css CHANGED
@@ -13060,9 +13060,25 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
13060
13060
  }
13061
13061
  .pf-v6-c-compass {
13062
13062
  --pf-v6-c-compass--BackgroundColor--glass: transparent;
13063
+ --pf-v6-c-compass__content--MarginBlockStart--glass: calc(var(--pf-v6-c-compass__content--PaddingBlockStart--glass) * -1);
13064
+ --pf-v6-c-compass__content--MarginBlockEnd--glass: calc(var(--pf-v6-c-compass__content--PaddingBlockEnd--glass) * -1);
13065
+ --pf-v6-c-compass__content--MarginInlineStart--glass: calc(var(--pf-v6-c-compass__content--PaddingInlineStart--glass) * -1);
13066
+ --pf-v6-c-compass__content--MarginInlineEnd--glass: calc(var(--pf-v6-c-compass__content--PaddingInlineEnd--glass) * -1);
13067
+ --pf-v6-c-compass__content--PaddingBlockStart--glass: var(--pf-t--global--spacer--sm);
13068
+ --pf-v6-c-compass__content--PaddingBlockEnd--glass: var(--pf-t--global--spacer--md);
13069
+ --pf-v6-c-compass__content--PaddingInlineStart--glass: var(--pf-t--global--spacer--md);
13070
+ --pf-v6-c-compass__content--PaddingInlineEnd--glass: var(--pf-t--global--spacer--md);
13063
13071
  }
13064
13072
  :where(.pf-v6-theme-glass) .pf-v6-c-compass {
13065
13073
  --pf-v6-c-compass--BackgroundColor: var(--pf-v6-c-compass--BackgroundColor--glass);
13074
+ --pf-v6-c-compass__content--MarginBlockStart: var(--pf-v6-c-compass__content--MarginBlockStart--glass);
13075
+ --pf-v6-c-compass__content--MarginBlockEnd: var(--pf-v6-c-compass__content--MarginBlockEnd--glass);
13076
+ --pf-v6-c-compass__content--MarginInlineStart: var(--pf-v6-c-compass__content--MarginInlineStart--glass);
13077
+ --pf-v6-c-compass__content--MarginInlineEnd: var(--pf-v6-c-compass__content--MarginInlineEnd--glass);
13078
+ --pf-v6-c-compass__content--PaddingBlockStart: var(--pf-v6-c-compass__content--PaddingBlockStart--glass);
13079
+ --pf-v6-c-compass__content--PaddingBlockEnd: var(--pf-v6-c-compass__content--PaddingBlockEnd--glass);
13080
+ --pf-v6-c-compass__content--PaddingInlineStart: var(--pf-v6-c-compass__content--PaddingInlineStart--glass);
13081
+ --pf-v6-c-compass__content--PaddingInlineEnd: var(--pf-v6-c-compass__content--PaddingInlineEnd--glass);
13066
13082
  }
13067
13083
 
13068
13084
  .pf-v6-c-compass {
@@ -13359,6 +13375,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
13359
13375
  flex: 1 0 0;
13360
13376
  flex-direction: column;
13361
13377
  min-height: 0;
13378
+ padding-block-start: var(--pf-v6-c-compass__content--PaddingBlockStart, 0);
13379
+ padding-block-end: var(--pf-v6-c-compass__content--PaddingBlockEnd, 0);
13380
+ padding-inline-start: var(--pf-v6-c-compass__content--PaddingInlineStart, 0);
13381
+ padding-inline-end: var(--pf-v6-c-compass__content--PaddingInlineEnd, 0);
13382
+ margin-block-start: var(--pf-v6-c-compass__content--MarginBlockStart, 0);
13383
+ margin-block-end: var(--pf-v6-c-compass__content--MarginBlockEnd, 0);
13384
+ margin-inline-start: var(--pf-v6-c-compass__content--MarginInlineStart, 0);
13385
+ margin-inline-end: var(--pf-v6-c-compass__content--MarginInlineEnd, 0);
13362
13386
  overflow: auto;
13363
13387
  }
13364
13388
  .pf-v6-c-compass__content > *:last-child {
@@ -15686,7 +15710,7 @@ ul) {
15686
15710
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer__panel--after--Width);
15687
15711
  --pf-v6-c-drawer__panel--BorderInlineEndWidth: 0;
15688
15712
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
15689
- --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
15713
+ --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--floating--default);
15690
15714
  --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
15691
15715
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
15692
15716
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -15705,6 +15729,7 @@ ul) {
15705
15729
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
15706
15730
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
15707
15731
  --pf-v6-c-drawer__panel--md--FlexBasis--max: 100%;
15732
+ --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-t--global--background--color--primary--default);
15708
15733
  --pf-v6-c-drawer__panel--xl--MinWidth: 28.125rem;
15709
15734
  --pf-v6-c-drawer__panel--xl--FlexBasis: 28.125rem;
15710
15735
  --pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
@@ -15897,11 +15922,6 @@ ul) {
15897
15922
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
15898
15923
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
15899
15924
  }
15900
- .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass, .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass {
15901
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
15902
- --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
15903
- backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
15904
- }
15905
15925
  .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
15906
15926
  order: 0;
15907
15927
  margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
@@ -16234,9 +16254,17 @@ ul) {
16234
16254
  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
16235
16255
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
16236
16256
  }
16257
+ .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
16258
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--md--BackgroundColor);
16259
+ }
16237
16260
  :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass), :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass) {
16238
16261
  --pf-v6-c-drawer__panel--BackgroundColor: transparent;
16239
16262
  }
16263
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass {
16264
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
16265
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
16266
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
16267
+ }
16240
16268
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
16241
16269
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
16242
16270
  }