Fix: Add Warn/Error/Abort Theming

src/app/app.config.ts

@@ -1,5 +1,6 @@
 import {provideHttpClient} from '@angular/common/http';
 import {ApplicationConfig, provideZoneChangeDetection} from '@angular/core';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
 import {provideRouter} from '@angular/router';
 import {routes} from '@app/app.routes';
@@ -26,6 +27,7 @@ export const appConfig: ApplicationConfig = {
                 useRefreshToken: true,
                 logLevel: LogLevel.Error,
             },
-        })
+        }),
+        { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } }
     ],
 };

src/styles.scss

@@ -27,3 +27,17 @@ app-root {
   flex-direction: column;
   align-items: center;
 }
+
+button {
+  &.abort, &.error, &.warn {
+    @include mat.button-overrides((
+      text-label-text-color: var(--mat-sys-error),
+      text-ripple-color: var(--mat-sys-error),
+      text-state-layer-color: var(--mat-sys-error),
+      filled-label-text-color: var(--mat-sys-on-error),
+      filled-container-color: var(--mat-sys-error),
+      filled-ripple-color: var(--mat-sys-on-error),
+      filled-state-layer-color: var(--mat-sys-on-error),
+    ));
+  }
+}