/* eslint-disable */
const colors = require("tailwindcss/colors");
const plugin = require("tailwindcss/plugin");
const path = require("path");

function rgba(color) {
  return "rgb(var(" + color + ") / <alpha-value>)";
}

// shared lib paths; add app-specific paths to the app's tailwind.config.js, not here
const libContent = [
  "./src/**/*.{html,ts,mdx}",
  "../../libs/admin-console/src/**/*.{html,ts,mdx}",
  "../../libs/angular/src/**/*.{html,ts,mdx}",
  "../../libs/assets/src/**/*.{html,ts,mdx}",
  "../../libs/auth/src/**/*.{html,ts,mdx}",
  "../../libs/billing/src/**/*.{html,ts,mdx}",
  "../../libs/dirt/card/src/**/*.{html,ts,mdx}",
  "../../libs/key-management-ui/src/**/*.{html,ts,mdx}",
  "../../libs/platform/src/**/*.{html,ts,mdx}",
  "../../libs/pricing/src/**/*.{html,ts,mdx}",
  "../../libs/subscription/src/**/*.{html,ts,mdx}",
  "../../libs/tools/generator/components/src/**/*.{html,ts,mdx}",
  "../../libs/tools/send/send-ui/src/**/*.{html,ts,mdx}",
  "../../libs/vault/src/**/*.{html,ts,mdx}",
].map((libPath) => path.resolve(__dirname, libPath));

module.exports = {
  prefix: "tw-",
  content: libContent,
  safelist: [],
  corePlugins: { preflight: false },
  theme: {
    colors: {
      transparent: {
        DEFAULT: colors.transparent,
        hover: "var(--color-transparent-hover)",
      },
      current: colors.current,
      black: colors.black,
      shadow: rgba("--color-shadow"),
      primary: {
        100: rgba("--color-primary-100"),
        300: rgba("--color-primary-300"),
        500: rgba("--color-primary-500"),
        600: rgba("--color-primary-600"),
        700: rgba("--color-primary-700"),
      },
      secondary: {
        100: rgba("--color-secondary-100"),
        300: rgba("--color-secondary-300"),
        500: rgba("--color-secondary-500"),
        600: rgba("--color-secondary-600"),
        700: rgba("--color-secondary-700"),
      },
      success: {
        100: rgba("--color-success-100"),
        600: rgba("--color-success-600"),
        700: rgba("--color-success-700"),
      },
      danger: {
        100: rgba("--color-danger-100"),
        600: rgba("--color-danger-600"),
        700: rgba("--color-danger-700"),
      },
      warning: {
        100: rgba("--color-warning-100"),
        600: rgba("--color-warning-600"),
        700: rgba("--color-warning-700"),
      },
      info: {
        100: rgba("--color-info-100"),
        600: rgba("--color-info-600"),
        700: rgba("--color-info-700"),
      },
      notification: {
        100: rgba("--color-notification-100"),
        600: rgba("--color-notification-600"),
      },
      text: {
        main: rgba("--color-text-main"),
        muted: rgba("--color-text-muted"),
        contrast: rgba("--color-text-contrast"),
        alt2: rgba("--color-text-alt2"),
        code: rgba("--color-text-code"),
      },
      background: {
        DEFAULT: "var(--color-bg-primary)",
        alt: "var(--color-bg-tertiary)",
        alt2: "var(--color-bg-brand)",
        alt3: "var(--color-bg-brand-strong)",
        alt4: "var(--color-brand-950)",
      },
      bg: {
        white: "var(--color-bg-white)",
        dark: "var(--color-bg-dark)",
        contrast: "var(--color-bg-contrast)",
        "contrast-soft": "var(--color-bg-contrast-soft)",
        "contrast-strong": "var(--color-bg-contrast-strong)",
        primary: "var(--color-bg-primary)",
        secondary: "var(--color-bg-secondary)",
        tertiary: "var(--color-bg-tertiary)",
        quaternary: "var(--color-bg-quaternary)",
        gray: "var(--color-bg-gray)",
        "gray-strong": "var(--color-bg-gray-strong)",
        inactive: "var(--color-bg-inactive)",
        "brand-softer": "var(--color-bg-brand-softer)",
        "brand-soft": "var(--color-bg-brand-soft)",
        "brand-medium": "var(--color-bg-brand-medium)",
        brand: "var(--color-bg-brand)",
        "brand-strong": "var(--color-bg-brand-strong)",
        "brand-stronger": "var(--color-bg-brand-stronger)",
        "success-soft": "var(--color-bg-success-soft)",
        "success-medium": "var(--color-bg-success-medium)",
        success: "var(--color-bg-success)",
        "success-strong": "var(--color-bg-success-strong)",
        "danger-soft": "var(--color-bg-danger-soft)",
        "danger-medium": "var(--color-bg-danger-medium)",
        danger: "var(--color-bg-danger)",
        "danger-strong": "var(--color-bg-danger-strong)",
        "warning-soft": "var(--color-bg-warning-soft)",
        "warning-medium": "var(--color-bg-warning-medium)",
        warning: "var(--color-bg-warning)",
        "warning-strong": "var(--color-bg-warning-strong)",
        "accent-primary-soft": "var(--color-bg-accent-primary-soft)",
        "accent-primary-medium": "var(--color-bg-accent-primary-medium)",
        "accent-primary-strong": "var(--color-bg-accent-primary-strong)",
        "accent-primary": "var(--color-bg-accent-primary)",
        "accent-secondary-soft": "var(--color-bg-accent-secondary-soft)",
        "accent-secondary-medium": "var(--color-bg-accent-secondary-medium)",
        "accent-secondary": "var(--color-bg-accent-secondary)",
        "accent-tertiary-soft": "var(--color-bg-accent-tertiary-soft)",
        "accent-tertiary-medium": "var(--color-bg-accent-tertiary-medium)",
        "accent-tertiary": "var(--color-bg-accent-tertiary)",
        "avatar-teal": "var(--color-bg-avatar-teal)",
        "avatar-teal-hover": "var(--color-bg-avatar-teal-hover)",
        "avatar-coral": "var(--color-bg-avatar-coral)",
        "avatar-coral-hover": "var(--color-bg-avatar-coral-hover)",
        "avatar-brand": "var(--color-bg-avatar-brand)",
        "avatar-brand-hover": "var(--color-bg-avatar-brand-hover)",
        "avatar-green": "var(--color-bg-avatar-green)",
        "avatar-green-hover": "var(--color-bg-avatar-green-hover)",
        "avatar-purple": "var(--color-bg-avatar-purple)",
        "avatar-purple-hover": "var(--color-bg-avatar-purple-hover)",
        hover: "var(--color-bg-hover)",
        "hover-contrast": "var(--color-bg-hover-contrast)",
        overlay: "var(--color-bg-overlay)",
        nav: "var(--color-nav-bg-primary)",
        "nav-hover": "var(--color-nav-bg-primary-hover)",
      },
      hover: {
        default: "var(--color-hover-default)",
        contrast: "var(--color-hover-contrast)",
      },
      "marketing-logo": rgba("--color-marketing-logo"),
      "bw-blue": rgba("--color-bw-blue"),
      illustration: {
        outline: rgba("--color-illustration-outline"),
        "bg-primary": rgba("--color-illustration-bg-primary"),
        "bg-secondary": rgba("--color-illustration-bg-secondary"),
        "bg-tertiary": rgba("--color-illustration-bg-tertiary"),
        tertiary: rgba("--color-illustration-tertiary"),
        logo: rgba("--color-illustration-logo"),
      },
      fg: {
        white: "var(--color-fg-white)",
        dark: "var(--color-fg-dark)",
        contrast: "var(--color-fg-contrast)",
        "contrast-strong": "var(--color-fg-contrast-strong)",
        heading: "var(--color-fg-heading)",
        body: "var(--color-fg-body)",
        "body-subtle": "var(--color-fg-body-subtle)",
        inactive: "var(--color-fg-inactive)",
        "brand-soft": "var(--color-fg-brand-soft)",
        brand: "var(--color-fg-brand)",
        "brand-strong": "var(--color-fg-brand-strong)",
        success: "var(--color-fg-success)",
        "success-strong": "var(--color-fg-success-strong)",
        danger: "var(--color-fg-danger)",
        "danger-strong": "var(--color-fg-danger-strong)",
        warning: "var(--color-fg-warning)",
        "warning-strong": "var(--color-fg-warning-strong)",
        sensitive: "var(--color-fg-sensitive)",
        "accent-primary-soft": "var(--color-fg-accent-primary-soft)",
        "accent-primary": "var(--color-fg-accent-primary)",
        "accent-primary-strong": "var(--color-fg-accent-primary-strong)",
        "accent-secondary-soft": "var(--color-fg-accent-secondary-soft)",
        "accent-secondary": "var(--color-fg-accent-secondary)",
        "accent-secondary-strong": "var(--color-fg-accent-secondary-strong)",
        "accent-tertiary-soft": "var(--color-fg-accent-tertiary-soft)",
        "accent-tertiary": "var(--color-fg-accent-tertiary)",
        "accent-tertiary-strong": "var(--color-fg-accent-tertiary-strong)",
        nav: "var(--color-nav-fg-primary)",
      },
      border: {
        muted: "var(--color-border-muted)",
        light: "var(--color-border-light)",
        base: "var(--color-border-base)",
        strong: "var(--color-border-strong)",
        stronger: "var(--color-border-stronger)",
        buffer: "var(--color-border-buffer)",
        "brand-soft": "var(--color-border-brand-soft)",
        brand: "var(--color-border-brand)",
        "brand-strong": "var(--color-border-brand-strong)",
        "success-soft": "var(--color-border-success-soft)",
        success: "var(--color-border-success)",
        "success-strong": "var(--color-border-success-strong)",
        "danger-soft": "var(--color-border-danger-soft)",
        danger: "var(--color-border-danger)",
        "danger-strong": "var(--color-border-danger-strong)",
        "warning-soft": "var(--color-border-warning-soft)",
        warning: "var(--color-border-warning)",
        "warning-strong": "var(--color-border-warning-strong)",
        "accent-primary-soft": "var(--color-border-accent-primary-soft)",
        "accent-primary": "var(--color-border-accent-primary)",
        "accent-secondary-soft": "var(--color-border-accent-secondary-soft)",
        "accent-secondary": "var(--color-border-accent-secondary)",
        "accent-tertiary-soft": "var(--color-border-accent-tertiary-soft)",
        "accent-tertiary": "var(--color-border-accent-tertiary)",
        focus: "var(--color-border-focus)",
        "focus-contrast": "var(--color-border-focus-contrast)",
        "nav-focus": "var(--color-nav-border-primary-focus)",
        "nav-divider": "var(--color-nav-border-primary)",
      },
    },
    textColor: () => ({
      main: rgba("--color-text-main"),
      muted: rgba("--color-text-muted"),
      contrast: rgba("--color-text-contrast"),
      alt2: rgba("--color-text-alt2"),
      code: rgba("--color-text-code"),
      black: colors.black,
      success: {
        DEFAULT: rgba("--color-success-600"),
        600: rgba("--color-success-600"),
        700: rgba("--color-success-700"),
      },
      danger: {
        DEFAULT: rgba("--color-danger-600"),
        600: rgba("--color-danger-600"),
        700: rgba("--color-danger-700"),
      },
      warning: {
        DEFAULT: rgba("--color-warning-600"),
        600: rgba("--color-warning-600"),
        700: rgba("--color-warning-700"),
      },
      info: {
        DEFAULT: rgba("--color-info-600"),
        600: rgba("--color-info-600"),
        700: rgba("--color-info-700"),
      },
      primary: {
        300: rgba("--color-primary-300"),
        600: rgba("--color-primary-600"),
        700: rgba("--color-primary-700"),
      },
      secondary: {
        300: rgba("--color-secondary-300"),
        700: rgba("--color-secondary-700"),
      },
      notification: {
        600: rgba("--color-notification-600"),
      },
      // New semantic fg tokens - manually flattened to generate tw-text-fg-* utilities
      "fg-white": "var(--color-fg-white)",
      "fg-dark": "var(--color-fg-dark)",
      "fg-contrast": "var(--color-fg-contrast)",
      "fg-contrast-strong": "var(--color-fg-contrast-strong)",
      "fg-heading": "var(--color-fg-heading)",
      "fg-body": "var(--color-fg-body)",
      "fg-body-subtle": "var(--color-fg-body-subtle)",
      "fg-inactive": "var(--color-fg-inactive)",
      "fg-brand-soft": "var(--color-fg-brand-soft)",
      "fg-brand": "var(--color-fg-brand)",
      "fg-brand-strong": "var(--color-fg-brand-strong)",
      "fg-success": "var(--color-fg-success)",
      "fg-success-strong": "var(--color-fg-success-strong)",
      "fg-danger": "var(--color-fg-danger)",
      "fg-danger-strong": "var(--color-fg-danger-strong)",
      "fg-warning": "var(--color-fg-warning)",
      "fg-warning-strong": "var(--color-fg-warning-strong)",
      "fg-sensitive": "var(--color-fg-sensitive)",
      "fg-accent-primary-soft": "var(--color-fg-accent-primary-soft)",
      "fg-accent-primary": "var(--color-fg-accent-primary)",
      "fg-accent-primary-strong": "var(--color-fg-accent-primary-strong)",
      "fg-accent-secondary-soft": "var(--color-fg-accent-secondary-soft)",
      "fg-accent-secondary": "var(--color-fg-accent-secondary)",
      "fg-accent-secondary-strong": "var(--color-fg-accent-secondary-strong)",
      "fg-accent-tertiary-soft": "var(--color-fg-accent-tertiary-soft)",
      "fg-accent-tertiary": "var(--color-fg-accent-tertiary)",
      "fg-accent-tertiary-strong": "var(--color-fg-accent-tertiary-strong)",
      "fg-nav": "var(--color-nav-fg-primary)",
    }),
    borderColor: ({ theme }) => ({
      ...theme("colors"),
      // New semantic border tokens - manually flattened to generate tw-border-border-* utilities
      "border-muted": "var(--color-border-muted)",
      "border-light": "var(--color-border-light)",
      "border-base": "var(--color-border-base)",
      "border-strong": "var(--color-border-strong)",
      "border-buffer": "var(--color-border-buffer)",
      "border-brand-soft": "var(--color-border-brand-soft)",
      "border-brand": "var(--color-border-brand)",
      "border-brand-strong": "var(--color-border-brand-strong)",
      "border-success-soft": "var(--color-border-success-soft)",
      "border-success": "var(--color-border-success)",
      "border-success-strong": "var(--color-border-success-strong)",
      "border-danger-soft": "var(--color-border-danger-soft)",
      "border-danger": "var(--color-border-danger)",
      "border-danger-strong": "var(--color-border-danger-strong)",
      "border-warning-soft": "var(--color-border-warning-soft)",
      "border-warning": "var(--color-border-warning)",
      "border-warning-strong": "var(--color-border-warning-strong)",
      "border-accent-primary-soft": "var(--color-border-accent-primary-soft)",
      "border-accent-primary": "var(--color-border-accent-primary)",
      "border-accent-secondary-soft": "var(--color-border-accent-secondary-soft)",
      "border-accent-secondary": "var(--color-border-accent-secondary)",
      "border-accent-tertiary-soft": "var(--color-border-accent-tertiary-soft)",
      "border-accent-tertiary": "var(--color-border-accent-tertiary)",
      "border-focus": "var(--color-border-focus)",
    }),
    fontFamily: {
      sans: "var(--font-sans)",
      serif: "var(--font-serif)",
      mono: "var(--font-mono)",
    },
    ringOffsetColor: ({ theme }) => ({
      DEFAULT: theme("colors.background"),
      ...theme("colors"),
    }),
    extend: {
      width: {
        "50vw": "50vw",
        "75vw": "75vw",
      },
      minWidth: {
        52: "13rem",
      },
      maxWidth: ({ theme }) => ({
        ...theme("width"),
        "90vw": "90vw",
      }),
      fontSize: {
        "3xl": ["1.875rem", "150%"],
        "2xl": ["1.5rem", "150%"],
        xl: ["1.25rem", "150%"],
        lg: ["1.125rem", "150%"],
        md: ["1rem", "150%"],
        base: ["1rem", "150%"],
        sm: ["0.875rem", "150%"],
        xs: [".75rem", "150%"],
        xxs: [".5rem", "150%"],
      },
      container: {
        "@3xl": "769px",
        "@5xl": "1100px",
      },
      keyframes: {
        slideUp: {
          "0%": { opacity: "0", transform: "translateY(50px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
        slideDown: {
          "0%": { opacity: "0", transform: "translateY(-50px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
      },
      animation: {
        "slide-up": "slideUp 0.3s ease-out",
        "slide-down": "slideDown 0.3s ease-out",
      },
    },
  },
  plugins: [
    plugin(function ({ matchUtilities, theme, addUtilities, addComponents, e, config }) {
      matchUtilities(
        {
          "mask-image": (value) => ({
            "-webkit-mask-image": value,
            "mask-image": value,
          }),
          "mask-position": (value) => ({
            "-webkit-mask-position": value,
            "mask-position": value,
          }),
          "mask-repeat": (value) => ({
            "-webkit-mask-repeat": value,
            "mask-repeat": value,
          }),
        },
        {},
      );
    }),
    plugin(function ({ addVariant }) {
      for (const state of [
        "active",
        "hover",
        "focus",
        "focus-within",
        "focus-visible",
        "target",
        "visited",
      ]) {
        addVariant(state, [`&:${state}`, `&.test-${state}`]);
      }
    }),
    /** Plugin for compact mode */
    plugin(function ({ addVariant }) {
      addVariant("bit-compact", ".bit-compact &");
    }),
    require("@tailwindcss/container-queries"),
  ],
};
