@patternfly/patternfly 6.5.0-prerelease.17 → 6.5.0-prerelease.19

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 (14) hide show
  1. package/base/patternfly-variables.css +33 -12
  2. package/base/tokens/tokens-local.scss +50 -16
  3. package/components/Drawer/drawer.css +5 -5
  4. package/components/Drawer/drawer.scss +10 -7
  5. package/components/_index.css +5 -5
  6. package/docs/components/Drawer/examples/Drawer.md +3 -2
  7. package/docs/demos/Compass/examples/Compass.md +1 -1
  8. package/package.json +1 -1
  9. package/patternfly-base-no-globals.css +33 -12
  10. package/patternfly-base.css +33 -12
  11. package/patternfly-no-globals.css +38 -17
  12. package/patternfly.css +38 -17
  13. package/patternfly.min.css +1 -1
  14. package/patternfly.min.css.map +1 -1
package/base/patternfly-variables.css CHANGED
@@ -813,8 +813,8 @@
813
813
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
814
814
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
815
815
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
816
- --pf-t--global--text-decoration--color--default: var(--pf-t--global--text--color--default);
817
- --pf-t--global--text-decoration--color--hover: var(--pf-t--global--text--color--hover);
816
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--border--color--default);
817
+ --pf-t--global--text-decoration--color--hover: currentcolor;
818
818
  --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
819
819
  --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
820
820
  --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
@@ -923,22 +923,43 @@
923
923
  var(--pf-t--global--box-shadow--color--lg--directional);
924
924
  --pf-t--global--list-style: disc outside;
925
925
  --pf-t--temp--dev--tbd: #BC11E0;
926
- --pf-t--global--background--color--glass--filter: blur(12.5px);
927
- --pf-t--global--background--color--glass--opacity: .85;
928
- --pf-t--global--background--color--glass--default: rgba(255, 255, 255, var(--pf-t--global--background--color--glass--opacity));
929
- --pf-t--global--dark--background--color--glass--filter: blur(12.5px);
930
- --pf-t--global--dark--background--color--glass--opacity: .85;
931
- --pf-t--global--dark--background--color--glass--default: rgba(29, 29, 29, var(--pf-t--global--background--color--glass--opacity));
926
+ --pf-t--global--background--color--glass--filter--base: none;
927
+ --pf-t--global--background--color--glass--opacity--base: 1;
928
+ --pf-t--global--background--color--glass--default--base: var(--pf-t--global--background--color--primary--default);
929
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
930
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
931
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
932
+ --pf-t--global--dark--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
933
+ --pf-t--global--dark--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
934
+ --pf-t--global--dark--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
935
+ --pf-t--global--light--glass--background--color--glass--color: #ffffff;
936
+ --pf-t--global--light--glass--background--color--glass--filter: blur(12.5px);
937
+ --pf-t--global--light--glass--background--color--glass--opacity: 85%;
938
+ --pf-t--global--light--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--light--glass--background--color--glass--color) var(--pf-t--global--light--glass--background--color--glass--opacity), transparent );
939
+ --pf-t--global--dark--glass--background--color--glass--color: #1d1d1d;
940
+ --pf-t--global--dark--glass--background--color--glass--filter: blur(12.5px);
941
+ --pf-t--global--dark--glass--background--color--glass--opacity: 85%;
942
+ --pf-t--global--dark--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--dark--glass--background--color--glass--color) var(--pf-t--global--dark--glass--background--color--glass--opacity), transparent );
932
943
  }
933
944
  :root:where(.pf-v6-theme-dark) {
934
945
  --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
935
946
  --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
936
947
  --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
937
948
  }
