Slot
Use the following CSS properties for theming slots (drop zones) and the components dragged within them.
.Container {
--puck-slot-color-bg: #fff2ee;
--puck-slot-color-border: #f6ab3b;
}CSS properties
Defaults shown as var(--puck-...) reference global tokens. See computed values for the values they resolve to.
| Token | Default | Description |
|---|---|---|
--puck-slot-color-bg | var(--puck-color-selection-bg) | Drop zone background when active |
--puck-slot-color-border | var(--puck-color-selection-border) | Drop zone outline color |
--puck-slot-border-width | var(--puck-border-width-focus) | Drop zone outline width |
--puck-slot-border-style | dashed | Drop zone outline style |
--puck-slot-component-color-overlay | var(--puck-color-selection-bg) | Component overlay background on hover |
--puck-slot-component-color-overlay-border | var(--puck-color-selection-border) | Component overlay outline |
--puck-slot-component-border-width | var(--puck-border-width-focus) | Component overlay outline width |
--puck-slot-component-color-border-selected | var(--puck-color-selection-border) | Selected component overlay outline |
--puck-slot-component-color-placeholder | #6499cf | Drag placeholder background |
--puck-slot-component-color-border-dragging | #cfdff0 | Outline while dragging component |