docs: update pagination style tab

src/pages/components/pagination/style.mdx

@@ -1,71 +1,232 @@
 ---
 title: Pagination
 description:
-  Pagination is used for splitting up content or data into several pages, with a
-  control for navigating to the next or previous page.
+  The following page documents visual specifications such as color, typography,
+  structure, and size.
 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>
+<AnchorLink>Size</AnchorLink>
+<AnchorLink>Feedback</AnchorLink>
+
+</AnchorLinks>
+
 ## Color
 
-| Element               | Property         | Color token         |
-| --------------------- | ---------------- | ------------------- |
-| Container             | background-color | `$layer` \*         |
-|                       | border-top       | `$border-subtle` \* |
-| Text: items per page  | text color       | `$text-primary`     |
-| Text: number of items | text color       | `$text-secondary`   |
-| Icon                  | fill             | `$icon-primary`     |
+| Variant        | Element                         | Property         | Color token           |
+| -------------- | ------------------------------- | ---------------- | --------------------- |
+| Pagination     | Container                       | background-color | `$layer` \*           |
+|                | Border                          | border-top       | `$border-subtle` \*   |
+|                | Text: items per page            | text-color       | `$text-primary`       |
+|                | Text: number of items           | text-color       | `$text-primary`       |
+|                | Text: page range of total items | text-color       | `$text-secondary`     |
+|                | Icon                            | fill             | `$icon-primary`       |
+| Pagination nav | Container                       | background-color | transparent           |
+|                | Text                            | text-color       | `$text-primary`       |
+|                | Icon                            | fill             | `$icon-primary`       |
+|                | Page: selected                  | border           | `$border-interactive` |
+
+<Caption>
+  * Denotes a contextual color token that will change values based on the layer
+  it is placed on.
+</Caption>
+
+#### Pagination color
+
+<br />
+
+<Row>
+<Column colLg={12}>
+
+![Example of pagination color](images/pagination-style-color-pagination.png)
+
+</Column>
+</Row>
+
+<Caption>Example of pagination color</Caption>
+
+#### Pagination nav color
+
+<br />
+
+<Row>
+<Column colLg={12}>
+
+![Example of pagination nav color](images/pagination-style-color-pagination-nav.png)
+
+</Column>
+</Row>
+
+<Caption>Example of pagination nav color</Caption>
+
+### Interactive state color
+
+The pagination and pagination nav variants have nested select and ghost icon
+buttons that have interactive states. See the
+[select](https://carbondesignsystem.com/components/select/style/) and
+[button](https://carbondesignsystem.com/components/button/style/#ghost-button)
+style tabs for more information.
+
+| Variant        | State    | Element    | Property         | Color token           |
+| -------------- | -------- | ---------- | ---------------- | --------------------- |
+| Pagination     | Hover    | Background | background-color | `$layer` \*           |
+|                | Focus    | Border     | border           | `$focus`              |
+|                | Disabled | Text       | text-color       | `$text-primary`       |
+|                |          | Icon       | fill             | `$icon-primary`       |
+|                |          | Background | background-color | `$layer` \*           |
+| Pagination nav | Hover    | Background | background-color | `$layer-hover` \*     |
+|                | Focus    | Border     | border           | `$focus`              |
+|                | Selected | Border     | border           | `$border-interactive` |
+|                | Disabled | Text       | text-color       | `$text-disabled`      |
+|                |          | Icon       | fill             | `$icon-disabled`      |
+|                |          | Background | background-color | transparent           |
 
 <Caption>
   * Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
+#### Pagination interactive state color
+
+<br />
+
+<Row>
+<Column colLg={12}>
+
+![Example of pagination interactive state color](images/pagination-style-interactive-pagination.png)
+
+</Column>
+</Row>
+
+<Caption>Example of pagination interactive state color</Caption>
+
+#### Pagination nav interactive state color
+
+<br />
+
+<Row>
+<Column colLg={12}>
+
+![Example of pagination nav interactive state color](images/pagination-style-interactive-pagination-nav.png)
+
+</Column>
+</Row>
+
+<Caption>Example of pagination nav interactive state color</Caption>
+
 ## Typography
 
 Pagination text should be set in sentence case with the first letter of each
 word capitalized.
 
-| Element | Font-size (px/rem) | Font-weight   | Type token         |
-| ------- | ------------------ | ------------- | ------------------ |
-| Text    | 14 / 0.875         | Regular / 400 | `$body-compact-01` |
+| Variant        | Element         | Font size (px/rem) | Font weight    | Type token            |
+| -------------- | --------------- | ------------------ | -------------- | --------------------- |
+| Pagination     | Text            | 14 / 0.875         | Regular / 400  | `$body-compact-01`    |
+| Pagination nav | Text:unselected | 14 / 0.875         | Regular / 400  | `$body-compact-01`    |
+|                | Text:selected   | 14 / 0.875         | SemiBold / 600 | `$heading-compact-01` |
 
 ## Structure
 
-The Pagination bar is most commonly used in data tables. The width can vary
-depending on content and layout, but should span the entire width of the table
-it's being paired with.
+The pagination variant is connected to the bottom of data tables, and its width
+is determined by the width of the data table. The pagination nav variant is
+placed near the information it is paginated to, and its width is determined by
+the number of pages available.
 
-| Element        | Property                    | px / rem  | Spacing token |
-| -------------- | --------------------------- | --------- | ------------- |
-| Container      | border                      | 1px       | –             |
-|                | padding-left, padding-right | 16 / 1    | `$spacing-05` |
-| Select control | padding-left, padding-right | 16 / 1    | `$spacing-05` |
-| Arrow icon     | size                        | 20 x 20px | –             |
+| Variant        | Element                         | Property                    | px / rem  | Spacing token |
+| -------------- | ------------------------------- | --------------------------- | --------- | ------------- |
+| Pagination     | Container                       | border                      | 1px       | –             |
+|                |                                 | padding-left, padding-right | 16 / 1    | `$spacing-05` |
+|                | Select control: items per page  | padding-left                | 8 / .5    | `$spacing-03` |
+|                |                                 | padding-right               | 16 / 1    | `$spacing-05` |
+|                | Select control: number of pages | padding-left                | 16 / 1    | `$spacing-05` |
+|                |                                 | padding-right               | 8 / .5    | `$spacing-03` |
+|                | Chevron icon                    | svg                         | 16 x 16px | –             |
+|                | Caret icon                      | svg                         | 16 x 16px | –             |
+| Pagination nav | Border: selected                | border                      | 4px       | –             |
+|                | Caret icon                      | svg                         | 16 x 16px | –             |
+
+#### Pagination structure
+
+<br />
 
 <div className="image--fixed">
 
-![Spacing measurements for pagination](images/pagination-style-1.png)
+![Structure and spacing measurements for pagination | px / rem](images/pagination-style-structure-pagination.png)
 
 </div>
 
-<Caption>Spacing measurements for pagination | px / rem</Caption>
+<Caption>Structure and spacing measurements for pagination | px / rem</Caption>
+
+#### Pagination nav structure
+
+<br />
 
 <div className="image--fixed">
 
-![Structure measurements for pagination](images/pagination-style-2.png)
+![Structure and spacing measurements for pagination nav | px / rem](images/pagination-style-structure-pagination-nav.png)
 
 </div>
 
-<Caption>Structure measurements for pagination | px / rem</Caption>
+<Caption>
+  Structure and spacing measurements for pagination nav | px / rem
+</Caption>
+
+## Size
 
-## Sizes
+The pagination component is available in three sizes for both variants:
+**large**, **medium**, and **small**.
 
-| Element          | Size        | Height (px/rem) |
+| Element          | Size        | Height (px / rem) |
 | ---------------- | ----------- | --------------- |
-| Container height | Small (sm)  | 32 / 2          |
+| Container height | Large (lg)  | 48 / 3          |
 |                  | Medium (md) | 40 / 2.5        |
-|                  | Large (lg)  | 48 / 3          |
-| Icon button      | Small (sm)  | 32 / 2          |
+|                  | Small (sm)  | 32 / 2          |
+| Icon button      | Large (lg)  | 48 / 3          |
 |                  | Medium (md) | 40 / 2.5        |
-|                  | Large (lg)  | 48 / 3          |
+|                  | Small (sm)  | 32 / 2          |
+
+#### Pagination size
+
+<br />
+
+<Row>
+<Column colLg={12}>
+
+![Small, medium, and large sizes of pagination](images/pagination-usage-sizes.png)
+
+</Column>
+</Row>
+
+<Caption>Small, medium, and large sizes of pagination</Caption>
+
+#### Pagination nav size
+
+<br />
+
+<Row>
+<Column colLg={12}>
+
+![Small, medium, and large sizes of pagination nav](images/pagination-usage-sizes-pagination-nav.png)
+
+</Column>
+</Row>
+
+<Caption>Small, medium, and large sizes of pagination nav</Caption>
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions, and
+leaving any other comments
+on[GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).