[polaris.shopify.com] Update Colors content (#10657)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Closes #10020

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

- Updates `Color` and moves it to an `Overview` page
- Adds `Palettes and roles` subpage
- Adds `Using color` subpage
- Adds images and layout for all three pages
- Updates the `Colors` component in `mdx` to become an interactive color
contrast checker.

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: kyledurand <kyle.durand@shopify.com>
Co-authored-by: Sam Rose <11774595+sam-b-rose@users.noreply.github.com>

polaris.shopify.com/content/design/colors/index.md

@@ -0,0 +1,194 @@
+---
+title: Color
+description: Color highlights important areas, communicates status, urgency, and directs attention.
+icon: ColorsMajor
+keywords:
+  - color role
+  - color strategy
+  - color use
+  - black and white
+  - grayscale
+---
+
+# {frontmatter.title}
+
+<Lede>{frontmatter.description}</Lede>
+
+<Subnav />
+
+<Stack gap="800">
+
+<Card>
+
+    <Grid gap="400">
+
+      <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 4, xl: 4}}>
+
+        <Box className="text-extra-padding">
+
+          ## Color has purpose
+
+          The purpose of using color has to be clear. Color needs to support a message or a status that needs to be easily identifiable by merchants.
+
+        </Box>
+
+      </Grid.Cell>
+
+      <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 8, xl: 8}}>
+
+        ![A display of Polaris components like badges, menus and banners with different color roles](/images/design/colors/color-overview-purpose@2x.png)
+
+      </Grid.Cell>
+
+      <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 4, xl: 4}}>
+
+        <Box className="text-extra-padding">
+
+        Each usage of color within the Shopify admin is purposefully tied to a specific meaning. For instance, red signifies critical errors, green represents success messages, and blue is used to draw attention to tips and offers. Using color as decoration is exclusive to illustration.
+
+        This deliberate color coding facilitates merchants in identifying which parts of the user interface require focus and distinguishes them from the default features provided by the Shopify admin.
+        </Box>
+
+      </Grid.Cell>
+
+      <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 3, lg: 4, xl: 4}}>
+
+        <Do>
+        ![A list of badges that display paid, fulfilled, in progress, partially paid and unfulfilled states](/images/design/colors/color-overview-states-do@2x.png)
+
+        Use color to support different states merchants need to be informed about.
+        </Do>
+
+      </Grid.Cell>
+
+      <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 3, lg: 4, xl: 4}}>
+
+        <Dont>
+          ![A card with a pink border and a pink $99 trying to entice the merchant](/images/design/colors/color-overview-decorate-dont@2x.png)
+
+          Use color to decorate or to distract merchants from performing tasks.
+        </Dont>
+
+      </Grid.Cell>
+
+    </Grid>
+
+  </Card>
+
+  <Card>
+
+    <Grid gap="4">
+
+      <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 4, xl: 4}}>
+
+        <Box className="text-extra-padding">
+
+          ## Color has impact
+
+          The Shopify admin interface adopts a black and white color scheme, intentionally creating a neutral backdrop. By employing this monochromatic design, elements that incorporate color gain heightened visual impact and prominence.
+
+        </Box>
+
+      </Grid.Cell>
+
+      <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 8, xl: 8}}>
+
+        ![Cards in a grayscale interface with colorful badges that serve as headings](/images/design/colors/color-overview-impact@2x.png)
+
+      </Grid.Cell>
+
+      <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 4, xl: 4}}>
+
+        <Box className="text-extra-padding">
+
+          The intentional design of the overall interface in black and white enables strategically positioned and carefully selected elements to grab merchants' attention. By utilizing color purposefully, the focus is directed towards crucial information, actions, and visual cues.
+
+          Create impact when using color by using appropriate shades to convey the importance of what is being communicated to merchants.
+
+        </Box>
+
+      </Grid.Cell>
+
+      <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 3, lg: 4, xl: 4}}>
+
+        <Do>
+          ![A modal with a bright red header and bright red button that stops the user from navigating away from a page with unsaved changes](/images/design/colors/color-overview-vivid-do@2x.png)
+
+          Use strong, vivid colors to grab attention to things that matter most.
+        </Do>
+
+      </Grid.Cell>
+
+      <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 3, lg: 4, xl: 4}}>
+
+
+        <Dont>
+          ![A modal with a gray header and white button with red text that stops the user from navigating away from a page with unsaved changes](/images/design/colors/color-overview-diminish-dont@2x.png)
+
+          Contradict or diminish messaging by using subdued colors or grayscale.
+        </Dont>
+
+
+      </Grid.Cell>
+
+    </Grid>
+
+  </Card>
+
+  <Card>
+
+    <Grid gap="4">
+
+      <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 4, xl: 4}}>
+
+        <Box className="text-extra-padding">
+
+          ## Color is accessible
+
+          Polaris offers consistent color palettes for each color role. This means that each color is assigned a specific relationship within the overall palette.
+
+          These color relationships ensure that color contrasts remain consistent across every application of color and ensure proper legibility and understanding when it comes to combining texts with color and interactive shapes with various backgrounds.
+
+        </Box>
+
+      </Grid.Cell>
+
+      <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 8, xl: 8}}>
+
+        ![A dialog box with various elements highlighted where color combinations used for these elements passes AA and AAA accessibility standards for contrast](/images/design/colors/color-overview-accessible@2x.png)
+
+      </Grid.Cell>
+
+      <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 4, xl: 4}}>
+
+        <Box className="text-extra-padding">
+
+          Colors are meant to be easily understood and read by all merchants. Sufficient contrast makes things easier to find, identify and interact with.
+
+        </Box>
+
+      </Grid.Cell>
+
+      <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 3, lg: 4, xl: 4}}>
+        <Do>
+           ![An orange badge with an alert icon and text label in a table column that indicates that an item is almost out of stock](/images/design/colors/color-overview-conjunction-do@2x.png)
+
+            Use color in conjunction with other discernible elements to amplify the message.
+        </Do>
+      </Grid.Cell>
+
+      <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 3, lg: 4, xl: 4}}>
+
+        <Dont>
+          ![A text label in orange in a table column that indicates that an item is almost out of stock](/images/design/colors/color-overview-alone-dont@2x.png)
+
+          Use color alone to convey meaning
+        </Dont>
+
+      </Grid.Cell>
+
+    </Grid>
+
+  </Card>
+
+</Stack>