@patternfly/design-tokens 1.14.1 → 1.14.2

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 (24) hide show
  1. package/build/css/tokens-charts-dark.scss +1 -1
  2. package/build/css/tokens-charts.scss +1 -1
  3. package/build/css/tokens-dark.scss +2 -1
  4. package/build/css/tokens-default.scss +8 -2
  5. package/build/css/tokens-highcontrast-dark.scss +5 -4
  6. package/build/css/tokens-highcontrast.scss +275 -4
  7. package/build/css/tokens-palette.scss +1 -1
  8. package/package.json +1 -1
  9. package/patternfly-docs/content/token-layers-dark.json +848 -627
  10. package/patternfly-docs/content/token-layers-default.json +469 -298
  11. package/plugins/export-patternfly-tokens/dist/ui.html +48 -27
  12. package/plugins/export-patternfly-tokens/src/ui.tsx +50 -26
  13. package/tokens/dark/base.dark.json +46 -42
  14. package/tokens/dark/charts.dark.json +4 -4
  15. package/tokens/default/base.json +1 -1
  16. package/tokens/default/charts.json +4 -4
  17. package/tokens/default/semantic.dimension.json +41 -10
  18. package/tokens/default/semantic.motion.json +25 -25
  19. package/tokens/highcontrast/base.dimension.json +387 -0
  20. package/tokens/highcontrast/base.json +1 -1
  21. package/tokens/highcontrast/semantic.dimension.highcontrast.json +1055 -0
  22. package/tokens/highcontrast/semantic.highcontrast.json +2 -2
  23. package/tokens/highcontrast-dark/base.dark.json +46 -42
  24. package/tokens/highcontrast-dark/semantic.highcontrast.dark.json +2 -2
package/build/css/tokens-charts-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 06 Aug 2025 21:17:22 GMT
3
+ // Generated on Wed, 13 Aug 2025 19:01:51 GMT
4
4
 
5
5
  :root {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/build/css/tokens-charts.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 06 Aug 2025 21:17:22 GMT
3
+ // Generated on Wed, 13 Aug 2025 19:01:51 GMT
4
4
 
5
5
  :root {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/build/css/tokens-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 06 Aug 2025 21:17:22 GMT
3
+ // Generated on Wed, 13 Aug 2025 19:01:51 GMT
4
4
 
5
5
  :root {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
@@ -28,6 +28,7 @@
28
28
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
29
29
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
30
30
  --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
31
+ --pf-t--global--dark--border--color--300: var(--pf-t--color--gray--30);
31
32
  --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
32
33
  --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
33
34
  --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
package/build/css/tokens-default.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 06 Aug 2025 21:17:22 GMT
3
+ // Generated on Wed, 13 Aug 2025 19:01:51 GMT
4
4
 
5
5
  :root {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -17,6 +17,12 @@
17
17
  --pf-t--global--border--width--200: 2px;
18
18
  --pf-t--global--border--width--300: 3px;
19
19
  --pf-t--global--border--width--400: 4px;
20
+ --pf-t--global--border--width--action--plain--clicked: 0px;
21
+ --pf-t--global--border--width--action--plain--default: 0px;
22
+ --pf-t--global--border--width--action--plain--hover: 0px;
23
+ --pf-t--global--border--width--high-contrast--extra-strong: 0px;
24
+ --pf-t--global--border--width--high-contrast--regular: 0px;
25
+ --pf-t--global--border--width--high-contrast--strong: 0px;
20
26
  --pf-t--global--box-shadow--X--100: -10px;
21
27
  --pf-t--global--box-shadow--X--200: -4px;
22
28
  --pf-t--global--box-shadow--X--300: -1px;
@@ -128,7 +134,7 @@
128
134
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
129
135
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
130
136
  --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
131
- --pf-t--global--border--color--450: var(--pf-t--color--gray--60);
137
+ --pf-t--global--border--color--400: var(--pf-t--color--gray--60);
132
138
  --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
133
139
  --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
134
140
  --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
package/build/css/tokens-highcontrast-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 06 Aug 2025 21:17:22 GMT
3
+ // Generated on Wed, 13 Aug 2025 19:01:51 GMT
4
4
 
5
5
  :root {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
@@ -13,8 +13,6 @@
13
13
  --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
14
14
  --pf-t--global--background--color--primary--default: var(--pf-t--color--black);
15
15
  --pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600);
16
- --pf-t--global--border--color--default: var(--pf-t--color--gray--30);
17
- --pf-t--global--border--color--on-secondary: var(--pf-t--color--gray--60);
18
16
  --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100);
19
17
  --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200);
20
18
  --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100);
@@ -30,6 +28,7 @@
30
28
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
31
29
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
32
30
  --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
31
+ --pf-t--global--dark--border--color--300: var(--pf-t--color--gray--30);
33
32
  --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
34
33
  --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
35
34
  --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
@@ -123,8 +122,8 @@
123
122
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
124
123
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
125
124
  --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--300);
