@patternfly/patternfly 6.5.0-prerelease.35 → 6.5.0-prerelease.37

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 (30) hide show
  1. package/base/patternfly-variables.css +30 -57
  2. package/base/tokens/tokens-dark.scss +5 -3
  3. package/base/tokens/tokens-default.scss +5 -3
  4. package/base/tokens/tokens-glass-dark.scss +7 -6
  5. package/base/tokens/tokens-glass.scss +7 -6
  6. package/base/tokens/tokens-local.scss +3 -53
  7. package/base/tokens/tokens-redhat-dark.scss +1 -1
  8. package/base/tokens/tokens-redhat-glass-dark.scss +7 -6
  9. package/base/tokens/tokens-redhat-glass.scss +7 -6
  10. package/base/tokens/tokens-redhat-highcontrast-dark.scss +1 -1
  11. package/base/tokens/tokens-redhat-highcontrast.scss +1 -1
  12. package/base/tokens/tokens-redhat.scss +1 -1
  13. package/components/Compass/compass.css +2 -2
  14. package/components/Compass/compass.scss +2 -2
  15. package/components/Drawer/drawer.css +2 -2
  16. package/components/Drawer/drawer.scss +2 -2
  17. package/components/Hero/hero.css +2 -2
  18. package/components/Hero/hero.scss +2 -2
  19. package/components/Masthead/masthead.css +2 -2
  20. package/components/Masthead/masthead.scss +2 -2
  21. package/components/NotificationDrawer/notification-drawer.css +2 -0
  22. package/components/NotificationDrawer/notification-drawer.scss +2 -0
  23. package/components/_index.css +10 -8
  24. package/package.json +6 -5
  25. package/patternfly-base-no-globals.css +30 -57
  26. package/patternfly-base.css +30 -57
  27. package/patternfly-no-globals.css +40 -65
  28. package/patternfly.css +40 -65
  29. package/patternfly.min.css +1 -1
  30. package/patternfly.min.css.map +1 -1
package/patternfly-base-no-globals.css CHANGED
@@ -6381,8 +6381,10 @@
6381
6381
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
6382
6382
  --pf-t--global--background--color--700: rgba(199, 199, 199, 0.1000);
6383
6383
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
6384
- --pf-t--global--background--filter--glass: 0;
6385
- --pf-t--global--background--opacity--glass: 100;
6384
+ --pf-t--global--background--filter--glass--blur--floating: blur(0px);
6385
+ --pf-t--global--background--filter--glass--blur--primary: blur(0px);
6386
+ --pf-t--global--background--opacity--glass--floating: 100%;
6387
+ --pf-t--global--background--opacity--glass--primary: 100%;
6386
6388
  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
6387
6389
  --pf-t--global--border--radius--0: 0px;
6388
6390
  --pf-t--global--border--radius--100: 4px;
@@ -7276,49 +7278,16 @@
7276
7278
  var(--pf-t--global--box-shadow--color--lg--directional);
7277
7279
  --pf-t--global--list-style: disc outside;
7278
7280
  --pf-t--temp--dev--tbd: #BC11E0;
7279
- --pf-t--global--background--color--glass--filter--base: none;
7280
- --pf-t--global--background--color--glass--opacity--base: 1;
7281
- --pf-t--global--background--color--glass--default--base: var(--pf-t--global--background--color--primary--default);
7282
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7283
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7284
- --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7285
- --pf-t--global--dark--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7286
- --pf-t--global--dark--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7287
- --pf-t--global--dark--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7288
- --pf-t--global--light--glass--background--color--glass--color: #ffffff;
7289
- --pf-t--global--light--glass--background--color--glass--filter: blur(12.5px);
7290
- --pf-t--global--light--glass--background--color--glass--opacity: 85%;
7291
- --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 );
7292
- --pf-t--global--dark--glass--background--color--glass--color: #1d1d1d;
7293
- --pf-t--global--dark--glass--background--color--glass--filter: blur(12.5px);
7294
- --pf-t--global--dark--glass--background--color--glass--opacity: 85%;
7295
- --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 );
7296
- }
7297
- :root:where(.pf-v6-theme-dark) {
7298
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
7299
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
7300
- --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
7301
- }
7302
- :root:where(.pf-v6-theme-glass) {
7303
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--light--glass--background--color--glass--filter);
7304
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--light--glass--background--color--glass--opacity);
7305
- --pf-t--global--background--color--glass--default: var(--pf-t--global--light--glass--background--color--glass--default);
7306
- }
7307
- :root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
7308
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--glass--background--color--glass--filter);
7309
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--glass--background--color--glass--opacity);
7310
- --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--glass--background--color--glass--default);
7311
- }
7312
- :root:where(.pf-v6-theme-high-contrast) {
7313
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7314
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7315
- --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7281
+ --pf-t--global--background--color--glass--primary--default: color-mix(in srgb, var(--pf-t--global--background--color--glass--primary) var(--pf-t--global--background--opacity--glass--primary), transparent );
7282
+ --pf-t--global--background--color--glass--floating--default: color-mix(in srgb, var(--pf-t--global--background--color--glass--floating) var(--pf-t--global--background--opacity--glass--floating), transparent );
7316
7283
  }
