[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-content/folder-rules/src/manage-rules/manage-rules.smart-component.html

@@ -11,7 +11,7 @@
     <div class="aca-main-content">
 
       <ng-container *ngIf="((ruleSetsLoading$ | async) && (inheritedRuleSets$ | async).length === 0) || (actionsLoading$ | async); else onLoaded">
-        <mat-progress-bar color="primary" mode="indeterminate" />
+        <mat-progress-bar mode="indeterminate" />
       </ng-container>
 
       <ng-template #onLoaded>
@@ -47,7 +47,7 @@
               <button
                 *ngIf="canEditMainRule"
                 data-automation-id="manage-rules-create-button"
-                mat-flat-button color="primary"
+                mat-flat-button
                 (click)="openCreateUpdateRuleDialog()">
                 {{ 'ACA_FOLDER_RULES.MANAGE_RULES.TOOLBAR.ACTIONS.CREATE_RULE' | translate }}
               </button>

projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss

@@ -2,30 +2,33 @@
 @use '@angular/material' as mat;
 
 .aca-manage-rules {
-  @include mat.button-overrides(
+  @include mat.progress-bar-overrides(
     (
-      outlined-outline-color: var(--adf-theme-foreground-text-color-064)
+      active-indicator-color: var(--theme-primary-color)
+    )
+  );
+  @include mat.button-overrides(
+    (
+      outlined-outline-color: var(--adf-theme-foreground-text-color-064),
+      filled-container-color: var(--theme-primary-color),
+      filled-label-text-color: var(--theme-primary-color-default-contrast)
     )
   );
-
-  #{ms.$mat-slide-toggle}:is(mat-slide-toggle) #{ms.$mat-switch}:enabled #{ms.$mat-switch-track}::after {
-    background: var(--mdc-switch-selected-track-color);
-  }
-
-  #{ms.$mat-slide-toggle} #{ms.$mat-switch} #{ms.$mat-switch-handle}::before {
-    background: var(--mdc-switch-selected-pressed-handle-color);
-  }
 
   &__toolbar {
     color: var(--adf-theme-foreground-text-color-064);
     height: 64px;
     font-size: var(--theme-body-1-font-size);
     white-space: normal;
-    background-color: inherit;
+    background-color: var(--theme-background-color);
     border: none;
     padding: 0;
   }
 
+  adf-empty-content {
+    background-color: var(--theme-background-color);
+  }
+
   &__actions-bar {
     padding: 0 30px;
     display: flex;
@@ -40,17 +43,53 @@
       align-items: center;
       flex: 1;
       font-size: var(--theme-body-1-font-size);
+
+      mat-icon {
+        color: var(--adf-theme-foreground-text-color-054);
+      }
     }
 
     &__buttons {
       display: flex;
       align-items: stretch;
       gap: 12px;
+
+      @include mat.button-overrides(
+        (
+          filled-horizontal-padding: 16px,
+          outlined-horizontal-padding: 16px
+        )
+      );
     }
 
     &__toggle {
       font-weight: 600;
       font-size: 14px;
+
+      @include mat.slide-toggle-overrides(
+        (
+          track-width: 36px,
+          track-height: 20px,
+          track-shape: 10px,
+          label-text-tracking: normal,
+          selected-handle-size: 14px,
+          unselected-handle-size: 14px,
+          pressed-handle-size: 14px,
+          with-icon-handle-size: 14px,
+          unselected-with-icon-handle-horizontal-margin: 0 3px 0 0,
+          selected-with-icon-handle-horizontal-margin: 0 0 0 16px,
+          selected-handle-color: var(--adf-theme-background-card-color),
+          selected-focus-handle-color: var(--adf-theme-background-card-color),
+          selected-hover-handle-color: var(--adf-theme-background-card-color),
+          selected-pressed-handle-color: var(--adf-theme-background-card-color),
+          selected-icon-color: var(--adf-theme-background-card-color),
+          handle-surface-color: var(--adf-theme-background-card-color),
+          unselected-handle-color: var(--adf-theme-foreground-text-color-075),
+          unselected-focus-handle-color: var(--adf-theme-foreground-text-color-087),
+          unselected-hover-handle-color: var(--adf-theme-foreground-text-color-087),
+          unselected-pressed-handle-color: var(--adf-theme-foreground-text-color-087)
+        )
+      );
     }
 
     &__vertical-divider {
@@ -59,6 +98,14 @@
     }
   }
 
