Color Tokens

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

Color tokens can be accessed through the theme.colors object:

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