Replace <!-- colors --> with Colors MDX component (#10401)

<!--
  ☝️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?

Fixes #10146 <!-- link to issue
if one exists -->

<img width="2032" alt="Screenshot 2023-09-11 at 4 16 37 PM"
src="https://github.com/Shopify/polaris/assets/4642404/f4f7865b-4d01-47ea-87b4-efc38d7c0585">

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

### WHAT is this pull request doing?

Migrating the `<!-- colors -->` directive from `makdown.mjs` to MDX
renderer

<!--
  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 🎩
1. `yarn run dev`
2. navigate to [`/design/colors`](http://localhost:3000/design/colors)
3.  The color palette should load on the page. 

⚠️ The `<h3>` styling of the color titles doesn't currently match what's
on prod. We'll fix this in a bigger sweep of styling regressions in a
future PR

🖥 [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: Jess Telford <jess.telford@shopify.com>

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

@@ -34,11 +34,11 @@ Color plays a key role in creating the overall hierarchy of a screen. Using the
 
 ---
 
-## Color pallette
+## Color palette
 
 The Polaris color palette is composed of 8 different colors, each with 10 unique shades. These colors are then used to create semantic tokens that style both Polaris components and custom components within the Shopify admin.
 
-{ /* <!-- colors --> */ }
+<Colors />
 
 ## Tokens
 

polaris.shopify.com/src/components/Markdown/Markdown.tsx

@@ -28,6 +28,7 @@ import Tooltip from '../Tooltip';
 import Icon from '../Icon';
 import {FeaturedCardGrid} from '../FeaturedCardGrid';
 import {useCopyToClipboard} from '../../utils/hooks';
+import {Colors} from './components/Colors';
 
 const CodeVisibilityContext = createContext<[boolean, (arg: boolean) => void]>([
   false,
@@ -229,6 +230,7 @@ function Markdown<
         TipBanner,
         Lede,
         RichCardGrid,
+        Colors,
         Tip: ({children}) => (
           <div className="tip-banner">
             <div className="tip-banner__header">

polaris.shopify.com/src/components/Markdown/components/Colors/Colors.module.scss

@@ -0,0 +1,27 @@
+@import '../../../../styles/variables.scss';
+
+.Colors {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--p-space-4);
+  margin-bottom: var(--p-space-8);
+  font-size: var(--font-size-75);
+  font-weight: var(--p-font-weight-semibold);
+
+  @media (min-width: $breakpointTablet) {
+    grid-template-columns: repeat(10, 1fr);
+  }
+
+  .ColorsSwatch {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--p-border-radius-2);
+    margin-bottom: var(--p-space-2);
+
+    &:before {
+      content: '';
+      display: block;
+      padding-bottom: 75%;
+    }
+  }
+}

polaris.shopify.com/src/components/Markdown/components/Colors/index.tsx

@@ -0,0 +1,54 @@
+import * as colorsObj from '../../../../../../polaris-tokens/dist/esm/src/colors.mjs';
+import {capitalize} from '../../../../utils/various';
+import styles from './Colors.module.scss';
+
+type ColorScale = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+
+type ColorValue = {
+  [index in ColorScale]: string;
+};
+
+interface Colors {
+  [key: string]: ColorValue;
+}
+
+const colors = colorsObj as unknown as Colors;
+
+export function Colors() {
+  const colorOrder = [
+    'gray',
+    'green',
+    'teal',
+    'blue',
+    'purple',
+    'red',
+    'orange',
+    'yellow',
+  ];
+
+  const colorMap = colorOrder.map((color) => {
+    const shades: ColorValue = colors[color] ?? [];
+    const swatches = Object.entries(shades)
+      .sort(([prevShade], [nextShade]) =>
+        Number(prevShade) < Number(nextShade) ? 1 : -1,
+      )
+      .map(([shade, value]) => (
+        <div key={value}>
+          <div
+            className={styles.ColorsSwatch}
+            style={{backgroundColor: value}}
+          ></div>
+          <div>{shade}</div>
+        </div>
+      ));
+
+    return (
+      <>
+        <h3>{capitalize(color)}</h3>
+        <div className={styles.Colors}>{swatches}</div>
+      </>
+    );
+  });
+
+  return <>{colorMap}</>;
+}

polaris.shopify.com/src/styles/globals.scss

@@ -342,31 +342,3 @@ button {
 .tip-banner__header h4 {
   margin: 0 !important;
 }
-
-.colors {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: var(--p-space-4);
-  margin-bottom: var(--p-space-8);
-  font-size: var(--font-size-75);
-  font-weight: var(--p-font-weight-semibold);
-}
-
-@media (min-width: $breakpointTablet) {
-  .colors {
-    grid-template-columns: repeat(10, 1fr);
-  }
-}
-
-.colors-swatch {
-  position: relative;
-  overflow: hidden;
-  border-radius: var(--p-border-radius-2);
-  margin-bottom: var(--p-space-2);
-
-  &:before {
-    content: "";
-    display: block;
-    padding-bottom: 75%;
-  }
-}

polaris.shopify.com/src/utils/markdown.mjs

@@ -1,7 +1,5 @@
 import yaml from 'js-yaml';
 
-import * as colors from '../../../polaris-tokens/dist/esm/src/colors.mjs';
-
 export const parseMarkdown = (inputMarkdown) => {
   const readmeSections = inputMarkdown.split('---');
   const frontMatterSection = readmeSections[1];
@@ -68,40 +66,6 @@ export const parseMarkdown = (inputMarkdown) => {
     });
   }
 
-  // Add some custom HTML to <!-- colors --> tags
-  const colorsRegex = /<!-- (colors) -->/gis;
-  if (markdown.match(colorsRegex)) {
-    markdown = markdown.replace(colorsRegex, (match) => {
-      const colorOrder = [
-        'gray',
-        'green',
-        'teal',
-        'blue',
-        'purple',
-        'red',
-        'orange',
-        'yellow',
-      ];
-
-      return colorOrder.reduce((acc, color) => {
-        const shades = colors[color] ?? [];
-        const swatches = Object.entries(shades)
-          .sort(([prevShade], [nextShade]) =>
-            Number(prevShade) < Number(nextShade) ? 1 : -1,
-          )
-          .map(
-            ([shade, value]) =>
-              `<div><div class="colors-swatch" style="background-color: ${value};"></div><div>${shade}</div></div>`,
-          )
-          .join('');
-
-        return `${acc}<h3>${capitalize(
-          color,
-        )}</h3><div class="colors">${swatches}</div>`;
-      }, '');
-    });
-  }
-
   const out = {
     frontMatter,
     description,
@@ -110,7 +74,3 @@ export const parseMarkdown = (inputMarkdown) => {
 
   return out;
 };
-
-function capitalize(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}

polaris.shopify.com/src/utils/various.ts

@@ -65,3 +65,7 @@ export const uppercaseFirst = (str: string): string =>
 
 export const deslugify = (str: string): string =>
   uppercaseFirst(str.replace(/-+/g, ' '));
+
+export const capitalize = (str: string) => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};