Skip to main content
components

Theme Setup

Edit shared tokens once, customize light and dark palettes, and export only your intentional overrides. Empty fields inherit library defaults.

Package@g4rcez/componentsSectiontheming
EditingLight uses :root (default); dark uses html.dark.

Shared tokens belong to default and apply in both modes. Default color overrides also apply in dark unless you override them there. Component palettes are independent; changing primary does not recolor every component.

Preview · dark

Built-in palette with your shared and theme overrides.

dark
Buttons
Tags
primaryinfosuccesswarndangerneutralsecondarymuted
Alerts

Primary

Primary alert surface.

Info

Informational alert.

Success

All systems nominal.

Neutral

Default neutral surface.

Surfaces
Card surface

Surface colors can be edited independently in components.card.

Active users

12,480

Revenue

$12,480

Empty state

Nothing here yet

Form controls

Upload

x

Render

x
ctrl+kshift+entercmd+shift+p
Navigation

The tab content surface inherits from card-background.

Timeline
  • Shipped v1

    Initial release rolled out to all customers.

  • Public beta

    Opened the waitlist to the broader audience.

  • Kickoff

    Team aligned on milestones and goals.

Skeleton
Typography

Caption · text-typography-xs

Small · text-typography-sm

Body · text-typography-base

Lead · text-typography-lg

Section · text-typography-2xl

Display · text-typography-4xl

Scoped preview: overlays portaled outside this panel inherit the site theme, not these local overrides.
33
15
10
9
12
4
5
6
2
3
2
1
5
1
3
5
4
5
1
3
4
4
19
3
6