chore: sync v11 branch with main (carbon-design-system#2344)

* docs(support-02): update support-02 value (carbon-design-system#2288) * add button variants to live modal preivew (carbon-design-system#2299) * docs(Modal): update modal live preview * docs(Modal): add solo button example to code docs * docs(Modal): update action handler Co-authored-by: Josefina Mancilla <[email protected]> Co-authored-by: TJ Egan <[email protected]> Co-authored-by: Andrea N. Cardona <[email protected]> * chore(gatsby): remove v3.0 FAST_REFRESH flag (carbon-design-system#2336) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * comms: All about Carbon additions, edits, deletions (carbon-design-system#2338) * comms: all about carbon additions * update to the team page * copyediting pass * Update src/pages/all-about-carbon/who-uses-carbon.mdx Co-authored-by: emyarod <[email protected]> * Update src/pages/all-about-carbon/who-uses-carbon.mdx Co-authored-by: emyarod <[email protected]> * Update src/pages/all-about-carbon/who-uses-carbon.mdx Co-authored-by: emyarod <[email protected]> * Update src/pages/all-about-carbon/who-uses-carbon.mdx Co-authored-by: emyarod <[email protected]> * Update src/pages/all-about-carbon/who-uses-carbon.mdx Co-authored-by: emyarod <[email protected]> * Delete why-use-carbon copy.mdx Co-authored-by: emyarod <[email protected]> * copy edits to who uses carbon (carbon-design-system#2347) * fix: update Carbon for IBM.com community index links (carbon-design-system#2343) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Removed space between paragraphs (carbon-design-system#2351) Removed space between paragraphs in “Overview” and “Carbon is open source” so the copy reads continuously without paragraph breaks. Not needed and disrupting the one thought. Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * chore: format Co-authored-by: TJ Egan <[email protected]> Co-authored-by: DAK <[email protected]> Co-authored-by: Josefina Mancilla <[email protected]> Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Jan Child <[email protected]> Co-authored-by: Mike Abbink <[email protected]>
emyarod · Jun 8, 2021 · ed194de · ed194de
1 parent 75ffabb
commit ed194de
Show file tree

Hide file tree

Showing 21 changed files with 391 additions and 390 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` |