7317
7284
 
7318
7285
  :root:where(.pf-v6-theme-dark) {
7319
7286
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
7320
- --pf-t--global--background--filter--glass: 0;
7321
- --pf-t--global--background--opacity--glass: 100;
7287
+ --pf-t--global--background--filter--glass--blur--floating: blur(0px);
7288
+ --pf-t--global--background--filter--glass--blur--primary: blur(0px);
7289
+ --pf-t--global--background--opacity--glass--floating: 100%;
7290
+ --pf-t--global--background--opacity--glass--primary: 100%;
7322
7291
  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
7323
7292
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
7324
7293
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
@@ -8848,17 +8817,19 @@
8848
8817
  }
8849
8818
 
8850
8819
  :root:where(.pf-v6-theme-glass) {
8851
- --pf-t--global--background--color--glass--floating: rgba(255, 255, 255, 0.8000);
8852
- --pf-t--global--background--color--glass--primary: rgba(255, 255, 255, 0.8000);
8853
- --pf-t--global--background--filter--glass: 12.5;
8854
- --pf-t--global--background--opacity--glass: 80;
8820
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
8821
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
8822
+ --pf-t--global--background--opacity--glass--floating: 80%;
8823
+ --pf-t--global--background--opacity--glass--primary: 80%;
8824
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
8855
8825
  }
8856
8826
 
8857
8827
  :root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
8858
- --pf-t--global--background--color--glass--floating: rgba(41, 41, 41, 0.8000);
8859
- --pf-t--global--background--color--glass--primary: rgba(41, 41, 41, 0.8000);
8860
- --pf-t--global--background--filter--glass: 12.5;
8861
- --pf-t--global--background--opacity--glass: 80;
8828
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
8829
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
8830
+ --pf-t--global--background--opacity--glass--floating: 80%;
8831
+ --pf-t--global--background--opacity--glass--primary: 80%;
8832
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
8862
8833
  }
8863
8834
 
8864
8835
  :root:where(.pf-v6-theme-redhat) {
@@ -9049,29 +9020,31 @@
9049
9020
  }
9050
9021
 
9051
9022
  :root:where(.pf-v6-theme-redhat.pf-v6-theme-glass) {
9052
- --pf-t--global--background--color--glass--floating: rgba(255, 255, 255, 0.8000);
9053
- --pf-t--global--background--color--glass--primary: rgba(255, 255, 255, 0.8000);
9054
- --pf-t--global--background--filter--glass: 12.5;
9055
- --pf-t--global--background--opacity--glass: 80;
9023
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
9024
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
9025
+ --pf-t--global--background--opacity--glass--floating: 80%;
9026
+ --pf-t--global--background--opacity--glass--primary: 80%;
9056
9027
  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--400);
9057
9028
  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
9058
9029
  --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--400);
9059
9030
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
9060
9031
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
9061
9032
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
9033
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
9062
9034
  }
9063
9035
 
9064
9036
  :root:where(.pf-v6-theme-redhat.pf-v6-theme-glass.pf-v6-theme-dark) {
9065
- --pf-t--global--background--color--glass--floating: rgba(41, 41, 41, 0.8000);
9066
- --pf-t--global--background--color--glass--primary: rgba(41, 41, 41, 0.8000);
9067
- --pf-t--global--background--filter--glass: 12.5;
9068
- --pf-t--global--background--opacity--glass: 80;
9037
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
9038
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
9039
+ --pf-t--global--background--opacity--glass--floating: 80%;
9040
+ --pf-t--global--background--opacity--glass--primary: 80%;
9069
9041
  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--400);
