From 01b590a999f2842442f5f4104fd77ce7d39dc308 Mon Sep 17 00:00:00 2001 From: Jaalah Ramos <125309814+jaalah-akamai@users.noreply.github.com> Date: Thu, 30 Nov 2023 21:56:10 -0500 Subject: [PATCH] Update README.md --- README.md | 126 ++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 90 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index 3d88f78..83ef023 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,4 @@ -# Basic Style Dictionary - -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: +# Installation ```bash yarn install yarn generate @@ -10,18 +8,21 @@ You should see something like this output: ``` ============================================== -Processing... 1 of 4 - - theme: akamai +Processing... 1 of 3 + - theme: default - Platform: web web/js -✔︎ dist/akamai/tokens.es6.js -✔︎ dist/akamai/theme.es6.js -✔︎ dist/akamai/theme.d.ts -✔︎ dist/akamai/tokens.d.ts +✔︎ dist/tokens.es6.js +✔︎ dist/theme.es6.js +✔︎ dist/theme.d.ts +✔︎ dist/tokens.d.ts web/scss -✔︎ dist/akamai/tokens.scss +✔︎ dist/tokens.scss + +web/css +✔︎ dist/tokens.css End processing @@ -31,41 +32,94 @@ End processing 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 build directory and it should look like this: ``` ├── dist/ -│ ├── akamai/ -│ ├── index.js -│ ├── theme.es6.js -│ ├── tokens.es6.js -│ ├── cloudmanager/ -│ ├── index.js -│ ├── theme.es6.js -│ ├── tokens.es6.js +│ ├── dark +│ ├── ... +│ ├── highContrast +│ ├── ... +│ ├── index.d.ts +│ ├── index.js +│ ├── theme.d.ts +│ ├── theme.es6.js +│ ├── tokens.css +│ ├── tokens.d.js +│ ├── tokens.es6.js +│ ├── tokens.scss ``` -If you open `config.json` you will see there are 5 platforms defined: scss, android, compose, ios, and ios-swift. 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: +If you open `config/build.ts` you will see there is 1 platforms defined for web (however, we can build for android, compose, ios, and ios-swift). 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: **JS** ```js // tokens.es6.js -export const TokenColorNeutralsBlack = "#222222"; -export const TokenColorNeutralsGrey10 = "#32363C"; -export const TokenColorNeutralsGrey09 = "#444444"; -export const TokenColorNeutralsGrey08 = "#606469"; -export const TokenColorNeutralsGrey07 = "#8C929D"; -export const TokenColorNeutralsGrey06 = "#ABADAF"; -export const TokenColorNeutralsGrey05 = "#C9CACB"; -export const TokenColorNeutralsGrey04 = "#E7E7E7"; -export const TokenColorNeutralsGrey03 = "#EEEEEE"; -export const TokenColorNeutralsGrey02 = "#F5F5F5"; -export const TokenColorNeutralsGrey01 = "#FAFAFA"; -export const TokenColorNeutralsWhite = "#ffffff"; +export const TokenColorNeutrals5 = "#F7F7FA"; +export const TokenColorNeutrals10 = "#EDEDF2"; +export const TokenColorNeutrals20 = "#E5E5EA"; +export const TokenColorNeutrals30 = "#D6D6DD"; +export const TokenColorNeutrals40 = "#C2C2CA"; +export const TokenColorNeutrals50 = "#A3A3AB"; +export const TokenColorNeutrals60 = "#83838C"; +export const TokenColorNeutrals70 = "#717178"; +export const TokenColorNeutrals80 = "#5E5E65"; +export const TokenColorNeutrals90 = "#4B4B51"; +export const TokenColorNeutrals100 = "#3A3A3F"; +``` + +**JS Nested** +```js +export default { + Color: { + Neutrals: { + 5: "#F7F7FA", + 10: "#EDEDF2", + 20: "#E5E5EA", + 30: "#D6D6DD", + 40: "#C2C2CA", + 50: "#A3A3AB", + 60: "#83838C", + 70: "#717178", + 80: "#5E5E65", + 90: "#4B4B51", + 100: "#3A3A3F" + }, + } +} +``` + +**SCSS** +```scss +// tokens.scss +$token-color-neutrals-5: #F7F7FA; +$token-color-neutrals-10: #EDEDF2; +$token-color-neutrals-20: #E5E5EA; +$token-color-neutrals-30: #D6D6DD; +$token-color-neutrals-40: #C2C2CA; +$token-color-neutrals-50: #A3A3AB; +$token-color-neutrals-60: #83838C; +$token-color-neutrals-70: #717178; +$token-color-neutrals-80: #5E5E65; +$token-color-neutrals-90: #4B4B51; +$token-color-neutrals-100: #3A3A3F; ``` -Pretty nifty! This shows a few things happening: -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. -1. The build system resolves references to other design tokens. `{size.font.medium.value}` gets resolved properly. -1. The build system handles references to token values in other files as well as you can see in `tokens/color/font.json`. +**CSS** +```css +// tokens.css +--token-color-neutrals-5: #F7F7FA; +--token-color-neutrals-10: #EDEDF2; +--token-color-neutrals-20: #E5E5EA; +--token-color-neutrals-30: #D6D6DD; +--token-color-neutrals-40: #C2C2CA; +--token-color-neutrals-50: #A3A3AB; +--token-color-neutrals-60: #83838C; +--token-color-neutrals-70: #717178; +--token-color-neutrals-80: #5E5E65; +--token-color-neutrals-90: #4B4B51; +--token-color-neutrals-100: #3A3A3F; +``` -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. +This shows a few things happening: +1. The build system does a deep merge of all the token JSON files defined in the `source` attribute of `config/build.ts`. This allows you to split up the token JSON files however you want. +2. The build system resolves references to other design tokens in other files as well. For example in `tokens/alias/light.json` the value `{color.neutrals.white}` gets resolved properly. **Huzzah!**