Component groups
For components that share similar qualities, Placer Toolkit includes custom properties to change the appearance of these related components all at once.
Form controls#
Components such as Input, Select, Textarea and Checkbox share a number of styles to give your forms a cohesive appearance. Placer Toolkit defines custom properties for these styles using the --pc-form-control-{style} format.
Not every form control uses all of these custom properties. For example, <pc-radio> defines its own height and border radius to achieve its familiar shape but shares many other styles with other components for a cohesive look and feel. Similarly, <pc-button> defines many of its own styles but matches the height and border width of other form controls.
| Custom property | Default value |
|---|---|
--pc-form-control-background-color | var(--pc-color-surface-default) |
--pc-form-control-border-width | var(--pc-border-width-s) |
--pc-form-control-border-style | var(--pc-border-style) |
--pc-form-control-border-color | var(--pc-color-neutral-border-loud) |
--pc-form-control-border-radius | var(--pc-border-radius-m) |
--pc-form-control-activated-color | var(--pc-color-primary-fill-loud) |
--pc-form-control-label-color | var(--pc-color-text-normal) |
--pc-form-control-label-font-weight | var(--pc-font-weight-medium) |
--pc-form-control-label-line-height | var(--pc-line-height-dense) |
--pc-form-control-value-color | var(--pc-color-text-normal) |
--pc-form-control-value-font-weight | var(--pc-font-weight-normal) |
--pc-form-control-value-line-height | var(--pc-line-height-dense) |
--pc-form-control-hint-color | var(--pc-color-text-quiet) |
--pc-form-control-hint-font-weight | var(--pc-font-weight-normal) |
--pc-form-control-hint-line-height | var(--pc-line-height-normal) |
--pc-form-control-placeholder-color | var(--pc-color-neutral-50) |
--pc-form-control-required-content | "*" |
--pc-form-control-required-content-offset | 0.125em |
--pc-form-control-required-content-color | var(--pc-color-danger-60) |
--pc-form-control-padding-block | 0.6em |
--pc-form-control-padding-inline | 0.85em |
--pc-form-control-height | round(calc(2 * var(--pc-form-control-padding-block) + 1em * var(--pc-form-control-value-line-height)), 1px) |
--pc-form-control-toggle-size | round(1.25em, 1px) |
Panels#
Panels consist of components with larger, contained surface areas like callouts, cards, details and dialogs.
| Custom property | Default value |
|---|---|
--pc-panel-border-style | var(--pc-border-style) |
--pc-panel-border-width | var(--pc-border-width-s) |
--pc-panel-border-radius | var(--pc-border-radius-l) |
Tooltips#
Tooltip styles are used in the Tooltip component.
| Custom property | Default value |
|---|---|
--pc-tooltip-border-radius | var(--pc-border-radius-s) |
--pc-tooltip-background-color | var(--pc-color-neutral-fill-normal) |
--pc-tooltip-color | var(--pc-color-text-normal) |
--pc-tooltip-font-family | var(--pc-font-sans) |
--pc-tooltip-font-weight | var(--pc-font-weight-medium) |
--pc-tooltip-font-size | var(--pc-font-size-s) |
--pc-tooltip-line-height | var(--pc-line-height-dense) |
--pc-tooltip-padding | var(--pc-spacing-xs) var(--pc-spacing-s) |
--pc-tooltip-arrow-size | 0.375rem |