Tab style v11

src/pages/components/tabs/style.mdx

@@ -5,22 +5,163 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+<AnchorLinks>
+
+<AnchorLink>Color</AnchorLink>
+<AnchorLink>Typography</AnchorLink>
+<AnchorLink>Structure</AnchorLink>
+
+</AnchorLinks>
+
 ## Color
 
-| Class                           | Property      | Color token       |
-| ------------------------------- | ------------- | ----------------- |
-| `.bx--tabs__nav-link`           | text color    | `$text-02`        |
-| `.bx--tabs__nav-item`           | border-bottom | `$ui-03`          |
-| `.bx--tabs__nav-link:selected`  | text color    | `$text-01`        |
-| `.bx--tabs__nav-item--selected` | border-bottom | `$interactive-04` |
+### Line tabs
+
+| State    | Element               | Property         | Color token                                    |
+| -------- | --------------------- | ---------------- | ---------------------------------------------- |
+| Enabled  | Background            | background-color | transparent                                    |
+|          | Label                 | text-color       | `$text-secondary`                              |
+|          | Icon                  | svg              | `$icon-secondary`                              |
+|          | Background            | border-bottom    | `$border-subtle`                               |
+|          | Scrollable icon       | svg              | `$icon-primary`                                |
+|          | Scrollable fade       | background-color | 8px, linear-gradient white to 100% transparent |
+|          | Scrollable background | background-color | `$background`                                  |
+| Selected | Label                 | text-color       | `$text-primary`                                |
+|          | Icon                  | svg              | `$icon-primary`                                |
+|          | Background            | border-bottom    | `$interactive`                                 |
+
+<Row>
+<Column colLg={8}>
+
+![Example of selected and enabled line tabs..](images/tab-style-1.png)
+
+</Column>
+</Row>
+
+<Caption>Example of selected and enabled line tabs.</Caption>
+
+<br />
+
+#### Interactive states
+
+<br />
+
+| State          | Element               | Property         | Color token         |
+| -------------- | --------------------- | ---------------- | ------------------- |
+| Hover          | Background            | border-bottom    | `$interactive`      |
+|                | Label                 | text-color       | `$text-primary`     |
+|                | Icon                  | svg              | `$icon-primary`     |
+|                | Scrollable background | background-color | `$background-hover` |
+| Active         | Scrollable background | background-color | `$layer-accent`     |
+| Focus          | Scrollable background | border           | `$focus`            |
+| Focus-enabled  | Label                 | text-color       | `$text-secondary`   |
+|                | Background            | border           | `$interactive`      |
+|                | Icon                  | svg              | `$icon-secondary`   |
+| Focus-selected | Label                 | text-color       | `$text-primary`     |
+|                | Background            | border           | `$interactive`      |
+|                | Icon                  | svg              | `$icon-primary`     |
+| Disabled       | Label                 | text-color       | `$text-disabled`    |
+|                | Icon                  | svg              | `$icon-disabled`    |
+|                | Background            | background-color | `$icon-disabled`    |
+
+<Row>
+<Column colLg={8}>
+
+![Examples of hover, focus-enabled, focus-selected, and disabled states.](images/tab-style-3.png)
+
+</Column>
+</Row>
+
+<Caption>
+  Examples of hover, focus-enabled, focus-selected, and disabled states.
+</Caption>
+
+<Row>
+<Column colLg={8}>
+
+![Examples of enabled, hover, active, and focus states for scrollable tabs.](images/tab-style-4.png)
+
+</Column>
+</Row>
+
+<Caption>
+  Examples of enabled, hover, active, and focus states for scrollable tabs.
+</Caption>
+
+### Contained tabs
+
+| State    | Element         | Property         | Color token           |
+| -------- | --------------- | ---------------- | --------------------- |
+| Enabled  | Background      | background-color | `$layer-accent`       |
+|          | Label           | text-color       | `$text-secondary`     |
+|          | Icon            | svg              | `$icon-secondary`     |
+|          | Background      | border-right     | `$border-strong`      |
+|          | Scrollable icon | svg              | `$icon-secondary`     |
+|          | Label           | text-color       | `$text-primary`       |
+| Selected | Background      | background-color | `$layer`              |
+|          | Icon            | svg              | `$icon-primary`       |
+|          | Background      | border-top       | `$border-interactive` |
+
+<Row>
+<Column colLg={8}>
+
+![Selected and enabled contained tabs](images/tab-style-2.png)
+
+</Column>
+</Row>
+
+<Caption>Examples of selected and enabled contained tabs.</Caption>{' '}
+
+<br />
+
+#### Interactive states
+
+<br />
+
+| State          | Element               | Property         | Color token            |
+| -------------- | --------------------- | ---------------- | ---------------------- |
+| Hover          | Background            | background-color | `$layer-accent-hover`  |
+|                | Label                 | text-color       | `$text-primary`        |
+|                | Icon                  | svg              | `$icon-primary`        |
+|                | Scrollable background | background-color | `$layer-accent-hover`  |
+| Active         | Scrollable background | background-color | `$layer-accent-active` |
+| Focus          | Scrollable background | border           | `$focus`               |
+| Focus-enabled  | Label                 | text-color       | `$text-secondary`      |
+|                | Background            | background-color | `$layer-accent`        |
+|                | Icon                  | svg              | `$icon-secondary`      |
+| Focus-selected | Label                 | text-color       | `$text-primary`        |
+|                | Background            | background-color | `$layer`               |
+|                | Icon                  | svg              | `$icon-primary`        |
+| Disabled       | Label                 | text-color       | `$text-disabled`       |
+|                | Icon                  | svg              | `$icon-disabled`       |
+|                | Background            | background-color | `$icon-disabled`       |
+|                | Border                | border-right     | `$border-disabled`     |
 
