Skip to main content

flattenTokens

Tool to combine tokens from multiple sources into a single object.

Submit feedback
github
import { flattenTokens } from '@uhg-abyss/web/tools/theme';

Properties

flattenTokens(...themes: TokenTheme[])

Usage

The flattenTokens function is designed to flatten and merge tokens from multiple JSON structures, to support a layered system where tokens from different themes can override core- and semantic-level tokens.

The Abyss theme accepts an object with the following style category keys to define the theme: sizing, spacing, color, borderRadius, borderWidth, boxShadow, fontFamilies, fontWeights, fontSizes, lineHeights, letterSpacing, border, and opacity.

This function will return a single object in this format that can be used to create a theme object via createTheme for later use in the ThemeProvider.

Overriding Abyss token theme

In this example, we use flattenTokens and createTheme to create a new theme object, which is then passed into ThemeProvider to override the Abyss theme and customize the Button and Accordion components.

Table of Contents