import defaultTheme from 'tailwindcss/defaultTheme';
import plugin from 'tailwindcss/plugin';
import type { Config } from 'tailwindcss';
import { tailwind } from '@tesseract-design/viewfinder-base';

const tesseractPlugin = plugin(
  ({ addUtilities }) => {
    addUtilities({
      '.font-condensed': {
        'font-stretch': 'condensed',
      },
      '.font-semi-condensed': {
        'font-stretch': 'semi-condensed',
      },
      '.font-expanded': {
        'font-stretch': 'expanded',
      },
      '.font-semi-expanded': {
        'font-stretch': 'semi-expanded',
      },
      '.font-inherit': {
        'font-stretch': 'inherit',
      },
      '.linejoin-round': {
        'stroke-linejoin': 'round',
      },
      '.linecap-round': {
        'stroke-linecap': 'round',
      },
    });
  },
  {
    theme: {
      fontFamily: {
        sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
        headings: ['var(--font-headings)', ...defaultTheme.fontFamily.sans],
        mono: ['var(--font-mono)', ...defaultTheme.fontFamily.mono],
        inherit: ['inherit'],
      },
      colors: {
        'sidebar': 'rgb(var(--color-sidebar)',
        'topbar': 'rgb(var(--color-topbar)',

        'shade': 'rgb(var(--color-shade))',
        'negative': 'rgb(var(--color-negative))',
        'positive': 'rgb(var(--color-positive))',
        'primary': 'hsl(var(--color-primary))',
        'secondary': 'rgb(var(--color-secondary))',
        'tertiary': 'rgb(var(--color-tertiary))',
        'code-number': 'rgb(var(--color-code-number))',
        'code-keyword': 'rgb(var(--color-code-keyword))',
        'code-type': 'rgb(var(--color-code-type))',
        'code-instance-attribute': 'rgb(var(--color-code-instance-attribute))',
        'code-function': 'rgb(var(--color-code-function))',
        'code-parameter': 'rgb(var(--color-code-parameter))',
        'code-property': 'rgb(var(--color-code-property))',
        'code-string': 'rgb(var(--color-code-string))',
        'code-variable': 'rgb(var(--color-code-variable))',
        'code-regexp': 'rgb(var(--color-code-regexp))',
        'code-url': 'rgb(var(--color-code-url))',
        'code-global': 'rgb(var(--color-code-global))',
        'current': 'currentcolor',
        'inherit': 'inherit',
        'transparent': 'transparent',
      },
      extend: {
        fontSize: {
          'lg': '1.125em',
          'xl': '1.25em',
          '2xl': '1.5em',
          '3xl': '1.75em',
          '4xl': '2em',
          '5xl': '3em',
          '6xl': '4em',
          'xxs': '0.625rem',
        },
        borderRadius: {
          inherit: 'inherit',
        },
        maxWidth: {
          '1/3': '33.333333%',
        },
        minWidth: {
          6: '1.5rem',
          10: '2.5rem',
          12: '3rem',
          16: '4rem',
          48: '12rem',
          64: '16rem',

          32: '8rem',
        },
        minHeight: {
          6: '1.5rem',
          10: '2.5rem',
          12: '3rem',
          16: '4rem',
          64: '16rem',
        },
        strokeWidth: {
          3: '3',
        },
      },
    },
  },
);

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@tesseract-design/viewfinder-react/dist/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@tesseract-design/web-*-react/**/*.{js.ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [
    tailwind.plugin({

    }),
    tesseractPlugin,
  ],
}
export default config