Themes and finishes

A theme combines color, typography and a shared control finish. Control sizes and shapes remain independent: a large cutoff knob and a small trim knob can share the same cap treatment, accent and label style.

Palette and finish

The palette defines semantic --uikit-* CSS variables. A finish adds the control skin, radii and frame elevation. ControlSkinProvider supplies the same skin to knobs, faders and switches without requiring a new component for every possible combination.

import { ControlSkinProvider } from "@maruaudio/ui-kit/registry/lib/control-skin/control-skin-context"
import { Knob } from "@maruaudio/ui-kit/registry/ui/knob/knob"
import { Fader } from "@maruaudio/ui-kit/registry/ui/fader/fader"

<ControlSkinProvider skin="flat">
  <section className="my-plugin-face">
    <Knob label="Cutoff" size={76} defaultValue={0.6} />
    <Knob label="Drive" size={40} defaultValue={0.2} />
    <Fader label="Output" defaultValue={0.75} />
  </section>
</ControlSkinProvider>

Keep the theme inside the face

Apply the exported CSS variables to your face wrapper. Website navigation, dialogs and document chrome retain their own site theme. Explicit component variants can override an inherited skin, so use them deliberately when building a cohesive family.

Save and reuse a style

Open the playground, edit tokens and choose Get code. Copy preset exports a version 1 recipe; Open preset validates and restores that recipe. The recipe records the palette, skin, frame treatment and selected examples.