@patternfly/design-tokens 1.13.1 → 1.14.0

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 (36) hide show
  1. package/build/css/tokens-charts-dark.scss +2 -2
  2. package/build/css/tokens-charts.scss +2 -2
  3. package/build/css/tokens-dark.scss +21 -5
  4. package/build/css/tokens-default.scss +90 -30
  5. package/build/css/tokens-highcontrast-dark.scss +392 -0
  6. package/build/css/tokens-highcontrast.scss +427 -0
  7. package/build/css/tokens-palette.scss +8 -2
  8. package/build.js +15 -1
  9. package/config.highcontrast.dark.json +23 -0
  10. package/config.highcontrast.json +24 -0
  11. package/config.palette-colors.json +1 -1
  12. package/package.json +1 -1
  13. package/patternfly-docs/content/token-layers-dark.json +4308 -966
  14. package/patternfly-docs/content/token-layers-default.json +4382 -1485
  15. package/patternfly-docs/content/tokensTable.css +16 -3
  16. package/patternfly-docs/content/tokensTable.js +7 -5
  17. package/plugins/export-patternfly-tokens/dist/code.js +87 -0
  18. package/plugins/export-patternfly-tokens/dist/ui.html +34212 -0
  19. package/plugins/export-patternfly-tokens/src/ui.tsx +12 -4
  20. package/tokens/dark/base.dark.json +36 -0
  21. package/tokens/dark/charts.dark.json +8 -8
  22. package/tokens/dark/palette.color.json +24 -0
  23. package/tokens/dark/semantic.dark.json +51 -9
  24. package/tokens/default/base.dimension.json +38 -6
  25. package/tokens/default/base.json +171 -3
  26. package/tokens/default/charts.json +8 -8
  27. package/tokens/default/palette.color.json +24 -0
  28. package/tokens/default/semantic.dimension.json +69 -48
  29. package/tokens/default/semantic.json +51 -9
  30. package/tokens/default/semantic.motion.json +28 -28
  31. package/tokens/highcontrast/base.json +559 -0
  32. package/tokens/highcontrast/palette.color.json +319 -0
  33. package/tokens/highcontrast/semantic.highcontrast.json +1758 -0
  34. package/tokens/highcontrast-dark/base.dark.json +421 -0
  35. package/tokens/highcontrast-dark/palette.color.json +319 -0
  36. package/tokens/highcontrast-dark/semantic.highcontrast.dark.json +1758 -0
