@patternfly/patternfly 6.5.0-prerelease.53 → 6.5.0-prerelease.55

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 (87) hide show
  1. package/assets/images/compass--hero-bg.png +0 -0
  2. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  3. package/assets/images/compass--wallpaper-light.jpg +0 -0
  4. package/assets/images/glass-brand-dark.jpg +0 -0
  5. package/assets/images/glass-brand-dark.png +0 -0
  6. package/assets/images/glass-brand-light.jpg +0 -0
  7. package/assets/images/glass-brand-light.png +0 -0
  8. package/base/patternfly-variables.css +4238 -784
  9. package/base/patternfly-variables.scss +23 -21
  10. package/base/tokens/tokens-dark.scss +17 -17
  11. package/base/tokens/tokens-default.scss +18 -16
  12. package/base/tokens/tokens-glass-dark.scss +21 -4
  13. package/base/tokens/tokens-glass.scss +17 -4
  14. package/base/tokens/tokens-local.scss +4 -3
  15. package/base/tokens/tokens-palette.scss +1 -1
  16. package/base/tokens/tokens-redhat-dark.scss +432 -2
  17. package/base/tokens/tokens-redhat-glass-dark.scss +432 -4
  18. package/base/tokens/tokens-redhat-glass.scss +748 -4
  19. package/base/tokens/tokens-redhat-highcontrast-dark.scss +400 -3
  20. package/base/tokens/tokens-redhat-highcontrast.scss +635 -3
  21. package/base/tokens/tokens-redhat.scss +786 -2
  22. package/components/Accordion/accordion.css +10 -0
  23. package/components/Accordion/accordion.scss +11 -0
  24. package/components/Button/button.css +0 -14
  25. package/components/Button/button.scss +1 -16
  26. package/components/Card/card.css +13 -0
  27. package/components/Card/card.scss +20 -0
  28. package/components/Compass/compass.css +6 -6
  29. package/components/Compass/compass.scss +6 -6
  30. package/components/DataList/data-list.css +1 -1
  31. package/components/DataList/data-list.scss +1 -0
  32. package/components/Drawer/drawer.css +11 -6
  33. package/components/Drawer/drawer.scss +24 -11
  34. package/components/Login/login.css +7 -3
  35. package/components/Login/login.scss +7 -3
  36. package/components/Masthead/masthead.css +11 -3
  37. package/components/Masthead/masthead.scss +14 -4
  38. package/components/MenuToggle/menu-toggle.scss +1 -1
  39. package/components/Nav/nav.scss +1 -1
  40. package/components/Page/page.css +115 -8
  41. package/components/Page/page.scss +123 -11
  42. package/components/Panel/panel.css +14 -0
  43. package/components/Panel/panel.scss +18 -0
  44. package/components/Table/table-grid.css +4 -4
  45. package/components/Table/table-grid.scss +4 -4
  46. package/components/Table/table.css +12 -7
  47. package/components/Table/table.scss +13 -9
  48. package/components/Wizard/wizard.css +20 -2
  49. package/components/Wizard/wizard.scss +22 -2
  50. package/components/_index.css +224 -54
  51. package/docs/components/Accordion/examples/Accordion.md +1 -0
  52. package/docs/components/Card/examples/Card.md +1 -0
  53. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  54. package/docs/components/Page/examples/Page.md +47 -37
  55. package/docs/components/Panel/examples/Panel.md +12 -0
  56. package/docs/components/Wizard/examples/Wizard.md +323 -0
  57. package/docs/demos/AboutModal/examples/AboutModal.md +40 -38
  58. package/docs/demos/Alert/examples/Alert.md +120 -114
  59. package/docs/demos/BackToTop/examples/BackToTop.md +40 -38
  60. package/docs/demos/Banner/examples/Banner.md +80 -76
  61. package/docs/demos/CardView/examples/CardView.md +297 -271
  62. package/docs/demos/Compass/examples/Compass.md +1409 -2732
  63. package/docs/demos/Dashboard/examples/Dashboard.md +40 -38
  64. package/docs/demos/DataList/examples/DataList.md +160 -152
  65. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -114
  66. package/docs/demos/Drawer/examples/Drawer.md +200 -190
  67. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -228
  68. package/docs/demos/Masthead/examples/Masthead.md +320 -304
  69. package/docs/demos/Modal/examples/Modal.md +240 -228
  70. package/docs/demos/Nav/examples/Nav.md +2302 -600
  71. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +180 -170
  72. package/docs/demos/Page/examples/Page.md +606 -568
  73. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -266
  74. package/docs/demos/Skeleton/examples/Skeleton.md +40 -38
  75. package/docs/demos/Table/examples/Table.md +640 -604
  76. package/docs/demos/Tabs/examples/Tabs.md +240 -228
  77. package/docs/demos/Toolbar/examples/Toolbar.md +80 -76
  78. package/docs/demos/Wizard/examples/Wizard.md +360 -342
  79. package/package.json +1 -1
  80. package/patternfly-base-no-globals.css +4238 -784
  81. package/patternfly-base.css +4238 -784
  82. package/patternfly-no-globals.css +4376 -735
  83. package/patternfly.css +4376 -735
  84. package/patternfly.min.css +1 -1
  85. package/patternfly.min.css.map +1 -1
  86. package/patternfly.scss +27 -0
  87. package/sass-utilities/scss-variables.scss +1 -1
