Customization

9 min read

Introduction

Footprint supports visual customization, allowing you to match the design of your product with the appearance option. It's available in all SDKs (javascript, react and react-native).

Customize it

javascript

const appearance = {
  theme: 'light',
  publicKey: 'ob_test_VMooXd04EUlnu3AvMYKjMW'
};

footprint.open({ appearance, publicKey });

Click here to checkout a project example.

Themes

You'll need to pick one theme to extend it. We offer two themes: light and dark. If you don't provide any themes, the light theme will be used by default.

typescript

import footprint from '@onefootprint/footprint-js';

const publicKey = 'ob_test_VMooXd04EUlnu3AvMYKjMW';
const appearance = {
  theme: 'dark',
};

footprint.open({ publicKey, appearance });

Variables

The easiest way to create custom themes is by extending the theme variables. Under the hood, they are just CSS variables, so you can inspect the resulting DOM using the DOM explorer in your browser. Scroll down to see the full list of variables.

Properties can be set using the unit that you prefer: pixels, rem, hex, rgb, etc.

typescript

import footprint from '@onefootprint/footprint-js';

const publicKey = 'ob_test_VMooXd04EUlnu3AvMYKjMW';
const appearance = {
  theme: 'dark',
  variables: {
    borderRadius: '0px',
    buttonPrimaryBg: '#315E4C',
    buttonPrimaryHoverBg: '#46866c',
    buttonPrimaryColor: '#FFF',
  },
};

footprint.open({ publicKey, appearance });

Global variables

As the name says, global variables are the easiest way to set a specific property to all elements. For example, setting borderRadius to 4px is the equivalent of adding the same 4px to the variables dialogBorderRadius, inputBorderRadius, buttonBorderRadius and dropdownBorderRadius.

VariableDescription
borderRadiusThe border radius used for the dialog, inputs, button and dropdown
colorErrorThe color used to indicate errors or destructive actions in the element
colorWarningThe color used to indicate warnings in the element
colorSuccessThe color user to indicate success in the element
colorAccentTThe color to add emphasis, but without a specific intent
borderColorErrorThe border color of the elements with an error state
fontFamilyThe font family. Make sure to load the font first with fontSrc

Link

Links are just regular anchors. One example is the Terms of Service link. If you need to apply more propeties or different states, use custom rules.

Link
VariableDescription
linkColorThe color of the link

Dialog

The dialog that wraps our flow.

Dialog
VariableDescription
dialogBgThe dialog body background color
dialogBoxShadowThe dialog shadow
dialogBorderRadiusThe dialog border radius

Label

It refers to the native label element, the one that will be used to link with its input field.

Label
VariableDescription
labelColorThe label color
labelFontThe label font

Input

This refers to all the inputs in the platform, including Pin Inputs, Phone Inputs and Address Inputs.

Input
VariableDescription
inputBorderRadiusThe input border radius
inputBorderWidthThe input border width
inputFontThe input font
inputHeightThe input height
inputPlaceholderColorThe input placeholder color
inputColorThe input color
inputBgThe input background color
inputBorderColorThe input border color
inputHoverBgThe input background color, when it's hovered
inputHoverBorderColorThe input border color, when it's hovered
inputFocusBgThe input background color, when it's focused
inputFocusBorderColorThe input border color, when it's focused
inputFocusElevationThe input box shadow, when it's focused
inputErrorBgThe input background color, when it has an error
inputErrorBorderColorThe input border color, when it has an error
inputErrorHoverBgThe input background color, when it has an error and it's hovered
inputErrorHoverBorderColorThe input border color, when it has an error and it's hovered
inputErrorFocusBgThe input background color, when it has an error and it's focused
inputErrorFocusBorderColorThe input border color, when it has an error and it's focused
inputErrorFocusElevationThe input box shadow, when it has an error and it's focused

Hint

The text below the input field, which gives some extra information about the input. It can be used to indicate an error.

Hint
VariableDescription
hintColorThe hint color
hintErrorColorThe hint color when the input has an error state
hintFontThe hint font

LinkButton

It's a variant of of our buttons, but without any backgrounds.