9070
9042
  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--400);
9071
9043
  --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--400);
9072
9044
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--200);
9073
9045
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--100);
9074
9046
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--200);
9047
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
9075
9048
  --pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--regular);
9076
9049
  }
9077
9050
 
package/patternfly-base.css CHANGED
@@ -6528,8 +6528,10 @@ button) {
6528
6528
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
6529
6529
  --pf-t--global--background--color--700: rgba(199, 199, 199, 0.1000);
6530
6530
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
6531
- --pf-t--global--background--filter--glass: 0;
6532
- --pf-t--global--background--opacity--glass: 100;
6531
+ --pf-t--global--background--filter--glass--blur--floating: blur(0px);
6532
+ --pf-t--global--background--filter--glass--blur--primary: blur(0px);
6533
+ --pf-t--global--background--opacity--glass--floating: 100%;
6534
+ --pf-t--global--background--opacity--glass--primary: 100%;
6533
6535
  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
6534
6536
  --pf-t--global--border--radius--0: 0px;
6535
6537
  --pf-t--global--border--radius--100: 4px;
@@ -7423,49 +7425,16 @@ button) {
7423
7425
  var(--pf-t--global--box-shadow--color--lg--directional);
7424
7426
  --pf-t--global--list-style: disc outside;
7425
7427
  --pf-t--temp--dev--tbd: #BC11E0;
7426
- --pf-t--global--background--color--glass--filter--base: none;
7427
- --pf-t--global--background--color--glass--opacity--base: 1;
7428
- --pf-t--global--background--color--glass--default--base: var(--pf-t--global--background--color--primary--default);
7429
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7430
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7431
- --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7432
- --pf-t--global--dark--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7433
- --pf-t--global--dark--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7434
- --pf-t--global--dark--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7435
- --pf-t--global--light--glass--background--color--glass--color: #ffffff;
7436
- --pf-t--global--light--glass--background--color--glass--filter: blur(12.5px);
7437
- --pf-t--global--light--glass--background--color--glass--opacity: 85%;
7438
- --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 );
7439
- --pf-t--global--dark--glass--background--color--glass--color: #1d1d1d;
7440
- --pf-t--global--dark--glass--background--color--glass--filter: blur(12.5px);
7441
- --pf-t--global--dark--glass--background--color--glass--opacity: 85%;
7442
- --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 );
7443
- }
7444
- :root:where(.pf-v6-theme-dark) {
7445
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
7446
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
7447
- --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
7448
- }
7449
- :root:where(.pf-v6-theme-glass) {
7450
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--light--glass--background--color--glass--filter);
7451
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--light--glass--background--color--glass--opacity);
7452
- --pf-t--global--background--color--glass--default: var(--pf-t--global--light--glass--background--color--glass--default);
7453
- }
7454
- :root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
7455
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--glass--background--color--glass--filter);
7456
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--glass--background--color--glass--opacity);
7457
- --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--glass--background--color--glass--default);
7458
- }
7459
- :root:where(.pf-v6-theme-high-contrast) {
7460
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7461
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7462
- --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7428
+ --pf-t--global--background--color--glass--primary--default: color-mix(in srgb, var(--pf-t--global--background--color--glass--primary) var(--pf-t--global--background--opacity--glass--primary), transparent );
7429
+ --pf-t--global--background--color--glass--floating--default: color-mix(in srgb, var(--pf-t--global--background--color--glass--floating) var(--pf-t--global--background--opacity--glass--floating), transparent );
7463
7430
  }
7464
7431
 
7465
7432
  :root:where(.pf-v6-theme-dark) {
7466
7433
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
7467
- --pf-t--global--background--filter--glass: 0;
7468
- --pf-t--global--background--opacity--glass: 100;
7434
+ --pf-t--global--background--filter--glass--blur--floating: blur(0px);
7435
+ --pf-t--global--background--filter--glass--blur--primary: blur(0px);
7436
+ --pf-t--global--background--opacity--glass--floating: 100%;
7437
+ --pf-t--global--background--opacity--glass--primary: 100%;
7469
7438
  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
7470
7439
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
7471
7440
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
@@ -8995,17 +8964,19 @@ button) {
8995
8964
  }
