@use '@angular/material' as mat; html, body { height: 100%; min-height: 100%; margin: 0; background: var(--mat-sys-surface); color: var(--mat-sys-on-surface); --mat-sys-primary-overlay: color-mix(in srgb, var(--mat-sys-primary) 10%, transparent); color-scheme: light dark; font-family: var(--mat-sys-label-medium-font); @include mat.theme(( color: mat.$azure-palette, typography: Roboto, density: 0 )); } app-root { height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; } .mdc-button, .mdc-fab { &.abort, &.error, &.warn { $ripple: var(color-mix(in srgb, var(--mat-sys-on-error) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent)); $fg: var(--mat-sys-on-error); $bg: var(--mat-sys-error); $fg-container: var(--mat-sys-on-error-container); $bg-container: var(--mat-sys-error-container); @include mat.button-overrides(( // default text-label-text-color: $bg, text-ripple-color: $ripple, text-state-layer-color: $bg, // filled filled-label-text-color: $fg, filled-container-color: $bg, filled-ripple-color: $ripple, filled-state-layer-color: $fg, )); @include mat.fab-overrides(( // default container-color: $bg-container, foreground-color: $fg-container, state-layer-color: $fg-container, ripple-color: $ripple, // mini small-container-color: $bg-container, small-foreground-color: $fg-container, small-state-layer-color: $fg-container, small-ripple-color: $ripple )); } } .mdc-fab.shadowless { @include mat.fab-overrides(( // default container-elevation-shadow: transparent, hover-container-elevation-shadow: transparent, pressed-container-elevation-shadow: transparent, focus-container-elevation-shadow: transparent, // mini small-container-elevation-shadow: transparent, small-hover-container-elevation-shadow: transparent, small-pressed-container-elevation-shadow: transparent, small-focus-container-elevation-shadow: transparent, )); }