solidtime/tailwind.config.js

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';

/** @type {import("tailwindcss").Config} */
export default {
    darkMode: ['selector', '.dark'],
    content: [
        './extensions/Invoicing/resources/js/**/*.vue',
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
        './resources/js/**/*.ts',
    ],
    theme: {
        extend: {
            boxShadow: {
                card: 'var(--theme-shadow-card)',
                dropdown: 'var(--theme-shadow-dropdown)',
            },
            containers: {
                '2xs': '16rem',
            },
            fontFamily: {
                sans: ['Inter', ...defaultTheme.fontFamily.sans],
            },
            fontSize: {
                xs: ['0.75rem', { lineHeight: '1rem' }],
                sm: ['0.8125rem', { lineHeight: '1.125rem' }],
                base: ['0.875rem', { lineHeight: '1.25rem' }],
                lg: ['1rem', { lineHeight: '1.5rem' }],
                xl: ['1.125rem', { lineHeight: '1.75rem' }],
                '2xl': ['1.25rem', { lineHeight: '1.75rem' }],
                '3xl': ['1.5rem', { lineHeight: '2rem' }],
                '4xl': ['1.75rem', { lineHeight: '2.25rem' }],
                '5xl': ['2rem', { lineHeight: '1' }],
                '6xl': ['2.25rem', { lineHeight: '1' }],
                '7xl': ['2.5rem', { lineHeight: '1' }],
                '8xl': ['3rem', { lineHeight: '1' }],
                '9xl': ['3.5rem', { lineHeight: '1' }],
            },
            colors: {
                ring: 'var(--ring)',
                primary: {
                    DEFAULT: 'hsl(var(--primary))',
                    foreground: 'hsl(var(--primary-foreground))',
                },
                secondary: {
                    DEFAULT: 'hsl(var(--secondary))',
                    foreground: 'hsl(var(--secondary-foreground))',
                },
                tertiary: 'var(--color-bg-tertiary)',
                quaternary: 'var(--color-bg-quaternary)',
                background: 'var(--background)',
                'text-primary': 'var(--color-text-primary)',
                'text-secondary': 'var(--color-text-secondary)',
                'text-tertiary': 'var(--color-text-tertiary)',
                'text-quaternary': 'var(--color-text-quaternary)',
                'border-primary': 'var(--color-border-primary)',
                'border-secondary': 'var(--color-border-secondary)',
                'border-tertiary': 'var(--color-border-tertiary)',
                'default-background': 'var(--theme-color-default-background)',
                'default-background-separator': 'var(--theme-color-default-background-separator)',
                'row-background': 'var(--theme-color-row-background)',
                'card-background': 'var(--theme-color-card-background)',
                'card-background-active': 'var(--theme-color-card-background-active)',
                'card-background-separator': 'var(--theme-color-card-background-separator)',
                'card-border': 'var(--theme-color-card-border)',
                'card-border-active': 'var(--theme-color-card-border-active)',
                muted: {
                    DEFAULT: 'hsl(var(--muted))',
                    foreground: 'hsl(var(--muted-foreground))',
                },
                'tab-background': 'var(--theme-color-tab-background)',
                'tab-background-active': 'var(--theme-color-tab-background-active)',
                'tab-border': 'var(--theme-color-tab-border)',
                'icon-default': 'var(--theme-color-icon-default)',
                'icon-active': 'var(--theme-color-icon-active)',
                'menu-active': 'var(--theme-color-menu-active)',
                'input-border': 'var(--theme-color-input-border)',
                'input-border-active': 'var(--color-input-border-active)',
                'input-background': 'var(--theme-color-input-background)',
                'button-secondary-background': 'var(--theme-button-secondary-background)',
                'button-secondary-background-hover':
                    'var(--theme-button-secondary-background-active)',
                'button-secondary-border': 'var(--theme-color-card-border)',
                'row-separator': 'var(--theme-color-row-separator-background)',
                'row-heading-background': 'var(--theme-color-row-heading-background)',
                'row-heading-border': 'var(--theme-color-row-heading-border)',
                accent: {
                    '50': 'rgba(var(--color-accent-50), <alpha-value>)',
                    '100': 'rgba(var(--color-accent-100), <alpha-value>)',
                    '200': 'rgba(var(--color-accent-200), <alpha-value>)',
                    '300': 'rgba(var(--color-accent-300), <alpha-value>)',
                    '400': 'rgba(var(--color-accent-400), <alpha-value>)',
                    '500': 'rgba(var(--color-accent-500), <alpha-value>)',
                    '600': 'rgba(var(--color-accent-600), <alpha-value>)',
                    '700': 'rgba(var(--color-accent-700), <alpha-value>)',
                    '800': 'rgba(var(--color-accent-800), <alpha-value>)',
                    '900': 'rgba(var(--color-accent-900), <alpha-value>)',
                    '950': 'rgba(var(--color-accent-950), <alpha-value>)',
                    DEFAULT: 'var(--color-accent-default)',
                    foreground: 'var(--color-accent-foreground)',
                },
                'button-primary-background': 'var(--theme-color-button-primary-background)',
                'button-primary-background-hover':
                    'var(--theme-color-button-primary-background-hover)',
                'button-primary-border': 'var(--theme-color-button-primary-border)',
                'button-primary-text': 'var(--theme-color-button-primary-text)',
                'input-select-active': 'var(--theme-color-input-select-active)',
                'input-select-active-hover': 'var(--theme-color-input-select-active-hover)',
                foreground: 'var(--foreground)',
                card: {
                    DEFAULT: 'var(--card))',
                    foreground: 'var(--card-foreground))',
                },
                popover: {
                    DEFAULT: 'var(--popover)',
                    foreground: 'var(--popover-foreground)',
                    border: 'var(--popover-border)',
                },
                destructive: {
                    DEFAULT: 'var(--destructive)',
                    foreground: 'var(--destructive-foreground)',
                },
                border: 'var(--border)',
                input: 'var(--input)',
                chart: {
                    '1': 'hsl(var(--chart-1))',
                    '2': 'hsl(var(--chart-2))',
                    '3': 'hsl(var(--chart-3))',
                    '4': 'hsl(var(--chart-4))',
                    '5': 'hsl(var(--chart-5))',
                },
            },
            borderRadius: {
                lg: 'var(--radius)',
                md: 'calc(var(--radius) - 2px)',
                sm: 'calc(var(--radius) - 4px)',
            },
        },
    },

    plugins: [
        forms,
        typography,
        require('@tailwindcss/container-queries'),
        require('tailwindcss-animate'),
    ],
};