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
|
* 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 */
|
/* Reset básico */
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
@ -12,30 +21,6 @@
|
|||||||
padding: 0;
|
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 */
|
/* Tipografía base */
|
||||||
html {
|
html {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@ -44,22 +29,23 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
font-family: var(--font-family-sans);
|
||||||
Roboto, 'Helvetica Neue', Arial, sans-serif;
|
line-height: var(--line-height-normal);
|
||||||
line-height: 1.5;
|
color: var(--color-foreground);
|
||||||
color: var(--text-primary);
|
background-color: var(--color-background-subtle);
|
||||||
background-color: var(--bg-secondary);
|
transition: background-color var(--duration-200) var(--ease-in-out),
|
||||||
|
color var(--duration-200) var(--ease-in-out);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Enlaces */
|
/* Enlaces */
|
||||||
a {
|
a {
|
||||||
color: var(--primary-color);
|
color: var(--color-primary);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: color 0.2s;
|
transition: color var(--duration-150) var(--ease-in-out);
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: #1d4ed8;
|
color: var(--color-primary-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Buttons (estilos base) */
|
/* Buttons (estilos base) */
|
||||||
@ -85,23 +71,23 @@ select {
|
|||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scrollbar personalizado (opcional) */
|
/* Scrollbar personalizado */
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background: var(--bg-tertiary);
|
background: var(--color-background-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: var(--border-color);
|
background: var(--color-border);
|
||||||
border-radius: 4px;
|
border-radius: var(--radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background: var(--text-light);
|
background: var(--color-foreground-subtle);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Utilidades */
|
/* 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