@@ -0,0 +1,427 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Thu, 29 May 2025 14:58:29 GMT
4
+
5
+ :root {
6
+ --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
7
+ --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
8
+ --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
9
+ --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
10
+ --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
11
+ --pf-t--global--color--nonstatus--green--400: #3d7019;
12
+ --pf-t--global--color--status--danger--300: #501600;
13
+ --pf-t--global--color--status--success--150: #3d7019;
14
+ --pf-t--global--color--status--success--300: #153300;
15
+ --pf-t--global--background--color--100: var(--pf-t--color--white);
16
+ --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
17
+ --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
18
+ --pf-t--global--background--color--400: var(--pf-t--color--gray--80);
19
+ --pf-t--global--background--color--450: var(--pf-t--color--gray--70);
20
+ --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--background--color--600);
21
+ --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--600);
22
+ --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500);
23
+ --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30);
24
+ --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40);
25
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600);
26
+ --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
27
+ --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
28
+ --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
29
+ --pf-t--global--border--color--450: var(--pf-t--color--gray--60);
30
+ --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
31
+ --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--400);
32
+ --pf-t--global--border--color--on-secondary: var(--pf-t--color--gray--80);
33
+ --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--150);
34
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--box-shadow--color--100);
35
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--box-shadow--color--200);
36
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--box-shadow--color--100);
37
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--box-shadow--color--100);
38
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--box-shadow--color--100);
39
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--box-shadow--color--200);
40
+ --pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
41
+ --pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
42
+ --pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
43
+ --pf-t--global--color--brand--400: var(--pf-t--color--blue--70);
44
+ --pf-t--global--color--brand--500: var(--pf-t--color--blue--80);
45
+ --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
46
+ --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
47
+ --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
48
+ --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
49
+ --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
50
+ --pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70);
51
+ --pf-t--global--color--favorite--400: var(--pf-t--color--yellow--80);
52
+ --pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--20);
53
+ --pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--30);
54
+ --pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--40);
55
+ --pf-t--global--color--nonstatus--blue--400: var(--pf-t--color--blue--60);
56
+ --pf-t--global--color--nonstatus--blue--500: var(--pf-t--color--blue--70);
57
+ --pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--20);
58
+ --pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--30);
59
+ --pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
60
+ --pf-t--global--color--nonstatus--gray--400: var(--pf-t--color--gray--60);
61
+ --pf-t--global--color--nonstatus--gray--50: var(--pf-t--color--gray--10);
62
+ --pf-t--global--color--nonstatus--gray--500: var(--pf-t--color--gray--70);
63
+ --pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--20);
64
+ --pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--30);
65
+ --pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--40);
66
+ --pf-t--global--color--nonstatus--green--500: var(--pf-t--color--green--70);
67
+ --pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--20);
68
+ --pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--30);
69
+ --pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--40);
70
+ --pf-t--global--color--nonstatus--orange--400: var(--pf-t--color--orange--60);
71
+ --pf-t--global--color--nonstatus--orange--500: var(--pf-t--color--orange--70);
72
+ --pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--20);
73
+ --pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--30);
74
+ --pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--40);
75
+ --pf-t--global--color--nonstatus--orangered--400: var(--pf-t--color--red-orange--60);
76
+ --pf-t--global--color--nonstatus--orangered--500: var(--pf-t--color--red-orange--70);
77
+ --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--20);
78
+ --pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--30);
79
+ --pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--40);
80
+ --pf-t--global--color--nonstatus--purple--400: var(--pf-t--color--purple--50);
81
+ --pf-t--global--color--nonstatus--purple--500: var(--pf-t--color--purple--60);
82
+ --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
83
+ --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
84
+ --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
85
+ --pf-t--global--color--nonstatus--red--400: var(--pf-t--color--red--60);
86
+ --pf-t--global--color--nonstatus--red--500: var(--pf-t--color--red--70);
87
+ --pf-t--global--color--nonstatus--teal--100: var(--pf-t--color--teal--20);
88
+ --pf-t--global--color--nonstatus--teal--200: var(--pf-t--color--teal--30);
89
+ --pf-t--global--color--nonstatus--teal--300: var(--pf-t--color--teal--40);
90
+ --pf-t--global--color--nonstatus--teal--400: var(--pf-t--color--teal--70);
91
+ --pf-t--global--color--nonstatus--teal--500: var(--pf-t--color--teal--80);
92
+ --pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--20);
93
+ --pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--30);
94
+ --pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--40);
95
+ --pf-t--global--color--nonstatus--yellow--400: var(--pf-t--color--yellow--70);
96
+ --pf-t--global--color--nonstatus--yellow--500: var(--pf-t--color--yellow--80);
97
+ --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
98
+ --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
99
+ --pf-t--global--color--severity--important--200: var(--pf-t--color--orange--60);
100
+ --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
101
+ --pf-t--global--color--severity--minor--200: var(--pf-t--color--gray--80);
102
+ --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
103
+ --pf-t--global--color--severity--moderate--200: var(--pf-t--color--yellow--70);
104
+ --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
105
+ --pf-t--global--color--severity--none--200: var(--pf-t--color--blue--60);
106
+ --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
107
+ --pf-t--global--color--severity--undefined--200: var(--pf-t--color--gray--60);
108
+ --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
109
+ --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
110
+ --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80);
111
+ --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
112
+ --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);
115
+ --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
116
+ --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
117
+ --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70);
118
+ --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
119
+ --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);
122
+ --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
123
+ --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
124
+ --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
125
+ --pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60);
126
+ --pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70);
127
+ --pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80);
128
+ --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
129
+ --pf-t--global--icon--color--150: var(--pf-t--color--gray--60);
130
+ --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
131
+ --pf-t--global--icon--color--300: var(--pf-t--color--white);
132
+ --pf-t--global--icon--color--brand--clicked: var(--pf-t--color--blue--70);
133
+ --pf-t--global--icon--color--brand--default: var(--pf-t--color--blue--60);
134
+ --pf-t--global--icon--color--brand--hover: var(--pf-t--color--blue--70);
135
+ --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--150);
136
+ --pf-t--global--text--color--100: var(--pf-t--color--gray--95);
137
+ --pf-t--global--text--color--200: var(--pf-t--color--gray--60);
138
+ --pf-t--global--text--color--250: var(--pf-t--color--gray--70);
139
+ --pf-t--global--text--color--300: var(--pf-t--color--white);
140
+ --pf-t--global--text--color--400: var(--pf-t--color--red-orange--40);
141
+ --pf-t--global--text--color--500: var(--pf-t--color--red-orange--70);
142
+ --pf-t--global--text--color--brand--clicked: var(--pf-t--color--blue--80);
143
+ --pf-t--global--text--color--brand--default: var(--pf-t--color--blue--70);
144
+ --pf-t--global--text--color--brand--hover: var(--pf-t--color--blue--80);
145
+ --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
146
+ --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
147
+ --pf-t--global--text--color--link--250: var(--pf-t--color--blue--70);
148
+ --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
149
+ --pf-t--global--text--color--link--350: var(--pf-t--color--purple--60);
150
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200);
151
+ --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
152
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200);
153
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
154
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200);
155
+ --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--background--color--highlight--200);
156
+ --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100);
157
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--background--color--450);
158
+ --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400);
159
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--background--color--450);
160
+ --pf-t--global--background--color--primary--clicked: var(--pf-t--global--background--color--200);
161
+ --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100);
162
+ --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200);
163
+ --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300);
164
+ --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
165
+ --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
166
+ --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--400);
167
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50);
168
+ --pf-t--global--border--color--default: var(--pf-t--global--border--color--450);
169
+ --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
170
+ --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--300);
171
+ --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--500);
172
+ --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--400);
173
+ --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--500);
174
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--500);
175
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--400);
176
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--500);
177
+ --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--500);
178
+ --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--500);
179
+ --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--500);
180
+ --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--400);
181
+ --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--500);
182
+ --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--500);
183
+ --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--400);
184
+ --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--500);
185
+ --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--500);
186
+ --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--400);
187
+ --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--500);
188
+ --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--500);
189
+ --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--400);
190
+ --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--500);
191
+ --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--500);
192
+ --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--400);
193
+ --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--500);
194
+ --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--500);
195
+ --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--400);
196
+ --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
+ --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
200
+ --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--200);
201
+ --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
202
+ --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
203
+ --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
204
+ --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--400);
205
+ --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--300);
206
+ --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--400);
207
+ --pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--400);
208
+ --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--300);
209
+ --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--400);
210
+ --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--200);
211
+ --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--100);
212
+ --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--200);
213
+ --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--100);
214
+ --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--50);
215
+ --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--100);
216
+ --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--200);
217
+ --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--100);
218
+ --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--200);
219
+ --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--200);
220
+ --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--100);
221
+ --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--200);
222
+ --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--200);
223
+ --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--100);
224
+ --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--200);
225
+ --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--200);
226
+ --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--100);
227
+ --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--200);
228
+ --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--200);
229
+ --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--100);
230
+ --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--200);
231
+ --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--200);
232
+ --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--100);
233
+ --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--200);
234
+ --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--200);
235
+ --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--100);
236
+ --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--200);
237
+ --pf-t--global--color--status--custom--clicked: var(--pf-t--global--color--status--custom--300);
238
+ --pf-t--global--color--status--custom--default: var(--pf-t--global--color--status--custom--200);
239
+ --pf-t--global--color--status--custom--hover: var(--pf-t--global--color--status--custom--300);
240
+ --pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--200);
241
+ --pf-t--global--color--status--info--clicked: var(--pf-t--global--color--status--info--300);
242
+ --pf-t--global--color--status--info--default: var(--pf-t--global--color--status--info--200);
243
+ --pf-t--global--color--status--info--hover: var(--pf-t--global--color--status--info--300);
244
+ --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);
247
+ --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
248
+ --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
249
+ --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
250
+ --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
251
+ --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
252
+ --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
253
+ --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100);
254
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100);
255
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--200);
256
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--200);
257
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--200);
258
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--200);
259
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--200);
260
+ --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--200);
261
+ --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--100);
262
+ --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--200);
263
+ --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
264
+ --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--200);
265
+ --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
266
+ --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
267
+ --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
268
+ --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--150);
269
+ --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
270
+ --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
271
+ --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--200);
272
+ --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--250);
273
+ --pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--350);
274
+ --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
275
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100);
276
+ --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
277
+ --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
+ --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
281
+ --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--200);
282
+ --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--200);
283
+ --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
284
+ --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
285
+ --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
286
+ --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--250);
287
+ --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--primary--default);
288
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default);
289
+ --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
290
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
291
+ --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
292
+ --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
293
+ --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
294
+ --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
295
+ --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
296
+ --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
297
+ --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
298
+ --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
299
+ --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
300
+ --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
301
+ --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
302
+ --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
303
+ --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
304
+ --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked);
305
+ --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default);
306
+ --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover);
307
+ --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked);
308
+ --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
309
+ --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
310
+ --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--regular);
311
+ --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular);
312
+ --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular);
313
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
314
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
315
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
316
+ --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--regular);
317
+ --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular);
318
+ --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular);
319
+ --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--regular);
320
+ --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular);
321
+ --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular);
322
+ --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--regular);
323
+ --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular);
324
+ --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular);
325
+ --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--regular);
326
+ --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular);
327
+ --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular);
328
+ --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--regular);
329
+ --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
330
+ --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular);
331
+ --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--regular);
332
+ --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--regular);
333
+ --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--regular);
334
+ --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--regular);
335
+ --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--regular);
336
+ --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--regular);
337
+ --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
338
+ --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
339
+ --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
340
+ --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
341
+ --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
342
+ --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
343
+ --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
344
+ --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
345
+ --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
346
+ --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
347
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
348
+ --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
349
+ --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
350
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
351
+ --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
352
+ --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse);
353
+ --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
354
+ --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
355
+ --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
356
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
357
+ --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
358
+ --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse);
359
+ --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse);
360
+ --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
361
+ --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
362
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
363
+ --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
364
+ --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
365
+ --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
366
+ --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
367
+ --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--regular);
368
+ --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--regular);
369
+ --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular);
370
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
371
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
372
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
373
+ --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--regular);
374
+ --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--regular);
375
+ --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--regular);
376
+ --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--regular);
377
+ --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--regular);
378
+ --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--regular);
379
+ --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--regular);
380
+ --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--regular);
381
+ --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--regular);
382
+ --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--regular);
383
+ --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--regular);
384
+ --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--regular);
385
+ --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--regular);
386
+ --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular);
387
+ --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--regular);
388
+ --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--regular);
389
+ --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--regular);
390
+ --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--regular);
391
+ --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--regular);
392
+ --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--regular);
393
+ --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--regular);
394
+ --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
395
+ --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
396
+ --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
397
+ --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
398
+ --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
399
+ --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
400
+ --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
401
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
402
+ --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
403
+ --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
404
+ --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
405
+ --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
406
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
407
+ --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
408
+ --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
409
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
410
+ --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
411
+ --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse);
412
+ --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse);
413
+ --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse);
414
+ --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
415
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
416
+ --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
417
+ --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse);
418
+ --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse);
419
+ --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse);
420
+ --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
421
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
422
+ --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
423
+ --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
424
+ --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
425
+ --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
426
+ --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
427
+ }
@@ -1,8 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 13 Sep 2024 01:51:18 GMT
3
+ // Generated on Thu, 29 May 2025 14:58:29 GMT
4
4
 
5
- @mixin pf-v6-tokens {
5
+ :root {
6
6
  --pf-t--color--black: #000000;
7
7
  --pf-t--color--blue--10: #e0f0ff;
8
8
  --pf-t--color--blue--20: #b9dafc;
@@ -11,6 +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
15
  --pf-t--color--gray--10: #f2f2f2;
15
16
  --pf-t--color--gray--20: #e0e0e0;
16
17
  --pf-t--color--gray--30: #c7c7c7;
@@ -35,6 +36,7 @@
35
36
  --pf-t--color--orange--50: #ca6c0f;
36
37
  --pf-t--color--orange--60: #9e4a06;
37
38
  --pf-t--color--orange--70: #732e00;
39
+ --pf-t--color--orange--80: #4d1f00;
38
40
  --pf-t--color--purple--10: #ece6ff;
39
41
  --pf-t--color--purple--20: #d0c5f4;
40
42
  --pf-t--color--purple--30: #b6a6e9;
@@ -42,6 +44,7 @@
42
44
  --pf-t--color--purple--50: #5e40be;
43
45
  --pf-t--color--purple--60: #3d2785;
44
46
  --pf-t--color--purple--70: #21134d;
47
+ --pf-t--color--purple--80: #1b0d33;
45
48
  --pf-t--color--red--10: #fce3e3;
46
49
  --pf-t--color--red--20: #fbc5c5;
47
50
  --pf-t--color--red--30: #f9a8a8;
@@ -49,6 +52,7 @@
49
52
  --pf-t--color--red--50: #ee0000;
50
53
  --pf-t--color--red--60: #a60000;
51
54
  --pf-t--color--red--70: #5f0000;
55
+ --pf-t--color--red--80: #3f0000;
52
56
  --pf-t--color--red-orange--10: #ffe3d9;
53
57
  --pf-t--color--red-orange--20: #fbbea8;
54
58
  --pf-t--color--red-orange--30: #f89b78;
@@ -63,6 +67,7 @@
63
67
  --pf-t--color--teal--50: #37a3a3;
64
68
  --pf-t--color--teal--60: #147878;
65
69
  --pf-t--color--teal--70: #004d4d;
70
+ --pf-t--color--teal--80: #003333;
66
71
  --pf-t--color--white: #ffffff;
67
72
  --pf-t--color--yellow--10: #fff4cc;
68
73
  --pf-t--color--yellow--20: #ffe072;
@@ -71,4 +76,5 @@
71
76
  --pf-t--color--yellow--50: #b98412;
72
77
  --pf-t--color--yellow--60: #96640f;
73
78
  --pf-t--color--yellow--70: #73480b;
79
+ --pf-t--color--yellow--80: #54330b;
74
80
  }
package/build.js CHANGED
@@ -13,6 +13,8 @@ const getTokenLayer = ({ filePath }) => {
13
13
  if (filePath.includes('base.motion.json')) return ['base', 'motion'];
14
14
  if (filePath.includes('chart')) return ['chart'];
15
15
  if (filePath.includes('palette.color.json')) return ['palette'];
16
+ if (filePath.includes('semantic.highcontrast.json')) return ['semantic', 'colors'];
17
+ if (filePath.includes('semantic.highcontrast.dark.json')) return ['semantic', 'colors'];
16
18
  return ['palette'];
17
19
  };
18
20
  // returns subdirectory within 'tokens' directory (ex: default, dark, etc)
@@ -82,7 +84,7 @@ const build = (selector) => {
82
84
  name: 'patternfly/global/px',
83
85
  type: 'value',
84
86
  matcher: (token) =>
85
- token.attributes.type === 'border' ||
87
+ (token.attributes.type === 'border' && token.original.type === 'number') ||
86
88
  (token.attributes.type === 'box-shadow' && token.attributes.item !== 'color'),
87
89
  transformer: (token) => `${token.value}px`
88
90
  });
@@ -108,6 +110,13 @@ const build = (selector) => {
108
110
  transformer: (token, options) => `${options.prefix}--${token.path.join('--')}`
109
111
  });
110
112
 
113
+ StyleDictionary.registerTransform({
114
+ name: 'patternfly/global/round-decimel',
115
+ type: 'value',
116
+ matcher: (token) => token.type === 'number',
117
+ transformer: (token) => { console.log(token); return Math.round(parseFloat(token.value) * 100) / 100 }
118
+ });
119
+
111
120
  // Reigster custom transform group
112
121
  StyleDictionary.registerTransformGroup({
113
122
  name: 'patternfly/css',
@@ -120,6 +129,7 @@ const build = (selector) => {
120
129
  'size/rem',
121
130
  'color/css',
122
131
  // custom transforms
132
+ 'patternfly/global/round-decimel',
123
133
  'patternfly/global/px',
124
134
  'patternfly/global/pxToRem',
125
135
  'patternfly/global/ms',
@@ -133,6 +143,8 @@ const build = (selector) => {
133
143
  const paletteExtendedSD = StyleDictionary.extend(__dirname + '/config.palette-colors.json');
134
144
  const chartsExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.json');
135
145
  const chartsDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.dark.json');
146
+ const highContrastDefaultExtendedSD = StyleDictionary.extend(__dirname + '/config.highcontrast.json');
147
+ const highContrastDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.highcontrast.dark.json');
136
148
  const layersSD = StyleDictionary.extend(__dirname + '/config.layers.json');
137
149
  const layersDarkSD = StyleDictionary.extend(__dirname + '/config.layers.dark.json');
138
150
 
@@ -142,6 +154,8 @@ const build = (selector) => {
142
154
  paletteExtendedSD.buildAllPlatforms();
143
155
  chartsExtendedSD.buildAllPlatforms();
144
156
  chartsDarkExtendedSD.buildAllPlatforms();
157
+ highContrastDefaultExtendedSD.buildAllPlatforms();
158
+ highContrastDarkExtendedSD.buildAllPlatforms();
145
159
  layersSD.buildAllPlatforms();
146
160
  layersDarkSD.buildAllPlatforms();
147
161
 
@@ -0,0 +1,23 @@
1
+ {
2
+ "source": ["tokens/highcontrast-dark/*.json"],
3
+ "platforms": {
4
+ "css": {
5
+ "transformGroup": "patternfly/css",
6
+ "buildPath": "build/css/",
7
+ "prefix": "pf-t",
8
+ "files": [{
9
+ "destination": "tokens-highcontrast-dark.scss",
10
+ "format": "customFormat",
11
+ "options": {
12
+ "outputReferences": true
13
+ },
14
+ "filter": {
15
+ "attributes": {
16
+ "category": "global"
17
+ }
18
+ }
19
+ }
20
+ ]
21
+ }
22
+ }
23
+ }
@@ -0,0 +1,24 @@
1
+ {
2
+ "source": ["tokens/highcontrast/*.json"],
3
+ "basePxFontSize": 16,
4
+ "platforms": {
5
+ "css": {
6
+ "transformGroup": "patternfly/css",
7
+ "buildPath": "build/css/",
8
+ "prefix": "pf-t",
9
+ "files": [{
10
+ "destination": "tokens-highcontrast.scss",
11
+ "format": "customFormat",
12
+ "options": {
13
+ "outputReferences": true
14
+ },
15
+ "filter": {
16
+ "attributes": {
17
+ "category": "global"
18
+ }
19
+ }
20
+ }
21
+ ]
22
+ }
23
+ }
24
+ }
@@ -7,7 +7,7 @@
7
7
  "prefix": "pf-t",
8
8
  "files": [{
9
9
  "destination": "tokens-palette.scss",
10
- "format": "customFormat",
10
+ "format": "customFormat",
11
11
  "options": {
12
12
  "outputReferences": true
13
13
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/design-tokens",
3
- "version": "1.13.1",
3
+ "version": "1.14.0",
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",