openiis-ui/src/styles/themes/custom.css

Una librería moderna de componentes UI para Angular con temas personalizables

/* ===== TEMA CUSTOM ===== */
[data-openiis-theme="custom"] {
  /* Variables que serán sobrescritas por JavaScript */
  --primary-50: var(--custom-primary-50, #f0fdfa);
  --primary-100: var(--custom-primary-100, #ccfbf1);
  --primary-200: var(--custom-primary-200, #99f6e4);
  --primary-300: var(--custom-primary-300, #5eead4);
  --primary-400: var(--custom-primary-400, #2dd4bf);
  --primary-500: var(--custom-primary-500, #14b8a6);
  --primary-600: var(--custom-primary-600, #0d9488);
  --primary-700: var(--custom-primary-700, #0f766e);
  --primary-800: var(--custom-primary-800, #115e59);
  --primary-900: var(--custom-primary-900, #134e4a);

  /* Neutros que se adaptan al color principal */
  --neutral-50: var(--custom-neutral-50, #fafafa);
  --neutral-100: var(--custom-neutral-100, #f5f5f5);
  --neutral-200: var(--custom-neutral-200, #e5e5e5);
  --neutral-300: var(--custom-neutral-300, #d4d4d4);
  --neutral-400: var(--custom-neutral-400, #a3a3a3);
  --neutral-500: var(--custom-neutral-500, #737373);
  --neutral-600: var(--custom-neutral-600, #525252);
  --neutral-700: var(--custom-neutral-700, #404040);
  --neutral-800: var(--custom-neutral-800, #262626);
  --neutral-900: var(--custom-neutral-900, #171717);

  /* Sistema de colores semánticos */
  --color-background: var(--custom-background, #ffffff);
  --color-surface: var(--custom-surface, #fafafa);
  --color-surface-elevated: var(--custom-surface-elevated, #ffffff);
  --color-border: var(--custom-border, #e5e5e5);
  --color-border-focus: var(--custom-border-focus, var(--primary-600));
  --color-text-primary: var(--custom-text-primary, #171717);
  --color-text-secondary: var(--custom-text-secondary, #525252);
  --color-text-muted: var(--custom-text-muted, #a3a3a3);
  --color-text-inverse: var(--custom-text-inverse, #ffffff);

  /* Estados customizables */
  --color-success: var(--custom-success, #10b981);
  --color-warning: var(--custom-warning, #f59e0b);
  --color-error: var(--custom-error, #ef4444);
  --color-info: var(--custom-info, #3b82f6);
}

[data-openiis-theme="custom"][data-theme="dark"] {
  --color-border-focus: var(--custom-border-focus-dark, var(--primary-400));
}

/* Ejemplo de uso de variables */
.ejemplo {
  background-color: var(--color-background);
  color: var(--color-text-secondary);
}