Developer Tools / @methrax/spin-wheel / Theming & Design Tokens

Theming & Design Tokens

The component exposes CSS custom properties so the consuming application owns the visual theme without forking the library.

Theme example

m-spin-wheel {
  --m-wheel-size: 450px;
  --m-wheel-border-size: 8px;
  --m-wheel-border-color: #111827;
  --m-wheel-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
  --m-wheel-pointer-color: #dc2626;
  --m-wheel-label-font-size: 18px;
  --m-wheel-label-font-weight: 800;
  --m-wheel-center-pin-size: 80px;
  --m-wheel-center-pin-background: #ffffff;
  --m-wheel-center-pin-color: #111827;
}

Wheel tokens

Token	Default	Description
`--m-wheel-size`	`350px`	Overall wheel diameter.
`--m-wheel-background`	`transparent`	Wheel background.
`--m-wheel-border-size`	`6px`	Wheel border width.
`--m-wheel-border-color`	`#222222`	Wheel border color.
`--m-wheel-border-radius`	`50%`	Wheel border radius.
`--m-wheel-box-sizing`	`border-box`	Wheel box-sizing.
`--m-wheel-shadow`	`0 8px 24px rgba(0, 0, 0, 0.15)`	Wheel shadow.

Animation tokens

Token	Default	Description
`--m-wheel-transition-duration`	`5000ms`	Spin transition duration.
`--m-wheel-transition-timing-function`	`cubic-bezier(0.1, 1, 0.1, 1)`	Spin easing curve.

spinDuration controls component behavior; keep theme-level transition settings aligned with the desired visual experience.

Pointer tokens

Token	Default	Description
`--m-wheel-pointer-size`	`16px`	Pointer triangle size.
`--m-wheel-pointer-color`	`#ef4444`	Pointer color.
`--m-wheel-pointer-angle`	`0deg`	Pointer rotation.
`--m-wheel-pointer-shadow`	`drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15))`	Pointer shadow.

Label tokens

Token	Default	Description
`--m-wheel-label-font-family`	`system-ui, -apple-system, sans-serif`	Label font stack.
`--m-wheel-label-font-size`	`1rem`	Label font size.
`--m-wheel-label-font-weight`	`700`	Label font weight.
`--m-wheel-label-color`	`inherit`	Default label color. Sector `textColor` can override it.
`--m-wheel-label-letter-spacing`	`0.5px`	Label letter spacing.
`--m-wheel-label-offset`	`-0.36`	Radial label offset as a wheel-size multiplier.
`--m-wheel-label-rotation`	`90deg`	Label rotation.

Center-pin tokens

Token	Default	Description
`--m-wheel-center-pin-size`	`65px`	Center-pin diameter.
`--m-wheel-center-pin-background`	`#ffffff`	Background color.
`--m-wheel-center-pin-color`	`#0f172a`	Text color.
`--m-wheel-center-pin-border-width`	`4px`	Border width.
`--m-wheel-center-pin-border-color`	`#0f172a`	Border color.
`--m-wheel-center-pin-border-radius`	`50%`	Border radius.
`--m-wheel-center-pin-font-size`	`11px`	Label font size.
`--m-wheel-center-pin-font-weight`	`900`	Label font weight.
`--m-wheel-center-pin-shadow`	`none`	Center-pin shadow.
`--m-wheel-center-pin-z-index`	`5`	Stacking order.

Theme scope

Tokens can be applied globally to every wheel or scoped to a wrapper/class for multiple themes on the same page.

.promo-wheel m-spin-wheel {
  --m-wheel-pointer-color: #ea580c;
  --m-wheel-border-color: #0f172a;
}

.minimal-wheel m-spin-wheel {
  --m-wheel-border-size: 2px;
  --m-wheel-shadow: none;
}