938
- :root:root:where(.pf-m-no-glass) {
939
- --pf-t--global--background--color--glass--filter: none;
940
- --pf-t--global--background--color--glass--opacity: 1;
941
- --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--primary--default);
949
+ :root:where(.pf-v6-theme-glass) {
950
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--light--glass--background--color--glass--filter);
951
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--light--glass--background--color--glass--opacity);
952
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--light--glass--background--color--glass--default);
953
+ }
954
+ :root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
955
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--glass--background--color--glass--filter);
956
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--glass--background--color--glass--opacity);
957
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--glass--background--color--glass--default);
958
+ }
959
+ :root:where(.pf-v6-theme-high-contrast) {
960
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
961
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
962
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
942
963
  }
943
964
 
944
965
  :root:where(.pf-v6-theme-dark) {
package/base/tokens/tokens-local.scss CHANGED
@@ -1,10 +1,12 @@
1
+ @import '../../sass-utilities/init';
2
+
1
3
  // LOCAL TOKENS
2
4
 
3
5
  @mixin pf-v6-tokens {
4
6
  // temporary until we have updates from design
5
7
  // new
6
- --pf-t--global--text-decoration--color--default: var(--pf-t--global--text--color--default);
7
- --pf-t--global--text-decoration--color--hover: var(--pf-t--global--text--color--hover);
8
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--border--color--default);
9
+ --pf-t--global--text-decoration--color--hover: currentcolor; // could also use var(--pf-t--global--text--color--link--hover);
8
10
  --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
9
11
 
10
12
  // changed
@@ -135,25 +137,57 @@
135
137
  --pf-t--temp--dev--tbd: #BC11E0;
136
138
  // stylelint-enable
137
139
 
138
- // Compass/glass tokens
139
- --pf-t--global--background--color--glass--filter: blur(12.5px);
140
- --pf-t--global--background--color--glass--opacity: .85;
141
- --pf-t--global--background--color--glass--default: rgba(255, 255, 255, var(--pf-t--global--background--color--glass--opacity));
142
- --pf-t--global--dark--background--color--glass--filter: blur(12.5px);
143
- --pf-t--global--dark--background--color--glass--opacity: .85;
144
- --pf-t--global--dark--background--color--glass--default: rgba(29, 29, 29, var(--pf-t--global--background--color--glass--opacity));
140
+ // Glass theme tokens
141
+ // Glass theme off base. These are reused.
142
+ --pf-t--global--background--color--glass--filter--base: none;
143
+ --pf-t--global--background--color--glass--opacity--base: 1;
144
+ --pf-t--global--background--color--glass--default--base: var(--pf-t--global--background--color--primary--default);
145
+
146
+ // Glass theme off defaults
147
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
148
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
149
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
150
+ --pf-t--global--dark--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
151
+ --pf-t--global--dark--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
152
+ --pf-t--global--dark--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
153
+
154
+ // Glass theme on. In the root scope so they can be themed on :root
155
+ --pf-t--global--light--glass--background--color--glass--color: #ffffff;
156
+ --pf-t--global--light--glass--background--color--glass--filter: blur(12.5px);
157
+ --pf-t--global--light--glass--background--color--glass--opacity: 85%;
158
+ --pf-t--global--light--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--light--glass--background--color--glass--color) var(--pf-t--global--light--glass--background--color--glass--opacity), transparent );
159
+ --pf-t--global--dark--glass--background--color--glass--color: #1d1d1d;
160
+ --pf-t--global--dark--glass--background--color--glass--filter: blur(12.5px);
161
+ --pf-t--global--dark--glass--background--color--glass--opacity: 85%;
162
+ --pf-t--global--dark--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--dark--glass--background--color--glass--color) var(--pf-t--global--dark--glass--background--color--glass--opacity), transparent );
145
163
 
