Komponenten‐Gruppen
Für Komponenten, die ähnliche Eigenschaften teilen, enthält Placer Toolkit benutzerdefinierte Eigenschaften, um das Erscheinungsbild dieser verwandten Komponenten auf einmal zu ändern.
Komponenten wie Input, Select, Textarea und Checkbox teilen eine Reihe von Styles, um deinen Formularen ein einheitliches Erscheinungsbild zu verleihen. Placer Toolkit definiert benutzerdefinierte Eigenschaften für diese Styles im Format --pc-form-control-{style}.
Nicht jedes Formularsteuerelement verwendet alle diese benutzerdefinierten Eigenschaften. Beispielsweise definiert <pc-radio> seine eigene Höhe und Eckenradius, um seine bekannte Form zu erreichen, teilt jedoch viele andere Styles mit anderen Komponenten für ein einheitliches Aussehen und Gefühl. Ähnlich definiert <pc-button> viele eigene Styles, stimmt aber in Höhe und Rahmenbreite mit anderen Formularsteuerelementen überein.
| Benutzerdefinierte Eigenschaft | Standardwert |
|---|---|
--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 bestehen aus Komponenten mit größeren, abgegrenzten Flächen wie Callouts, Cards, Details und Dialogs.
| Benutzerdefinierte Eigenschaft | Standardwert |
|---|---|
--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 werden in der Tooltip‐Komponente verwendet.
| Benutzerdefinierte Eigenschaft | Standardwert |
|---|---|
--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 |