126
126
  --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--100);
127
- --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
128
127
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
129
128
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
130
129
  --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
@@ -153,6 +152,7 @@
153
152
  --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200);
154
153
  --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
155
154
  --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
155
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--300);
156
156
  --pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--200);
157
157
  --pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100);
158
158
  --pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200);
@@ -235,6 +235,7 @@
235
235
  --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
236
236
  --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
237
237
  --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
238
+ --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
238
239
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
239
240
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
240
241
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
package/build/css/tokens-highcontrast.scss CHANGED
@@ -1,15 +1,105 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 06 Aug 2025 21:17:22 GMT
3
+ // Generated on Wed, 13 Aug 2025 19:01:51 GMT
4
4
 
5
5
  :root {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
7
7
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
8
8
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
9
+ --pf-t--global--border--radius--0: 0px;
10
+ --pf-t--global--border--radius--100: 4px;
11
+ --pf-t--global--border--radius--200: 6px;
12
+ --pf-t--global--border--radius--300: 16px;
13
+ --pf-t--global--border--radius--400: 24px;
14
+ --pf-t--global--border--radius--500: 999px;
15
+ --pf-t--global--border--width--100: 1px;
16
+ --pf-t--global--border--width--200: 2px;
17
+ --pf-t--global--border--width--300: 3px;
18
+ --pf-t--global--border--width--400: 4px;
19
+ --pf-t--global--border--width--action--plain--default: 0px;
20
+ --pf-t--global--box-shadow--X--100: -10px;
21
+ --pf-t--global--box-shadow--X--200: -4px;
22
+ --pf-t--global--box-shadow--X--300: -1px;
23
+ --pf-t--global--box-shadow--X--400: 0px;
24
+ --pf-t--global--box-shadow--X--50: -20px;
25
+ --pf-t--global--box-shadow--X--500: 1px;
26
+ --pf-t--global--box-shadow--X--600: 4px;
27
+ --pf-t--global--box-shadow--X--700: 10px;
28
+ --pf-t--global--box-shadow--X--800: 20px;
29
+ --pf-t--global--box-shadow--Y--100: -10px;
30
+ --pf-t--global--box-shadow--Y--200: -4px;
31
+ --pf-t--global--box-shadow--Y--300: -1px;
32
+ --pf-t--global--box-shadow--Y--400: 0px;
33
+ --pf-t--global--box-shadow--Y--50: -20px;
34
+ --pf-t--global--box-shadow--Y--500: 1px;
35
+ --pf-t--global--box-shadow--Y--600: 4px;
36
+ --pf-t--global--box-shadow--Y--700: 10px;
37
+ --pf-t--global--box-shadow--Y--800: 20px;
38
+ --pf-t--global--box-shadow--blur--100: 4px;
39
+ --pf-t--global--box-shadow--blur--200: 9px;
40
+ --pf-t--global--box-shadow--blur--300: 20px;
9
41
  --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
10
42
  --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
43
+ --pf-t--global--box-shadow--spread--100: 0px;
44
+ --pf-t--global--box-shadow--spread--200: -4px;
45
+ --pf-t--global--box-shadow--spread--300: -8px;
46
+ --pf-t--global--box-shadow--spread--400: -20px;
47
+ --pf-t--global--breakpoint--100: 0rem;
48
+ --pf-t--global--breakpoint--200: 36rem;
49
+ --pf-t--global--breakpoint--250: 40rem;
50
+ --pf-t--global--breakpoint--300: 48rem;
51
+ --pf-t--global--breakpoint--350: 60rem;
52
+ --pf-t--global--breakpoint--400: 62rem;
53
+ --pf-t--global--breakpoint--500: 75rem;
54
+ --pf-t--global--breakpoint--550: 80rem;
55
+ --pf-t--global--breakpoint--600: 90.625rem;
11
56
  --pf-t--global--color--nonstatus--green--400: #3d7019;
12
57
  --pf-t--global--color--status--success--150: #3d7019;
58
+ --pf-t--global--focus-ring--position--inset: -4;
59
+ --pf-t--global--focus-ring--position--offset: 2;
60
+ --pf-t--global--focus-ring--width--inset: 3;
61
+ --pf-t--global--focus-ring--width--offset: 2;
62
+ --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;
63
+ --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;
64
+ --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace;
65
+ --pf-t--global--font--line-height--100: 1.3;
66
+ --pf-t--global--font--line-height--200: 1.5;
67
+ --pf-t--global--font--size--100: 0.75rem;
68
+ --pf-t--global--font--size--200: 0.875rem;
69
+ --pf-t--global--font--size--300: 1rem;
70
+ --pf-t--global--font--size--400: 1.125rem;
71
+ --pf-t--global--font--size--500: 1.25rem;
72
+ --pf-t--global--font--size--600: 1.5rem;
73
+ --pf-t--global--font--size--700: 1.75rem;
74
+ --pf-t--global--font--size--800: 2.25rem;
75
+ --pf-t--global--font--weight--100: 400;
76
+ --pf-t--global--font--weight--200: 500;
77
+ --pf-t--global--font--weight--300: 500;
78
+ --pf-t--global--font--weight--400: 700;
79
+ --pf-t--global--icon--size--100: 0.75rem;
80
+ --pf-t--global--icon--size--200: 0.875rem;
81
+ --pf-t--global--icon--size--250: 1rem;
82
+ --pf-t--global--icon--size--300: 1.5rem;
83
+ --pf-t--global--icon--size--400: 3.5rem;
84
+ --pf-t--global--icon--size--500: 6rem;
85
+ --pf-t--global--spacer--100: 0.25rem;
86
+ --pf-t--global--spacer--200: 0.5rem;
87
+ --pf-t--global--spacer--300: 1rem;
88
+ --pf-t--global--spacer--400: 1.5rem;
89
+ --pf-t--global--spacer--500: 2rem;
90
+ --pf-t--global--spacer--600: 3rem;
91
+ --pf-t--global--spacer--700: 4rem;
92
+ --pf-t--global--spacer--800: 5rem;
93
+ --pf-t--global--text-decoration--line--100: none;
94
+ --pf-t--global--text-decoration--line--200: underline;
95
+ --pf-t--global--text-decoration--style--100: solid;
96
+ --pf-t--global--text-decoration--style--200: dashed;
97
+ --pf-t--global--z-index--100: 100;
98
+ --pf-t--global--z-index--200: 200;
99
+ --pf-t--global--z-index--300: 300;
100
+ --pf-t--global--z-index--400: 400;
101
+ --pf-t--global--z-index--500: 500;
102
+ --pf-t--global--z-index--600: 600;
13
103
  --pf-t--global--background--color--100: var(--pf-t--color--white);
14
104
  --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
15
105
  --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
@@ -24,17 +114,91 @@
24
114
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
25
115
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
26
116
  --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
27
- --pf-t--global--border--color--450: var(--pf-t--color--gray--60);
117
+ --pf-t--global--border--color--400: var(--pf-t--color--gray--60);
28
118
  --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
29
119
  --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--400);
