Skip to content

Commit 7364c70

Browse files
GarthDBGarthDB
committed
initial commit
1 parent ee13a4a commit 7364c70

File tree

8 files changed

+948
-203
lines changed

8 files changed

+948
-203
lines changed

‎LICENSE

+201-201
Large diffs are not rendered by default.

‎README.md

+347-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,347 @@
1-
# spectrum-style-dictionary
2-
A Style Dictionary implementation of the Spectrum tokens for Adobe.
1+
# Spectrum Style Dictionary
2+
3+
## Getting started
4+
5+
Start by installing all the project dependencies.
6+
7+
```bash
8+
yarn install
9+
```
10+
11+
Then build the project.
12+
13+
```bash
14+
yarn run build
15+
```
16+
17+
18+
19+
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:
20+
```bash
21+
yarn install
22+
```
23+
24+
You should see something like this output:
25+
```
26+
Copying starter files...
27+
28+
Source style dictionary starter files created!
29+
30+
Running `style-dictionary build` for the first time to generate build artifacts.
31+
32+
33+
css
34+
✔︎ dist/css/variables.css
35+
36+
js
37+
✔︎ dist/js/variables.js
38+
```
39+
40+
Good for you! You have now built your first style dictionary! Moving on, take a look at what we have built. This should have created a dist directory and it should look like this:
41+
```
42+
├── README.md
43+
├── config.json
44+
├── tokens/
45+
│ ├── color/
46+
│ ├── base.json
47+
│ ├── font.json
48+
│ ├── size/
49+
│ ├── font.json
50+
├── dist/
51+
│ ├── css/
52+
│ ├── variables.css
53+
│ ├── js/
54+
│ ├── variables.js
55+
```
56+
57+
If you open `config.json` you will see there are 5 platforms defined: css and js,. Each platform has a transformGroup, buildPath, and files. The buildPath and files of the platform should match up to the files what were built. The files built should look like these:
58+
59+
**CSS**
60+
```css
61+
// variables.css
62+
:root {
63+
--size-font-large: 2rem; /* the large size of the font */
64+
--size-font-medium: 1rem; /* the medium size of the font */
65+
--size-font-small: 0.75rem; /* the small size of the font */
66+
--color-base-green: #00ff00;
67+
--color-base-red: #ff0000;
68+
--color-base-gray-dark: #111111;
69+
--color-base-gray-medium: #999999;
70+
--color-base-gray-light: #cccccc;
71+
--size-font-base: var(--size-font-medium); /* the base size of the font */
72+
--color-font-tertiary: var(--color-base-gray-light);
73+
--color-font-secondary: var(--color-base-green);
74+
--color-font-base: var(--color-base-red);
75+
}
76+
```
77+
78+
**Javascript/object**
79+
```js
80+
var _styleDictionary = {
81+
"color": {
82+
"base": {
83+
"gray": {
84+
"light": {
85+
"value": "#cccccc",
86+
"filePath": "tokens/color/base.json",
87+
"isSource": true,
88+
"original": {
89+
"value": "#CCCCCC"
90+
},
91+
"name": "ColorBaseGrayLight",
92+
"attributes": {
93+
"category": "color",
94+
"type": "base",
95+
"item": "gray",
96+
"subitem": "light"
97+
},
98+
"path": [
99+
"color",
100+
"base",
101+
"gray",
102+
"light"
103+
]
104+
},
105+
"medium": {
106+
"value": "#999999",
107+
"filePath": "tokens/color/base.json",
108+
"isSource": true,
109+
"original": {
110+
"value": "#999999"
111+
},
112+
"name": "ColorBaseGrayMedium",
113+
"attributes": {
114+
"category": "color",
115+
"type": "base",
116+
"item": "gray",
117+
"subitem": "medium"
118+
},
119+
"path": [
120+
"color",
121+
"base",
122+
"gray",
123+
"medium"
124+
]
125+
},
126+
"dark": {
127+
"value": "#111111",
128+
"filePath": "tokens/color/base.json",
129+
"isSource": true,
130+
"original": {
131+
"value": "#111111"
132+
},
133+
"name": "ColorBaseGrayDark",
134+
"attributes": {
135+
"category": "color",
136+
"type": "base",
137+
"item": "gray",
138+
"subitem": "dark"
139+
},
140+
"path": [
141+
"color",
142+
"base",
143+
"gray",
144+
"dark"
145+
]
146+
}
147+
},
148+
"red": {
149+
"value": "#ff0000",
150+
"filePath": "tokens/color/base.json",
151+
"isSource": true,
152+
"original": {
153+
"value": "#FF0000"
154+
},
155+
"name": "ColorBaseRed",
156+
"attributes": {
157+
"category": "color",
158+
"type": "base",
159+
"item": "red"
160+
},
161+
"path": [
162+
"color",
163+
"base",
164+
"red"
165+
]
166+
},
167+
"green": {
168+
"value": "#00ff00",
169+
"filePath": "tokens/color/base.json",
170+
"isSource": true,
171+
"original": {
172+
"value": "#00FF00"
173+
},
174+
"name": "ColorBaseGreen",
175+
"attributes": {
176+
"category": "color",
177+
"type": "base",
178+
"item": "green"
179+
},
180+
"path": [
181+
"color",
182+
"base",
183+
"green"
184+
]
185+
}
186+
},
187+
"font": {
188+
"base": {
189+
"value": "#ff0000",
190+
"filePath": "tokens/color/font.json",
191+
"isSource": true,
192+
"original": {
193+
"value": "{color.base.red.value}"
194+
},
195+
"name": "ColorFontBase",
196+
"attributes": {
197+
"category": "color",
198+
"type": "font",
199+
"item": "base"
200+
},
201+
"path": [
202+
"color",
203+
"font",
204+
"base"
205+
]
206+
},
207+
"secondary": {
208+
"value": "#00ff00",
209+
"filePath": "tokens/color/font.json",
210+
"isSource": true,
211+
"original": {
212+
"value": "{color.base.green.value}"
213+
},
214+
"name": "ColorFontSecondary",
215+
"attributes": {
216+
"category": "color",
217+
"type": "font",
218+
"item": "secondary"
219+
},
220+
"path": [
221+
"color",
222+
"font",
223+
"secondary"
224+
]
225+
},
226+
"tertiary": {
227+
"value": "#cccccc",
228+
"filePath": "tokens/color/font.json",
229+
"isSource": true,
230+
"original": {
231+
"value": "{color.base.gray.light.value}"
232+
},
233+
"name": "ColorFontTertiary",
234+
"attributes": {
235+
"category": "color",
236+
"type": "font",
237+
"item": "tertiary"
238+
},
239+
"path": [
240+
"color",
241+
"font",
242+
"tertiary"
243+
]
244+
}
245+
}
246+
},
247+
"size": {
248+
"font": {
249+
"small": {
250+
"value": "0.75rem",
251+
"comment": "the small size of the font",
252+
"filePath": "tokens/size/font.json",
253+
"isSource": true,
254+
"original": {
255+
"value": "0.75",
256+
"comment": "the small size of the font"
257+
},
258+
"name": "SizeFontSmall",
259+
"attributes": {
260+
"category": "size",
261+
"type": "font",
262+
"item": "small"
263+
},
264+
"path": [
265+
"size",
266+
"font",
267+
"small"
268+
]
269+
},
270+
"medium": {
271+
"value": "1rem",
272+
"comment": "the medium size of the font",
273+
"filePath": "tokens/size/font.json",
274+
"isSource": true,
275+
"original": {
276+
"value": "1",
277+
"comment": "the medium size of the font"
278+
},
279+
"name": "SizeFontMedium",
280+
"attributes": {
281+
"category": "size",
282+
"type": "font",
283+
"item": "medium"
284+
},
285+
"path": [
286+
"size",
287+
"font",
288+
"medium"
289+
]
290+
},
291+
"large": {
292+
"value": "2rem",
293+
"comment": "the large size of the font",
294+
"filePath": "tokens/size/font.json",
295+
"isSource": true,
296+
"original": {
297+
"value": "2",
298+
"comment": "the large size of the font"
299+
},
300+
"name": "SizeFontLarge",
301+
"attributes": {
302+
"category": "size",
303+
"type": "font",
304+
"item": "large"
305+
},
306+
"path": [
307+
"size",
308+
"font",
309+
"large"
310+
]
311+
},
312+
"base": {
313+
"value": "1rem",
314+
"comment": "the base size of the font",
315+
"filePath": "tokens/size/font.json",
316+
"isSource": true,
317+
"original": {
318+
"value": "{size.font.medium.value}",
319+
"comment": "the base size of the font"
320+
},
321+
"name": "SizeFontBase",
322+
"attributes": {
323+
"category": "size",
324+
"type": "font",
325+
"item": "base"
326+
},
327+
"path": [
328+
"size",
329+
"font",
330+
"base"
331+
]
332+
}
333+
}
334+
}
335+
};
336+
```
337+
338+
Pretty nifty! This shows a few things happening:
339+
1. The build system does a deep merge of all the token JSON files defined in the `source` attribute of `config.json`. This allows you to split up the token JSON files however you want. There are 2 JSON files with `color` as the top level key, but they get merged properly.
340+
1. The build system resolves references to other design tokens. `{size.font.medium.value}` gets resolved properly.
341+
1. The build system handles references to token values in other files as well as you can see in `tokens/color/font.json`.
342+
343+
Now let's make a change and see how that affects things. Open up `tokens/color/base.json` and change `"#111111"` to `"#000000"`. After you make that change, save the file and re-run the build command `style-dictionary build`. Open up the build files and take a look.
344+
345+
**Huzzah!**
346+
347+
Now go forth and create! Take a look at all the built-in [transforms](https://amzn.github.io/style-dictionary/#/transforms?id=pre-defined-transforms) and [formats](https://amzn.github.io/style-dictionary/#/formats?id=pre-defined-formats).

‎config.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"source": ["tokens/**/*.json"],
3+
"platforms": {
4+
"css": {
5+
"transformGroup": "css",
6+
"buildPath": "dist/css/",
7+
"files": [{
8+
"destination": "variables.css",
9+
"format": "css/variables",
10+
"options": {
11+
"outputReferences": true
12+
}
13+
}]
14+
},
15+
"js": {
16+
"transformGroup": "js",
17+
"buildPath": "dist/js/",
18+
"files": [{
19+
"destination": "variables.js",
20+
"format": "javascript/object"
21+
}]
22+
}
23+
}
24+
}

‎package.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "style-dictionary-example-complete",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "build.js",
6+
"scripts": {
7+
"build": "node_modules/.bin/style-dictionary build",
8+
"clean": "rm -rf build",
9+
"test": "echo \"Error: no test specified\" && exit 1"
10+
},
11+
"author": "",
12+
"license": "Apache-2.0",
13+
"devDependencies": {
14+
"style-dictionary": "2.9.0"
15+
}
16+
}

0 commit comments

Comments
 (0)