chore: format

carbon-design-system · May 25, 2021 · df47dae · df47dae
1 parent 04cf9ee
commit df47dae
Show file tree

Hide file tree

Showing 17 changed files with 266 additions and 265 deletions.
diff --git a/src/pages/all-about-carbon/what-is-carbon.mdx b/src/pages/all-about-carbon/what-is-carbon.mdx
@@ -28,17 +28,17 @@ community of contributors.
 
 A design system is a collection of pre-built, reusable assets—components,
 patterns, guidance, and code—that allows its users to build consistent digital
-experiences faster. By using the pre-built and universal assets of Carbon, the time teams spend
-designing and building is minimized. Instead of building and re-building basic
-elements, they can spend that time customizing their products to address
-specific client use cases.
+experiences faster. By using the pre-built and universal assets of Carbon, the
+time teams spend designing and building is minimized. Instead of building and
+re-building basic elements, they can spend that time customizing their products
+to address specific client use cases.
 
 ### Carbon is open source
 
 Carbon is funded and built by IBM, which means we build for the company’s
 business needs, but we’ve made it open source for anyone to use and contribute
-back to. While being primarily open source, Carbon also serves various parts of the IBM
-business that follow an inner source model.
+back to. While being primarily open source, Carbon also serves various parts of
+the IBM business that follow an inner source model.
 
 ## How Carbon works
 

diff --git 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
@@ -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
@@ -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` |