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

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 (22) hide show
  1. package/base/patternfly-variables.css +340 -14
  2. package/base/patternfly-variables.scss +40 -0
  3. package/base/tokens/tokens-dark.scss +49 -3
  4. package/base/tokens/tokens-default.scss +65 -13
  5. package/base/tokens/tokens-glass-dark.scss +11 -0
  6. package/base/tokens/tokens-glass.scss +11 -0
  7. package/base/tokens/tokens-redhat-dark.scss +14 -0
  8. package/base/tokens/tokens-redhat-glass-dark.scss +18 -0
  9. package/base/tokens/tokens-redhat-glass.scss +17 -0
  10. package/base/tokens/tokens-redhat-highcontrast-dark.scss +47 -0
  11. package/base/tokens/tokens-redhat-highcontrast.scss +127 -0
  12. package/base/tokens/tokens-redhat.scss +15 -0
  13. package/docs/components/Compass/examples/Compass.md +38 -32
  14. package/docs/components/ModalBox/examples/ModalBox.md +1 -1
  15. package/docs/demos/Compass/examples/Compass.md +16 -0
  16. package/package.json +2 -2
  17. package/patternfly-base-no-globals.css +340 -14
  18. package/patternfly-base.css +340 -14
  19. package/patternfly-no-globals.css +340 -14
  20. package/patternfly.css +340 -14
  21. package/patternfly.min.css +1 -1
  22. package/patternfly.min.css.map +1 -1
package/base/tokens/tokens-dark.scss CHANGED
@@ -1,17 +1,22 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 10 Sep 2025 19:58:14 GMT
3
+ // Generated on Fri, 23 Jan 2026 20:37:44 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
9
  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
8
10
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
9
11
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
12
+ --pf-t--global--dark--background--color--700: rgba(199, 199, 199, 0.2500);
10
13
  --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
11
14
  --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.7000);
12
15
  --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
13
16
  --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
14
17
  --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
18
+ --pf-t--global--background--color--loading--skeleton--default: var(--pf-t--global--dark--background--color--700);
19
+ --pf-t--global--background--color--loading--skeleton--subtle: var(--pf-t--global--dark--background--color--600);
15
20
  --pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600);
16
21
  --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100);
17
22
  --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200);
@@ -29,10 +34,18 @@
29
34
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
30
35
  --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
31
36
  --pf-t--global--dark--border--color--300: var(--pf-t--color--gray--30);
32
- --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
37
+ --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--70);
33
38
  --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
34
39
  --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
35
40
  --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
41
+ --pf-t--global--dark--color--brand--accent--100: var(--pf-t--color--red--50);
42
+ --pf-t--global--dark--color--brand--accent--200: var(--pf-t--color--red--40);
43
+ --pf-t--global--dark--color--brand--accent--300: var(--pf-t--color--red--30);
44
+ --pf-t--global--dark--color--brand--accent--350: var(--pf-t--color--red--20);
45
+ --pf-t--global--dark--color--brand--accent--400: var(--pf-t--color--white);
46
+ --pf-t--global--dark--color--brand--subtle--100: var(--pf-t--color--blue--70);
47
+ --pf-t--global--dark--color--brand--subtle--200: var(--pf-t--color--blue--60);
48
+ --pf-t--global--dark--color--brand--subtle--300: var(--pf-t--color--blue--30);
36
49
  --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
37
50
  --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
38
51
  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
@@ -120,9 +133,13 @@
120
133
  --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200);
121
134
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
122
135
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
136
+ --pf-t--global--border--color--brand--subtle--clicked: var(--pf-t--global--dark--color--brand--subtle--300);
137
+ --pf-t--global--border--color--brand--subtle--default: var(--pf-t--global--dark--color--brand--subtle--200);
138
+ --pf-t--global--border--color--brand--subtle--hover: var(--pf-t--global--dark--color--brand--subtle--300);
123
139
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
140
+ --pf-t--global--border--color--control--default: var(--pf-t--global--dark--border--color--200);
124
141
  --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
125
- --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
142
+ --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--100);
126
143
  --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
