Design Tokens

Using design tokens instead of hardcoded values allows you to make sweeping changes in your product and automatically support global features, like dark mode.

In UIC, we provide design tokens as CSS variables. They are used in UIC components, and you can use them in your custom components built on top of UIC. All CSS variables start with an --uic prefix to avoid conflicts with external variables. UIC color tokens automatically support dark mode, so you won't need to keep styles for both modes separately.

To access the token values, first, you need to wrap your application with the UIC provider and pass the theme and mode you would like to use. In the following example, we're using the theme provided by the UIC package. However, you can also create your custom theme and use it the same way.

import { UIC } from "@uicapsule/components";
import "@uicapsule/components/theme.css";

const Application = ({ children }) => (
  <UIC theme="uicapsule" defaultColorMode="dark">
    {children}
  </UIC>
);

Since all variables are defined in CSS, you don't have to call any utilities or hooks to get access to the tokens. Instead, you can use them directly, even in your inline styles or CSS-in-JS code.

const Component = () => {
  return <div style={{ color: "var(--uic-color-foreground-neutral)" }} />;
};