Password Theming

Theming documentation for Password component

Styled#

CSS Classes#

List of class names used in the styled mode.

classNamedescription
p-passwordClass name of the root element

Design Tokens#

List of design tokens.

tokenCSS Variabledescription
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.