# Design Tokens // Adding types for design tokens (#125)

* Adding types for design tokens

Generating a tokens.d.ts file for TypeScript support in applications. It
turns out that TypeScipt can infer types from exports that have
primative types, so we are just generating a duplicate of tokens.js with
a `.d.ts` extension and identifying it as `types` in package.json.

fixes #109

* README update

packages/design-tokens/README.md

@@ -13,3 +13,43 @@ yarn
 ```
 npm run build
 ```
+
+## Exported Tokens
+
+### Sass
+
+`_tokens.scss` contains exported token values as Sass variables.
+
+```sass
+@import "~@cockroachlabs/design-tokens/dist/web/tokens"
+
+.example {
+    background-color: $color-background-button-primary-success-base;
+    color: $color-font-button-primary-success-base;
+    border-width: 1px;
+    border-style: solid;
+    border-color: $color-border-button-primary-success-base;
+}
+```
+
+### JavaScript
+
+`tokens.js` contains exported token values as JavaScript constants.
+
+```jsx
+import {
+  ColorFont1,
+  ColorBaseBlue,
+  ColorBasePurple,
+} from "@cockroachlabs/design-tokens";
+
+// ...
+
+<SomeComponent
+  fontColor={ColorFont1}
+  interactionColor={ColorBaseBlue}
+  progressColor={ColorBasePurple}
+/>;
+```
+
+a `tokens.d.ts` file is also generated to act as types for tokens for TypeScript support.

packages/design-tokens/config.json

@@ -20,6 +20,16 @@
           "destination": "tokens.js"
         }
       ]
+    },
+    "ts": {
+      "transformGroup": "js",
+      "buildPath": "dist/web/",
+      "files": [
+        {
+          "format": "javascript/es6",
+          "destination": "tokens.d.ts"
+        }
+      ]
     }
   }
 }

packages/design-tokens/package.json

@@ -9,10 +9,11 @@
   "keywords": [
     "tokens"
   ],
-  "main": "build.js",
+  "main": "dist/web/tokens.js",
+  "types": "dist/web/tokens.d.ts",
   "scripts": {
-    "build": "node_modules/.bin/style-dictionary build",
-    "clean": "node_modules/.bin/style-dictionary clean",
+    "build": "style-dictionary build",
+    "clean": "style-dictionary clean",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "license": "MIT",