circletone/tailwind.config.js

var colors = require('tailwindcss/colors');
var plugin = require('tailwindcss/plugin');

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

module.exports = {
  darkMode: 'selector',
  content: ['./src/**/*.{html,js,ts}'],
  theme: {
    extend: {
      darkMode: 'class',
      fontFamily: {
        primary: 'var(--font-primary)',
        title: 'var(--font-title)',
        logo: 'var(--font-logo)',
      },
      colors: {
        ...colors,
        primary: {
          DEFAULT: 'rgb(var(--primary) / <alpha-value>)',
          dark: 'rgb(var(--primary-dark) / <alpha-value>)',
          variation: 'rgb(var(--primary-variation) / <alpha-value>)',
          'variation-dark': 'rgb(var(--primary-variation-dark) / <alpha-value>)',
        },
        secondary: {
          DEFAULT: 'rgb(var(--secondary) / <alpha-value>)',
          dark: 'rgb(var(--secondary-dark) / <alpha-value>)',
        },
        background: {
          DEFAULT: 'rgb(var(--background) / <alpha-value>)',
          dark: 'rgb(var(--background-dark) / <alpha-value>)',
        },
        surface: {
          DEFAULT: 'rgb(var(--surface) / <alpha-value>)',
          variation: 'rgb(var(--surface-variation) / <alpha-value>)',
          dark: 'rgb(var(--surface-dark) / <alpha-value>)',
          'variation-dark': 'rgb(var(--surface-variation-dark) / <alpha-value>)',
        },
        accent: {
          DEFAULT: 'rgb(var(--accent) / <alpha-value>)',
          dark: 'rgb(var(--accent-dark) / <alpha-value>)',
        },
        on: {
          primary: 'rgb(var(--on-primary) / <alpha-value>)',
          'primary-variation': 'rgb(var(--on-primary-variation) / <alpha-value>)',
          secondary: 'rgb(var(--on-secondary) / <alpha-value>)',
          'secondary-variation': 'rgb(var(--on-secondary-variation) / <alpha-value>)',
          accent: 'rgb(var(--on-accent) / <alpha-value>)',
          background: 'rgb(var(--on-background) / <alpha-value>)',
          'background-variation': 'rgb(var(--on-background-variation) / <alpha-value>)',
          surface: 'rgb(var(--on-surface) / <alpha-value>)',
          'surface-variation': 'rgb(var(--on-surface-variation) / <alpha-value>)',
          'primary-dark': 'rgb(var(--on-primary-dark) / <alpha-value>)',
          'primary-variation-dark': 'rgb(var(--on-primary-variation-dark) / <alpha-value>)',
          'secondary-dark': 'rgb(var(--on-secondary-dark) / <alpha-value>)',
          'secondary-variation-dark': 'rgb(var(--on-secondary-variation-dark) / <alpha-value>)',
          'accent-dark': 'rgb(var(--on-accent-dark) / <alpha-value>)',
          'background-dark': 'rgb(var(--on-background-dark) / <alpha-value>)',
          'background-variation-dark': 'rgb(var(--on-background-variation-dark) / <alpha-value>)',
          'surface-dark': 'rgb(var(--on-surface-dark) / <alpha-value>)',
          'surface-variation-dark': 'rgb(var(--on-surface-variation-dark) / <alpha-value>)',
        },
        success: {
          DEFAULT: colors.lime[600],
          variation: colors.green[700],
        },
        warning: {
          DEFAULT: colors.amber[400],
          variation: colors.amber[600],
        },
        error: {
          DEFAULT: colors.red[400],
          variation: colors.red[600],
        },
      },
    },
  },
  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') },
      });
    }),
  ],
};