@patternfly/design-tokens 1.14.0 → 1.14.1

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.
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 29 May 2025 14:58:29 GMT
3
+ // Generated on Wed, 06 Aug 2025 21:17:22 GMT
4
4
 
5
5
  :root {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 29 May 2025 14:58:29 GMT
3
+ // Generated on Wed, 06 Aug 2025 21:17:22 GMT
4
4
 
5
5
  :root {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 29 May 2025 14:58:28 GMT
3
+ // Generated on Wed, 06 Aug 2025 21:17:22 GMT
4
4
 
5
5
  :root {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
@@ -88,6 +88,7 @@
88
88
  --pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--20);
89
89
  --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
90
90
  --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20);
91
+ --pf-t--global--dark--focus-ring--color--100: var(--pf-t--color--blue--30);
91
92
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
92
93
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
93
94
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
@@ -199,6 +200,7 @@
199
200
  --pf-t--global--color--status--warning--clicked: var(--pf-t--global--dark--color--status--warning--200);
200
201
  --pf-t--global--color--status--warning--default: var(--pf-t--global--dark--color--status--warning--100);
201
202
  --pf-t--global--color--status--warning--hover: var(--pf-t--global--dark--color--status--warning--200);
203
+ --pf-t--global--focus-ring--color--default: var(--pf-t--global--dark--focus-ring--color--100);
202
204
  --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
203
205
  --pf-t--global--icon--color--brand--default: var(--pf-t--global--dark--color--brand--200);
204
206
  --pf-t--global--icon--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 29 May 2025 14:58:28 GMT
3
+ // Generated on Wed, 06 Aug 2025 21:17:22 GMT
4
4
 
5
5
  :root {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -54,9 +54,7 @@
54
54
  --pf-t--global--breakpoint--550: 80rem;
55
55
  --pf-t--global--breakpoint--600: 90.625rem;
56
56
  --pf-t--global--color--nonstatus--green--400: #3d7019;
57
- --pf-t--global--color--status--danger--300: #501600;
58
57
  --pf-t--global--color--status--success--150: #3d7019;
59
- --pf-t--global--color--status--success--300: #153300;
60
58
  --pf-t--global--delay--100: 0ms;
61
59
  --pf-t--global--delay--200: 50ms;
62
60
  --pf-t--global--delay--300: 100ms;
@@ -68,6 +66,10 @@
68
66
  --pf-t--global--duration--50: 50ms;
69
67
  --pf-t--global--duration--500: 500ms;
70
68
  --pf-t--global--duration--600: 600ms;
69
+ --pf-t--global--focus-ring--position--inset: -4;
70
+ --pf-t--global--focus-ring--position--offset: 2;
71
+ --pf-t--global--focus-ring--width--inset: 3;
72
+ --pf-t--global--focus-ring--width--offset: 2;
71
73
  --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
72
74
  --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
73
75
  --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace;
@@ -280,17 +282,21 @@
280
282
  --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80);
281
283
  --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
282
284
  --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
285
+ --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--80);
283
286
  --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
284
287
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
285
288
  --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70);
286
289
  --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
287
290
  --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
291
+ --pf-t--global--color--status--success--300: var(--pf-t--color--green--80);
288
292
  --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
289
293
  --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
290
294
  --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
291
295
  --pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60);
292
296
  --pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70);
293
297
  --pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80);
298
+ --pf-t--global--focus-ring--color--100: var(--pf-t--color--blue--50);
299
+ --pf-t--global--focus-ring--color--200: var(--pf-t--color--blue--60);
294
300
  --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
295
301
  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
296
302
  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
@@ -471,6 +477,7 @@
471
477
  --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--200);
472
478
  --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--100);
473
479
  --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--200);
480
+ --pf-t--global--focus-ring--color--default: var(--pf-t--global--focus-ring--color--100);
474
481
  --pf-t--global--font--size--body--default: var(--pf-t--global--font--size--sm);
475
482
  --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--md);
