cleanup on styles

Author: cskiwi

apps/app/src/styles.scss

@@ -1,5 +1,5 @@
 @use '@angular/material' as mat;
-@use './styles/m3-theme.scss' as m3-theme;
+@use './styles/theme.scss' as theme;
 @use '../../../libs/frontend/root/theme' as frontend-root;
 
 /* You can add global styles to this file, and also import other style files */
@@ -15,11 +15,11 @@ body {
 @include mat.core();
 
 html {
-  @include mat.all-component-themes(m3-theme.$dark-theme);
-  @include frontend-root.theme(m3-theme.$dark-theme);
+  @include mat.all-component-themes(theme.$dark-theme);
+  @include frontend-root.theme(theme.$dark-theme);
 
   @media (prefers-color-scheme: light) {
-    @include mat.all-component-colors(m3-theme.$light-theme);
-    @include frontend-root.theme(m3-theme.$light-theme);
+    @include mat.all-component-colors(theme.$light-theme);
+    @include frontend-root.theme(theme.$light-theme);
   }
 }

apps/app/src/styles/m3-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '@angular/material' as mat;
 
 /// Defines a dark color theme with success and danger colors.
@@ -7,7 +8,7 @@
 /// @param {Map} $success The success color map.
 /// @param {Map} $danger The danger color map.
 
-@function badman-theme(
+@function define-theme(
   $primary,
   $type: dark,
   $warn: $mat-orange,
@@ -22,7 +23,7 @@
         primary: $primary,
       ),
       density: (
-        scale: $density
+        scale: $density,
       ),
     )
   );
@@ -34,3 +35,25 @@
   );
   @return map-merge($theme, $rest);
 }
+
+$theme-warn: mat.$orange-palette;
+$theme-success: mat.$green-palette;
+$theme-danger: mat.$red-palette;
+
+$dark-theme: define-theme(
+  mat.$blue-palette,
+  dark,
+  $theme-warn,
+  $theme-success,
+  $theme-danger,
+  -2
+);
+
+$light-theme: define-theme(
+  mat.$violet-palette,
+  light,
+  $theme-warn,
+  $theme-success,
+  $theme-danger,
+  -2
+);