Content switcher images (#2492)

* updated images

reuploaded and renamed images

* updated images

updated images with new styles

* fixed bg

fixed usage-1 background color

* fixed broken image

updated broken image

* replaced image

replaces low res usage image for high res

* reuploaded high res image

trouble shooting high res image

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
 

src/pages/components/content-switcher/usage.mdx

@@ -102,7 +102,7 @@ binary decision.
 <Row>
 <Column colLg={8}>
 
-![Anatomy of a content switcher group.](images/content-switcher-usage-2.png)
+![Anatomy of a content switcher group.](images/contentswitcher-usage-2.png)
 
 </Column>
 </Row>
@@ -138,12 +138,12 @@ of all other tabs should match the widest tab.
 <DoDontRow>
   <DoDont caption="Do base content tab width on the longest text label.">
 
-![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)
 
   </DoDont>
   <DoDont type="dont" caption="Do not use a different width for each content tab.">
 
-![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)
 
   </DoDont>
 </DoDontRow>
@@ -179,7 +179,7 @@ The content switcher includes two content tab states: **selected** and
 <Row>
 <Column colLg={8}>
 
-![Selected and unselected content switcher states.](images/content-switcher-usage-4.png)
+![Selected and unselected content switcher states.](images/contentswitcher-usage-4.png)
 
 </Column>
 </Row>