127
144
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
128
145
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
@@ -153,9 +170,13 @@
153
170
  --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
154
171
  --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
155
172
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
173
+ --pf-t--global--border--color--subtle: var(--pf-t--global--dark--border--color--50);
156
174
  --pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--200);
157
175
  --pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100);
158
176
  --pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200);
177
+ --pf-t--global--color--brand--subtle--clicked: var(--pf-t--global--dark--color--brand--subtle--200);
178
+ --pf-t--global--color--brand--subtle--default: var(--pf-t--global--dark--color--brand--subtle--100);
179
+ --pf-t--global--color--brand--subtle--hover: var(--pf-t--global--dark--color--brand--subtle--200);
159
180
  --pf-t--global--color--favorite--clicked: var(--pf-t--global--dark--color--favorite--200);
160
181
  --pf-t--global--color--favorite--default: var(--pf-t--global--dark--color--favorite--100);
161
182
  --pf-t--global--color--favorite--hover: var(--pf-t--global--dark--color--favorite--200);
@@ -232,6 +253,8 @@
232
253
  --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250);
233
254
  --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
234
255
  --pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200);
256
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--floating--default);
257
+ --pf-t--global--background--color--glass--primary: var(--pf-t--global--background--color--primary--default);
235
258
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
236
259
  --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
237
260
  --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
@@ -252,6 +275,9 @@
252
275
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
253
276
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
254
277
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
278
+ --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--clicked);
279
+ --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--default);
280
+ --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--hover);
255
281
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
256
282
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
257
283
  --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
@@ -290,9 +316,15 @@
290
316
  --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--inverse);
291
317
  --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--inverse);
292
318
  --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--inverse);
319
+ --pf-t--global--icon--color--on-brand--accent--clicked: var(--pf-t--global--icon--color--inverse);
320
+ --pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--regular);
321
+ --pf-t--global--icon--color--on-brand--accent--hover: var(--pf-t--global--icon--color--inverse);
293
322
  --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
294
323
  --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
295
324
  --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
325
+ --pf-t--global--icon--color--on-brand--subtle--clicked: var(--pf-t--global--icon--color--regular);
326
+ --pf-t--global--icon--color--on-brand--subtle--default: var(--pf-t--global--icon--color--regular);
327
+ --pf-t--global--icon--color--on-brand--subtle--hover: var(--pf-t--global--icon--color--regular);
296
328
  --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
297
329
  --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
298
330
  --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
@@ -356,9 +388,15 @@
356
388
  --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--inverse);
357
389
  --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--inverse);
358
390
  --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--inverse);
391
+ --pf-t--global--text--color--on-brand--accent--clicked: var(--pf-t--global--text--color--inverse);
392
+ --pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--inverse);
393
+ --pf-t--global--text--color--on-brand--accent--hover: var(--pf-t--global--text--color--inverse);
359
394
  --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
360
395
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
361
396
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
397
+ --pf-t--global--text--color--on-brand--subtle--clicked: var(--pf-t--global--text--color--regular);
398
+ --pf-t--global--text--color--on-brand--subtle--default: var(--pf-t--global--text--color--regular);
399
+ --pf-t--global--text--color--on-brand--subtle--hover: var(--pf-t--global--text--color--regular);
362
400
  --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
363
401
  --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
364
402
  --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -393,4 +431,12 @@
393
431
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
394
432
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
395
433
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
434
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--border--color--default);
435
+ --pf-t--global--text-decoration--color--hover: var(--pf-t--global--border--color--hover);
436
+ --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--clicked);
437
+ --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--default);
438
+ --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--hover);
439
+ --pf-t--global--icon--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--clicked);
440
+ --pf-t--global--icon--color--brand--accent--default: var(--pf-t--global--color--brand--accent--default);
441
+ --pf-t--global--icon--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--hover);
396
442
  }
package/base/tokens/tokens-default.scss CHANGED
@@ -1,11 +1,14 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 10 Sep 2025 19:58:14 GMT
3
+ // Generated on Fri, 23 Jan 2026 20:37:43 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
- --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
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
+ --pf-t--global--background--color--700: rgba(199, 199, 199, 0.1000);
8
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;
9
12
  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
