Implement Design System to Tailwind and Chakra-UI

In this article, I want to share how I typically implement design tokens from UI/UX into our React project. First, I define a folder where I translate the design tokens into constant variables. Then, I define variables that encompass our design tokens (such as typography, color, etc.) in both the tailwind.config.js and Chakra UI theme files.

Here is the const variable where we define the color from design token

export const COLOR = {
  white: "#FFFFFE",
  "light-grey-1": "#EFF0F3",
  "light-grey-2": "#E4E5E9",
  grey: "#C0C0C0",
  "dark-grey": "#9A9494",
  black: "#2B2C34",
  blue: "#6246EA",
};

Here is where we add the color into chakra-ui theme

import { extendTheme, defineStyleConfig } from "@chakra-ui/react";
import {
  TYPOGRAPHY_TITLE,
  TYPOGRAPHY_PARAGRAPH,
} from "./design-token/typography";
import { COLOR } from "./design-token/color";
 
const headingTheme = defineStyleConfig({
  variants: {
    ...TYPOGRAPHY_TITLE,
  },
});
 
const TextTheme = defineStyleConfig({
  variants: {
    ...TYPOGRAPHY_PARAGRAPH,
  },
});
 
export const theme = extendTheme({
  components: {
    Heading: headingTheme,
    Text: TextTheme,
  },
  colors: {
    ...COLOR,
  },
});

and, here is where we add the color into tailwind.config.js

/** @type {import('tailwindcss').Config} */
import { COLOR } from "./src/design-token/color";
 
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        ...COLOR,
      },
    },
  },
  plugins: [],
};

By centralizing our design tokens in these configuration files, we ensure consistency and streamline the process of maintaining a cohesive design system across our React project. Thank you for reading and happy coding!