@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/base/patternfly-variables.css CHANGED
@@ -80,8 +80,10 @@
80
80
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
81
81
  --pf-t--global--background--color--700: rgba(199, 199, 199, 0.1000);
82
82
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
83
- --pf-t--global--background--filter--glass: 0;
84
- --pf-t--global--background--opacity--glass: 100;
83
+ --pf-t--global--background--filter--glass--blur--floating: blur(0px);
84
+ --pf-t--global--background--filter--glass--blur--primary: blur(0px);
85
+ --pf-t--global--background--opacity--glass--floating: 100%;
86
+ --pf-t--global--background--opacity--glass--primary: 100%;
85
87
  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
86
88
  --pf-t--global--border--radius--0: 0px;
87
89
  --pf-t--global--border--radius--100: 4px;
@@ -975,49 +977,16 @@
975
977
  var(--pf-t--global--box-shadow--color--lg--directional);
976
978
  --pf-t--global--list-style: disc outside;
977
979
  --pf-t--temp--dev--tbd: #BC11E0;
978
- --pf-t--global--background--color--glass--filter--base: none;
979
- --pf-t--global--background--color--glass--opacity--base: 1;
980
- --pf-t--global--background--color--glass--default--base: var(--pf-t--global--background--color--primary--default);
981
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
982
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
983
- --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
984
- --pf-t--global--dark--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
985
- --pf-t--global--dark--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
986
- --pf-t--global--dark--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
987
- --pf-t--global--light--glass--background--color--glass--color: #ffffff;
988
- --pf-t--global--light--glass--background--color--glass--filter: blur(12.5px);
989
- --pf-t--global--light--glass--background--color--glass--opacity: 85%;
990
- --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 );
991
- --pf-t--global--dark--glass--background--color--glass--color: #1d1d1d;
992
- --pf-t--global--dark--glass--background--color--glass--filter: blur(12.5px);
993
- --pf-t--global--dark--glass--background--color--glass--opacity: 85%;
994
- --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 );
995
- }
996
- :root:where(.pf-v6-theme-dark) {
997
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
998
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
999
- --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
1000
- }
1001
- :root:where(.pf-v6-theme-glass) {
1002
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--light--glass--background--color--glass--filter);
1003
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--light--glass--background--color--glass--opacity);
1004
- --pf-t--global--background--color--glass--default: var(--pf-t--global--light--glass--background--color--glass--default);
1005
- }
1006
- :root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
1007
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--glass--background--color--glass--filter);
1008
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--glass--background--color--glass--opacity);
1009
- --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--glass--background--color--glass--default);
1010
- }
1011
- :root:where(.pf-v6-theme-high-contrast) {
1012
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
1013
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
1014
- --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
980
+ --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 );
981
+ --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 );
1015
982
  }
1016
983
 
1017
984
  :root:where(.pf-v6-theme-dark) {
1018
985
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
1019
- --pf-t--global--background--filter--glass: 0;
1020
- --pf-t--global--background--opacity--glass: 100;
986
+ --pf-t--global--background--filter--glass--blur--floating: blur(0px);
987
+ --pf-t--global--background--filter--glass--blur--primary: blur(0px);
988
+ --pf-t--global--background--opacity--glass--floating: 100%;
989
+ --pf-t--global--background--opacity--glass--primary: 100%;
1021
990
  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
1022
991
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
1023
992
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
@@ -2547,17 +2516,19 @@
2547
2516
  }
2548
2517
 
2549
2518
  :root:where(.pf-v6-theme-glass) {
2550
- --pf-t--global--background--color--glass--floating: rgba(255, 255, 255, 0.8000);
2551
- --pf-t--global--background--color--glass--primary: rgba(255, 255, 255, 0.8000);
2552
- --pf-t--global--background--filter--glass: 12.5;
2553
- --pf-t--global--background--opacity--glass: 80;
2519
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
2520
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
2521
+ --pf-t--global--background--opacity--glass--floating: 80%;
2522
+ --pf-t--global--background--opacity--glass--primary: 80%;
2523
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
2554
2524
  }