-### Interactive states
+<Row>
+<Column colLg={8}>
 
-| Class                       | Property      | Color token |
-| --------------------------- | ------------- | ----------- |
-| `.bx--tabs__nav-link:hover` | text color    | `$text-01`  |
-| `.bx--tabs__nav-item:hover` | border-bottom | `$ui-04`    |
-| `.bx--tabs__nav-item:focus` | border        | `$focus`    |
+![Examples of hover, focus-enabled, focus-selected, and disabled states.](images/tab-style-5.png)
+
+</Column>
+</Row>
+
+<Caption>
+  Examples of hover, focus-enabled, focus-selected, and disabled states for
+  contained tabs.
+</Caption>
+
+<Row>
+<Column colLg={8}>
+
+![Examples of enabled, hover, active, and focus states for contained scrollable tabs.](images/tab-style-6.png)
+
+</Column>
+</Row>
+
+<Caption>
+  Examples of enabled, hover, active, and focus states for contained scrollable
+  tabs.
+</Caption>
 
 ## Typography
 
@@ -33,17 +174,102 @@ Tab label should be set in sentence case, and should not exceed three words.
 
 ## Structure
 
-| Class                 | Property                    | px / rem | Spacing token |
-| --------------------- | --------------------------- | -------- | ------------- |
-| `.bx--tabs__nav-item` | border-bottom               | 2px      | –             |
-| `.bx--tabs__nav-link` | padding-left, padding-right | 16 / 1   | `$spacing-05` |
-| `.bx--tabs__nav-link` | padding-top, padding-bottom | 8 / 0.5  | `$spacing-03` |
-| `bx--tabs__nav-item`  | margin-left                 | 1px      | -             |
+### Line tabs
+
+| Element         | Property                    | px / rem   | Spacing token |
+| --------------- | --------------------------- | ---------- | ------------- |
+| Tab             | height                      | 40 / 2.5   | –             |
+|                 | border-bottom               | 2px        | –             |
+|                 | width                       | auto-width | —             |
+|                 | margin-left                 | 1px        | —             |
+| Label           | padding-left, padding-right | 16 / 1     | `$spacing-05` |
+|                 | padding-top, padding-bottom | 8 / 0.5    | `$spacing-03` |
+| Icon            | padding-right               | 16 / 1     | `$spacing-05` |
+|                 | padding-left                | 8 / 0.5    | `$spacing-03` |
+|                 | svg                         | 16 x 16    | —             |
+| Scrollable icon | svg                         | 16 x 16    | —             |
+
+<Row>
+<Column colLg={8}>
+
+![Structure and spacing measurements for line tabs in px and rem](images/tab-style-7.png)
+
+</Column>
+</Row>
+
+<Caption>Structure and spacing measurements for line tabs | px / rem</Caption>
+
+<br />
+
+#### Icon-only modifier
+
+<br />
+
+| Element  | Property      | px / rem | Spacing token |
+| -------- | ------------- | -------- | ------------- |
+| Tab (md) | height, width | 40 / 2.5 | –             |
+|          | svg           | 16 x 16  | –             |
+| Tab (lg) | height, width | 48 / 3   | —             |
+|          | svg           | 20 x 20  | —             |
+
+<Row>
+<Column colLg={8}>
+
+![Structure and spacing measurements for line tabs in px and rem](images/tab-style-7b.png)
+
+</Column>
+</Row>
+
+<Caption>
+  Structure and spacing measurements for icon-only line tabs | px / rem
+</Caption>
+
+### Contained tabs
+
+| Element               | Property                    | px / rem         | Spacing token |
+| --------------------- | --------------------------- | ---------------- | ------------- |
+| Tab                   | height                      | 40 / 2.5         | –             |
+|                       | border-top                  | 2px              | –             |
+|                       | width                       | auto-width, grid | –             |
+| Label                 | padding-left, padding-right | 16 / 1           | `$spacing-05` |
+| Icon                  | padding-right               | 16 / 1           | `$spacing-05` |
+|                       | padding-left                | 16 / 1           | `$spacing-05` |
+|                       | svg                         | 16 x 16          | —             |
+| Tab                   | border-right                | 1px              | —             |
+| Scrollable icon       | svg                         | 16 x 16          | —             |
+| Scrollable background | border-right, border-left   | 1px              | —             |
+
+<Row>
+<Column colLg={8}>
+
+![Structure and spacing measurements for line tabs in px and rem](images/tab-style-8.png)
+
+</Column>
+</Row>
+
+<Caption>
+  Structure and spacing measurements for contained tabs | px / rem
+</Caption>
+
+<br />
+
+#### Icon-only modifier
+
+<br />
+
+| Element  | Property      | px / rem | Spacing token |
+| -------- | ------------- | -------- | ------------- |
+| Tab (lg) | height, width | 48 / 3   | —             |
+|          | svg           | 20 x 20  | —             |
 
-<div className="image--fixed">
+<Row>
+<Column colLg={8}>
 
-![Structure and spacing measurements for tabs](images/tab-style-1.png)
+![Structure and spacing measurements for contained tabs in px and rem](images/tab-style-8b.png)
 
-</div>
+</Column>
+</Row>
 
-<Caption>Structure and spacing measurements for tile | px / rem</Caption>
+<Caption>
+  Structure and spacing measurements for icon-only contained tabs | px / rem
+</Caption>