Replace <!-- colors --> with Colors MDX component

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,
@@ -226,6 +227,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);
+};