diff --git a/src/pages/components/accordion/style.mdx b/src/pages/components/accordion/style.mdx
index 41d719b9904..f4b5d6650fc 100755
--- a/src/pages/components/accordion/style.mdx
+++ b/src/pages/components/accordion/style.mdx
@@ -9,22 +9,22 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ## Color
 
-| Class                     | Property   | Color token |
-| ------------------------- | ---------- | ----------- |
+| Class                     | Property   | Color token      |
+| ------------------------- | ---------- | ---------------- |
 | `.bx--accordion__title`   | color      | `$text-primary`  |
 | `.bx--accordion__content` | color      | `$text-primary`  |
 | `.bx--accordion__arrow`   | fill       | `$icon-primary`  |
-| `.bx--accordion__item`    | border-top | `$border-subtle`    |
+| `.bx--accordion__item`    | border-top | `$border-subtle` |
 
 ### Interactive states
 
-| Class                            | Property   | Color token    |
-| -------------------------------- | ---------- | -------------- |
-| `.bx--accordion__heading:hover`  | background | `$background-hover`    |
-| `.bx--accordion__title:focus`    | border     | `$focus`       |
-| `.bx--accordion__title:disabled` | background | `$text-disabled` |
-| `.bx--accordion__arrow:disabled` | fill       | `$icon-disabled` |
-| `.bx--accordion__item--disabled` | border-top | `$border-disabled` |
+| Class                            | Property   | Color token         |
+| -------------------------------- | ---------- | ------------------- |
+| `.bx--accordion__heading:hover`  | background | `$background-hover` |
+| `.bx--accordion__title:focus`    | border     | `$focus`            |
+| `.bx--accordion__title:disabled` | background | `$text-disabled`    |
+| `.bx--accordion__arrow:disabled` | fill       | `$icon-disabled`    |
+| `.bx--accordion__item--disabled` | border-top | `$border-disabled`  |
 
 <Row>
 <Column colLg={12}>
diff --git a/src/pages/components/button/style.mdx b/src/pages/components/button/style.mdx
index 4b920376554..73017bcf65e 100755
--- a/src/pages/components/button/style.mdx
+++ b/src/pages/components/button/style.mdx
@@ -10,18 +10,18 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Primary button
 
-| Class               | Property         | Color token       |
-| ------------------- | ---------------- | ----------------- |
-| `.bx--btn--primary` | text color       | `$text-on-color`  |
-| `.bx--btn__icon`    | svg              | `$icon-on-color`  |
-| `.bx--btn--primary` | background-color | `$button-primary`      |
-| `:hover`            | background-color | `$button-primary-hover`  |
-| `:active`           | background-color | `$button-primary-active` |
-| `:focus`            | border           | `$focus`          |
-| `:focus`            | inset            | `$focus-inset`     |
-| `:disabled`         | background-color | `$button-disabled`|
-| `:disabled`         | text color       | `$text-on-color-disabled`|
-| `:disabled`         | svg              | `$icon-on-color-disabled`|
+| Class               | Property         | Color token               |
+| ------------------- | ---------------- | ------------------------- |
+| `.bx--btn--primary` | text color       | `$text-on-color`          |
+| `.bx--btn__icon`    | svg              | `$icon-on-color`          |
+| `.bx--btn--primary` | background-color | `$button-primary`         |
+| `:hover`            | background-color | `$button-primary-hover`   |
+| `:active`           | background-color | `$button-primary-active`  |
+| `:focus`            | border           | `$focus`                  |
+| `:focus`            | inset            | `$focus-inset`            |
+| `:disabled`         | background-color | `$button-disabled`        |
+| `:disabled`         | text color       | `$text-on-color-disabled` |
+| `:disabled`         | svg              | `$icon-on-color-disabled` |
 
 <Row>
 <Column colLg={8}>
@@ -33,17 +33,17 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Secondary button
 
-| Class                 | Property         | Color token         |
-| --------------------- | ---------------- | ------------------- |
-| `.bx--btn--secondary` | text color       | `$text-on-color`    |
-| `.bx--btn__icon`      | svg              | `$icon-on-color`    |
-| `.bx--btn--secondary` | background-color | `$button-secondary` |
-| `.bx--btn--secondary` | border           | `$button-secondary` |
+| Class                 | Property         | Color token                |
+| --------------------- | ---------------- | -------------------------- |
+| `.bx--btn--secondary` | text color       | `$text-on-color`           |
+| `.bx--btn__icon`      | svg              | `$icon-on-color`           |
+| `.bx--btn--secondary` | background-color | `$button-secondary`        |
+| `.bx--btn--secondary` | border           | `$button-secondary`        |
 | `:hover`              | background-color | `$button-secondary-hover`  |
 | `:active`             | background-color | `$button-secondary-active` |
