Plugin bar
Use the following CSS properties for theming the plugin bar.
.Container {
--puck-pluginbar-color-bg: #1e293b;
--puck-pluginbar-color-text: #94a3b8;
--puck-pluginbar-color-text-selected: #f8fafc;
}CSS properties
Defaults shown as var(--puck-...) reference global tokens. See computed values for the values they resolve to.
| Token | Default | Description |
|---|---|---|
--puck-pluginbar-color-bg | var(--puck-color-surface-subtle) | Background color |
--puck-pluginbar-color-bg-hover | var(--puck-color-interactive-soft) | Tab background on hover |
--puck-pluginbar-color-text | var(--puck-color-text-secondary) | Item text color |
--puck-pluginbar-color-text-hover | var(--puck-color-interactive) | Item text color on hover |
--puck-pluginbar-color-text-selected | var(--puck-color-interactive) | Selected item text color |
--puck-pluginbar-font-size | var(--puck-font-size-xxxs) | Item font size |