Password Theming
Theming documentation for Password component
Styled#
CSS Classes#
List of class names used in the styled mode.
| className | description |
|---|---|
| p-password | Class name of the root element |
Design Tokens#
List of design tokens.
| token | CSS Variable | description |
|---|---|---|
| password.meter.background | --p-password-meter-background | Background of meter |
| password.meter.border.radius | --p-password-meter-border-radius | Border radius of meter |
| password.meter.height | --p-password-meter-height | Height of meter |
| password.icon.color | --p-password-icon-color | Color of icon |
| password.overlay.background | --p-password-overlay-background | Background of overlay |
| password.overlay.border.color | --p-password-overlay-border-color | Border color of overlay |
| password.overlay.border.radius | --p-password-overlay-border-radius | Border radius of overlay |
| password.overlay.color | --p-password-overlay-color | Color of overlay |
| password.overlay.padding | --p-password-overlay-padding | Padding of overlay |
| password.overlay.shadow | --p-password-overlay-shadow | Shadow of overlay |
| password.content.gap | --p-password-content-gap | Gap of content |
| password.meter.text.font.weight | --p-password-meter-text-font-weight | Font weight of meter text |
| password.meter.text.font.size | --p-password-meter-text-font-size | Font size of meter text |
| password.strength.weak.background | --p-password-strength-weak-background | Weak background of strength |
| password.strength.medium.background | --p-password-strength-medium-background | Medium background of strength |
| password.strength.strong.background | --p-password-strength-strong-background | Strong background of strength |
Unstyled#
Theming is implemented with the pass through properties in unstyled mode.