Tokens

Tokens, typography and customization

Use semantic roles from the pinned release. The package already supplies component styling; application layout and supported host mappings use the same token variables.

Find the right value

1. Browse the token explorer to understand names and relationships.
2. Read resolved tokens at v1.1.0 for actual values, eligibility and alias dependencies.
3. Use token usage to see declared component/port references. Missing consumers are unknown, not proven unused.
4. Consult the selected component contract for the roles assigned to each state.

Load @j3w1/ui/tokens.css for package use, the bundle's tokens.css for copied components, or pinned exports/tokens.css for canonical CSS-variable mapping. Avoid mixing revisions.

True Black / Rose role guide

Purpose	Role
Page canvas	color.surface.canvas
Panel or card	color.surface.default
Navigation chrome	color.surface.chrome
Floating/raised layer	color.surface.raised and the component's overlay roles
Ordinary UI text	color.text.default
Bright emphasis	color.text.bright
Reading text / near-white title treatment where specified	color.text.prose
Secondary information	color.text.muted
Links	color.text.link, color.text.link-underline, color.text.link-hover
Keyboard focus	The component's focus ring role
Selection	Selection fill and text roles, distinct from focus
Chart marks	The chart contract's series roles; the demo uses red color.chart.series-2

The current values are in the linked export, not maintained as another palette in this wiki. Red marks interaction; status colors have bounded diagnostic/status uses. Never spread status blue/green/amber into unrelated chrome or primary actions.

Application layout with canonical variables

.application-panel {
  background: var(--color-surface-default);
  color: var(--color-text-default);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-none);
  padding: var(--space-16);
  font-family: var(--font-family-mono);
}

This is a non-interactive panel example. border.default is decorative and must not become the only boundary of a form control. Use the component's control-border and focus rules for interactive elements.

Keep supported composition classes and API surfaces. Load component CSS after broad resets; scope intentional host overrides. Changing an approved value or design meaning is a consumer deviation, not an official new theme variant. Do not lighten, blend or replace colors ad hoc.

Density and typography

Use data-density="comfortable" or data-density="compact" on the document or containing element. Density tokens supply the modes; verify actual controls and target sizes in your layout.

The font family is named in theme.json. Font binaries are not bundled. The stack falls back to available monospace fonts; obtain optional fonts from their publishers under their own terms. Honor user text size, zoom, reduced motion and forced-colors settings.

Contrast and eligibility

Choose roles by permitted use on the actual surface, not just by hex or a single contrast example. Read the contrast report and accessibility contract. A decorative border and a meaningful control boundary have different requirements.

Read eligibility.action and eligibility.decisionIds at your pin. Use-and-report roles require disclosure; proposed profiles are not deliverable variants. Avoid copying old role counts or pending-decision lists into app policy because they can change between versions.

Next: Themed controls · Accessibility · Versioning.