1. Combine Brand Tokens

Use the flattenTokens function to combine the tokens from the JSON files into a single object for each different brand. 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.

import { flattenTokens } from '@uhg-abyss/mobile';
import brand_A from '..tokens/brand_A.json';
import brand_B from '..tokens/brand_B.json';

const brandThemeObjectA = flattenTokens(core, brand_A);
const brandThemeObjectB = flattenTokens(core, brand_B);

2. Create Theme Objects

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/mobile';

const brandThemeA = createTheme('optum', brandThemeObjectA);
const brandThemeB = createTheme('optum', brandThemeObjectB);

3. Implement New Themes

Wrap your application with the ThemeProvider. Depending on the brand selected, pass in the needed brand theme to the theme object. This ensures that the brand theme is applied globally to all components within your application.

import { ThemeProvider, createTheme, flattenTokens } from '@uhg-abyss/mobile';
import core from '..tokens/core.json';
import brand_A from '..tokens/brand_A.json';
import brand_B from '..tokens/brand_B.json';

// flatten each brands tokens
const brandThemeObjectA = flattenTokens(core, brand_A);
const brandThemeObjectB = flattenTokens(core, brand_B);

// create each brand theme
const brandThemeA = createTheme('optum', brandThemeObjectA);
const brandThemeB = createTheme('optum', brandThemeObjectB);

const App = () => (
  <ThemeProvider theme={/* insert brand theme here */}>
    {/* Your application */}
  </ThemeProvider>
);