10
13
  --pf-t--global--border--radius--0: 0px;
11
14
  --pf-t--global--border--radius--100: 4px;
@@ -33,12 +36,12 @@
33
36
  --pf-t--global--box-shadow--X--700: 10px;
34
37
  --pf-t--global--box-shadow--X--800: 20px;
35
38
  --pf-t--global--box-shadow--Y--100: -10px;
36
- --pf-t--global--box-shadow--Y--200: -4px;
39
+ --pf-t--global--box-shadow--Y--200: -2px;
37
40
  --pf-t--global--box-shadow--Y--300: -1px;
38
41
  --pf-t--global--box-shadow--Y--400: 0px;
39
42
  --pf-t--global--box-shadow--Y--50: -20px;
40
43
  --pf-t--global--box-shadow--Y--500: 1px;
41
- --pf-t--global--box-shadow--Y--600: 4px;
44
+ --pf-t--global--box-shadow--Y--600: 2px;
42
45
  --pf-t--global--box-shadow--Y--700: 10px;
43
46
  --pf-t--global--box-shadow--Y--800: 20px;
44
47
  --pf-t--global--box-shadow--blur--100: 4px;
@@ -109,6 +112,7 @@
109
112
  --pf-t--global--spacer--800: 5rem;
110
113
  --pf-t--global--text-decoration--line--100: none;
111
114
  --pf-t--global--text-decoration--line--200: underline;
115
+ --pf-t--global--text-decoration--offset--hover: 5;
112
116
  --pf-t--global--text-decoration--style--100: solid;
113
117
  --pf-t--global--text-decoration--style--200: dashed;
114
118
  --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2);
@@ -130,12 +134,14 @@
130
134
  --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500);
131
135
  --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30);
132
136
  --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40);
137
+ --pf-t--global--background--color--loading--skeleton--default: var(--pf-t--global--background--color--600);
138
+ --pf-t--global--background--color--loading--skeleton--subtle: var(--pf-t--global--background--color--700);
133
139
  --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600);
134
140
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
135
141
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
136
- --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
142
+ --pf-t--global--border--color--300: var(--pf-t--color--gray--45);
137
143
  --pf-t--global--border--color--400: var(--pf-t--color--gray--60);
138
- --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
144
+ --pf-t--global--border--color--50: var(--pf-t--color--gray--10);
139
145
  --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
140
146
  --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
141
147
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
@@ -145,9 +151,9 @@
145
151
  --pf-t--global--border--width--action--clicked: var(--pf-t--global--border--width--200);
146
152
  --pf-t--global--border--width--action--default: var(--pf-t--global--border--width--100);
147
153
  --pf-t--global--border--width--action--hover: var(--pf-t--global--border--width--200);
148
- --pf-t--global--border--width--box--clicked: var(--pf-t--global--border--width--200);
154
+ --pf-t--global--border--width--box--clicked: var(--pf-t--global--border--width--300);
149
155
  --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100);
150
- --pf-t--global--border--width--box--hover: var(--pf-t--global--border--width--100);
156
+ --pf-t--global--border--width--box--hover: var(--pf-t--global--border--width--200);
151
157
  --pf-t--global--border--width--box--status--default: var(--pf-t--global--border--width--200);
152
158
  --pf-t--global--border--width--box--status--read: var(--pf-t--global--border--width--100);
153
159
  --pf-t--global--border--width--control--clicked: var(--pf-t--global--border--width--200);
@@ -221,9 +227,17 @@
221
227
  --pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
222
228
  --pf-t--global--color--brand--400: var(--pf-t--color--blue--70);
223
229
  --pf-t--global--color--brand--500: var(--pf-t--color--blue--80);
