@syncognito/maya/dist/themes/variables.css

Maya Design System - Shared tokens and platform-specific components

/* Maya Theme Variables */

/* Day theme (light standard) */
:root {
  --maya-primary: #7408c2;
  --maya-primary-light: #9b4dd9;
  --maya-primary-dark: #5a0a9a;
  --maya-primary-subtle: #f0e6ff;

  --maya-background: #ffffff;
  --maya-surface: #f9fafb;
  --maya-surface-secondary: #f3f4f6;
  --maya-surface-elevated: #ffffff;

  --maya-text: #111827;
  --maya-text-secondary: #6b7280;
  --maya-text-tertiary: #9ca3af;
  --maya-text-inverse: #ffffff;
  --maya-text-disabled: #d1d5db;

  --maya-border: #e5e7eb;
  --maya-border-secondary: #f3f4f6;
  --maya-border-focus: #7408c2;

  --maya-interactive-hover: #f0e6ff;
  --maya-interactive-active: #e6d6ff;
  --maya-interactive-focus: #f8f0ff;
  --maya-interactive-disabled: #f9fafb;

  --maya-danger: #ef4444;
  --maya-danger-dark: #dc2626;
}

/* Evening theme (comfortable in-between) */
[data-maya-theme='evening'] {
  --maya-primary: #7408c2;
  --maya-primary-light: #9b4dd9;
  --maya-primary-dark: #5a0a9a;
  --maya-primary-subtle: #f0e6ff;

  --maya-background: #f8fafc;
  --maya-surface: #f1f5f9;
  --maya-surface-secondary: #e2e8f0;
  --maya-surface-elevated: #ffffff;

  --maya-text: #374151;
  --maya-text-secondary: #6b7280;
  --maya-text-tertiary: #9ca3af;
  --maya-text-inverse: #ffffff;
  --maya-text-disabled: #d1d5db;

  --maya-border: #e2e8f0;
  --maya-border-secondary: #f1f5f9;
  --maya-border-focus: #7408c2;

  --maya-interactive-hover: #f0e6ff;
  --maya-interactive-active: #e6d6ff;
  --maya-interactive-focus: #f8f0ff;
  --maya-interactive-disabled: #f1f5f9;

  --maya-danger: #ef4444;
  --maya-danger-dark: #dc2626;
}

/* Night theme (dark standard) */
[data-maya-theme='night'] {
  --maya-primary: #7408c2;
  --maya-primary-light: #9b4dd9;
  --maya-primary-dark: #5a0a9a;
  --maya-primary-subtle: #f0e6ff;

  --maya-background: #1f2937;
  --maya-surface: #374151;
  --maya-surface-secondary: #4b5563;
  --maya-surface-elevated: #374151;

  --maya-text: #f9fafb;
  --maya-text-secondary: #d1d5db;
  --maya-text-tertiary: #9ca3af;
  --maya-text-inverse: #111827;
  --maya-text-disabled: #6b7280;

  --maya-border: #4b5563;
  --maya-border-secondary: #374151;
  --maya-border-focus: #7408c2;

  --maya-interactive-hover: #2d1b69;
  --maya-interactive-active: #1f0f4d;
  --maya-interactive-focus: #3d2b79;
  --maya-interactive-disabled: #374151;

  --maya-danger: #ef4444;
  --maya-danger-dark: #dc2626;
}