476
483
  --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--xs);
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 29 May 2025 14:58:29 GMT
3
+ // Generated on Wed, 06 Aug 2025 21:17:22 GMT
4
4
 
5
5
  :root {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
@@ -90,6 +90,7 @@
90
90
  --pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--20);
91
91
  --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
92
92
  --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20);
93
+ --pf-t--global--dark--focus-ring--color--100: var(--pf-t--color--blue--30);
93
94
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
94
95
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
95
96
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
@@ -114,15 +115,15 @@
114
115
  --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--dark--background--color--450);
115
116
  --pf-t--global--background--color--inverse--default: var(--pf-t--global--dark--background--color--400);
116
117
  --pf-t--global--background--color--inverse--hover: var(--pf-t--global--dark--background--color--450);
117
- --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--100);
118
- --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--100);
118
+ --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--200);
119
+ --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--200);
119
120
  --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200);
120
121
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
121
122
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
122
123
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
123
124
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
124
125
  --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
125
- --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
126
+ --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--100);
126
127
  --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
127
128
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
128
129
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
@@ -200,6 +201,7 @@
200
201
  --pf-t--global--color--status--warning--clicked: var(--pf-t--global--dark--color--status--warning--200);
201
202
  --pf-t--global--color--status--warning--default: var(--pf-t--global--dark--color--status--warning--100);
202
203
  --pf-t--global--color--status--warning--hover: var(--pf-t--global--dark--color--status--warning--200);
204
+ --pf-t--global--focus-ring--color--default: var(--pf-t--global--dark--focus-ring--color--100);
203
205
  --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
204
206
  --pf-t--global--icon--color--brand--default: var(--pf-t--global--dark--color--brand--200);
205
207
  --pf-t--global--icon--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 29 May 2025 14:58:29 GMT
3
+ // Generated on Wed, 06 Aug 2025 21:17:22 GMT
4
4
 
5
5
  :root {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -9,9 +9,7 @@
9
9
  --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
10
10
  --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
11
11
  --pf-t--global--color--nonstatus--green--400: #3d7019;
12
- --pf-t--global--color--status--danger--300: #501600;
13
12
  --pf-t--global--color--status--success--150: #3d7019;
14
- --pf-t--global--color--status--success--300: #153300;
15
13
  --pf-t--global--background--color--100: var(--pf-t--color--white);
16
14
  --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
17
15
  --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
@@ -110,21 +108,21 @@
110
108
  --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80);
111
109
  --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
112
110
  --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
113
- --pf-t--global--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300);
114
- --pf-t--global--color--status--danger--hover: var(--pf-t--global--color--status--danger--300);
111
+ --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--80);
115
112
  --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
116
113
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
117
114
  --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70);
118
115
  --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
119
116
  --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
120
- --pf-t--global--color--status--success--clicked: var(--pf-t--global--color--status--success--300);
121
- --pf-t--global--color--status--success--hover: var(--pf-t--global--color--status--success--300);
117
+ --pf-t--global--color--status--success--300: var(--pf-t--color--green--80);
122
118
  --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
123
119
  --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
124
120
  --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
125
121
  --pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60);
126
122
  --pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70);
127
123
  --pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80);
124
+ --pf-t--global--focus-ring--color--100: var(--pf-t--color--blue--50);
125
+ --pf-t--global--focus-ring--color--200: var(--pf-t--color--blue--60);
128
126
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
129
127
  --pf-t--global--icon--color--150: var(--pf-t--color--gray--60);
130
128
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
@@ -194,8 +192,6 @@
194
192
  --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--500);
195
193
  --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--400);
196
194
  --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--500);
197
- --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
198
- --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
199
195
  --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
200
196
  --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--200);
201
197
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
@@ -237,16 +233,19 @@
237
233
  --pf-t--global--color--status--custom--clicked: var(--pf-t--global--color--status--custom--300);
238
234
  --pf-t--global--color--status--custom--default: var(--pf-t--global--color--status--custom--200);
