Global theming
CSS properties for theming the entire Puck user interface.
.Container {
--puck-color-interactive: #0f5fff;
--puck-color-focus-ring: #3b82f6;
}Colors
| Token | Default | Used for |
|---|---|---|
--puck-color-surface | #ffffff | Panel, field and menu backgrounds |
--puck-color-surface-muted | #f5f5f5 | Canvas and disabled field backgrounds |
--puck-color-surface-subtle | #fafafa | App layout, sidebar and toolbar backgrounds |
--puck-color-surface-inverse | #181818 | Action bar background |
--puck-color-border | #dcdcdc | Default borders and dividers |
--puck-color-border-hover | #767676 | Input border on hover and focus |
--puck-color-border-muted | #efefef | Subtle dividers and separators |
--puck-color-border-inverse | #767676 | Separators on inverse surfaces |
--puck-color-text | #000000 | Default body and field text |
--puck-color-text-secondary | #5a5a5a | Field labels and disabled field text |
--puck-color-text-muted | #767676 | Drawer categories, drag handles and zone labels |
--puck-color-text-subtle | #ababab | Disabled icons, loaders and helper text |
--puck-color-text-inverse | #ffffff | Text on inverse and primary surfaces |
--puck-color-interactive | #0158ad | Primary actions, links and active states |
--puck-color-interactive-hover | #014292 | Links and primary button hover |
--puck-color-interactive-active | #002c77 | Links and primary button active |
--puck-color-interactive-subtle | #e7eef7 | Active plugin bar, category and outline backgrounds |
--puck-color-interactive-soft | #f3f6fb | Secondary button and selected item backgrounds |
--puck-color-interactive-soft-hover | #f7faff | Row and item hover backgrounds |
--puck-color-interactive-neutral-hover | #efefef | Icon button hover background |
--puck-color-interactive-inverse-hover | #6499cf | Interactive hover color on inverse surfaces |
--puck-color-interactive-inverse-active | #88b0da | Interactive active color on inverse surfaces |
--puck-color-focus-ring | #3479be | Keyboard focus outlines |
--puck-color-selection-bg | color-mix(in srgb, #cfdff0 30%, transparent) | Slot, drop zone and selected overlay background |
--puck-color-selection-border | #abc7e5 | Selected and drop zone outline borders |
--puck-color-highlight | #d89aba | Outline layer icons and decorative accents |
--puck-color-bg-disabled | #ababab | Disabled button background |
--puck-color-text-disabled | #404040 | Disabled button text |
--puck-color-overlay-backdrop | color-mix(in srgb, #000000 75%, transparent) | Modal backdrop |
Opacity
| Token | Default | Used for |
|---|---|---|
--puck-opacity-text-inverse | 0.75 | Action bar label opacity |
Spacing
| Token | Default | Used for |
|---|---|---|
--puck-space-1 | 4px | Small gaps, padding and margins throughout |
--puck-space-2 | 8px | Medium spacing in buttons, plugin bar and menus |
--puck-space-3 | 12px | Default field padding and drawer items |
--puck-space-4 | 16px | Large panel, section and field padding |
--puck-space-5 | 24px | External input panels and slot indicator height |
--puck-space-chrome-gutter | var(--puck-space-4) | Header and canvas gutter padding |
Radius
| Token | Default | Used for |
|---|---|---|
--puck-radius-none | 0 | Square-cornered plugin bar tabs and button variants |
--puck-radius-xs | 2px | Breadcrumb and sidebar section hover chips |
--puck-radius-s | 3px | Radius scale step, not currently consumed |
--puck-radius-m | 4px | Default radius for buttons, fields and controls |
--puck-radius-l | 8px | Action bar, modal and select dropdown |
--puck-radius-pill | 30px | Viewport size control buttons |
--puck-radius-round | 100% | Loader spinner ring |
Border Width
| Token | Default | Used for |
|---|---|---|
--puck-border-width-hairline | 0.5px | Action bar and rich text menu dividers |
--puck-border-width-regular | 1px | Default borders and outlines across UI |
--puck-border-width-focus | 2px | Focus ring outlines and drop zone outlines |
--puck-border-width-strong | 4px | Plugin bar active tab and accent borders |
Motion
| Token | Default | Used for |
|---|---|---|
--puck-duration-fast | 50ms | Hover and focus transitions across UI controls |
--puck-duration-medium | 150ms | Layout, sidebar and slot resize transitions |
--puck-duration-slow | 250ms | Canvas fade-in transition |
--puck-ease-exit | ease-in | Easing for most hover and collapse transitions |
--puck-ease-emphasized | ease-in-out | Easing for viewport controls slide |
--puck-ease-entrance | ease-out | Easing for canvas and sidebar entrance |
Typography
| Token | Default | Used for |
|---|---|---|
--puck-font-family | Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol | Default editor UI font family |
--puck-font-family-monospaced | ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace | Header path display font |
--puck-font-weight-regular | 400 | Default button font weight |
--puck-font-weight-medium | 500 | Active fields, labels and action bar |
--puck-font-weight-semibold | 600 | Field labels, plugin bar items and headers |
--puck-font-weight-bold | 700 | Heading component text |
--puck-font-weight-heavy | 800 | Largest heading variant |
--puck-letter-spacing-ui | 0.05ch | Button label letter spacing |
--puck-letter-spacing-heading | 0.08ch | Largest heading letter spacing |
--puck-space-m-unitless | 24 | Referenced by line-height calculations only |
Icon Size
| Token | Default | Used for |
|---|---|---|
--puck-icon-size-s | 16px | Action bar and inline control icons |
--puck-icon-size-m | 18px | Select and rich text menu icons |
--puck-icon-size-l | 24px | Icon size scale step, not currently consumed |
Functional
| Token | Default | Used for |
|---|---|---|
--puck-slot-min-empty-height | 128px | Minimum height of empty slots |
--puck-user-sidebar-left-width | 186px–320px (responsive) | User override for left sidebar width |
--puck-user-sidebar-right-width | 186px–320px (responsive) | User override for right sidebar width |