8996
8965
 
8997
8966
  :root:where(.pf-v6-theme-glass) {
8998
- --pf-t--global--background--color--glass--floating: rgba(255, 255, 255, 0.8000);
8999
- --pf-t--global--background--color--glass--primary: rgba(255, 255, 255, 0.8000);
9000
- --pf-t--global--background--filter--glass: 12.5;
9001
- --pf-t--global--background--opacity--glass: 80;
8967
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
8968
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
8969
+ --pf-t--global--background--opacity--glass--floating: 80%;
8970
+ --pf-t--global--background--opacity--glass--primary: 80%;
8971
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
9002
8972
  }
9003
8973
 
9004
8974
  :root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
9005
- --pf-t--global--background--color--glass--floating: rgba(41, 41, 41, 0.8000);
9006
- --pf-t--global--background--color--glass--primary: rgba(41, 41, 41, 0.8000);
9007
- --pf-t--global--background--filter--glass: 12.5;
9008
- --pf-t--global--background--opacity--glass: 80;
8975
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
8976
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
8977
+ --pf-t--global--background--opacity--glass--floating: 80%;
8978
+ --pf-t--global--background--opacity--glass--primary: 80%;
8979
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
9009
8980
  }
9010
8981
 
9011
8982
  :root:where(.pf-v6-theme-redhat) {
@@ -9196,29 +9167,31 @@ button) {
9196
9167
  }
9197
9168
 
9198
9169
  :root:where(.pf-v6-theme-redhat.pf-v6-theme-glass) {
9199
- --pf-t--global--background--color--glass--floating: rgba(255, 255, 255, 0.8000);
9200
- --pf-t--global--background--color--glass--primary: rgba(255, 255, 255, 0.8000);
9201
- --pf-t--global--background--filter--glass: 12.5;
9202
- --pf-t--global--background--opacity--glass: 80;
9170
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
9171
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
9172
+ --pf-t--global--background--opacity--glass--floating: 80%;
9173
+ --pf-t--global--background--opacity--glass--primary: 80%;
9203
9174
  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--400);
9204
9175
  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
9205
9176
  --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--400);
9206
9177
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
9207
9178
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
9208
9179
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
9180
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
9209
9181
  }
9210
9182
 
9211
9183
  :root:where(.pf-v6-theme-redhat.pf-v6-theme-glass.pf-v6-theme-dark) {
9212
- --pf-t--global--background--color--glass--floating: rgba(41, 41, 41, 0.8000);
9213
- --pf-t--global--background--color--glass--primary: rgba(41, 41, 41, 0.8000);
9214
- --pf-t--global--background--filter--glass: 12.5;
9215
- --pf-t--global--background--opacity--glass: 80;
9184
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
9185
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
9186
+ --pf-t--global--background--opacity--glass--floating: 80%;
9187
+ --pf-t--global--background--opacity--glass--primary: 80%;
9216
9188
  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--400);
9217
9189
  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--400);
9218
9190
  --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--400);
9219
9191
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--200);
9220
9192
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--100);
9221
9193
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--200);
9194
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
9222
9195
  --pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--regular);
9223
9196
  }
9224
9197
 
package/patternfly-no-globals.css CHANGED
@@ -6381,8 +6381,10 @@
6381
6381
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
6382
6382
  --pf-t--global--background--color--700: rgba(199, 199, 199, 0.1000);
6383
6383
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
6384
- --pf-t--global--background--filter--glass: 0;
6385
- --pf-t--global--background--opacity--glass: 100;
6384
+ --pf-t--global--background--filter--glass--blur--floating: blur(0px);
6385
+ --pf-t--global--background--filter--glass--blur--primary: blur(0px);
6386
+ --pf-t--global--background--opacity--glass--floating: 100%;
6387
+ --pf-t--global--background--opacity--glass--primary: 100%;
6386
6388
  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
6387
6389
  --pf-t--global--border--radius--0: 0px;
6388
6390
  --pf-t--global--border--radius--100: 4px;
@@ -7276,49 +7278,16 @@
7276
7278
  var(--pf-t--global--box-shadow--color--lg--directional);
7277
7279
  --pf-t--global--list-style: disc outside;
7278
7280
  --pf-t--temp--dev--tbd: #BC11E0;