package/base/patternfly-variables.scss CHANGED
@@ -21,47 +21,49 @@
21
21
  @include local.pf-v6-tokens;
22
22
  }
23
23
 
24
- :root:where(.pf-v6-theme-dark) {
25
- @include dark.pf-v6-tokens;
26
- }
27
-
24
+ // Default
28
25
  :root:where(.pf-v6-theme-high-contrast) {
29
26
  @include highcontrast.pf-v6-tokens;
30
27
  }
31
28
 
32
- :root:where(.pf-v6-theme-high-contrast.pf-v6-theme-dark) {
33
- @include highcontrast-dark.pf-v6-tokens;
34
- }
35
-
36
29
  :root:where(.pf-v6-theme-glass) {
37
30
  @include glass.pf-v6-tokens;
38
31
  }
39
32
 
40
- :root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
41
- @include glass-dark.pf-v6-tokens;
42
- }
43
-
44
33
  :root:where(.pf-v6-theme-redhat) {
45
34
  @include redhat.pf-v6-tokens;
46
35
  }
47
36
 
48
- :root:where(.pf-v6-theme-redhat.pf-v6-theme-dark) {
49
- @include redhat-dark.pf-v6-tokens;
50
- }
51
-
52
37
  :root:where(.pf-v6-theme-redhat.pf-v6-theme-high-contrast) {
53
38
  @include redhat-highcontrast.pf-v6-tokens;
54
39
  }
55
40
 
56
- :root:where(.pf-v6-theme-redhat.pf-v6-theme-high-contrast.pf-v6-theme-dark) {
57
- @include redhat-highcontrast-dark.pf-v6-tokens;
58
- }
59
-
60
41
  :root:where(.pf-v6-theme-redhat.pf-v6-theme-glass) {
61
42
  @include redhat-glass.pf-v6-tokens;
62
43
  }
63
44
 
