From aaac8590eda6739f218529a9ab4fac883a09222f Mon Sep 17 00:00:00 2001 From: Jaalah Ramos Date: Wed, 17 Apr 2024 13:52:34 -0400 Subject: [PATCH] Update readme --- README.md | 33 +++++++++++++++++++-------------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index e57e82f..738c345 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ yarn install ``` ## Build -> [!note] +>[!note] You can use `yarn storybook` to view all the tokens we have available ```bash @@ -15,25 +15,19 @@ yarn storybook You should see something like this output: ``` ============================================== +Theme: light -Processing... 1 of 3 - - theme: default - - Platform: web - -web/js -✔︎ dist/tokens.es6.js -✔︎ dist/theme.es6.js -✔︎ dist/theme.d.ts +js +✔︎ dist/tokens-nested.es6.js +✔︎ dist/tokens-nested.d.ts ✔︎ dist/tokens.d.ts +✔︎ dist/tokens.es6.js -web/scss +scss ✔︎ dist/tokens.scss -web/css +css ✔︎ dist/tokens.css - -End processing - ============================================== ``` @@ -128,3 +122,14 @@ $token-color-neutrals-100: #3A3A3F; 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. + +## Usage in Apps + +Example: +``` +import { Aliases, Components, Globals } from '@linode/design-language-system'; + +const { Color } = Globals; +const { Border, Interaction } = Aliases; +const { Button } = Components; +``` \ No newline at end of file