+  .aca-page-layout-header {
+    padding: 12px;
+
+    mat-icon {
+      color: var(--adf-theme-foreground-text-color-087);
+    }
+  }
+
   &__container {
     display: grid;
     grid-template-columns: minmax(250px, 1fr) 3fr;

projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.scss

@@ -1,4 +1,5 @@
 @use '../../styles/mat-selectors' as ms;
+@use '@angular/material' as mat;
 
 /* stylelint-disable selector-class-pattern */
 .aca-rule-action-list {
@@ -7,6 +8,14 @@
   .aca-rule-action-list-add-action-button {
     margin: 4px 0 20px;
 
+    @include mat.button-overrides(
+      (
+        filled-label-text-color: var(--adf-theme-foreground-base-color),
+        filled-container-color: transparent,
+        filled-horizontal-padding: 16px
+      )
+    );
+
     .aca-rule-action-list-add-action-button-icon {
       width: 24px;
       height: 24px;

projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.scss

@@ -9,10 +9,16 @@
     gap: 20px;
 
     adf-card-view {
+      margin-top: 0;
+
       .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
         display: inline-block;
         width: 100%;
 
+        .adf-card-textitem-field-container {
+          padding-top: 0;
+        }
+
         .adf-textitem-clickable {
           padding-top: 0;
         }

projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss

@@ -1,4 +1,5 @@
 @use '../../styles/mat-selectors' as ms;
+@use '@angular/material' as mat;
 
 .aca-rule-composite-condition {
   display: block;
@@ -55,6 +56,13 @@
     &__actions {
       padding-left: 8px;
 
+      @include mat.button-overrides(
+        (
+          filled-label-text-color: var(--adf-theme-foreground-base-color),
+          filled-horizontal-padding: 16px
+        )
+      );
+
       button:not(:disabled) {
         background-color: unset;
       }

projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html

@@ -50,7 +50,6 @@
             <mat-option disabled *ngIf="showLoadingSpinner; else optionList">
               <span class="aca-rule-simple-condition__auto-complete-loading-spinner">
                 <mat-progress-spinner
-                  color="primary"
                   mode="indeterminate"
                   data-automation-id="auto-complete-loading-spinner"
                   [diameter]="25" />

projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.scss

@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 .aca-rule-simple-condition {
   &__form {
     display: flex;
@@ -21,5 +23,11 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
+
+    @include mat.progress-spinner-overrides(
+      (
+        active-indicator-color: var(--theme-primary-color)
+      )
+    );
   }
 }

projects/aca-content/folder-rules/src/rule-details/edit-rule-dialog.ui-component.html

@@ -20,5 +20,5 @@
 
 <mat-dialog-actions align="end" class="aca-edit-rule-dialog__footer">
   <button mat-flat-button mat-dialog-close>{{ 'ACA_FOLDER_RULES.EDIT_RULE_DIALOG.CANCEL' | translate }}</button>
-  <button mat-flat-button color="primary" [disabled]="!formValid" data-automation-id="edit-rule-dialog-submit" (click)="onSubmit()">{{ submitLabel | translate }}</button>
+  <button mat-flat-button class="aca-edit-rule-dialog__submit-button" [disabled]="!formValid" data-automation-id="edit-rule-dialog-submit" (click)="onSubmit()">{{ submitLabel | translate }}</button>
 </mat-dialog-actions>

projects/aca-content/folder-rules/src/rule-details/edit-rule-dialog.ui-component.scss

@@ -1,4 +1,5 @@
 @use '../styles/mat-selectors' as ms;
+@use '@angular/material' as mat;
 
 .aca-edit-rule-dialog-container {
   --edit-rule-dialog-padding: 8px 20px;
@@ -53,5 +54,22 @@
     padding: var(--edit-rule-dialog-padding);
     box-sizing: border-box;
     border-top: 1px solid var(--theme-border-color);
+
+    @include mat.button-overrides(
+      (
+        filled-container-color: transparent,
+        filled-label-text-color: var(--adf-theme-foreground-base-color),
+        filled-horizontal-padding: 16px
+      )
+    );
+
+    .aca-edit-rule-dialog__submit-button {
+      @include mat.button-overrides(
+        (
+          filled-container-color: var(--theme-primary-color),
+          filled-label-text-color: var(--theme-primary-color-default-contrast)
+        )
+      );
+    }
   }
 }

projects/aca-content/folder-rules/src/rule-list/rule-list-item/rule-list-item.ui-component.scss

@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 .aca-rule-list-item {
   display: flex;
   flex-direction: column;
@@ -5,9 +7,34 @@
   padding: 12px 20px;
   cursor: pointer;
 
+  @include mat.slide-toggle-overrides(
+    (
+      track-width: 36px,
+      track-height: 20px,
+      track-shape: 10px,
+      label-text-tracking: normal,
+      selected-handle-size: 14px,
+      unselected-handle-size: 14px,
+      pressed-handle-size: 14px,
+      with-icon-handle-size: 14px,
+      unselected-with-icon-handle-horizontal-margin: 0 3px 0 0,
+      selected-with-icon-handle-horizontal-margin: 0 0 0 16px,
+      selected-handle-color: var(--adf-theme-background-card-color),
+      selected-focus-handle-color: var(--adf-theme-background-card-color),
+      selected-hover-handle-color: var(--adf-theme-background-card-color),
+      selected-pressed-handle-color: var(--adf-theme-background-card-color),
+      selected-icon-color: var(--adf-theme-background-card-color),
+      handle-surface-color: var(--adf-theme-background-card-color),
+      unselected-handle-color: var(--adf-theme-foreground-text-color-075),
+      unselected-focus-handle-color: var(--adf-theme-foreground-text-color-087),
+      unselected-hover-handle-color: var(--adf-theme-foreground-text-color-087),
+      unselected-pressed-handle-color: var(--adf-theme-foreground-text-color-087)
+    )
+  );
+
   p {
     margin: 6px 0 0;
-    color: rgba(33, 35, 40, 0.7);
+    color: var(--theme-text-light-color);
     font-style: normal;
     font-weight: 400;
     font-size: 12px;

projects/aca-content/folder-rules/src/rule-set-picker/rule-set-picker.smart-component.html

@@ -18,7 +18,7 @@
 
   <div class="aca-rule-set-picker__content__rule-list" [ngClass]="{ 'aca-justify': rulesLoading$ | async }">
     <ng-container *ngIf="rulesLoading$ | async; else rulesLoaded">
-      <mat-progress-spinner color="primary" mode="indeterminate" />
+      <mat-progress-spinner mode="indeterminate" />
     </ng-container>
 
     <ng-template #rulesLoaded>
@@ -43,12 +43,15 @@
 </mat-dialog-content>
 
 <mat-dialog-actions align="end" class="aca-rule-set-picker__footer">
-  <button mat-flat-button mat-dialog-close>
+  <button
+    mat-button
+    mat-dialog-close>
     {{ 'ACA_FOLDER_RULES.LINK_RULES_DIALOG.CANCEL' | translate }}
   </button>
 
   <button
-    mat-flat-button color="primary"
+    mat-flat-button
+    class="aca-rule-set-picker__submit-button"
     [disabled]="!hasOwnedRules || isBusy"
     (click)="onSubmit()">
     {{ 'ACA_FOLDER_RULES.LINK_RULES_DIALOG.SUBMIT' | translate }}

projects/aca-content/folder-rules/src/rule-set-picker/rule-set-picker.smart-component.scss

@@ -1,4 +1,5 @@
 @use '../styles/mat-selectors' as ms;
+@use '@angular/material' as mat;
 
 .aca-rule-set-picker-container {
   --rule-set-picker-padding: 8px 20px;
@@ -65,6 +66,12 @@
       .aca-rule-list-item {
         cursor: default;
       }
+
+      @include mat.progress-spinner-overrides(
+        (
+          active-indicator-color: var(--theme-primary-color)
+        )
+      );
     }
   }
 
@@ -73,5 +80,14 @@
     padding: var(--rule-set-picker-padding);
     box-sizing: border-box;
     border-top: 1px solid var(--theme-border-color);
+
+    .aca-rule-set-picker__submit-button {
+      @include mat.button-overrides(
+        (
+          filled-container-color: var(--theme-primary-color),
+          filled-label-text-color: var(--theme-primary-color-default-contrast)
+        )
+      );
+    }
   }
 }