Skip to content

Commit 761dbd9

Browse files
ty2kty2k
committed
Add initial design-tokens package
1 parent 6ce9e62 commit 761dbd9

File tree

12 files changed

+770
-0
lines changed

12 files changed

+770
-0
lines changed

‎packages/design-tokens/.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Include build and dist folders
2+
!build/*
3+
!dist/*
4+
5+
.DS_Store
6+
node_modules

‎packages/design-tokens/.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
20

‎packages/design-tokens/README.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Design Tokens for BC Design System
2+
3+
This package is being used to test publishing design tokens from Figma to npm.
4+
5+
Questions? Please email the <a href="mailto:corporatewebdesign@gov.bc.ca">GDX OSS Design Team</a>.
6+
7+
## Workflow
8+
9+
1. Collect design tokens input data from the [Tokens Studio for Figma](<https://www.figma.com/community/plugin/843461159747178978/Tokens-Studio-for-Figma-(Figma-Tokens)>) plugin
10+
2. Transform the raw data from Tokens Studio using the [token-transformer npm package](https://www.npmjs.com/package/token-transformer)
11+
3. Transform the processed data into different output style formats using [Style Dictionary](https://amzn.github.io/style-dictionary/#/)
12+
4. Publish the output data on [npm](https://www.npmjs.com/)
13+
14+
## Steps to publish tokens
15+
16+
1. Use the Tokens Studio plugin in Figma to publish changes to the `feature/design-tokens/tokens-input` source branch on this repository.
17+
2. Make a pull request with the source branch into the feature branch (`feature/design-tokens`) to update the contents of the `./input` directory. This is our "raw" JSON data from Tokens Studio. Merge this pull request.
18+
3. Run `npm run transform-raw-tokens` to process our raw JSON data into a usable format using Tokens Studio's `token-transformer` plugin.
19+
4. Run `npm run build-transformed-tokens` to run Style Dictionary using the settings in `config.json`. This outputs the design tokens in our target formats.
20+
5. Run `npm run prepare-npm-package` to copy the contents of `build` into `dist`.
21+
6. Run `npm run publish-npm-package` to publish to `npm`.
22+
23+
## Folder structure
24+
25+
```
26+
.
27+
├── build - output of style-dictionary
28+
├── dist - published to npm as @bcgov/design-tokens
29+
├── input - raw design token JSON data from Tokens Studio for Figma
30+
├── input-transformed - output of token-transformer, input of style-dictionary
31+
├── .gitignore - package-specific .gitignore
32+
├── .nvmrc - major Node.js version used
33+
├── config.json - style-dictionary config
34+
├── package.json - contains npm scripts for performing transformations
35+
└── README.md
36+
```

‎packages/design-tokens/build/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Include this folder in the repo even if it's empty

‎packages/design-tokens/config.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"source": ["input-transformed/**/*.json"],
3+
"platforms": {
4+
"css": {
5+
"transformGroup": "css",
6+
"buildPath": "build/css/",
7+
"files": [
8+
{
9+
"format": "css/variables",
10+
"destination": "variables.css"
11+
}
12+
]
13+
},
14+
"scss": {
15+
"transformGroup": "scss",
16+
"buildPath": "build/scss/",
17+
"files": [
18+
{
19+
"destination": "_variables.scss",
20+
"format": "scss/variables"
21+
}
22+
]
23+
}
24+
}
25+
}

‎packages/design-tokens/dist/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Include this folder in the repo even if it's empty

‎packages/design-tokens/dist/README.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# @bcgov/design-tokens
2+
3+
This package is being used to test publishing design tokens from Figma to npm.
4+
5+
Questions? Please email the <a href="mailto:corporatewebdesign@gov.bc.ca">GDX OSS Design Team</a>.
6+
7+
See main repository: https://github.com/bcgov/design-tokens
8+
9+
To use, install this package (`npm i @bcgov/design-tokens`) and import the design tokens for your platform. Reference the design tokens according to your platform's needs.
10+
11+
React example:
12+
13+
```js
14+
// Import the variables file that makes sense for your platform.
15+
import "@bcgov/design-tokens/css/variables.css";
16+
17+
function Button({ children, ...props }) {
18+
return (
19+
<button
20+
style={{
21+
backgroundColor: "var(--button-primary-background)",
22+
color: "var(--button-primary-text)",
23+
}}
24+
>
25+
{children}
26+
</button>
27+
);
28+
}
29+
```

‎packages/design-tokens/dist/package.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "@bcgov/design-tokens",
3+
"version": "0.0.1",
4+
"description": "Design tokens for BC Design System",
5+
"repository": {
6+
"type": "git",
7+
"url": "git+https://github.com/bcgov/design-system.git"
8+
},
9+
"keywords": [
10+
"design-system",
11+
"design tokens",
12+
"figma",
13+
"tokens studio",
14+
"token-transformer",
15+
"style-dictionary"
16+
],
17+
"author": "Tyler Krys <Tyler.Krys@gov.bc.ca>",
18+
"license": "Apache-2.0",
19+
"bugs": {
20+
"url": "https://github.com/bcgov/design-system/issues"
21+
},
22+
"homepage": "https://github.com/bcgov/design-system#readme",
23+
"private": false
24+
}

‎packages/design-tokens/input-transformed/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
This folder holds design token data that has been transformed by `token-transformer` for processing by `style-dictionary`.

‎packages/design-tokens/input/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
This folder holds design token JSON data from Tokens Studio for Figma.

0 commit comments

Comments
 (0)