circletone/tailwind.preset.js

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

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

module.exports = {
  theme: {
    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>)',
      },
    },
  },
  plugins: [require('tailwindcss/colors')],
};