Design Tokens

<View gap={3} align="center">
  <Badge rounded>unit-x4</Badge>
  <Badge rounded>shadow-elevated</Badge>
  <Badge rounded>color-background-primary</Badge>
</View>

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 Reshaped, we provide design tokens as CSS variables that are in sync with the Figma styles. They are used in Reshaped components, and you can use them in your custom components built on top of Reshaped. All CSS variables start with an --rs prefix to avoid conflicts with external variables. Reshaped color tokens automatically support dark mode, so you won't need to maintain styles for both modes separately.

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

import { Reshaped } from "reshaped";
import "reshaped/themes/reshaped/theme.css";

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

Since all variables are defined in CSS, you don't have to call any utilities or hooks to access 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(--rs-color-foreground-neutral)" }} />;
};

You can access theme related typings from the reshaped/themes file. It includes the FullThemeDefinition that you can use for defining theme configuration in TypeScript as well as names of all supported tokes:

import { ColorTokenName } from "reshaped/themes";

const colorName: ColorTokenName = "backgroundPrimary";