ADD new frontend
This commit is contained in:
Urtzi Alfaro
@@ -1,78 +1,135 @@
|
||||
import { tailwindColorConfig } from './src/styles/colors.js';
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
// Add more explicit paths for Docker environment
|
||||
"/app/index.html",
|
||||
"/app/src/**/*.{js,ts,jsx,tsx}",
|
||||
// Add specific files that we know contain classes
|
||||
"./src/pages/**/*.tsx",
|
||||
"./src/components/**/*.tsx",
|
||||
],
|
||||
darkMode: 'class',
|
||||
safelist: [
|
||||
// Always include common utility classes that might be missed
|
||||
'min-h-screen',
|
||||
'bg-gradient-to-b',
|
||||
'from-amber-50',
|
||||
'to-orange-100',
|
||||
'max-w-7xl',
|
||||
'mx-auto',
|
||||
'px-4',
|
||||
'sm:px-6',
|
||||
'lg:px-8',
|
||||
'text-4xl',
|
||||
'sm:text-5xl',
|
||||
'md:text-6xl',
|
||||
'tracking-tight',
|
||||
'font-extrabold',
|
||||
'text-gray-900',
|
||||
'text-orange-600',
|
||||
'bg-white',
|
||||
'shadow-sm',
|
||||
'bg-orange-500',
|
||||
'rounded-md',
|
||||
'shadow-lg',
|
||||
'bg-gray-50',
|
||||
'rounded-lg',
|
||||
// Flexbox and centering classes (critical for proper alignment)
|
||||
'flex',
|
||||
'items-center',
|
||||
'justify-center',
|
||||
'flex-1',
|
||||
'w-8',
|
||||
'h-8',
|
||||
'rounded-full',
|
||||
'bg-orange-600',
|
||||
'bg-gray-200',
|
||||
'text-white',
|
||||
'text-gray-600',
|
||||
'h-0.5',
|
||||
'mx-4',
|
||||
'justify-between',
|
||||
'grid',
|
||||
'grid-cols-1',
|
||||
'grid-cols-2',
|
||||
'gap-4',
|
||||
'space-x-4',
|
||||
'space-y-4',
|
||||
'space-y-6',
|
||||
'block',
|
||||
'text-sm',
|
||||
'font-medium',
|
||||
'text-gray-700',
|
||||
'max-w-md',
|
||||
'w-full',
|
||||
'text-center',
|
||||
'text-3xl',
|
||||
'font-extrabold',
|
||||
'mt-6',
|
||||
'mt-2',
|
||||
'mt-1',
|
||||
'mb-8',
|
||||
'mb-4',
|
||||
'ml-2',
|
||||
'p-8',
|
||||
'py-12',
|
||||
'px-4',
|
||||
'text-xs',
|
||||
'text-gray-500',
|
||||
'text-orange-500',
|
||||
'hover:text-orange-500',
|
||||
'font-medium',
|
||||
'h-12',
|
||||
'w-12',
|
||||
'h-4',
|
||||
'w-4',
|
||||
'mt-0.5',
|
||||
'border-gray-300',
|
||||
'text-red-600',
|
||||
'focus:ring-orange-500',
|
||||
// Include responsive variants
|
||||
{
|
||||
pattern: /^(text|bg|border)-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl)$/,
|
||||
},
|
||||
{
|
||||
pattern: /^(p|m|px|py|mx|my)-(0|1|2|3|4|5|6|8|10|12|16|20|24|32)$/,
|
||||
},
|
||||
// Include gradient patterns
|
||||
{
|
||||
pattern: /^(bg-gradient-to|from|via|to)-(r|l|t|b|tr|tl|br|bl|amber|orange|gray)-(50|100|200|300|400|500|600|700|800|900)$/,
|
||||
},
|
||||
// Include CSS variable-based utility classes
|
||||
{
|
||||
pattern: /^(bg|text|border)-color-(primary|secondary|success|warning|error|info|accent)(-light|-dark)?$/,
|
||||
},
|
||||
{
|
||||
pattern: /^(bg|text|border)-(text|background|border)-(primary|secondary|tertiary)$/,
|
||||
},
|
||||
// Include semantic color classes
|
||||
{
|
||||
pattern: /^(bg|text|border)-(primary|secondary)-(50|100|200|300|400|500|600|700|800|900)$/,
|
||||
},
|
||||
// Include ring and shadow variants
|
||||
{
|
||||
pattern: /^ring-color-(primary|secondary)(\/(10|20|30|40|50))?$/,
|
||||
}
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// PanIA Brand Colors
|
||||
primary: {
|
||||
50: '#fff7ed',
|
||||
100: '#ffedd5',
|
||||
200: '#fed7aa',
|
||||
300: '#fdba74',
|
||||
400: '#fb923c',
|
||||
500: '#f97316', // Main orange
|
||||
600: '#ea580c',
|
||||
700: '#c2410c',
|
||||
800: '#9a3412',
|
||||
900: '#7c2d12',
|
||||
950: '#431407',
|
||||
},
|
||||
secondary: {
|
||||
50: '#f8fafc',
|
||||
100: '#f1f5f9',
|
||||
200: '#e2e8f0',
|
||||
300: '#cbd5e1',
|
||||
400: '#94a3b8',
|
||||
500: '#64748b',
|
||||
600: '#475569',
|
||||
700: '#334155',
|
||||
800: '#1e293b',
|
||||
900: '#0f172a',
|
||||
950: '#020617',
|
||||
},
|
||||
// Traffic Light Indicators
|
||||
success: {
|
||||
50: '#f0fdf4',
|
||||
100: '#dcfce7',
|
||||
500: '#22c55e',
|
||||
600: '#16a34a',
|
||||
700: '#15803d',
|
||||
},
|
||||
warning: {
|
||||
50: '#fffbeb',
|
||||
100: '#fef3c7',
|
||||
500: '#f59e0b',
|
||||
600: '#d97706',
|
||||
700: '#b45309',
|
||||
},
|
||||
danger: {
|
||||
50: '#fef2f2',
|
||||
100: '#fee2e2',
|
||||
500: '#ef4444',
|
||||
600: '#dc2626',
|
||||
700: '#b91c1c',
|
||||
},
|
||||
// Spanish Theme Colors
|
||||
madrid: {
|
||||
50: '#fdf2f8',
|
||||
100: '#fce7f3',
|
||||
200: '#fbcfe8',
|
||||
300: '#f9a8d4',
|
||||
400: '#f472b6',
|
||||
500: '#ec4899',
|
||||
600: '#db2777',
|
||||
700: '#be185d',
|
||||
800: '#9d174d',
|
||||
900: '#831843',
|
||||
},
|
||||
// Import centralized color configuration
|
||||
...tailwindColorConfig,
|
||||
// Keep compatibility aliases
|
||||
orange: tailwindColorConfig.primary,
|
||||
amber: tailwindColorConfig.primary,
|
||||
},
|
||||
fontFamily: {
|
||||
'sans': ['Inter', 'system-ui', 'sans-serif'],
|
||||
'display': ['Poppins', 'Inter', 'system-ui', 'sans-serif'],
|
||||
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
||||
display: ['Poppins', 'sans-serif'],
|
||||
},
|
||||
fontSize: {
|
||||
'xs': ['0.75rem', { lineHeight: '1rem' }],
|
||||
@@ -83,28 +140,15 @@ export default {
|
||||
'2xl': ['1.5rem', { lineHeight: '2rem' }],
|
||||
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
|
||||
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
|
||||
},
|
||||
spacing: {
|
||||
'18': '4.5rem',
|
||||
'88': '22rem',
|
||||
'128': '32rem',
|
||||
},
|
||||
borderRadius: {
|
||||
'xl': '0.75rem',
|
||||
'2xl': '1rem',
|
||||
'3xl': '1.5rem',
|
||||
},
|
||||
boxShadow: {
|
||||
'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
|
||||
'medium': '0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
|
||||
'strong': '0 10px 40px -10px rgba(0, 0, 0, 0.15), 0 2px 10px -2px rgba(0, 0, 0, 0.04)',
|
||||
'5xl': ['3rem', { lineHeight: '1' }],
|
||||
},
|
||||
animation: {
|
||||
'fade-in': 'fadeIn 0.5s ease-in-out',
|
||||
'fade-in': 'fadeIn 0.3s ease-in-out',
|
||||
'slide-up': 'slideUp 0.3s ease-out',
|
||||
'slide-down': 'slideDown 0.3s ease-out',
|
||||
'scale-in': 'scaleIn 0.2s ease-out',
|
||||
'spin-slow': 'spin 3s linear infinite',
|
||||
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
'bounce-slow': 'bounce 2s infinite',
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
@@ -119,15 +163,33 @@ export default {
|
||||
'0%': { transform: 'translateY(-10px)', opacity: '0' },
|
||||
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||
},
|
||||
scaleIn: {
|
||||
'0%': { transform: 'scale(0.95)', opacity: '0' },
|
||||
'100%': { transform: 'scale(1)', opacity: '1' },
|
||||
},
|
||||
},
|
||||
spacing: {
|
||||
'18': '4.5rem',
|
||||
'88': '22rem',
|
||||
'120': '30rem',
|
||||
},
|
||||
borderRadius: {
|
||||
'4xl': '2rem',
|
||||
},
|
||||
boxShadow: {
|
||||
'glow': '0 0 20px rgba(249, 115, 22, 0.3)',
|
||||
'glow-lg': '0 0 40px rgba(249, 115, 22, 0.4)',
|
||||
'inner-lg': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
||||
},
|
||||
screens: {
|
||||
'xs': '475px',
|
||||
'3xl': '1920px',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/forms'),
|
||||
require('@tailwindcss/typography'),
|
||||
require('@tailwindcss/aspect-ratio'),
|
||||
],
|
||||
}
|
||||
Reference in New Issue
Block a user