UI Customization

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:
1
/* Apply rules to individual elements */
2
passage-auth {
3
  --passage-container-max-width: 220px;
4
  /* ... more variables ... */
5
}
6
​
7
passage-profile {
8
  --passage-container-max-width: 400px;
9
}
10
​
11
/* Globally apply rules to all passage elements (auth, login, register, and profile) */
12
:root {
13
  --passage-primary-color: #000;
14
  /* ... more variables ... */
15
}
Copied!
All variables available for customization and their current default values are shown below:
1
/* Default values shown */
2
​
3
passage-auth {
4
  /* Passage Container Styles */
5
  --passage-container-background: transparent;
6
  --passage-container-max-width: 220px;
7
  --passage-container-margin: auto;
8
  --passage-container-padding: 30px 30px 20px;
9
  --passage-error-color: #ff0000;
10
​
11
  /* Body Font Styles */
12
  --passage-body-font-family: 'DM Sans', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
13
    'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
14
  --passage-body-font-size: 14px;
15
  --passage-body-font-weight: 400;
16
  --passage-body-text-color: #000;
17
​
18
  /* Header Font Styles */
19
  --passage-header-font-family: 'DM Sans', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
20
    'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
21
  --passage-header-font-weight: 700;
22
  --passage-header-text-color: #000;
23
  --passage-header-font-size: 24px;
24
​
25
  /* Button Styles */
26
  --passage-button-font-size: 16px;
27
  --passage-button-font-weight: 400;
28
  --passage-button-width: 50%;
29
  --passage-button-border-radius: 75px;
30
​
31
  /* Color Palette */
32
  --passage-onprimary-color: #fff; /* text color on primary control background */
33
  --passage-primary-color: #000; /* main color used for controls */
34
​
35
  --passage-onhover-color: #fff;
36
  --passage-hover-color: #4d4d4d;
37
​
38
  --passage-onactive-color: #fff;
39
  --passage-active-color: #6b6b6b;
40
​
41
  /* Email and Phone Input Box Styles */
42
  --passage-control-border-radius: 5px;
43
  --passage-control-border-color: #dbdbdb;
44
}
45
​
Copied!
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 deep CSS customization of the text fields and buttons in the elements is possible, including many common psuedo-classes.
1
passage-auth::part(input) {
2
  border-color: #dbdbdb;
3
}
4
passage-auth::part(input):focus {
5
  border-color: #000000;
6
}
Copied!
1
passage-auth::part(button) {
2
  border: 1px solid transparent;
3
}
4
passage-auth::part(button):hover {
5
  border: 1px solid blue;
6
}
Copied!
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.

TypeScript Support

Next - 🧑‍💻 Passage for Web

Custom Logic with Callbacks

Last modified 1mo ago

Copy link

Contents

Advanced Styling with CSS Parts

CSS Playground