64
- :root:where(.pf-v6-theme-redhat.pf-v6-theme-glass.pf-v6-theme-dark) {
45
+ // Dark
46
+ :root:where(.pf-v6-theme-dark) {
47
+ @include dark.pf-v6-tokens;
48
+ }
49
+
50
+ :root:where(.pf-v6-theme-dark.pf-v6-theme-high-contrast) {
51
+ @include highcontrast-dark.pf-v6-tokens;
52
+ }
53
+
54
+ :root:where(.pf-v6-theme-dark.pf-v6-theme-glass) {
55
+ @include glass-dark.pf-v6-tokens;
56
+ }
57
+
58
+ :root:where(.pf-v6-theme-dark.pf-v6-theme-redhat) {
59
+ @include redhat-dark.pf-v6-tokens;
60
+ }
61
+
62
+ :root:where(.pf-v6-theme-dark.pf-v6-theme-redhat.pf-v6-theme-high-contrast) {
63
+ @include redhat-highcontrast-dark.pf-v6-tokens;
64
+ }
65
+
66
+ :root:where(.pf-v6-theme-dark.pf-v6-theme-redhat.pf-v6-theme-glass) {
65
67
  @include redhat-glass-dark.pf-v6-tokens;
66
68
  }
67
69
 
package/base/tokens/tokens-dark.scss CHANGED
@@ -1,19 +1,17 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 10 Feb 2026 01:53:46 GMT
3
+ // Generated on Thu, 12 Mar 2026 18:22:41 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--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%;
7
+ --pf-t--global--background--color--striped--row--default: rgba(21, 21, 21, 0.3000);
8
+ --pf-t--global--background--filter--glass--blur--primary: initial;
11
9
  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
12
10
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
13
11
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
14
12
  --pf-t--global--dark--background--color--700: rgba(199, 199, 199, 0.2500);
15
13
  --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
16
- --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.7000);
14
+ --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.6000);
17
15
  --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
18
16
  --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
19
17
  --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
@@ -23,7 +21,7 @@
23
21
  --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100);
24
22
  --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200);
25
23
  --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100);
26
- --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--200);
24
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--100);
27
25
  --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--dark--box-shadow--color--100);
28
26
  --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--dark--box-shadow--color--200);
29
27
  --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95);
@@ -33,7 +31,7 @@
33
31
  --pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20);
34
32
  --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20);
35
33
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
36
- --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
34
+ --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--60);
37
35
  --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
38
36
  --pf-t--global--dark--border--color--300: var(--pf-t--color--gray--30);
39
37
  --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--70);
@@ -41,9 +39,9 @@
41
39
  --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
42
40
  --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
43
41
  --pf-t--global--dark--color--brand--accent--100: var(--pf-t--color--red--50);
44
- --pf-t--global--dark--color--brand--accent--200: var(--pf-t--color--red--40);
45
- --pf-t--global--dark--color--brand--accent--300: var(--pf-t--color--red--30);
46
- --pf-t--global--dark--color--brand--accent--350: var(--pf-t--color--red--20);
42
+ --pf-t--global--dark--color--brand--accent--200: var(--pf-t--color--red--60);
43
+ --pf-t--global--dark--color--brand--accent--300: var(--pf-t--color--red--40);
44
+ --pf-t--global--dark--color--brand--accent--350: var(--pf-t--color--gray--20);
47
45
  --pf-t--global--dark--color--brand--accent--400: var(--pf-t--color--white);
48
46
  --pf-t--global--dark--color--brand--subtle--100: var(--pf-t--color--blue--70);
49
47
  --pf-t--global--dark--color--brand--subtle--200: var(--pf-t--color--blue--60);
@@ -119,7 +117,7 @@
119
117
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
120
118
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
121
119
  --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
122
- --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300);
120
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--200);
123
121
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100);
124
122
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200);
125
123
  --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300);
@@ -135,6 +133,7 @@
135
133
  --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200);
136
134
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
137
135
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
136
+ --pf-t--global--background--color--sticky--default: var(--pf-t--global--dark--background--color--200);
138
137
  --pf-t--global--border--color--brand--subtle--clicked: var(--pf-t--global--dark--color--brand--subtle--300);
139
138
  --pf-t--global--border--color--brand--subtle--default: var(--pf-t--global--dark--color--brand--subtle--200);
140
139
  --pf-t--global--border--color--brand--subtle--hover: var(--pf-t--global--dark--color--brand--subtle--300);
@@ -172,7 +171,7 @@
172
171
  --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
173
172
  --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
174
173
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
175
- --pf-t--global--border--color--subtle: var(--pf-t--global--dark--border--color--50);
174
+ --pf-t--global--border--color--subtle: var(--pf-t--global--dark--border--color--100);
176
175
  --pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--200);