230
+ --pf-t--global--color--brand--accent--100: var(--pf-t--color--red--50);
231
+ --pf-t--global--color--brand--accent--200: var(--pf-t--color--red--60);
232
+ --pf-t--global--color--brand--accent--300: var(--pf-t--color--red--70);
233
+ --pf-t--global--color--brand--accent--400: var(--pf-t--color--black);
234
+ --pf-t--global--color--brand--subtle--100: var(--pf-t--color--blue--10);
235
+ --pf-t--global--color--brand--subtle--200: var(--pf-t--color--blue--20);
236
+ --pf-t--global--color--brand--subtle--300: var(--pf-t--color--blue--40);
237
+ --pf-t--global--color--brand--subtle--400: var(--pf-t--color--blue--50);
224
238
  --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
225
239
  --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
226
- --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
240
+ --pf-t--global--color--disabled--300: var(--pf-t--color--gray--50);
227
241
  --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
228
242
  --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
229
243
  --pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70);
@@ -289,7 +303,7 @@
289
303
  --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80);
290
304
  --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
291
305
  --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
292
- --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--80);
306
+ --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--70);
293
307
  --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
294
308
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
295
309
  --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70);
@@ -374,8 +388,8 @@
374
388
  --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200);
375
389
  --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--line--200);
376
390
  --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200);
377
- --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100);
378
- --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100);
391
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
392
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
379
393
  --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600);
380
394
  --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400);
381
395
  --pf-t--global--z-index--md: var(--pf-t--global--z-index--300);
@@ -400,8 +414,12 @@
400
414
  --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300);
401
415
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
402
416
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
417
+ --pf-t--global--border--color--brand--subtle--clicked: var(--pf-t--global--color--brand--subtle--300);
418
+ --pf-t--global--border--color--brand--subtle--default: var(--pf-t--global--color--brand--subtle--200);
419
+ --pf-t--global--border--color--brand--subtle--hover: var(--pf-t--global--color--brand--subtle--300);
403
420
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
404
- --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50);
421
+ --pf-t--global--border--color--control--default: var(--pf-t--global--border--color--300);
422
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--100);
405
423
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
406
424
  --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
407
425
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
@@ -436,9 +454,17 @@
436
454
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
437
455
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
438
456
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
457
+ --pf-t--global--border--color--subtle: var(--pf-t--global--border--color--50);
458
+ --pf-t--global--border--radius--action--default: var(--pf-t--global--border--radius--pill);
459
+ --pf-t--global--border--radius--action--plain--default: var(--pf-t--global--border--radius--small);
460
+ --pf-t--global--border--radius--control--default: var(--pf-t--global--border--radius--small);
461
+ --pf-t--global--border--radius--control--form-element: var(--pf-t--global--border--radius--small);
439
462
  --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--300);
440
463
  --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200);
441
464
  --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300);
465
+ --pf-t--global--color--brand--subtle--clicked: var(--pf-t--global--color--brand--subtle--200);
466
+ --pf-t--global--color--brand--subtle--default: var(--pf-t--global--color--brand--subtle--100);
467
+ --pf-t--global--color--brand--subtle--hover: var(--pf-t--global--color--brand--subtle--200);
442
468
  --pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--200);
443
469
  --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--100);
444
470
  --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--200);
@@ -569,7 +595,10 @@
569
595
  --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
570
596
  --pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs);
571
597
  --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular);
598
+ --pf-t--global--text-decoration--width--hover: var(--pf-t--global--border--width--strong);
572
599
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
600
+ --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--floating--default);
601
+ --pf-t--global--background--color--glass--primary: var(--pf-t--global--background--color--primary--default);
573
602
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
574
603
  --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
575
604
  --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
@@ -587,6 +616,9 @@
587
616
  --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
588
617
  --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default);
589
618
  --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
619
+ --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--clicked);
620
+ --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--default);
621
+ --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--hover);
590
622
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
591
623
  --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
592
624
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
@@ -627,9 +659,15 @@
627
659
  --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--regular);
628
660
  --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--regular);
629
661
  --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--regular);
662
+ --pf-t--global--icon--color--on-brand--accent--clicked: var(--pf-t--global--icon--color--inverse);
663
+ --pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--inverse);
664
+ --pf-t--global--icon--color--on-brand--accent--hover: var(--pf-t--global--icon--color--inverse);
630
665
  --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
