Skip to content

Commit c06661d

Browse files
jorenbroekemajorenbroekema
authoredJun 6, 2024··
fix: fix CLI, update basic example, fix android templates DTCG (#1235)
·
v4.0.0-prerelease.39v4.0.0-prerelease.35
1 parent 344cf66 commit c06661d

16 files changed

+493
-28
lines changed
 

‎.changeset/five-kangaroos-destroy.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'style-dictionary': minor
3+
---
4+
5+
Re-add and update example basic, fix copySync command in CLI, fix android templates to use $type for DTCG tokens.

‎bin/style-dictionary.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,9 @@ program
8888
}
8989
/* eslint-disable no-console */
9090
console.log('Copying starter files...\n');
91-
node_fs.copySync(path.join(__dirname, '..', 'examples', type), process.cwd());
91+
node_fs.cpSync(path.join(__dirname, '..', 'examples', type), process.cwd(), {
92+
recursive: true,
93+
});
9294
console.log('Source style dictionary starter files created!\n');
9395
console.log(
9496
'Running `style-dictionary build` for the first time to generate build artifacts.\n',

‎examples/basic/README.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Basic Style Dictionary
2+
3+
This example code is bare-bones to show you what this framework can do. If you have the style-dictionary module installed globally, you can `cd` into this directory and run:
4+
5+
```bash
6+
npx style-dictionary build
7+
```
8+
9+
Otherwise, install Style Dictionary locally for this project first, `cd` into this directory and run:
10+
11+
```bash
12+
npm init -y && npm install style-dictionary
13+
```
14+
15+
and then run the above command.

‎examples/basic/config.json

+164
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
{
2+
"source": ["tokens/**/*.json"],
3+
"platforms": {
4+
"css": {
5+
"transformGroup": "css",
6+
"buildPath": "build/css/",
7+
"files": [
8+
{
9+
"destination": "_variables.css",
10+
"format": "css/variables"
11+
}
12+
]
13+
},
14+
"android": {
15+
"transformGroup": "android",
16+
"buildPath": "build/android/",
17+
"files": [
18+
{
19+
"destination": "font_dimens.xml",
20+
"format": "android/fontDimens"
21+
},
22+
{
23+
"destination": "colors.xml",
24+
"format": "android/colors"
25+
}
26+
]
27+
},
28+
"compose": {
29+
"transformGroup": "compose",
30+
"buildPath": "build/compose/",
31+
"files": [
32+
{
33+
"destination": "StyleDictionaryColor.kt",
34+
"format": "compose/object",
35+
"options": {
36+
"className": "StyleDictionaryColor",
37+
"packageName": "StyleDictionaryColor"
38+
},
39+
"filter": {
40+
"$type": "color"
41+
}
42+
},
43+
{
44+
"destination": "StyleDictionarySize.kt",
45+
"format": "compose/object",
46+
"options": {
47+
"className": "StyleDictionarySize",
48+
"packageName": "StyleDictionarySize",
49+
"type": "float"
50+
},
51+
"filter": {
52+
"$type": "dimension"
53+
}
54+
}
55+
]
56+
},
57+
"ios": {
58+
"transformGroup": "ios",
59+
"buildPath": "build/ios/",
60+
"files": [
61+
{
62+
"destination": "StyleDictionaryColor.h",
63+
"format": "ios/colors.h",
64+
"options": {
65+
"className": "StyleDictionaryColor",
66+
"type": "StyleDictionaryColorName"
67+
},
68+
"filter": {
69+
"$type": "color"
70+
}
71+
},
72+
{
73+
"destination": "StyleDictionaryColor.m",
74+
"format": "ios/colors.m",
75+
"options": {
76+
"className": "StyleDictionaryColor",
77+
"type": "StyleDictionaryColorName"
78+
},
79+
"filter": {
80+
"$type": "color"
81+
}
82+
},
83+
{
84+
"destination": "StyleDictionarySize.h",
85+
"format": "ios/static.h",
86+
"options": {
87+
"className": "StyleDictionarySize",
88+
"type": "float"
89+
},
90+
"filter": {
91+
"$type": "dimension"
92+
}
93+
},
94+
{
95+
"destination": "StyleDictionarySize.m",
96+
"format": "ios/static.m",
97+
"options": {
98+
"className": "StyleDictionarySize",
99+
"type": "float"
100+
},
101+
"filter": {
102+
"$type": "dimension"
103+
}
104+
}
105+
]
106+
},
107+
"ios-swift": {
108+
"transformGroup": "ios-swift",
109+
"buildPath": "build/ios-swift/",
110+
"files": [
111+
{
112+
"destination": "StyleDictionary+Class.swift",
113+
"format": "ios-swift/class.swift",
114+
"options": {
115+
"className": "StyleDictionaryClass"
116+
}
117+
},
118+
{
119+
"destination": "StyleDictionary+Enum.swift",
120+
"format": "ios-swift/enum.swift",
121+
"options": {
122+
"className": "StyleDictionaryEnum"
123+
}
124+
},
125+
{
126+
"destination": "StyleDictionary+Struct.swift",
127+
"format": "ios-swift/any.swift",
128+
"options": {
129+
"className": "StyleDictionaryStruct",
130+
"imports": "SwiftUI",
131+
"objectType": "struct",
132+
"accessControl": "internal"
133+
}
134+
}
135+
]
136+
},
137+
"ios-swift-separate-enums": {
138+
"transformGroup": "ios-swift-separate",
139+
"buildPath": "build/ios-swift/",
140+
"files": [
141+
{
142+
"destination": "StyleDictionaryColor.swift",
143+
"format": "ios-swift/enum.swift",
144+
"options": {
145+
"className": "StyleDictionaryColor"
146+
},
147+
"filter": {
148+
"$type": "color"
149+
}
150+
},
151+
{
152+
"destination": "StyleDictionarySize.swift",
153+
"format": "ios-swift/enum.swift",
154+
"options": {
155+
"className": "StyleDictionarySize"
156+
},
157+
"filter": {
158+
"$type": "dimension"
159+
}
160+
}
161+
]
162+
}
163+
}
164+
}

‎examples/basic/tokens/colors.json

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"colors": {
3+
"$type": "color",
4+
"black": {
5+
"$value": "#000000"
6+
},
7+
"white": {
8+
"$value": "#ffffff"
9+
},
10+
"orange": {
11+
"100": {
12+
"$value": "#fffaf0"
13+
},
14+
"200": {
15+
"$value": "#feebc8"
16+
},
17+
"300": {
18+
"$value": "#fbd38d"
19+
},
20+
"400": {
21+
"$value": "#f6ad55"
22+
},
23+
"500": {
24+
"$value": "#ed8936"
25+
},
26+
"600": {
27+
"$value": "#dd6b20"
28+
},
29+
"700": {
30+
"$value": "#c05621"
31+
},
32+
"800": {
33+
"$value": "#9c4221"
34+
},
35+
"900": {
36+
"$value": "#7b341e"
37+
}
38+
}
39+
}
40+
}

