docs: Adding dismissible docs

src/pages/components/tabs/style.mdx

@@ -5,9 +5,23 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+<PageDescription>
+
+The following page documents visual specifications such as color, typography,
+structure, and size.
+
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>Color</AnchorLink> <AnchorLink>Typography</AnchorLink>
+<AnchorLink>Structure</AnchorLink>
+
+</AnchorLinks>
+
 ## Color
 
-### Line tabs
+### Line tab color
 
 | Type       | Element | Property         | Color token           |
 | ---------- | ------- | ---------------- | --------------------- |
@@ -25,11 +39,13 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 </div>
 
-<Caption>Example of selected and unselected line tabs.</Caption>
+<Caption>
+Example of selected and unselected line tabs.
+</Caption>
 
 <br />
 
-#### Interactive states
+#### Line tab interactive state color
 
 <br />
 
@@ -58,7 +74,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 <br />
 
-#### Scrollable states
+#### Line tab scrollable states
 
 <br />
 
@@ -82,7 +98,73 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
   tabs.
 </Caption>
 
-### Contained tabs
+### Dismissible line tab color
+
+| Type       | Element | Property         | Color token           |
+| ---------- | ------- | ---------------- | --------------------- |
+| Unselected | Tab     | background-color | transparent           |
+|            |         | border-bottom    | `$border-subtle` \*   |
+|            | Label   | text-color       | `$text-secondary`     |
+|            | Icon    | svg              | `$icon-secondary`     |
+| Selected   | Label   | text-color       | `$text-primary`       |
+|            | Icon    | svg              | `$icon-primary`       |
+|            | Tab     | border-bottom    | `$border-interactive` |
+
+<div className="image--fixed">
+
+![Example of selected and unselected dismissible line tabs](images/tab-style-9.png)
+
+</div>
+
+<Caption>
+Example of selected and unselected dismissible line tabs.
+</Caption>
+
+<br />
+
+#### Dismissible line tab interactive state
+
+<br />
+
+| State    | Element         | Property         | Color token        |
+| -------- | --------------- | ---------------- | ------------------ |
+| Hover    | Label           | text-color       | `$text-primary`    |
+|          | Icon            | svg              | `$icon-primary`    |
+|          |                 | background-color | `$background-hover` |
+|          | Tab             | border-bottom    | `$border-strong`   |
+| Focus    | Tab: unselected | border           | `$focus`           |
+|          | Tab: selected   | border           | `$focus`           |
+| Disabled | Label           | text-color       | `$text-disabled`   |
+|          | Icon            | svg              | `$icon-disabled`   |
+|          | Tab             | background-color | transparent        |
+|          |                 | border-bottom    | `$border-disabled` |
+
+<Row>
+<Column colLg={8}>
+
+![Examples of unselected close hover, unselected hover, unselected focus, and disabled states for dismissible line tabs](images/tab-style-11a.png)
+
+</Column>
+</Row>
+
+<Caption>
+  Examples of unselected close hover, unselected hover, unselected focus, and disabled states for
+  dismissible line tabs.
+</Caption>
+
+<Row>
+<Column colLg={8}>
+
+![Examples of selected close hover, selected focus, and disabled states for dismissible line tabs](images/tab-style-11b.png)
+
+</Column>
+</Row>
+
+<Caption>
+  Examples of selected close hover, selected focus, and disabled states for dismissible line tabs.
+</Caption>
+
+### Contained tab color
 
 | Type       | Element | Property         | Color token           |
 | ---------- | ------- | ---------------- | --------------------- |
@@ -106,11 +188,13 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 </div>
 
-<Caption>Examples of selected and unselected contained tabs.</Caption>
+<Caption>
+Examples of selected and unselected contained tabs.
+</Caption>
 
 <br />
 
-#### Interactive states
+#### Contained tab interactive state color
 
 <br />
 
@@ -143,7 +227,7 @@ tabs.](images/tab-style-5.png)
 
 <br />
 
-#### Scrollable states
+#### Dismissible contained tab scrollable states
 
 <br />
 
@@ -167,6 +251,87 @@ tabs.](images/tab-style-5.png)
   tabs.
 </Caption>
 