631
666
  --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
632
667
  --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
668
+ --pf-t--global--icon--color--on-brand--subtle--clicked: var(--pf-t--global--icon--color--regular);
669
+ --pf-t--global--icon--color--on-brand--subtle--default: var(--pf-t--global--icon--color--regular);
670
+ --pf-t--global--icon--color--on-brand--subtle--hover: var(--pf-t--global--icon--color--regular);
633
671
  --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
634
672
  --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
635
673
  --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
@@ -702,9 +740,15 @@
702
740
  --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--regular);
703
741
  --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--regular);
704
742
  --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--regular);
743
+ --pf-t--global--text--color--on-brand--accent--clicked: var(--pf-t--global--text--color--inverse);
744
+ --pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--inverse);
745
+ --pf-t--global--text--color--on-brand--accent--hover: var(--pf-t--global--text--color--inverse);
705
746
  --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
706
747
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
707
748
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
749
+ --pf-t--global--text--color--on-brand--subtle--clicked: var(--pf-t--global--text--color--regular);
750
+ --pf-t--global--text--color--on-brand--subtle--default: var(--pf-t--global--text--color--regular);
751
+ --pf-t--global--text--color--on-brand--subtle--hover: var(--pf-t--global--text--color--regular);
708
752
  --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
709
753
  --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
710
754
  --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -739,5 +783,13 @@
739
783
  --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
740
784
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
741
785
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
786
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--border--color--default);
787
+ --pf-t--global--text-decoration--color--hover: var(--pf-t--global--border--color--hover);
788
+ --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--clicked);
789
+ --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--default);
790
+ --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--hover);
742
791
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
792
+ --pf-t--global--icon--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--clicked);
793
+ --pf-t--global--icon--color--brand--accent--default: var(--pf-t--global--color--brand--accent--default);
794
+ --pf-t--global--icon--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--hover);
743
795
  }
