Update theme files and provide updated variable names for Material theme

Author: KhizerRehan

modules/web/src/app/core/components/notification-panel/theme.scss

@@ -26,7 +26,7 @@
   }
 
   .notification-badge {
-    border: 1px solid map.get($colors, background-app-bar);
+    border: 1px solid map.get($colors, background-card);
     color: #fff;
   }
 }

modules/web/src/app/core/components/notification/theme.scss

@@ -15,13 +15,37 @@
 @use 'sass:map';
 
 @mixin theme-notification-component($colors) {
-  km-notification {
-    background: map.get($colors, background-app-bar);
-    color: map.get($colors, text);
+  .mat-mdc-snack-bar-container km-notification,
+  .cdk-overlay-pane:has(km-notification) .mat-mdc-snack-bar-container {
+    // Override Material Design CSS custom properties with theme colors
+    --mdc-snackbar-container-color: #{map.get($colors, background-card)};
+    --mdc-snackbar-supporting-text-color: #{map.get($colors, text)};
+    --mat-snack-bar-button-color: #{map.get($colors, primary)};
 
-    .notification-container {
-      &.show-message-section > :nth-child(-n + 3) {
-        border-bottom: 1px solid map.get($colors, divider);
+    // Dialog component CSS custom properties for dialogs containing notifications
+    --mdc-dialog-container-color: #{map.get($colors, background-dialog)};
+    --mdc-dialog-supporting-text-color: #{map.get($colors, text)};
+
+    .mat-mdc-snackbar-surface,
+    .mdc-snackbar__surface {
+      background-color: var(--mdc-snackbar-container-color) !important;
+      color: var(--mdc-snackbar-supporting-text-color) !important;
+    }
+
+    .mat-mdc-snack-bar-label {
+      color: var(--mdc-snackbar-supporting-text-color) !important;
+    }
+
+    // Ensure our km-notification component also gets the colors
+    km-notification {
+      background-color: var(--mdc-snackbar-container-color) !important;
+      color: var(--mdc-snackbar-supporting-text-color) !important;
+
+
+      .notification-container {
+        &.show-message-section > :nth-child(-n + 3) {
+          border-bottom: 1px solid map.get($colors, divider);
+        }
       }
     }
   }

modules/web/src/assets/css/theme/_main.scss

@@ -31,11 +31,11 @@ $my-typography: mat.m2-define-typography-config(
   $palette-background: map.get($theme, background);
   $palette-foreground: map.get($theme, foreground);
   $theme-colors: (
-    background-app-bar: mat.m2-get-color-from-palette($palette-background, app-bar),
-    background-card: mat.m2-get-color-from-palette($palette-background, card),
-    background-dialog: mat.m2-get-color-from-palette($palette-background, dialog),
+    background-app-bar: map.get($palette-background, app-bar),
+    background-card: map.get($palette-background, card),
+    background-dialog: map.get($palette-background, dialog),
     background-disabled-button: mat.m2-get-color-from-palette($palette-background, disabled-button),
-    background-hover: mat.m2-get-color-from-palette($palette-background, hover),
+    background-hover: map.get($palette-background, hover),
     background: mat.m2-get-color-from-palette($palette-background, background),
     checkbox-disabled: mat.m2-get-color-from-palette($palette-foreground, disabled-checkbox),
     checkbox-disabled-checked: mat.m2-get-color-from-palette($palette-foreground, disabled-checkbox-checked),

modules/web/src/assets/themes/dark.scss

@@ -187,6 +187,19 @@ $theme-dark: map.merge(
 @include mat.all-component-themes($theme-dark);
 @include main.theme($theme-dark, $colors-dark);
 
+// Override Angular Material v20 CSS custom properties for components
+:root {
+  --mat-card-outlined-container-color: #{map.get($background, card)};
+  --mat-card-elevated-container-color: #{map.get($background, card)};
+  --mat-card-filled-container-color: #{map.get($background, card)};
+ 
+  --mat-table-background-color: #{map.get($background, card)};
+  --mat-stepper-container-color: #{map.get($background, card)};
+  --mat-button-toggle-background-color: #{map.get($background, card)};
+
+  --mdc-dialog-container-color: #{map.get($background, dialog)};
+}
+
 // Make icons and logos white with 85% opacity.
 .km-header-logo,
 .km-provider-logo,

modules/web/src/assets/themes/light.scss

@@ -88,12 +88,30 @@ $background: map.merge(
     background: #edeff0,
   )
 );
+$background: map.merge(
+  $background,
+  (
+    hover: #f5f5f5,
+  )
+);
 $background: map.merge(
   $background,
   (
     app-bar: #fff,
   )
 );
+$background: map.merge(
+  $background,
+  (
+    card: #fff,
+  )
+);
+$background: map.merge(
+  $background,
+  (
+    dialog: #fff,
+  )
+);
 $theme-light: map.merge(
   $theme-light,
   (
@@ -164,3 +182,17 @@ $theme-light: map.merge(
 
 @include mat.all-component-themes($theme-light);
 @include main.theme($theme-light, $colors-light);
+
+
+// Override Angular Material v20 CSS custom properties for components
+:root {
+  --mat-card-outlined-container-color: #{map.get($background, card)};
+  --mat-card-elevated-container-color: #{map.get($background, card)};
+  --mat-card-filled-container-color: #{map.get($background, card)};
+
+  --mat-table-background-color: #{map.get($background, card)};
+  --mat-stepper-container-color: #{map.get($background, card)};
+  --mat-button-toggle-background-color: #{map.get($background, card)};
+
+  --mdc-dialog-container-color: #{map.get($background, dialog)};
+}