‎examples/basic/tokens/dimensions.json

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
{
2+
"dimensions": {
3+
"$type": "dimension",
4+
"0": {
5+
"$value": "0px"
6+
},
7+
"1": {
8+
"$value": "4px"
9+
},
10+
"2": {
11+
"$value": "8px"
12+
},
13+
"3": {
14+
"$value": "12px"
15+
},
16+
"4": {
17+
"$value": "16px"
18+
},
19+
"5": {
20+
"$value": "20px"
21+
},
22+
"6": {
23+
"$value": "24px"
24+
},
25+
"7": {
26+
"$value": "28px"
27+
},
28+
"8": {
29+
"$value": "32px"
30+
},
31+
"9": {
32+
"$value": "36px"
33+
},
34+
"10": {
35+
"$value": "40px"
36+
},
37+
"11": {
38+
"$value": "44px"
39+
},
40+
"12": {
41+
"$value": "48px"
42+
},
43+
"13": {
44+
"$value": "52px"
45+
},
46+
"14": {
47+
"$value": "56px"
48+
},
49+
"15": {
50+
"$value": "60px"
51+
},
52+
"max": {
53+
"$value": "9999px"
54+
}
55+
}
56+
}

‎examples/basic/tokens/object-values.json

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
{
2+
"text": {
3+
"typography": {
4+
"$type": "typography",
5+
"heading": {
6+
"$value": {
7+
"fontFamily": "{text.fonts.sans}",
8+
"fontWeight": "{text.weights.bold}",
9+
"fontSize": "{dimensions.7}",
10+
"lineHeight": "{text.lineHeights.large}"
11+
}
12+
},
13+
"body": {
14+
"$value": {
15+
"fontFamily": "{text.fonts.serif}",
16+
"fontWeight": "{text.weights.regular}",
17+
"fontSize": "{dimensions.4}",
18+
"lineHeight": "{text.lineHeights.normal}"
19+
}
20+
}
21+
}
22+
},
23+
"transitions": {
24+
"$type": "transition",
25+
"emphasis": {
26+
"$value": {
27+
"duration": "{transitions.durations.medium}",
28+
"delay": "{transitions.durations.instant}",
29+
"timingFunction": "{transitions.easingFunctions.accelerate}"
30+
}
31+
},
32+
"fade": {
33+
"$value": {
34+
"duration": "{transitions.durations.long}",
35+
"delay": "{transitions.durations.instant}",
36+
"timingFunction": "{transitions.easingFunctions.decelerate}"
37+
}
38+
},
39+
"easingFunctions": {
40+
"$type": "cubicBezier",
41+
"accelerate": {
42+
"$value": [0.5, 0, 1, 1]
43+
},
44+
"decelerate": {
45+
"$value": [0, 0, 0.5, 1]
46+
}
47+
},
48+
"durations": {
49+
"$type": "duration",
50+
"instant": {
51+
"$value": "0ms"
52+
},
53+
"short": {
54+
"$value": "100ms"
55+
},
56+
"medium": {
57+
"$value": "300ms"
58+
},
59+
"long": {
60+
"$value": "600ms"
61+
}
62+
}
63+
},
64+
"borders": {
65+
"$type": "border",
66+
"heavy": {
67+
"$value": {
68+
"color": "{colors.black}",
69+
"width": "{dimensions.1}",
70+
"style": "{borders.styles.solid}"
71+
}
72+
},
73+
"wireframe": {
74+
"$value": {
75+
"color": "{colors.orange.600}",
76+
"width": "{dimensions.2}",
77+
"style": "{borders.styles.dashed}"
78+
}
79+
},
80+
"styles": {
81+
"$type": "strokeStyle",
82+
"solid": {
83+
"$value": "solid"
84+
},
85+
"dashed": {
86+
"$value": {
87+
"dashArray": ["0.5rem", "0.25rem"],
88+
"lineCap": "round"
89+
}
90+
}
91+
}
92+
},
93+
"shadows": {
94+
"$type": "shadow",
95+
"sm": {
96+
"$value": {
97+
"color": "{colors.black}",
98+
"offsetX": "{dimensions.0}",
99+
"offsetY": "{dimensions.1}",
100+
"blur": "{dimensions.3}"
101+
}
102+
},
103+
"lg": {
104+
"$value": {
105+
"color": "{colors.black}",
106+
"offsetX": "{dimensions.0}",
107+
"offsetY": "{dimensions.2}",
108+
"blur": "{dimensions.4}"
109+
}
110+
},
111+
"multi": {
112+
"$value": ["{shadows.sm}", "{shadows.lg}"]
113+
}
114+
}
115+
}

