@patternfly/patternfly 6.5.0-prerelease.16 → 6.5.0-prerelease.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/base/patternfly-variables.css +18 -2
  2. package/base/tokens/tokens-local.scss +24 -2
  3. package/components/Compass/compass.css +4 -22
  4. package/components/Compass/compass.scss +4 -23
  5. package/components/Drawer/drawer.css +8 -0
  6. package/components/Drawer/drawer.scss +10 -0
  7. package/components/_index.css +12 -22
  8. package/docs/demos/Compass/examples/Compass.md +1290 -0
  9. package/package.json +1 -1
  10. package/patternfly-base-no-globals.css +18 -2
  11. package/patternfly-base.css +18 -2
  12. package/patternfly-no-globals.css +30 -24
  13. package/patternfly.css +30 -24
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
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.16",
4
+ "version": "6.5.0-prerelease.18",
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,6 +7224,22 @@
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));
7233
+ }
7234
+ :root:where(.pf-v6-theme-dark) {
7235
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
7236
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
7237
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
7238
+ }
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);
7227
7243
  }
7228
7244
 
7229
7245
  :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,6 +7371,22 @@ 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));
7380
+ }
7381
+ :root:where(.pf-v6-theme-dark) {
7382
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
7383
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
7384
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
7385
+ }
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);
7374
7390
  }
7375
7391
 
7376
7392
  :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,6 +7225,22 @@
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));
7234
+ }
7235
+ :root:where(.pf-v6-theme-dark) {
7236
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
7237
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
7238
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
7239
+ }
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);
7228
7244
  }
7229
7245
 
7230
7246
  :root:where(.pf-v6-theme-dark) {
@@ -12235,15 +12251,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12235
12251
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
12236
12252
  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
12237
12253
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
12238
- --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,255,255;
12239
- --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .85;
12240
- --pf-v6-c-compass__panel--BackgroundColor--light: rgba(var(--pf-v6-c-compass__panel--BackgroundColor--rgb--light), var(--pf-v6-c-compass__panel--BackgroundColor--opacity--light));
12241
- --pf-v6-c-compass__panel--BackgroundColor--rgb--dark: 29,29,29;
12242
- --pf-v6-c-compass__panel--BackgroundColor--opacity--dark: .8;
12243
- --pf-v6-c-compass__panel--BackgroundColor--dark: rgba(var(--pf-v6-c-compass__panel--BackgroundColor--rgb--dark), var(--pf-v6-c-compass__panel--BackgroundColor--opacity--dark));
12244
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--light);
12245
- --pf-v6-c-compass__panel--BackdropFilter--light: blur(12.5px);
12246
- --pf-v6-c-compass__panel--BackdropFilter--dark: blur(12.5px);
12254
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12255
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12247
12256
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
12248
12257
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
12249
12258
  --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
@@ -12356,16 +12365,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12356
12365
 
12357
12366
  .pf-v6-c-compass__panel {
12358
12367
  padding: var(--pf-v6-c-compass__panel--Padding);
12359
- background-color: var(--pf-v6-c-compass__panel--BackgroundColor, var(--pf-v6-c-compass__panel--BackgroundColor--light));
12360
- backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter, var(--pf-v6-c-compass__panel--BackdropFilter--light));
12368
+ background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
12369
+ backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
12361
12370
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
12362
12371
  border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
12363
12372
  box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
12364
12373
  }
12365
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__panel {
12366
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--dark);
12367
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-v6-c-compass__panel--BackgroundColor--dark);
12368
- }
12369
12374
  .pf-v6-c-compass__panel.pf-m-no-border {
12370
12375
  border-width: 0;
12371
12376
  }
@@ -12405,13 +12410,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12405
12410
  width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
12406
12411
  }
12407
12412
 
12408
- :where(:root.pf-v6-theme-no-glass) .pf-v6-c-compass {
12409
- --pf-v6-c-compass--glass--opacity: 100%;
12410
- --pf-v6-c-compass--glass--border: var(--pf-t--global--border--color--default);
12411
- --pf-v6-c-compass--glass--blend-mode: none;
12412
- --pf-v6-c-compass--glass--blend-mode--dark: none;
12413
- }
12414
-
12415
12413
  /* stylelint-disable */
