Wiz'rd

Component Overrides

System tier — override tokens for individual components. Each component has system tokens (e.g. button padding, input radius) that default to alias values. Overriding a token here only affects that specific component, without changing the global alias.

Component

Component

Preview

Content for the first section.

System Tokens

Change a value to override the default. Overrides emit as system-tier CSS variables.

accordion-border-width

(border-width)

default

accordion-trigger-padding-x

(spacing)

default

accordion-trigger-padding-y

(spacing)

default

accordion-trigger-font-size

(font-size)

default

accordion-panel-padding-x

(spacing)

default

accordion-panel-padding-y

(spacing)

default

accordion-indicator-size

(sizing)

default

Surface Colours

accordion-trigger-surface-default

default

accordion-trigger-on-surface-default

default

Live Preview

Display Large

Display Medium

Display Small

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Large body text for lead paragraphs.

Default body text in the surface colour.

Small text for captions and secondary content.

Extra-small text for fine print and labels.

Muted text for supporting information.

Code

const theme = createTheme(tokens);

export default theme;

Buttons

Badges

PrimarySuccessDangerWarningInfo

Inputs

Toggle

Radio Group

Box / Card

Elevated box with medium radius and padding.

Alerts

Informational message.
Success message.

Avatars

Accordion

Content for the first accordion section.

Link

Default linkSmall link

Breadcrumb

Tabs

Overview panel content.

Separator

Horizontal separator shown above and below.

Slider

Progress & Skeleton