T2101: Raw color in a style

Cause

A color is written by hand (a hex value, rgb(), a named color) where the design system expects a token.

Example

<contract>
{ "name": "Card", "role": "group", "parts": ["root"] }
</contract>
<template><div class="root"></div></template>
<style>
.root { color: #ff0000; }
</style>

What you see

ERROR  T2101  app/components/Card.tess:6:16
  Raw color "#ff0000" in "color" is not a token.
  The closest token is "$color.action.danger.bg" (#b91c1c). Or write raw(#ff0000, "reason") to keep it.
  Run `tessera explain T2101` for details.

Fix

Use the color token the hint names. tessera check --fix applies it when the match is exact.

.root {
  color: $color.text.default;
}

All errors and warnings