7279
- --pf-t--global--background--color--glass--filter--base: none;
7280
- --pf-t--global--background--color--glass--opacity--base: 1;
7281
- --pf-t--global--background--color--glass--default--base: var(--pf-t--global--background--color--primary--default);
7282
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7283
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7284
- --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7285
- --pf-t--global--dark--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7286
- --pf-t--global--dark--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7287
- --pf-t--global--dark--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7288
- --pf-t--global--light--glass--background--color--glass--color: #ffffff;
7289
- --pf-t--global--light--glass--background--color--glass--filter: blur(12.5px);
7290
- --pf-t--global--light--glass--background--color--glass--opacity: 85%;
7291
- --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 );
7292
- --pf-t--global--dark--glass--background--color--glass--color: #1d1d1d;
7293
- --pf-t--global--dark--glass--background--color--glass--filter: blur(12.5px);
7294
- --pf-t--global--dark--glass--background--color--glass--opacity: 85%;
7295
- --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 );
7296
- }
7297
- :root:where(.pf-v6-theme-dark) {
7298
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
7299
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
7300
- --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
7301
- }
7302
- :root:where(.pf-v6-theme-glass) {
7303
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--light--glass--background--color--glass--filter);
7304
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--light--glass--background--color--glass--opacity);
7305
- --pf-t--global--background--color--glass--default: var(--pf-t--global--light--glass--background--color--glass--default);
7306
- }
7307
- :root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
7308
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--glass--background--color--glass--filter);
7309
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--glass--background--color--glass--opacity);
7310
- --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--glass--background--color--glass--default);
7311
- }
7312
- :root:where(.pf-v6-theme-high-contrast) {
7313
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7314
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7315
- --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7281
+ --pf-t--global--background--color--glass--primary--default: color-mix(in srgb, var(--pf-t--global--background--color--glass--primary) var(--pf-t--global--background--opacity--glass--primary), transparent );
7282
+ --pf-t--global--background--color--glass--floating--default: color-mix(in srgb, var(--pf-t--global--background--color--glass--floating) var(--pf-t--global--background--opacity--glass--floating), transparent );
7316
7283
  }
7317
7284
 
7318
7285
  :root:where(.pf-v6-theme-dark) {
7319
7286
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
7320
- --pf-t--global--background--filter--glass: 0;
7321
- --pf-t--global--background--opacity--glass: 100;
7287
+ --pf-t--global--background--filter--glass--blur--floating: blur(0px);
7288
+ --pf-t--global--background--filter--glass--blur--primary: blur(0px);
7289
+ --pf-t--global--background--opacity--glass--floating: 100%;
7290
+ --pf-t--global--background--opacity--glass--primary: 100%;
7322
7291
  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
7323
7292
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
7324
7293
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
@@ -8848,17 +8817,19 @@
8848
8817
  }
8849
8818
 
8850
8819
  :root:where(.pf-v6-theme-glass) {
8851
- --pf-t--global--background--color--glass--floating: rgba(255, 255, 255, 0.8000);
8852
- --pf-t--global--background--color--glass--primary: rgba(255, 255, 255, 0.8000);
8853
- --pf-t--global--background--filter--glass: 12.5;
8854
- --pf-t--global--background--opacity--glass: 80;
8820
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
8821
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
8822
+ --pf-t--global--background--opacity--glass--floating: 80%;
8823
+ --pf-t--global--background--opacity--glass--primary: 80%;
8824
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
8855
8825
  }
8856
8826
 
8857
8827
  :root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
8858
- --pf-t--global--background--color--glass--floating: rgba(41, 41, 41, 0.8000);
8859
- --pf-t--global--background--color--glass--primary: rgba(41, 41, 41, 0.8000);
8860
- --pf-t--global--background--filter--glass: 12.5;
8861
- --pf-t--global--background--opacity--glass: 80;
8828
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
8829
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
8830
+ --pf-t--global--background--opacity--glass--floating: 80%;
8831
+ --pf-t--global--background--opacity--glass--primary: 80%;
8832
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
8862
8833
  }
8863
8834
 
8864
8835
  :root:where(.pf-v6-theme-redhat) {
@@ -9049,29 +9020,31 @@
9049
9020
  }
9050
9021
 
