tailwind.config.ts

import type { FontSizesType } from '#/theme/theme.types';
import { mapValues } from 'lodash';
import type { Config } from 'tailwindcss';
import { colors } from './config/theme/colors';
import figmaColors from './config/theme/figmaColors';
import { fontSizes, lineHeights } from './config/theme/sizes';

export const tailwindColors = mapValues(
  figmaColors,
  (_value, key) => `var(--${key})`,
);

export const tailwindFontSizes = Object.keys(fontSizes).reduce((prev, curr) => {
  const size = curr as FontSizesType;
  return { ...prev, [curr]: [fontSizes[size], lineHeights[size]] };
}, {});

export default {
  darkMode: ['class', '[data-mantine-color-scheme="dark"]'],
  content: [
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './config/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        ...colors,
        ...tailwindColors,
        background: 'var(--background)',
        foreground: 'var(--foreground)',

        sy10: 'var(--mantine-color-yellow-2)', // SY10
        sy20: 'var(--mantine-color-yellow-3)', // SY20
        sy30: 'var(--mantine-color-yellow-4)', // SY30
        sy40: 'var(--mantine-color-yellow-7)', // SY40
        sy50: 'var(--mantine-color-yellow-9)', // SY50

        srr10: 'var(--mantine-color-red-2)', // SRR10
        srr20: 'var(--mantine-color-red-4)', // SRR20
        srr30: 'var(--mantine-color-red-6)', // SRR30
        srr40: 'var(--mantine-color-red-7)', // SRR40
        srr50: 'var(--mantine-color-red-9)', // SRR50

        sg10: 'var(--mantine-color-green-1)', // SG10
        sg20: 'var(--mantine-color-green-3)', // SG20
        sg30: 'var(--mantine-color-green-5)', // SG30
        sg40: 'var(--mantine-color-green-7)', // SG40
        sg50: 'var(--mantine-color-green-9)', // SG50

        sb10: 'var(--mantine-color-blue-1)', // SB10
        sb20: 'var(--mantine-color-blue-3)', // SB20
        sb30: 'var(--mantine-color-blue-5)', // SB30
        sb40: 'var(--mantine-color-blue-7)', // SB40
        sb50: 'var(--mantine-color-blue-9)', // SB50

        sc10: 'var(--mantine-color-cyan-1)', // SC10
        sc20: 'var(--mantine-color-cyan-3)', // SC20
        sc30: 'var(--mantine-color-cyan-5)', // SC30
        sc40: 'var(--mantine-color-cyan-7)', // SC40
        sc50: 'var(--mantine-color-cyan-9)', // SC50

        sm10: 'var(--mantine-color-magenta-1)', // SM10
        sm20: 'var(--mantine-color-magenta-3)', // SM20
        sm30: 'var(--mantine-color-magenta-5)', // SM30
        sm40: 'var(--mantine-color-magenta-7)', // SM40
        sm50: 'var(--mantine-color-magenta-9)', // SM50

        n10: 'var(--mantine-color-neutral-0)', // N10
        n20: 'var(--mantine-color-neutral-1)', // N20
        n30: 'var(--mantine-color-neutral-2)', // N30
        n40: 'var(--mantine-color-neutral-3)', // N40
        n50: 'var(--mantine-color-neutral-4)', // N50
        n60: 'var(--mantine-color-neutral-5)', // N60
        n70: 'var(--mantine-color-neutral-6)', // N70
        n80: 'var(--mantine-color-neutral-7)', // N80
        n90: 'var(--mantine-color-neutral-8)', // N90
        n100: 'var(--mantine-color-neutral-9)', //

        dark: Array.from({ length: 10 }).map(
          (_, i) => `var(--mantine-color-dark-${i + 1})`,
        ) as any,
      },
      borderWidth: {
        1: '1px',
      },
      backgroundImage: {
        'gradient-auth':
          'linear-gradient(180deg, rgba(0,81,194,1) 0%, rgba(0,55,133,1) 50%, rgba(0,30,71,1) 100%)',
      },
    },
    fontSize: {
      ...tailwindFontSizes,
    },
  },
  plugins: [],
} satisfies Config;