gistfile1.txt

const baseUnit = 4;
const units = [...Array(30).keys()].reduce(
  (config, i) => ({
    ...config,
    [i + 1]: `${baseUnit * (i + 1)}px`,
  }),
  {}
);

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: "class",
  theme: {
    padding: units,
    margin: { ...units, auto: "auto" },
    gap: units,
    borderRadius: {
      none: "0",
      sm: "6px",
      md: "10px",
      lg: "13px",
      xl: "24px",
      "2xl": "36px",
      full: "9999px",
    },
    boxShadow: {
      base: "0px 2px 8px rgba(0, 0, 0, 0.08)",
    },
    colors: {
      brand: "#F6A6A6",
      "blue-400": "#57A0F8",
      white: "#FFF",
      black: "#000",
      transparent: "transparent",
    },
    fontSize: {
      "heading-1": ["28px", "32px"],
      "heading-2": ["24px", "29px"],
      "title-1": ["18px", "22px"],
      "title-2": ["16px", "20px"],
      body: ["14px", "18px"],
      caption: ["12px", "18px"],
      note: ["11px", "13px"],
    },
  },
  plugins: [
    require("tailwindcss-themer")({
      defaultTheme: {
        extend: {
          backgroundColor: {
            "neutral-faded": "#F5F5F5",
            neutral: "#e8e8e8",
            "positive-faded": "#EDFFF2",
            "positive-highlighted-faded": "#d1ffde",
            positive: "#69D694",
            disabled: "#f6f6f6",

            base: "#fff",
            elevated: "#fff",
            page: "#fff",
            "page-faded": "#FAFAFA",
          },
          textColor: {
            neutral: "#171717",
            "neutral-faded": "#737374",
            "neutral-icon": "#A7A7A7",
            positive: "#69D68A",
            disabled: "#d2d2d2",
          },
          borderColor: {
            "neutral-faded": "#E5E5E5",
            critical: "#dc2626",
          },
        },
      },
      themes: [
        {
          name: "dark",
          extend: {
            backgroundColor: {
              "neutral-faded": "#242938",
              neutral: "#30374A",
              "positive-faded": "#01321C",
              "positive-highlighted-faded": "#024829",
              positive: "#0eb264",
              disabled: "#282E3E",
              base: "#181C25",
              elevated: "#1C212B",
              page: "#0D1117",
              "page-faded": "#11171F",
            },
            textColor: {
              neutral: "#EFF0F1",
              "neutral-faded": "#C1C7D7",
              "neutral-icon": "#9398a6",
              positive: "#03AB5F",
              disabled: "#404A63",
            },
            borderColor: {
              "neutral-faded": "#30374A",
              critical: "#EB6666",
            },
          },
        },
      ],
    }),
  ],
};