239
235
  --pf-t--global--color--status--custom--hover: var(--pf-t--global--color--status--custom--300);
236
+ --pf-t--global--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300);
240
237
  --pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--200);
238
+ --pf-t--global--color--status--danger--hover: var(--pf-t--global--color--status--danger--300);
241
239
  --pf-t--global--color--status--info--clicked: var(--pf-t--global--color--status--info--300);
242
240
  --pf-t--global--color--status--info--default: var(--pf-t--global--color--status--info--200);
243
241
  --pf-t--global--color--status--info--hover: var(--pf-t--global--color--status--info--300);
242
+ --pf-t--global--color--status--success--clicked: var(--pf-t--global--color--status--success--300);
244
243
  --pf-t--global--color--status--success--default: var(--pf-t--global--color--status--success--200);
245
- --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
246
- --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
244
+ --pf-t--global--color--status--success--hover: var(--pf-t--global--color--status--success--300);
247
245
  --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
248
246
  --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
249
247
  --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
248
+ --pf-t--global--focus-ring--color--default: var(--pf-t--global--focus-ring--color--200);
250
249
  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
251
250
  --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
252
251
  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
@@ -275,8 +274,6 @@
275
274
  --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100);
276
275
  --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
277
276
  --pf-t--global--text--color--required: var(--pf-t--global--text--color--500);
278
- --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
279
- --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
280
277
  --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
281
278
  --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--200);
282
279
  --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--200);
@@ -295,12 +292,16 @@
295
292
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
296
293
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
297
294
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
295
+ --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
298
296
  --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
297
+ --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
299
298
  --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
300
299
  --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
301
300
  --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
302
301
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
302
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
303
303
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
304
+ --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
304
305
  --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked);
305
306
  --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default);
306
307
  --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover);
@@ -398,7 +399,9 @@
398
399
  --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
399
400
  --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
400
401
  --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
402
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
401
403
  --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
404
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
402
405
  --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
403
406
  --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
404
407
  --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 29 May 2025 14:58:29 GMT
3
+ // Generated on Wed, 06 Aug 2025 21:17:22 GMT
4
4
 
5
5
  :root {
6
6
  --pf-t--color--black: #000000;
@@ -11,7 +11,7 @@
11
11
  --pf-t--color--blue--50: #0066cc;
12
12
  --pf-t--color--blue--60: #004d99;
13
13
  --pf-t--color--blue--70: #003366;
14
- --pf-t--color--blue--80: #002250;
14
+ --pf-t--color--blue--80: #032142;
15
15
  --pf-t--color--gray--10: #f2f2f2;
16
16
  --pf-t--color--gray--20: #e0e0e0;
17
17
  --pf-t--color--gray--30: #c7c7c7;
@@ -29,6 +29,7 @@
29
29
  --pf-t--color--green--50: #63993d;
30
30
  --pf-t--color--green--60: #3d7317;
31
31
  --pf-t--color--green--70: #204d00;
32
+ --pf-t--color--green--80: #183301;
32
33
  --pf-t--color--orange--10: #ffe8cc;
33
34
  --pf-t--color--orange--20: #fccb8f;
34
35
  --pf-t--color--orange--30: #f8ae54;
@@ -60,6 +61,7 @@
60
61
  --pf-t--color--red-orange--50: #f0561d;
61
62
  --pf-t--color--red-orange--60: #b1380b;
62
63
  --pf-t--color--red-orange--70: #731f00;
64
+ --pf-t--color--red-orange--80: #4c1405;
63
65
  --pf-t--color--teal--10: #daf2f2;
64
66
  --pf-t--color--teal--20: #b9e5e5;
65
67
  --pf-t--color--teal--30: #9ad8d8;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/design-tokens",
3
- "version": "1.14.0",
3
+ "version": "1.14.1",
4
4
  "description": "Define the design tokens for patternfly design system and component library",
5
5
  "main": "dist/esm/index.js",
6
6
  "module": "dist/esm/index.js",