# Customization ## 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`). Do you want to see a project example? Go [here](https://github.com/onefootprint/examples/tree/master/idv/frontend-vite-vanilla). ## 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 "@onefootprint/footprint-js/dist/footprint-js.css"; import { onboarding } from "@onefootprint/footprint-js"; onboarding.initialize({ onboardingSessionToken: "obtok_UxM6Vbvk2Rcy1gzcSuXgk3sj3L9I0pAnNH", onComplete: (validationToken) => { console.log(validationToken); }, appearance: { variables: { borderRadius: "0px", buttonPrimaryBg: "#315E4C", buttonPrimaryHoverBg: "#46866c", buttonPrimaryColor: "#FFF", }, }, }); ``` ## Global variables In the Footprint SDK, visual token inheritance operates on a hierarchical system. A higher-level token can set default values for a series of lower-level tokens. The table below lists these higher-level tokens and the lower-level tokens they influence by default: | Higher-level Token | Lower-level Tokens Influenced | | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `borderRadius` | `buttonBorderRadius`, `containerBorderRadius`, `inputBorderRadius`, `dropdownBorderRadius`, `radioSelectBorderRadius` | | `colorError` | `borderColorError`, `hintErrorColor`, `linkButtonDestructiveColor` | | `colorAccent` | `linkColor`, `linkButtonColor`, `linkButtonHoverColor`, `linkButtonActiveColor`, `radioSelectSelectedColor`, `radioSelectSelectedBorderColor`, `radioSelectComponentsIconSelectedBg` | | `borderColorError` | `inputErrorBorderColor` | You can define these tokens to easily propagate design choices across multiple lower-level tokens. However, should you need to customize a specific token, setting it individually will override the higher-level default. This allows you to maintain broad stylistic consistency across your interface while still providing granular control over specific components. ### Container Wraps the entire Footprint component. | Variable | Description | | ----------------------- | ---------------------------------------- | | `containerBg` | Sets the container body background color | | `containerElevation` | Determines the container's shadow | | `containerBorder` | Defines the container's border | | `containerBorderRadius` | Defines the container's border radius | | `containerMaxWidth` | Defines the container's max width | To customize the max width of the content for inline integrations, use the `containerMaxWidth` variable — for example, `containerMaxWidth: '480px'`. This constrains and centers the content while letting the outer container fill the available space. For modal and drawer variants, the width is predetermined. ### Link Links function like standard anchor tags. A common example is the `Terms of Service` link. To apply more properties or modify states, use custom rules. | Variable | Description | | ----------- | ---------------------- | | `linkColor` | Defines the link color | ### Label The label refers to the native HTML element that pairs with an input field. | Variable | Description | | ------------ | ------------------------- | | `labelColor` | Sets the label color | | `labelFont` | Determines the label font | ### Input This encompasses all types of input fields on the platform, including PIN, Phone, and Address Inputs. | Variable | Description | | ---------------------------- | -------------------------------------------------------------------------- | | `inputBorderRadius` | Determines the input border radius | | `inputBorderWidth` | Sets the input border width | | `inputFont` | Sets the input font | | `inputHeight` | Sets the input height | | `inputPlaceholderColor` | Defines the input placeholder color | | `inputColor` | Sets the input color | | `inputBg` | Defines the input background color | | `inputBorderColor` | Sets the input border color | | `inputHoverBg` | Determines the input background color when hovered | | `inputHoverBorderColor` | Sets the input border color when hovered | | `inputFocusBg` | Determines the input background color when focused | | `inputFocusBorderColor` | Sets the input border color when focused | | `inputFocusElevation` | Sets the input box shadow when focused | | `inputErrorBg` | Determines the input background color when an error is present | | `inputErrorBorderColor` | Sets the input border color when an error is present | | `inputErrorHoverBg` | Determines the input background color when an error is present and hovered | | `inputErrorHoverBorderColor` | Sets the input border color when an error is present and hovered | | `inputErrorFocusBg` | Determines the input background color when an error is present and focused | | `inputErrorFocusBorderColor` | Sets the input border color when an error is present and focused | | `inputErrorFocusElevation` | Sets the input box shadow when an error is present and focused | ### Hint Hints are informative texts below input fields. They can indicate an error or provide additional information. | Variable | Description | | ---------------- | ---------------------------------------------------------------- | | `hintColor` | Sets the hint color | | `hintErrorColor` | Determines the hint color when the input field is in error state | | `hintFont` | Defines the hint font | ### LinkButton A LinkButton is a variant of our standard button but without any backgrounds. | Variable | Description | | ---------------------------------- | ------------------------------------------------------------------------------ | | `linkButtonColor` | Sets the button color | | `linkButtonHoverColor` | Defines the button color when hovered | | `linkButtonActiveColor` | Sets the button color when pressed | | `linkButtonDestructiveColor` | Determines the button color when it signifies a destructive action | | `linkButtonDestructiveHoverColor` | Sets the button color when it signifies a destructive action and is hovered | | `linkButtonDestructiveActiveColor` | Determines the button color when it signifies a destructive action and pressed | ### Button | Variable | Description | | ------------------------------------ | ------------------------------------------------------------- | | `buttonBorderRadius` | Defines the button border radius | | `buttonBorderWidth` | Sets the button border width | | `buttonElevation` | Determines the button box shadow | | `buttonElevationHover` | Sets the button box shadow when hovered | | `buttonElevationActive` | Determines the button box shadow when activated | | `buttonOutlineOffset` | Defines the button outline offset | | `buttonPrimaryBg` | Sets the primary button's background color | | `buttonPrimaryColor` | Defines the primary button's color | | `buttonPrimaryBorderColor` | Determines the primary button's border color | | `buttonPrimaryHoverBg` | Sets the primary button's background color when hovered | | `buttonPrimaryHoverColor` | Defines the primary button's color when hovered | | `buttonPrimaryHoverBorderColor` | Determines the primary button's border color when hovered | | `buttonPrimaryActiveBg` | Sets the primary button's background color when activated | | `buttonPrimaryActiveColor` | Defines the primary button's color when activated | | `buttonPrimaryActiveBorderColor` | Determines the primary button's border color when activated | | `buttonPrimaryDisabledBg` | Sets the primary button's background color when disabled | | `buttonPrimaryDisabledColor` | Defines the primary button's color when disabled | | `buttonPrimaryDisabledBorderColor` | Determines the primary button's border color when disabled | | `buttonPrimaryLoadingBg` | Sets the primary button's background color when loading | | `buttonPrimaryLoadingColor` | Defines the primary button's color when loading | | `buttonSecondaryBg` | Sets the secondary button's background color | | `buttonSecondaryColor` | Defines the secondary button's color | | `buttonSecondaryBorderColor` | Determines the secondary button's border color | | `buttonSecondaryHoverBg` | Sets the secondary button's background color when hovered | | `buttonSecondaryHoverColor` | Defines the secondary button's color when hovered | | `buttonSecondaryHoverBorderColor` | Determines the secondary button's border color when hovered | | `buttonSecondaryActiveBg` | Sets the secondary button's background color when activated | | `buttonSecondaryActiveColor` | Defines the secondary button's color when activated | | `buttonSecondaryActiveBorderColor` | Determines the secondary button's border color when activated | | `buttonSecondaryDisabledBg` | Sets the secondary button's background color when disabled | | `buttonSecondaryDisabledColor` | Defines the secondary button's color when disabled | | `buttonSecondaryDisabledBorderColor` | Determines the secondary button's border color when disabled | | `buttonSecondaryLoadingBg` | Sets the secondary button's background color when loading | | `buttonSecondaryLoadingColor` | Defines the secondary button's color when loading | Please note that MDX (Markdown for the Component Era) allows you to import and use JSX components in your Markdown files. In my above example, I treated this like a regular markdown table, but you can also use JSX syntax if you want to create more complex and interactive tables. ### 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. | Variable | Description | | ------------------------ | -------------------------------------------------- | | `dropdownBg` | The dropdown background color | | `dropdownHoverBg` | The dropdown background color, when it's hovered | | `dropdownBorderColor` | The dropdown background color, when it's activated | | `dropdownBorderWidth` | The dropdown border width | | `dropdownBorderRadius` | The dropdown border radius | | `dropdownElevation` | The dropdown box shadow | | `dropdownColorPrimary` | The dropdown color primary | | `dropdownColorSecondary` | The dropdown color secondary | | `dropdownFooterBg` | The dropdown footer background | ### Radio Select Radio Select is used in two important areas within the Footprint interface. Firstly, it is employed when selecting an outcome for onboarding with a sandbox key. In this case, the chosen outcome is only visible in sandbox mode and remains hidden from end users. Secondly, Radio Select is utilized during the ID document verification process, allowing users to select the type of ID document they wish to use for verification. | Variable | Description | | --------------------------------------------- | ------------------------------------------------------ | | `radioSelectBg` | The background of the radio select component | | `radioSelectColor` | The text color when is not selected | | `radioSelectHoverColor` | The hover text color when is not selected | | `radioSelectSelectedColor` | The text color when is selected | | `radioSelectSelectedHoverColor` | The hover text color when is selected | | `radioSelectBorderRadius` | The border radius of the radio select component | | `radioSelectBorderWidth` | The border width of the radio select component | | `radioSelectBorderColor` | The border color of the radio select component | | `radioSelectHoverBg` | The hover background of the radio select component | | `radioSelectHoverBorderColor` | The hover border color of the radio select component | | `radioSelectSelectedBg` | The background of the selected radio item | | `radioSelectSelectedBorderColor` | The border color of the selected radio item | | `radioSelectComponentsIconBg` | The background of the icon in the radio item | | `radioSelectComponentsIconHoverBg` | The hover background of the icon in the radio item | | `radioSelectComponentsIconSelectedBg` | The background of the selected icon in the radio item | | `radioSelectComponentsIconColor` | The color of the icon in the radio item | | `radioSelectComponentsIconHoverColor` | The hover color of the icon in the radio item | | `radioSelectComponentsIconSelectedColor` | The color of the selected icon in the radio item | | `radioSelectComponentsIconSelectedHoverColor` | The hover color of the selected icon in the radio item | ## 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 '@onefootprint/footprint-js/dist/footprint-js.css'; import { onboarding } from '@onefootprint/footprint-js'; onboarding.initialize({ onboardingSessionToken: 'obtok_UxM6Vbvk2Rcy1gzcSuXgk3sj3L9I0pAnNH', onComplete: (validationToken) => { console.log(validationToken); }, appearance: { rules: { button: { transition: 'all .2s linear', }, `button:hover`: {}, `button:focus`: {}, `button:active`: {}, `input`: {}, `input:hover`: {}, `input:focus`: {}, `input:active`: {}, `pinInput:hover`: {}, `pinInput:focus`: {}, `pinInput:active`: {}, `label`: {}, `hint`: {}, `link`: {}, `link:hover`: {}, `link:active`: {}, } }, }); ``` ### Available rules | Variable | Description | | --------------- | ------------------------------- | | `button` | The button | | `button:hover` | The button, when it's hovered | | `button:active` | The button, when it's activated | | `input` | The input | | `input:hover` | The input, when it's hovered | | `input:focus` | The input, when it's focused | | `label` | The input label | | `hint` | The hint | | `link` | The link | | `link:hover` | The link, when it's hovered | | `link:active` | The link, when it's activated | ## Localization configuration ### Setting the language & locale Footprint also supports localization settings, you can use the `l10n` (localization) option and specify the desired locale and language. For example, if you have Spanish speaking users, you can set the language to "es", and it will show the onboarding flow in Spanish. ```typescript import "@onefootprint/footprint-js/dist/footprint-js.css"; import { onboarding } from "@onefootprint/footprint-js"; const l10n = { language: "es", }; onboarding.initialize({ onboardingSessionToken: "obtok_UxM6Vbvk2Rcy1gzcSuXgk3sj3L9I0pAnNH", onComplete: (validationToken) => { console.log(validationToken); }, l10n, }); ``` Similarly, if your audience is in Mexico, you can set the locale to "es-MX" (Spanish - Mexico). This locale configuration helps Footprint format dates and numbers and adapt to cultural conventions. ```typescript import "@onefootprint/footprint-js/dist/footprint-js.css"; import { onboarding } from "@onefootprint/footprint-js"; const l10n = { language: "es", locale: "es-MX", }; onboarding.initialize({ onboardingSessionToken: "obtok_UxM6Vbvk2Rcy1gzcSuXgk3sj3L9I0pAnNH", onComplete: (validationToken) => { console.log(validationToken); }, l10n, }); ``` ### Available l10n properties | Property | Type | Description | | ---------- | ---------------- | ------------------------------------------- | | `locale` | `en-US`, `es-MX` | Optional. Locale for date/number formatting | | `language` | `en`, `es` | Language code for UI text localization |