tailwind.config.cjs

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  darkMode: ["class", '[data-theme="dark"]'],
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        light: {
          whiteBackground: "#FFFFFF",
          primaryBackground: "#FFFCFA",
          stroke: "#E5E5E5",
          theme: "#ff9966",
          primaryText: "#333333",
          secondaryText: "#999999",
          orange: "#FF9966",
          lightOrange: "#fff4f4",
          grey: "#fff7f0",
          status: {
            vouching: "#BE75FF",
            registered: "#00D9A1",
            removed: "#F60C6E",
            revocation: "#FF9966",
            claim: "#00D1FF",
            challenged: "#FFBE66",
            withdrawn: "#999999",
            expired: "#333333",
            transferred: "#3F6212",
            transferring: "#ba7264",
            rejected: "#D90429",
          },
        },
        dark: {
          whiteBackground: "#2D0050",
          primaryBackground: "#1B003F",
          stroke: "#42498F",
          theme: "#1b003f",
          primaryText: "#DAF0FF",
          secondaryText: "#BECCE5",
          orange: "#FFBE66",
          lightOrange: "#480c54",
          grey: "#666666",
          status: {
            vouching: "#D09BFF",
            registered: "#79FFDC",
            removed: "#FF8DBD",
            revocation: "#FF9966",
            claim: "#8CEAFF",
            challenged: "#FFBE66",
            withdrawn: "#BECCE5",
            expired: "#DAF0FF",
            transferred: "#8BC34A",
            transferring: "#795548",
            rejected: "#F25F5F",
          },
        },
      },
      animation: {
        flip: "flip 5s linear infinite",
      },
      keyframes: {
        flip: {
          "0%, 100%": { transform: "rotateY(0deg)" },
          "50%": { transform: "rotateY(360deg)" },
        },
        // progress: {
        //   "0%": { transform: "scaleX(1)" },
        //   "100%": { transform: "scaleX(0)" },
        // },
      },
      fontFamily: {
        sans: ["Open Sans", ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [require("@tailwindcss/forms")],
  safelist: [
    "bg-status-vouching",
    "bg-status-registered",
    "bg-status-removed",
    "bg-status-revocation",
    "bg-status-claim",
    "bg-status-challenged",
    "bg-status-withdrawn",
    "bg-status-expired",
    "bg-status-transferred",
    "bg-status-transferring",
    "text-status-vouching",
    "text-status-registered",
    "text-status-removed",
    "text-status-revocation",
    "text-status-claim",
    "text-status-challenged",
    "text-status-withdrawn",
    "text-status-expired",
    "text-status-transferred",
    "text-status-transferring",
    "border-status-vouching",
    "border-status-registered",
    "border-status-removed",
    "border-status-revocation",
    "border-status-claim",
    "border-status-challenged",
    "border-status-withdrawn",
    "border-status-expired",
    "border-status-transferred",
    "border-status-transferring",
    "bg-status-rejected",
    "text-status-rejected",
    "border-status-rejected",
  ],
};