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: 'Helvetica', 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: 'Helvetica', 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;
}

passage-profile,
passage-passkey-table{
  /* All passage-auth styles still apply */
  
  /* Table Styles */
  --passage-table-header-border-color: #d7d7d7;
  --passage-table-row-hover-color: #e0e0e0;
  --passage-table-row-border-color: #e8e8e8;
  --passage-table-paginator-selected-color: #d7d7d7;
  --passage-table-paginator-hover-color: #e8e8e8;
}

Advanced Styling with CSS Parts

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;
}

Styling the Profile Table

The <passage-profile> and <passage-passkey-table> elements contain a table that can be deeply styled using CSS parts. The table is a standard HTML table and each component has a specific CSS part that can be used to style that element of the HTML table. The full list of supported parts are:

::part(passage-table) // The root <table> element
::part(passage-table-header-row) // <tr> for header row 
::part(passage-table-header-cell) // <th> for header row 
::part(passage-table-row) // <tr>
::part(passage-table-cell) // <td>
::part(passage-table-expansion-row) // <tr> for expanded row 
::part(paginator-button) // the <div> element for each button in the paginator

CSS Playground

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.