2555
2525
 
2556
2526
  :root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
2557
- --pf-t--global--background--color--glass--floating: rgba(41, 41, 41, 0.8000);
2558
- --pf-t--global--background--color--glass--primary: rgba(41, 41, 41, 0.8000);
2559
- --pf-t--global--background--filter--glass: 12.5;
2560
- --pf-t--global--background--opacity--glass: 80;
2527
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
2528
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
2529
+ --pf-t--global--background--opacity--glass--floating: 80%;
2530
+ --pf-t--global--background--opacity--glass--primary: 80%;
2531
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
2561
2532
  }
2562
2533
 
2563
2534
  :root:where(.pf-v6-theme-redhat) {
@@ -2748,29 +2719,31 @@
2748
2719
  }
2749
2720
 
2750
2721
  :root:where(.pf-v6-theme-redhat.pf-v6-theme-glass) {
2751
- --pf-t--global--background--color--glass--floating: rgba(255, 255, 255, 0.8000);
2752
- --pf-t--global--background--color--glass--primary: rgba(255, 255, 255, 0.8000);
2753
- --pf-t--global--background--filter--glass: 12.5;
2754
- --pf-t--global--background--opacity--glass: 80;
2722
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
2723
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
2724
+ --pf-t--global--background--opacity--glass--floating: 80%;
2725
+ --pf-t--global--background--opacity--glass--primary: 80%;
2755
2726
  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--400);
2756
2727
  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
2757
2728
  --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--400);
2758
2729
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
2759
2730
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
2760
2731
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
2732
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
2761
2733
  }
2762
2734
 
2763
2735
  :root:where(.pf-v6-theme-redhat.pf-v6-theme-glass.pf-v6-theme-dark) {
2764
- --pf-t--global--background--color--glass--floating: rgba(41, 41, 41, 0.8000);
2765
- --pf-t--global--background--color--glass--primary: rgba(41, 41, 41, 0.8000);
2766
- --pf-t--global--background--filter--glass: 12.5;
2767
- --pf-t--global--background--opacity--glass: 80;
2736
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
2737
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
2738
+ --pf-t--global--background--opacity--glass--floating: 80%;
2739
+ --pf-t--global--background--opacity--glass--primary: 80%;
2768
2740
  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--400);
2769
2741
  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--400);
2770
2742
  --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--400);
2771
2743
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--200);
2772
2744
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--100);
2773
2745
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--200);
2746
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
2774
2747
  --pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--regular);
2775
2748
  }
2776
2749
 
package/base/tokens/tokens-dark.scss CHANGED
@@ -1,11 +1,13 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 23 Jan 2026 20:37:44 GMT
3
+ // Generated on Sat, 07 Feb 2026 00:03:04 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
7
- --pf-t--global--background--filter--glass: 0;
8
- --pf-t--global--background--opacity--glass: 100;
7
+ --pf-t--global--background--filter--glass--blur--floating: blur(0px);
8
+ --pf-t--global--background--filter--glass--blur--primary: blur(0px);
9
+ --pf-t--global--background--opacity--glass--floating: 100%;
10
+ --pf-t--global--background--opacity--glass--primary: 100%;
9
11
  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
10
12
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
11
13
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
package/base/tokens/tokens-default.scss CHANGED
@@ -1,14 +1,16 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 23 Jan 2026 20:37:43 GMT
3
+ // Generated on Sat, 07 Feb 2026 00:03:04 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.4000);
7
7
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
8
8
  --pf-t--global--background--color--700: rgba(199, 199, 199, 0.1000);
