feat(design-system): Implement CSS custom properties for theming
- 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>
This commit is contained in:
Adrian Flores Cortes
parent
d5a703b926
commit
a746b0b4df
@ -1,8 +1,17 @@
|
||||
/**
|
||||
* Global Styles
|
||||
* Estilos base y reset CSS
|
||||
* ERP Construccion - ISEM Software
|
||||
* Estilos base con Tailwind CSS + Design Tokens
|
||||
*/
|
||||
|
||||
/* Design Tokens (CSS Custom Properties) */
|
||||
@import './styles/variables.css';
|
||||
|
||||
/* Tailwind directives */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Reset básico */
|
||||
*,
|
||||
*::before,
|
||||
@ -12,30 +21,6 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Variables CSS (TODO: mover a theme) */
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--secondary-color: #64748b;
|
||||
--success-color: #22c55e;
|
||||
--warning-color: #f59e0b;
|
||||
--danger-color: #ef4444;
|
||||
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--text-light: #94a3b8;
|
||||
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8fafc;
|
||||
--bg-tertiary: #f1f5f9;
|
||||
|
||||
--border-color: #e2e8f0;
|
||||
--border-radius: 0.5rem;
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
/* Tipografía base */
|
||||
html {
|
||||
font-size: 16px;
|
||||
@ -44,22 +29,23 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||||
Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-secondary);
|
||||
font-family: var(--font-family-sans);
|
||||
line-height: var(--line-height-normal);
|
||||
color: var(--color-foreground);
|
||||
background-color: var(--color-background-subtle);
|
||||
transition: background-color var(--duration-200) var(--ease-in-out),
|
||||
color var(--duration-200) var(--ease-in-out);
|
||||
}
|
||||
|
||||
/* Enlaces */
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
transition: color var(--duration-150) var(--ease-in-out);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #1d4ed8;
|
||||
color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
/* Buttons (estilos base) */
|
||||
@ -85,23 +71,23 @@ select {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* Scrollbar personalizado (opcional) */
|
||||
/* Scrollbar personalizado */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg-tertiary);
|
||||
background: var(--color-background-muted);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border-color);
|
||||
border-radius: 4px;
|
||||
background: var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-light);
|
||||
background: var(--color-foreground-subtle);
|
||||
}
|
||||
|
||||
/* Utilidades */
|
||||
|
||||
481
web/src/styles/variables.css
Normal file
481
web/src/styles/variables.css
Normal file
@ -0,0 +1,481 @@
|
||||
/**
|
||||
* Design Tokens - CSS Custom Properties
|
||||
* ERP Construccion - ISEM Software
|
||||
* Version: 1.0.0
|
||||
* Fuente: docs/12-frontend-specs/DESIGN-TOKENS.yml
|
||||
*/
|
||||
|
||||
/* =============================================================================
|
||||
COLORES DE MARCA ISEM
|
||||
============================================================================= */
|
||||
|
||||
:root {
|
||||
/* ---------------------------------------------------------------------------
|
||||
Brand Primary - Azul ISEM
|
||||
--------------------------------------------------------------------------- */
|
||||
--color-brand-primary-50: #E6F3FF;
|
||||
--color-brand-primary-100: #CCE7FF;
|
||||
--color-brand-primary-200: #99CFFF;
|
||||
--color-brand-primary-300: #66B7FF;
|
||||
--color-brand-primary-400: #339FFF;
|
||||
--color-brand-primary-500: #0061A8;
|
||||
--color-brand-primary-600: #004D86;
|
||||
--color-brand-primary-700: #003A65;
|
||||
--color-brand-primary-800: #002643;
|
||||
--color-brand-primary-900: #001322;
|
||||
--color-brand-primary: #0061A8;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Brand Secondary - Verde ISEM
|
||||
--------------------------------------------------------------------------- */
|
||||
--color-brand-secondary-50: #E6FFF5;
|
||||
--color-brand-secondary-100: #CCFFEB;
|
||||
--color-brand-secondary-200: #99FFD6;
|
||||
--color-brand-secondary-300: #66FFC2;
|
||||
--color-brand-secondary-400: #33FFAD;
|
||||
--color-brand-secondary-500: #00A868;
|
||||
--color-brand-secondary-600: #008653;
|
||||
--color-brand-secondary-700: #00653F;
|
||||
--color-brand-secondary-800: #00432A;
|
||||
--color-brand-secondary-900: #002215;
|
||||
--color-brand-secondary: #00A868;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Colores Semánticos
|
||||
--------------------------------------------------------------------------- */
|
||||
--color-success: #198754;
|
||||
--color-success-light: #D1E7DD;
|
||||
--color-success-dark: #0F5132;
|
||||
|
||||
--color-warning: #FFC107;
|
||||
--color-warning-light: #FFF3CD;
|
||||
--color-warning-dark: #664D03;
|
||||
|
||||
--color-danger: #DC3545;
|
||||
--color-danger-light: #F8D7DA;
|
||||
--color-danger-dark: #842029;
|
||||
|
||||
--color-info: #0DCAF0;
|
||||
--color-info-light: #CFF4FC;
|
||||
--color-info-dark: #055160;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Tema Claro - Fondos
|
||||
--------------------------------------------------------------------------- */
|
||||
--color-light-background: #FFFFFF;
|
||||
--color-light-background-subtle: #F8F9FB;
|
||||
--color-light-background-muted: #F1F3F5;
|
||||
--color-light-background-emphasis: #E9ECEF;
|
||||
|
||||
/* Tema Claro - Texto */
|
||||
--color-light-foreground: #212529;
|
||||
--color-light-foreground-muted: #6C757D;
|
||||
--color-light-foreground-subtle: #ADB5BD;
|
||||
|
||||
/* Tema Claro - Bordes */
|
||||
--color-light-border: #DEE2E6;
|
||||
--color-light-border-subtle: #E9ECEF;
|
||||
--color-light-border-emphasis: #CED4DA;
|
||||
|
||||
/* Tema Claro - Superficies */
|
||||
--color-light-surface-card: #FFFFFF;
|
||||
--color-light-surface-popover: #FFFFFF;
|
||||
--color-light-surface-modal: #FFFFFF;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Tema Oscuro - Fondos
|
||||
--------------------------------------------------------------------------- */
|
||||
--color-dark-background: #1B1E23;
|
||||
--color-dark-background-subtle: #212529;
|
||||
--color-dark-background-muted: #2D3139;
|
||||
--color-dark-background-emphasis: #343A40;
|
||||
|
||||
/* Tema Oscuro - Texto */
|
||||
--color-dark-foreground: #ECECEC;
|
||||
--color-dark-foreground-muted: #A0A0A0;
|
||||
--color-dark-foreground-subtle: #6C757D;
|
||||
|
||||
/* Tema Oscuro - Bordes */
|
||||
--color-dark-border: #495057;
|
||||
--color-dark-border-subtle: #343A40;
|
||||
--color-dark-border-emphasis: #6C757D;
|
||||
|
||||
/* Tema Oscuro - Superficies */
|
||||
--color-dark-surface-card: #2D3139;
|
||||
--color-dark-surface-popover: #343A40;
|
||||
--color-dark-surface-modal: #2D3139;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Colores de Construcción (EVM, HSE)
|
||||
--------------------------------------------------------------------------- */
|
||||
/* Semáforos EVM */
|
||||
--color-evm-green: #198754;
|
||||
--color-evm-yellow: #FFC107;
|
||||
--color-evm-red: #DC3545;
|
||||
|
||||
/* Estados de Proyecto */
|
||||
--color-project-planning: #6C757D;
|
||||
--color-project-active: #0061A8;
|
||||
--color-project-paused: #FFC107;
|
||||
--color-project-completed: #198754;
|
||||
--color-project-cancelled: #DC3545;
|
||||
|
||||
/* Prioridades HSE */
|
||||
--color-hse-critical: #DC3545;
|
||||
--color-hse-high: #FD7E14;
|
||||
--color-hse-medium: #FFC107;
|
||||
--color-hse-low: #198754;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
VARIABLES CONTEXTUALES (Tema Claro por defecto)
|
||||
============================================================================= */
|
||||
|
||||
:root {
|
||||
/* Colores primarios contextuales */
|
||||
--color-primary: var(--color-brand-primary);
|
||||
--color-primary-hover: var(--color-brand-primary-600);
|
||||
--color-primary-light: var(--color-brand-primary-100);
|
||||
|
||||
--color-secondary: var(--color-brand-secondary);
|
||||
--color-secondary-hover: var(--color-brand-secondary-600);
|
||||
--color-secondary-light: var(--color-brand-secondary-100);
|
||||
|
||||
/* Fondos */
|
||||
--color-background: var(--color-light-background);
|
||||
--color-background-subtle: var(--color-light-background-subtle);
|
||||
--color-background-muted: var(--color-light-background-muted);
|
||||
--color-background-emphasis: var(--color-light-background-emphasis);
|
||||
|
||||
/* Texto */
|
||||
--color-foreground: var(--color-light-foreground);
|
||||
--color-foreground-muted: var(--color-light-foreground-muted);
|
||||
--color-foreground-subtle: var(--color-light-foreground-subtle);
|
||||
|
||||
/* Bordes */
|
||||
--color-border: var(--color-light-border);
|
||||
--color-border-subtle: var(--color-light-border-subtle);
|
||||
--color-border-emphasis: var(--color-light-border-emphasis);
|
||||
|
||||
/* Superficies */
|
||||
--color-surface-card: var(--color-light-surface-card);
|
||||
--color-surface-popover: var(--color-light-surface-popover);
|
||||
--color-surface-modal: var(--color-light-surface-modal);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
TEMA OSCURO
|
||||
============================================================================= */
|
||||
|
||||
.dark,
|
||||
[data-theme="dark"] {
|
||||
--color-background: var(--color-dark-background);
|
||||
--color-background-subtle: var(--color-dark-background-subtle);
|
||||
--color-background-muted: var(--color-dark-background-muted);
|
||||
--color-background-emphasis: var(--color-dark-background-emphasis);
|
||||
|
||||
--color-foreground: var(--color-dark-foreground);
|
||||
--color-foreground-muted: var(--color-dark-foreground-muted);
|
||||
--color-foreground-subtle: var(--color-dark-foreground-subtle);
|
||||
|
||||
--color-border: var(--color-dark-border);
|
||||
--color-border-subtle: var(--color-dark-border-subtle);
|
||||
--color-border-emphasis: var(--color-dark-border-emphasis);
|
||||
|
||||
--color-surface-card: var(--color-dark-surface-card);
|
||||
--color-surface-popover: var(--color-dark-surface-popover);
|
||||
--color-surface-modal: var(--color-dark-surface-modal);
|
||||
}
|
||||
|
||||
/* Soporte para preferencia del sistema */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--color-background: var(--color-dark-background);
|
||||
--color-background-subtle: var(--color-dark-background-subtle);
|
||||
--color-background-muted: var(--color-dark-background-muted);
|
||||
--color-background-emphasis: var(--color-dark-background-emphasis);
|
||||
|
||||
--color-foreground: var(--color-dark-foreground);
|
||||
--color-foreground-muted: var(--color-dark-foreground-muted);
|
||||
--color-foreground-subtle: var(--color-dark-foreground-subtle);
|
||||
|
||||
--color-border: var(--color-dark-border);
|
||||
--color-border-subtle: var(--color-dark-border-subtle);
|
||||
--color-border-emphasis: var(--color-dark-border-emphasis);
|
||||
|
||||
--color-surface-card: var(--color-dark-surface-card);
|
||||
--color-surface-popover: var(--color-dark-surface-popover);
|
||||
--color-surface-modal: var(--color-dark-surface-modal);
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
TIPOGRAFÍA
|
||||
============================================================================= */
|
||||
|
||||
:root {
|
||||
/* Familias de fuentes */
|
||||
--font-family-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;
|
||||
|
||||
/* Tamaños de fuente */
|
||||
--font-size-xs: 0.75rem; /* 12px */
|
||||
--font-size-sm: 0.875rem; /* 14px */
|
||||
--font-size-base: 1rem; /* 16px */
|
||||
--font-size-lg: 1.125rem; /* 18px */
|
||||
--font-size-xl: 1.25rem; /* 20px */
|
||||
--font-size-2xl: 1.5rem; /* 24px */
|
||||
--font-size-3xl: 1.875rem; /* 30px */
|
||||
--font-size-4xl: 2.25rem; /* 36px */
|
||||
|
||||
/* Altura de línea */
|
||||
--line-height-none: 1;
|
||||
--line-height-tight: 1.25;
|
||||
--line-height-snug: 1.375;
|
||||
--line-height-normal: 1.5;
|
||||
--line-height-relaxed: 1.625;
|
||||
--line-height-loose: 2;
|
||||
|
||||
/* Pesos de fuente */
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
/* Espaciado de letras */
|
||||
--letter-spacing-tighter: -0.05em;
|
||||
--letter-spacing-tight: -0.025em;
|
||||
--letter-spacing-normal: 0em;
|
||||
--letter-spacing-wide: 0.025em;
|
||||
--letter-spacing-wider: 0.05em;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
ESPACIADO
|
||||
============================================================================= */
|
||||
|
||||
:root {
|
||||
/* Sistema base 4px */
|
||||
--spacing-px: 1px;
|
||||
--spacing-0: 0;
|
||||
--spacing-0-5: 0.125rem; /* 2px */
|
||||
--spacing-1: 0.25rem; /* 4px */
|
||||
--spacing-1-5: 0.375rem; /* 6px */
|
||||
--spacing-2: 0.5rem; /* 8px */
|
||||
--spacing-2-5: 0.625rem; /* 10px */
|
||||
--spacing-3: 0.75rem; /* 12px */
|
||||
--spacing-3-5: 0.875rem; /* 14px */
|
||||
--spacing-4: 1rem; /* 16px */
|
||||
--spacing-5: 1.25rem; /* 20px */
|
||||
--spacing-6: 1.5rem; /* 24px */
|
||||
--spacing-7: 1.75rem; /* 28px */
|
||||
--spacing-8: 2rem; /* 32px */
|
||||
--spacing-9: 2.25rem; /* 36px */
|
||||
--spacing-10: 2.5rem; /* 40px */
|
||||
--spacing-12: 3rem; /* 48px */
|
||||
--spacing-14: 3.5rem; /* 56px */
|
||||
--spacing-16: 4rem; /* 64px */
|
||||
--spacing-20: 5rem; /* 80px */
|
||||
--spacing-24: 6rem; /* 96px */
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
BORDES
|
||||
============================================================================= */
|
||||
|
||||
:root {
|
||||
/* Radio de bordes */
|
||||
--radius-none: 0;
|
||||
--radius-sm: 0.125rem; /* 2px */
|
||||
--radius: 0.25rem; /* 4px */
|
||||
--radius-md: 0.375rem; /* 6px */
|
||||
--radius-lg: 0.5rem; /* 8px */
|
||||
--radius-xl: 0.75rem; /* 12px */
|
||||
--radius-2xl: 1rem; /* 16px */
|
||||
--radius-3xl: 1.5rem; /* 24px */
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Ancho de bordes */
|
||||
--border-width-0: 0px;
|
||||
--border-width: 1px;
|
||||
--border-width-2: 2px;
|
||||
--border-width-4: 4px;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
SOMBRAS
|
||||
============================================================================= */
|
||||
|
||||
:root {
|
||||
/* Sombras tema claro */
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||||
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-none: 0 0 #0000;
|
||||
}
|
||||
|
||||
.dark,
|
||||
[data-theme="dark"] {
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
|
||||
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
|
||||
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
|
||||
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);
|
||||
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.2);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Z-INDEX
|
||||
============================================================================= */
|
||||
|
||||
:root {
|
||||
--z-0: 0;
|
||||
--z-10: 10;
|
||||
--z-20: 20;
|
||||
--z-30: 30;
|
||||
--z-40: 40;
|
||||
--z-50: 50;
|
||||
|
||||
/* Semánticos */
|
||||
--z-dropdown: 1000;
|
||||
--z-sticky: 1020;
|
||||
--z-fixed: 1030;
|
||||
--z-modal-backdrop: 1040;
|
||||
--z-modal: 1050;
|
||||
--z-popover: 1060;
|
||||
--z-tooltip: 1070;
|
||||
--z-toast: 1080;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
ANIMACIÓN
|
||||
============================================================================= */
|
||||
|
||||
:root {
|
||||
/* Duraciones */
|
||||
--duration-0: 0ms;
|
||||
--duration-75: 75ms;
|
||||
--duration-100: 100ms;
|
||||
--duration-150: 150ms;
|
||||
--duration-200: 200ms;
|
||||
--duration-300: 300ms;
|
||||
--duration-500: 500ms;
|
||||
--duration-700: 700ms;
|
||||
--duration-1000: 1000ms;
|
||||
|
||||
/* Curvas de easing */
|
||||
--ease-linear: linear;
|
||||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* Transiciones predefinidas */
|
||||
--transition-none: none;
|
||||
--transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-colors: color, background-color, border-color,
|
||||
text-decoration-color, fill, stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-opacity: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-shadow: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-transform: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
COMPONENTES - TOKENS
|
||||
============================================================================= */
|
||||
|
||||
:root {
|
||||
/* Botones */
|
||||
--button-padding-sm: 0.25rem 0.75rem;
|
||||
--button-padding: 0.5rem 1rem;
|
||||
--button-padding-lg: 0.75rem 1.5rem;
|
||||
--button-font-size-sm: 0.875rem;
|
||||
--button-font-size: 0.875rem;
|
||||
--button-font-size-lg: 1rem;
|
||||
--button-radius: var(--radius-md);
|
||||
--button-min-height: 2.5rem;
|
||||
|
||||
/* Inputs */
|
||||
--input-padding: 0.5rem 0.75rem;
|
||||
--input-font-size: 0.875rem;
|
||||
--input-radius: var(--radius-md);
|
||||
--input-min-height: 2.5rem;
|
||||
--input-focus-ring-width: 2px;
|
||||
--input-focus-ring-color: var(--color-primary);
|
||||
--input-focus-ring-offset: 2px;
|
||||
|
||||
/* Cards */
|
||||
--card-padding-sm: 1rem;
|
||||
--card-padding: 1.5rem;
|
||||
--card-padding-lg: 2rem;
|
||||
--card-radius: var(--radius-lg);
|
||||
--card-shadow: var(--shadow-md);
|
||||
|
||||
/* Modales */
|
||||
--modal-size-sm: 24rem;
|
||||
--modal-size: 32rem;
|
||||
--modal-size-lg: 48rem;
|
||||
--modal-size-xl: 64rem;
|
||||
--modal-radius: var(--radius-lg);
|
||||
--modal-padding: 1.5rem;
|
||||
|
||||
/* Tablas */
|
||||
--table-cell-padding: 0.75rem 1rem;
|
||||
--table-header-bg: var(--color-background-muted);
|
||||
--table-header-font-weight: 600;
|
||||
--table-row-hover-bg: var(--color-background-emphasis);
|
||||
|
||||
/* Badges */
|
||||
--badge-padding: 0.125rem 0.5rem;
|
||||
--badge-font-size: 0.75rem;
|
||||
--badge-radius: var(--radius-full);
|
||||
|
||||
/* Tooltips */
|
||||
--tooltip-padding: 0.25rem 0.5rem;
|
||||
--tooltip-font-size: 0.75rem;
|
||||
--tooltip-radius: var(--radius);
|
||||
--tooltip-bg: var(--color-dark-background);
|
||||
--tooltip-color: var(--color-dark-foreground);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
FOCUS RING (Accesibilidad)
|
||||
============================================================================= */
|
||||
|
||||
:root {
|
||||
--ring-color: var(--color-primary);
|
||||
--ring-offset-color: var(--color-background);
|
||||
--ring-offset-width: 2px;
|
||||
--ring-width: 2px;
|
||||
}
|
||||
|
||||
/* Focus visible global */
|
||||
*:focus-visible {
|
||||
outline: var(--ring-width) solid var(--ring-color);
|
||||
outline-offset: var(--ring-offset-width);
|
||||
}
|
||||
|
||||
/* Ocultar focus para mouse */
|
||||
*:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
REDUCCIÓN DE MOVIMIENTO (Accesibilidad)
|
||||
============================================================================= */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
168
web/tailwind.config.js
Normal file
168
web/tailwind.config.js
Normal file
@ -0,0 +1,168 @@
|
||||
/** @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: [],
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user