Star

Theme tokens

Everything in Zyra UI is a CSS custom property. Override any token in :root after the import — no forking a theme file, no !important.

How tokens are organised

Tokens are split into four tiers. Each tier references the one above it — change a token high up and everything below it updates automatically.

  • Tier 0

    Primitives

    Raw color palette — every shade in the design system.

    --zyra-color-violet-600

    Never override. Internal building blocks only.

  • Tier 1

    Dimension

    Spacing, radius, fonts, motion. Identical across all themes.

    --zyra-radius-md

    Override to change corner radius, font, or spacing globally.

  • Tier 2

    Semantic

    Named by role, not color. These are the public theming API.

    --zyra-color-primary

    Override to rebrand the whole app in one place.

  • Tier 3

    Component

    Per-component slots that point to Tier 2. Scoped to one component.

    --zyra-color-btn-primary-bg

    Override to restyle one component without touching anything else.

How to override

Add this to your styles.scss after @use 'zyra-ng-ui'. Any token you set here wins the cascade for the whole app. 

/* styles.scss — paste after @use 'zyra-ng-ui' */
:root {
  --zyra-color-primary:        #7c3aed;
  --zyra-color-primary-hover:  #6d28d9;
  --zyra-color-primary-subtle: #ede9fe;
  --zyra-radius-md:            6px;
  --zyra-font-body:            'Inter', sans-serif;
}

Color tokens

These update live as you switch themes. Override any of them in :root and every component that uses that role follows automatically.

Background--zyra-color-background
Background elevated--zyra-color-background-elevated
Surface--zyra-color-surface
Surface subtle--zyra-color-surface-subtle
Surface inset--zyra-color-surface-inset
Foreground--zyra-color-foreground
Foreground muted--zyra-color-foreground-muted
Foreground subtle--zyra-color-foreground-subtle
Primary--zyra-color-primary
Primary hover--zyra-color-primary-hover
Primary subtle--zyra-color-primary-subtle
Border--zyra-color-border-color
Border strong--zyra-color-border-strong-color
Success--zyra-color-success-foreground
Success subtle--zyra-color-success-subtle
Warning--zyra-color-warning-foreground
Warning subtle--zyra-color-warning-subtle
Danger--zyra-color-danger-foreground
Danger subtle--zyra-color-danger-subtle
Info--zyra-color-info-foreground
Info subtle--zyra-color-info-subtle
Purple--zyra-color-purple-foreground
Purple subtle--zyra-color-purple-subtle
Surface (code)--zyra-color-surface-code
On brand--zyra-color-on-brand
On warning--zyra-color-on-warning
Focus ring--zyra-ring

Shape & font tokens

These are the same across all themes — override them to change corner radius, typography, spacing, or motion globally.

Border radius

--zyra-radius-xs--zyra-radius-sm--zyra-radius-md--zyra-radius-lg--zyra-radius-xl--zyra-radius-2xl--zyra-radius-full

Font families

--zyra-font-body--zyra-font-display--zyra-font-mono

Spacing scale

--zyra-space-1--zyra-space-2--zyra-space-3--zyra-space-4--zyra-space-5--zyra-space-6--zyra-space-8--zyra-space-10--zyra-space-12--zyra-space-16

Motion

--zyra-transition-fast--zyra-transition-base--zyra-transition-slow--zyra-transition-spring
🔩

Need to restyle one specific component?

Each component has its own tokens listed on its doc page — override just those and nothing else in your app changes. Browse components →