// default tailwind css config https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L7
/** @type {import('tailwindcss').Config} */

export const colorClass =
  variable =>
  ({ opacityValue }) =>
    opacityValue ? `rgba(var(--${variable}), ${opacityValue})` : `rgb(var(--${variable}))`;

module.exports = {
  content: ["/src/**/*.{tsx,ts}"],
  darkMode: "class",
  theme: {
    fontFamily: {
      sans: ["YekanBakh", "IRANSansX", "Arial", "Verdana", "Helvetica", "Tahoma"],
      sansNum: ["YekanBakh", "IRANSansX", "Arial", "Verdana", "Helvetica", "Tahoma"],
    },
    fontSize: {
      "display-1": ["var(--font-size-5xl)", { lineHeight: "64px", fontWeight: "400" }],
      "display-2": ["var(--font-size-4xl)", { lineHeight: "52px", fontWeight: "400" }],
      "display-3": ["var(--font-size-3xl)", { lineHeight: "44px", fontWeight: "400" }],
      "headline-1": ["var(--font-size-2xl)", { lineHeight: "40px", fontWeight: "400" }],
      "headline-2": ["var(--font-size-xl)", { lineHeight: "36px", fontWeight: "400" }],
      "headline-3": ["var(--font-size-lg)", { lineHeight: "32px", fontWeight: "400" }],
      "title-1": ["var(--font-size-md)", { lineHeight: "28px", fontWeight: "400" }],
      "title-2": ["var(--font-size-base)", { lineHeight: "24px", fontWeight: "500" }],
      "title-3": ["var(--font-size-sm)", { lineHeight: "20px", fontWeight: "500" }],
      "label-1": ["var(--font-size-sm)", { lineHeight: "20px", fontWeight: "500" }],
      "label-2": ["var(--font-size-2xs)", { lineHeight: "16px", fontWeight: "500" }],
      "label-3": ["var(--font-size-xs)", { lineHeight: "16px", fontWeight: "500" }],
      "body-1": ["var(--font-size-base)", { lineHeight: "24px", fontWeight: "400" }],
      "body-2": ["var(--font-size-sm)", { lineHeight: "20px", fontWeight: "400" }],
      "body-3": ["var(--font-size-2xs)", { lineHeight: "16px", fontWeight: "400" }],
    },
    colors: {
      light: {
        primary: {
          default: colorClass("primary-color-40"),
          on: colorClass("primary-color-100"),
          container: colorClass("primary-color-90"),
          onContainer: colorClass("primary-color-10"),
        },
        secondary: {
          default: colorClass("secondary-color-40"),
          on: colorClass("secondary-color-100"),
          container: colorClass("secondary-color-90"),
          onContainer: colorClass("secondary-color-10"),
        },
        tertiary: {
          default: colorClass("tertiary-color-40"),
          on: colorClass("tertiary-color-100"),
          container: colorClass("tertiary-color-90"),
          onContainer: colorClass("tertiary-color-10"),
        },
        error: {
          default: colorClass("error-color-40"),
          on: colorClass("error-color-100"),
          container: colorClass("error-color-90"),
          onContainer: colorClass("error-color-10"),
        },
        background: {
          default: colorClass("neutral-color-99"),
          on: colorClass("neutral-color-10"),
          container: colorClass("neutral-color-99"),
          onContainer: colorClass("neutral-color-10"),
        },
        surfaceVariant: {
          default: colorClass("neutral-variant-color-90"),
          on: colorClass("neutral-variant-color-30"),
          container: colorClass("neutral-variant-color-50"),
          onContainer: colorClass("neutral-variant-color-80"),
        },
      },
      dark: {
        primary: {
          default: colorClass("primary-color-80"),
          on: colorClass("primary-color-20"),
          container: colorClass("primary-color-30"),
          onContainer: colorClass("primary-color-90"),
        },
        secondary: {
          default: colorClass("secondary-color-80"),
          on: colorClass("secondary-color-20"),
          container: colorClass("secondary-color-30"),
          onContainer: colorClass("secondary-color-90"),
        },
        tertiary: {
          default: colorClass("tertiary-color-80"),
          on: colorClass("tertiary-color-20"),
          container: colorClass("tertiary-color-30"),
          onContainer: colorClass("tertiary-color-90"),
        },
        error: {
          default: colorClass("error-color-80"),
          on: colorClass("error-color-20"),
          container: colorClass("error-color-30"),
          onContainer: colorClass("error-color-90"),
        },
        background: {
          default: colorClass("neutral-color-10"),
          on: colorClass("neutral-color-90"),
          container: colorClass("neutral-color-10"),
          onContainer: colorClass("neutral-color-90"),
        },
        surfaceVariant: {
          default: colorClass("neutral-variant-color-30"),
          on: colorClass("neutral-variant-color-80"),
          container: colorClass("neutral-variant-color-60"),
          onContainer: colorClass("neutral-variant-color-30"),
        },
      },
      surface: {
        light: colorClass("neutral-color-99"),
        dark: colorClass("neutral-color-10"),
      },
      transparent: {
        black: {
          xs: colorClass("transparent-black-xs"),
          sm: colorClass("transparent-black-sm"),
          md: colorClass("transparent-black-md"),
          lg: colorClass("transparent-black-lg"),
          xl: colorClass("transparent-black-xl"),
        },
        white: {
          xs: colorClass("transparent-white-xs"),
          sm: colorClass("transparent-white-sm"),
          md: colorClass("transparent-white-md"),
          lg: colorClass("transparent-white-lg"),
          xl: colorClass("transparent-white-xl"),
        },
      },
      black: colorClass("black-color"),
      white: colorClass("white-color"),
    },
    boxShadow: {
      none: "var(--shadow-none)",
      100: "var(--shadow-100)",
      200: "var(--shadow-200)",
      300: "var(--shadow-300)",
      400: "var(--shadow-400)",
      500: "var(--shadow-500)",
      600: "var(--shadow-600)",
    },
  },
  plugins: [],
};