146
- // Compass/glass dark tokens
147
- &:where(.pf-v6-theme-dark) {
164
+ // Dark theme
165
+ &:where(.#{$pf-prefix}theme-dark) {
148
166
  --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
149
167
  --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
150
168
  --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
151
169
  }
152
170
 
153
- // no glass theme
154
- &:root:where(.pf-m-no-glass) {
155
- --pf-t--global--background--color--glass--filter: none;
156
- --pf-t--global--background--color--glass--opacity: 1;
157
- --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--primary--default);
171
+ // Glass theme
172
+ &:where(.#{$pf-prefix}theme-glass) {
173
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--light--glass--background--color--glass--filter);
174
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--light--glass--background--color--glass--opacity);
175
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--light--glass--background--color--glass--default);
176
+ }
177
+
178
+ // Glass dark theme
179
+ &:where(.#{$pf-prefix}theme-glass.#{$pf-prefix}theme-dark) {
180
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--glass--background--color--glass--filter);
181
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--glass--background--color--glass--opacity);
182
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--glass--background--color--glass--default);
183
+ }
184
+
185
+ // High contrast
186
+ &:where(.#{$pf-prefix}theme-high-contrast) {
187
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
188
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
189
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
158
190
  }
159
191
  }
192
+
193
+
package/components/Drawer/drawer.css CHANGED
@@ -232,6 +232,11 @@
232
232
  border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
233
233
  border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
234
234
  }
235
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-glass) {
236
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
237
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
238
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
239
+ }
235
240
  }
236
241
 
