docs[style]: remove classname part 2 (#2664)

Co-authored-by: Alison Joseph <[email protected]>
carbon-design-system · Jan 20, 2022 · dcbc4f6 · dcbc4f6
1 parent 2214ad7
commit dcbc4f6
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 103 deletions.
diff --git a/src/pages/components/accordion/style.mdx b/src/pages/components/accordion/style.mdx
@@ -7,15 +7,6 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
-<AnchorLinks>
-
-<AnchorLink>Color</AnchorLink>
-<AnchorLink>Typography</AnchorLink>
-<AnchorLink>Structure</AnchorLink>
-<AnchorLink>Sizes</AnchorLink>
-
-</AnchorLinks>
-
 ## Color
 
 | Element | Property   | Color token      |

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`   |
+| Element            | Property         | Color token       |
+| ------------------ | ---------------- | ----------------- |
+| Group label        | text color       | `$text-secondary` |
+| Checkbox label     | text color       | `$text-primary`   |
+| Checkbox:unchecked | border           | `$icon-primary`   |
+|                    | background-color | transparent       |
+| Checkbox:checked   | background-color | `$icon-primary`   |
+|                    | checkmark        | `$text-inverse`   |
 
 <Row>
 <Column colLg={8}>
@@ -27,11 +27,12 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Interactive states
 
-| State       | Property   | Color token      |
-| ----------- | ---------- | ---------------- |
-| `:focus`    | border     | `$focus`         |
-| `:disabled` | text color | `$text-disabled` |
-| `:disabled` | border     | `$icon-disabled` |
+| Element           | Property   | Color token      |
+| ----------------- | ---------- | ---------------- |
+| Checkbox:focus    | border     | `$focus`         |
+| Label:disabled    | text color | `$text-disabled` |
+| Checkbox:disabled | border     | `$icon-disabled` |
+|                   | background | `$icon-disabled` |
 
 <Row>
 <Column colLg={8}>
@@ -53,14 +54,15 @@ and any proper nouns capitalized. Checkbox labels should not exceed three words.
 
 ## Structure
 
-| Class                                 | Property       | px / rem | Spacing token |
-| ------------------------------------- | -------------- | -------- | ------------- |
-| `.bx--checkbox`                       | height & width | 16px     | –             |
-| `.bx--checkbox`                       | border         | 1px      | –             |
-| `.bx--checkbox:focus`                 | border         | 2px      | –             |
-| `.bx--label`                          | margin-bottom  | 8 / 0.5  | `$spacing-03` |
-| `.bx--checkbox-label`                 | padding-left   | 8 / 0.5  | `$spacing-03` |
-| `.bx--form-item.bx--checkbox-wrapper` | margin-bottom  | 8 / 0.5  | `$spacing-03` |
+| Element        | Property       | px / rem | Spacing token |
+| -------------- | -------------- | -------- | ------------- |
+| Checkbox       | height & width | 16px     | –             |
+|                | border         | 1px      | –             |
+| Checkbox:focus | border         | 2px      | –             |
+|                | border inset   | 1px      | –             |
+| Group label    | margin-bottom  | 8 / 0.5  | `$spacing-03` |
+| Checkbox label | padding-left   | 8 / 0.5  | `$spacing-03` |
+| Checkbox item  | margin-bottom  | 4 / 0.25 | `$spacing-02` |
 
 <div className="image--fixed">
 

diff --git a/src/pages/components/content-switcher/style.mdx b/src/pages/components/content-switcher/style.mdx
@@ -13,26 +13,26 @@ Content switchers have two main states: `selected` and `unselected`. By default,
 content switcher buttons are unselected with the selected state using a high
 contrast color.
 
-| Class                       | Property         | Color token               |
-| --------------------------- | ---------------- | ------------------------- |
-| `.bx--content-switcher-btn` | background-color | `$background`             |
-| `.bx--content-switcher-btn` | text color       | `$text-secondary`         |
-| `--selected`                | background-color | `$layer-selected-inverse` |
-| `--selected`                | text color       | `$text-inverse`           |
-| `:after`                    | divider          | `$border-subtle`          |
+| Element           | Property         | Color token               |
+| ----------------- | ---------------- | ------------------------- |
+| Unselected button | background-color | `$background`             |
+|                   | text color       | `$text-secondary`         |
+| Selected button   | background-color | `$layer-selected-inverse` |
+|                   | text color       | `$text-inverse`           |
+| Divider           | border           | `$border-subtle`          |
 
 ### Interactive states
 
 Hover states only apply to `unselected` buttons.
 
-| State       | Property         | Color token         |
-| ----------- | ---------------- | ------------------- |
-| `:hover`    | background-color | `$background-hover` |
-| `:hover`    | text color       | `$text-primary`     |
-| `:focus`    | border           | `$focus`            |
-| `:disabled` | background-color | `transparent`       |
-| `:disabled` | text color       | `$text-disabled`    |
-| `:disabled` | border           | `$border-disabled`  |
+| State    | Property         | Color token         |
+| -------- | ---------------- | ------------------- |
+| Hover    | background-color | `$background-hover` |
+|          | text color       | `$text-primary`     |
+| Focus    | border           | `$focus`            |
+| Disabled | background-color | `transparent`       |
+|          | text color       | `$text-disabled`    |
+|          | border           | `$border-disabled`  |
 
 <Row>
 <Column colLg={8}>
@@ -59,11 +59,11 @@ Each container that makes up the content switcher is equal in size. The width of
 a container is determined by the length of the longest container option text
 plus the 16 px / 1rem on both sides of the text.
 
-| Class                       | Property                    | px / rem | Spacing token |
-| --------------------------- | --------------------------- | -------- | ------------- |
-| `.bx--content-switcher`     | corner radius               | 4px      | –             |
-| `:after`                    | divider                     | 1px      | –             |
-| `.bx--content-switcher-btn` | padding-left, padding-right | 16 / 1   | `$spacing-05` |
+| Element      | Property                    | px / rem | Spacing token |
+| ------------ | --------------------------- | -------- | ------------- |
+| Container    | corner radius               | 4px      | –             |
+| Divider      | border                      | 1px      | –             |
+| Button label | padding-left, padding-right | 16 / 1   | `$spacing-05` |
 
 <div className="image--fixed">
 

diff --git a/src/pages/components/loading/style.mdx b/src/pages/components/loading/style.mdx
@@ -8,18 +8,19 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ## Color
 
-| Class                  | Property         | Color token    |
-| ---------------------- | ---------------- | -------------- |
-| `.bx--loading__svg`    | stroke           | `$interactive` |
-| `.bx--loading--small`  | stroke           | `$interactive` |
-| `.bx--loading-overlay` | background-color | `$overlay`     |
+| Element       | Property         | Color token    |
+| ------------- | ---------------- | -------------- |
+| Large spinner | stroke           | `$interactive` |
+| Small spinner | stroke           | `$interactive` |
+|               | background       | `$layer-01`    |
+| Page overlay  | background-color | `$overlay`     |
 
 ## Structure
 
-| Class                 | Property      | px / rem | Spacing token |
-| --------------------- | ------------- | -------- | ------------- |
-| `.bx--loading`        | height, width | 88 / 5.5 | –             |
-| `.bx--loading--small` | height, width | 16 / 1   | –             |
+| Element       | Property      | px / rem | Spacing token |
+| ------------- | ------------- | -------- | ------------- |
+| Large spinner | height, width | 88 / 5.5 | –             |
+| Small spinner | height, width | 16 / 1   | –             |
 
 <div className="image--fixed">
 

diff --git a/src/pages/components/modal/style.mdx b/src/pages/components/modal/style.mdx
@@ -11,15 +11,15 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 Refer to the [button](/components/button/style) for primary and secondary button
 styling in the transactional modal.
 
-| Class                        | Property         | Color token       |
-| ---------------------------- | ---------------- | ----------------- |
-| `.bx--modal-container`       | background-color | `$layer` \*       |
-| `.bx--modal-header__label`   | text color       | `$text-secondary` |
-| `.bx--modal-header__heading` | text color       | `$text-primary`   |
-| `.bx--modal-content`         | text color       | `$text-primary`   |
-| `.bx--modal-close__icon`     | fill             | `$icon-primary`   |
-| `.bx--modal-close:hover`     | background-color | `$layer-hover` \* |
-| Overlay                      | color            | `$overlay`        |
+| Elements         | Property         | Color token       |
+| ---------------- | ---------------- | ----------------- |
+| Container        | background-color | `$layer` \*       |
+| Header label     | text color       | `$text-secondary` |
+| Header           | text color       | `$text-primary`   |
+| Content          | text color       | `$text-primary`   |
+| Close icon       | fill             | `$icon-primary`   |
+| Close icon:hover | background-color | `$layer-hover` \* |
+| Page overlay     | color            | `$overlay`        |
 
 <Caption>
   * Denotes a contextual color token that will change values based on the layer
@@ -39,16 +39,16 @@ headings concise and to the point. Modal labels are optional.
 
 ## Structure
 
-| Class                      | Property                  | px / rem | Spacing token |
-| -------------------------- | ------------------------- | -------- | ------------- |
-| `.bx--modal-close`         | height, width             | 48 x 48  | –             |
-| `.bx--modal-close__icon`   | height, width             | 16 x 16  | –             |
-| `.bx--modal-header__label` | margin-bottom             | 4 / 0.25 | `$spacing-02` |
-| `.bx--modal-header`        | padding top, padding left | 16 / 1   | `$spacing-05` |
-| `.bx--modal-header`        | margin-bottom             | 16 / 1   | `$spacing-05` |
-| `.bx--modal-content`       | padding-left              | 16 / 1   | `$spacing-05` |
-| `.bx--modal-content`       | padding-right             | 20%      | –             |
-| `.bx--modal-content`       | margin-bottom             | 48 / 3   | `$spacing-09` |
+| Element      | Property                  | px / rem | Spacing token |
+| ------------ | ------------------------- | -------- | ------------- |
+| Close button | height, width             | 48 x 48  | –             |
+| Close icon   | height, width             | 16 x 16  | –             |
+| Header label | margin-bottom             | 4 / 0.25 | `$spacing-02` |
+| Header       | padding top, padding left | 16 / 1   | `$spacing-05` |
+|              | margin-bottom             | 16 / 1   | `$spacing-05` |
+| Content      | padding-left              | 16 / 1   | `$spacing-05` |
+|              | padding-right             | 20%      | –             |
+|              | margin-bottom             | 48 / 3   | `$spacing-09` |
 
 <div className="image--fixed">
 

diff --git a/src/pages/components/number-input/style.mdx b/src/pages/components/number-input/style.mdx
@@ -8,13 +8,13 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ## Color
 
-| Class                              | Property         | Color token         |
-| ---------------------------------- | ---------------- | ------------------- |
-| `.bx--label`                       | text color       | `$text-secondary`   |
-| `.bx--number input[type='number']` | text color       | `$text-primary`     |
-| `.bx--number`                      | background-color | `$field` \*         |
-| `.bx--number`                      | border-bottom    | `$border-strong` \* |
-| `.bx--number__controls`            | svg color        | `$icon-primary`     |
+| Element  | Property         | Color token         |
+| -------- | ---------------- | ------------------- |
+| Label    | text color       | `$text-secondary`   |
+| Number   | text color       | `$text-primary`     |
+| Field    | background-color | `$field` \*         |
+|          | border-bottom    | `$border-strong` \* |
+| Controls | svg color        | `$icon-primary`     |
 
 <Caption>
   * Denotes a contextual color token that will change values based on the layer
@@ -31,17 +31,17 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Interactive states
 
-| Class                                       | Property         | Color token      |
-| ------------------------------------------- | ---------------- | ---------------- |
-| `.bx--number:focus`                         | border           | `$focus`         |
-| `.bx--number__controls:focus`               | border           | `$focus`         |
-| `[data-invalid]`                            | border           | `$support-error` |
-| `[data-invalid]:focus`                      | color            | `$support-error` |
-| `.bx--form-requirement`                     | text color       | `$support-error` |
-| `.bx--label:disabled`                       | text color       | `$text-disabled` |
-| `.bx--number:disabled`                      | background-color | `$field` \*      |
-| `.bx--number:disabled`                      | border-bottom    | transparent      |
-| `.bx--number input[type='number']:disabled` | text color       | `$text-disabled` |
+| Element        | Property         | Color token      |
+| -------------- | ---------------- | ---------------- |
+| Field:focus    | border           | `$focus`         |
+| Controls:focus | border           | `$focus`         |
+| Field:invalid  | border           | `$support-error` |
+| Error icon     | color            | `$support-error` |
+| Error message  | text color       | `$support-error` |
+| Label:disabled | text color       | `$text-disabled` |
+| Field:disabled | background-color | `$field` \*      |
+|                | border-bottom    | transparent      |
+| Number         | text color       | `$text-disabled` |
 
 ## Typography
 
@@ -59,13 +59,13 @@ phrase and any proper nouns capitalized.
 The add and subtract icons can be found in the
 [icons](/guidelines/icons/library) library.
 
-| Class                              | Property                    | px / rem | Spacing token |
-| ---------------------------------- | --------------------------- | -------- | ------------- |
-| `.bx--label`                       | margin-bottom               | 8 / 0.5  | `$spacing-03` |
-| `.bx--number input`                | height                      | 40 / 2.5 | –             |
-| `.bx--number input[type='number']` | padding-left                | 16 / 1   | `$spacing-05` |
-| `.bx--number__controls`            | padding-left, padding-right | 16 / 1   | `$spacing-05` |
-| `.bx--number`                      | border-bottom               | 1px      | –             |
+| Element         | Property                    | px / rem | Spacing token |
+| --------------- | --------------------------- | -------- | ------------- |
+| Label           | margin-bottom               | 8 / 0.5  | `$spacing-03` |
+| Field (default) | height                      | 40 / 2.5 | –             |
+|                 | border-bottom               | 1px      | –             |
+| Number          | padding-left                | 16 / 1   | `$spacing-05` |
+| Controls        | padding-left, padding-right | 16 / 1   | `$spacing-05` |
 
 <div className="image--fixed">