9
9
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
10
- --pf-t--global--background--filter--glass: 0;
11
- --pf-t--global--background--opacity--glass: 100;
10
+ --pf-t--global--background--filter--glass--blur--floating: blur(0px);
11
+ --pf-t--global--background--filter--glass--blur--primary: blur(0px);
12
+ --pf-t--global--background--opacity--glass--floating: 100%;
13
+ --pf-t--global--background--opacity--glass--primary: 100%;
12
14
  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
13
15
  --pf-t--global--border--radius--0: 0px;
14
16
  --pf-t--global--border--radius--100: 4px;
package/base/tokens/tokens-glass-dark.scss CHANGED
@@ -1,11 +1,12 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 23 Jan 2026 20:37:44 GMT
3
+ // Generated on Sat, 07 Feb 2026 00:03:04 GMT
4
4
 
5
- // Only tokens that differ from base theme (4 tokens)
5
+ // Only tokens that differ from base theme (5 tokens)
6
6
  @mixin pf-v6-tokens {
7
- --pf-t--global--background--color--glass--floating: rgba(41, 41, 41, 0.8000);
8
- --pf-t--global--background--color--glass--primary: rgba(41, 41, 41, 0.8000);
9
- --pf-t--global--background--filter--glass: 12.5;
10
- --pf-t--global--background--opacity--glass: 80;
7
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
8
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
9
+ --pf-t--global--background--opacity--glass--floating: 80%;
10
+ --pf-t--global--background--opacity--glass--primary: 80%;
11
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
11
12
  }
package/base/tokens/tokens-glass.scss CHANGED
@@ -1,11 +1,12 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 23 Jan 2026 20:37:44 GMT
3
+ // Generated on Sat, 07 Feb 2026 00:03:04 GMT
4
4
 
5
- // Only tokens that differ from base theme (4 tokens)
5
+ // Only tokens that differ from base theme (5 tokens)
6
6
  @mixin pf-v6-tokens {
7
- --pf-t--global--background--color--glass--floating: rgba(255, 255, 255, 0.8000);
8
- --pf-t--global--background--color--glass--primary: rgba(255, 255, 255, 0.8000);
9
- --pf-t--global--background--filter--glass: 12.5;
10
- --pf-t--global--background--opacity--glass: 80;
7
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
8
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
9
+ --pf-t--global--background--opacity--glass--floating: 80%;
10
+ --pf-t--global--background--opacity--glass--primary: 80%;
11
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
11
12
  }
package/base/tokens/tokens-local.scss CHANGED
@@ -137,57 +137,7 @@
137
137
  --pf-t--temp--dev--tbd: #BC11E0;
138
138
  // stylelint-enable
139
139
 
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 );
163
-
164
- // Dark theme
165
- &:where(.#{$pf-prefix}theme-dark) {
166
- --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
167
- --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
168
- --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
169
- }
170
-
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);
190
- }
140
+ // Glass theme background tokens
141
+ --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 );
142
+ --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 );
191
143
  }
192
-
193
-
package/base/tokens/tokens-redhat-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 23 Jan 2026 20:37:44 GMT
3
+ // Generated on Sat, 07 Feb 2026 00:03:04 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (7 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-redhat-glass-dark.scss CHANGED
@@ -1,18 +1,19 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 23 Jan 2026 20:37:44 GMT
3
+ // Generated on Sat, 07 Feb 2026 00:03:04 GMT
4
4
 
5
- // Only tokens that differ from base theme (11 tokens)
5
+ // Only tokens that differ from base theme (12 tokens)
6
6
  @mixin pf-v6-tokens {
7
- --pf-t--global--background--color--glass--floating: rgba(41, 41, 41, 0.8000);
8
- --pf-t--global--background--color--glass--primary: rgba(41, 41, 41, 0.8000);
9
- --pf-t--global--background--filter--glass: 12.5;
10
- --pf-t--global--background--opacity--glass: 80;
7
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
8
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
9
+ --pf-t--global--background--opacity--glass--floating: 80%;
10
+ --pf-t--global--background--opacity--glass--primary: 80%;
11
11
  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--400);