-| `:focus`              | border           | `$focus`            |
-| `:focus`              | inset            | `$focus-inset`       |
-| `:disabled`           | background-color | `$button-disabled`  |
+| `:focus`              | border           | `$focus`                   |
+| `:focus`              | inset            | `$focus-inset`             |
+| `:disabled`           | background-color | `$button-disabled`         |
 | `:disabled`           | text color       | `$text-on-color-disabled`  |
 | `:disabled`           | svg              | `$icon-on-color-disabled`  |
 
@@ -57,23 +57,23 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Tertiary button
 
-| Class                | Property         | Color token        |
-| -------------------- | ---------------- | ------------------ |
-| `.bx--btn--tertiary` | text color       | `$button-tertiary` |
-| `.bx--btn__icon`     | svg              | `$button-tertiary` |
-| `.bx--btn--tertiary` | background-color | `transparent`      |
-| `.bx--btn--tertiary` | border           | `$button-tertiary` |
-| `:hover`             | text color       | `$text-on-color` |
-| `:hover`             | svg              | `$icon-on-color`   |
+| Class                | Property         | Color token               |
+| -------------------- | ---------------- | ------------------------- |
+| `.bx--btn--tertiary` | text color       | `$button-tertiary`        |
+| `.bx--btn__icon`     | svg              | `$button-tertiary`        |
+| `.bx--btn--tertiary` | background-color | `transparent`             |
+| `.bx--btn--tertiary` | border           | `$button-tertiary`        |
+| `:hover`             | text color       | `$text-on-color`          |
+| `:hover`             | svg              | `$icon-on-color`          |
 | `:hover`             | background-color | `$button-tertiary-hover`  |
 | `:active`            | background-color | `$button-tertiary-active` |
 | `:focus`             | background-color | `$button-tertiary-hover`  |
-| `:focus`             | border           | `$focus`           |
-| `:focus`             | inset            | `$focus-inset`   |
-| `:disabled`          | background       | `transparent`      |
-| `:disabled`          | border           | `$button-disabled`     |
-| `:disabled`          | text color       | `$text-on-color-disabled`  |
-| `:disabled`          | svg              | `$icon-on-color-disabled`   |
+| `:focus`             | border           | `$focus`                  |
+| `:focus`             | inset            | `$focus-inset`            |
+| `:disabled`          | background       | `transparent`             |
+| `:disabled`          | border           | `$button-disabled`        |
+| `:disabled`          | text color       | `$text-on-color-disabled` |
+| `:disabled`          | svg              | `$icon-on-color-disabled` |
 
 <Row>
 <Column colLg={8}>
@@ -92,10 +92,10 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 | `.bx--btn--ghost` | background-color | –                     |
 | `:hover`          | text color       | `$link-primary-hover` |
 | `:hover`          | svg              | `$link-primary-hover` |
-| `:hover`          | background-color | `$background-hover`        |
+| `:hover`          | background-color | `$background-hover`   |
 | `:active`         | background-color | `$background-active`  |
 | `:focus`          | border           | `$focus`              |
-| `:disabled`       | text color       | `$text-disabled`     |
+| `:disabled`       | text color       | `$text-disabled`      |
 | `:disabled`       | svg              | `$icon-disabled`      |
 
 <Row>
@@ -108,18 +108,18 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Primary danger button
 
