a746b0b4df
- Add src/styles/variables.css with 100+ design tokens - Define ISEM brand colors (primary #0061A8, secondary #00A868) - Add semantic colors (success, warning, danger, info) - Add light/dark theme support via CSS variables - Add construction-specific colors (EVM, HSE, project states) - Add typography tokens (Inter font family) - Add spacing system (4px base) - Add border radius, shadows, z-index scales - Add animation duration and easing tokens - Add component-specific tokens (button, input, card, modal) - Update tailwind.config.js to use CSS variables - Enable dark mode support with 'class' strategy - Update index.css to import variables and use semantic tokens Closes G-001 from FASE3-VALIDACION-FRONTEND-UXUI.md Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
169 lines
5.3 KiB
JavaScript
169 lines
5.3 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
'./index.html',
|
|
'./src/**/*.{js,ts,jsx,tsx}',
|
|
],
|
|
darkMode: 'class', // Habilitar dark mode con clase
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Colores de marca ISEM (via CSS variables para theming)
|
|
primary: {
|
|
50: 'var(--color-brand-primary-50)',
|
|
100: 'var(--color-brand-primary-100)',
|
|
200: 'var(--color-brand-primary-200)',
|
|
300: 'var(--color-brand-primary-300)',
|
|
400: 'var(--color-brand-primary-400)',
|
|
500: 'var(--color-brand-primary-500)',
|
|
600: 'var(--color-brand-primary-600)',
|
|
700: 'var(--color-brand-primary-700)',
|
|
800: 'var(--color-brand-primary-800)',
|
|
900: 'var(--color-brand-primary-900)',
|
|
DEFAULT: 'var(--color-primary)',
|
|
},
|
|
secondary: {
|
|
50: 'var(--color-brand-secondary-50)',
|
|
100: 'var(--color-brand-secondary-100)',
|
|
200: 'var(--color-brand-secondary-200)',
|
|
300: 'var(--color-brand-secondary-300)',
|
|
400: 'var(--color-brand-secondary-400)',
|
|
500: 'var(--color-brand-secondary-500)',
|
|
600: 'var(--color-brand-secondary-600)',
|
|
700: 'var(--color-brand-secondary-700)',
|
|
800: 'var(--color-brand-secondary-800)',
|
|
900: 'var(--color-brand-secondary-900)',
|
|
DEFAULT: 'var(--color-secondary)',
|
|
},
|
|
// Colores semánticos
|
|
success: {
|
|
light: 'var(--color-success-light)',
|
|
DEFAULT: 'var(--color-success)',
|
|
dark: 'var(--color-success-dark)',
|
|
},
|
|
warning: {
|
|
light: 'var(--color-warning-light)',
|
|
DEFAULT: 'var(--color-warning)',
|
|
dark: 'var(--color-warning-dark)',
|
|
},
|
|
danger: {
|
|
light: 'var(--color-danger-light)',
|
|
DEFAULT: 'var(--color-danger)',
|
|
dark: 'var(--color-danger-dark)',
|
|
},
|
|
info: {
|
|
light: 'var(--color-info-light)',
|
|
DEFAULT: 'var(--color-info)',
|
|
dark: 'var(--color-info-dark)',
|
|
},
|
|
// Colores contextuales (cambian con tema)
|
|
background: {
|
|
DEFAULT: 'var(--color-background)',
|
|
subtle: 'var(--color-background-subtle)',
|
|
muted: 'var(--color-background-muted)',
|
|
emphasis: 'var(--color-background-emphasis)',
|
|
},
|
|
foreground: {
|
|
DEFAULT: 'var(--color-foreground)',
|
|
muted: 'var(--color-foreground-muted)',
|
|
subtle: 'var(--color-foreground-subtle)',
|
|
},
|
|
border: {
|
|
DEFAULT: 'var(--color-border)',
|
|
subtle: 'var(--color-border-subtle)',
|
|
emphasis: 'var(--color-border-emphasis)',
|
|
},
|
|
surface: {
|
|
card: 'var(--color-surface-card)',
|
|
popover: 'var(--color-surface-popover)',
|
|
modal: 'var(--color-surface-modal)',
|
|
},
|
|
// Colores de construcción (EVM, HSE)
|
|
evm: {
|
|
green: 'var(--color-evm-green)',
|
|
yellow: 'var(--color-evm-yellow)',
|
|
red: 'var(--color-evm-red)',
|
|
},
|
|
project: {
|
|
planning: 'var(--color-project-planning)',
|
|
active: 'var(--color-project-active)',
|
|
paused: 'var(--color-project-paused)',
|
|
completed: 'var(--color-project-completed)',
|
|
cancelled: 'var(--color-project-cancelled)',
|
|
},
|
|
hse: {
|
|
critical: 'var(--color-hse-critical)',
|
|
high: 'var(--color-hse-high)',
|
|
medium: 'var(--color-hse-medium)',
|
|
low: 'var(--color-hse-low)',
|
|
},
|
|
},
|
|
fontFamily: {
|
|
sans: [
|
|
'Inter',
|
|
'system-ui',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'Segoe UI',
|
|
'Roboto',
|
|
'Helvetica Neue',
|
|
'Arial',
|
|
'sans-serif',
|
|
],
|
|
mono: [
|
|
'JetBrains Mono',
|
|
'Fira Code',
|
|
'Consolas',
|
|
'Monaco',
|
|
'monospace',
|
|
],
|
|
},
|
|
borderRadius: {
|
|
DEFAULT: 'var(--radius)',
|
|
sm: 'var(--radius-sm)',
|
|
md: 'var(--radius-md)',
|
|
lg: 'var(--radius-lg)',
|
|
xl: 'var(--radius-xl)',
|
|
'2xl': 'var(--radius-2xl)',
|
|
'3xl': 'var(--radius-3xl)',
|
|
},
|
|
boxShadow: {
|
|
sm: 'var(--shadow-sm)',
|
|
DEFAULT: 'var(--shadow)',
|
|
md: 'var(--shadow-md)',
|
|
lg: 'var(--shadow-lg)',
|
|
xl: 'var(--shadow-xl)',
|
|
'2xl': 'var(--shadow-2xl)',
|
|
inner: 'var(--shadow-inner)',
|
|
},
|
|
zIndex: {
|
|
dropdown: 'var(--z-dropdown)',
|
|
sticky: 'var(--z-sticky)',
|
|
fixed: 'var(--z-fixed)',
|
|
'modal-backdrop': 'var(--z-modal-backdrop)',
|
|
modal: 'var(--z-modal)',
|
|
popover: 'var(--z-popover)',
|
|
tooltip: 'var(--z-tooltip)',
|
|
toast: 'var(--z-toast)',
|
|
},
|
|
transitionDuration: {
|
|
0: 'var(--duration-0)',
|
|
75: 'var(--duration-75)',
|
|
100: 'var(--duration-100)',
|
|
150: 'var(--duration-150)',
|
|
200: 'var(--duration-200)',
|
|
300: 'var(--duration-300)',
|
|
500: 'var(--duration-500)',
|
|
700: 'var(--duration-700)',
|
|
1000: 'var(--duration-1000)',
|
|
},
|
|
transitionTimingFunction: {
|
|
'ease-in': 'var(--ease-in)',
|
|
'ease-out': 'var(--ease-out)',
|
|
'ease-in-out': 'var(--ease-in-out)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|