12
12
  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--400);
13
13
  --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--400);
14
14
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--200);
15
15
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--100);
16
16
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--200);
17
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
17
18
  --pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--regular);
18
19
  }
package/base/tokens/tokens-redhat-glass.scss CHANGED
@@ -1,17 +1,18 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 23 Jan 2026 20:37:44 GMT
3
+ // Generated on Sat, 07 Feb 2026 00:03:04 GMT
4
4
 
5
- // Only tokens that differ from base theme (10 tokens)
5
+ // Only tokens that differ from base theme (11 tokens)
6
6
  @mixin pf-v6-tokens {
7
- --pf-t--global--background--color--glass--floating: rgba(255, 255, 255, 0.8000);
8
- --pf-t--global--background--color--glass--primary: rgba(255, 255, 255, 0.8000);
9
- --pf-t--global--background--filter--glass: 12.5;
10
- --pf-t--global--background--opacity--glass: 80;
7
+ --pf-t--global--background--filter--glass--blur--floating: blur(12.5px);
8
+ --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
9
+ --pf-t--global--background--opacity--glass--floating: 80%;
10
+ --pf-t--global--background--opacity--glass--primary: 80%;
11
11
  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--400);
12
12
  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
13
13
  --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--400);
14
14
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
15
15
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
16
16
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
17
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
17
18
  }
package/base/tokens/tokens-redhat-highcontrast-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 23 Jan 2026 20:37:44 GMT
3
+ // Generated on Sat, 07 Feb 2026 00:03:05 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (40 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-redhat-highcontrast.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 23 Jan 2026 20:37:44 GMT
3
+ // Generated on Sat, 07 Feb 2026 00:03:05 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (120 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-redhat.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 23 Jan 2026 20:37:44 GMT
3
+ // Generated on Sat, 07 Feb 2026 00:03:04 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (8 tokens)
6
6
  @mixin pf-v6-tokens {
package/components/Compass/compass.css CHANGED
@@ -24,8 +24,8 @@
24
24
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
25
25
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
26
26
  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
27
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
28
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
27
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
28
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
29
29
  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
30
30
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
31
31
  --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
package/components/Compass/compass.scss CHANGED
@@ -26,8 +26,8 @@
26
26
  --#{$compass}__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
27
27
  --#{$compass}__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
28
28
  --#{$compass}__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
29
- --#{$compass}__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
30
- --#{$compass}__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
29
+ --#{$compass}__panel--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
30
+ --#{$compass}__panel--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
31
31
  --#{$compass}__panel--BorderColor: var(--pf-t--global--border--color--alt);
32
32
  --#{$compass}__panel--BorderRadius: var(--pf-t--global--border--radius--large);
33
33
  --#{$compass}__panel--BorderWidth: var(--pf-t--global--border--width--regular);
package/components/Drawer/drawer.css CHANGED
@@ -53,8 +53,8 @@
53
53
  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
54
54
  --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
55
55
  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
56
- --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
57
- --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
56
+ --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
57
+ --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
58
58
  --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
59
59
  }
