Component groups
For components that share similar qualities, Placer Toolkit includes custom properties to change the appearance of these related components all at once.
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 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) |
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 |