vac-optimizer/src/styles.scss

// Include theming for Angular Material with `mat.theme()`.
// This Sass mixin will define CSS variables that are used for styling Angular Material
// components according to the Material 3 design spec.
// Learn more about theming and how to use it for your application's
// custom components at https://material.angular.dev/guide/theming
@use '@angular/material' as mat;

@layer reset, base, layout, utilities, blocks, exceptions;

html {
	@include mat.theme(
		(
			color: (
				primary: mat.$azure-palette,
				tertiary: mat.$blue-palette,
			),
			typography: 'Roboto',
			density: 0,
		)
	);
}

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
}

@layer base {
	:root {
		--ui-panel-bg: #f3f6f4;
		--ui-card-bg: #ffffff;
		--ui-border: #dce4df;
		--ui-text-secondary: #52645e;
		--ui-page-bg: #f6f8f6;
		--ui-radius-sm: 0.5rem;
		--ui-radius-md: 0.75rem;
		--ui-radius-lg: 1rem;

		--ui-success-bg: oklch(92% 0.05 145);
		--ui-success-text: oklch(31% 0.1 145);
		--ui-warning-bg: oklch(93% 0.06 82);
		--ui-warning-text: oklch(31% 0.08 75);
		--ui-error-bg: oklch(93% 0.05 25);
		--ui-error-text: oklch(32% 0.12 25);

		--number-bg-hover: #dcece6;
		--number-color: #243d34;
		--number-color-hover: #123e30;
		--past-color: #52645e;
		--week-number-bg: #f3f6f4;
		--week-number-bg-hover: #c0c0c0;
		--week-number-color: #52645e;
		--today-border-color: #16705c;
		--other-month-color: #9e9e9e;
		--weekend-bg: #edf1ee;
		--closed-day-bg: #b78325;
		--rtt-bg: #c8e1f5;
		--cp-bg: #bde5d5;
		--other-bg: #e2d4ee;
		--declared-day-pattern: repeating-linear-gradient(
			135deg,
			transparent 0 5px,
			color-mix(in srgb, currentColor 14%, transparent) 5px 7px
		);
		--loading-overlay-bg: rgba(255, 255, 255, 0.92);
		--loading-text-color: #333;
	}

	.dark-mode {
		--ui-panel-bg: #23352e;
		--ui-card-bg: #1b2a24;
		--ui-page-bg: #13221c;
		--ui-border: #3d5147;
		--ui-text-secondary: #b5c8bd;
		--ui-success-bg: oklch(30% 0.06 145);
		--ui-success-text: oklch(90% 0.07 145);
		--ui-warning-bg: oklch(31% 0.06 82);
		--ui-warning-text: oklch(91% 0.07 82);
		--ui-error-bg: oklch(30% 0.07 25);
		--ui-error-text: oklch(90% 0.07 25);

		--number-bg-hover: #424242;
		--number-color: #f0f6f2;
		--number-color-hover: #ffffff;
		--past-color: #b5c8bd;
		--week-number-bg: #23352e;
		--week-number-bg-hover: #616161;
		--week-number-color: #b5c8bd;
		--today-border-color: #8bd5b9;
		--other-month-color: #757575;
		--weekend-bg: #2b3b32;
		--closed-day-bg: #d9b762;
		--rtt-bg: #254962;
		--cp-bg: #245942;
		--other-bg: #533f63;
		--loading-overlay-bg: rgba(18, 18, 20, 0.92);
		--loading-text-color: #f0f0f0;
	}

	html,
	body {
		min-height: 100%;
	}

	html {
		scrollbar-gutter: stable;
	}

	body {
		margin: 0;
		background-color: var(--ui-page-bg);
		color: var(--mat-sys-on-surface, #1c1b1f);
		font:
			400 1rem/1.5 Roboto,
			'Helvetica Neue',
			sans-serif;
		font-family: Roboto, 'Helvetica Neue', sans-serif;
		line-height: 1.5;

		&.dark-mode {
			--mat-sys-primary: #8bd5b9;
			--mat-sys-on-primary: #103c2d;
			--mat-sys-primary-container: #254e3e;
			--mat-sys-on-primary-container: #c3eddb;
			--mat-sys-on-surface: #edf5ef;
			--mat-sys-on-surface-variant: #b5c8bd;
			--mat-sys-surface: #13221c;
			--mat-sys-surface-container: #1b2a24;
			--mat-sys-surface-container-low: #1b2a24;
			--mat-sys-surface-container-high: #23352e;
			--mat-sys-outline: #93a69b;
			--mat-sys-outline-variant: #3d5147;
			color-scheme: dark;
		}

		&.light-mode {
			--mat-sys-primary: #17644e;
			--mat-sys-on-primary: #ffffff;
			--mat-sys-primary-container: #dceee4;
			--mat-sys-on-primary-container: #174c39;
			--mat-sys-on-surface: #243d34;
			--mat-sys-on-surface-variant: #52645e;
			--mat-sys-surface: #f6f8f6;
			--mat-sys-surface-container: #f3f6f4;
			--mat-sys-surface-container-low: #ffffff;
			--mat-sys-surface-container-high: #eaf0eb;
			--mat-sys-outline: #718279;
			--mat-sys-outline-variant: #dce4df;
			color-scheme: light;
		}
	}

	:where(button, a, input, select, textarea, [tabindex], summary):focus-visible {
		outline: 0.1875rem solid var(--mat-sys-primary, #005cbb);
		outline-offset: 0.125rem;
	}
}

@layer exceptions {
	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			scroll-behavior: auto !important;
			transition-duration: 0.01ms !important;
		}
	}
}