Theming and tokens

Every library-owned CSS custom property uses the --mr-*namespace. Override tokens on an application root or individualdata-mr island rather than fighting component selectors.

.admin-area {
  --mr-color-primary: hsl(215 70% 42%);
  --mr-color-primary-darker: hsl(215 72% 32%);
  --mr-radius-medium: 0.5rem;
  --mr-container-max-width: 70rem;
}

Useful token groups

• --mr-color-* for surfaces, text, links, and status colors.
• --mr-font-family-* and --mr-line-height-body.
• --mr-space-* and layout-specific gap tokens.
• --mr-radius-* for component shape.
• --mr-control-* and --mr-focus-*.
• --mr-motion-duration-* for motion.
• --mr-layer-* for Layer surface sizing, backdrop, content scaffold spacing, and open/close motion.
• --mr-tooltip-* for Tooltip sizing, surface contrast/shadow, content spacing, preview motion, pin-progress/dismiss controls, and pinned-state feedback.

Layer and Tooltip example

.admin-area {
  --mr-layer-surface-inline-size: 40rem;
  --mr-layer-section-gap: var(--mr-space-lg);
  --mr-layer-actions-gap: var(--mr-space-sm);
  --mr-layer-motion-duration: 180ms;

  --mr-tooltip-content-gap: var(--mr-space-xs);
  --mr-tooltip-motion-duration: 120ms;
  --mr-tooltip-pinned-outline-width: 2px;
  --mr-tooltip-pinned-outline-offset: 2px;
  --mr-tooltip-control-size: 1.5rem;
  --mr-tooltip-min-inline-size: 12rem;
  --mr-tooltip-inline-size: 20rem;
  --mr-tooltip-max-inline-size: 28rem;
  --mr-tooltip-max-block-size: 60dvb;
}

Complete reference

See the source-driven token reference for every--mr-* custom property currently defined by the stable CSS package.

Per-scope theming

Custom properties inherit, so islands can use independent themes.

<section data-mr class="theme-a">...</section>
<section data-mr class="theme-b">...</section>

Color scheme and motion

Default palettes follow prefers-color-scheme. Motion-duration tokens collapse under prefers-reduced-motion: reduce.