LinkButton
VariableDescription
linkButtonColorThe button color
linkButtonHoverColorThe button color, when it is hovered
linkButtonActiveColorThe button color, when it is pressed
linkButtonDestructiveColorThe button color when it has a destrucive intent
linkButtonDestructiveHoverColorThe button color when it has a destrucive intent and is horeverd
linkButtonDestructiveActiveColorThe button color when it has a destrucive intent and is pressed

Button

Button
VariableDescription
buttonBorderRadiusThe button border radius
buttonBorderWidthThe button border width
buttonElevationThe button box shadow
buttonElevationHoverThe button box shadow, when it's hovered
buttonElevationActiveThe button box shadow, when it's activated
buttonOutlineOffsetThe button outline offset
buttonPrimaryBgThe primary button background color
buttonPrimaryColorThe primary button color
buttonPrimaryBorderColorThe primary button border color
buttonPrimaryHoverBgThe primary button background color, when it's hovered
buttonPrimaryHoverColorThe primary button color, when it's hovered
buttonPrimaryHoverBorderColorThe primary button border color, when it's hovered
buttonPrimaryActiveBgThe primary button background color, when it's activated
buttonPrimaryActiveColorThe primary button color, when it's activated
buttonPrimaryActiveBorderColorThe primary button border color, when it's activated
buttonPrimaryDisabledBgThe primary button background color, when it's disabled
buttonPrimaryDisabledColorThe primary button color, when it's disabled
buttonPrimaryDisabledBorderColorThe primary button border color, when it's disabled
buttonPrimaryLoadingBgThe primary button background color, when it's loading
buttonPrimaryLoadingColorThe primary button color, when it's loading
buttonSecondaryBgThe secondary button background color
buttonSecondaryColorThe secondary button color
buttonSecondaryBorderColorThe secondary button border color
buttonSecondaryHoverBgThe secondary button background color, when it's hovered
buttonSecondaryHoverColorThe secondary button color, when it's hovered
buttonSecondaryHoverBorderColorThe secondary button border color, when it's hovered
buttonSecondaryActiveBgThe secondary button background color, when it's activated
buttonSecondaryActiveColorThe secondary button color, when it's activated
buttonSecondaryActiveBorderColorThe secondary button border color, when it's activated
buttonSecondaryDisabledBgThe secondary button background color, when it's disabled
buttonSecondaryDisabledColorThe secondary button color, when it's disabled
buttonSecondaryDisabledBorderColorThe secondary button border color, when it's disabled
buttonSecondaryLoadingBgThe secondary button background color, when it's loading
buttonSecondaryLoadingColorThe secondary button color, when it's loading

Dropdown

Dropdowns are used with input fields. When it's a phone input, it's used to display the list of countries. When it's an address input, it's used to display the list of results.

Dropdown
VariableDescription
dropdownBgThe dropdown background color
dropdownHoverBgThe dropdown background color, when it's hovered
dropdownBorderColorThe dropdown background color, when it's activated
dropdownBorderWidthThe dropdown border width
dropdownBorderRadiusThe dropdown border radius
dropdownElevationThe dropdown box shadow
dropdownColorPrimaryThe dropdown color primary
dropdownColorSecondaryThe dropdown color secondary
dropdownFooterBgThe dropdown footer background

Rules

If you want to add styles that are not supported by these variables, you can use rules. With rules, you can use CSS to arbitrarily style the elements.

typescript

import footprint from '@onefootprint/footprint-js';

const publicKey = 'ob_test_VMooXd04EUlnu3AvMYKjMW';
const appearance = {
  theme: 'light',
  rules: {
    button: {
      transition: 'all .2s linear',
    },
    `button:hover`: {},
    `button:focus`: {},
    `button:active`: {},
    `input`: {},
    `input:hover`: {},
    `input:focus`: {},
    `input:active`: {},
    `label`: {},
    `hint`: {},
    `link`: {},
    `link:hover`: {},
    `link:active`: {},
  }
};

footprint.open({ publicKey, appearance });

Available rules

VariableDescription
buttonThe button
button:hoverThe button, when it's hovered
button:activeThe button, when it's activated
inputThe input
input:hoverThe input, when it's hovered
input:focusThe input, when it's focused
labelThe input label
hintThe hint
linkThe link
link:hoverThe link, when it's hovered
link:activeThe link, when it's activated