-| Class                       | Property         | Color token      |
-| --------------------------- | ---------------- | ---------------- |
-| `.bx--btn--danger--primary` | text color       | `$text-on-color` |
-| `.bx--btn__icon`            | svg              | `$icon-on-color` |
-| `.bx--btn--danger--primary` | background-color | `$button-danger-primary`     |
-| `:hover`                    | background-color | `$button-danger-hover`       |
-| `:active`                   | background-color | `$button-danger-active`      |
-| `:focus`                    | border           | `$focus`         |
-| `:focus`                    | inset            | `$focus-inset`    |
-| `:disabled`                 | background-color | `$button-disabled`           |
-| `:disabled`                 | text color       | `$text-on-color-disabled`    |
-| `:disabled`                 | svg              | `$icon-on-color-disabled`    | 
+| Class                       | Property         | Color token               |
+| --------------------------- | ---------------- | ------------------------- |
+| `.bx--btn--danger--primary` | text color       | `$text-on-color`          |
+| `.bx--btn__icon`            | svg              | `$icon-on-color`          |
+| `.bx--btn--danger--primary` | background-color | `$button-danger-primary`  |
+| `:hover`                    | background-color | `$button-danger-hover`    |
+| `:active`                   | background-color | `$button-danger-active`   |
+| `:focus`                    | border           | `$focus`                  |
+| `:focus`                    | inset            | `$focus-inset`            |
+| `:disabled`                 | background-color | `$button-disabled`        |
+| `:disabled`                 | text color       | `$text-on-color-disabled` |
+| `:disabled`                 | svg              | `$icon-on-color-disabled` |
 
 <Row>
 <Column colLg={8}>
@@ -131,22 +131,22 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Tertiary danger button
 
-| Class                        | Property         | Color token      |
-| ---------------------------- | ---------------- | ---------------- |
-| `.bx--btn--danger--tertiary` | text color       | `$button-danger-secondary`  |
-| `.bx--btn__icon`             | svg              | `$button-danger-secondary`  |
-| `.bx--btn--danger--tertiary` | border           | `$button-danger-secondary`  |
-| `:hover`                     | background-color | `$button-danger-hover`      |
-| `:hover`                     | text color       | `$text-on-color` |
-| `:hover`                     | svg              | `$icon-on-color` |
-| `:active`                    | background-color | `$button-danger-active`     |
-| `:active`                    | text color       | `$text-on-color` |
-| `:active`                    | svg              | `$icon-on-color` |
-| `:focus`                     | border           | `$focus`         |
-| `:focus`                     | inset            | `$focus-inset` |
-| `:disabled`                  | background-color | `$button-disabled`          |
-| `:disabled`                  | text color       | `$text-on-color-disabled`   |
-| `:disabled`                  | svg              | `$icon-on-color-disabled`   |
+| Class                        | Property         | Color token                |
+| ---------------------------- | ---------------- | -------------------------- |
+| `.bx--btn--danger--tertiary` | text color       | `$button-danger-secondary` |
+| `.bx--btn__icon`             | svg              | `$button-danger-secondary` |
+| `.bx--btn--danger--tertiary` | border           | `$button-danger-secondary` |
+| `:hover`                     | background-color | `$button-danger-hover`     |
+| `:hover`                     | text color       | `$text-on-color`           |
+| `:hover`                     | svg              | `$icon-on-color`           |
+| `:active`                    | background-color | `$button-danger-active`    |
+| `:active`                    | text color       | `$text-on-color`           |
+| `:active`                    | svg              | `$icon-on-color`           |
+| `:focus`                     | border           | `$focus`                   |
+| `:focus`                     | inset            | `$focus-inset`             |
+| `:disabled`                  | background-color | `$button-disabled`         |
+| `:disabled`                  | text color       | `$text-on-color-disabled`  |
+| `:disabled`                  | svg              | `$icon-on-color-disabled`  |
 
 <Row>
 <Column colLg={8}>
@@ -158,21 +158,21 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Ghost danger button
 
-| Class                     | Property         | Color token      |
-| ------------------------- | ---------------- | ---------------- |
-| `.bx--btn--danger--ghost` | text color       | `$button-danger-secondary`     |
-| `.bx--btn__icon`          | svg              | `$button-danger-secondary`     |
-| `:hover`                  | background-color | `$button-danger-hover`         |
-| `:hover`                  | text color       | `$text-on-color` |
-| `:hover`                  | svg              | `$icon-on-color` |
-| `:active`                 | background-color | `$button-danger-active`        |
-| `:active`                 | text color       | `$text-on-color` |
-| `:active`                 | svg              | `$icon-on-color` |
-| `:focus`                  | border           | `$focus`         |
-| `:focus`                  | inset            | `$focus-inset`    |
-| `:disabled`               | background-color | `$button-disabled`             |
-| `:disabled`               | text color       | `$text-on-color-disabled`      |
-| `:disabled`               | svg              | `$icon-on-color-disabled`      |
+| Class                     | Property         | Color token                |
+| ------------------------- | ---------------- | -------------------------- |
+| `.bx--btn--danger--ghost` | text color       | `$button-danger-secondary` |
+| `.bx--btn__icon`          | svg              | `$button-danger-secondary` |
+| `:hover`                  | background-color | `$button-danger-hover`     |
+| `:hover`                  | text color       | `$text-on-color`           |
+| `:hover`                  | svg              | `$icon-on-color`           |
+| `:active`                 | background-color | `$button-danger-active`    |
+| `:active`                 | text color       | `$text-on-color`           |
+| `:active`                 | svg              | `$icon-on-color`           |
+| `:focus`                  | border           | `$focus`                   |
+| `:focus`                  | inset            | `$focus-inset`             |
+| `:disabled`               | background-color | `$button-disabled`         |
+| `:disabled`               | text color       | `$text-on-color-disabled`  |
+| `:disabled`               | svg              | `$icon-on-color-disabled`  |
 
 <Row>
 <Column colLg={8}>