237
242
  .pf-v6-c-drawer__section {
@@ -316,11 +321,6 @@
316
321
  .pf-v6-c-drawer__panel.pf-m-no-background {
317
322
  --pf-v6-c-drawer__panel--BackgroundColor: transparent;
318
323
  }
319
- .pf-v6-c-drawer__panel.pf-m-glass {
320
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
321
- --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
322
- backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
323
- }
324
324
  @media screen and (min-width: 48rem) {
325
325
  .pf-v6-c-drawer__panel {
326
326
  --pf-v6-c-drawer__panel--FlexBasis:
package/components/Drawer/drawer.scss CHANGED
@@ -293,6 +293,16 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
293
293
  border-block-end-width: var(--#{$drawer}--m-pill__panel--BorderBlockEndWidth);
294
294
  border-inline-start-width: var(--#{$drawer}--m-pill__panel--BorderInlineStartWidth);
295
295
  border-inline-end-width: var(--#{$drawer}--m-pill__panel--BorderInlineEndWidth);
296
+
297
+ // This won't apply background overrides if glass is disabled, allowing secondary backgrounds to work
298
+ // stylelint-disable max-nesting-depth
299
+ &:not(.pf-m-no-glass) {
300
+ --#{$drawer}__panel--BackgroundColor: var(--#{$drawer}__panel--m-glass--BackgroundColor);
301
+ --#{$drawer}__panel--BorderColor: var(--#{$drawer}__panel--m-glass--BorderColor);
302
+
303
+ backdrop-filter: var(--#{$drawer}__panel--m-glass--BackdropFilter);
304
+ }
305
+ // stylelint-enable
296
306
  }
297
307
  }
298
308
  }
@@ -393,13 +403,6 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
393
403
  --#{$drawer}__panel--BackgroundColor: transparent;
394
404
  }
395
405
 
396
- &.pf-m-glass {
397
- --#{$drawer}__panel--BackgroundColor: var(--#{$drawer}__panel--m-glass--BackgroundColor);
398
- --#{$drawer}__panel--BorderColor: var(--#{$drawer}__panel--m-glass--BorderColor);
399
-
400
- backdrop-filter: var(--#{$drawer}__panel--m-glass--BackdropFilter);
401
- }
402
-
403
406
  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
404
407
  --#{$drawer}__panel--FlexBasis:
405
408
  max(
package/components/_index.css CHANGED
@@ -6196,6 +6196,11 @@ ul) {
6196
6196
  border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
6197
6197
  border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
6198
6198
  }
6199
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-glass) {
6200
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
6201
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
6202
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
6203
+ }
6199
6204
  }
6200
6205
 
6201
6206
  .pf-v6-c-drawer__section {
@@ -6280,11 +6285,6 @@ ul) {
6280
6285
  .pf-v6-c-drawer__panel.pf-m-no-background {
6281
6286
  --pf-v6-c-drawer__panel--BackgroundColor: transparent;
6282
6287
  }
6283
- .pf-v6-c-drawer__panel.pf-m-glass {
6284
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
6285
- --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
6286
- backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
6287
- }
6288
6288
  @media screen and (min-width: 48rem) {
6289
6289
  .pf-v6-c-drawer__panel {
6290
6290
  --pf-v6-c-drawer__panel--FlexBasis:
package/docs/components/Drawer/examples/Drawer.md CHANGED
@@ -769,7 +769,7 @@ cssPrefix: pf-v6-c-drawer
769
769
 
770
770
  ### Pill
771
771
 
772
- ```html
772
+ ```html isBeta
773
773
  <div class="pf-v6-c-drawer pf-m-expanded pf-m-pill">
774
774
  <div class="pf-v6-c-drawer__main">
775
775
  <div class="pf-v6-c-drawer__content">
@@ -806,7 +806,7 @@ cssPrefix: pf-v6-c-drawer
806
806
 
807
807
  ### Pill inline
808
808
 
809
- ```html
809
+ ```html isBeta
810
810
  <div class="pf-v6-c-drawer pf-m-expanded pf-m-inline pf-m-pill">
811
811
  <div class="pf-v6-c-drawer__main">
812
812
  <div class="pf-v6-c-drawer__content">
@@ -878,6 +878,7 @@ cssPrefix: pf-v6-c-drawer
878
878
  | `.pf-m-static{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer panel state to always show both content and panel at optional [breakpoint](/tokens/all-patternfly-tokens). |
879
879
  | `.pf-m-inline{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a [breakpoint](/tokens/all-patternfly-tokens) will default to the `md` breakpoint. |
880
880
  | `.pf-m-pill` | `.pf-v6-c-drawer` | Modifies the drawer for pill styles. |
881
+ | `.pf-m-no-glass` | `.pf-v6-c-drawer__panel.pf-m-pill` | Modifies the drawer panel remove glass styling when using glass theme. |
881
882
  | `.pf-m-no-border` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel border treatment to disable all border treatment. |
882
883
  | `.pf-m-padding` | `.pf-v6-c-drawer__body` | Modifies the element to add padding. |
883
884
  | `.pf-m-no-padding` | `.pf-v6-c-drawer__body` | Modifies the element to remove padding. |
package/docs/demos/Compass/examples/Compass.md CHANGED
@@ -5812,7 +5812,7 @@ wrapperTag: div
5812
5812
  </div>
5813
5813
  </div>
5814
5814
  </div>
5815
- <div class="pf-v6-c-drawer__panel pf-m-glass">
5815
+ <div class="pf-v6-c-drawer__panel">
5816
5816
  <div class="pf-v6-c-drawer__head">
5817
5817
  <span>Drawer panel header content</span>
5818
5818
  <div class="pf-v6-c-drawer__actions">
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.17",
4
+ "version": "6.5.0-prerelease.19",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals.css CHANGED
@@ -7114,8 +7114,8 @@
7114
7114
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
7115
7115
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
7116
7116
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
7117
- --pf-t--global--text-decoration--color--default: var(--pf-t--global--text--color--default);
7118
- --pf-t--global--text-decoration--color--hover: var(--pf-t--global--text--color--hover);
7117
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--border--color--default);
7118
+ --pf-t--global--text-decoration--color--hover: currentcolor;
7119
7119
  --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
7120
7120
  --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
7121
7121
  --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
@@ -7224,22 +7224,43 @@
7224
7224
  var(--pf-t--global--box-shadow--color--lg--directional);
7225
7225
  --pf-t--global--list-style: disc outside;
7226
7226
  --pf-t--temp--dev--tbd: #BC11E0;
7227
- --pf-t--global--background--color--glass--filter: blur(12.5px);
7228
- --pf-t--global--background--color--glass--opacity: .85;
7229
- --pf-t--global--background--color--glass--default: rgba(255, 255, 255, var(--pf-t--global--background--color--glass--opacity));
7230
- --pf-t--global--dark--background--color--glass--filter: blur(12.5px);
7231
- --pf-t--global--dark--background--color--glass--opacity: .85;
7232
- --pf-t--global--dark--background--color--glass--default: rgba(29, 29, 29, var(--pf-t--global--background--color--glass--opacity));
7227
+ --pf-t--global--background--color--glass--filter--base: none;
7228
+ --pf-t--global--background--color--glass--opacity--base: 1;
7229
+ --pf-t--global--background--color--glass--default--base: var(--pf-t--global--background--color--primary--default);
7230
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7231
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7232
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7233
+ --pf-t--global--dark--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7234
+ --pf-t--global--dark--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7235
+ --pf-t--global--dark--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7236
+ --pf-t--global--light--glass--background--color--glass--color: #ffffff;
7237
+ --pf-t--global--light--glass--background--color--glass--filter: blur(12.5px);
7238
+ --pf-t--global--light--glass--background--color--glass--opacity: 85%;
7239
+ --pf-t--global--light--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--light--glass--background--color--glass--color) var(--pf-t--global--light--glass--background--color--glass--opacity), transparent );
7240
+ --pf-t--global--dark--glass--background--color--glass--color: #1d1d1d;
7241
+ --pf-t--global--dark--glass--background--color--glass--filter: blur(12.5px);
7242
+ --pf-t--global--dark--glass--background--color--glass--opacity: 85%;
7243
+ --pf-t--global--dark--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--dark--glass--background--color--glass--color) var(--pf-t--global--dark--glass--background--color--glass--opacity), transparent );
7233
7244
  }
