Skip to content

Commit 52ac06e

Browse files
lukasoppermannlukasoppermann
committed
add dark dimmed overrides and update combineTheme script
1 parent a41211d commit 52ac06e

File tree

3 files changed

+113
-106
lines changed

3 files changed

+113
-106
lines changed

‎scripts/combineThemes.tsx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import {readFileSync, writeFileSync} from 'fs'
2+
import {basename, extname} from 'path'
3+
import JSON5 from 'json5'
4+
5+
interface Theme {
6+
[key: string]: any
7+
}
8+
9+
function combineThemes(baseFilePath: string, overrideFilePath: string, outputFilePath: string): void {
10+
const baseFile = JSON5.parse(readFileSync(baseFilePath, 'utf8'))
11+
const overrideFile = JSON5.parse(readFileSync(overrideFilePath, 'utf8'))
12+
const overrideFileName = basename(overrideFilePath, extname(overrideFilePath)).replace(/\./g, '-')
13+
14+
const combinedTheme = combine(baseFile, overrideFile, overrideFileName)
15+
16+
writeFileSync(outputFilePath, JSON5.stringify(combinedTheme, null, 2))
17+
}
18+
19+
function combine(base: Theme, override: Theme, overrideFileName: string): Theme {
20+
const result = {...base}
21+
22+
for (const key in override) {
23+
if (override.hasOwnProperty(key) && result.hasOwnProperty(key)) {
24+
const overrideValue = override[key]
25+
26+
if (overrideValue && typeof overrideValue === 'object' && overrideValue.$value) {
27+
if (!result[key].$extensions) {
28+
result[key].$extensions = {}
29+
}
30+
if (!result[key].$extensions['org.primer.overrides']) {
31+
result[key].$extensions['org.primer.overrides'] = {}
32+
}
33+
result[key].$extensions['org.primer.overrides'][overrideFileName] = {
34+
$value: overrideValue.$value,
35+
...(overrideValue.alpha !== undefined && {alpha: overrideValue.alpha}),
36+
}
37+
} else if (typeof overrideValue === 'object' && !Array.isArray(overrideValue)) {
38+
result[key] = combine(result[key], overrideValue, overrideFileName)
39+
}
40+
}
41+
}
42+
43+
return result
44+
}
45+
46+
// Main function to handle CLI arguments
47+
function main() {
48+
const args = process.argv.slice(2)
49+
if (args.length !== 3) {
50+
console.error('Usage: npx tsx combineThemes.ts <baseFilePath> <overrideFilePath> <outputFilePath>')
51+
process.exit(1)
52+
}
53+
54+
const [baseFilePath, overrideFilePath, outputFilePath] = args
55+
combineThemes(baseFilePath, overrideFilePath, outputFilePath)
56+
}
57+
58+
main()

‎src/tokens/functional/color/control.json5

+55
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@
1717
'dark-high-contrast': {
1818
$value: '{base.color.neutral.4}',
1919
},
20+
'dark-dimmed': {
21+
$value: '{base.color.neutral.5}',
22+
},
2023
},
2124
},
2225
},
@@ -36,6 +39,9 @@
3639
'dark-high-contrast': {
3740
$value: '{base.color.neutral.5}',
3841
},
42+
'dark-dimmed': {
43+
$value: '{base.color.neutral.6}',
44+
},
3945
},
4046
},
4147
},
@@ -55,6 +61,9 @@
5561
'dark-high-contrast': {
5662
$value: '{base.color.neutral.6}',
5763
},
64+
'dark-dimmed': {
65+
$value: '{base.color.neutral.7}',
66+
},
5867
},
5968
},
6069
},
@@ -158,6 +167,9 @@
158167
},
159168
'org.primer.overrides': {
160169
dark: '{borderColor.default}',
170+
'dark-dimmed': {
171+
$value: '#3d444d',
172+
},
161173
},
162174
},
163175
},
@@ -193,6 +205,10 @@
193205
},
194206
'org.primer.overrides': {
195207
dark: '{borderColor.disabled}',
208+
'dark-dimmed': {
209+
$value: '{base.color.neutral.8}',
210+
alpha: 0.1,
211+
},
196212
},
197213
},
198214
},
@@ -317,6 +333,10 @@
317333
$value: '{base.color.neutral.6}',
318334
alpha: 1,
319335
},
336+
'dark-dimmed': {
337+
$value: '{base.color.neutral.8}',
338+
alpha: 0.15,
339+
},
320340
},
321341
},
322342
alpha: 0.1,
@@ -341,6 +361,10 @@
341361
$value: '{base.color.neutral.7}',
342362
alpha: 1,
343363
},
364+
'dark-dimmed': {
365+
$value: '{base.color.neutral.8}',
366+
alpha: 0.2,
367+
},
344368
},
345369
},
346370
alpha: 0.15,
@@ -381,6 +405,10 @@
381405
$value: '{base.color.neutral.6}',
382406
alpha: 1,
383407
},
408+
'dark-dimmed': {
409+
$value: '{base.color.neutral.8}',
410+
alpha: 0.1,
411+
},
384412
},
385413
},
386414
alpha: 0.15,
@@ -562,6 +590,9 @@
562590
'dark-high-contrast': {
563591
$value: '#2b64c1',
564592
},
593+
'dark-dimmed': {
594+
$value: '#3876d3',
595+
},
565596
},
566597
},
567598
},
@@ -581,6 +612,9 @@
581612
'dark-high-contrast': {
582613
$value: '#3c79d0',
583614
},
615+
'dark-dimmed': {
616+
$value: '#3f7fdb',
617+
},
584618
},
585619
},
586620
},
@@ -671,6 +705,9 @@
671705
'dark-high-contrast': {
672706
$value: '{base.color.blue.2}',
673707
},
708+
'dark-dimmed': {
709+
$value: '#3876d3',
710+
},
674711
},
675712
},
676713
},
@@ -690,6 +727,9 @@
690727
'dark-high-contrast': {
691728
$value: '{base.color.blue.2}',
692729
},
730+
'dark-dimmed': {
731+
$value: '#3f7fdb',
732+
},
693733
},
694734
},
695735
},
@@ -730,6 +770,9 @@
730770
'dark-high-contrast': {
731771
$value: '{base.color.neutral.5}',
732772
},
773+
'dark-dimmed': {
774+
$value: '{base.color.neutral.5}',
775+
},
733776
},
734777
},
735778
},
@@ -749,6 +792,9 @@
749792
'dark-high-contrast': {
750793
$value: '{base.color.neutral.6}',
751794
},
795+
'dark-dimmed': {
796+
$value: '{base.color.neutral.6}',
797+
},
752798
},
753799
},
754800
},
@@ -768,6 +814,9 @@
768814
'dark-high-contrast': {
769815
$value: '{base.color.neutral.7}',
770816
},
817+
'dark-dimmed': {
818+
$value: '{base.color.neutral.7}',
819+
},
771820
},
772821
},
773822
},
@@ -842,6 +891,9 @@
842891
'dark-high-contrast': {
843892
$value: '{borderColor.emphasis}',
844893
},
894+
'dark-dimmed': {
895+
$value: '{base.color.neutral.7}',
896+
},
845897
},
846898
},
847899
},
@@ -878,6 +930,9 @@
878930
},
879931
'org.primer.overrides': {
880932
dark: '{bgColor.inset}',
933+
'dark-dimmed': {
934+
$value: '{bgColor.inset}',
935+
},
881936
},
882937
},
883938
},