30
- --pf-t--global--border--color--on-secondary: var(--pf-t--color--gray--80);
31
120
  --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--150);
121
+ --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
122
+ --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
123
+ --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
124
+ --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--0);
125
+ --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200);
126
+ --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100);
127
+ --pf-t--global--border--width--action--clicked: var(--pf-t--global--border--width--200);
128
+ --pf-t--global--border--width--action--default: var(--pf-t--global--border--width--100);
129
+ --pf-t--global--border--width--action--hover: var(--pf-t--global--border--width--200);
130
+ --pf-t--global--border--width--action--plain--clicked: var(--pf-t--global--border--width--200);
131
+ --pf-t--global--border--width--action--plain--hover: var(--pf-t--global--border--width--100);
132
+ --pf-t--global--border--width--box--clicked: var(--pf-t--global--border--width--300);
133
+ --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100);
134
+ --pf-t--global--border--width--box--hover: var(--pf-t--global--border--width--200);
135
+ --pf-t--global--border--width--box--status--default: var(--pf-t--global--border--width--200);
136
+ --pf-t--global--border--width--box--status--read: var(--pf-t--global--border--width--100);
137
+ --pf-t--global--border--width--control--clicked: var(--pf-t--global--border--width--200);
138
+ --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100);
139
+ --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--200);
140
+ --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
141
+ --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
142
+ --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
143
+ --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
144
+ --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
145
+ --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
146
+ --pf-t--global--box-shadow--X--lg--bottom: var(--pf-t--global--box-shadow--X--400);
147
+ --pf-t--global--box-shadow--X--lg--default: var(--pf-t--global--box-shadow--X--400);
148
+ --pf-t--global--box-shadow--X--lg--left: var(--pf-t--global--box-shadow--X--50);
149
+ --pf-t--global--box-shadow--X--lg--right: var(--pf-t--global--box-shadow--X--800);
150
+ --pf-t--global--box-shadow--X--lg--top: var(--pf-t--global--box-shadow--X--400);
151
+ --pf-t--global--box-shadow--X--md--bottom: var(--pf-t--global--box-shadow--X--400);
152
+ --pf-t--global--box-shadow--X--md--default: var(--pf-t--global--box-shadow--X--400);
153
+ --pf-t--global--box-shadow--X--md--left: var(--pf-t--global--box-shadow--X--100);
154
+ --pf-t--global--box-shadow--X--md--right: var(--pf-t--global--box-shadow--X--700);
155
+ --pf-t--global--box-shadow--X--md--top: var(--pf-t--global--box-shadow--X--400);
156
+ --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400);
157
+ --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400);
158
+ --pf-t--global--box-shadow--X--sm--left: var(--pf-t--global--box-shadow--X--200);
159
+ --pf-t--global--box-shadow--X--sm--right: var(--pf-t--global--box-shadow--X--600);
160
+ --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400);
161
+ --pf-t--global--box-shadow--Y--lg--bottom: var(--pf-t--global--box-shadow--Y--800);
162
+ --pf-t--global--box-shadow--Y--lg--default: var(--pf-t--global--box-shadow--Y--700);
163
+ --pf-t--global--box-shadow--Y--lg--left: var(--pf-t--global--box-shadow--Y--400);
164
+ --pf-t--global--box-shadow--Y--lg--right: var(--pf-t--global--box-shadow--Y--400);
165
+ --pf-t--global--box-shadow--Y--lg--top: var(--pf-t--global--box-shadow--Y--50);
166
+ --pf-t--global--box-shadow--Y--md--bottom: var(--pf-t--global--box-shadow--Y--700);
167
+ --pf-t--global--box-shadow--Y--md--default: var(--pf-t--global--box-shadow--Y--600);
168
+ --pf-t--global--box-shadow--Y--md--left: var(--pf-t--global--box-shadow--Y--400);
169
+ --pf-t--global--box-shadow--Y--md--right: var(--pf-t--global--box-shadow--Y--400);
170
+ --pf-t--global--box-shadow--Y--md--top: var(--pf-t--global--box-shadow--Y--100);
171
+ --pf-t--global--box-shadow--Y--sm--bottom: var(--pf-t--global--box-shadow--Y--600);
172
+ --pf-t--global--box-shadow--Y--sm--default: var(--pf-t--global--box-shadow--Y--500);
173
+ --pf-t--global--box-shadow--Y--sm--left: var(--pf-t--global--box-shadow--Y--400);
174
+ --pf-t--global--box-shadow--Y--sm--right: var(--pf-t--global--box-shadow--Y--400);
175
+ --pf-t--global--box-shadow--Y--sm--top: var(--pf-t--global--box-shadow--Y--200);
176
+ --pf-t--global--box-shadow--blur--lg: var(--pf-t--global--box-shadow--blur--300);
177
+ --pf-t--global--box-shadow--blur--md: var(--pf-t--global--box-shadow--blur--200);
178
+ --pf-t--global--box-shadow--blur--sm: var(--pf-t--global--box-shadow--blur--100);
32
179
  --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--box-shadow--color--100);
