docs(tokens): add token documentation (#9232)

* docs(tokens): add token documentation * Update packages/styles/docs/sass.md Co-authored-by: Josh Black <[email protected]> * Update packages/styles/docs/sass.md Co-authored-by: Josh Black <[email protected]> * docs(tokens): add token documentation pt.2 * docs(tokens): fixed linting issues Co-authored-by: Josh Black <[email protected]>
carbon-design-system · Jul 22, 2021 · e48db50 · e48db50
1 parent f46015f
commit e48db50
Showing 1 changed file with 41 additions and 0 deletions.
diff --git a/packages/styles/docs/sass.md b/packages/styles/docs/sass.md
@@ -68,10 +68,25 @@ between version updates.
 
 ## Colors
 
+The colors package will give you access to each swatch from the IBM Design
+Language. You can refer to any color by its swatch and grade.
+
+```scss
+@use '@carbon/styles/scss/colors';
+
+.my-selector {
+  background-color: colors.$blue-50;
+}
+```
+
 | Import                               | Filepath            |
 | :----------------------------------- | :------------------ |
 | `@use '@carbon/styles/scss/colors';` | `scss/_colors.scss` |
 
+To see all the colors available to be imported, checkout our
+[colors](https://github.com/carbon-design-system/carbon/tree/main/packages/colors)
+docs.
+
 ## Config
 
 | Import                               | Filepath            |
@@ -154,10 +169,23 @@ grid, there are a few mixins that can be used.
 
 ## Motion
 
+The motion package provides helper functions, mixins, and duration tokens to add
+motion into your project.
+
+```scss
+@use '@carbon/styles/scss/motion' as *;
+
+.my-selector {
+  transition: transform $duration-fast-02 motion(standard, productive);
+}
+```
+
 | Import                               | Filepath            |
 | :----------------------------------- | :------------------ |
 | `@use '@carbon/styles/scss/motion';` | `scss/_motion.scss` |
 
+For more information, checkout our [motion](#todo) docs.
+
 ## Reset
 
 | Import                              | Filepath           |
@@ -252,10 +280,23 @@ options:
 
 ## Type
 
+The type package entrypoint allows you to specifically bring type tokens into
+your project. The type package includes various type tokens and mixins.
+
+```scss
+@use '@carbon/styles/scss/type';
+
+.my-selector {
+  @include type.style(type.$productive-heading-01);
+}
+```
+
 | Import                             | Filepath          |
 | :--------------------------------- | :---------------- |
 | `@use '@carbon/styles/scss/type';` | `scss/_type.scss` |
 
+For more information, check out our [type](#todo) docs.
+
 ## Components
 
 All of the styles for the components in the Carbon Design System live in the