7234
7245
  :root:where(.pf-v6-theme-dark) {
7235
7246
  --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
7236
7247
  --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
7237
7248
  --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
7238
7249
  }
7239
- :root:root:where(.pf-m-no-glass) {
7240
- --pf-t--global--background--color--glass--filter: none;
7241
- --pf-t--global--background--color--glass--opacity: 1;
7242
- --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--primary--default);
7250
+ :root:where(.pf-v6-theme-glass) {
7251
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--light--glass--background--color--glass--filter);
7252
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--light--glass--background--color--glass--opacity);
7253
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--light--glass--background--color--glass--default);
7254
+ }
7255
+ :root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
7256
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--glass--background--color--glass--filter);
7257
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--glass--background--color--glass--opacity);
7258
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--glass--background--color--glass--default);
7259
+ }
7260
+ :root:where(.pf-v6-theme-high-contrast) {
7261
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7262
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7263
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7243
7264
  }
7244
7265
 
7245
7266
  :root:where(.pf-v6-theme-dark) {
package/patternfly-base.css CHANGED
@@ -7261,8 +7261,8 @@ button) {
7261
7261
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
7262
7262
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
7263
7263
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
7264
- --pf-t--global--text-decoration--color--default: var(--pf-t--global--text--color--default);
7265
- --pf-t--global--text-decoration--color--hover: var(--pf-t--global--text--color--hover);
7264
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--border--color--default);
7265
+ --pf-t--global--text-decoration--color--hover: currentcolor;
7266
7266
  --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
7267
7267
  --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
7268
7268
  --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
