@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.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
 
@@ -12793,8 +12766,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12793
12766
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
12794
12767
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
12795
12768
  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
12796
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12797
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12769
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
12770
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
12798
12771
  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
12799
12772
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
12800
12773
  --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
@@ -15418,8 +15391,8 @@ ul) {
15418
15391
  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
15419
15392
  --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
15420
15393
  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
15421
- --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
15422
- --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
15394
+ --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
15395
+ --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
15423
15396
  --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
15424
15397
  }
15425
15398
  @media screen and (prefers-reduced-motion: no-preference) {
@@ -17647,8 +17620,8 @@ ul) {
17647
17620
  --pf-v6-c-hero--gradient--stop-1--dark: transparent;
17648
17621
  --pf-v6-c-hero--gradient--stop-2--dark: transparent;
17649
17622
  --pf-v6-c-hero--gradient--stop-3--dark: transparent;
17650
- --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--default);
17651
- --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
17623
+ --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
17624
+ --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
17652
17625
  --pf-v6-c-hero--BackgroundImage--light: none;
17653
17626
  --pf-v6-c-hero--BackgroundImage--dark: none;
17654
17627
  --pf-v6-c-hero--BackgroundRepeat: no-repeat;
@@ -19567,8 +19540,8 @@ ul.pf-v6-c-list {
19567
19540
  --pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
19568
19541
  --pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
19569
19542
  --pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
19570
- --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--default);
19571
- --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
19543
+ --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
19544
+ --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
19572
19545
  --pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
19573
19546
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
19574
19547
  --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
@@ -22144,6 +22117,7 @@ ul.pf-v6-c-list {
22144
22117
  --pf-v6-c-notification-drawer__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
22145
22118
  --pf-v6-c-notification-drawer__header-status--FontSize: var(--pf-t--global--font--size--body--default);
22146
22119
  --pf-v6-c-notification-drawer__header-status--Color: var(--pf-t--global--text--color--subtle);
22120
+ --pf-v6-c-notification-drawer__header-action--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
22147
22121
  --pf-v6-c-notification-drawer__body--ZIndex: var(--pf-t--global--z-index--xs);
22148
22122
  --pf-v6-c-notification-drawer__body--PaddingBlockStart: 0;
22149
22123
  --pf-v6-c-notification-drawer__body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -22238,6 +22212,7 @@ ul.pf-v6-c-list {
22238
22212
 
22239
22213
  .pf-v6-c-notification-drawer__header-action {
22240
22214
  display: flex;
22215
+ gap: var(--pf-v6-c-notification-drawer__header-action--Gap);
22241
22216
  align-items: center;
22242
22217
  margin-inline-start: auto;
22243
22218
  }