UI Kit tokens

UI Kit tokens are the semantic layer of the UI Kit system, providing consistent, and themeable values for UI development. They ensure design integrity, maintainability, and seamless alignment between design and implementation.

UI Kit tokens can be accessed through the theme object:

import { theme } from "@hitachivantara/uikit-react-core";
 
const MyComponent = () => (
  <div style={{ color: theme.colors.primary }}>
    This text uses the semantic primary color.
  </div>
);

These tokens are categorized into several groups, each serving a specific purpose in the UI Kit design system and can be accessed through the theme object.

When creating a new theme, you can extend any of the supported themes by overriding these tokens (or adding new ones). This allows you to customize the UI Kit to fit your brand or application needs while maintaining the core design principles.

Below is a summary of the available token categories:

Radii

Accessible through the theme.radii object, these tokens define the border radius values used across the UI Kit components.

Spacing

Accessible through the theme.spacing object, these tokens define the spacing values used for margins, paddings, and gaps in the UI Kit components.

ZIndex

Accessible through the theme.zIndex object, these tokens define the stacking order of UI Kit components.

Typography

These tokens define the typography styles used in the UI Kit components.

Breakpoints

Accessible through the theme.breakpoints object, these tokens define the responsive breakpoints used in the UI Kit components.