@@ -7371,22 +7371,43 @@ button) {
7371
7371
  var(--pf-t--global--box-shadow--color--lg--directional);
7372
7372
  --pf-t--global--list-style: disc outside;
7373
7373
  --pf-t--temp--dev--tbd: #BC11E0;
7374
- --pf-t--global--background--color--glass--filter: blur(12.5px);
7375
- --pf-t--global--background--color--glass--opacity: .85;
7376
- --pf-t--global--background--color--glass--default: rgba(255, 255, 255, var(--pf-t--global--background--color--glass--opacity));
7377
- --pf-t--global--dark--background--color--glass--filter: blur(12.5px);
7378
- --pf-t--global--dark--background--color--glass--opacity: .85;
7379
- --pf-t--global--dark--background--color--glass--default: rgba(29, 29, 29, var(--pf-t--global--background--color--glass--opacity));
7374
+ --pf-t--global--background--color--glass--filter--base: none;
7375
+ --pf-t--global--background--color--glass--opacity--base: 1;
7376
+ --pf-t--global--background--color--glass--default--base: var(--pf-t--global--background--color--primary--default);
7377
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7378
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7379
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7380
+ --pf-t--global--dark--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7381
+ --pf-t--global--dark--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7382
+ --pf-t--global--dark--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7383
+ --pf-t--global--light--glass--background--color--glass--color: #ffffff;
7384
+ --pf-t--global--light--glass--background--color--glass--filter: blur(12.5px);
7385
+ --pf-t--global--light--glass--background--color--glass--opacity: 85%;
7386
+ --pf-t--global--light--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--light--glass--background--color--glass--color) var(--pf-t--global--light--glass--background--color--glass--opacity), transparent );
7387
+ --pf-t--global--dark--glass--background--color--glass--color: #1d1d1d;
7388
+ --pf-t--global--dark--glass--background--color--glass--filter: blur(12.5px);
7389
+ --pf-t--global--dark--glass--background--color--glass--opacity: 85%;
7390
+ --pf-t--global--dark--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--dark--glass--background--color--glass--color) var(--pf-t--global--dark--glass--background--color--glass--opacity), transparent );
7380
7391
  }
7381
7392
  :root:where(.pf-v6-theme-dark) {
7382
7393
  --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
7383
7394
  --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
7384
7395
  --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
7385
7396
  }
7386
- :root:root:where(.pf-m-no-glass) {
7387
- --pf-t--global--background--color--glass--filter: none;
7388
- --pf-t--global--background--color--glass--opacity: 1;
7389
- --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--primary--default);
7397
+ :root:where(.pf-v6-theme-glass) {
7398
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--light--glass--background--color--glass--filter);
7399
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--light--glass--background--color--glass--opacity);
7400
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--light--glass--background--color--glass--default);
7401
+ }
7402
+ :root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
7403
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--glass--background--color--glass--filter);
7404
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--glass--background--color--glass--opacity);
7405
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--glass--background--color--glass--default);
7406
+ }
7407
+ :root:where(.pf-v6-theme-high-contrast) {
7408
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7409
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7410
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7390
7411
  }
7391
7412
 
7392
7413
  :root:where(.pf-v6-theme-dark) {
package/patternfly-no-globals.css CHANGED
@@ -7115,8 +7115,8 @@
7115
7115
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
7116
7116
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
7117
7117
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
7118
- --pf-t--global--text-decoration--color--default: var(--pf-t--global--text--color--default);
7119
- --pf-t--global--text-decoration--color--hover: var(--pf-t--global--text--color--hover);
7118
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--border--color--default);
7119
+ --pf-t--global--text-decoration--color--hover: currentcolor;
7120
7120
  --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
7121
7121
  --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
7122
7122
  --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
@@ -7225,22 +7225,43 @@
7225
7225
  var(--pf-t--global--box-shadow--color--lg--directional);
7226
7226
  --pf-t--global--list-style: disc outside;
7227
7227
  --pf-t--temp--dev--tbd: #BC11E0;
