188 lines
5.2 KiB
JavaScript
188 lines
5.2 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
'./index.html',
|
|
'./src/**/*.{js,ts,jsx,tsx,mdx}',
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: '1rem',
|
|
},
|
|
extend: {
|
|
colors: {
|
|
primary: {
|
|
50: '#eef2ff',
|
|
100: '#e0e7ff',
|
|
200: '#c7d2fe',
|
|
300: '#a5b4fc',
|
|
400: '#818cf8',
|
|
500: '#4361ee',
|
|
600: '#4f46e5',
|
|
700: '#4338ca',
|
|
800: '#3730a3',
|
|
900: '#312e81',
|
|
DEFAULT: '#4361ee',
|
|
light: '#eaf1ff',
|
|
'dark-light': 'rgba(67,97,238,.15)',
|
|
},
|
|
secondary: {
|
|
50: '#f5f3ff',
|
|
100: '#ede9fe',
|
|
200: '#ddd6fe',
|
|
300: '#c4b5fd',
|
|
400: '#a78bfa',
|
|
500: '#805dca',
|
|
600: '#8b5cf6',
|
|
700: '#7c3aed',
|
|
800: '#6d28d9',
|
|
900: '#5b21b6',
|
|
DEFAULT: '#805dca',
|
|
light: '#ebe4f7',
|
|
'dark-light': 'rgb(128 93 202 / 15%)',
|
|
},
|
|
success: {
|
|
50: '#f0fdf4',
|
|
100: '#dcfce7',
|
|
200: '#bbf7d0',
|
|
300: '#86efac',
|
|
400: '#4ade80',
|
|
500: '#00ab55',
|
|
600: '#16a34a',
|
|
700: '#15803d',
|
|
800: '#166534',
|
|
900: '#14532d',
|
|
DEFAULT: '#00ab55',
|
|
light: '#ddf5f0',
|
|
'dark-light': 'rgba(0,171,85,.15)',
|
|
},
|
|
danger: {
|
|
50: '#fef2f2',
|
|
100: '#fee2e2',
|
|
200: '#fecaca',
|
|
300: '#fca5a5',
|
|
400: '#f87171',
|
|
500: '#e7515a',
|
|
600: '#dc2626',
|
|
700: '#b91c1c',
|
|
800: '#991b1b',
|
|
900: '#7f1d1d',
|
|
DEFAULT: '#e7515a',
|
|
light: '#fff5f5',
|
|
'dark-light': 'rgba(231,81,90,.15)',
|
|
},
|
|
warning: {
|
|
50: '#fffbeb',
|
|
100: '#fef3c7',
|
|
200: '#fde68a',
|
|
300: '#fcd34d',
|
|
400: '#fbbf24',
|
|
500: '#e2a03f',
|
|
600: '#d97706',
|
|
700: '#b45309',
|
|
800: '#92400e',
|
|
900: '#78350f',
|
|
DEFAULT: '#e2a03f',
|
|
light: '#fff9ed',
|
|
'dark-light': 'rgba(226,160,63,.15)',
|
|
},
|
|
info: {
|
|
50: '#eff6ff',
|
|
100: '#dbeafe',
|
|
200: '#bfdbfe',
|
|
300: '#93c5fd',
|
|
400: '#60a5fa',
|
|
500: '#2196f3',
|
|
600: '#2563eb',
|
|
700: '#1d4ed8',
|
|
800: '#1e40af',
|
|
900: '#1e3a8a',
|
|
DEFAULT: '#2196f3',
|
|
light: '#e7f7ff',
|
|
'dark-light': 'rgba(33,150,243,.15)',
|
|
},
|
|
dark: {
|
|
DEFAULT: '#3b3f5c',
|
|
light: '#eaeaec',
|
|
'dark-light': 'rgba(59,63,92,.15)',
|
|
},
|
|
black: {
|
|
DEFAULT: '#0e1726',
|
|
light: '#e3e4eb',
|
|
'dark-light': 'rgba(14,23,38,.15)',
|
|
},
|
|
white: {
|
|
DEFAULT: '#ffffff',
|
|
light: '#e0e6ed',
|
|
dark: '#888ea8',
|
|
},
|
|
'white-light': '#e0e6ed',
|
|
'white-dark': '#888ea8',
|
|
/* Semantic aliases for admin (Vristo) */
|
|
accent: '#4361ee',
|
|
'accent-light': '#eaf1ff',
|
|
muted: '#e0e6ed',
|
|
body: '#0e1726',
|
|
surface: '#ffffff',
|
|
},
|
|
fontFamily: {
|
|
nunito: ['var(--font-nunito)', 'Nunito', 'sans-serif'],
|
|
sans: ['var(--font-nunito)', 'Nunito', 'system-ui', 'sans-serif'],
|
|
},
|
|
spacing: {
|
|
4.5: '1.125rem',
|
|
5.5: '1.375rem',
|
|
},
|
|
boxShadow: {
|
|
'3xl': '0 2px 2px rgb(224 230 237 / 46%), 1px 6px 7px rgb(224 230 237 / 46%)',
|
|
'card': '0 0 15px 1px rgba(113, 106, 202, 0.1)',
|
|
},
|
|
borderRadius: {
|
|
'xl': '0.75rem',
|
|
'2xl': '1rem',
|
|
},
|
|
animation: {
|
|
'fadeIn': 'fadeIn 0.3s ease-in-out',
|
|
'slideDown': 'slideDown 0.3s ease-out',
|
|
'slideUp': 'slideUp 0.3s ease-out',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
slideDown: {
|
|
'0%': { transform: 'translateY(-10px)', opacity: '0' },
|
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
|
},
|
|
slideUp: {
|
|
'0%': { transform: 'translateY(10px)', opacity: '0' },
|
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
|
},
|
|
},
|
|
typography: ({ theme }) => ({
|
|
DEFAULT: {
|
|
css: {
|
|
'--tw-prose-invert-headings': theme('colors.white.dark'),
|
|
'--tw-prose-invert-links': theme('colors.white.dark'),
|
|
h1: { fontSize: '2.5rem', marginBottom: '0.5rem', marginTop: 0 },
|
|
h2: { fontSize: '2rem', marginBottom: '0.5rem', marginTop: 0 },
|
|
h3: { fontSize: '1.75rem', marginBottom: '0.5rem', marginTop: 0 },
|
|
h4: { fontSize: '1.5rem', marginBottom: '0.5rem', marginTop: 0 },
|
|
h5: { fontSize: '1.25rem', marginBottom: '0.5rem', marginTop: 0 },
|
|
h6: { fontSize: '1rem', marginBottom: '0.5rem', marginTop: 0 },
|
|
p: { marginBottom: '0.5rem' },
|
|
li: { margin: 0 },
|
|
img: { margin: 0 },
|
|
},
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/forms')({ strategy: 'class' }),
|
|
require('@tailwindcss/typography'),
|
|
],
|
|
}
|