177
176
  --pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100);
178
177
  --pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200);
@@ -255,12 +254,14 @@
255
254
  --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250);
256
255
  --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
257
256
  --pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200);
258
- --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--floating--default);
259
- --pf-t--global--background--color--glass--primary: var(--pf-t--global--background--color--primary--default);
257
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--dark--border--color--200);
258
+ --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--secondary--default);
259
+ --pf-t--global--background--color--glass--primary--default: initial;
260
260
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
261
261
  --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
262
262
  --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
263
263
  --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
264
+ --pf-t--global--border--color--glass--default: initial;
264
265
  --pf-t--global--border--color--main--default: var(--pf-t--global--background--color--primary--default);
265
266
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
266
267
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -319,7 +320,7 @@
319
320
  --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--inverse);
320
321
  --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--inverse);
321
322
  --pf-t--global--icon--color--on-brand--accent--clicked: var(--pf-t--global--icon--color--inverse);
322
- --pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--regular);
323
+ --pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--inverse);
323
324
  --pf-t--global--icon--color--on-brand--accent--hover: var(--pf-t--global--icon--color--inverse);
324
325
  --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
325
326
  --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
@@ -433,7 +434,6 @@
433
434
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
434
435
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
435
436
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
436
- --pf-t--global--text-decoration--color--default: var(--pf-t--global--border--color--default);
437
437
  --pf-t--global--text-decoration--color--hover: var(--pf-t--global--border--color--hover);
438
438
  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--clicked);
439
439
  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--default);
package/base/tokens/tokens-default.scss CHANGED
@@ -1,16 +1,13 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 10 Feb 2026 01:53:46 GMT
3
+ // Generated on Thu, 12 Mar 2026 18:22:40 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--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%;
10
+ --pf-t--global--background--filter--glass--blur--primary: initial;
14
11
  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
15
12
  --pf-t--global--border--radius--0: 0px;
16
13
  --pf-t--global--border--radius--100: 4px;
@@ -30,24 +27,24 @@
30
27
  --pf-t--global--border--width--high-contrast--strong: 0px;
31
28
  --pf-t--global--box-shadow--X--100: -10px;
32
29
  --pf-t--global--box-shadow--X--200: -4px;
33
- --pf-t--global--box-shadow--X--300: -1px;
30
+ --pf-t--global--box-shadow--X--300: -2px;
34
31
  --pf-t--global--box-shadow--X--400: 0px;
35
32
  --pf-t--global--box-shadow--X--50: -20px;
36
- --pf-t--global--box-shadow--X--500: 1px;
33
+ --pf-t--global--box-shadow--X--500: 2px;
37
34
  --pf-t--global--box-shadow--X--600: 4px;
38
35
  --pf-t--global--box-shadow--X--700: 10px;
39
36
  --pf-t--global--box-shadow--X--800: 20px;
40
37
  --pf-t--global--box-shadow--Y--100: -10px;
41
- --pf-t--global--box-shadow--Y--200: -2px;
38
+ --pf-t--global--box-shadow--Y--200: -4px;
42
39
  --pf-t--global--box-shadow--Y--300: -1px;
43
40
  --pf-t--global--box-shadow--Y--400: 0px;
44
41
  --pf-t--global--box-shadow--Y--50: -20px;
45
42
  --pf-t--global--box-shadow--Y--500: 1px;
46
- --pf-t--global--box-shadow--Y--600: 2px;
43
+ --pf-t--global--box-shadow--Y--600: 4px;
47
44
  --pf-t--global--box-shadow--Y--700: 10px;
48
45
  --pf-t--global--box-shadow--Y--800: 20px;
49
- --pf-t--global--box-shadow--blur--100: 4px;
50
- --pf-t--global--box-shadow--blur--200: 9px;
46
+ --pf-t--global--box-shadow--blur--100: 6px;
47
+ --pf-t--global--box-shadow--blur--200: 10px;
51
48
  --pf-t--global--box-shadow--blur--300: 20px;