7228
- --pf-t--global--background--color--glass--filter: blur(12.5px);
7229
- --pf-t--global--background--color--glass--opacity: .85;
7230
- --pf-t--global--background--color--glass--default: rgba(255, 255, 255, var(--pf-t--global--background--color--glass--opacity));
7231
- --pf-t--global--dark--background--color--glass--filter: blur(12.5px);
7232
- --pf-t--global--dark--background--color--glass--opacity: .85;
7233
- --pf-t--global--dark--background--color--glass--default: rgba(29, 29, 29, var(--pf-t--global--background--color--glass--opacity));
7228
+ --pf-t--global--background--color--glass--filter--base: none;
7229
+ --pf-t--global--background--color--glass--opacity--base: 1;
7230
+ --pf-t--global--background--color--glass--default--base: var(--pf-t--global--background--color--primary--default);
7231
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7232
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7233
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7234
+ --pf-t--global--dark--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7235
+ --pf-t--global--dark--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7236
+ --pf-t--global--dark--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7237
+ --pf-t--global--light--glass--background--color--glass--color: #ffffff;
7238
+ --pf-t--global--light--glass--background--color--glass--filter: blur(12.5px);
7239
+ --pf-t--global--light--glass--background--color--glass--opacity: 85%;
7240
+ --pf-t--global--light--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--light--glass--background--color--glass--color) var(--pf-t--global--light--glass--background--color--glass--opacity), transparent );
7241
+ --pf-t--global--dark--glass--background--color--glass--color: #1d1d1d;
7242
+ --pf-t--global--dark--glass--background--color--glass--filter: blur(12.5px);
7243
+ --pf-t--global--dark--glass--background--color--glass--opacity: 85%;
7244
+ --pf-t--global--dark--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--dark--glass--background--color--glass--color) var(--pf-t--global--dark--glass--background--color--glass--opacity), transparent );
7234
7245
  }
7235
7246
  :root:where(.pf-v6-theme-dark) {
7236
7247
  --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
7237
7248
  --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
7238
7249
  --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
7239
7250
  }
7240
- :root:root:where(.pf-m-no-glass) {
7241
- --pf-t--global--background--color--glass--filter: none;
7242
- --pf-t--global--background--color--glass--opacity: 1;
7243
- --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--primary--default);
7251
+ :root:where(.pf-v6-theme-glass) {
7252
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--light--glass--background--color--glass--filter);
7253
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--light--glass--background--color--glass--opacity);
7254
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--light--glass--background--color--glass--default);
7255
+ }
7256
+ :root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
7257
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--glass--background--color--glass--filter);
7258
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--glass--background--color--glass--opacity);
7259
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--glass--background--color--glass--default);
7260
+ }
7261
+ :root:where(.pf-v6-theme-high-contrast) {
7262
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7263
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7264
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7244
7265
  }
7245
7266
 
7246
7267
  :root:where(.pf-v6-theme-dark) {
@@ -14930,6 +14951,11 @@ ul) {
14930
14951
  border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
14931
14952
  border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
14932
14953
  }
14954
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-glass) {
14955
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
14956
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
14957
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
14958
+ }
14933
14959
  }
14934
14960
 