+### Dismissible contained tab color
+
+| Type       | Element | Property         | Color token           |
+| ---------- | ------- | ---------------- | --------------------- |
+| Unselected | Tab     | background-color | `$layer-accent` \*    |
+|            |         | border-right     | `$border-strong` \*   |
+|            | Label   | text-color       | `$text-secondary`     |
+|            | Icon    | svg              | `$icon-secondary`     |
+|            | Dismissible icon    | svg              | `$icon-secondary`     |
+| Selected   | Tab     | background-color | `$layer` \*           |
+|            |         | border-top       | `$border-interactive` |
+|            | Label   | text-color       | `$text-primary`       |
+|            | Icon    | svg              | `$icon-primary`       |
+|            | Dismissible icon    | svg              | `$icon-primary`       |
+
+<Caption>
+  * Denotes a contextual color token that will change values based on the layer
+  it is placed on.
+</Caption>
+
+<div className="image--fixed">
+
+![Examples of selected and unselected dismissible contained tabs](images/tab-style-10.png)
+
+</div>
+
+<Caption>
+Examples of selected and unselected dismissible contained tabs.
+</Caption>
+
+<br />
+
+#### Dismissible tab interactive state color
+
+<br />
+
+| State    | Element | Property         | Color token              |
+| -------- | ------- | ---------------- | ------------------------ |
+| Hover    | Tab     | background-color | `$layer-accent-hover` \* |
+|          | Label   | text-color       | `$text-primary`          |
+|          | Icon    | svg              | `$icon-primary`          |
+|          | Dismissible icon    | svg  | `$icon-primary`          |
+|          | Selected: dismissible icon    | background-color              | `$layer-hover` \*         |
+|          | Unselected: dismissible icon    | background-color              | `$layer-accent-hover` \*         |
+| Focus    | Tab     | border           | `$focus`                 |
+| Disabled | Label   | text-color       | `$text-disabled`         |
+|          | Icon    | svg              | `$icon-disabled`         |
+|          | Tab     | background-color | `$button-disabled`       |
+|          |         | border-right     | `$border-disabled`       |
+
+<Caption>
+  * Denotes a contextual color token that will change values based on the layer
+  it is placed on.
+</Caption>
+
+<Row>
+<Column colLg={8}>
+
+![Unselected hover, unselected close hover, unselected focus, and disabled states for dismissible contained
+tabs.](images/tab-style-12a.png)
+
+</Column>
+</Row>
+
+<Caption>
+  Examples of unselected hover, unselected close hover, unselected focus, and disabled states for dismissible contained tabs.
+</Caption>
+
+<Row>
+<Column colLg={8}>
+
+![Selected close hover, selected focus, and disabled states for dismissible contained
+tabs.](images/tab-style-12b.png)
+
+</Column>
+</Row>
+
+<Caption>
+  Examples of selected close hover, selected focus, and disabled states for dismissible contained tabs.
+</Caption>
+
 ## Typography
 
 Tab labels should be set in sentence case, and should not exceed three words.
@@ -176,9 +341,11 @@ Tab labels should be set in sentence case, and should not exceed three words.
 | Label: unselected | 14 / 0.875         | Regular / 400  | `$body-compact-01`    |
 | Label: selected   | 14 / 0.875         | SemiBold / 600 | `$heading-compact-01` |
 
+
+
 ## Structure
 
-### Line tabs
+### Line tab structure
 
 | Element         | Property                    | px / rem   | Spacing token |
 | --------------- | --------------------------- | ---------- | ------------- |
@@ -199,11 +366,13 @@ Tab labels should be set in sentence case, and should not exceed three words.
 
 </div>
 
-<Caption>Structure and spacing measurements for line tabs | px / rem</Caption>
+<Caption>
+Structure and spacing measurements for line tabs | px / rem
+</Caption>
 
 <br />
 
-#### Icon-only modifier
+#### Line tab icon-only modifier
 
 <br />
 
@@ -224,7 +393,37 @@ Tab labels should be set in sentence case, and should not exceed three words.
   Structure and spacing measurements for icon-only line tabs | px / rem
 </Caption>
 
-### Contained tabs
+### Dismissible line tab structure
+
+| 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` |
+| Dismissible icon | padding-right               | 16 / 1     | `$spacing-05` |
+|                 | padding-left                | 8 / 0.5    | `$spacing-03` |
+|                 | svg                         | 16 x 16    | –             |
+| Icon            | padding-right               | 8 / 0.5    | `$spacing-03` |
+|                 | padding-left                | 16 / 1     | `$spacing-05` |
+|                 | svg                         | 16 x 16    | –             |
+
+
+<div className="image--fixed">
+
+![Structure and spacing measurements for dismissible line tabs without icons (top) and with icons (bottom).](images/tab-style-13.png)
+
+</div>
+
+<Caption>
+Structure and spacing measurements for line tabs without icons (top) and with icons (bottom) | px / rem
+</Caption>
+
+<br />
+
+### Contained tab structure
 
 | Element           | Property                    | px / rem         | Spacing token |
 | ----------------- | --------------------------- | ---------------- | ------------- |
@@ -251,7 +450,7 @@ Tab labels should be set in sentence case, and should not exceed three words.
 
 <br />
 
-#### Icon-only modifier
+#### Contained tab icon-only modifier
 
 <br />
 
@@ -270,3 +469,29 @@ Tab labels should be set in sentence case, and should not exceed three words.
 <Caption>
   Structure and spacing measurements for icon-only contained tabs | px / rem
 </Caption>
+
+### Dismissible contained tab structure
+
+| 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` |
+| Dismissible icon  | padding-right               | 16 / 1           | `$spacing-05` |
+|                   | padding-left                | 8 / .5           | `$spacing-03` |
+|                   | svg                         | 16 x 16          | –             |
+| Icon              | padding-right               | 8 / .5           | `$spacing-03` |
+|                   | padding-left                | 16 / 1           | `$spacing-05` |
+|                   | svg                         | 16 x 16          | –             |
+| Tab               | border-right                | 1px              | –             |
+
+<div className="image--fixed">
+
+![Structure and spacing measurements for dismissible contained tabs in px and rem](images/tab-style-14.png)
+
+</div>
+
+<Caption>
+  Structure and spacing measurements for dismissible contained tabs without icons (top) and with icons (bottom)| px / rem
+</Caption>