[GHI #22] Color, Utility, and Token Documentation (#148)

This PR adds documentation for utilities, tokens, and colors. It also adds a missing utility for align self: baseline; called self-baseline

.storybook/documentation.scss

@@ -70,5 +70,27 @@
 
 .font-family-demo--alternative {
   --rm-font-family: 'Tilt Neon', sans-serif;
+
   font-family: var(--rm-font-family);
 }
+
+.design-token-container {
+  .design-token-card {
+    table {
+      td:nth-of-type(1),
+      th:nth-of-type(1) {
+        flex-basis: 40%;
+      }
+
+      td:nth-of-type(2),
+      th:nth-of-type(2) {
+        flex-basis: 35%;
+      }
+
+      td:nth-of-type(3),
+      th:nth-of-type(3) {
+        flex-basis: 25%;
+      }
+    }
+  }
+}

.storybook/main.js

@@ -5,6 +5,7 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/preset-scss',
+    { name: 'storybook-design-token', options: { preserveCSSVars: true } },
   ],
   framework: '@storybook/html',
 }

README.md

@@ -52,6 +52,21 @@ There are also a few component specific tokens that are defined in their respect
 
 There is a JSON file in `docs/token_structure.json` that lists all the current tokens in one place and shows how the names indicate organization.
 
+### Token Documentation
+
+We use the Storybook Design Token for showing design tokens in the documentation. This allows us to tag groups of tokens with a category and a presenter.
+
+[Available Presenters](https://github.com/UX-and-I/storybook-design-token#available-presenters)
+
+Add the following above a group to categorize the tokens.
+
+```css
+/**
+* @tokens Basic Colors
+* @presenter Color
+*/
+```
+
 ## License
 
 [MIT](LICENSE)