diff --git a/src/pages/components/checkbox/style.mdx b/src/pages/components/checkbox/style.mdx
index e2113787a41..31f174e6f87 100755
--- a/src/pages/components/checkbox/style.mdx
+++ b/src/pages/components/checkbox/style.mdx
@@ -8,14 +8,14 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ## Color
 
-| Class                     | Property         | Color token   |
-| ------------------------- | ---------------- | ------------- |
-| `.bx--label`              | text color       | `$text-secondary`    |
-| `.bx--checkbox-label`     | text color       | `$text-primary`      |
-| `.bx--checkbox`           | border           | `$icon-primary`      |
-| `.bx--checkbox:unchecked` | background-color | transparent   |
-| `.bx--checkbox:checked`   | background-color | `$icon-primary`      |
-| `.bx--checkbox:checked`   | checkmark        | `$text-inverse`      |
+| Class                     | Property         | Color token       |
+| ------------------------- | ---------------- | ----------------- |
+| `.bx--label`              | text color       | `$text-secondary` |
+| `.bx--checkbox-label`     | text color       | `$text-primary`   |
+| `.bx--checkbox`           | border           | `$icon-primary`   |
+| `.bx--checkbox:unchecked` | background-color | transparent       |
+| `.bx--checkbox:checked`   | background-color | `$icon-primary`   |
+| `.bx--checkbox:checked`   | checkmark        | `$text-inverse`   |
 
 <Row>
 <Column colLg={8}>
@@ -27,9 +27,9 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Interactive states
 
-| State       | Property   | Color token    |
-| ----------- | ---------- | -------------- |
-| `:focus`    | border     | `$focus`       |
+| State       | Property   | Color token      |
+| ----------- | ---------- | ---------------- |
+| `:focus`    | border     | `$focus`         |
 | `:disabled` | text color | `$text-disabled` |
 | `:disabled` | border     | `$icon-disabled` |
 
diff --git a/src/pages/components/code-snippet/style.mdx b/src/pages/components/code-snippet/style.mdx
index 831c6b62c8c..5913782a5d3 100755
--- a/src/pages/components/code-snippet/style.mdx
+++ b/src/pages/components/code-snippet/style.mdx
@@ -10,15 +10,14 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Single line
 
-| Class                         | Property         | Color token        |
-| ----------------------------- | ---------------- | ------------------ |
-| `.bx--snippet`                | background       | `$field`           |
-| `.bx--snippet`                | text color       | `$text-primary`    |
-| `.bx--snippet__icon`          | svg              | `$icon-primary`    |
-| `.bx--copy-btn:hover`         | background-color | `$layer-hover`     |   
-| `.bx--copy-btn:focus`         | border           | `$focus`           |
-| `.bx--copy-btn:active`        | background-color | `$layer-active`    |
-
+| Class                  | Property         | Color token     |
+| ---------------------- | ---------------- | --------------- |
+| `.bx--snippet`         | background       | `$field`        |
+| `.bx--snippet`         | text color       | `$text-primary` |
+| `.bx--snippet__icon`   | svg              | `$icon-primary` |
+| `.bx--copy-btn:hover`  | background-color | `$layer-hover`  |
+| `.bx--copy-btn:focus`  | border           | `$focus`        |
+| `.bx--copy-btn:active` | background-color | `$layer-active` |
 
 <Row>
 <Column colLg={8}>
@@ -32,15 +31,14 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Multi-line
 
