[AAE-45132] - Make style MD3 compliant

lib/core/custom-theme/README.md

@@ -1,3 +1,5 @@
 # DEPRECATION WARNING
 
-The custom theme is deprecated and will be removed in the future. To generate a custom theme, please refer to the Angular Material [Custom Theme section](https://v18.material.angular.dev/guide/theming#custom-theme).
+The custom theme is deprecated and will be removed in the future. To generate a custom theme, please refer to the Angular Material [Custom Theme section](https://material.angular.dev/guide/theming#custom-theme).
+
+This theme has been migrated to Material Design 3 (M3) using `mat.theme()`.

lib/core/custom-theme/material-theme.scss

@@ -1,36 +1,40 @@
-@use 'sass:map';
 @use '@angular/material' as mat;
 @use './theme/theme-data' as theme;
 
-$custom-theme: mat.m2-define-light-theme(
+html {
-    (
+    @if theme.$base-font-size {
-        color: (
-            primary: map.get(theme.$palettes, primary),
-            accent: map.get(theme.$palettes, accent),
-            warn: map.get(theme.$palettes, warning)
-        ),
-        typography: theme.$app-typography
-    )
-);
-
-@if theme.$background-color {
-    $custom-theme: theme.get-custom-background-color(theme.$background-color, $custom-theme);
-}
-
-@if theme.$text-color {
-    $custom-theme: theme.get-custom-text-color(theme.$text-color, $custom-theme);
-}
-
-@if theme.$base-font-size {
-    body,
-    html {
         font-size: theme.$base-font-size;
     }
-}
 
-@if theme.$font-family {
+    @if theme.$font-family {
-    body,
-    html {
         font-family: theme.$font-family;
     }
+
+    @include mat.theme(
+        (
+            color: (
+                primary: theme.$primary-palette,
+                tertiary: theme.$tertiary-palette,
+                theme-type: light
+            ),
+            typography: theme.$typography-config,
+            density: 0
+        )
+    );
+
+    @if theme.$background-color {
+        & {
+            --mat-sys-surface: #{theme.$background-color};
+            --mat-sys-surface-container: #{theme.$background-color};
+            --mat-sys-surface-container-low: #{theme.$background-color};
+            --mat-sys-surface-container-lowest: #{theme.$background-color};
+        }
+    }
+
+    @if theme.$text-color {
+        & {
+            --mat-sys-on-surface: #{theme.$text-color};
+            --mat-sys-on-surface-variant: #{theme.$text-color};
+        }
+    }
 }

lib/core/custom-theme/theme/custom-theme-palettes.scss

@@ -1,27 +1,18 @@
 @use '@angular/material' as mat;
 @use 'default-colors';
-@use 'custom-palette-creator';
-
-@function get-mat-palettes($primary-color, $accent-color) {
-    $mat-primary-palette: null;
 
+@function get-palette($primary-color) {
     @if ($primary-color) {
-        $custom-theme-primary-palette: custom-palette-creator.create-color-palette($primary-color, 'primary');
+        @return $primary-color;
-        $mat-primary-palette: mat.m2-define-palette($custom-theme-primary-palette, 500);
-    } @else {
-        $mat-primary-palette: mat.m2-define-palette(default-colors.$default-primary, A100);
     }
 
-    $mat-accent-palette: null;
+    @return default-colors.$default-primary;
+}
 
+@function get-tertiary-palette($accent-color) {
     @if ($accent-color) {
-        $custom-theme-accent-palette: custom-palette-creator.create-color-palette($accent-color, 'accent');
+        @return $accent-color;
-        $mat-accent-palette: mat.m2-define-palette($custom-theme-accent-palette, 500);
-    } @else {
-        $mat-accent-palette: mat.m2-define-palette(default-colors.$default-accent);
     }
 
-    $mat-warn-palette: mat.m2-define-palette(default-colors.$default-warn, A100);
+    @return default-colors.$default-tertiary;
-
-    @return (primary: $mat-primary-palette, accent: $mat-accent-palette, warning: $mat-warn-palette);
 }

lib/core/custom-theme/theme/default-colors.scss

@@ -1,26 +1,4 @@
-/*
-    This file can be replaced by file with your default palettes.
-
-    In order to generate material theme, we need to provide three palettes, 'primary', 'accent' and 'warnign'.
-    If user would like to dynamically create only one palette, e.g. 'primary', in that case we need to provide
-    remaining palettes.
-
-    e.g.
-
-    @use '@angular/material' as mat;
-
-    $default-primary: mat.$indigo-palette;
-    $default-accent: $my-custom-palette;
-    $default-warn: (
-        50: #35041e,
-        100: #dd68a8,
-        contrast: (
-            ...
-        ),
-*/
-
 @use '@angular/material' as mat;
 
-$default-primary: mat.$indigo-palette;
+$default-primary: mat.$azure-palette;
-$default-accent: mat.$pink-palette;
+$default-tertiary: mat.$rose-palette;
-$default-warn: mat.$red-palette;

lib/core/custom-theme/theme/theme-configuration.scss.tpl

@@ -1,18 +1,22 @@
 /*
     Replace 'THEME_CONFIGURATION' placeholder with your theme configuration using '$theme-config' variable map.
 
-    Specify colors for palettes generation, e.g. if for 'primaryColor' the color is going to be 'red'(#fc0313).
+    Color values (primaryColor, accentColor) must be Angular Material M3 palette objects.
-    Then, we are going to generate 'primary' palette based on the 'red' color.
+    Available built-in palettes: mat.$azure-palette, mat.$blue-palette, mat.$cyan-palette,
-    Geenerated pallete is going to be used to create material design theme
+    mat.$green-palette, mat.$magenta-palette, mat.$orange-palette, mat.$red-palette,
+    mat.$rose-palette, mat.$violet-palette, mat.$yellow-palette, mat.$chartreuse-palette,
+    mat.$spring-green-palette.
 
     e.g.
 
+    @use '@angular/material' as mat;
+
     $theme-config: (
-        primaryColor: #5175d2,
+        primaryColor: mat.$azure-palette,
+        accentColor: mat.$rose-palette,
         backgroundColor: #FAFAFA,
         textColor: #793942,
-        accentColor: #C64F73,
+        baseFontSize: 16px,
-        baseFontSize: 26px,
         fontFamily: Cursive
     );
 */

lib/core/custom-theme/theme/theme-data.scss

@@ -2,17 +2,14 @@
 @use 'theme-configuration';
 @use 'typography';
 @use 'custom-theme-palettes';
-@use 'custom-background-color';
-@use 'custom-text-color';
 
 $primary-color: map.get(theme-configuration.$theme-config, 'primaryColor');
 $accent-color: map.get(theme-configuration.$theme-config, 'accentColor');
 $background-color: map.get(theme-configuration.$theme-config, 'backgroundColor');
-
 $text-color: map.get(theme-configuration.$theme-config, 'textColor');
 $base-font-size: map.get(theme-configuration.$theme-config, 'baseFontSize');
 $font-family: map.get(theme-configuration.$theme-config, 'fontFamily');
 
-$app-typography: typography.get-mat-typography($base-font-size, $font-family);
+$primary-palette: custom-theme-palettes.get-palette($primary-color);
-
+$tertiary-palette: custom-theme-palettes.get-tertiary-palette($accent-color);
-$palettes: custom-theme-palettes.get-mat-palettes($primary-color, $accent-color);
+$typography-config: typography.get-typography-config($font-family);

lib/core/custom-theme/theme/typography.scss

@@ -1,78 +1,13 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use 'sass:meta';
 @use '../variables/font-family';
 
-@function get-mat-typography($base-font-size, $font-family) {
+$default-plain-family: font-family.$default-font-family, Roboto, 'Helvetica Neue', sans-serif;
-    $custom-typography: mat.m2-define-typography-config(
-        $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
-        $headline-1: mat.m2-define-typography-level(112px, 112px, 300),
-        $headline-2: mat.m2-define-typography-level(56px, 56px, 400),
-        $headline-3: mat.m2-define-typography-level(45px, 48px, 400),
-        $headline-4: mat.m2-define-typography-level(34px, 40px, 400),
-        $headline-5: mat.m2-define-typography-level(24px, 32px, 400),
-        $headline-6: mat.m2-define-typography-level(20px, 32px, 500),
-        $subtitle-1: mat.m2-define-typography-level(16px, 28px, 400),
-        $body-1: mat.m2-define-typography-level(15px, 24px, 400),
-        $subtitle-2: mat.m2-define-typography-level(14px, 24px, 500),
-        $body-2: mat.m2-define-typography-level(14px, 20px, 400),
-        $caption: mat.m2-define-typography-level(12px, 20px, 400),
-        $button: mat.m2-define-typography-level(14px, 14px, 500) // Line-height must be unit-less fraction of the font-size.
-    );
 
-    @if $base-font-size {
+@function get-typography-config($font-family) {
-        $custom-typography: mat.m2-define-typography-config(
+    $plain: $default-plain-family;
-            $headline-1: mat.m2-define-typography-level(8rem, 8rem, 300),
-            $headline-2: mat.m2-define-typography-level(4rem, 4rem, 400),
-            $headline-3: mat.m2-define-typography-level(3.21rem, 3.21rem, 400),
-            $headline-4: mat.m2-define-typography-level(2.42rem, 2.85rem, 400),
-            $headline-5: mat.m2-define-typography-level(1.71rem, 2.28rem, 400),
-            $headline-6: mat.m2-define-typography-level(1.42rem, 2.28rem, 500),
-            $subtitle-1: mat.m2-define-typography-level(1.14rem, 2rem, 400),
-            $body-1: mat.m2-define-typography-level(1.07rem, 1.71rem, 400),
-            $subtitle-2: mat.m2-define-typography-level(1rem, 1.71rem, 500),
-            $body-2: mat.m2-define-typography-level(1rem, 1.42rem, 400),
-            $caption: mat.m2-define-typography-level(0.86rem, 1.42rem, 400),
-            $button: mat.m2-define-typography-level(1rem, 1rem, 500),
-            $font-family: font-family.$default-font-family
-        );
-    }
 
     @if $font-family {
-        @each $key, $level in $custom-typography {
+        $plain: $font-family;
-            /* stylelint-disable-next-line scss/no-global-function-names */
-            @if meta.type-of($level) == 'map' {
-                $new-level: map.merge(
-                    $level,
-                    (
-                        font-family: $font-family
-                    )
-                );
-                $custom-typography: map.merge(
-                    $custom-typography,
-                    (
-                        $key: $new-level
-                    )
-                );
-            }
-        }
-
-        $custom-typography: map.merge(
-            $custom-typography,
-            (
-                font-family: $font-family
-            )
-        );
     }
 
-    @return $custom-typography;
+    @return (plain-family: $plain, brand-family: $plain, bold-weight: 700, medium-weight: 500, regular-weight: 400);
-}
-
-@function get-custom-adf-font-sizes() {
-    @return (
-        'theme-adf-icon-1-font-size': 1.2rem,
-        'theme-adf-picture-1-font-size': 1.28rem,
-        'theme-adf-task-footer-font-size': 1.28rem,
-        'theme-adf-task-title-font-size': 1.28rem
-    );
 }