circletone/tailwind.config.js

var colors = require('tailwindcss/colors');
var plugin = require('tailwindcss/plugin');
var types = ['primary', 'secondary', 'tertiary', 'warning', 'success', 'error'];

function generateSafeList(types) {
  var safelist = [];
  types.forEach(type => {
    safelist.push(
      ...[
        `text-on-${type}`,
        `dark:text-on-${type}-dark`,
        `hover:text-${type}-dark`,
        `dark:hover:text-${type}`,
        `bg-${type}`,
        `from-${type}-variant`,
        `to-${type}`,
        `dark:bg-${type}-dark`,
        `hover:bg-${type}-variant`,
        `hover:dark:bg-${type}-variant-dark`,
        `border-${type}`,
        `dark:border-${type}-dark`,
        `hover:border-${type}-variant`,
        `dark:hover:border-${type}-variant-dark`,
      ]
    );
  });
  return safelist;
}

/** @type {import('tailwindcss').Config} */

module.exports = {
  darkMode: 'selector',
  content: ['./src/**/*.{html,js,ts}'],
  safelist: generateSafeList(types),
  theme: {
    extend: {
      aspectRatio: {
        '16/9': '16 / 9',
        '4/5': '4 / 5',
        '1/1': '1 / 1',
      },
      fontFamily: {
        primary: 'var(--font-primary)',
        title: 'var(--font-title)',
        logo: 'var(--font-logo)',
      },
      colors: {
        ...colors,
        primary: {
          DEFAULT: 'rgb(var(--primary-400) / <alpha-value>)',
          dark: 'rgb(var(--primary-700) / <alpha-value>)',
          container: {
            DEFAULT: 'rgb(var(--primary-200) / <alpha-value>)',
            dark: 'rgb(var(--primary-800) / <alpha-value>)',
          },
          variant: {
            DEFAULT: 'rgb(var(--primary-600) / <alpha-value>)',
            dark: 'rgb(var(--primary-500) / <alpha-value>)',
          },
          50: 'rgb(var(--primary-50) / <alpha-value>)',
          100: 'rgb(var(--primary-100) / <alpha-value>)',
          150: 'rgb(var(--primary-150) / <alpha-value>)',
          200: 'rgb(var(--primary-200) / <alpha-value>)',
          250: 'rgb(var(--primary-250) / <alpha-value>)',
          300: 'rgb(var(--primary-300) / <alpha-value>)',
          350: 'rgb(var(--primary-350) / <alpha-value>)',
          400: 'rgb(var(--primary-400) / <alpha-value>)',
          500: 'rgb(var(--primary-500) / <alpha-value>)',
          600: 'rgb(var(--primary-600) / <alpha-value>)',
          700: 'rgb(var(--primary-700) / <alpha-value>)',
          800: 'rgb(var(--primary-800) / <alpha-value>)',
          900: 'rgb(var(--primary-900) / <alpha-value>)',
          950: 'rgb(var(--primary-950) / <alpha-value>)',
        },
        secondary: {
          DEFAULT: 'rgb(var(--secondary-400) / <alpha-value>)',
          dark: 'rgb(var(--secondary-700) / <alpha-value>)',
          container: {
            DEFAULT: 'rgb(var(--secondary-200) / <alpha-value>)',
            dark: 'rgb(var(--secondary-800) / <alpha-value>)',
          },
          variant: {
            DEFAULT: 'rgb(var(--secondary-600) / <alpha-value>)',
            dark: 'rgb(var(--secondary-500) / <alpha-value>)',
          },
          50: 'rgb(var(--secondary-50) / <alpha-value>)',
          100: 'rgb(var(--secondary-100) / <alpha-value>)',
          150: 'rgb(var(--secondary-150) / <alpha-value>)',
          200: 'rgb(var(--secondary-200) / <alpha-value>)',
          250: 'rgb(var(--secondary-250) / <alpha-value>)',
          300: 'rgb(var(--secondary-300) / <alpha-value>)',
          350: 'rgb(var(--secondary-350) / <alpha-value>)',
          400: 'rgb(var(--secondary-400) / <alpha-value>)',
          500: 'rgb(var(--secondary-500) / <alpha-value>)',
          600: 'rgb(var(--secondary-600) / <alpha-value>)',
          700: 'rgb(var(--secondary-700) / <alpha-value>)',
          800: 'rgb(var(--secondary-800) / <alpha-value>)',
          900: 'rgb(var(--secondary-900) / <alpha-value>)',
          950: 'rgb(var(--secondary-950) / <alpha-value>)',
        },
        tertiary: {
          DEFAULT: 'rgb(var(--tertiary-400) / <alpha-value>)',
          dark: 'rgb(var(--tertiary-700) / <alpha-value>)',
          container: {
            DEFAULT: 'rgb(var(--tertiary-200) / <alpha-value>)',
            dark: 'rgb(var(--tertiary-800) / <alpha-value>)',
          },
          variant: {
            DEFAULT: 'rgb(var(--tertiary-600) / <alpha-value>)',
            dark: 'rgb(var(--tertiary-500) / <alpha-value>)',
          },
          50: 'rgb(var(--tertiary-50) / <alpha-value>)',
          100: 'rgb(var(--tertiary-100) / <alpha-value>)',
          150: 'rgb(var(--tertiary-150) / <alpha-value>)',
          200: 'rgb(var(--tertiary-200) / <alpha-value>)',
          250: 'rgb(var(--tertiary-250) / <alpha-value>)',
          300: 'rgb(var(--tertiary-300) / <alpha-value>)',
          350: 'rgb(var(--tertiary-350) / <alpha-value>)',
          400: 'rgb(var(--tertiary-400) / <alpha-value>)',
          500: 'rgb(var(--tertiary-500) / <alpha-value>)',
          600: 'rgb(var(--tertiary-600) / <alpha-value>)',
          700: 'rgb(var(--tertiary-700) / <alpha-value>)',
          800: 'rgb(var(--tertiary-800) / <alpha-value>)',
          900: 'rgb(var(--tertiary-900) / <alpha-value>)',
          950: 'rgb(var(--tertiary-950) / <alpha-value>)',
        },
        neutral: {
          50: 'rgb(var(--neutral-50) / <alpha-value>)',
          100: 'rgb(var(--neutral-100) / <alpha-value>)',
          150: 'rgb(var(--neutral-150) / <alpha-value>)',
          200: 'rgb(var(--neutral-200) / <alpha-value>)',
          250: 'rgb(var(--neutral-250) / <alpha-value>)',
          300: 'rgb(var(--neutral-300) / <alpha-value>)',
          350: 'rgb(var(--neutral-350) / <alpha-value>)',
          400: 'rgb(var(--neutral-400) / <alpha-value>)',
          500: 'rgb(var(--neutral-500) / <alpha-value>)',
          600: 'rgb(var(--neutral-600) / <alpha-value>)',
          700: 'rgb(var(--neutral-700) / <alpha-value>)',
          800: 'rgb(var(--neutral-800) / <alpha-value>)',
          900: 'rgb(var(--neutral-900) / <alpha-value>)',
          950: 'rgb(var(--neutral-950) / <alpha-value>)',
        },
        'neutral-variant': {
          50: 'rgb(var(--neutral-variant-50) / <alpha-value>)',
          100: 'rgb(var(--neutral-variant-100) / <alpha-value>)',
          150: 'rgb(var(--neutral-variant-150) / <alpha-value>)',
          200: 'rgb(var(--neutral-variant-200) / <alpha-value>)',
          250: 'rgb(var(--neutral-variant-250) / <alpha-value>)',
          300: 'rgb(var(--neutral-variant-300) / <alpha-value>)',
          350: 'rgb(var(--neutral-variant-350) / <alpha-value>)',
          400: 'rgb(var(--neutral-variant-400) / <alpha-value>)',
          500: 'rgb(var(--neutral-variant-500) / <alpha-value>)',
          600: 'rgb(var(--neutral-variant-600) / <alpha-value>)',
          700: 'rgb(var(--neutral-variant-700) / <alpha-value>)',
          800: 'rgb(var(--neutral-variant-800) / <alpha-value>)',
          900: 'rgb(var(--neutral-variant-900) / <alpha-value>)',
          950: 'rgb(var(--neutral-variant-950) / <alpha-value>)',
        },
        background: {
          DEFAULT: 'rgb(var(--neutral-50) / <alpha-value>)',
          dark: 'rgb(var(--neutral-variant-950) / <alpha-value>)',
        },
        surface: {
          DEFAULT: 'rgb(var(--primary-50) / <alpha-value>)',
          dark: 'rgb(var(--primary-950) / <alpha-value>)',
          variant: {
            DEFAULT: 'rgb(var(--neutral-variant-50) / <alpha-value>)',
            dark: 'rgb(var(--neutral-variant-800) / <alpha-value>)',
          },
        },
        outline: {
          DEFAULT: 'rgb(var(--neutral-variant-600) / <alpha-value>)',
          dark: 'rgb(var(--neutral-variant-500) / <alpha-value>)',
          variant: {
            DEFAULT: 'rgb(var(--neutral-variant-300) / <alpha-value>)',
            dark: 'rgb(var(--neutral-variant-800) / <alpha-value>)',
          },
        },
        success: {
          DEFAULT: colors.green[400],
          dark: colors.green[700],
          variant: {
            DEFAULT: colors.green[500],
            dark: colors.green[600],
          },
        },
        warning: {
          DEFAULT: colors.amber[400],
          dark: colors.amber[700],
          variant: {
            DEFAULT: colors.amber[500],
            dark: colors.amber[600],
          },
        },
        error: {
          DEFAULT: colors.red[400],
          dark: colors.red[700],
          variant: {
            DEFAULT: colors.red[500],
            dark: colors.red[600],
          },
        },
        on: {
          primary: {
            DEFAULT: 'rgb(var(--neutral-variant-950) / <alpha-value>)',
            dark: 'rgb(var(--neutral-variant-50) / <alpha-value>)',
            container: {
              DEFAULT: 'rgb(var(--neutral-variant-900) / <alpha-value>)',
              dark: 'rgb(var(--neutral-variant-50) / <alpha-value>)',
            },
            variant: {
              DEFAULT: 'rgb(var(--neutral-variant-200) / <alpha-value>)',
              dark: 'rgb(var(--neutral-variant-100) / <alpha-value>)',
            },
          },
          secondary: {
            DEFAULT: 'rgb(var(--neutral-variant-950) / <alpha-value>)',
            dark: 'rgb(var(--neutral-variant-50) / <alpha-value>)',
            container: {
              DEFAULT: 'rgb(var(--secondary-900) / <alpha-value>)',
              dark: 'rgb(var(--secondary-50) / <alpha-value>)',
            },
            variant: {
              DEFAULT: 'rgb(var(--secondary-200) / <alpha-value>)',
              dark: 'rgb(var(--secondary-100) / <alpha-value>)',
            },
          },
          tertiary: {
            DEFAULT: 'rgb(var(--neutral-variant-950) / <alpha-value>)',
            dark: 'rgb(var(--neutral-variant-50) / <alpha-value>)',
            container: {
              DEFAULT: 'rgb(var(--tertiary-900) / <alpha-value>)',
              dark: 'rgb(var(--tertiary-50) / <alpha-value>)',
            },
            variant: {
              DEFAULT: 'rgb(var(--tertiary-200) / <alpha-value>)',
              dark: 'rgb(var(--tertiary-100) / <alpha-value>)',
            },
          },
          background: {
            DEFAULT: 'rgb(var(--neutral-900) / <alpha-value>)',
            dark: 'rgb(var(--neutral-variant-100) / <alpha-value>)',
          },
          surface: {
            DEFAULT: 'rgb(var(--neutral-900) / <alpha-value>)',
            dark: 'rgb(var(--neutral-variant-100) / <alpha-value>)',
            variant: {
              DEFAULT: 'rgb(var(--neutral-variant-800) / <alpha-value>)',
              dark: 'rgb(var(--neutral-variant-300) / <alpha-value>)',
            },
          },
          success: {
            DEFAULT: colors.green[950],
            dark: colors.green[50],
            variant: {
              DEFAULT: colors.green[800],
              dark: colors.green[300],
            },
          },
          warning: {
            DEFAULT: colors.amber[950],
            dark: colors.amber[50],
            variant: {
              DEFAULT: colors.amber[300],
              dark: colors.amber[800],
            },
          },
          error: {
            DEFAULT: colors.red[950],
            dark: colors.red[50],
            variant: {
              DEFAULT: colors.red[300],
              dark: colors.red[800],
            },
          },
        },
      },
    },
  },
  plugins: [
    plugin(function ({ addBase, theme }) {
      addBase({
        h1: { fontSize: theme('fontSize.3xl'), fontWeight: theme('fontWeight.bold') },
        h2: { fontSize: theme('fontSize.2xl'), fontWeight: theme('fontWeight.bold') },
        h3: { fontSize: theme('fontSize.xl'), fontWeight: theme('fontWeight.semibold') },
        h4: { fontSize: theme('fontSize.lg'), fontWeight: theme('fontWeight.semibold') },
      });
    }),
  ],
};