-| Class                                                                | Property         | Color token        |
-| -------------------------------------------------------------------- | ---------------- | ------------------ |
-| `.bx--snippet`                                                       | background       | `$field`           |
-| `.bx--snippet`                                                       | text color       | `$text-primary`    |
-| `.bx--snippet__icon`                                                 | svg              | `$icon-primary`    |
-| `.bx--copy-btn:hover` <br/> `.bx--snippet-btn:hover`                 | background-color | `$layer-hover`     |
-| `.bx--copy-btn:focus` <br/> `.bx--snippet-btn:focus`                 | border           | `$focus`           |
-| `.bx--copy-btn:active` <br/> `.bx--snippet-btn:active`               | background-color | `$layer-active`    |
-
+| Class                                                  | Property         | Color token     |
+| ------------------------------------------------------ | ---------------- | --------------- |
+| `.bx--snippet`                                         | background       | `$field`        |
+| `.bx--snippet`                                         | text color       | `$text-primary` |
+| `.bx--snippet__icon`                                   | svg              | `$icon-primary` |
+| `.bx--copy-btn:hover` <br/> `.bx--snippet-btn:hover`   | background-color | `$layer-hover`  |
+| `.bx--copy-btn:focus` <br/> `.bx--snippet-btn:focus`   | border           | `$focus`        |
+| `.bx--copy-btn:active` <br/> `.bx--snippet-btn:active` | background-color | `$layer-active` |
 
 <Row>
 <Column colLg={8}>
@@ -66,14 +64,13 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Inline snippet
 
-| Class                                            | Property         | Color token        |
-| ------------------------------------------------ | ---------------- | ------------------ |
-| `.bx--snippet--inline`                           | background-color | `$field`           |
-| `.bx--snippet--inline`                           | color            | `$text-primary`    |
-| `.bx--snippet--inline:hover`                     | background-color | `$field-hover`     |
-| `.bx--snippet--inline:focus`                     | focus            | `$focus`           |
-| `.bx--snippet--inline:active`                    | background-color | `$layer-active`    |
-
+| Class                         | Property         | Color token     |
+| ----------------------------- | ---------------- | --------------- |
+| `.bx--snippet--inline`        | background-color | `$field`        |
+| `.bx--snippet--inline`        | color            | `$text-primary` |
+| `.bx--snippet--inline:hover`  | background-color | `$field-hover`  |
+| `.bx--snippet--inline:focus`  | focus            | `$focus`        |
+| `.bx--snippet--inline:active` | background-color | `$layer-active` |
 
 <Row>
 <Column colLg={8}>
diff --git a/src/pages/components/data-table/style.mdx b/src/pages/components/data-table/style.mdx
index a25a0bdc47f..33640fc7319 100755
--- a/src/pages/components/data-table/style.mdx
+++ b/src/pages/components/data-table/style.mdx
@@ -116,7 +116,9 @@ columns. Tables require three or more columns.
 
 ### Rows
 
-Row sizes are customizable. The column header row should always match the row size of the table. Tall row heights are only recommended if your data is expected to have 2 lines of content in a single row.
+Row sizes are customizable. The column header row should always match the row
+size of the table. Tall row heights are only recommended if your data is
+expected to have 2 lines of content in a single row.
 
 | Element | Property | Size    | px / rem |
 | ------- | -------- | ------- | -------- |
@@ -162,12 +164,12 @@ batch actions, overall table menu, and/or table filter.
 The default 48px toolbar is paired with the tall and default row sizes. The
 small toolbar is paired with the short and compact row sizes.
 
-| Element                      | Property                  | px / rem | Spacing token |
-| ---------------------------- | ------------------------- | -------- | ------------- |
-| Toolbar: large               | height, width             | 48 / 3   | –             |
-|                              | margin-top, margin-bottom | 16 / 1   | `$spacing-05` |        
-| Toolbar: small               | height, width             | 32 / 2   | –             |
-|                              | margin-top, margin-bottom | 8 / 0.5  | `$spacing-03` |
+| Element        | Property                  | px / rem | Spacing token |
+| -------------- | ------------------------- | -------- | ------------- |
+| Toolbar: large | height, width             | 48 / 3   | –             |
+|                | margin-top, margin-bottom | 16 / 1   | `$spacing-05` |
+| Toolbar: small | height, width             | 32 / 2   | –             |
+|                | margin-top, margin-bottom | 8 / 0.5  | `$spacing-03` |
 
 <div className="image--fixed">
 
diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx
index 32cf2d00127..301771e31d6 100755
--- a/src/pages/components/modal/usage.mdx
+++ b/src/pages/components/modal/usage.mdx
@@ -103,7 +103,8 @@ destructive or irreversible then use a transactional danger modal.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',
-    }}>{`
+    }}>
+    {`
     <ModalWrapper
       buttonTriggerText="Launch modal"
       modalHeading="Modal heading"
@@ -111,7 +112,8 @@ destructive or irreversible then use a transactional danger modal.
     >
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor. </p>
     </ModalWrapper>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
   <ComponentVariant
     id="scrolling-content"
     links={{
diff --git a/src/pages/components/notification/style.mdx b/src/pages/components/notification/style.mdx
index bb870be879f..afa15e8b4ca 100755
--- a/src/pages/components/notification/style.mdx
+++ b/src/pages/components/notification/style.mdx
@@ -14,25 +14,24 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 <Caption>Low contrast notifications in the White theme</Caption>
 
-| Element          | Property                | Color token |
-| ---------------- | ----------------------- | ----------- |
-| Title            | text color              | `$text-primary`  |
-| Subtitle         | text color              | `$text-primary`  |
-| Close button     | fill                    | `$icon-primary`  |
-| Action button    | text color              | `$link-primary`  |
-| Error            | background-color        | `$notification-error-background-color` |
-|                  | border-left             | `$support-error`                          |
-|                  | svg                     | `$support-error`                          |
-| Success          | background-color.       | `$notification-success-background-color` |
-|                  | border-left             | `$support-success`                            |
-|                  | svg                     | `$support-success`                            |
-| Warning          | background-color        | `$notification-warning-background-color` |
-|                  | border-left             | `$support-warning`                            |
-|                  | svg                     | `$support-warning`                            |
-| Information      | background-color        | `$notification-info-background-color` |
-|                  | border-left             | `$support-info`                         |
-|                  | svg                     | `$support-info`                         |
-
+| Element       | Property          | Color token                              |
+| ------------- | ----------------- | ---------------------------------------- |
+| Title         | text color        | `$text-primary`                          |
+| Subtitle      | text color        | `$text-primary`                          |
+| Close button  | fill              | `$icon-primary`                          |
+| Action button | text color        | `$link-primary`                          |
+| Error         | background-color  | `$notification-error-background-color`   |
+|               | border-left       | `$support-error`                         |
+|               | svg               | `$support-error`                         |
+| Success       | background-color. | `$notification-success-background-color` |
+|               | border-left       | `$support-success`                       |
+|               | svg               | `$support-success`                       |
+| Warning       | background-color  | `$notification-warning-background-color` |
+|               | border-left       | `$support-warning`                       |
+|               | svg               | `$support-warning`                       |
+| Information   | background-color  | `$notification-info-background-color`    |
+|               | border-left       | `$support-info`                          |
+|               | svg               | `$support-info`                          |
 
 ### High contrast
 
@@ -42,47 +41,47 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 <br />
 
-| Element               | Property   | Color token |
-| --------------------- | ---------- | ----------- |
-| Title                 | text color | `$text-inverse`  |
-| Subtitle              | text color | `$text-inverse`  |
-| Close button          | fill       | `$icon-inverse`  |
-| Action button         | text color | `$link-inverse`  |
-| Background            | background-color | `$background-inverse`  |
-| Error                 | border-left | `$support-error-inverse` |
-|                       | svg         | `$support-error-inverse` |
-| Success               | border-left | `$support-success-inverse` |
-|                       | svg         | `$support-success-inverse` |
-| Warning               | border-left | `$support-warning-inverse` |
-|                       | svg         | `$support-warning-inverse` |
-| Information           | border-left | `$support-info-inverse` |
-|                       | svg         | `$support-info-inverse` |
+| Element       | Property         | Color token                |
+| ------------- | ---------------- | -------------------------- |
+| Title         | text color       | `$text-inverse`            |
+| Subtitle      | text color       | `$text-inverse`            |
+| Close button  | fill             | `$icon-inverse`            |
+| Action button | text color       | `$link-inverse`            |
+| Background    | background-color | `$background-inverse`      |
+| Error         | border-left      | `$support-error-inverse`   |
+|               | svg              | `$support-error-inverse`   |
+| Success       | border-left      | `$support-success-inverse` |
+|               | svg              | `$support-success-inverse` |
+| Warning       | border-left      | `$support-warning-inverse` |
+|               | svg              | `$support-warning-inverse` |
+| Information   | border-left      | `$support-info-inverse`    |
+|               | svg              | `$support-info-inverse`    |
 
 ## Typography
 
 Notification text should be set in sentence case with only the first word
 capitalized. Notification titles should be concise and to the point.
 
-| Element                                                                        | Font-size (px/rem) | Font-weight    | Type token       |
-| ------------------------------------------------------------------------------ | ------------------ | -------------- | ---------------- |
-| Title                                                                          | 14 / 0.875         | SemiBold / 600 | `$heading-01`    |
-| Subtitle                                                                       | 14 / 0.875         | Regular / 400  | `$body-short-01` |    
+| Element  | Font-size (px/rem) | Font-weight    | Type token       |
+| -------- | ------------------ | -------------- | ---------------- |
+| Title    | 14 / 0.875         | SemiBold / 600 | `$heading-01`    |
+| Subtitle | 14 / 0.875         | Regular / 400  | `$body-short-01` |
 
 ## Structure
 
 ### Toast notification
 
-| Element                                  | Property                 | px / rem | Spacing token |
-| ---------------------------------------- | ------------------------ | -------- | ------------- |
-| Notification                             | width                    | 288 / 18 | –             |
-|                                          | border-left              | 3px      | –             |
-|                                          | padding-right            | 16 / 1   | `$spacing-05` |
-| Title                                    | margin-top               | 16 / 1   | `$spacing-05` |
-| Subtitle                                 | margin-bottom            | 24 / 1.5 | `$spacing-06` |
-| Details                                  | padding-right            | 16 / 1   | `$spacing-05` |
-| Caption                                  | margin-bottom            | 16 / 1   | `$spacing-05` |
-| Close button                             | height, width            | 48 / 3   | –             |
-| Close icon                               | margin-top, margin-right | 16 / 1   | `$spacing-05` |
+| Element      | Property                 | px / rem | Spacing token |
+| ------------ | ------------------------ | -------- | ------------- |
+| Notification | width                    | 288 / 18 | –             |
+|              | border-left              | 3px      | –             |
+|              | padding-right            | 16 / 1   | `$spacing-05` |
+| Title        | margin-top               | 16 / 1   | `$spacing-05` |
+| Subtitle     | margin-bottom            | 24 / 1.5 | `$spacing-06` |
+| Details      | padding-right            | 16 / 1   | `$spacing-05` |
+| Caption      | margin-bottom            | 16 / 1   | `$spacing-05` |
+| Close button | height, width            | 48 / 3   | –             |
+| Close icon   | margin-top, margin-right | 16 / 1   | `$spacing-05` |
 
 <div className="image--fixed">
 
@@ -98,15 +97,15 @@ capitalized. Notification titles should be concise and to the point.
 
 The width of an _inline notification_ will vary based on content or layout.
 
-| Element                                  | Property                    | px / rem  | Spacing token |
-| ---------------------------------------- | --------------------------- | --------- | ------------- |
-| Inline notification                      | min-height                  | 48 / 3    | `$spacing-09` |
-|                                          | border-left                 | 3px       | –             |
-| Details                                  | margin-left, margin-right   | 16 / 1    | `$spacing-05` |
-| Text-wrapper                             | padding-top, padding-bottom | 12 / 0.75 | `$spacing-04` |
-| Icon                                     | margin-right                | 16 / 1    | `$spacing-05` |
-| Close button                             | height, width               | 48 / 3    | –             |
-| Close icon                               | icon size                   | 16 x 16   | –             |
+| Element             | Property                    | px / rem  | Spacing token |
+| ------------------- | --------------------------- | --------- | ------------- |
+| Inline notification | min-height                  | 48 / 3    | `$spacing-09` |
+|                     | border-left                 | 3px       | –             |
+| Details             | margin-left, margin-right   | 16 / 1    | `$spacing-05` |
+| Text-wrapper        | padding-top, padding-bottom | 12 / 0.75 | `$spacing-04` |
+| Icon                | margin-right                | 16 / 1    | `$spacing-05` |
+| Close button        | height, width               | 48 / 3    | –             |
+| Close icon          | icon size                   | 16 x 16   | –             |
 
 <div className="image--fixed">
 
diff --git a/src/pages/components/number-input/style.mdx b/src/pages/components/number-input/style.mdx
index 60dca283b01..cc6acd30a57 100755
--- a/src/pages/components/number-input/style.mdx
+++ b/src/pages/components/number-input/style.mdx
@@ -8,8 +8,8 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ## Color
 
-Inputs come in two different colors. The default input color is `$field` and
-is used on `$background` and `$overlay` page backgrounds. 
+Inputs come in two different colors. The default input color is `$field` and is
+used on `$background` and `$overlay` page backgrounds.
 
 | Class                              | Property         | Color token       |
 | ---------------------------------- | ---------------- | ----------------- |
diff --git a/src/pages/components/slider/style.mdx b/src/pages/components/slider/style.mdx
index a0511b47036..2b1bb0fe49a 100755
--- a/src/pages/components/slider/style.mdx
+++ b/src/pages/components/slider/style.mdx
@@ -8,24 +8,24 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ## Color
 
-| Class                       | Property         | Color token |
-| --------------------------- | ---------------- | ----------- |
-| `.bx--slider__thumb`        | fill             | `$icon-primary`    |
-| `.bx--slider__filled-track` | background-color | `$border-inverse`    |
-| `.bx--slider__track`        | background-color | `$border-subtle`    |
-| `.bx--label`                | text color       | `$text-secondary`  |
-| `.bx--slider__range-label`  | text color       | `$text-primary`  |
+| Class                       | Property         | Color token       |
+| --------------------------- | ---------------- | ----------------- |
+| `.bx--slider__thumb`        | fill             | `$icon-primary`   |
+| `.bx--slider__filled-track` | background-color | `$border-inverse` |
+| `.bx--slider__track`        | background-color | `$border-subtle`  |
+| `.bx--label`                | text color       | `$text-secondary` |
+| `.bx--slider__range-label`  | text color       | `$text-primary`   |
 
 ### Interactive states
 
-| Class                              | Property         | Color token       |
-| ---------------------------------- | ---------------- | ----------------- |
-| `.bx--slider__thumb:focus`         | border           | `$focus`          |
-| `.bx--slider__thumb:active`        | fill             | `$interactive` |
-| `.bx--slider__filled-track:active` | background-color | `$interactive` |
-| `.bx--label:disabled`              | text color       | `$text-disabled`    |
-| `.bx--slider__thumb:disabled`      | fill             | `$icon-disabled`    |
-| `.bx--slider__track:disabled`      | background-color | `$border-disabled`    |
+| Class                              | Property         | Color token        |
+| ---------------------------------- | ---------------- | ------------------ |
+| `.bx--slider__thumb:focus`         | border           | `$focus`           |
+| `.bx--slider__thumb:active`        | fill             | `$interactive`     |
+| `.bx--slider__filled-track:active` | background-color | `$interactive`     |
+| `.bx--label:disabled`              | text color       | `$text-disabled`   |
+| `.bx--slider__thumb:disabled`      | fill             | `$icon-disabled`   |
+| `.bx--slider__track:disabled`      | background-color | `$border-disabled` |
 
 ## Typography
 
diff --git a/src/pages/developing/angular-tutorial/step-3.mdx b/src/pages/developing/angular-tutorial/step-3.mdx
index f12c1964862..c6f9095296b 100644
--- a/src/pages/developing/angular-tutorial/step-3.mdx
+++ b/src/pages/developing/angular-tutorial/step-3.mdx
@@ -401,7 +401,9 @@ the data table rows.
 
 ```javascript path=src/app/repositories/repo-table/repo-table.component.ts
 // If we're here, we've got our data!
-this.model.data = this.prepareData(response.data.organization.repositories.nodes);
+this.model.data = this.prepareData(
+  response.data.organization.repositories.nodes
+);
 ```
 
 Then, in `ngOnInit()` delete the static rows since we no longer need them.
diff --git a/src/pages/developing/angular-tutorial/step-5.mdx b/src/pages/developing/angular-tutorial/step-5.mdx
index 994629e83ec..6a027b6c1c7 100644
--- a/src/pages/developing/angular-tutorial/step-5.mdx
+++ b/src/pages/developing/angular-tutorial/step-5.mdx
@@ -152,10 +152,10 @@ first.
 npm run build
 ```
 
-Looking at `package.json`, you'll find `ng build`. This
-builds the app for production to the `dist` folder. It bundles Angular in
-production mode and optimizes the build for the best performance. It even goes
-so far to minify files and include hashes in filenames for caching.
+Looking at `package.json`, you'll find `ng build`. This builds the app for
+production to the `dist` folder. It bundles Angular in production mode and
+optimizes the build for the best performance. It even goes so far to minify
+files and include hashes in filenames for caching.
 
 As a lot of this may seem like magic since the build configuration came from
 Create React App, go ahead and check out their