diff --git a/src/pages/components/content-switcher/images/content-switcher-style-1.png b/src/pages/components/content-switcher/images/content-switcher-style-1.png index eb69deb5d08..cd65e552da1 100644 Binary files a/src/pages/components/content-switcher/images/content-switcher-style-1.png and b/src/pages/components/content-switcher/images/content-switcher-style-1.png differ diff --git a/src/pages/components/content-switcher/images/content-switcher-style-color.png b/src/pages/components/content-switcher/images/content-switcher-style-color.png index f2c32619358..51f7345f263 100644 Binary files a/src/pages/components/content-switcher/images/content-switcher-style-color.png and b/src/pages/components/content-switcher/images/content-switcher-style-color.png differ diff --git a/src/pages/components/content-switcher/images/content-switcher-style-size.png b/src/pages/components/content-switcher/images/content-switcher-style-size.png new file mode 100644 index 00000000000..c73edb3a49b Binary files /dev/null and b/src/pages/components/content-switcher/images/content-switcher-style-size.png differ diff --git a/src/pages/components/content-switcher/images/content-switcher-usage-1.png b/src/pages/components/content-switcher/images/content-switcher-usage-1.png index dd622dfb31e..a10bb00528b 100644 Binary files a/src/pages/components/content-switcher/images/content-switcher-usage-1.png and b/src/pages/components/content-switcher/images/content-switcher-usage-1.png differ diff --git a/src/pages/components/content-switcher/images/content-switcher-usage-2.png b/src/pages/components/content-switcher/images/content-switcher-usage-2.png deleted file mode 100644 index e7a05e02b6e..00000000000 Binary files a/src/pages/components/content-switcher/images/content-switcher-usage-2.png and /dev/null differ diff --git a/src/pages/components/content-switcher/images/content-switcher-usage-3-do.png b/src/pages/components/content-switcher/images/content-switcher-usage-3-do.png deleted file mode 100644 index 017d400a4c3..00000000000 Binary files a/src/pages/components/content-switcher/images/content-switcher-usage-3-do.png and /dev/null differ diff --git a/src/pages/components/content-switcher/images/content-switcher-usage-3-don't.png b/src/pages/components/content-switcher/images/content-switcher-usage-3-don't.png deleted file mode 100644 index 80d26d024e9..00000000000 Binary files a/src/pages/components/content-switcher/images/content-switcher-usage-3-don't.png and /dev/null differ diff --git a/src/pages/components/content-switcher/images/content-switcher-usage-4.png b/src/pages/components/content-switcher/images/content-switcher-usage-4.png deleted file mode 100644 index 758c51fc921..00000000000 Binary files a/src/pages/components/content-switcher/images/content-switcher-usage-4.png and /dev/null differ diff --git a/src/pages/components/content-switcher/images/content-switcher-usage-sizes.png b/src/pages/components/content-switcher/images/content-switcher-usage-sizes.png index 0c76a99e663..becb6528504 100644 Binary files a/src/pages/components/content-switcher/images/content-switcher-usage-sizes.png and b/src/pages/components/content-switcher/images/content-switcher-usage-sizes.png differ diff --git a/src/pages/components/content-switcher/images/contentswitcher-usage-2.png b/src/pages/components/content-switcher/images/contentswitcher-usage-2.png new file mode 100644 index 00000000000..2fe898fd032 Binary files /dev/null and b/src/pages/components/content-switcher/images/contentswitcher-usage-2.png differ diff --git a/src/pages/components/content-switcher/images/contentswitcher-usage-3-do.png b/src/pages/components/content-switcher/images/contentswitcher-usage-3-do.png new file mode 100644 index 00000000000..7fa5245aeda Binary files /dev/null and b/src/pages/components/content-switcher/images/contentswitcher-usage-3-do.png differ diff --git a/src/pages/components/content-switcher/images/contentswitcher-usage-3-dont.png b/src/pages/components/content-switcher/images/contentswitcher-usage-3-dont.png new file mode 100644 index 00000000000..8e8c0587d4a Binary files /dev/null and b/src/pages/components/content-switcher/images/contentswitcher-usage-3-dont.png differ diff --git a/src/pages/components/content-switcher/images/contentswitcher-usage-4.png b/src/pages/components/content-switcher/images/contentswitcher-usage-4.png new file mode 100644 index 00000000000..14e9b4f198e Binary files /dev/null and b/src/pages/components/content-switcher/images/contentswitcher-usage-4.png differ diff --git a/src/pages/components/content-switcher/style.mdx b/src/pages/components/content-switcher/style.mdx index 9027ad6b9c4..8bcdc2c295e 100755 --- a/src/pages/components/content-switcher/style.mdx +++ b/src/pages/components/content-switcher/style.mdx @@ -13,13 +13,13 @@ Content switchers have two main states: `selected` and `unselected`. By default, content switcher buttons are unselected with the selected state using a high contrast color. -| Class | Property | Color token | -| --------------------------- | ---------------- | ------------- | -| `.bx--content-switcher-btn` | background-color | `$ui-01` | -| `.bx--content-switcher-btn` | text color | `$text-02` | -| `--selected` | background-color | `$ui-05` | -| `--selected` | text color | `$inverse-01` | -| `:after` | divider | `$ui-03` | +| Class | Property | Color token | +| --------------------------- | ---------------- | ---------------- | +| `.bx--content-switcher-btn` | background-color | `$ui-background` | +| `.bx--content-switcher-btn` | text color | `$text-02` | +| `--selected` | background-color | `$ui-05` | +| `--selected` | text color | `$inverse-01` | +| `:after` | divider | `$ui-03` | ### Interactive states diff --git a/src/pages/components/content-switcher/usage.mdx b/src/pages/components/content-switcher/usage.mdx index 9c22ba76964..7e5b0e172ce 100755 --- a/src/pages/components/content-switcher/usage.mdx +++ b/src/pages/components/content-switcher/usage.mdx @@ -102,7 +102,7 @@ binary decision. -![Anatomy of a content switcher group.](images/content-switcher-usage-2.png) +![Anatomy of a content switcher group.](images/contentswitcher-usage-2.png) @@ -138,12 +138,12 @@ of all other tabs should match the widest tab. -![Do base content tab width on the longest text label.](images/content-switcher-usage-3-do.png) +![Do base content tab width on the longest text label.](images/contentswitcher-usage-3-do.png) -![Do not use a different width for each content tab.](images/content-switcher-usage-3-don't.png) +![Do not use a different width for each content tab.](images/contentswitcher-usage-3-dont.png) @@ -179,7 +179,7 @@ The content switcher includes two content tab states: **selected** and -![Selected and unselected content switcher states.](images/content-switcher-usage-4.png) +![Selected and unselected content switcher states.](images/contentswitcher-usage-4.png)