12416
12414
  @media (max-width: 1200px) {
12417
12415
  .pf-v6-c-compass * {
@@ -14753,6 +14751,9 @@ ul) {
14753
14751
  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
14754
14752
  --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
14755
14753
  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
14754
+ --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
14755
+ --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
14756
+ --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
14756
14757
  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
14757
14758
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
14758
14759
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -15013,6 +15014,11 @@ ul) {
15013
15014
  .pf-v6-c-drawer__panel.pf-m-no-background {
15014
15015
  --pf-v6-c-drawer__panel--BackgroundColor: transparent;
15015
15016
  }
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
+ }
15016
15022
  @media screen and (min-width: 48rem) {
15017
15023
  .pf-v6-c-drawer__panel {
15018
15024
  --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,6 +7372,22 @@ 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));
7381
+ }
7382
+ :root:where(.pf-v6-theme-dark) {
7383
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
7384
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
7385
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
7386
+ }
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);
7375
7391
  }
7376
7392
 
7377
7393
  :root:where(.pf-v6-theme-dark) {
@@ -12382,15 +12398,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12382
12398
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
12383
12399
  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
12384
12400
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
12385
- --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,255,255;
12386
- --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .85;
12387
- --pf-v6-c-compass__panel--BackgroundColor--light: rgba(var(--pf-v6-c-compass__panel--BackgroundColor--rgb--light), var(--pf-v6-c-compass__panel--BackgroundColor--opacity--light));
12388
- --pf-v6-c-compass__panel--BackgroundColor--rgb--dark: 29,29,29;
12389
- --pf-v6-c-compass__panel--BackgroundColor--opacity--dark: .8;
12390
- --pf-v6-c-compass__panel--BackgroundColor--dark: rgba(var(--pf-v6-c-compass__panel--BackgroundColor--rgb--dark), var(--pf-v6-c-compass__panel--BackgroundColor--opacity--dark));
12391
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--light);
12392
- --pf-v6-c-compass__panel--BackdropFilter--light: blur(12.5px);
12393
- --pf-v6-c-compass__panel--BackdropFilter--dark: blur(12.5px);
12401
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12402
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12394
12403
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
12395
12404
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
12396
12405
  --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
@@ -12503,16 +12512,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12503
12512
 
12504
12513
  .pf-v6-c-compass__panel {
12505
12514
  padding: var(--pf-v6-c-compass__panel--Padding);
12506
- background-color: var(--pf-v6-c-compass__panel--BackgroundColor, var(--pf-v6-c-compass__panel--BackgroundColor--light));
12507
- backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter, var(--pf-v6-c-compass__panel--BackdropFilter--light));
12515
+ background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
12516
+ backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
12508
12517
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
12509
12518
  border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
12510
12519
  box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
12511
12520
  }
12512
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__panel {
12513
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--dark);
12514
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-v6-c-compass__panel--BackgroundColor--dark);
12515
- }
12516
12521
  .pf-v6-c-compass__panel.pf-m-no-border {
12517
12522
  border-width: 0;
12518
12523
  }
@@ -12552,13 +12557,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12552
12557
  width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
12553
12558
  }
12554
12559
 
12555
- :where(:root.pf-v6-theme-no-glass) .pf-v6-c-compass {
12556
- --pf-v6-c-compass--glass--opacity: 100%;
12557
- --pf-v6-c-compass--glass--border: var(--pf-t--global--border--color--default);
12558
- --pf-v6-c-compass--glass--blend-mode: none;
12559
- --pf-v6-c-compass--glass--blend-mode--dark: none;
12560
- }
12561
-
12562
12560
  /* stylelint-disable */
12563
12561
  @media (max-width: 1200px) {
12564
12562
  .pf-v6-c-compass * {
@@ -14900,6 +14898,9 @@ ul) {
14900
14898
  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
14901
14899
  --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
14902
14900
  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
14901
+ --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
14902
+ --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
14903
+ --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
14903
14904
  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
14904
14905
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
14905
14906
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -15160,6 +15161,11 @@ ul) {
15160
15161
  .pf-v6-c-drawer__panel.pf-m-no-background {
15161
15162
  --pf-v6-c-drawer__panel--BackgroundColor: transparent;
15162
15163
  }
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
+ }
15163
15169
  @media screen and (min-width: 48rem) {
15164
15170
  .pf-v6-c-drawer__panel {
15165
15171
  --pf-v6-c-drawer__panel--FlexBasis: