Skip to content

Commit e33e996

Browse files
germain-gggermain-gg
committed
Setup design tokens package
1 parent df8c1c1 commit e33e996

File tree

15 files changed

+612
-4
lines changed

15 files changed

+612
-4
lines changed

‎.gitignore

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
.DS_Store
22
node_modules
33

4-
web/
5-
android/
6-
ios/
74
.build
8-
storybook-static
5+
storybook-static

‎design-tokens/Package.swift

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import PackageDescription
2+
3+
let package = Package(
4+
name: "CompoundDesignTokens",
5+
products: [
6+
.library(
7+
name: "CompoundDesignTokens",
8+
targets:["CompoundDesignTokens"]
9+
),
10+
],
11+
targets: [
12+
.target(
13+
name: "CompoundDesignTokens",
14+
dependencies: []
15+
),
16+
]
17+
)

‎design-tokens/README.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Compound Design Tokens
2+
3+
Home to the design tokens.
4+
5+
## Supported platforms
6+
7+
- iOS
8+
- Android
9+
- CSS Properties
10+
- JavaScript (JSON export)
11+
12+
## Development
13+
14+
The tokens are defined under the `tokens/` folder and follow the [W3C Design Tokens specification](https://design-tokens.github.io/community-group/format/).
15+
They are then transformed to the supported platforms using [Style Dictionary](https://amzn.github.io/style-dictionary/).
16+
17+
All consumable tokens are generated under `assets/`. Generate them by running
18+
19+
```
20+
yarn build
21+
```

‎design-tokens/assets/android/StyleDictionary.kt

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
3+
// Do not edit directly
4+
// Generated on Fri, 20 Jan 2023 15:09:34 GMT
5+
6+
7+
8+
package io.element.compound.tokens;
9+
10+
11+
import androidx.compose.ui.graphics.Color
12+
import androidx.compose.ui.unit.*
13+
14+
object StyleDictionary {
15+
/** The main brand color */
16+
val brand = #0dbd8b
17+
/** The default font size */
18+
val sizeDefault = 256.00.dp
19+
}

‎design-tokens/assets/android/StyleDictionaryWithReferences.kt

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
3+
// Do not edit directly
4+
// Generated on Fri, 20 Jan 2023 15:09:34 GMT
5+
6+
7+
8+
package io.element.compound.tokens;
9+
10+
11+
import androidx.compose.ui.graphics.Color
12+
import androidx.compose.ui.unit.*
13+
14+
object StyleDictionary {
15+
/** The default font size */
16+
val sizeDefault = 256.00.dp
17+
/** The main brand color */
18+
val brand = #0dbd8b
19+
}

‎design-tokens/assets/ios/DesignTokens.xcassets/Brand.colorset/Contents.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"colors": [
3+
{
4+
"idiom": "universal",
5+
"color": {
6+
"color-space": "srgb",
7+
"components": {
8+
"red": "13",
9+
"green": "189",
10+
"blue": "139",
11+
"alpha": "1"
12+
}
13+
}
14+
}
15+
],
16+
"info": { "author": "xcode", "version": 1 }
17+
}

‎design-tokens/assets/ios/DesignTokens.xcassets/Contents.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{ "info": { "author": "xcode", "version": 1 } }

‎design-tokens/assets/web/css/tokens.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* Do not edit directly
3+
* Generated on Fri, 20 Jan 2023 15:09:34 GMT
4+
*/
5+
6+
:root {
7+
--brand: #0dbd8b; /* The main brand color */
8+
--size-default: 16px; /* The default font size */
9+
}

‎design-tokens/assets/web/js/tokens.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"brand": "#0dbd8b",
3+
"size-default": "16px"
4+
}

