diff --git a/src/pages/components/tabs/images/tab-style-1.png b/src/pages/components/tabs/images/tab-style-1.png index 7bfff6e232c..75e13d19e93 100644 Binary files a/src/pages/components/tabs/images/tab-style-1.png and b/src/pages/components/tabs/images/tab-style-1.png differ diff --git a/src/pages/components/tabs/images/tab-style-2.png b/src/pages/components/tabs/images/tab-style-2.png new file mode 100644 index 00000000000..02209afee9b Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-2.png differ diff --git a/src/pages/components/tabs/images/tab-style-3.png b/src/pages/components/tabs/images/tab-style-3.png new file mode 100644 index 00000000000..94617a8bedb Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-3.png differ diff --git a/src/pages/components/tabs/images/tab-style-4.png b/src/pages/components/tabs/images/tab-style-4.png new file mode 100644 index 00000000000..c654f29586e Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-4.png differ diff --git a/src/pages/components/tabs/images/tab-style-5.png b/src/pages/components/tabs/images/tab-style-5.png new file mode 100644 index 00000000000..61d9df2dac2 Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-5.png differ diff --git a/src/pages/components/tabs/images/tab-style-6.png b/src/pages/components/tabs/images/tab-style-6.png new file mode 100644 index 00000000000..6144986cc69 Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-6.png differ diff --git a/src/pages/components/tabs/images/tab-style-7.png b/src/pages/components/tabs/images/tab-style-7.png new file mode 100644 index 00000000000..7ab20139838 Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-7.png differ diff --git a/src/pages/components/tabs/images/tab-style-7b.png b/src/pages/components/tabs/images/tab-style-7b.png new file mode 100644 index 00000000000..e599c7d77dc Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-7b.png differ diff --git a/src/pages/components/tabs/images/tab-style-8.png b/src/pages/components/tabs/images/tab-style-8.png new file mode 100644 index 00000000000..c8431f038b4 Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-8.png differ diff --git a/src/pages/components/tabs/images/tab-style-8b.png b/src/pages/components/tabs/images/tab-style-8b.png new file mode 100644 index 00000000000..8fd3ffd80f1 Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-8b.png differ diff --git a/src/pages/components/tabs/style.mdx b/src/pages/components/tabs/style.mdx index 6802a74257d..065ecaca505 100755 --- a/src/pages/components/tabs/style.mdx +++ b/src/pages/components/tabs/style.mdx @@ -5,22 +5,153 @@ description: tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- + + +Color +Typography +Structure + + + ## 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` | + +
+ +![Example of selected and enabled line tabs](images/tab-style-1.png) + +
+ +Example of selected and enabled line tabs. + +
+ +#### 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` | + +
+ +![Examples of hover, focus-enabled, focus-selected, and disabled states](images/tab-style-3.png) + +
+ + + Examples of hover, focus-enabled, focus-selected, and disabled states for line + tabs. + -### Interactive states +
+ +![Examples of enabled, hover, active, and disabled states for scrollable line tabs](images/tab-style-4.png) + +
+ + + Examples of enabled, hover, active, and disabled states for scrollable line + tabs. + + +### 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` | + +
+ +![Examples of selected and enabled contained tabs](images/tab-style-2.png) + +
+ +Examples of selected and enabled contained tabs. + +
+ +#### 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` | + +
-| 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` | +![Hover, focus-enabled, focus-selected, and disabled states for contained +tabs.](images/tab-style-5.png) + +
+ + + Hover, focus-enabled, focus-selected, and disabled states for contained tabs. + + +
+ +![Enabled, hover, active, and focus states for contained scrollable tabs.](images/tab-style-6.png) + +
+ + + Examples of enabled, hover, active, and focus states for contained scrollable + tabs. + ## Typography @@ -33,17 +164,95 @@ 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 | – | + +
+ +![Structure and spacing measurements for line tabs.](images/tab-style-7.png) + +
+ +Structure and spacing measurements for line tabs | px / rem + +
+ +#### Icon-only modifier + +
+ +| 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 | – | + +
+ +![Structure and spacing measurements for line tabs in px and rem](images/tab-style-7b.png) + +
+ + + Structure and spacing measurements for icon-only line tabs | px / rem + + +### 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 | – | + +
+ +![Structure and spacing measurements for contained tabs in px and rem](images/tab-style-8.png) + +
+ + + Structure and spacing measurements for contained tabs | px / rem + + +
+ +#### Icon-only modifier + +
+ +| Element | Property | px / rem | Spacing token | +| -------- | ------------- | -------- | ------------- | +| Tab (lg) | height, width | 48 / 3 | – | +| | svg | 20 x 20 | – |
-![Structure and spacing measurements for tabs](images/tab-style-1.png) +![Structure and spacing measurements for icon-only contained tabs in px and + rem](images/tab-style-8b.png)
-Structure and spacing measurements for tile | px / rem + + Structure and spacing measurements for icon-only contained tabs | px / rem +