9051
9022
  :root:where(.pf-v6-theme-redhat.pf-v6-theme-glass) {
9052
- --pf-t--global--background--color--glass--floating: rgba(255, 255, 255, 0.8000);
9053
- --pf-t--global--background--color--glass--primary: rgba(255, 255, 255, 0.8000);
9054
- --pf-t--global--background--filter--glass: 12.5;
9055
- --pf-t--global--background--opacity--glass: 80;
9023
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
9024
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
9025
+ --pf-t--global--background--opacity--glass--floating: 80%;
9026
+ --pf-t--global--background--opacity--glass--primary: 80%;
9056
9027
  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--400);
9057
9028
  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
9058
9029
  --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--400);
9059
9030
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
9060
9031
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
9061
9032
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
9033
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
9062
9034
  }
9063
9035
 
9064
9036
  :root:where(.pf-v6-theme-redhat.pf-v6-theme-glass.pf-v6-theme-dark) {
9065
- --pf-t--global--background--color--glass--floating: rgba(41, 41, 41, 0.8000);
9066
- --pf-t--global--background--color--glass--primary: rgba(41, 41, 41, 0.8000);
9067
- --pf-t--global--background--filter--glass: 12.5;
9068
- --pf-t--global--background--opacity--glass: 80;
9037
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
9038
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
9039
+ --pf-t--global--background--opacity--glass--floating: 80%;
9040
+ --pf-t--global--background--opacity--glass--primary: 80%;
9069
9041
  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--400);
9070
9042
  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--400);
9071
9043
  --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--400);
9072
9044
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--200);
9073
9045
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--100);
9074
9046
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--200);
9047
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
9075
9048
  --pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--regular);
9076
9049
  }
9077
9050
 
@@ -12646,8 +12619,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12646
12619
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
12647
12620
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
12648
12621
  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
12649
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12650
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12622
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
12623
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
12651
12624
  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
12652
12625
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
12653
12626
  --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
@@ -15271,8 +15244,8 @@ ul) {
15271
15244
  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
15272
15245
  --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
15273
15246
  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
15274
- --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
15275
- --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
15247
+ --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
15248
+ --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
15276
15249
  --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
15277
15250
  }
15278
15251
  @media screen and (prefers-reduced-motion: no-preference) {
@@ -17500,8 +17473,8 @@ ul) {
17500
17473
  --pf-v6-c-hero--gradient--stop-1--dark: transparent;
17501
17474
  --pf-v6-c-hero--gradient--stop-2--dark: transparent;
17502
17475
  --pf-v6-c-hero--gradient--stop-3--dark: transparent;
17503
- --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--default);
17504
- --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
17476
+ --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
17477
+ --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
17505
17478
  --pf-v6-c-hero--BackgroundImage--light: none;
17506
17479
  --pf-v6-c-hero--BackgroundImage--dark: none;
17507
17480
  --pf-v6-c-hero--BackgroundRepeat: no-repeat;
@@ -19420,8 +19393,8 @@ ul.pf-v6-c-list {
19420
19393
  --pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
19421
19394
  --pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
19422
19395
  --pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
19423
- --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--default);
19424
- --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
19396
+ --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
19397
+ --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
19425
19398
  --pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
19426
19399
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
19427
19400
  --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
@@ -21997,6 +21970,7 @@ ul.pf-v6-c-list {
21997
21970
  --pf-v6-c-notification-drawer__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
21998
21971
  --pf-v6-c-notification-drawer__header-status--FontSize: var(--pf-t--global--font--size--body--default);
21999
21972
  --pf-v6-c-notification-drawer__header-status--Color: var(--pf-t--global--text--color--subtle);
21973
+ --pf-v6-c-notification-drawer__header-action--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
22000
21974
  --pf-v6-c-notification-drawer__body--ZIndex: var(--pf-t--global--z-index--xs);
22001
21975
  --pf-v6-c-notification-drawer__body--PaddingBlockStart: 0;
22002
21976
  --pf-v6-c-notification-drawer__body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -22091,6 +22065,7 @@ ul.pf-v6-c-list {
22091
22065
 
22092
22066
  .pf-v6-c-notification-drawer__header-action {
22093
22067
  display: flex;
22068
+ gap: var(--pf-v6-c-notification-drawer__header-action--Gap);
22094
22069
  align-items: center;
22095
22070
  margin-inline-start: auto;
22096
22071
  }