circletone/tailwind.preset.js

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

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

module.exports = {
  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>)',
        },
      },
    },
  },
};