From 5cd186b8129bb444bdd4249c21ffdc0f0261b890 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20S=C3=A4ume?= <dominik.saeume@hmmh.de>
Date: Thu, 9 Jan 2025 19:30:55 +0100
Subject: [PATCH] Fix: Warn/Error/Abort styling for FAB; FIX: remove FAB shadow
 in tables

---
 src/styles.scss | 49 ++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/styles.scss b/src/styles.scss
index 141b522..2a2c147 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -29,15 +29,46 @@ app-root {
 }
 
 button {
-  &.abort, &.error, &.warn {
+  &.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),
-    ));
+        // default
+        text-label-text-color: var(--mat-sys-error),
+        text-ripple-color: var(--mat-sys-error),
+        text-state-layer-color: var(--mat-sys-error),
+        // filled
+        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),
+      ));
+    @include mat.fab-overrides((
+        // default
+        container-color: var(--mat-sys-error-container),
+        foreground-color: var(--mat-sys-on-error-container),
+        state-layer-color: var(--mat-sys-on-error-container),
+        ripple-color: var(color-mix(in srgb, var(--mat-sys-on-error) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent)),
+        // mini
+        small-container-color: var(--mat-sys-error-container),
+        small-foreground-color: var(--mat-sys-on-error-container),
+        small-state-layer-color: var(--mat-sys-on-error-container),
+        small-ripple-color: var(color-mix(in srgb, var(--mat-sys-on-error) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))
+      ));
   }
 }
+
+table button.mdc-fab {
+  @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,
+  ));
+}