package/base/tokens/tokens-glass-dark.scss ADDED
@@ -0,0 +1,11 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Fri, 23 Jan 2026 20:37:44 GMT
4
+
5
+ // Only tokens that differ from base theme (4 tokens)
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;
11
+ }
package/base/tokens/tokens-glass.scss ADDED
@@ -0,0 +1,11 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Fri, 23 Jan 2026 20:37:44 GMT
4
+
5
+ // Only tokens that differ from base theme (4 tokens)
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;
11
+ }
package/base/tokens/tokens-redhat-dark.scss ADDED
@@ -0,0 +1,14 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Fri, 23 Jan 2026 20:37:44 GMT
4
+
5
+ // Only tokens that differ from base theme (7 tokens)
6
+ @mixin pf-v6-tokens {
7
+ --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--400);
8
+ --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--400);
9
+ --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--400);
10
+ --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--200);
11
+ --pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--100);
12
+ --pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--200);
13
+ --pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--regular);
14
+ }
package/base/tokens/tokens-redhat-glass-dark.scss ADDED
@@ -0,0 +1,18 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Fri, 23 Jan 2026 20:37:44 GMT
4
+
5
+ // Only tokens that differ from base theme (11 tokens)
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;
11
+ --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--400);
12
+ --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--400);
13
+ --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--400);
14
+ --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--200);
15
+ --pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--100);
16
+ --pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--200);
17
+ --pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--regular);
18
+ }
package/base/tokens/tokens-redhat-glass.scss ADDED
@@ -0,0 +1,17 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Fri, 23 Jan 2026 20:37:44 GMT
4
+
5
+ // Only tokens that differ from base theme (10 tokens)
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;
11
+ --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--400);
12
+ --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
13
+ --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--400);
14
+ --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
15
+ --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
16
+ --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
17
+ }
package/base/tokens/tokens-redhat-highcontrast-dark.scss ADDED
@@ -0,0 +1,47 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Fri, 23 Jan 2026 20:37:44 GMT
4
+
5
+ // Only tokens that differ from base theme (40 tokens)
6
+ @mixin pf-v6-tokens {
7
+ --pf-t--global--background--color--primary--default: var(--pf-t--color--black);
8
+ --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--primary--default);
9
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default);
10
+ --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--100);
11
+ --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--200);
12
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--300);
13
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--200);
14
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--300);
15
+ --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--200);
16
+ --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--200);
17
+ --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--400);
18
+ --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--400);
19
+ --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--400);
20
+ --pf-t--global--border--color--control--default: var(--pf-t--global--dark--border--color--300);
21
+ --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--300);
22
+ --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--100);
23
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--300);
24
+ --pf-t--global--border--color--subtle: var(--pf-t--global--dark--border--color--300);
25
+ --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--350);
26
+ --pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--300);
27
+ --pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--350);
28
+ --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--100);
29
+ --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--50);
30
+ --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--100);
31
+ --pf-t--global--color--status--custom--clicked: var(--pf-t--global--dark--color--status--custom--300);
32
+ --pf-t--global--color--status--custom--default: var(--pf-t--global--dark--color--status--custom--200);
33
+ --pf-t--global--color--status--custom--hover: var(--pf-t--global--dark--color--status--custom--300);
34
+ --pf-t--global--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--250);
35
+ --pf-t--global--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--200);
36
+ --pf-t--global--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--250);
37
+ --pf-t--global--color--status--success--clicked: var(--pf-t--global--dark--color--status--success--300);
38
+ --pf-t--global--color--status--success--default: var(--pf-t--global--dark--color--status--success--200);
39
+ --pf-t--global--color--status--success--hover: var(--pf-t--global--dark--color--status--success--300);
40
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--dark--color--severity--critical--200);
41
+ --pf-t--global--text--color--link--visited: var(--pf-t--global--dark--text--color--link--400);
42
+ --pf-t--global--text--color--on-disabled: var(--pf-t--global--dark--color--disabled--400);
43
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--300);
44
+ --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
45
+ --pf-t--global--border--color--main--default: var(--pf-t--global--border--color--default);
46
+ --pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--inverse);
47
+ }
package/base/tokens/tokens-redhat-highcontrast.scss ADDED
@@ -0,0 +1,127 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Fri, 23 Jan 2026 20:37:44 GMT
4
+
5
+ // Only tokens that differ from base theme (120 tokens)
6
+ @mixin pf-v6-tokens {
7
+ --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--400);
8
+ --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--150);
9
+ --pf-t--global--border--width--action--plain--clicked: var(--pf-t--global--border--width--200);
10
+ --pf-t--global--border--width--action--plain--hover: var(--pf-t--global--border--width--100);
11
+ --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--200);
12
+ --pf-t--global--border--width--main--default: var(--pf-t--global--border--width--200);
13
+ --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--400);
14
+ --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
15
+ --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--400);
16
+ --pf-t--global--border--color--brand--subtle--clicked: var(--pf-t--global--color--brand--subtle--400);
17
+ --pf-t--global--border--color--brand--subtle--hover: var(--pf-t--global--color--brand--subtle--400);
18
+ --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--400);
19
+ --pf-t--global--border--color--control--default: var(--pf-t--global--border--color--400);
20
+ --pf-t--global--border--color--default: var(--pf-t--global--border--color--400);
21
+ --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--300);
22
+ --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--500);
23
+ --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--400);
24
+ --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--500);
25
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--500);
26
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--400);
27
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--500);
28
+ --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--500);
29
+ --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--500);
30
+ --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--500);
31
+ --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--400);
32
+ --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--500);
33
+ --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--500);
34
+ --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--400);
35
+ --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--500);
36
+ --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--500);
37
+ --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--400);
38
+ --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--500);
39
+ --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--500);
40
+ --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--400);
41
+ --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--500);
42
+ --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--500);
43
+ --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--400);
44
+ --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--500);
45
+ --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--500);
46
+ --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--400);
47
+ --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--500);
48
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--400);
49
+ --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
50
+ --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--200);
51
+ --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
52
+ --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
53
+ --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
54
+ --pf-t--global--border--color--subtle: var(--pf-t--global--border--color--400);
55
+ --pf-t--global--border--radius--action--plain--default: var(--pf-t--global--border--radius--pill);
56
+ --pf-t--global--border--radius--control--default: var(--pf-t--global--border--radius--pill);
57
+ --pf-t--global--border--width--high-contrast--extra-strong: var(--pf-t--global--border--width--extra-strong);
58
+ --pf-t--global--border--width--high-contrast--regular: var(--pf-t--global--border--width--regular);
59
+ --pf-t--global--border--width--high-contrast--strong: var(--pf-t--global--border--width--strong);
60
+ --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--300);
61
+ --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--200);
62
+ --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--300);
63
+ --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--400);
64
+ --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--300);
65
+ --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--400);
66
+ --pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--400);
67
+ --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--300);
68
+ --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--400);
69
+ --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--100);
70
+ --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--50);
71
+ --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--100);
72
+ --pf-t--global--color--status--custom--clicked: var(--pf-t--global--color--status--custom--300);
73
+ --pf-t--global--color--status--custom--default: var(--pf-t--global--color--status--custom--200);
74
+ --pf-t--global--color--status--custom--hover: var(--pf-t--global--color--status--custom--300);
75
+ --pf-t--global--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300);
76
+ --pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--200);
77
+ --pf-t--global--color--status--danger--hover: var(--pf-t--global--color--status--danger--300);
78
+ --pf-t--global--color--status--info--clicked: var(--pf-t--global--color--status--info--300);
79
+ --pf-t--global--color--status--info--default: var(--pf-t--global--color--status--info--200);
80
+ --pf-t--global--color--status--info--hover: var(--pf-t--global--color--status--info--300);
81
+ --pf-t--global--color--status--success--clicked: var(--pf-t--global--color--status--success--300);
82
+ --pf-t--global--color--status--success--default: var(--pf-t--global--color--status--success--200);
83
+ --pf-t--global--color--status--success--hover: var(--pf-t--global--color--status--success--300);
84
+ --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
85
+ --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
86
+ --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
87
+ --pf-t--global--focus-ring--color--default: var(--pf-t--global--focus-ring--color--200);
88
+ --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--400);
89
+ --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--300);
90
+ --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--400);
91
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--200);
92
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--200);
93
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--200);
94
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--200);
95
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--200);
96
+ --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--200);
97
+ --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--100);
98
+ --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--200);
99
+ --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
100
+ --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
101
+ --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
102
+ --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--150);
103
+ --pf-t--global--text--color--brand--clicked: var(--pf-t--global--color--brand--500);
104
+ --pf-t--global--text--color--brand--default: var(--pf-t--global--color--brand--400);
105
+ --pf-t--global--text--color--brand--hover: var(--pf-t--global--color--brand--500);
106
+ --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--200);
107
+ --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--250);
108
+ --pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--350);
109
+ --pf-t--global--text--color--required: var(--pf-t--global--text--color--500);
110
+ --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--300);
111
+ --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--200);
112
+ --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--300);
113
+ --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
114
+ --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
115
+ --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
116
+ --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--250);
117
+ --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--primary--default);
118
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default);
119
+ --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
120
+ --pf-t--global--border--color--main--default: var(--pf-t--global--border--color--default);
121
+ --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse);
122
+ --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse);
123
+ --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
124
+ --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse);
125
+ --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse);
126
+ --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse);
127
+ }
package/base/tokens/tokens-redhat.scss ADDED
@@ -0,0 +1,15 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Fri, 23 Jan 2026 20:37:44 GMT
4
+
5
+ // Only tokens that differ from base theme (8 tokens)
6
+ @mixin pf-v6-tokens {
7
+ --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--400);
8
+ --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
9
+ --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--400);
10
+ --pf-t--global--border--radius--action--plain--default: var(--pf-t--global--border--radius--pill);
11
+ --pf-t--global--border--radius--control--default: var(--pf-t--global--border--radius--pill);
12
+ --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
13
+ --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
14
+ --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
15
+ }