Basic color palette docs

[LeaVerou]

Adds:

• color palette pages
• an overview page
• a new sidebar group with color palettes
• a color palette card to theme pages

Each color palette page currently includes:

1. A table of all tints, with copyable color names:

2. Themes using this palette

3. Color contrast pairs

Once #541 is merged I could reuse the logic in 11ty to actually print out contrast ratios for both WCAG and APCA.

4. Usage instructions for CSS and HTML

---

For the overview, I've attempted to generate some rudimentary icons, though I'm sure @lindsaym-fa could make them look better:

Notes:

• I've assumed that every palette not used by a Free theme is Pro.
• Themes still need icons (unless we just reuse the showcase iframe?)
• I did not remove anything from the page on Color tokens, I'll leave that up to @lindsaym-fa's judgement.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
webawesome	✅ Ready (Inspect)	Visit Preview	Jan 16, 2025 2:54pm

[lindsaym-fa]

These look great! 🤩

I revised the /docs/tokens/color and linked to the /docs/palettes within.

I've assumed that every palette not used by a Free theme is Pro.

Good assumption.

Themes still need icons (unless we just reuse the showcase iframe?)

Noted, of course. I'll handle this in #549.