swatch

swatch copied to clipboard

Get a swatch svg for a color token from @primer/primitives

swatch-sid.vercel.app?mode=light&token=accent.fg

picks up color modes and tokens from @primer/primitives

examples:

![mode=dark, token=fg.onEmphasis](https://swatch-sid.vercel.app?mode=dark&token=fg.onEmphasis)

![mode=light&token=scale.pink[2]](https://swatch-sid.vercel.app?mode=light&token=scale.pink[2])

![mode=light_high_contrast, token=actionListItem.danger.hoverText](https://swatch-sid.vercel.app?mode=light&token=actionListItem.danger.hoverText)

![mode=light, token=success.fg, size=48](https://swatch-sid.vercel.app?mode=light&token=success.fg&size=48)

default size is 24x24px, but you can change it by passing a size for example: &size=48

troubleshooting: to see full list of available tokens for a color mode, click here: mode=light&token=idk