Tokens, not magic numbers

Reference the token; change one value and every element follows.

From polaris-tokens: motion-duration and motion-ease custom properties.

Change one value

Pick a step and a curve, then play the rows.

Literals in every ruleBad
Menu
Toast
Tooltip
Drawer
Badge
Tab

0

transition: transform 200ms cubic-bezier(…)
One token, many rulesGood
Menu
Toast
Tooltip
Drawer
Badge
Tab

0

transition: transform var(--dur) var(--ease)
:root {
  --p-motion-duration-200: 200ms;
  --p-motion-ease-out: cubic-bezier(0.19, 0.91, 0.38, 1);
}
.menu  { transition: transform var(--p-motion-duration-200) var(--p-motion-ease-out); }
.toast { transition: transform var(--p-motion-duration-200) var(--p-motion-ease-out); }

Why it matters, pros and cons

Why it matters

A literal 200ms and a pasted curve live in every rule. A token holds them once, so a change is one edit and nothing drifts.

Pros

  • One edit retunes every element that uses the token.
  • Names say what a value is; 200ms does not.
  • Near-duplicates like 180ms and 200ms cannot creep in.

Cons

  • Tokens add a layer to learn and maintain.
  • One-off animations may not deserve a shared name.
  • A wrong token change spreads everywhere at once.