API ReferenceThemingComputed values

Component computed values

These tables document the default computed value each component token resolves to with the default global theme tokens.

Action bar

Token	Computed default value
`--puck-actionbar-color-bg`	`#181818`
`--puck-actionbar-color-text`	`#ffffff`
`--puck-actionbar-opacity-text`	`0.75`
`--puck-actionbar-color-separator`	`#767676`
`--puck-actionbar-color-action-hover`	`#6499cf`
`--puck-actionbar-color-action-active`	`#88b0da`
`--puck-actionbar-color-action-disabled`	`#ffffff`
`--puck-actionbar-opacity-action-disabled`	`0.54`
`--puck-actionbar-space-y`	`4px`
`--puck-actionbar-space-x`	`0`
`--puck-actionbar-radius`	`8px`
`--puck-actionbar-font-size`	`0.75rem` (`12px`)
`--puck-actionbar-action-space`	`6px`
`--puck-actionbar-action-size`	`16px`

Token	Computed default value
`--puck-button-radius`	`4px`
`--puck-button-medium-space-y`	`calc(8px - 1px)` (`7px`)
`--puck-button-medium-space-x`	`calc(20px - 1px)` (`19px`)
`--puck-button-medium-font-weight`	`400`
`--puck-button-medium-font-size`	`0.875rem` (`14px`)
`--puck-button-large-space-y`	`calc(12px - 1px)` (`11px`)
`--puck-button-large-space-x`	`calc(20px - 1px)` (`19px`)
`--puck-button-large-font-weight`	`400`
`--puck-button-large-font-size`	`0.875rem` (`14px`)
`--puck-button-primary-color-bg`	`#0158ad`
`--puck-button-primary-color-bg-hover`	`#014292`
`--puck-button-primary-color-bg-active`	`#002c77`
`--puck-button-primary-color-text`	`#ffffff`
`--puck-button-primary-color-border`	`transparent`
`--puck-button-primary-color-bg-disabled`	`#ababab`
`--puck-button-primary-color-text-disabled`	`#404040`
`--puck-button-secondary-color-bg`	`transparent`
`--puck-button-secondary-color-bg-hover`	`#f3f6fb`
`--puck-button-secondary-color-bg-active`	`#f3f6fb`
`--puck-button-secondary-color-text`	`currentColor`
`--puck-button-secondary-color-border`	`currentColor`
`--puck-button-secondary-color-bg-disabled`	`#ababab`
`--puck-button-secondary-color-text-disabled`	`#404040`

Token	Computed default value
`--puck-drawer-space`	`16px`
`--puck-drawer-category-color-text`	`#767676`
`--puck-drawer-category-color-bg-hover`	`#f3f6fb`
`--puck-drawer-category-color-text-hover`	`#0158ad`
`--puck-drawer-category-color-bg-active`	`#e7eef7`
`--puck-drawer-category-font-size`	`0.75rem` (`12px`)
`--puck-drawer-category-space`	`8px`
`--puck-drawer-item-color-bg`	`#ffffff`
`--puck-drawer-item-color-text`	`#000000`
`--puck-drawer-item-color-border`	`#dcdcdc`
`--puck-drawer-item-border-width`	`1px`
`--puck-drawer-item-color-bg-hover`	`#f7faff`
`--puck-drawer-item-color-text-hover`	`#0158ad`
`--puck-drawer-item-radius`	`4px`
`--puck-drawer-item-font-size`	`0.875rem` (`14px`)
`--puck-drawer-item-space`	`12px`

