roa2web-service-auto/src/assets/css/core/md3-tokens.css

/* Material Design 3 Color Tokens - ROA2WEB */
/*
 * These tokens follow the MD3 naming convention: --md-sys-color-{role}
 * They map to existing design tokens for consistency with our design system.
 *
 * Reference: https://m3.material.io/styles/color/system/overview
 */

:root {
  /* ===== Primary Colors ===== */
  /* Primary: Main brand color, used for key components like FAB, prominent buttons */
  --md-sys-color-primary: var(--color-primary);
  /* On-primary: Text/icons on primary color surfaces */
  --md-sys-color-on-primary: var(--color-text-inverse);
  /* Primary container: Background for components using primary color (chips, cards) */
  --md-sys-color-primary-container: var(--primary-100);
  /* On-primary-container: Text/icons on primary container */
  --md-sys-color-on-primary-container: var(--primary-900);

  /* ===== Secondary Colors ===== */
  /* Secondary: Accent color for less prominent components */
  --md-sys-color-secondary: var(--color-secondary);
  /* On-secondary: Text/icons on secondary color surfaces */
  --md-sys-color-on-secondary: var(--color-text-inverse);
  /* Secondary container: Background for secondary components */
  --md-sys-color-secondary-container: var(--gray-100);
  /* On-secondary-container: Text/icons on secondary container */
  --md-sys-color-on-secondary-container: var(--gray-900);

  /* ===== Surface Colors ===== */
  /* Surface: Background for cards, sheets, dialogs */
  --md-sys-color-surface: var(--surface-card);
  /* On-surface: Primary text on surface */
  --md-sys-color-on-surface: var(--color-text);
  /* Surface variant: Alternate surface for differentiation */
  --md-sys-color-surface-variant: var(--surface-50);
  /* On-surface-variant: Secondary text on surface */
  --md-sys-color-on-surface-variant: var(--color-text-secondary);

  /* ===== Background Colors ===== */
  /* Background: The base layer behind all content */
  --md-sys-color-background: var(--surface-ground);
  /* On-background: Text/icons on background */
  --md-sys-color-on-background: var(--color-text);

  /* ===== Outline Colors ===== */
  /* Outline: Borders for components like text fields, cards */
  --md-sys-color-outline: var(--surface-border);
  /* Outline variant: Subtle borders, dividers */
  --md-sys-color-outline-variant: var(--color-border-light);

  /* ===== Error Colors ===== */
  /* Error: For error states and destructive actions */
  --md-sys-color-error: var(--color-error);
  /* On-error: Text/icons on error surfaces */
  --md-sys-color-on-error: var(--color-text-inverse);
  /* Error container: Background for error states */
  --md-sys-color-error-container: var(--red-100);
  /* On-error-container: Text on error container */
  --md-sys-color-on-error-container: var(--red-900);

  /* ===== Surface Elevation Levels (MD3 Tonal Surfaces) ===== */
  /* Used for elevation system in MD3 instead of shadows */
  --md-sys-color-surface-dim: var(--surface-100);
  --md-sys-color-surface-bright: var(--surface-0);
  --md-sys-color-surface-container-lowest: var(--surface-0);
  --md-sys-color-surface-container-low: var(--surface-50);
  --md-sys-color-surface-container: var(--surface-100);
  --md-sys-color-surface-container-high: var(--surface-200);
  --md-sys-color-surface-container-highest: var(--surface-300);

  /* ===== Inverse Colors ===== */
  /* Used for snackbars, tooltips on dark backgrounds */
  --md-sys-color-inverse-surface: var(--surface-800);
  --md-sys-color-inverse-on-surface: var(--surface-50);
  --md-sys-color-inverse-primary: var(--primary-300);

  /* ===== Scrim ===== */
  /* Overlay for modals and bottom sheets */
  --md-sys-color-scrim: rgba(0, 0, 0, 0.32);
}