33
180
  --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--box-shadow--color--200);
34
181
  --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--box-shadow--color--100);
35
182
  --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--box-shadow--color--100);
36
183
  --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--box-shadow--color--100);
37
184
  --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--box-shadow--color--200);
185
+ --pf-t--global--box-shadow--spread--lg--default: var(--pf-t--global--box-shadow--spread--100);
186
+ --pf-t--global--box-shadow--spread--lg--directional: var(--pf-t--global--box-shadow--spread--400);
187
+ --pf-t--global--box-shadow--spread--md--default: var(--pf-t--global--box-shadow--spread--100);
188
+ --pf-t--global--box-shadow--spread--md--directional: var(--pf-t--global--box-shadow--spread--300);
189
+ --pf-t--global--box-shadow--spread--sm--default: var(--pf-t--global--box-shadow--spread--100);
190
+ --pf-t--global--box-shadow--spread--sm--directional: var(--pf-t--global--box-shadow--spread--200);
191
+ --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600);
192
+ --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550);
193
+ --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300);
194
+ --pf-t--global--breakpoint--height--md: var(--pf-t--global--breakpoint--250);
195
+ --pf-t--global--breakpoint--height--sm: var(--pf-t--global--breakpoint--100);
196
+ --pf-t--global--breakpoint--height--xl: var(--pf-t--global--breakpoint--350);
197
+ --pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400);
198
+ --pf-t--global--breakpoint--md: var(--pf-t--global--breakpoint--300);
199
+ --pf-t--global--breakpoint--sm: var(--pf-t--global--breakpoint--200);
200
+ --pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500);
201
+ --pf-t--global--breakpoint--xs: var(--pf-t--global--breakpoint--100);
38
202
  --pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
