/* Material 3 system tokens. Names follow Angular Material's theming API (material.angular.dev), and the two palettes are its prebuilt Azure & Blue and Magenta & Violet themes. Colour roles are selected by two attributes on : data-scheme = azure | magenta data-mode = light | dark (resolved from the OS for "system") Typography, shape, elevation and motion are shared by every theme. Tertiary is kept green in all four combinations because the panel uses it for success, and a success colour that changes hue reads as a bug. */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;500&display=swap'); /* --- Azure & Blue, dark (the default) ------------------------------- */ :root, [data-scheme='azure'][data-mode='dark'] { --mat-sys-primary: #a8c7fa; --mat-sys-on-primary: #0a305f; --mat-sys-primary-container: #284777; --mat-sys-on-primary-container: #d3e3fd; --mat-sys-secondary: #bfc7dc; --mat-sys-on-secondary: #293041; --mat-sys-secondary-container: #3f4759; --mat-sys-on-secondary-container: #dbe2f9; --mat-sys-surface: #111318; --mat-sys-surface-dim: #111318; --mat-sys-surface-bright: #37393e; --mat-sys-surface-container-lowest: #0c0e13; --mat-sys-surface-container-low: #191c20; --mat-sys-surface-container: #1d2024; --mat-sys-surface-container-high: #282a2f; --mat-sys-surface-container-highest: #33353a; --mat-sys-on-surface: #e2e2e9; --mat-sys-on-surface-variant: #c4c6d0; --mat-sys-outline: #8e9099; --mat-sys-outline-variant: #44474e; --mat-sys-inverse-surface: #e2e2e9; --mat-sys-inverse-on-surface: #2e3035; --mat-sys-tertiary: #6ddf8e; --mat-sys-on-tertiary: #00391b; --mat-sys-tertiary-container: #005227; --mat-sys-on-tertiary-container: #89fca9; --mat-sys-error: #ffb4ab; --mat-sys-on-error: #690005; --mat-sys-error-container: #93000a; --mat-sys-on-error-container: #ffdad6; --mat-sys-warning: #f5c518; --mat-sys-on-warning-container: #ffe08a; --mat-sys-scrim: #000000; color-scheme: dark; } /* --- Azure & Blue, light -------------------------------------------- */ [data-scheme='azure'][data-mode='light'] { --mat-sys-primary: #415f91; --mat-sys-on-primary: #ffffff; --mat-sys-primary-container: #d6e3ff; --mat-sys-on-primary-container: #284777; --mat-sys-secondary: #565f71; --mat-sys-on-secondary: #ffffff; --mat-sys-secondary-container: #dae2f9; --mat-sys-on-secondary-container: #3e4759; --mat-sys-surface: #f9f9ff; --mat-sys-surface-dim: #d9d9e0; --mat-sys-surface-bright: #f9f9ff; --mat-sys-surface-container-lowest: #ffffff; --mat-sys-surface-container-low: #f3f3fa; --mat-sys-surface-container: #ededf4; --mat-sys-surface-container-high: #e7e8ee; --mat-sys-surface-container-highest: #e2e2e9; --mat-sys-on-surface: #191c20; --mat-sys-on-surface-variant: #44474e; --mat-sys-outline: #74777f; --mat-sys-outline-variant: #c4c6d0; --mat-sys-inverse-surface: #2e3036; --mat-sys-inverse-on-surface: #f0f0f7; --mat-sys-tertiary: #006d3b; --mat-sys-on-tertiary: #ffffff; --mat-sys-tertiary-container: #96f7b5; --mat-sys-on-tertiary-container: #00522a; --mat-sys-error: #ba1a1a; --mat-sys-on-error: #ffffff; --mat-sys-error-container: #ffdad6; --mat-sys-on-error-container: #93000a; --mat-sys-warning: #7a5900; --mat-sys-on-warning-container: #5a4100; --mat-sys-scrim: #000000; color-scheme: light; } /* --- Magenta & Violet, dark ----------------------------------------- */ [data-scheme='magenta'][data-mode='dark'] { --mat-sys-primary: #ffabee; --mat-sys-on-primary: #5c1149; --mat-sys-primary-container: #7b2b61; --mat-sys-on-primary-container: #ffd7f0; --mat-sys-secondary: #d8bfd0; --mat-sys-on-secondary: #3b2c37; --mat-sys-secondary-container: #53424e; --mat-sys-on-secondary-container: #f5dbec; --mat-sys-surface: #181116; --mat-sys-surface-dim: #181116; --mat-sys-surface-bright: #3f373d; --mat-sys-surface-container-lowest: #130c11; --mat-sys-surface-container-low: #20181e; --mat-sys-surface-container: #251c22; --mat-sys-surface-container-high: #30262d; --mat-sys-surface-container-highest: #3b3138; --mat-sys-on-surface: #ece0e6; --mat-sys-on-surface-variant: #d5c0cd; --mat-sys-outline: #9e8b97; --mat-sys-outline-variant: #514350; --mat-sys-inverse-surface: #ece0e6; --mat-sys-inverse-on-surface: #352e33; --mat-sys-tertiary: #6ddf8e; --mat-sys-on-tertiary: #00391b; --mat-sys-tertiary-container: #005227; --mat-sys-on-tertiary-container: #89fca9; --mat-sys-error: #ffb4ab; --mat-sys-on-error: #690005; --mat-sys-error-container: #93000a; --mat-sys-on-error-container: #ffdad6; --mat-sys-warning: #f5c518; --mat-sys-on-warning-container: #ffe08a; --mat-sys-scrim: #000000; color-scheme: dark; } /* --- Magenta & Violet, light ---------------------------------------- */ [data-scheme='magenta'][data-mode='light'] { --mat-sys-primary: #8b418f; --mat-sys-on-primary: #ffffff; --mat-sys-primary-container: #ffd7f0; --mat-sys-on-primary-container: #6e2b5a; --mat-sys-secondary: #6b5866; --mat-sys-on-secondary: #ffffff; --mat-sys-secondary-container: #f5dbec; --mat-sys-on-secondary-container: #53424e; --mat-sys-surface: #fff7f9; --mat-sys-surface-dim: #e2d7dd; --mat-sys-surface-bright: #fff7f9; --mat-sys-surface-container-lowest: #ffffff; --mat-sys-surface-container-low: #fdf0f6; --mat-sys-surface-container: #f8eaf2; --mat-sys-surface-container-high: #f2e4ec; --mat-sys-surface-container-highest: #ecdee6; --mat-sys-on-surface: #201a1e; --mat-sys-on-surface-variant: #4f444b; --mat-sys-outline: #817580; --mat-sys-outline-variant: #d2c2cc; --mat-sys-inverse-surface: #352e33; --mat-sys-inverse-on-surface: #faedf3; --mat-sys-tertiary: #006d3b; --mat-sys-on-tertiary: #ffffff; --mat-sys-tertiary-container: #96f7b5; --mat-sys-on-tertiary-container: #00522a; --mat-sys-error: #ba1a1a; --mat-sys-on-error: #ffffff; --mat-sys-error-container: #ffdad6; --mat-sys-on-error-container: #93000a; --mat-sys-warning: #7a5900; --mat-sys-on-warning-container: #5a4100; --mat-sys-scrim: #000000; color-scheme: light; } :root { /* State layers: M3 opacities, applied over the parent colour. */ --mat-sys-hover-state-layer-opacity: 0.08; --mat-sys-focus-state-layer-opacity: 0.1; --mat-sys-pressed-state-layer-opacity: 0.1; /* --- typography --------------------------------------------------- */ --mat-sys-brand-font-family: Roboto, 'Helvetica Neue', Arial, sans-serif; --mat-sys-plain-font-family: Roboto, 'Helvetica Neue', Arial, sans-serif; --mat-sys-code-font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --mat-sys-display-small: 400 36px / 44px var(--mat-sys-brand-font-family); --mat-sys-headline-small: 400 24px / 32px var(--mat-sys-brand-font-family); --mat-sys-title-large: 500 22px / 28px var(--mat-sys-brand-font-family); --mat-sys-title-medium: 500 16px / 24px var(--mat-sys-plain-font-family); --mat-sys-title-small: 500 14px / 20px var(--mat-sys-plain-font-family); --mat-sys-body-large: 400 16px / 24px var(--mat-sys-plain-font-family); --mat-sys-body-medium: 400 14px / 20px var(--mat-sys-plain-font-family); --mat-sys-body-small: 400 12px / 16px var(--mat-sys-plain-font-family); --mat-sys-label-large: 500 14px / 20px var(--mat-sys-plain-font-family); --mat-sys-label-medium: 500 12px / 16px var(--mat-sys-plain-font-family); --mat-sys-label-small: 500 11px / 16px var(--mat-sys-plain-font-family); /* --- shape -------------------------------------------------------- */ --mat-sys-corner-extra-small: 4px; --mat-sys-corner-small: 8px; --mat-sys-corner-medium: 12px; --mat-sys-corner-large: 16px; --mat-sys-corner-extra-large: 28px; --mat-sys-corner-full: 9999px; /* --- elevation ---------------------------------------------------- */ --mat-sys-level0: none; --mat-sys-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15); --mat-sys-level2: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15); --mat-sys-level3: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); --mat-sys-level4: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15); /* --- motion ------------------------------------------------------- */ --mat-sys-motion-short: 150ms; --mat-sys-motion-medium: 250ms; --mat-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); }