‎src/tokens/functional/color/dark/overrides/dark.dimmed.json5

-106
Original file line numberDiff line numberDiff line change
@@ -4,112 +4,6 @@
44
* @description All overwrites for functional color tokens for dark dimmed color mode are in this file
55
*/
66
{
7-
control: {
8-
bgColor: {
9-
rest: {
10-
$value: '{base.color.neutral.5}',
11-
$type: 'color',
12-
},
13-
hover: {
14-
$value: '{base.color.neutral.6}',
15-
$type: 'color',
16-
},
17-
active: {
18-
$value: '{base.color.neutral.7}',
19-
$type: 'color',
20-
},
21-
},
22-
borderColor: {
23-
rest: {
24-
$value: '#3d444d',
25-
$type: 'color',
26-
},
27-
disabled: {
28-
$value: '{base.color.neutral.8}',
29-
$type: 'color',
30-
alpha: 0.1,
31-
},
32-
},
33-
transparent: {
34-
bgColor: {
35-
hover: {
36-
$value: '{base.color.neutral.8}',
37-
$type: 'color',
38-
alpha: 0.15,
39-
},
40-
active: {
41-
$value: '{base.color.neutral.8}',
42-
$type: 'color',
43-
alpha: 0.2,
44-
},
45-
selected: {
46-
$value: '{base.color.neutral.8}',
47-
$type: 'color',
48-
alpha: 0.1,
49-
},
50-
},
51-
},
52-
checked: {
53-
bgColor: {
54-
hover: {
55-
$value: '#3876d3',
56-
$type: 'color',
57-
},
58-
active: {
59-
$value: '#3f7fdb',
60-
$type: 'color',
61-
},
62-
},
63-
borderColor: {
64-
hover: {
65-
$value: '#3876d3',
66-
$type: 'color',
67-
},
68-
active: {
69-
$value: '#3f7fdb',
70-
$type: 'color',
71-
},
72-
},
73-
},
74-
},
75-
controlTrack: {
76-
bgColor: {
77-
rest: {
78-
$value: '{base.color.neutral.5}',
79-
$type: 'color',
80-
},
81-
hover: {
82-
$value: '{base.color.neutral.6}',
83-
$type: 'color',
84-
},
85-
active: {
86-
$value: '{base.color.neutral.7}',
87-
$type: 'color',
88-
},
89-
},
90-
borderColor: {
91-
rest: {
92-
$value: '{base.color.neutral.7}',
93-
$type: 'color',
94-
},
95-
},
96-
},
97-
controlKnob: {
98-
bgColor: {
99-
rest: {
100-
$value: '{bgColor.inset}',
101-
$type: 'color',
102-
$extensions: {
103-
'org.primer.figma': {
104-
collection: 'mode',
105-
106-
group: 'component (internal)',
107-
scopes: ['bgColor'],
108-
},
109-
},
110-
},
111-
},
112-
},
1137
button: {
1148
primary: {
1159
bgColor: {

0 commit comments

Comments
 (0)