[ACS-10449] migrate ACA to MD3 (#5199)

* [ACS-10449] replace color usage in templates

* [ACS-10449] switch from @import to @use

* [ACS-10449] replace MD2 datetimepicker theme

* [ACS-10449] replace MD2 apis, replace @imports, use MD3 theme

* [ACS-10449] visual regression fixes 1

* [ACS-10449] visual regression fixes 2

* [ACS-10449] visual regression fixes 3

* [ACS-10449] visual regression fixes 4

* [ACS-10449] visual regression fixes 5

* [ACS-10449] visual regression fixes 6

* [ACS-10449] Viewer MD3 fixes

* [ACS-10449] Typography MD3 fixes

* [ACS-10449] Select, autocomplete background MD3 fix

* [ACS-10449] Addressed PR comments

* [ACS-10449] Reverted one unwanted change

* [ACS-10449] Addressed PR comments

* [ACS-10449] Addressed PR comments

* [ACS-10449] Removed redundant code

* [ACS-10449] Addressed PR comments

* [ACS-10449] use variables instead of colors, fix permission components, use overrides

* [ACS-10449] revert wrong token usage

* [ACS-10449] Addressed PR comments

* [ACS-10449] Addressed PR comments

* [ACS-10449] Addressed PR comments

* [ACS-10449] Toggle MD3 fixes

* [ACS-10449] Addressed comments

* [ACS-10449] Tabs MD3 fixes

* [ACS-10449] Addressed comments

* [ACS-10449] Addressed comments

* [ACS-10449] MD3 fixes

* [ACS-10449] Addressed comments

* [ACS-10449] Addressed comments

* [ACS-10449] icon, icon button and permission datatable styling refactor

* [ACS-10449] revert changes overwriting previous fix, address comment

* [ACS-10449] About page, notification history fixes

* [ACS-10449] Login page, saved searches fixed

* [ACS-10449] Addressed comments

* [ACS-10449] Fixed incorrect box shadow for permissions users and groups popup

* [ACS-10449] Fixed color for selected selectbox option

* [ACS-10449] ADF style fixes refactoring I

* [ACS-10449] Simplify styles for selected group and user icons in permissions

* [ACS-10449] Create from template dialog title size and buttons layout

* [ACS-10449] Fixed uploading file popup

* [ACS-10449] Incorrect color of sidenav background

* [ACS-10449] ADF style fixes refactoring II

* [ACS-10449] Fixed background color for library metadata viewer and buttons hovering

* [ACS-10449] Breadcrumb, datatable bg, search filter container fixes

* [ACS-10449] User profile button fixes

* [ACS-10449] Create from template, copy/move dialog fixes

* [ACS-10449] Fixed styles for comments tab

* [ACS-10449] Small correction

* [ACS-10449] Fixed button styles for linking rules dialog and global change buttons padding

* [ACS-10449] fix selected node tick icon color in search results

* [ACS-10449] Permission form field fixes

* [ACS-10449] Reverted unwanted change

* [ACS-10449] Button, create folder rules dialog fixes

* [ACS-10449] Fixed styles for version manager dialog

* [ACS-10449] Tag creator fixes

* [ACS-10449] Fixed styles for docs viewer thumbnails

* [ACS-10449] remove redundant metadata styling

* [ACS-10449] fix outlined button hover color

* [ACS-10449] Categories panel fixes

* [ACS-10449] Minor shadow box fix

* [ACS-10449] Expansion panel font size fix

* [ACS-10449] fix datepicker

* [ACS-10449] Fixed icons color after uploding new version of file

* [ACS-10449] Fix descending specificity and mixed decls build warnings, remove duplicated styles

* [ACS-10449] Fixed container color for outlined cards

* [ACS-10449] Badges color fix

* [ACS-10449] Configure notification history badge size

* [ACS-10449] Fixed viewer toolbar background

* [ACS-10449] Use latest ADF version

* fix e2e

---------

Co-authored-by: g-jaskowski <grzegorz.jaskowski@hyland.com>
Co-authored-by: Aleksander Sklorz <Aleksander.Sklorz@hyland.com>
Co-authored-by: akashrathod28 <akash.rathod@hyland.com>

projects/aca-shared/src/lib/components/locked-by/locked-by.component.scss

@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 .aca-locked-by {
   display: flex;
   align-items: center;
@@ -8,6 +10,12 @@
     width: 14px;
     height: 14px;
     min-width: 14px;
+
+    @include mat.icon-overrides(
+      (
+        color: var(--adf-theme-foreground-icon-color)
+      )
+    );
   }
 
   &--label,

projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss

@@ -1,7 +1,8 @@
-@import '../../styles/mixins';
+@use '@angular/material' as mat;
+@use '../../styles/mixins' as mixins;
 
 .aca-page-layout {
-  @include flex-column;
+  @include mixins.flex-column;
 
   .aca-content-header {
     background: var(--theme-page-layout-header-background-color);
@@ -10,6 +11,12 @@
     display: flex;
     align-items: center;
 
+    @include mat.icon-overrides(
+      (
+        color: var(--adf-theme-foreground-icon-color)
+      )
+    );
+
     &-button {
       margin-top: -1px;
     }
@@ -25,6 +32,23 @@
       font-size: 20px;
       font-weight: 400;
       letter-spacing: 0.15px;
+      line-height: 30px;
+
+      @include mat.icon-overrides(
+        (
+          color: var(--adf-theme-foreground-text-color-064)
+        )
+      );
+
+      .adf-breadcrumb-item-anchor {
+        color: var(--adf-theme-foreground-text-color-064);
+      }
+
+      .adf-breadcrumb-item-chevron {
+        font-size: var(--mat-sys-headline-medium-size);
+        font-family: var(--mat-icon-font-family, 'Material Icons Outlined');
+        margin-top: 6px;
+      }
     }
 
     .aca-toolbar-action {
@@ -35,17 +59,17 @@
   }
 
   .aca-page-layout-content {
-    @include flex-row;
+    @include mixins.flex-row;
 
     border-top: 1px solid var(--theme-metadata-property-panel-border-color);
   }
 
   .aca-page-layout-error {
-    @include flex-row;
+    @include mixins.flex-row;
   }
 
   .aca-main-content {
-    @include flex-column;
+    @include mixins.flex-column;
   }
 
   .aca-scrollable {

projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.scss

@@ -1,7 +1,18 @@
 @use '../../../styles/mat-selectors' as ms;
+@use '@angular/material' as mat;
 
 aca-toolbar-action {
+  font-size: 20px;
+  line-height: 32px;
+
   #{ms.$mat-mdc-button}#{ms.$mat-button-base}#{ms.$mat-outlined-button}#{ms.$mat-unthemed} {
     --mdc-outlined-button-label-text-color: var(--theme-secondary-text);
   }
+
+  @include mat.button-overrides(
+    (
+      filled-horizontal-padding: 16px,
+      outlined-horizontal-padding: 16px
+    )
+  );
 }