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

[yurm04]

WHY are these changes introduced?

Fixes #10146

WHAT is this pull request doing?

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

How to 🎩

1. yarn run dev
2. navigate to /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
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

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>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[jesstelford]

Because this is a CSS Module, we should be able to export the classnames and use them in the JS rather than having global CSS classes:

Suggested change

	.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);
	}
	.colors-swatch {
	.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 {

[jesstelford]

Using CSS modules:

Suggested change

	import './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="colors-swatch" style={{backgroundColor: value}}></div>
	<div>{shade}</div>
	</div>
	));
	return (
	<>
	<h3>{capitalize(color)}</h3>
	<div className="colors">{swatches}</div>
	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>

[jesstelford]

We can now delete the related styles from polaris.shopify.com/src/styles/globals.scss 🎉

[jesstelford]

Looks like the swatch headings aren't getting the correct styles because they're defined in JSX instead of markdown:

Local:

Prod:

I have a solution in mind which I'll try now.

[jesstelford]

I've pushed up 3 new commits:

• Cleanup unused global styles
• Use CSS modules
• Push Color scale rendering down to MDX

The third one is the biggest, and it's designed to fix the unstyled / unlinked heading problem. Basically I just uncoupled the heading/scale rendering (and replaced div with Box).

[yurm04]

@jesstelford your changes look good overall, but I'm going to drop the last commit where you refactor to move more things to mdx. @tjonx is going to take a look at enhancing the existing color palette to be more interactive. I think the JSX approach makes this slightly easier since the new version will probably need to be a single, all-encompassing component that can handle component state for the interactivity.

If we're not able to go the interactive component route, let's pull your refactor back in in a separate PR as i do think it's the better approach