39
203
  --pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
40
204
  --pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
@@ -123,6 +287,23 @@
123
287
  --pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80);
124
288
  --pf-t--global--focus-ring--color--100: var(--pf-t--color--blue--50);
125
289
  --pf-t--global--focus-ring--color--200: var(--pf-t--color--blue--60);
290
+ --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
291
+ --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
292
+ --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
293
+ --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
294
+ --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
295
+ --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);
296
+ --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
297
+ --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);
298
+ --pf-t--global--font--size--lg: var(--pf-t--global--font--size--400);
299
+ --pf-t--global--font--size--md: var(--pf-t--global--font--size--300);
300
+ --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
301
+ --pf-t--global--font--size--xl: var(--pf-t--global--font--size--500);
302
+ --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
303
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200);
304
+ --pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--100);
305
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
306
+ --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300);
126
307
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
127
308
  --pf-t--global--icon--color--150: var(--pf-t--color--gray--60);
128
309
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
@@ -131,6 +312,20 @@
131
312
  --pf-t--global--icon--color--brand--default: var(--pf-t--color--blue--60);
132
313
  --pf-t--global--icon--color--brand--hover: var(--pf-t--color--blue--70);
133
314
  --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--150);
315
+ --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
316
+ --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
317
+ --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
318
+ --pf-t--global--icon--size--md: var(--pf-t--global--icon--size--200);
319
+ --pf-t--global--icon--size--sm: var(--pf-t--global--icon--size--100);
320
+ --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
321
+ --pf-t--global--spacer--2xl: var(--pf-t--global--spacer--600);
322
+ --pf-t--global--spacer--3xl: var(--pf-t--global--spacer--700);
323
+ --pf-t--global--spacer--4xl: var(--pf-t--global--spacer--800);
324
+ --pf-t--global--spacer--lg: var(--pf-t--global--spacer--400);
325
+ --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
326
+ --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
327
+ --pf-t--global--spacer--xl: var(--pf-t--global--spacer--500);
328
+ --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
134
329
  --pf-t--global--text--color--100: var(--pf-t--color--gray--95);
