feat: label each poster swatch in its M3 paired color

[abernier]

What

The poster's labels were white with mix-blend-mode: difference. Each label is now written in the color M3 pairs it with, as Material Theme Builder's own poster does.

All of that logic lives in one file, src/Scheme.ink.ts. The swatches only ask it for a color, in var mode and Tailwind mode alike.

roleInk(role): scheme roles, custom colors included

• By default, a role's ink is its on- counterpart, and the reverse: primary ↔ on-primary, x-container ↔ on-x-container, background ↔ on-background, my-custom-color-1 ↔ on-my-custom-color-1, and so on.
• A small table covers the exceptions, where the spec pairs a role with the one it's meant to be read against:
  • *-fixed and *-fixed-dim → on-*-fixed; on-*-fixed-variant → *-fixed
  • the surfaces → on-surface; on-surface-variant and outline → surface; outline-variant → on-surface
  • inverse-surface ↔ inverse-on-surface; inverse-primary → inverse-surface
  • surface-tint → on-primary
  • scrim and shadow (black in both themes) → --md-ref-palette-neutral-100

toneInk(palette, tone): palette tones

Tones up to 50 use palette tone 100, lighter tones use tone 10. These are the tones of on-primary (100 on 40) and on-primary-container (10 on 90). The cut at 50 keeps every pair at about 4.5:1 or above.

Tailwind mode, merged into the components

The Tailwind story used to re-draw the custom colors and shades by hand, because Scheme and Shades couldn't paint them with utilities. Now the components do it themselves, and the story is just <Scheme tw> + <Shades tw>:

• <Scheme tw> paints the custom colors with their utilities too (bg-myCustomColor1, bg-on-myCustomColor1-container, …).
• <Shades tw> (new prop) paints the plugin's eleven Tailwind shades (bg-primary-500, …) instead of every tone.
• Class generation: both sets of names are built at runtime, which no scanner sees, so globals.css (in our marked block) lists them with @source inline(). The tw prop docs give consumers the snippet.
• <Scheme tw> also paints primary, secondary and background with bg-[var(--md-sys-color-<role>)], the README's escape hatch. These are the three names shadcn claims too:
  • bg-secondary landed on secondary-container;
  • without shadcn.css, all three landed on shadcn's own colors.

I checked this in the Storybook (which has shadcn): all 202 swatches of the Tailwind story have a computed background equal to their --md-sys-color-* / --md-ref-palette-* variable.

Elsewhere

• Poster no longer sets color or mix-blend-mode on the <p>s it holds.
• Scheme's custom-color cells are now one loop over their four roles, instead of four copied blocks.

Net effect: about −420 lines.

Checks

pnpm run lgtm passes (build, lint, format, exports, typecheck, tests), with no Tailwind warning. I checked the Custom colors, Dropped roles and Tailwind stories visually in light and dark.

🤖 Generated with Claude Code

https://claude.ai/code/session_01HnjGFvhGSxgzZZiU33Wiko