Element UI Customization
Customize the look and feel of the Passage Element to match your brand.
The UI for any Passage Element can be customized using CSS variables to modify the default configuration of the Passage Element. To use one or more CSS variables, you can add the variable declarations inside of a style block that will be loaded on the page. You may choose to scope the CSS variables in one of two ways:
/* Apply rules to individual elements */
passage-auth {
--passage-container-max-width: 220px;
/* ... more variables ... */
}
passage-profile {
--passage-container-max-width: 400px;
}
/* Globally apply rules to all passage elements (auth, login, register, and profile) */
:root {
--passage-primary-color: #000;
/* ... more variables ... */
}
All variables available for customization and their current default values are shown below:
/* Default values shown */
passage-auth {
/* Passage Container Styles */
--passage-container-background: transparent;
--passage-container-background-color: #ffffff;
--passage-container-max-width: 220px;
--passage-container-margin: auto;
--passage-container-padding: 30px 30px 20px;
--passage-error-color: #ff0000;
/* Body Font Styles */
--passage-body-font-family: 'DM Sans', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
--passage-body-font-size: 14px;
--passage-body-font-weight: 400;
--passage-body-text-color: #000;
/* Header Font Styles */
--passage-header-font-family: 'DM Sans', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
--passage-header-font-weight: 700;
--passage-header-text-color: #000;
--passage-header-font-size: 24px;
/* Button Styles */
--passage-button-font-size: 16px;
--passage-button-font-weight: 400;
--passage-button-width: 50%;
--passage-button-border-radius: 75px;
/* Color Palette */
--passage-onprimary-color: #fff; /* text color on primary control background */
--passage-primary-color: #000; /* main color used for controls */
--passage-onhover-color: #fff;
--passage-hover-color: #4d4d4d;
--passage-onactive-color: #fff;
--passage-active-color: #6b6b6b;
/* Email and Phone Input Box Styles */
--passage-control-border-radius: 5px;
--passage-control-border-color: #dbdbdb;
}
Deeper customization that goes beyond simple styling allowed by the CSS variables is possible using CSS part selectors. The elements have two style-able parts - the buttons and the text input fields. Using the CSS
::part() selectors allows for deep CSS customization of the text fields and buttons in the elements, including many common pseudo-classes.passage-auth::part(input) {
border-color: #dbdbdb;
}
passage-auth::part(input):focus {
border-color: #000000;
}
passage-auth::part(button) {
border: 1px solid transparent;
}
passage-auth::part(button):hover {
border: 1px solid blue;
}
There are a lot of variables that you can configure to ensure Passage looks exactly how you want. The CodePen below has the default values for Passage styling set. Use this CodePen to play around and see how you can customize the Passage Elements.
See how to make changes to the Passage Element UI and experiment with your own branding.
Last modified 3mo ago