/* Manual dark theme via data-theme attribute (highest priority) */
[data-theme="dark"] {
  /* ===== Primary Colors - Dark Mode ===== */
  --md-sys-color-primary: var(--primary-300);
  --md-sys-color-on-primary: var(--primary-900);
  --md-sys-color-primary-container: var(--primary-700);
  --md-sys-color-on-primary-container: var(--primary-100);

  /* ===== Secondary Colors - Dark Mode ===== */
  --md-sys-color-secondary: var(--gray-300);
  --md-sys-color-on-secondary: var(--gray-900);
  --md-sys-color-secondary-container: var(--gray-700);
  --md-sys-color-on-secondary-container: var(--gray-100);

  /* ===== Surface Colors - Dark Mode ===== */
  --md-sys-color-surface: var(--surface-card);
  --md-sys-color-on-surface: var(--color-text);
  --md-sys-color-surface-variant: var(--surface-200);
  --md-sys-color-on-surface-variant: var(--color-text-secondary);

  /* ===== Background Colors - Dark Mode ===== */
  --md-sys-color-background: var(--surface-ground);
  --md-sys-color-on-background: var(--color-text);

  /* ===== Outline Colors - Dark Mode ===== */
  --md-sys-color-outline: var(--surface-border);
  --md-sys-color-outline-variant: var(--surface-300);

  /* ===== Error Colors - Dark Mode ===== */
  --md-sys-color-error: var(--red-300);
  --md-sys-color-on-error: var(--red-900);
  --md-sys-color-error-container: var(--red-800);
  --md-sys-color-on-error-container: var(--red-100);

  /* ===== Surface Elevation Levels - Dark Mode ===== */
  --md-sys-color-surface-dim: var(--surface-0);
  --md-sys-color-surface-bright: var(--surface-200);
  --md-sys-color-surface-container-lowest: var(--surface-0);
  --md-sys-color-surface-container-low: var(--surface-50);
  --md-sys-color-surface-container: var(--surface-100);
  --md-sys-color-surface-container-high: var(--surface-200);
  --md-sys-color-surface-container-highest: var(--surface-300);

  /* ===== Inverse Colors - Dark Mode ===== */
  --md-sys-color-inverse-surface: var(--surface-800);
  --md-sys-color-inverse-on-surface: var(--surface-100);
  --md-sys-color-inverse-primary: var(--primary-600);

  /* ===== Scrim - Dark Mode ===== */
  --md-sys-color-scrim: rgba(0, 0, 0, 0.64);
}

/* System preference dark mode (fallback when no manual theme set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* ===== Primary Colors - Dark Mode ===== */
    --md-sys-color-primary: var(--primary-300);
    --md-sys-color-on-primary: var(--primary-900);
    --md-sys-color-primary-container: var(--primary-700);
    --md-sys-color-on-primary-container: var(--primary-100);

    /* ===== Secondary Colors - Dark Mode ===== */
    --md-sys-color-secondary: var(--gray-300);
    --md-sys-color-on-secondary: var(--gray-900);
    --md-sys-color-secondary-container: var(--gray-700);
    --md-sys-color-on-secondary-container: var(--gray-100);

    /* ===== Surface Colors - Dark Mode ===== */
    --md-sys-color-surface: var(--surface-card);
    --md-sys-color-on-surface: var(--color-text);
    --md-sys-color-surface-variant: var(--surface-200);
    --md-sys-color-on-surface-variant: var(--color-text-secondary);

    /* ===== Background Colors - Dark Mode ===== */
    --md-sys-color-background: var(--surface-ground);
    --md-sys-color-on-background: var(--color-text);

    /* ===== Outline Colors - Dark Mode ===== */
    --md-sys-color-outline: var(--surface-border);
    --md-sys-color-outline-variant: var(--surface-300);

    /* ===== Error Colors - Dark Mode ===== */
    --md-sys-color-error: var(--red-300);
    --md-sys-color-on-error: var(--red-900);
    --md-sys-color-error-container: var(--red-800);
    --md-sys-color-on-error-container: var(--red-100);

    /* ===== Surface Elevation Levels - Dark Mode ===== */
    --md-sys-color-surface-dim: var(--surface-0);
    --md-sys-color-surface-bright: var(--surface-200);
    --md-sys-color-surface-container-lowest: var(--surface-0);
    --md-sys-color-surface-container-low: var(--surface-50);
    --md-sys-color-surface-container: var(--surface-100);
    --md-sys-color-surface-container-high: var(--surface-200);
    --md-sys-color-surface-container-highest: var(--surface-300);

    /* ===== Inverse Colors - Dark Mode ===== */
    --md-sys-color-inverse-surface: var(--surface-800);
    --md-sys-color-inverse-on-surface: var(--surface-100);
    --md-sys-color-inverse-primary: var(--primary-600);

    /* ===== Scrim - Dark Mode ===== */
    --md-sys-color-scrim: rgba(0, 0, 0, 0.64);
  }
}