Themes

Unit's White-label UIs support multiple Themes. In order to create a new Theme, you would need to upload a JSON that contains the White-label settings associated with that theme via an API. In response, you will get a URL. You will then specify that URL as you initialize any UI Component, under the theme attribute.

The best way to understand how to use the White-label Themes is to see them in action. Try out the Component Preview page in order to make a Component look and feel like your brand. Once you are happy with the result, you can copy the JSON settings from under the 'Appearence Config' tab in the preview page, and create the theme by uploading the JSON to the API.

Customization Options

The settings that make up a theme are divided into two main categories - global settings and component specific settings.

Global settings are meant to reflect your brand's design system - colors, fonts, basic component look and feel.
Component specific settings are meant to allow you to control UI Elements that are unique to a specific Component (e.g. the color of the font on a card image). On the component specific level, you may also provide overrides to any parameter specified in the global settings.

note

Please reach out to Unit if you need additional customization options to support your brand.

Global Settings

This object located on the root of the theme JSON object, but it can also be overridden on the component level.

Field	type	Description
logoUrl	string	URL to a logo image.
colors	object	Color palette
typography	object	Typography (text) preferences
buttons	object	buttons states preferences
menuButton	object	menu-button states preferences
avatar	object	avatar preferences

Colors

Field	type	Description
background	string	Will be used as background color of the components, drop downs menus and inner flows.
primary	string	Will be used for buttons, icons, highlight fields that are in focus, cover elements.
secondary	string	The secondary brand color is used for secondary buttons.
neutral	string	We will derive 6 neutral shades based on your main Neutral color. These shades will be used for texts, light background colors and disabled/inactive elements.
success	string	Semantic. Will be used in messages, toasts, statuses and alerts.
warning	string	Semantic. Will be used in messages, toasts, statuses and alerts.
error	string	Semantic. Will be used in messages, toasts, statuses and alerts.

Typography

Field	type	Description
common	object	Common typography settings (running texts).
titles	object	Titles typography settings.

Common

Field	type	Description
fontFamily	string	Font family for Elements. Note, the Components components will not fetch the font. Font should be available on the page from which the Components are used.
fontSize	string	Font size for elements. Can be set to either relative or absolute units.

Titles

Field	type	Description
h2	Title	The main title used in the Components. Examples include the Card title, Activity table title etc.
h3	Title	The secondary title used in the Components. Examples include menus and empty states.
menuTitle	Title	The title used for mobile menus (card-menu, account-list menu, etc).
componentTitle	Title	The title applied to various components such as card and activity components.
bigNumber	BigNumber	The title used for big number displays in components.
flow	Flow	The titles used for a flow or series of steps in a component. (card-actions, payments flows, etc.)
response	Response	The titles used for a response or message in components.
emptyState	EmptyState	The titles displayed in empty states within component.
table	Table	The titles for tables used in components.

Title

Field	type	Description
fontWeight	100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900 , 950 , "normal" , "bold" , "bolder" , "lighter"	The thickness or boldness of the font.
color	string	The color of the text in the title.
fontSize	string	The size of the font used in the title.
fontFamily	string	The specific font family for the title's text.

Big Number

Field	type	Description
fontWeight	100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900 , 950 , "normal" , "bold" , "bolder" , "lighter"	The thickness or boldness of the font.
color	string	The color of the text in the big number display.
fontFamily	string	The specific font family for the big number text.
largeFontSize	string	The font size for larger big number displays.
extraLargeFontSize	string	The font size for extra-large big number displays.

Flow

Field	type	Description
title	Title	The main title for the flow.
subtitle	Title	The secondary title for the flow.

Response

Field	type	Description
title	Title	The title for the response.

Empty State

Field	type	Description
title	Title	The title displayed in the empty state.

Table

Field	type	Description
headers	Title	The titles for the table headers.

Buttons

Field	type	Description
primary	ButtonStates	The primary style of the button.
secondary	ButtonStates	A secondary style option for the button.
subtle	ButtonStates	A subtle style option for the button.
outline	ButtonStates	An outlined style option for the button.
flat	ButtonStates	A flat style option for the button.

Field	type	Description
default	ButtonAttributes	The default style of the menu button.
hover	ButtonAttributes	The style when the button is hovered.
active	ButtonAttributes	The style when the button is active.
disabled	ButtonAttributes	The style when the button is disabled.

Button States

Field	type	Description
default	ButtonAttributes	The default style of the menu button.
hover	ButtonAttributes	The style when the button is hovered.
active	ButtonAttributes	The style when the button is active.
disabled	ButtonAttributes	The style when the button is disabled.

Button Attributes

Field	type	Description
border	Border	The border attributes for the button.
textColor	string	The color of the text in the button.
backgroundColor	string	The background color of the button.

Border

Field	type	Description
width	string	The width of the border around the element.
radius	string	The border radius or curvature of the element's corners.
color	string	The color of the border around the element.

Avatar

Field	type	Description
iconColor	string	Will control the color of the icon.
borderColor	string	Will control the color of the border.
backgroundColor	string	Will control the color of the background.

Component Specific Settings

Card

Field	type	Description
designs	Array of Design	The main title used in the Components. Examples include the Card title, Activity table title etc
override	Global	The secondary title used in the Components. Examples include menus and empty states