135
330
  --pf-t--global--text--color--200: var(--pf-t--color--gray--60);
136
331
  --pf-t--global--text--color--250: var(--pf-t--color--gray--70);
@@ -145,6 +340,24 @@
145
340
  --pf-t--global--text--color--link--250: var(--pf-t--color--blue--70);
146
341
  --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
147
342
  --pf-t--global--text--color--link--350: var(--pf-t--color--purple--60);
343
+ --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200);
344
+ --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200);
345
+ --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200);
346
+ --pf-t--global--text-decoration--editable-text--style--hover: var(--pf-t--global--text-decoration--style--200);
347
+ --pf-t--global--text-decoration--help-text--line--default: var(--pf-t--global--text-decoration--line--200);
348
+ --pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200);
349
+ --pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200);
350
+ --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200);
351
+ --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--line--200);
352
+ --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200);
353
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100);
354
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100);
355
+ --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600);
356
+ --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400);
357
+ --pf-t--global--z-index--md: var(--pf-t--global--z-index--300);
358
+ --pf-t--global--z-index--sm: var(--pf-t--global--z-index--200);
359
+ --pf-t--global--z-index--xl: var(--pf-t--global--z-index--500);
360
+ --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100);
148
361
  --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200);
149
362
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
150
363
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200);
@@ -163,7 +376,7 @@
163
376
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
164
377
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--400);
165
378
  --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50);
166
- --pf-t--global--border--color--default: var(--pf-t--global--border--color--450);
379
+ --pf-t--global--border--color--default: var(--pf-t--global--border--color--400);
167
380
  --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
168
381
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--300);
169
382
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--500);
@@ -192,11 +405,15 @@
192
405
  --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--500);
193
406
  --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--400);
194
407
  --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--500);
408
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--400);
195
409
  --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
196
410
  --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--200);
197
411
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
198
412
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
199
413
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
414
+ --pf-t--global--border--width--high-contrast--extra-strong: var(--pf-t--global--border--width--extra-strong);
415
+ --pf-t--global--border--width--high-contrast--regular: var(--pf-t--global--border--width--regular);
416
+ --pf-t--global--border--width--high-contrast--strong: var(--pf-t--global--border--width--strong);
200
417
  --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--400);
201
418
  --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--300);
202
419
  --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--400);
@@ -246,6 +463,15 @@
246
463
  --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
247
464
  --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
248
465
  --pf-t--global--focus-ring--color--default: var(--pf-t--global--focus-ring--color--200);
466
+ --pf-t--global--font--size--body--default: var(--pf-t--global--font--size--sm);
467
+ --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--md);
468
+ --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--xs);
469
+ --pf-t--global--font--size--heading--h1: var(--pf-t--global--font--size--2xl);
470
+ --pf-t--global--font--size--heading--h2: var(--pf-t--global--font--size--xl);
471
+ --pf-t--global--font--size--heading--h3: var(--pf-t--global--font--size--lg);
472
+ --pf-t--global--font--size--heading--h4: var(--pf-t--global--font--size--md);
473
+ --pf-t--global--font--size--heading--h5: var(--pf-t--global--font--size--md);
474
+ --pf-t--global--font--size--heading--h6: var(--pf-t--global--font--size--md);
249
475
  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
250
476
  --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
251
477
  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