‎examples/basic/tokens/text.json

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
{
2+
"text": {
3+
"fonts": {
4+
"$type": "fontFamily",
5+
"serif": {
6+
"$value": "Times New Roman, serif"
7+
},
8+
"sans": {
9+
"$value": "Open Sans, sans-serif"
10+
}
11+
},
12+
"sizes": {
13+
"$type": "fontSize",
14+
"heading": {
15+
"$value": "{dimensions.7}"
16+
},
17+
"body": {
18+
"$value": "{dimensions.4}"
19+
}
20+
},
21+
"weights": {
22+
"$type": "fontWeight",
23+
"light": {
24+
"$value": "thin"
25+
},
26+
"regular": {
27+
"$value": "regular"
28+
},
29+
"bold": {
30+
"$value": "extra-bold"
31+
}
32+
},
33+
"lineHeights": {
34+
"$type": "number",
35+
"normal": {
36+
"$value": 1.2
37+
},
38+
"large": {
39+
"$value": 1.8
40+
}
41+
},
42+
"typography": {
43+
"$type": "typography",
44+
"heading": {
45+
"$value": {
46+
"fontFamily": "{text.fonts.sans}",
47+
"fontWeight": "{text.weights.bold}",
48+
"fontSize": "{text.sizes.heading}",
49+
"lineHeight": "{text.lineHeights.large}"
50+
}
51+
},
52+
"body": {
53+
"$value": {
54+
"fontFamily": "{text.fonts.serif}",
55+
"fontWeight": "{text.weights.regular}",
56+
"fontSize": "{text.sizes.body}",
57+
"lineHeight": "{text.lineHeights.normal}"
58+
}
59+
}
60+
}
61+
}
62+
}