Card Design

Field	type	Description
name	string	Name of your design, should match the name of Card design in Unit. For charge cards the name must contain "_credit".
url	string	Link to Card image
fontColor	string	Will control the font color on top of the Card
boxShadow	string	Will control the Card shadow

Account

Field	type	Description
titleColor	string	Will control the font color of the account title
balanceTitleColor	string	Will control the font color of the balance title
coverBackgroundColor	string	Will control the color of the cover background

Create Theme

Creates theme for white label components.

Verb	`POST`
Url	`https://api.s.unit.sh/white-label/theme`
Data Type	`whiteLabelTheme`
Timeout (Seconds)	`5`

Attributes

Name	Type	Description
name	string	Theme Name.
global	object	Global theme setup.
elementsCard	object	Card element setup.
elementsActivity	object	Activity element setup.
elementsAccount	object	Account theme setup.
elementsPayment	object	Payment theme setup.

Example Request:
curl -X POST 'https://api.s.unit.sh/white-label/theme'
-H 'Content-Type: application/vnd.api+json'
-H 'Authorization: Bearer ${TOKEN}'
--data-raw '{
  "data": {
    "type": "whiteLabelTheme",
    "attributes": {
      "name": "VIP Theme",
      "global": {
        "colors": {
          "background": "#2223334",
          "primary": "#0000F0",
          "secondary": "#000000",
          "neutral": "#FF9933",
          "success": "#0CD96F",
          "warning": "#FF9933",
          "error": "#FF4F64"
        },
        "typography": {
          "common": {
            "fontFamily": "sans-serif"
          },
          "titles": {
            "h2": {
              "fontWeight": "800"
            },
            "h3": {
              "fontWeight": "800"
            }
          }
        }
      },
      "elementsCard": {
        "designs": [
          {
            "name": "default",
            "url": "https://d1xlopvhx2cz8k.cloudfront.net/resources/outlay.png",
            "fontColor": "#00ff00",
            "boxShadow": "0px 3.6px 15px 2px rgb(0 0 0 / 0.25)"
          }
        ]
      },
      "elementsAccount": {
        "override": {
          "global": {
            "colors": {
              "background": "#00ff00"
            }
          }
        }
      },
      "elementsPayment": {
        "override": {
          "global": {
            "typography": {
              "common": {
                "fontFamily": "Poppins"
              }
            }
          }
        }
      }
    }
  }
}'

Response

Response is a JSON:API document.

201 Created

Field	Type	Description
data	object	The requested resource after the operation was completed.
links	object	Related Link object with url to be used in component.

Field	Type	Description
type	String	Type of the resource in link.
href	object	URL to be set in theme property of component.

Example Response:
{
  "data": {
    "type": "whiteLabelTheme",
    "id": "10008",
    "attributes": {
      "...": "..."
    },
    "links": {
      "related": {
        "type": "application/json",
        "href": "https://ui.s.unit.sh/resources/982/themes/605676c1-b00b-4748-9fa4-258d1a28c3fb.json"
      }
    }
  }
}

Update Theme

Updates theme for white label components.

note

You need to send the full theme object in the request body, not only the fields that were changed.

Verb	`PUT`
Url	`https://api.s.unit.sh/white-label/theme/{id}`
Data Type	`whiteLabelTheme`
Timeout (Seconds)	`5`

Get Theme

Get white label theme by id.

Verb	`GET`
Url	`https://api.s.unit.sh/white-label/theme/{id}`
Data Type	`whiteLabelTheme`
Timeout (Seconds)	`5`

Example Request:
curl -X GET 'https://api.s.unit.sh/white-label/theme/{id}' \
-H "Authorization: Bearer ${TOKEN}"

List

List themes resources. Paging and sorting can be applied.

Verb	`GET`
Url	`https://api.s.unit.sh/white-label/theme`
Timeout (Seconds)	`5`

Query Parameters

Name	Type	Default	Description
page[limit]	integer	100	Optional. Maximum number of resources that will be returned. Maximum is 1000 resources. See Pagination.
page[offset]	integer	0	Optional. Number of resources to skip. See Pagination.
filter[fileName]	string	(empty)	Optional. Find by file name.
sort	string	`sort=-createdAt`	Optional. `sort=createdAt` for ascending order or `sort=-createdAt` (leading minus sign) for descending order.

curl -X GET 'https://api.s.unit.sh/theme?page[limit]=20&page[offset]=10' \
-H "Authorization: Bearer ${TOKEN}"

Customization Options​

Global Settings​

Colors​

Typography​

Common​

Titles​

Title​

Big Number​

Flow​

Response​

Empty State​

Table​

Buttons​

Menu Button​

Button States​

Button Attributes​

Border​

Avatar​

Component Specific Settings​

Card​

Card Design​

Account​

Create Theme​

Attributes​

Response​

201 Created​

Related​

Update Theme​

Get Theme​

List​

Query Parameters​

Customization Options

Global Settings

Colors

Typography

Common

Titles

Title

Big Number

Flow

Response

Empty State

Table

Buttons

Menu Button

Button States

Button Attributes

Border

Avatar

Component Specific Settings

Card

Card Design

Account

Create Theme

Attributes

Response

201 Created

Related

Update Theme

Get Theme

List

Query Parameters