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-icon | var(--puck-color-highlight) | Layer icon color |
--puck-outline-color-bg-hover | var(--puck-color-interactive-soft) | Layer background on hover |
--puck-outline-color-text-hover | var(--puck-color-interactive) | Layer text color 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-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-xxs) | Layer label font size |
--puck-outline-zone-color-text | var(--puck-color-text-muted) | Nested-zone label and icon color |
--puck-outline-zone-font-size | var(--puck-font-size-xxxs) | Nested-zone label font size |