‎lib/common/templates/android/colors.template.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default ({ dictionary, options, header }) => `<?xml version="1.0" encodin
1616
${header}
1717
<resources>
1818
${dictionary.allTokens
19-
.filter((token) => token.type === 'color')
19+
.filter((token) => (options.usesDtcg ? token.$type : token.type) === 'color')
2020
.map(
2121
(token) =>
2222
` <color name="${token.name}">${options.usesDtcg ? token.$value : token.value}</color>${

‎lib/common/templates/android/dimens.template.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default ({ dictionary, options, header }) => `<?xml version="1.0" encodin
1616
${header}
1717
<resources>
1818
${dictionary.allTokens
19-
.filter((token) => token.type === 'dimension')
19+
.filter((token) => (options.usesDtcg ? token.$type : token.type) === 'dimension')
2020
.map(
2121
(token) =>
2222
` <dimen name="${token.name}">${options.usesDtcg ? token.$value : token.value}</dimen>${

‎lib/common/templates/android/fontDimens.template.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default ({ dictionary, options, header }) => `<?xml version="1.0" encodin
1616
${header}
1717
<resources>
1818
${dictionary.allTokens
19-
.filter((token) => token.type === 'fontSize')
19+
.filter((token) => (options.usesDtcg ? token.$type : token.type) === 'fontSize')
2020
.map(
2121
(token) =>
2222
` <dimen name="${token.name}">${options.usesDtcg ? token.$value : token.value}</dimen>${

‎lib/common/templates/android/integers.template.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default ({ dictionary, options, header }) => `<?xml version="1.0" encodin
1616
${header}
1717
<resources>
1818
${dictionary.allTokens
19-
.filter((token) => token.type === 'time')
19+
.filter((token) => (options.usesDtcg ? token.$type : token.type) === 'time')
2020
.map(
2121
(token) =>
2222
` <integer name="${token.name}">${options.usesDtcg ? token.$value : token.value}</integer>${

‎lib/common/templates/android/resources.template.js

+13-7
Original file line numberDiff line numberDiff line change
@@ -47,27 +47,32 @@ export default (opts) => {
4747

4848
/**
4949
* @param {Token} token
50+
* @param {Config} options
5051
* @returns {string}
5152
*/
52-
function tokenToType(token) {
53+
function tokenToType(token, options) {
54+
const type = options.usesDtcg ? token.$type : token.type;
5355
if (resourceType) {
5456
return resourceType;
5557
}
56-
if (token.type && resourceMap[token.type]) {
57-
return resourceMap[token.type];
58+
if (type && resourceMap[type]) {
59+
return resourceMap[type];
5860
}
5961
return 'string';
6062
}
6163

6264
/**
6365
* @param {Token} token
6466
* @param {Tokens} tokens
67+
* @param {Config} options
6568
* @returns {string}
6669
*/
67-
function tokenToValue(token, tokens) {
70+
function tokenToValue(token, tokens, options) {
6871
let originalValue = options.usesDtcg ? token.original.$value : token.original.value;
6972
if (file?.options && file.options.outputReferences && usesReferences(originalValue)) {
70-
return `@${tokenToType(token)}/${getReferences(originalValue, tokens)[0].name}`;
73+
return `@${tokenToType(token, options)}/${
74+
getReferences(originalValue, tokens, { usesDtcg: options.usesDtcg })[0].name
75+
}`;
7176
} else {
7277
return options.usesDtcg ? token.$value : token.value;
7378
}
@@ -81,10 +86,11 @@ ${header}
8186
/** @type {Token[]} */ (dictionary.allTokens)
8287
.map(
8388
(token) =>
84-
`<${tokenToType(token)} name="${token.name}">${tokenToValue(
89+
`<${tokenToType(token, options)} name="${token.name}">${tokenToValue(
8590
token,
8691
dictionary.tokens,
87-
)}</${tokenToType(token)}>${token.comment ? `<!-- ${token.comment} -->` : ''}`,
92+
options,
93+
)}</${tokenToType(token, options)}>${token.comment ? `<!-- ${token.comment} -->` : ''}`,
8894
)
8995
.join(`\n `)
9096
}

‎lib/common/templates/android/strings.template.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default ({ dictionary, options, header }) => `<?xml version="1.0" encodin
1616
${header}
1717
<resources>
1818
${dictionary.allTokens
19-
.filter((token) => token.type === 'content')
19+
.filter((token) => (options.usesDtcg ? token.$type : token.type) === 'content')
2020
.map(
2121
(token) =>
2222
` <string name="${token.name}">${options.usesDtcg ? token.$value : token.value}</string>${

‎lib/common/templates/ios/plist.template.js

+13-14
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,24 @@
1111
* @param {Config & LocalOptions} options
1212
*/
1313
const tokenTemplate = (token, options) => {
14+
const val = options.usesDtcg ? token.$value : token.value;
15+
const type = options.usesDtcg ? token.$type : token.type;
1416
let output = ` <key>${token.name}</key>\n`;
15-
if (token.type === 'color') {
17+
if (type === 'color') {
1618
output += ` <dict>
1719
<key>r</key>
18-
<real>${(options.usesDtcg ? token.$value : token.value)[0] / 255}</real>
20+
<real>${val[0] / 255}</real>
1921
<key>g</key>
20-
<real>${(options.usesDtcg ? token.$value : token.value)[1] / 255}</real>
22+
<real>${val[1] / 255}</real>
2123
<key>b</key>
22-
<real>${(options.usesDtcg ? token.$value : token.value)[2] / 255}</real>
24+
<real>${val[2] / 255}</real>
2325
<key>a</key>
2426
<real>1</real>
2527
</dict>`;
26-
} else if (token.type === 'dimension') {
27-
output += `<integer>${options.usesDtcg ? token.$value : token.value}</integer>`;
28+
} else if (type === 'dimension') {
29+
output += `<integer>${val}</integer>`;
2830
} else {
29-
output += `<string>${options.usesDtcg ? token.$value : token.value}</string>`;
31+
output += `<string>${val}</string>`;
3032
}
3133

3234
if (token.comment) {
@@ -49,13 +51,10 @@ ${header}
4951
<plist version="1.0">
5052
<dict>
5153
${dictionary.allTokens
52-
.filter(
53-
(token) =>
54-
token.type !== 'asset' &&
55-
token.type !== 'border' &&
56-
token.type !== 'shadow' &&
57-
token.type !== 'transition',
58-
)
54+
.filter((token) => {
55+
const t = options.usesDtcg ? token.$type : token.type;
56+
return t !== 'asset' && t !== 'border' && t !== 'shadow' && t !== 'transition';
57+
})
5958
.map((token) => tokenTemplate(token, options))
6059
.join('\n')}
6160
</dict>

‎lib/common/templates/ios/singleton.m.template.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ function buildDictionary(slice, options, indent) {
1919
if (Object.hasOwn(slice, `${options.usesDtcg ? '$' : ''}value`)) {
2020
const token = /** @type {TransformedToken} */ (slice);
2121
let value = options.usesDtcg ? token.$value : token.value;
22-
if (token.type === 'dimension' || token.type === 'fontSize' || token.type === 'time') {
22+
const type = options.usesDtcg ? token.$type : token.type;
23+
if (type === 'dimension' || type === 'fontSize' || type === 'time') {
2324
value = '@' + value;
2425
}
2526
to_ret += indent + '@"value": ' + value + ',\n';

0 commit comments

Comments
 (0)
Please sign in to comment.