‎design-tokens/config.js

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
module.exports = {
2+
source: [`tokens/**/*.json`],
3+
// If you don't want to call the registerTransform method a bunch of times
4+
// you can override the whole transform object directly. This works because
5+
// the .extend method copies everything in the config
6+
// to itself, allowing you to override things. It's also doing a deep merge
7+
// to protect from accidentally overriding nested attributes.
8+
transform: {
9+
// Now we can use the transform 'myTransform' below
10+
myTransform: {
11+
type: "name",
12+
transformer: (token) => token.path.join("_").toUpperCase(),
13+
},
14+
},
15+
action: {
16+
colorsets: require("./src/colorset-action"),
17+
},
18+
// Same with formats, you can now write them directly to this config
19+
// object. The name of the format is the key.
20+
format: {
21+
myFormat: ({ dictionary }) => {
22+
return dictionary.allTokens
23+
.map((token) => `${token.name}: ${token.value}`)
24+
.join("\n");
25+
},
26+
},
27+
parsers: [
28+
{
29+
pattern: /\.json|\.tokens\.json|\.tokens$/,
30+
parse: ({ contents }) => {
31+
// replace $value with value so that style dictionary recognizes it
32+
const preparedContent = (contents || "{}")
33+
.replace(/"\$?value":/g, '"value":')
34+
// convert $description to comment
35+
.replace(/"\$?description":/g, '"comment":');
36+
//
37+
return JSON.parse(preparedContent);
38+
},
39+
},
40+
],
41+
platforms: {
42+
css: {
43+
transformGroup: "css",
44+
transforms: ["attribute/cti", "name/cti/kebab", "size/px"],
45+
files: [
46+
{
47+
destination: "assets/web/css/tokens.css",
48+
format: "css/variables",
49+
},
50+
],
51+
},
52+
js: {
53+
transformGroup: `web`,
54+
buildPath: "assets/web/js/",
55+
files: [
56+
{
57+
destination: `tokens.json`,
58+
format: `json/flat`,
59+
},
60+
],
61+
},
62+
"ios-colorsets": {
63+
buildPath: "assets/ios/",
64+
transforms: ["attribute/cti", "name/cti/pascal", "attribute/color"],
65+
actions: [`colorsets`],
66+
},
67+
compose: {
68+
transformGroup: `compose`,
69+
files: [
70+
{
71+
destination: "assets/android/StyleDictionary.kt",
72+
format: "compose/object",
73+
className: "StyleDictionary",
74+
packageName: "io.element.compound.tokens",
75+
},
76+
{
77+
destination: "assets/android/StyleDictionaryWithReferences.kt",
78+
format: "compose/object",
79+
className: "StyleDictionary",
80+
packageName: "io.element.compound.tokens",
81+
options: {
82+
outputReferences: true,
83+
},
84+
},
85+
],
86+
},
87+
},
88+
};

‎design-tokens/package.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "design-tokens",
3+
"version": "1.0.0",
4+
"description": "",
5+
"scripts": {
6+
"build": "style-dictionary build"
7+
},
8+
"keywords": [],
9+
"author": "",
10+
"license": "ISC",
11+
"devDependencies": {
12+
"style-dictionary": "^3.7.2",
13+
"style-dictionary-utils": "^1.1.0"
14+
}
15+
}

‎design-tokens/src/colorset-action.js

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
const fs = require("fs");
2+
const path = require("path");
3+
4+
const transformers = require("style-dictionary/lib/common/transforms");
5+
6+
const CONTENTS = {
7+
info: {
8+
author: "xcode",
9+
version: 1,
10+
},
11+
};
12+
13+
const createDir = (path) => {
14+
try {
15+
fs.mkdirSync(path, { recursive: true });
16+
} catch (err) {
17+
if (err.code !== "EEXIST") throw err;
18+
}
19+
};
20+
21+
module.exports = {
22+
do: (dictionary, { buildPath }) => {
23+
const assetPath = path.join(buildPath, "DesignTokens.xcassets");
24+
25+
createDir(assetPath);
26+
fs.writeFileSync(`${assetPath}/Contents.json`, JSON.stringify(CONTENTS));
27+
28+
const colorTransformer = transformers["attribute/color"].transformer;
29+
30+
dictionary.allProperties
31+
.filter((token) => {
32+
return token.$type === `color`;
33+
})
34+
.forEach((token) => {
35+
const colorsetPath = `${assetPath}/${token.name}.colorset`;
36+
createDir(colorsetPath);
37+
38+
const { rgb } = colorTransformer(token);
39+
40+
fs.writeFileSync(
41+
`${colorsetPath}/Contents.json`,
42+
JSON.stringify({
43+
colors: [
44+
{
45+
idiom: "universal",
46+
color: {
47+
"color-space": `srgb`,
48+
components: {
49+
red: `${rgb.r}`,
50+
green: `${rgb.g}`,
51+
blue: `${rgb.b}`,
52+
alpha: `${rgb.a}`,
53+
},
54+
},
55+
},
56+
],
57+
...CONTENTS,
58+
})
59+
);
60+
});
61+
},
62+
undo: function () {},
63+
};

‎design-tokens/tokens/color.tokens.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"brand": {
3+
"$value": "#0dbd8b",
4+
"$type": "color",
5+
"$description": "The main brand color"
6+
}
7+
}

‎design-tokens/tokens/font.tokens.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"size": {
3+
"default": {
4+
"$type": "dimension",
5+
"$value": "16px",
6+
"$description": "The default font size"
7+
}
8+
}
9+
}

0 commit comments

Comments
 (0)