chore: format

carbon-design-system · May 24, 2021 · 98dd313 · 98dd313
1 parent 34dc107
commit 98dd313
Show file tree

Hide file tree

Showing 8 changed files with 140 additions and 137 deletions.
diff --git 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/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
@@ -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">