60
60
  @media screen and (prefers-reduced-motion: no-preference) {
package/components/Drawer/drawer.scss CHANGED
@@ -67,8 +67,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
67
67
  --#{$drawer}--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
68
68
  --#{$drawer}--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
69
69
  --#{$drawer}--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
70
- --#{$drawer}__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
71
- --#{$drawer}__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
70
+ --#{$drawer}__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
71
+ --#{$drawer}__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
72
72
  --#{$drawer}__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
73
73
 
74
74
  @media screen and (prefers-reduced-motion: no-preference) {
package/components/Hero/hero.css CHANGED
@@ -10,8 +10,8 @@
10
10
  --pf-v6-c-hero--gradient--stop-1--dark: transparent;
11
11
  --pf-v6-c-hero--gradient--stop-2--dark: transparent;
12
12
  --pf-v6-c-hero--gradient--stop-3--dark: transparent;
13
- --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--default);
14
- --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
13
+ --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
14
+ --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
15
15
  --pf-v6-c-hero--BackgroundImage--light: none;
16
16
  --pf-v6-c-hero--BackgroundImage--dark: none;
17
17
  --pf-v6-c-hero--BackgroundRepeat: no-repeat;
package/components/Hero/hero.scss CHANGED
@@ -12,8 +12,8 @@
12
12
  --#{$hero}--gradient--stop-1--dark: transparent;
13
13
  --#{$hero}--gradient--stop-2--dark: transparent;
14
14
  --#{$hero}--gradient--stop-3--dark: transparent;
15
- --#{$hero}--BackgroundColor: var(--pf-t--global--background--color--glass--default);
16
- --#{$hero}--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
15
+ --#{$hero}--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
16
+ --#{$hero}--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
17
17
  --#{$hero}--BackgroundImage--light: none;
18
18
  --#{$hero}--BackgroundImage--dark: none;
19
19
  --#{$hero}--BackgroundRepeat: no-repeat;
package/components/Masthead/masthead.css CHANGED
@@ -42,8 +42,8 @@
42
42
  --pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
43
43
  --pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
44
44
  --pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
45
- --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--default);
46
- --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
45
+ --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
46
+ --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
47
47
  --pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
48
48
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
49
49
  --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
package/components/Masthead/masthead.scss CHANGED
@@ -62,8 +62,8 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
62
62
  --#{$masthead}--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
63
63
  --#{$masthead}--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
64
64
  --#{$masthead}--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
65
- --#{$masthead}--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--default);
66
- --#{$masthead}--m-docked--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
65
+ --#{$masthead}--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
66
+ --#{$masthead}--m-docked--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
67
67
  --#{$masthead}--m-docked--c-toolbar--Height: 100%;
68
68
 
69
69
  // * Masthead toolbar
package/components/NotificationDrawer/notification-drawer.css CHANGED
@@ -14,6 +14,7 @@
14
14
  --pf-v6-c-notification-drawer__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
15
15
  --pf-v6-c-notification-drawer__header-status--FontSize: var(--pf-t--global--font--size--body--default);
16
16
  --pf-v6-c-notification-drawer__header-status--Color: var(--pf-t--global--text--color--subtle);
17
+ --pf-v6-c-notification-drawer__header-action--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
17
18
  --pf-v6-c-notification-drawer__body--ZIndex: var(--pf-t--global--z-index--xs);
18
19
  --pf-v6-c-notification-drawer__body--PaddingBlockStart: 0;
19
20
  --pf-v6-c-notification-drawer__body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -108,6 +109,7 @@
108
109
 
109
110
  .pf-v6-c-notification-drawer__header-action {
110
111
  display: flex;
112
+ gap: var(--pf-v6-c-notification-drawer__header-action--Gap);
111
113
  align-items: center;
112
114
  margin-inline-start: auto;
113
115
  }
package/components/NotificationDrawer/notification-drawer.scss CHANGED
@@ -18,6 +18,7 @@
18
18
  --#{$notification-drawer}__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
19
19
  --#{$notification-drawer}__header-status--FontSize: var(--pf-t--global--font--size--body--default);
20
20
  --#{$notification-drawer}__header-status--Color: var(--pf-t--global--text--color--subtle);
21
+ --#{$notification-drawer}__header-action--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
21
22
 
22
23
  // Body
23
24
  --#{$notification-drawer}__body--ZIndex: var(--pf-t--global--z-index--xs);
@@ -143,6 +144,7 @@
143
144
 
144
145
  .#{$notification-drawer}__header-action {
145
146
  display: flex;
147
+ gap: var(--#{$notification-drawer}__header-action--Gap);
146
148
  align-items: center;
147
149
  margin-inline-start: auto;
148
150
  }