14935
14961
  .pf-v6-c-drawer__section {
@@ -15014,11 +15040,6 @@ ul) {
15014
15040
  .pf-v6-c-drawer__panel.pf-m-no-background {
15015
15041
  --pf-v6-c-drawer__panel--BackgroundColor: transparent;
15016
15042
  }
15017
- .pf-v6-c-drawer__panel.pf-m-glass {
15018
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
15019
- --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
15020
- backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
15021
- }
15022
15043
  @media screen and (min-width: 48rem) {
15023
15044
  .pf-v6-c-drawer__panel {
15024
15045
  --pf-v6-c-drawer__panel--FlexBasis:
package/patternfly.css CHANGED
@@ -7262,8 +7262,8 @@ button) {
7262
7262
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
7263
7263
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
7264
7264
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
7265
- --pf-t--global--text-decoration--color--default: var(--pf-t--global--text--color--default);
7266
- --pf-t--global--text-decoration--color--hover: var(--pf-t--global--text--color--hover);
7265
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--border--color--default);
7266
+ --pf-t--global--text-decoration--color--hover: currentcolor;
7267
7267
  --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
7268
7268
  --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
7269
7269
  --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
@@ -7372,22 +7372,43 @@ button) {
7372
7372
  var(--pf-t--global--box-shadow--color--lg--directional);
7373
7373
  --pf-t--global--list-style: disc outside;
7374
7374
  --pf-t--temp--dev--tbd: #BC11E0;
7375
- --pf-t--global--background--color--glass--filter: blur(12.5px);
7376
- --pf-t--global--background--color--glass--opacity: .85;
7377
- --pf-t--global--background--color--glass--default: rgba(255, 255, 255, var(--pf-t--global--background--color--glass--opacity));
7378
- --pf-t--global--dark--background--color--glass--filter: blur(12.5px);
7379
- --pf-t--global--dark--background--color--glass--opacity: .85;
7380
- --pf-t--global--dark--background--color--glass--default: rgba(29, 29, 29, var(--pf-t--global--background--color--glass--opacity));
7375
+ --pf-t--global--background--color--glass--filter--base: none;
7376
+ --pf-t--global--background--color--glass--opacity--base: 1;
7377
+ --pf-t--global--background--color--glass--default--base: var(--pf-t--global--background--color--primary--default);
7378
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7379
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7380
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7381
+ --pf-t--global--dark--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7382
+ --pf-t--global--dark--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7383
+ --pf-t--global--dark--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7384
+ --pf-t--global--light--glass--background--color--glass--color: #ffffff;
7385
+ --pf-t--global--light--glass--background--color--glass--filter: blur(12.5px);
7386
+ --pf-t--global--light--glass--background--color--glass--opacity: 85%;
7387
+ --pf-t--global--light--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--light--glass--background--color--glass--color) var(--pf-t--global--light--glass--background--color--glass--opacity), transparent );
7388
+ --pf-t--global--dark--glass--background--color--glass--color: #1d1d1d;
7389
+ --pf-t--global--dark--glass--background--color--glass--filter: blur(12.5px);
7390
+ --pf-t--global--dark--glass--background--color--glass--opacity: 85%;
7391
+ --pf-t--global--dark--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--dark--glass--background--color--glass--color) var(--pf-t--global--dark--glass--background--color--glass--opacity), transparent );
7381
7392
  }
7382
7393
  :root:where(.pf-v6-theme-dark) {
7383
7394
  --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
7384
7395
  --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
7385
7396
  --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
7386
7397
  }
7387
- :root:root:where(.pf-m-no-glass) {
7388
- --pf-t--global--background--color--glass--filter: none;
7389
- --pf-t--global--background--color--glass--opacity: 1;
7390
- --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--primary--default);
7398
+ :root:where(.pf-v6-theme-glass) {
7399
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--light--glass--background--color--glass--filter);
7400
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--light--glass--background--color--glass--opacity);
7401
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--light--glass--background--color--glass--default);
7402
+ }
7403
+ :root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
7404
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--glass--background--color--glass--filter);
7405
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--glass--background--color--glass--opacity);
7406
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--glass--background--color--glass--default);
7407
+ }
7408
+ :root:where(.pf-v6-theme-high-contrast) {
7409
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7410
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7411
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7391
7412
  }
7392
7413
 
7393
7414
  :root:where(.pf-v6-theme-dark) {
@@ -15077,6 +15098,11 @@ ul) {
15077
15098
  border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
15078
15099
  border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
15079
15100
  }
15101
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-glass) {
15102
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
15103
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
15104
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
15105
+ }
15080
15106
  }
15081
15107
 
15082
15108
  .pf-v6-c-drawer__section {
@@ -15161,11 +15187,6 @@ ul) {
15161
15187
  .pf-v6-c-drawer__panel.pf-m-no-background {
15162
15188
  --pf-v6-c-drawer__panel--BackgroundColor: transparent;
15163
15189
  }
15164
- .pf-v6-c-drawer__panel.pf-m-glass {
15165
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
15166
- --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
15167
- backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
15168
- }
15169
15190
  @media screen and (min-width: 48rem) {
15170
15191
  .pf-v6-c-drawer__panel {
15171
15192
  --pf-v6-c-drawer__panel--FlexBasis: