Skip to content

Commit 782e06f

Browse files
nicolethoennicolethoen
authored
Merge pull request #106 from mcoker/issue-105
feat(tokens): add support for high contrast tokens
2 parents a65e829 + 92a714e commit 782e06f

32 files changed

+14049
-3094
lines changed

‎packages/module/build.js

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ const getTokenLayer = ({ filePath }) => {
1313
if (filePath.includes('base.motion.json')) return ['base', 'motion'];
1414
if (filePath.includes('chart')) return ['chart'];
1515
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'];
1618
return ['palette'];
1719
};
1820
// returns subdirectory within 'tokens' directory (ex: default, dark, etc)
@@ -82,7 +84,7 @@ const build = (selector) => {
8284
name: 'patternfly/global/px',
8385
type: 'value',
8486
matcher: (token) =>
85-
token.attributes.type === 'border' ||
87+
(token.attributes.type === 'border' && token.original.type === 'number') ||
8688
(token.attributes.type === 'box-shadow' && token.attributes.item !== 'color'),
8789
transformer: (token) => `${token.value}px`
8890
});
@@ -108,6 +110,13 @@ const build = (selector) => {
108110
transformer: (token, options) => `${options.prefix}--${token.path.join('--')}`
109111
});
110112

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+
111120
// Reigster custom transform group
112121
StyleDictionary.registerTransformGroup({
113122
name: 'patternfly/css',
@@ -120,6 +129,7 @@ const build = (selector) => {
120129
'size/rem',
121130
'color/css',
122131
// custom transforms
132+
'patternfly/global/round-decimel',
123133
'patternfly/global/px',
124134
'patternfly/global/pxToRem',
125135
'patternfly/global/ms',
@@ -133,6 +143,8 @@ const build = (selector) => {
133143
const paletteExtendedSD = StyleDictionary.extend(__dirname + '/config.palette-colors.json');
134144
const chartsExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.json');
135145
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');
136148
const layersSD = StyleDictionary.extend(__dirname + '/config.layers.json');
137149
const layersDarkSD = StyleDictionary.extend(__dirname + '/config.layers.dark.json');
138150

@@ -142,6 +154,8 @@ const build = (selector) => {
142154
paletteExtendedSD.buildAllPlatforms();
143155
chartsExtendedSD.buildAllPlatforms();
144156
chartsDarkExtendedSD.buildAllPlatforms();
157+
highContrastDefaultExtendedSD.buildAllPlatforms();
158+
highContrastDarkExtendedSD.buildAllPlatforms();
145159
layersSD.buildAllPlatforms();
146160
layersDarkSD.buildAllPlatforms();
147161

‎packages/module/build/css/tokens-charts-dark.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
// Do not edit directly
3-
// Generated on Mon, 23 Sep 2024 22:48:17 GMT
3+
// Generated on Thu, 29 May 2025 01:58:24 GMT
44

55
@mixin pf-v6-tokens {
66
--pf-t--chart--global--BorderWidth--lg: 8;

‎packages/module/build/css/tokens-charts.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
// Do not edit directly
3-
// Generated on Mon, 23 Sep 2024 22:48:17 GMT
3+
// Generated on Thu, 29 May 2025 01:58:24 GMT
44

55
@mixin pf-v6-tokens {
66
--pf-t--chart--global--BorderWidth--lg: 8;

‎packages/module/build/css/tokens-dark.scss

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11

22
// Do not edit directly
3-
// Generated on Mon, 23 Sep 2024 22:48:17 GMT
3+
// Generated on Thu, 29 May 2025 01:58:23 GMT
44

55
@mixin pf-v6-tokens {
66
--pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
7+
--pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
78
--pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
89
--pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
910
--pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
@@ -34,6 +35,7 @@
3435
--pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
3536
--pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
3637
--pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
38+
--pf-t--global--dark--color--disabled--400: var(--pf-t--color--gray--90);
3739
--pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
3840
--pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
3941
--pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
@@ -42,6 +44,7 @@
4244
--pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
4345
--pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
4446
--pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
47+
--pf-t--global--dark--color--nonstatus--gray--50: var(--pf-t--color--gray--70);
4548
--pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
4649
--pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
4750
--pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
@@ -64,21 +67,25 @@
6467
--pf-t--global--dark--color--nonstatus--yellow--200: var(--pf-t--color--yellow--20);
6568
--pf-t--global--dark--color--nonstatus--yellow--300: var(--pf-t--color--yellow--10);
6669
--pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50);
70+
--pf-t--global--dark--color--severity--critical--200: var(--pf-t--color--red-orange--40);
6771
--pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40);
6872
--pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30);
6973
--pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30);
7074
--pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--30);
7175
--pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40);
7276
--pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
7377
--pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
78+
--pf-t--global--dark--color--status--custom--300: var(--pf-t--color--teal--20);
7479
--pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red-orange--50);
7580
--pf-t--global--dark--color--status--danger--200: var(--pf-t--color--red-orange--40);
7681
--pf-t--global--dark--color--status--danger--250: var(--pf-t--color--red-orange--30);
7782
--pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
7883
--pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
7984
--pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
85+
--pf-t--global--dark--color--status--info--300: var(--pf-t--color--purple--10);
8086
--pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
8187
--pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30);
88+
--pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--20);
8289
--pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
8390
--pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20);
8491
--pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
@@ -91,6 +98,7 @@
9198
--pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20);
9299
--pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10);
93100
--pf-t--global--dark--text--color--link--300: var(--pf-t--color--purple--30);
101+
--pf-t--global--dark--text--color--link--400: var(--pf-t--color--purple--20);
94102
--pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
95103
--pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
96104
--pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);

‎packages/module/build/css/tokens-default.scss

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11

22
// Do not edit directly
3-
// Generated on Mon, 23 Sep 2024 22:48:17 GMT
3+
// Generated on Thu, 29 May 2025 01:58:23 GMT
44

55
@mixin pf-v6-tokens {
66
--pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
77
--pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
88
--pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
9+
--pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
910
--pf-t--global--border--radius--0: 0px;
1011
--pf-t--global--border--radius--100: 4px;
1112
--pf-t--global--border--radius--200: 6px;
@@ -15,6 +16,7 @@
1516
--pf-t--global--border--width--100: 1px;
1617
--pf-t--global--border--width--200: 2px;
1718
--pf-t--global--border--width--300: 3px;
19+
--pf-t--global--border--width--400: 4px;
1820
--pf-t--global--box-shadow--X--100: -10px;
1921
--pf-t--global--box-shadow--X--200: -4px;
2022
--pf-t--global--box-shadow--X--300: -1px;
@@ -51,6 +53,10 @@
5153
--pf-t--global--breakpoint--500: 75rem;
5254
--pf-t--global--breakpoint--550: 80rem;
5355
--pf-t--global--breakpoint--600: 90.625rem;
56+
--pf-t--global--color--nonstatus--green--400: #3d7019;
57+
--pf-t--global--color--status--danger--300: #501600;
58+
--pf-t--global--color--status--success--150: #3d7019;
59+
--pf-t--global--color--status--success--300: #153300;
5460
--pf-t--global--delay--100: 0ms;
5561
--pf-t--global--delay--200: 50ms;
5662
--pf-t--global--delay--300: 100ms;
@@ -65,7 +71,7 @@
6571
--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;
6672
--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;
6773
--pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace;
68-
--pf-t--global--font--line-height--100: 1.2999999523162842;
74+
--pf-t--global--font--line-height--100: 1.3;
6975
--pf-t--global--font--line-height--200: 1.5;
7076
--pf-t--global--font--size--100: 0.75rem;
7177
--pf-t--global--font--size--200: 0.875rem;
@@ -120,6 +126,7 @@
120126
--pf-t--global--border--color--100: var(--pf-t--color--gray--30);
121127
--pf-t--global--border--color--200: var(--pf-t--color--gray--40);
122128
--pf-t--global--border--color--300: var(--pf-t--color--gray--50);
129+
--pf-t--global--border--color--450: var(--pf-t--color--gray--60);
123130
--pf-t--global--border--color--50: var(--pf-t--color--gray--20);
124131
--pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
125132
--pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
@@ -203,56 +210,87 @@
203210
--pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
204211
--pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
205212
--pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
213+
--pf-t--global--color--brand--400: var(--pf-t--color--blue--70);
214+
--pf-t--global--color--brand--500: var(--pf-t--color--blue--80);
206215
--pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
207216
--pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
208217
--pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
209218
--pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
210219
--pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
220+
--pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70);
221+
--pf-t--global--color--favorite--400: var(--pf-t--color--yellow--80);
211222
--pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--20);
212223
--pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--30);
213224
--pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--40);
225+
--pf-t--global--color--nonstatus--blue--400: var(--pf-t--color--blue--60);
226+
--pf-t--global--color--nonstatus--blue--500: var(--pf-t--color--blue--70);
214227
--pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--20);
215228
--pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--30);
216229
--pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
230+
--pf-t--global--color--nonstatus--gray--400: var(--pf-t--color--gray--60);
231+
--pf-t--global--color--nonstatus--gray--50: var(--pf-t--color--gray--10);
232+
--pf-t--global--color--nonstatus--gray--500: var(--pf-t--color--gray--70);
217233
--pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--20);
218234
--pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--30);
219235
--pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--40);
236+
--pf-t--global--color--nonstatus--green--500: var(--pf-t--color--green--70);
220237
--pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--20);
221238
--pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--30);
222239
--pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--40);
240+
--pf-t--global--color--nonstatus--orange--400: var(--pf-t--color--orange--60);
241+
--pf-t--global--color--nonstatus--orange--500: var(--pf-t--color--orange--70);
223242
--pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--20);
224243
--pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--30);
225244
--pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--40);
245+
--pf-t--global--color--nonstatus--orangered--400: var(--pf-t--color--red-orange--60);
246+
--pf-t--global--color--nonstatus--orangered--500: var(--pf-t--color--red-orange--70);
226247
--pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--20);
227248
--pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--30);
228249
--pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--40);
250+
--pf-t--global--color--nonstatus--purple--400: var(--pf-t--color--purple--50);
251+
--pf-t--global--color--nonstatus--purple--500: var(--pf-t--color--purple--60);
229252
--pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
230253
--pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
231254
--pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
255+
--pf-t--global--color--nonstatus--red--400: var(--pf-t--color--red--60);
256+
--pf-t--global--color--nonstatus--red--500: var(--pf-t--color--red--70);
232257
--pf-t--global--color--nonstatus--teal--100: var(--pf-t--color--teal--20);
233258
--pf-t--global--color--nonstatus--teal--200: var(--pf-t--color--teal--30);
234259
--pf-t--global--color--nonstatus--teal--300: var(--pf-t--color--teal--40);
260+
--pf-t--global--color--nonstatus--teal--400: var(--pf-t--color--teal--70);
261+
--pf-t--global--color--nonstatus--teal--500: var(--pf-t--color--teal--80);
235262
--pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--20);
236263
--pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--30);
237264
--pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--40);
265+
--pf-t--global--color--nonstatus--yellow--400: var(--pf-t--color--yellow--70);
266+
--pf-t--global--color--nonstatus--yellow--500: var(--pf-t--color--yellow--80);
238267
--pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
239268
--pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
269+
--pf-t--global--color--severity--important--200: var(--pf-t--color--orange--60);
240270
--pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
271+
--pf-t--global--color--severity--minor--200: var(--pf-t--color--gray--80);
241272
--pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
273+
--pf-t--global--color--severity--moderate--200: var(--pf-t--color--yellow--70);
242274
--pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
275+
--pf-t--global--color--severity--none--200: var(--pf-t--color--blue--60);
243276
--pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
277+
--pf-t--global--color--severity--undefined--200: var(--pf-t--color--gray--60);
244278
--pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
245279
--pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
280+
--pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80);
246281
--pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
247282
--pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
248-
--pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--70);
249283
--pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
250284
--pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
285+
--pf-t--global--color--status--info--300: var(--pf-t--color--purple--70);
251286
--pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
252287
--pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
253288
--pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
254289
--pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
255290
--pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
291+
--pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60);
292+
--pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70);
293+
--pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80);
256294
--pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
257295
--pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
258296
--pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
@@ -271,6 +309,7 @@
271309
--pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
272310
--pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300);
273311
--pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
312+
--pf-t--global--icon--color--150: var(--pf-t--color--gray--60);
274313
--pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
275314
--pf-t--global--icon--color--300: var(--pf-t--color--white);
276315
--pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
@@ -303,11 +342,15 @@
303342
--pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
304343
--pf-t--global--text--color--100: var(--pf-t--color--gray--95);
305344
--pf-t--global--text--color--200: var(--pf-t--color--gray--60);
345+
--pf-t--global--text--color--250: var(--pf-t--color--gray--70);
306346
--pf-t--global--text--color--300: var(--pf-t--color--white);
307347
--pf-t--global--text--color--400: var(--pf-t--color--red-orange--40);
348+
--pf-t--global--text--color--500: var(--pf-t--color--red-orange--70);
308349
--pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
309350
--pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
351+
--pf-t--global--text--color--link--250: var(--pf-t--color--blue--70);
310352
--pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
353+
--pf-t--global--text--color--link--350: var(--pf-t--color--purple--60);
311354
--pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200);
312355
--pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200);
313356
--pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200);

0 commit comments

Comments
 (0)