@@ -265,6 +491,40 @@
265
491
  --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
266
492
  --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
267
493
  --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--150);
494
+ --pf-t--global--icon--size--font--2xl: var(--pf-t--global--font--size--2xl);
495
+ --pf-t--global--icon--size--font--3xl: var(--pf-t--global--font--size--3xl);
496
+ --pf-t--global--icon--size--font--4xl: var(--pf-t--global--font--size--4xl);
497
+ --pf-t--global--icon--size--font--lg: var(--pf-t--global--font--size--lg);
498
+ --pf-t--global--icon--size--font--md: var(--pf-t--global--font--size--md);
499
+ --pf-t--global--icon--size--font--sm: var(--pf-t--global--font--size--sm);
500
+ --pf-t--global--icon--size--font--xl: var(--pf-t--global--font--size--xl);
501
+ --pf-t--global--icon--size--font--xs: var(--pf-t--global--font--size--xs);
502
+ --pf-t--global--spacer--action--horizontal--compact: var(--pf-t--global--spacer--md);
503
+ --pf-t--global--spacer--action--horizontal--default: var(--pf-t--global--spacer--lg);
504
+ --pf-t--global--spacer--action--horizontal--plain--compact: var(--pf-t--global--spacer--xs);
505
+ --pf-t--global--spacer--action--horizontal--plain--default: var(--pf-t--global--spacer--sm);
506
+ --pf-t--global--spacer--action--horizontal--spacious: var(--pf-t--global--spacer--xl);
507
+ --pf-t--global--spacer--control--horizontal--compact: var(--pf-t--global--spacer--sm);
508
+ --pf-t--global--spacer--control--horizontal--default: var(--pf-t--global--spacer--md);
509
+ --pf-t--global--spacer--control--horizontal--plain: var(--pf-t--global--spacer--sm);
510
+ --pf-t--global--spacer--control--horizontal--spacious: var(--pf-t--global--spacer--lg);
511
+ --pf-t--global--spacer--control--vertical--compact: var(--pf-t--global--spacer--xs);
512
+ --pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--sm);
513
+ --pf-t--global--spacer--control--vertical--plain: var(--pf-t--global--spacer--sm);
514
+ --pf-t--global--spacer--control--vertical--spacious: var(--pf-t--global--spacer--md);
515
+ --pf-t--global--spacer--gap--action-to-action--default: var(--pf-t--global--spacer--md);
516
+ --pf-t--global--spacer--gap--action-to-action--plain: var(--pf-t--global--spacer--xs);
517
+ --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs);
518
+ --pf-t--global--spacer--gap--group--horizontal: var(--pf-t--global--spacer--md);
519
+ --pf-t--global--spacer--gap--group--vertical: var(--pf-t--global--spacer--sm);
520
+ --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm);
521
+ --pf-t--global--spacer--gap--group-to-group--horizontal--default: var(--pf-t--global--spacer--2xl);
522
+ --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--md);
523
+ --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--lg);
524
+ --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs);
525
+ --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
526
+ --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md);
527
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg);
268
528
  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
269
529
  --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
270
530
  --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--200);
@@ -281,6 +541,8 @@
281
541
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
282
542
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
283
543
  --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--250);
544
+ --pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs);
545
+ --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular);
284
546
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--primary--default);
285
547
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default);
286
548
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
@@ -365,6 +627,15 @@
365
627
  --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
366
628
  --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
367
629
  --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
630
+ --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
631
+ --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
632
+ --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
633
+ --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1);
634
+ --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2);
635
+ --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3);
636
+ --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4);
637
+ --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5);
638
+ --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6);
368
639
  --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--regular);
369
640
  --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--regular);
370
641
  --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular);
package/build/css/tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 06 Aug 2025 21:17:22 GMT
3
+ // Generated on Wed, 13 Aug 2025 19:01:51 GMT
4
4
 
5
5
  :root {
6
6
  --pf-t--color--black: #000000;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/design-tokens",
3
- "version": "1.14.1",
3
+ "version": "1.14.2",
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",