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

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

module.exports = {
  prefix: "tw-",
  content: [
    "./src/**/*.{html,ts,mdx}",
    "../../libs/assets/src/**/*.{html,ts}",
    "../../libs/components/src/**/*.{html,ts,mdx}",
    "../../libs/key-management-ui/src/**/*.{html,ts}",
    "../../libs/auth/src/**/*.{html,ts}",
  ],
  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-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)",
        disabled: "var(--color-bg-disabled)",
        "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)",
        "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": "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)",
        hover: "var(--color-bg-hover)",
        overlay: "var(--color-bg-overlay)",
        sidenav: "var(--color-sidenav-background)",
        "sidenav-active-item": "var(--color-sidenav-active-item)",
        "sidenav-item-hover": "var(--color-sidenav-item-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)",
        heading: "var(--color-fg-heading)",
        body: "var(--color-fg-body)",
        "body-subtle": "var(--color-fg-body-subtle)",
        disabled: "var(--color-fg-disabled)",
        "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)",
        "sidenav-text": "var(--color-sidenav-text)",
      },
      border: {
        muted: "var(--color-border-muted)",
        light: "var(--color-border-light)",
        base: "var(--color-border-base)",
        strong: "var(--color-border-strong)",
        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)",
      },
    },
    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-heading": "var(--color-fg-heading)",
      "fg-body": "var(--color-fg-body)",
      "fg-body-subtle": "var(--color-fg-body-subtle)",
      "fg-disabled": "var(--color-fg-disabled)",
      "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-sidenav-text": "var(--color-sidenav-text)",
    }),
    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%"],
      },
      container: {
        "@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"),
  ],
};