52
49
  --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
53
50
  --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
@@ -138,12 +135,13 @@
138
135
  --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40);
139
136
  --pf-t--global--background--color--loading--skeleton--default: var(--pf-t--global--background--color--600);
140
137
  --pf-t--global--background--color--loading--skeleton--subtle: var(--pf-t--global--background--color--700);
138
+ --pf-t--global--background--color--striped--row--default: var(--pf-t--global--background--color--700);
141
139
  --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600);
142
140
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
143
141
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
144
142
  --pf-t--global--border--color--300: var(--pf-t--color--gray--45);
145
143
  --pf-t--global--border--color--400: var(--pf-t--color--gray--60);
146
- --pf-t--global--border--color--50: var(--pf-t--color--gray--10);
144
+ --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
147
145
  --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
148
146
  --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
149
147
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
@@ -231,7 +229,7 @@
231
229
  --pf-t--global--color--brand--500: var(--pf-t--color--blue--80);
232
230
  --pf-t--global--color--brand--accent--100: var(--pf-t--color--red--50);
233
231
  --pf-t--global--color--brand--accent--200: var(--pf-t--color--red--60);
234
- --pf-t--global--color--brand--accent--300: var(--pf-t--color--red--70);
232
+ --pf-t--global--color--brand--accent--300: var(--pf-t--color--gray--60);
235
233
  --pf-t--global--color--brand--accent--400: var(--pf-t--color--black);
236
234
  --pf-t--global--color--brand--subtle--100: var(--pf-t--color--blue--10);
237
235
  --pf-t--global--color--brand--subtle--200: var(--pf-t--color--blue--20);
@@ -416,6 +414,7 @@
416
414
  --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300);
417
415
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
418
416
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
417
+ --pf-t--global--background--color--sticky--default: var(--pf-t--global--background--color--100);
419
418
  --pf-t--global--border--color--brand--subtle--clicked: var(--pf-t--global--color--brand--subtle--300);
420
419
  --pf-t--global--border--color--brand--subtle--default: var(--pf-t--global--color--brand--subtle--200);
421
420
  --pf-t--global--border--color--brand--subtle--hover: var(--pf-t--global--color--brand--subtle--300);
@@ -461,6 +460,8 @@
461
460
  --pf-t--global--border--radius--action--plain--default: var(--pf-t--global--border--radius--small);
462
461
  --pf-t--global--border--radius--control--default: var(--pf-t--global--border--radius--small);
463
462
  --pf-t--global--border--radius--control--form-element: var(--pf-t--global--border--radius--small);
463
+ --pf-t--global--border--radius--glass--default: initial;
464
+ --pf-t--global--border--width--glass--default: initial;
464
465
  --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--300);
465
466
  --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200);
466
467
  --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300);
@@ -595,16 +596,18 @@
595
596
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
596
597
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
597
598
  --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
599
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--border--color--300);
598
600
  --pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs);
599
601
  --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular);
600
602
  --pf-t--global--text-decoration--width--hover: var(--pf-t--global--border--width--strong);
601
603
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
602
- --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--floating--default);
603
- --pf-t--global--background--color--glass--primary: var(--pf-t--global--background--color--primary--default);
604
+ --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--secondary--default);
605
+ --pf-t--global--background--color--glass--primary--default: initial;
604
606
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
605
607
  --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
606
608
  --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
607
609
  --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
610
+ --pf-t--global--border--color--glass--default: initial;
608
611
  --pf-t--global--border--color--main--default: var(--pf-t--global--background--color--primary--default);
609
612
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
610
613
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -785,7 +788,6 @@
785
788
  --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
786
789
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
787
790
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
788
- --pf-t--global--text-decoration--color--default: var(--pf-t--global--border--color--default);
789
791
  --pf-t--global--text-decoration--color--hover: var(--pf-t--global--border--color--hover);
790
792
  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--clicked);
791
793
  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--default);
