Color helpers

These classes are helper components for docs and demos. They preview color and shadow tokens without inline styles, but they are not a replacement for the semantic color docs.

Helper API

Class	Used for	Notes
`.sp-color-grid`	Responsive preview grid	Auto-fit layout for swatches or token examples.
`.sp-color-swatch`	One preview item	Vertical stack for chip + label text.
`.sp-color-meta`	Label row	Pairs token name and supporting info.
`.sp-color-chip`	Base color chip	Bordered chip shell used with token modifiers.
`.sp-color-chip--*`	Token-backed fill	Includes background, surface, text, border, accent, and status helpers.
`.sp-shadow-chip`	Shadow preview shell	Neutral surfaced chip for shadow examples.
`.sp-shadow-chip--1..3`	Shadow previews	Applies the shipped shadow tokens to the shell.
`.sp-color-link`	Link-color preview	Uses the semantic link token and hover color.

Preview

--sp-bgpage background

--sp-surfacebase surface

--sp-accentprimary accent

--sp-successsuccess state

--sp-shadow-1light elevation

--sp-shadow-3strong elevation

Example link preview

Typical markup

<div class="sp-color-swatch">
  <div class="sp-color-chip sp-color-chip--accent-2"></div>
  <div class="sp-color-meta">
    <code>--sp-accent-2</code>
    <span class="sp-muted">secondary accent</span>
  </div>
</div>

Guidance

Use these in docs and demos to preview the system visually. Use the Color and Shadows docs for the token meanings and when-to-use guidance.