Update README.md

linode · Dec 1, 2023 · 01b590a · 01b590a
1 parent 6eac2ee
commit 01b590a
Showing 1 changed file with 90 additions and 36 deletions.
diff --git 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!**