Customize With CSS

Learn how to use predefined CSS variables and parts to fully customize the Passage Element UI.

As of passage-elements version 1.11.0, some CSS variables have changed. You may be required to update any previously targeted CSS variables. To see what's changed, follow the migration guide here.

Styling with Predefined CSS Variables

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: 250px;
  /* ... more variables ... */
}

passage-profile {
  --passage-container-max-width: 400px;
}

/* Globally apply rules to all passage elements (auth, login, register, and profile) */
:root {
  --passage-container-background-color: #fffff;
  /* ... more variables ... */
}

Available CSS Variables for Customization

This is the full set of variables that can be used to customize elements. They will apply to and overwrite values for both themes that the element supports by default. To target customizations to just one theme see the docs here.

/* Default values shown */

passage-auth {
    
    /* Passage Container Styles */
    --passage-container-border-radius: 5px;
    --passage-container-background-color: #fff;
    --passage-container-max-width: 300;
    --passage-container-margin: auto;
    --passage-container-padding: 30px 30px 20px;
    --passage-modal-background-color: #fff;

    /* Error Styles */
    --passage-error-color: #dd0031;
    
    /* Header Text 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-size: 24px;
    --passage-header-font-weight: 700;
    --passage-header-text-color: #000;

    /* Body Text 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;

    /* Anchor Styles */
    --passage-anchor-text-color: #000;
    --passage-anchor-hover-color: #4d4d4d;
    --passage-anchor-active-color: #6b6b6b;

    /* One-Time Password Styles */
    --passage-otp-input-background-color: #d7d7d7;

    /* Input Styles */
    --passage-input-text-color: #000;
    --passage-control-border-radius: 5px;
    --passage-control-border-color: #d7d7d7;
    --passage-control-border-active-color: #000;
    --passage-control-border-hover-color: #909090;
    
   /* Text Input Styles */
    --passage-input-box-background-color: #fff;
    --passage-input-box-border-radius: 5px;
    
    /* Checkbox Styles */
    --passage-checkbox-background-color: #000;
    --passage-checkbox-text-color: #fff;

    /* Button Styles */
    --passage-button-font-size: 16px;
    --passage-button-font-weight: 400;
    --passage-button-width: 50%;

    --passage-primary-button-background-color: #000;
    --passage-primary-button-text-color: #fff;
    
    --passage-primary-button-border-radius: 5px;
    --passage-primary-button-border-color: #000;
    --passage-primary-button-border-width: 0px;
    
    --passage-primary-button-text-hover-color: #fff;
    --passage-primary-button-background-hover-color: #4d4d4d;
    --passage-primary-button-border-hover-color: #000;
    
    --passage-primary-button-text-active-color: #fff;
    --passage-primary-button-background-active-color: #6b6b6b;
    --passage-primary-button-border-active-color: #000

    --passage-secondary-button-background-color: #fff;
    --passage-secondary-button-text-color: #000;
    
    --passage-secondary-button-border-radius: 5px;
    --passage-secondary-button-border-color: #000;
    --passage-secondary-button-border-width: 1px;
    
    --passage-secondary-button-text-hover-color: #000;
    --passage-secondary-button-background-hover-color: #d7d7d7;
    --passage-secondary-button-border-hover-color: #4d4d4d;
    
    --passage-secondary-button-text-active-color: #000;
    --passage-secondary-button-background-active-color: #e0e0e0;
    --passage-secondary-button-border-active-color: #6b6b6b;
}

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

Advanced Styling with CSS Parts

Deeper customization that goes beyond simple styling allowed by the CSS variables is possible using CSS part selectors. 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 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.