package/components/_index.css CHANGED
@@ -3565,8 +3565,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3565
3565
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
3566
3566
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
3567
3567
  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
3568
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
3569
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
3568
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
3569
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
3570
3570
  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
3571
3571
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
3572
3572
  --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
@@ -6190,8 +6190,8 @@ ul) {
6190
6190
  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
6191
6191
  --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
6192
6192
  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
6193
- --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
6194
- --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
6193
+ --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
6194
+ --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
6195
6195
  --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
6196
6196
  }
6197
6197
  @media screen and (prefers-reduced-motion: no-preference) {
@@ -8419,8 +8419,8 @@ ul) {
8419
8419
  --pf-v6-c-hero--gradient--stop-1--dark: transparent;
8420
8420
  --pf-v6-c-hero--gradient--stop-2--dark: transparent;
8421
8421
  --pf-v6-c-hero--gradient--stop-3--dark: transparent;
8422
- --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--default);
8423
- --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
8422
+ --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
8423
+ --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
8424
8424
  --pf-v6-c-hero--BackgroundImage--light: none;
8425
8425
  --pf-v6-c-hero--BackgroundImage--dark: none;
8426
8426
  --pf-v6-c-hero--BackgroundRepeat: no-repeat;
@@ -10339,8 +10339,8 @@ ul.pf-v6-c-list {
10339
10339
  --pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
10340
10340
  --pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
10341
10341
  --pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
10342
- --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--default);
10343
- --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
10342
+ --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
10343
+ --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
10344
10344
  --pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
10345
10345
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
10346
10346
  --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
@@ -12916,6 +12916,7 @@ ul.pf-v6-c-list {
12916
12916
  --pf-v6-c-notification-drawer__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
12917
12917
  --pf-v6-c-notification-drawer__header-status--FontSize: var(--pf-t--global--font--size--body--default);
12918
12918
  --pf-v6-c-notification-drawer__header-status--Color: var(--pf-t--global--text--color--subtle);
12919
+ --pf-v6-c-notification-drawer__header-action--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
12919
12920
  --pf-v6-c-notification-drawer__body--ZIndex: var(--pf-t--global--z-index--xs);
12920
12921
  --pf-v6-c-notification-drawer__body--PaddingBlockStart: 0;
12921
12922
  --pf-v6-c-notification-drawer__body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -13010,6 +13011,7 @@ ul.pf-v6-c-list {
13010
13011
 
13011
13012
  .pf-v6-c-notification-drawer__header-action {
13012
13013
  display: flex;
13014
+ gap: var(--pf-v6-c-notification-drawer__header-action--Gap);
13013
13015
  align-items: center;
13014
13016
  margin-inline-start: auto;
13015
13017
  }
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.35",
4
+ "version": "6.5.0-prerelease.37",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -49,11 +49,12 @@
49
49
  "@commitlint/config-conventional": "^19.1.0",
50
50
  "@fortawesome/fontawesome": "^1.1.8",
51
51
  "@octokit/rest": "^20.1.0",
52
- "@patternfly/documentation-framework": "6.33.5",
52
+ "@patternfly/documentation-framework": "6.35.0",
53
53
  "@patternfly/patternfly-a11y": "5.1.0",
54
- "@patternfly/react-code-editor": "6.4.0",
55
- "@patternfly/react-core": "6.4.0",
56
- "@patternfly/react-table": "6.4.0",
54
+ "@patternfly/react-code-editor": "6.4.1",
55
+ "@patternfly/react-core": "6.4.1",
56
+ "@patternfly/react-icons": "6.5.0-prerelease.13",
57
+ "@patternfly/react-table": "6.4.1",
57
58
  "@rspack/cli": "^1.6.0",
58
59
  "@rspack/core": "^1.6.0",
59
60
  "@rspack/dev-server": "^1.1.4",