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 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 keep styles for both modes separately.

To access the token values, first, you need to wrap your application with 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 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(--rs-color-foreground-neutral)" }} />;
};