package/base/tokens/tokens-glass-dark.scss CHANGED
@@ -1,9 +1,26 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 10 Feb 2026 01:53:46 GMT
3
+ // Generated on Thu, 12 Mar 2026 18:22:41 GMT
4
4
 
5
- // Only tokens that differ from base theme (2 tokens)
5
+ // Only tokens that differ from base theme (19 tokens)
6
6
  @mixin pf-v6-tokens {
7
- --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
8
- --pf-t--global--background--opacity--glass--primary: 80%;
7
+ --pf-t--global--background--color--glass--primary--default: rgba(41, 41, 41, 0.5000);
8
+ --pf-t--global--background--color--primary--clicked: rgba(56, 56, 56, 0.5000);
9
+ --pf-t--global--background--color--primary--default: rgba(41, 41, 41, 0.5000);
10
+ --pf-t--global--background--color--primary--hover: rgba(56, 56, 56, 0.5000);
11
+ --pf-t--global--background--color--secondary--clicked: rgba(41, 41, 41, 0.6000);
12
+ --pf-t--global--background--color--secondary--default: rgba(21, 21, 21, 0.6000);
13
+ --pf-t--global--background--color--secondary--hover: rgba(41, 41, 41, 0.6000);
14
+ --pf-t--global--background--filter--glass--blur--primary: blur(16px);
15
+ --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--500);
16
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--500);
17
+ --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--action--plain--clicked);
18
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--action--plain--hover);
19
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--300);
20
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--200);
21
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--300);
22
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--alt);
23
+ --pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
24
+ --pf-t--global--border--color--subtle: var(--pf-t--global--dark--border--color--50);
25
+ --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
9
26
  }
package/base/tokens/tokens-glass.scss CHANGED
@@ -1,9 +1,22 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 10 Feb 2026 01:53:46 GMT
3
+ // Generated on Thu, 12 Mar 2026 18:22:41 GMT
4
4
 
5
- // Only tokens that differ from base theme (2 tokens)
5
+ // Only tokens that differ from base theme (15 tokens)
6
6
  @mixin pf-v6-tokens {
7
- --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
8
- --pf-t--global--background--opacity--glass--primary: 80%;
7
+ --pf-t--global--background--color--glass--primary--default: rgba(255, 255, 255, 0.5000);
8
+ --pf-t--global--background--color--primary--clicked: rgba(199, 199, 199, 0.3000);
9
+ --pf-t--global--background--color--primary--default: rgba(255, 255, 255, 0.6000);
10
+ --pf-t--global--background--color--primary--hover: rgba(199, 199, 199, 0.3000);
11
+ --pf-t--global--background--color--secondary--clicked: rgba(163, 163, 163, 0.3000);
12
+ --pf-t--global--background--color--secondary--default: rgba(199, 199, 199, 0.3000);
13
+ --pf-t--global--background--color--secondary--hover: rgba(163, 163, 163, 0.3000);
14
+ --pf-t--global--background--filter--glass--blur--primary: blur(16px);
15
+ --pf-t--global--border--width--main--default: var(--pf-t--global--border--width--100);
16
+ --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--action--plain--clicked);
17
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--action--plain--hover);
18
+ --pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
19
+ --pf-t--global--border--radius--glass--default: var(--pf-t--global--border--radius--medium);
20
+ --pf-t--global--border--width--glass--default: var(--pf-t--global--border--width--regular);
21
+ --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
9
22
  }
package/base/tokens/tokens-local.scss CHANGED
@@ -137,7 +137,8 @@
137
137
  --pf-t--temp--dev--tbd: #BC11E0;
138
138
  // stylelint-enable
139
139
 
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 );
140
+ // Glass theme tokens
141
+ &:where(.pf-v6-theme-glass) {
142
+ --pf-t--global--box-shadow--glass--default: var(--pf-t--global--box-shadow--md);
143
+ }
143
144
  }
package/base/tokens/tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 11 Feb 2026 20:28:14 GMT
3
+ // Generated on Thu, 12 Mar 2026 18:22:41 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--color--black: #000000;