Foundations
Design tokens
Components reference semantic tokens only — none define raw colours of their own. Remapping the semantic layer restyles the entire library.
Neutral ramp
Every surface and text colour resolves to one of these.
--tz-neutral-0
--tz-neutral-50
--tz-neutral-100
--tz-neutral-150
--tz-neutral-200
--tz-neutral-300
--tz-neutral-400
--tz-neutral-500
--tz-neutral-600
--tz-neutral-700
--tz-neutral-800
--tz-neutral-900
Semantic colour
What components actually reference. Remap these to rebrand the library.
--tz-bg
--tz-surface
--tz-surface-raised
--tz-surface-sunken
--tz-accent
--tz-accent-strong
--tz-on-accent
--tz-text
--tz-text-muted
--tz-text-subtle
--tz-border
--tz-danger
--tz-focus
Radii
| Token | Value |
|---|---|
| --tz-radius-sm | 6px |
| --tz-radius-md | 10px |
| --tz-radius-lg | 14px |
| --tz-radius-xl | 20px |
| --tz-radius-2xl | 28px |
| --tz-radius-full | 999px |
Duration
| Token | Value |
|---|---|
| --tz-duration-instant | 80ms |
| --tz-duration-fast | 140ms |
| --tz-duration-normal | 220ms |
| --tz-duration-slow | 360ms |
| --tz-duration-slower | 560ms |
Easing
| Token | Value |
|---|---|
| --tz-ease-out | cubic-bezier(0.22, 1, 0.36, 1) |
| --tz-ease-in-out | cubic-bezier(0.65, 0, 0.35, 1) |
| --tz-ease-back | cubic-bezier(0.34, 1.56, 0.64, 1) |
Spacing
| Token | Value |
|---|---|
| --tz-space-1 | 0.25rem |
| --tz-space-2 | 0.5rem |
| --tz-space-3 | 0.75rem |
| --tz-space-4 | 1rem |
| --tz-space-6 | 1.5rem |
| --tz-space-8 | 2rem |
| --tz-space-12 | 3rem |
| --tz-space-16 | 4rem |
Theming
A dark theme ships with the library. Set data-tz-theme="dark" on any ancestor and every descendant re-resolves through the semantic layer.
/* Rebrand by overriding the semantic layer only. */
:root {
--tz-accent: #4f46e5;
--tz-accent-strong: #4338ca;
--tz-on-accent: #ffffff;
--tz-radius-lg: 18px;
}
/* Scope a dark region. */
<section data-tz-theme="dark">
<SquishButton>Inverted</SquishButton>
</section>