dev env setup

packages/frontend/src/styles.scss

@@ -5,16 +5,24 @@
 // Learn more about theming and how to use it for your application's
 // custom components at https://material.angular.dev/guide/theming
 @use '@angular/material' as mat;
+@use './styles.colors.scss' as my-theme;
+
+@include mat.core();
+
+@include mat.all-component-themes(my-theme.$light-theme);
+@include mat.color-variants-backwards-compatibility(my-theme.$light-theme);
 
 html {
-  @include mat.theme((
-    color: (
-      primary: mat.$cyan-palette,
-      tertiary: mat.$orange-palette,
-    ),
-    typography: Roboto,
-    density: 0,
-  ));
+  // @include mat.theme((
+  //   color: (
+  //     primary: my-theme.$primary-palette,
+  //     tertiary: my-theme.$tertiary-palette,
+  //   ),
+  //   typography: Roboto,
+  //   density: 0,
+  // ));
+  @include mat.core-theme(my-theme.$light-theme);
+  @include mat.button-theme(my-theme.$light-theme);
 }
 
 body {