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

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

/* ===== TEMA VIVID ===== */
[data-openiis-theme="vivid"] {
  /* Colores principales - Paleta Vibrante */
  --primary-50: #fdf2f8;
  --primary-100: #fce7f3;
  --primary-200: #fbcfe8;
  --primary-300: #f9a8d4;
  --primary-400: #f472b6;
  --primary-500: #ec4899;
  --primary-600: #db2777;
  --primary-700: #be185d;
  --primary-800: #9d174d;
  --primary-900: #831843;

  /* Neutros vibrantes */
  --neutral-50: #fafafa;
  --neutral-100: #f4f4f5;
  --neutral-200: #e4e4e7;
  --neutral-300: #d4d4d8;
  --neutral-400: #a1a1aa;
  --neutral-500: #71717a;
  --neutral-600: #52525b;
  --neutral-700: #3f3f46;
  --neutral-800: #27272a;
  --neutral-900: #18181b;

  /* Sistema de colores semánticos */
  --color-background: #ffffff;
  --color-surface: #fafafa;
  --color-surface-elevated: #ffffff;
  --color-border: #e4e4e7;
  --color-border-focus: #ec4899;
  --color-text-primary: #18181b;
  --color-text-secondary: #52525b;
  --color-text-muted: #a1a1aa;
  --color-text-inverse: #ffffff;

  /* Estados vibrantes */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
}

[data-openiis-theme="vivid"][data-theme="dark"] {
  --color-border-focus: #f472b6;
}

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