152 lines
6.3 KiB
SCSS
152 lines
6.3 KiB
SCSS
@use 'sass:map';
|
|
@use '@angular/material' as mat;
|
|
|
|
$material-colors: (
|
|
primary: mat.$cyan-palette,
|
|
tertiary: mat.$azure-palette,
|
|
theme-type: color-scheme,
|
|
);
|
|
|
|
@mixin light {
|
|
color-scheme: light;
|
|
|
|
/* Calm teal, ink, and warm-neutral palette. */
|
|
--canvas: oklch(97.5% 0.012 165);
|
|
--surface: oklch(100% 0 0);
|
|
--surface-raised: oklch(100% 0 0);
|
|
--surface-soft: oklch(95% 0.018 165);
|
|
--surface-accent: oklch(94% 0.035 180);
|
|
--text: oklch(24% 0.025 165);
|
|
--text-muted: oklch(45% 0.028 165);
|
|
--text-subtle: oklch(52% 0.024 165);
|
|
--accent: oklch(48% 0.12 180);
|
|
--accent-strong: oklch(38% 0.11 180);
|
|
--accent-contrast: oklch(100% 0 0);
|
|
--tertiary: #{map.get(mat.$azure-palette, 40)};
|
|
--tertiary-container: #{map.get(mat.$azure-palette, 90)};
|
|
--tertiary-contrast: #{map.get(mat.$azure-palette, 100)};
|
|
--tertiary-strong: #{map.get(mat.$azure-palette, 30)};
|
|
--tertiary-fixed: #{map.get(mat.$azure-palette, 90)};
|
|
--tertiary-fixed-dim: #{map.get(mat.$azure-palette, 80)};
|
|
--tertiary-fixed-contrast: #{map.get(mat.$azure-palette, 10)};
|
|
--tertiary-fixed-variant: #{map.get(mat.$azure-palette, 30)};
|
|
--border: oklch(90% 0.018 165);
|
|
--border-strong: oklch(83% 0.025 165);
|
|
--danger: oklch(48% 0.17 28);
|
|
--danger-soft: oklch(95% 0.03 28);
|
|
--danger-contrast: oklch(100% 0 0);
|
|
--warning: oklch(50% 0.14 75);
|
|
--warning-soft: oklch(96% 0.04 85);
|
|
--qr-light: oklch(100% 0 0);
|
|
--qr-dark: oklch(0% 0 0);
|
|
--qr-accent: oklch(38% 0.11 180);
|
|
--shadow: 0 24px 60px rgb(23 37 34 / 10%);
|
|
--shadow-float: 0 8px 24px rgb(23 37 34 / 12%);
|
|
--shadow-navigation: 0 -10px 30px rgb(23 37 34 / 6%);
|
|
--shadow-card: 0 1px 0 oklch(100% 0 0 / 4%);
|
|
--shadow-color: oklch(0% 0 0);
|
|
--scrim: oklch(0% 0 0);
|
|
--story-start: oklch(29% 0.08 175);
|
|
--story-mid: oklch(23% 0.07 175);
|
|
--story-end: oklch(15% 0.055 175);
|
|
--story-text: oklch(97% 0.02 165);
|
|
--story-accent: oklch(82% 0.1 180);
|
|
--story-muted: oklch(97% 0.02 165 / 76%);
|
|
--story-border: oklch(100% 0 0 / 14%);
|
|
}
|
|
|
|
@mixin dark {
|
|
color-scheme: dark;
|
|
|
|
--canvas: oklch(18% 0.02 165);
|
|
--surface: oklch(22% 0.025 165);
|
|
--surface-raised: oklch(27% 0.028 165);
|
|
--surface-soft: oklch(31% 0.032 165);
|
|
--surface-accent: oklch(32% 0.07 180);
|
|
--text: oklch(96% 0.012 165);
|
|
--text-muted: oklch(76% 0.025 165);
|
|
--text-subtle: oklch(71% 0.025 165);
|
|
--accent: oklch(80% 0.09 180);
|
|
--accent-strong: oklch(87% 0.07 180);
|
|
--accent-contrast: oklch(25% 0.05 180);
|
|
--tertiary: #{map.get(mat.$azure-palette, 80)};
|
|
--tertiary-container: #{map.get(mat.$azure-palette, 30)};
|
|
--tertiary-contrast: #{map.get(mat.$azure-palette, 20)};
|
|
--tertiary-strong: #{map.get(mat.$azure-palette, 90)};
|
|
--tertiary-fixed: #{map.get(mat.$azure-palette, 90)};
|
|
--tertiary-fixed-dim: #{map.get(mat.$azure-palette, 80)};
|
|
--tertiary-fixed-contrast: #{map.get(mat.$azure-palette, 10)};
|
|
--tertiary-fixed-variant: #{map.get(mat.$azure-palette, 30)};
|
|
--border: oklch(36% 0.025 165);
|
|
--border-strong: oklch(47% 0.03 165);
|
|
--danger: oklch(80% 0.08 28);
|
|
--danger-soft: oklch(31% 0.065 28);
|
|
--danger-contrast: oklch(30% 0.06 28);
|
|
--warning: oklch(83% 0.11 80);
|
|
--warning-soft: oklch(31% 0.06 80);
|
|
--qr-light: oklch(100% 0 0);
|
|
--qr-dark: oklch(0% 0 0);
|
|
--qr-accent: oklch(42% 0.09 180);
|
|
--shadow: 0 24px 60px rgb(0 0 0 / 32%);
|
|
--shadow-float: 0 8px 24px rgb(0 0 0 / 32%);
|
|
--shadow-navigation: 0 -10px 30px rgb(0 0 0 / 20%);
|
|
--shadow-card: 0 1px 0 oklch(100% 0 0 / 4%);
|
|
--shadow-color: oklch(0% 0 0);
|
|
--scrim: oklch(0% 0 0);
|
|
}
|
|
|
|
@mixin material-system {
|
|
/* Keep Material controls on the same semantic palette. */
|
|
--mat-sys-background: var(--canvas, #f5f8f7);
|
|
--mat-sys-error: var(--danger, #b42318);
|
|
--mat-sys-error-container: var(--danger-soft, #fee9e7);
|
|
--mat-sys-inverse-on-surface: var(--surface, #ffffff);
|
|
--mat-sys-inverse-primary: var(--accent-strong, #004f4f);
|
|
--mat-sys-inverse-surface: var(--text, #172522);
|
|
--mat-sys-on-background: var(--text, #172522);
|
|
--mat-sys-on-error: var(--danger-contrast, #ffffff);
|
|
--mat-sys-on-error-container: var(--danger, #b42318);
|
|
--mat-sys-on-primary: var(--accent-contrast, #ffffff);
|
|
--mat-sys-on-primary-container: var(--accent-strong, #004f4f);
|
|
--mat-sys-on-primary-fixed: var(--accent-contrast, #ffffff);
|
|
--mat-sys-on-primary-fixed-variant: var(--accent-strong, #004f4f);
|
|
--mat-sys-on-secondary: var(--accent-contrast, #ffffff);
|
|
--mat-sys-on-secondary-container: var(--text, #172522);
|
|
--mat-sys-on-secondary-fixed: var(--accent-contrast, #ffffff);
|
|
--mat-sys-on-secondary-fixed-variant: var(--accent-strong, #004f4f);
|
|
--mat-sys-on-surface: var(--text, #172522);
|
|
--mat-sys-on-surface-variant: var(--text-muted, #50615d);
|
|
--mat-sys-on-tertiary: var(--tertiary-contrast, #ffffff);
|
|
--mat-sys-on-tertiary-container: var(--tertiary-strong, #00458f);
|
|
--mat-sys-on-tertiary-fixed: var(--tertiary-fixed-contrast, #001b3f);
|
|
--mat-sys-on-tertiary-fixed-variant: var(--tertiary-fixed-variant, #00458f);
|
|
--mat-sys-outline: var(--border-strong, #c0ceca);
|
|
--mat-sys-outline-variant: var(--border, #d8e2df);
|
|
--mat-sys-primary: var(--accent, #006a6a);
|
|
--mat-sys-primary-container: var(--surface-accent, #e0f3f1);
|
|
--mat-sys-primary-fixed: var(--accent, #006a6a);
|
|
--mat-sys-primary-fixed-dim: var(--accent-strong, #004f4f);
|
|
--mat-sys-scrim: var(--scrim, #000000);
|
|
--mat-sys-secondary: var(--accent-strong, #004f4f);
|
|
--mat-sys-secondary-container: var(--surface-soft, #edf3f2);
|
|
--mat-sys-secondary-fixed: var(--accent, #006a6a);
|
|
--mat-sys-secondary-fixed-dim: var(--accent-strong, #004f4f);
|
|
--mat-sys-shadow: var(--shadow-color, #000000);
|
|
--mat-sys-surface: var(--surface, #ffffff);
|
|
--mat-sys-surface-bright: var(--surface-raised, #ffffff);
|
|
--mat-sys-surface-container: var(--surface-soft, #edf3f2);
|
|
--mat-sys-surface-container-high: var(--surface-raised, #ffffff);
|
|
--mat-sys-surface-container-highest: var(--border-strong, #c0ceca);
|
|
--mat-sys-surface-container-low: var(--canvas, #f5f8f7);
|
|
--mat-sys-surface-container-lowest: var(--surface, #ffffff);
|
|
--mat-sys-surface-dim: var(--canvas, #f5f8f7);
|
|
--mat-sys-surface-tint: var(--accent, #006a6a);
|
|
--mat-sys-surface-variant: var(--surface-soft, #edf3f2);
|
|
--mat-sys-tertiary: var(--tertiary, #005cbb);
|
|
--mat-sys-tertiary-container: var(--tertiary-container, #d7e3ff);
|
|
--mat-sys-tertiary-fixed: var(--tertiary-fixed, #d7e3ff);
|
|
--mat-sys-tertiary-fixed-dim: var(--tertiary-fixed-dim, #abc7ff);
|
|
--mat-sys-neutral-variant20: var(--border-strong, #c0ceca);
|
|
--mat-sys-neutral10: var(--text, #172522);
|
|
}
|