Component Mapping

How components map global tokens to local aliases for a clear theme and variant contract.

Components should map global tokens once at the top of the component and use local tokens afterwards.

CSS

.alert {
  --alert-bg: var(--ui-bg, var(--surface-subtle));
  --alert-fg: var(--ui-fg, var(--text));
  --alert-border: var(--ui-border, var(--border));
  --alert-radius: var(--radius-lg);

  border: var(--border-width) solid var(--alert-border);
  border-radius: var(--alert-radius);
  background: var(--alert-bg);
  color: var(--alert-fg);
}

This makes the contract obvious:

  • theme authors adjust global tokens
  • variant code adjusts --ui-*
  • component code consumes local aliases