Skip to main content

Introduction

Implementing a White Label Theme

Prepare​

Token Syncing​

Manual import​

  • Get Token JSON from Design
  • Add to Repository

1. Combine Tokens​

Use the flattenTokens function to flatten and combine the imported tokens from the JSON file into a single object consumable by createTheme. This function supports a layered system where tokens from different themes can override core, semantic, and component-level tokens. Check out the flattenTokens documentation for an in-depth look at the function.

Note that this approach assumes the token files are exported from Figma Token Studio.

import { flattenTokens } from '@uhg-abyss/web/tools/theme';
import core_01 from '../01_core.json';
import semantic_02 from '../02_semantic.json';
import brand_03 from '../03_brand.json';


const brandTheme = flattenTokens(core_01, semantic_02, brand_03);

For maintaining multiple brands, refer to the multi-brand tutorial.

2. Create Theme Object​

Use the createTheme function to create a theme object from the flattened tokens. This theme object will be used to apply the white label theme to your application. The createTheme function takes two arguments: the name of the base theme ("uhc" or "optum") and an optional object for any overrides you wish to apply, such as your white-labeled theme.

import { createTheme } from '@uhg-abyss/web/tools/theme';


const theme = createTheme('uhc', brandTheme);

3. Implement New Theme​

Wrap your application with the ThemeProvider and pass in the created theme object. This ensures that the theme is applied globally to all components within your application.

import { createTheme } from '@uhg-abyss/web/tools/theme';
import { flattenTokens } from '@uhg-abyss/web/tools/theme';
import { ThemeProvider } from '@uhg-abyss/web/ui/ThemeProvider';


import core_01 from '../01_core.json';
import semantic_02 from '../semantic_02.json';
import brand_03 from '../03_brand.json';


const brandTheme = flattenTokens(core_01, semantic_02, brand_03);
const theme = createTheme('uhc', brandTheme);


const App = () => (
  <ThemeProvider theme={theme}>
    {/* Your application components */}
  </ThemeProvider>
);
Table of Contents