Tab style v11

src/pages/components/tabs/style.mdx

@@ -7,20 +7,145 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ## 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
 
-### Interactive states
+| 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`                                 |
 
-| 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`    |
+<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>
+
+#### Interactive states
+
+| 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>{' '}
+
+#### Interactive states
+
+| 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`     |
+
+<Row>
+<Column colLg={8}>
+
+![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 +158,73 @@ Tab label should be set in sentence case, and should not exceed three words.
 
 ## Structure
 
-| Class                 | Property                    | px / rem | Spacing token |
+### Line tabs
+
+| Element         | Property                    | px / rem | Spacing token |
+| --------------- | --------------------------- | -------- | ------------- |
+| Tab             | border-bottom               | 2px      | –             |
+| 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  | —             |
+| Tab             | margin-left                 | 1px      | —             |
+| Icon-only       | svg                         | 16 x 16  | -             |
+|                 | svg                         | 20 x 20  | —             |
+| 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>
+
+### Contained tabs
+
+| Element               | 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      | -             |
+| Tab                   | border-top                  | 2px      | –             |
+| 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      | —             |
+| Icon-only             | svg                         | 20 x 20  | -             |
+| Scrollable icon       | svg                         | 16 x 16  | —             |
+| Scrollable background | border-right, border-left   | 1px      | -             |
+
+<Row>
+<Column colLg={8}>
+
+![Structure and spacing measurements for contained tabs in px and rem](images/tab-style-8.png)
+
+</Column>
+</Row>
+
+<Caption>
+  Structure and spacing measurements for contained tabs | px / rem
+</Caption>
+
+## Sizes
+
+| Element                 | Property | Height (px / rem) |
+| ----------------------- | -------- | ----------------- |
+| Line tab                | Medium   | 40 / 2.5          |
+| Icon-only line tab      | Medium   | 40 / 2.5          |
+|                         | Large    | 48 / 3            |
+| Contained tab           | Large    | 48 / 3            |
+| Icon-only contained tab | Large    | 48 / 3            |
 
-<div className="image--fixed">
+<Row>
+<Column colLg={8}>
 
-![Structure and spacing measurements for tabs](images/tab-style-1.png)
+![Tab sizes in px and rem](images/tab-style-9.png)
 
-</div>
+</Column>
+</Row>
 
-<Caption>Structure and spacing measurements for tile | px / rem</Caption>
+<Caption>Tab sizes | px / rem</Caption>