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