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

The createTheme tool uses Abyss's preset themes and allows you to override those themes to fit your design needs. createTheme is used in conjunction with ThemeProvider and leverages Emotion for styling.

Usage

createTheme accepts two arguments. The first is the name of a default theme and is required. There are currently two themes available: 'uhc' and 'optum'. The second argument is an optional themeConfig object that can include theme overrides and other configuration options.

createTheme(
  themeName: 'uhc' | 'optum',
  themeConfig?: {
    /** Theme token overrides */
    theme?: DeepPartial<ThemeTokens>;
    /** Global CSS style overrides */
    css?: Record<string, React.CSSProperties>;
    /** Whether to include base CSS styles (reset, normalize, foundational styles). @default true */
    includeBaseCss?: boolean;
    /** Whether to include theme-specific font face definitions. @default true */
    includeFonts?: boolean;
    /** Whether to include default heading styles (h1-h6). @default true */
    includeHeadings?: boolean;
    /** Custom CDN URL for brand assets (logos, icons, brandmarks) */
    brandAssetsCdn?: string;
    /** Use Enterprise Sans font family (UHC theme only). @default false */
    enterpriseFont?: boolean;
    /** Override the theme name */
    themeName?: string;
    /** Enable CSS variable caching. @default true */
    enableCSSVariableCache?: boolean;
    /** Enable theme object caching. @default false */
    enableThemeCache?: boolean;
  }
): BaseTheme;

Theme overrides

The themeConfig object accepts theme and css properties to override the default theme tokens and/or create custom tokens that can be used in the styled tool or the available css prop on each component. This allows teams to customize the theme for specific projects or brands in a single location.

UHC theme example

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

const themeConfig = {
  theme: {
    breakpoints: {
      xs: 0,
      sm: 360,
      md: 744,
      lg: 1248,
    },
    colors: {
      'core.color.brand.5': '#EDF3FB',
      'core.color.brand.10': '#E3EEFA',
      'core.color.brand.20': '#D9E9FA',
    },
    sizes: {...},
    space: {...},
    fontSizes: {...},
    fonts: {...},
    fontWeights: {...},
    lineHeights: {...},
    letterSpacings: {...},
    borderWidths: {...},
    borderStyles: {...},
    radii: {...},
    shadows: {...},
    opacities: {...},
  },
  css: { // provide custom global css overrides
    p: {
      marginBottom: '10px',
    },
  },
};

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

const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};

ReactDOM.render(<App />, document.getElementById('root'));

Optum theme example

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

const themeConfig = {
  theme: {
    colors: {
      'core.color.brand.70': '#0C55B8',
      'core.color.brand.80': '#004BA0',
      'core.color.brand.100': '#002677',
    },
  },
};

const theme = createTheme('optum', themeConfig);

const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};

Abyss theme tokens

You can create your own themes by white labeling and applying overrides to our theme tokens. Please see the white labeling guides for more information.

For a quick start, you can also use our Live Token Editor, found in the header of this documentation site, to create and export your own themes. These can then be imported into your project and passed into createTheme as the theme override.

Font configuration

The default font for the UHC theme is UHC Sans. Teams looking to utilize Enterprise Sans can do so by setting the enterpriseFont property to true in the themeConfig object as shown below. This flag only applies to the UHC theme.

const themeConfig = {
  enterpriseFont: true,
};

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

For more information on fonts and other brand related information, please see the following Brand documentation.