openiis-ui
Version:
Una librería moderna de componentes UI para Angular con temas personalizables
74 lines (67 loc) • 2.22 kB
CSS
/* ===== TEMA CLÁSICO (por defecto) ===== */
[data-openiis-theme="classic"] {
/* Colores principales - Paleta Teal Elegante */
--primary-50: #f0fdfa;
--primary-100: #ccfbf1;
--primary-200: #99f6e4;
--primary-300: #5eead4;
--primary-400: #2dd4bf;
--primary-500: #14b8a6;
--primary-600: #0d9488;
--primary-700: #0f766e;
--primary-800: #115e59;
--primary-900: #134e4a;
/* Neutros elegantes */
--neutral-50: #fafafa;
--neutral-100: #f5f5f5;
--neutral-200: #e5e5e5;
--neutral-300: #d4d4d4;
--neutral-400: #a3a3a3;
--neutral-500: #737373;
--neutral-600: #525252;
--neutral-700: #404040;
--neutral-800: #262626;
--neutral-900: #171717;
/* Sistema de colores semánticos */
--color-background: #ffffff;
--color-surface: #fafafa;
--color-surface-elevated: #ffffff;
--color-border: #e5e5e5;
--color-border-focus: #14b8a6;
--color-text-primary: #171717;
--color-text-secondary: #525252;
--color-text-muted: #a3a3a3;
--color-text-inverse: #ffffff;
/* Estados modernos */
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
--color-info: #3b82f6;
}
/* Ajuste específico de colores de borde focus para tema oscuro */
[data-openiis-theme="classic"][data-theme="dark"] {
--color-border-focus: #2dd4bf;
/* Sistema de colores para tema oscuro */
--color-background: #0f0f0f;
--color-surface: #171717;
--color-surface-elevated: #262626;
--color-border: #404040;
--color-text-primary: #fafafa;
--color-text-secondary: #d4d4d4;
--color-text-muted: #737373;
--color-text-inverse: #171717;
/* Sombras para tema oscuro */
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.15);
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.18), 0 1px 2px -1px rgb(0 0 0 / 0.15);
--shadow-md:
0 2px 4px -1px rgb(0 0 0 / 0.2), 0 1px 3px -1px rgb(0 0 0 / 0.18);
--shadow-lg:
0 4px 8px -2px rgb(0 0 0 / 0.22), 0 2px 4px -1px rgb(0 0 0 / 0.18);
--shadow-xl:
0 8px 16px -4px rgb(0 0 0 / 0.25), 0 4px 8px -2px rgb(0 0 0 / 0.2);
}
/* Ejemplo de uso de variables */
.ejemplo {
background-color: var(--color-background);
color: var(--color-text-secondary);
}