Outline
Use the following CSS properties for theming the outline (layers) panel.
.Container {
--puck-outline-color-bg-selected: #f0f0f0;
--puck-outline-color-border-selected: #b947ff;
}CSS properties
Defaults shown as var(--puck-...) reference global tokens. See computed values for the values they resolve to.
| Token | Default | Description |
|---|---|---|
--puck-outline-color-text | var(--puck-color-text-secondary) | Layer label text color |
--puck-outline-color-text-hover | var(--puck-color-interactive) | Zone label color when targeted by a drag |
--puck-outline-color-text-helper | var(--puck-color-text-subtle) | Empty-zone helper text color |
--puck-outline-color-icon | var(--puck-color-text-subtle) | Layer icon color |
--puck-outline-color-bg-hover | var(--puck-color-interactive-soft) | Layer background on hover |
--puck-outline-color-border-hover | var(--puck-color-interactive-subtle) | Layer border color on hover |
--puck-outline-color-bg-selected | var(--puck-color-interactive-subtle) | Selected layer background |
--puck-outline-color-border-selected | var(--puck-color-selection-border) | Selected layer border color |
--puck-outline-color-drop-indicator | var(--puck-color-line-placeholder) | Drag-and-drop line indicator color |
--puck-outline-border-width | var(--puck-border-width-regular) | Layer border width |
--puck-outline-radius | var(--puck-radius-m) | Layer border radius |
--puck-outline-font-size | var(--puck-font-size-xxxs) | Layer label font size |
--puck-outline-font-family | var(--puck-font-family-monospaced) | Layer tree font family |
--puck-outline-icon-size | var(--puck-icon-size-xs) | Layer and zone icon size |
--puck-outline-action-size | var(--puck-icon-size-s) | Expand caret and row action icon size |
--puck-outline-space-indent | var(--puck-space-3) | Indentation per nesting level |
--puck-outline-zone-color-text | var(--puck-color-text-muted) | Nested-zone label and icon color |
--puck-outline-zone-font-size | calc(var(--puck-font-size-xxxs) * 0.9) | Nested-zone label font size |