Developer Tools / @methrax/voice-recorder / Design Tokens & Theming

Design Tokens & Theming

Apply token overrides on an m-voice-recorder host so separate recorder instances can have different themes.

Brand theme example

.vocalis-recorder {
  --m-vr-bg-color: #f0f6f4;
  --m-vr-border-color: #d7e5df;
  --m-vr-primary-color: #327168;
  --m-vr-primary-hover: #275c55;
  --m-ap-card-bg: #ffffff;
  --m-ap-btn-bg: #327168;
  --m-ap-slider-thumb-bg: #327168;
}

Available CSS design tokens

Token group	Tokens	Purpose
Recorder surface	`--m-vr-bg-color`, `--m-vr-border-color`, `--m-vr-border-radius`, `--m-vr-padding`, `--m-vr-gap`	Recorder container geometry and surface.
Recorder actions	`--m-vr-primary-color`, `--m-vr-primary-hover`, `--m-vr-danger-color`, `--m-vr-danger-hover`, `--m-vr-warning-color`	Default control states.
Recorder typography	`--m-vr-text-color`, `--m-vr-font-family`	Text color and font stack.
Player card	`--m-ap-card-bg`, `--m-ap-card-border-color`, `--m-ap-card-border-radius`, `--m-ap-card-padding`, `--m-ap-card-margin-top`, `--m-ap-card-gap`, `--m-ap-card-box-shadow`	Player card layout.
Player metadata	`--m-ap-badge-font-size`, `--m-ap-badge-font-weight`, `--m-ap-badge-color`, `--m-ap-badge-letter-spacing`, `--m-ap-badge-text-transform`, `--m-ap-title-font-size`, `--m-ap-title-font-weight`, `--m-ap-title-color`	Badge and title presentation.
Player button	`--m-ap-btn-size`, `--m-ap-btn-border-radius`, `--m-ap-btn-bg`, `--m-ap-btn-color`, `--m-ap-btn-hover-transform`, `--m-ap-btn-hover-box-shadow`	Play action appearance.
Player timeline	`--m-ap-font-family-mono`, `--m-ap-time-font-size`, `--m-ap-time-font-weight`, `--m-ap-time-current-color`, `--m-ap-time-duration-color`, `--m-ap-slider-height`, `--m-ap-slider-border-radius`, `--m-ap-slider-track-bg`, `--m-ap-slider-thumb-size`, `--m-ap-slider-thumb-bg`, `--m-ap-slider-thumb-box-shadow`, `--m-ap-slider-thumb-hover-transform`	Time readout and range input.
Motion	`--m-ap-transition-normal`, `--m-ap-transition-fast`	Player transition timing.

Choosing tokens vs templates

Use tokens for visual changes while retaining the accessible built-in structure. Use template slots when the application needs to replace structure or interaction presentation.