Token	Computed default value
`--puck-field-color-surface`	`#ffffff`
`--puck-field-color-bg`	`#ffffff`
`--puck-field-color-bg-hover`	`#f7faff`
`--puck-field-color-bg-active`	`#f3f6fb`
`--puck-field-color-text`	`#000000`
`--puck-field-color-text-hover`	`#000000`
`--puck-field-color-text-active`	`#0158ad`
`--puck-field-color-border`	`#dcdcdc`
`--puck-field-color-border-hover`	`#767676`
`--puck-field-color-border-focus`	`#3479be`
`--puck-field-color-border-dragging`	`#abc7e5`
`--puck-field-color-bg-disabled`	`#f5f5f5`
`--puck-field-color-border-disabled`	`#dcdcdc`
`--puck-field-color-text-disabled`	`#5a5a5a`
`--puck-field-border-width`	`1px`
`--puck-field-radius`	`4px`
`--puck-field-font-size`	`0.875rem` (`14px`)
`--puck-field-space-x`	`calc(16px - 1px)` (`15px`)
`--puck-field-space-y`	`12px`
`--puck-field-space-surface-x`	`calc(16px - 1px)` (`15px`)
`--puck-field-space-surface-y`	`16px`
`--puck-field-label-color-text`	`#5a5a5a`
`--puck-field-label-space-y`	`12px`
`--puck-field-label-font-size`	`0.875rem` (`14px`)
`--puck-field-label-font-weight`	`600`
`--puck-field-label-color-icon`	`#ababab`
`--puck-field-array-add-color-icon`	`#0158ad`
`--puck-field-richtext-menu-color-bg`	`#fafafa`
`--puck-field-richtext-menu-color-separator`	`#efefef`
`--puck-field-richtext-menu-space-x`	`6px`
`--puck-field-richtext-menu-space-y`	`6px`
`--puck-field-external-detach-color-bg`	`#fafafa`
`--puck-field-external-detach-color-text`	`#767676`

Token	Computed default value
`--puck-header-color-bg`	`#ffffff`
`--puck-header-color-text`	`#000000`

Token	Computed default value
`--puck-iconbutton-radius`	`4px`
`--puck-iconbutton-space`	`4px`
`--puck-iconbutton-color-bg`	`transparent`
`--puck-iconbutton-color-bg-hover`	`#efefef`
`--puck-iconbutton-color-bg-active`	`#f3f6fb`
`--puck-iconbutton-color-icon`	`currentColor`
`--puck-iconbutton-color-icon-hover`	`#0158ad`
`--puck-iconbutton-color-icon-active`	`#0158ad`
`--puck-iconbutton-color-icon-disabled`	`#ababab`

Token	Computed default value
`--puck-outline-color-text`	`#5a5a5a`
`--puck-outline-color-icon`	`#d89aba`
`--puck-outline-color-bg-hover`	`#f3f6fb`
`--puck-outline-color-text-hover`	`#0158ad`
`--puck-outline-color-border-hover`	`#e7eef7`
`--puck-outline-color-bg-selected`	`#e7eef7`
`--puck-outline-color-border-selected`	`#abc7e5`
`--puck-outline-border-width`	`1px`
`--puck-outline-radius`	`4px`
`--puck-outline-font-size`	`0.875rem` (`14px`)
`--puck-outline-zone-color-text`	`#767676`
`--puck-outline-zone-font-size`	`0.75rem` (`12px`)

Token	Computed default value
`--puck-pluginbar-color-bg`	`#fafafa`
`--puck-pluginbar-color-bg-hover`	`#f3f6fb`
`--puck-pluginbar-color-text`	`#5a5a5a`
`--puck-pluginbar-color-text-hover`	`#0158ad`
`--puck-pluginbar-color-text-selected`	`#0158ad`
`--puck-pluginbar-font-size`	`0.75rem` (`12px`)

Token	Computed default value
`--puck-sidebar-left-color-bg`	`#fafafa`
`--puck-sidebar-right-color-bg`	`#ffffff`

Token	Computed default value
`--puck-slot-color-bg`	`color-mix(in srgb, #cfdff0 30%, transparent)`
`--puck-slot-color-border`	`#abc7e5`
`--puck-slot-border-width`	`2px`
`--puck-slot-border-style`	`dashed`
`--puck-slot-component-color-overlay`	`color-mix(in srgb, #cfdff0 30%, transparent)`
`--puck-slot-component-color-overlay-border`	`#abc7e5`
`--puck-slot-component-border-width`	`2px`
`--puck-slot-component-color-border-selected`	`#abc7e5`
`--puck-slot-component-color-placeholder`	`#6499cf`
`--puck-slot-component-color-border-dragging`	`#cfdff0`