AAE-38054 Material Design 3 migration

lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss

@@ -9,8 +9,7 @@ adf-aspect-list-dialog {
 }
 
 .adf-aspect-list-dialog-title {
-    font-size: large;
-    font-weight: 200;
+    font: var(--mat-sys-headline-medium);
     margin-top: 0;
 }
 
@@ -44,11 +43,6 @@ adf-aspect-list-dialog {
     margin-bottom: 8px;
 
     .adf-aspect-property-table {
-        .adf-aspect-property-table-cell {
-            font-size: smaller;
-            color: var(--adf-theme-foreground-text-color-087);
-        }
-
         .adf-aspect-property-table-column {
             &-name {
                 width: 30%;

lib/content-services/src/lib/aspect-list/aspect-list.component.scss

@@ -23,7 +23,7 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
     &-aspect-list-container {
         max-height: $dialog-list-height;
         overflow: auto;
-        border: 1px solid var(--adf-theme-foreground-text-color-007);
+        border: 1px solid var(--mat-sys-outline-variant);
 
         .adf-aspect-list-check-button {
             margin-right: 5px;
@@ -35,34 +35,32 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
         .adf-accordion-aspect-list-item {
             padding-left: 14px;
             display: flex;
-            box-shadow: 0 2px 2px -1px var(--adf-theme-foreground-text-color-007);
+            box-shadow: var(--mat-sys-level-2);
 
             &.adf-hover {
                 &:hover {
-                    background-color: var(--adf-theme-background-hover-color);
+                    background-color: var(--mat-sys-surface-container);
                 }
             }
         }
 
         .adf-accordion-aspect-list-expansion-panel {
             margin: 0;
             width: 100%;
-            box-shadow: none;
-            background: border-box;
 
             #{ms.$mat-checkbox-background} {
                 height: 16px;
                 width: 16px;
             }
 
             &-header {
-                font-size: smaller;
+                font: var(--mat-sys-body-small);
                 padding-left: 0;
                 height: 48px;
             }
 
             &-header-title {
-                color: var(--theme-secondary-text);
+                color: var(--mat-sys-on-secondary-container);
             }
 
             &-header-description {
@@ -82,8 +80,8 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
         .adf-aspect-property-table-column-name,
         .adf-aspect-property-table-column-title,
         .adf-aspect-property-table-column-data-type {
-            font-size: 12px;
-            color: var(--adf-theme-foreground-text-color-054);
+            font: var(--mat-sys-body-small);
+            color: var(--mat-sys-on-secondary-container);
         }
 
         .adf-aspect-property-table-column {

lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss

@@ -1,11 +1,8 @@
 .adf-breadcrumb {
     display: flex;
     flex: 1;
-    line-height: 24px;
-    font-size: var(--theme-body-1-font-size);
-    font-weight: 600;
-    letter-spacing: -0.2px;
-    color: var(--adf-theme-foreground-text-color-054);
+    font: var(--mat-sys-body-medium);
+    color: var(--mat-sys-on-surface);
     overflow: hidden;
 
     &-container {
@@ -35,7 +32,7 @@
             margin-right: 5px;
 
             &:focus {
-                color: var(--theme-primary-color);
+                color: var(--mat-sys-primary);
                 outline: none;
             }
 
@@ -44,11 +41,11 @@
             }
 
             &-arrow {
-                font-size: var(--theme-adf-icon-1-font-size);
+                font: var(--mat-sys-body-small);
                 position: absolute;
                 left: 4px;
                 top: 4px;
-                color: white;
+                color: var(--mat-sys-on-secondary);
                 z-index: 2;
             }
 
@@ -70,30 +67,21 @@
         padding-right: 2px;
         overflow: hidden;
         display: flex;
-        line-height: 33px;
-        font-size: var(--theme-body-1-font-size);
-        font-weight: 600;
-        letter-spacing: -0.2px;
+        font: var(--mat-sys-body-medium);
         text-align: left;
-        color: var(--adf-theme-foreground-text-color-054);
+        color: var(--mat-sys-on-secondary-container);
         flex: 0 1 auto;
         min-width: 35px;
         margin-top: auto;
         text-overflow: ellipsis;
 
-        &:hover,
         &.adf-active {
-            color: var(--adf-theme-foreground-text-color-064);
-        }
-
-        &.adf-active {
-            color: var(--adf-theme-foreground-text-color-087);
+            color: var(--mat-sys-on-surface);
         }
 
         &-chevron {
-            opacity: 1;
             margin-top: 9px;
-            font-size: var(--theme-adf-icon-1-font-size);
+            font: var(--mat-sys-body-small);
         }
 
         &-anchor {
@@ -110,7 +98,7 @@
             text-align: start;
 
             &:focus {
-                outline: 1px solid var(--theme-accent-color-a200);
+                outline: 1px solid var(--mat-sys-outline-variant);
                 outline-offset: -1px;
             }
         }

lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss

@@ -6,11 +6,8 @@ $dropdown-horizontal-offset: 30px;
     &-dropdown-breadcrumb {
         display: flex;
         flex: 1;
-        line-height: 24px;
-        font-size: var(--theme-body-1-font-size);
-        font-weight: 600;
-        letter-spacing: -0.2px;
-        color: var(--adf-theme-foreground-text-color-054);
+        font: var(--mat-sys-body-medium);
+        color: var(--mat-sys-on-secondary-container);
         overflow: hidden;
         margin-top: 10px;
 
@@ -36,7 +33,7 @@ $dropdown-horizontal-offset: 30px;
         width: 25px;
 
         &:focus {
-            color: var(--theme-primary-color);
+            color: var(--mat-sys-primary);
             outline: none;
         }
     }
@@ -61,12 +58,12 @@ $dropdown-horizontal-offset: 30px;
         text-overflow: ellipsis;
         display: inline-block;
         width: 75%;
-        color: var(--adf-theme-foreground-text-color);
+        color: var(--mat-sys-on-surface);
     }
 
     &-dropdown-breadcrumb-path-option.adf-dropdown-breadcrumb-path-option-node {
         padding: 0 12px;
-        font-size: var(--theme-caption-font-size);
+        font-size: var(--mat-sys-body-small-size);
     }
 
     &-dropdown-breadcrumb-path-option.adf-dropdown-breadcrumb-path-option-node:first-child {

lib/content-services/src/lib/category/categories-management/categories-management.component.html

@@ -1,6 +1,6 @@
 <div class="adf-categories-management">
     <div *ngIf="categoryNameControlVisible" class="adf-category-name-field">
-        <input #categoryNameInput
+        <input #categoryNameInput matInput
             [formControl]="categoryNameControl"
             (keyup.enter)="addCategory()"
             placeholder="{{'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}"

lib/content-services/src/lib/category/categories-management/categories-management.component.scss

@@ -1,28 +1,8 @@
-@use '../../mat-selectors.scss' as ms;
-
 .adf-categories-management {
     .adf-category-name-field {
         display: flex;
         flex-direction: column;
         margin-right: 12px;
-
-        input {
-            background: var(--adf-metadata-buttons-background-color);
-            border-radius: 12px;
-            padding: 7px 8px;
-            border: none;
-            outline: none;
-            font: inherit;
-            color: currentcolor;
-            margin: 0;
-            vertical-align: bottom;
-            text-align: inherit;
-            box-sizing: content-box;
-        }
-
-        #{ms.$mat-form-field-error} {
-            padding-top: 5px;
-        }
     }
 
     .adf-assigned-categories {
@@ -52,23 +32,11 @@
         height: 100%;
         overflow-wrap: anywhere;
         padding: 5px 0;
-        font-size: 14px;
-        background-color: inherit;
-        color: inherit;
-
-        &:not(#{ms.$mat-list-item-disabled}):hover {
-            cursor: pointer;
-            background: var(--adf-theme-mat-grey-color-a200);
-        }
-
-        & span {
-            padding: 0;
-        }
     }
 
     .adf-existing-categories-label {
-        font-size: 10px;
-        color: var(--theme-secondary-text-color);
+        font: var(--mat-sys-body-small);
+        color: var(--mat-sys-on-secondary-container);
         margin-bottom: 2px;
     }
 
@@ -81,12 +49,8 @@
     min-height: 22vh;
 
     .adf-create-category-label {
-        color: var(--theme-primary-color);
+        color: var(--mat-sys-primary);
         cursor: pointer;
         overflow-wrap: anywhere;
     }
-
-    #{ms.$mat-list-item-disabled} #{ms.$mat-list-item-primary-text} {
-        opacity: 1;
-    }
 }

lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss

@@ -10,18 +10,9 @@
     &-footer.adf-content-metadata-card-view-footer {
         margin: 0;
         padding: 8px 12px;
-        border-top: 1px solid var(--adf-theme-foreground-text-color-007);
         display: flex;
         place-content: stretch space-between;
         align-items: stretch;
         max-height: 100%;
-
-        button {
-            color: var(--adf-theme-foreground-text-color-054);
-
-            &:hover {
-                color: var(--adf-theme-foreground-text-color-087);
-            }
-        }
     }
 }

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html

@@ -37,7 +37,6 @@
                         mat-icon-button
                         [attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate"
                         (click)="saveChanges($event)"
-                        color="primary"
                         data-automation-id="save-general-info-metadata"
                         [disabled]="!hasMetadataChanged || invalidProperties.size > 0">
                         <mat-icon>check</mat-icon>
@@ -92,8 +91,7 @@
                             mat-icon-button
                             [attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate"
                             (click)="saveChanges($event)"
-                            color="primary"
-                            data-automation-id="save-tags-metadata"
+                                data-automation-id="save-tags-metadata"
                             [disabled]="!hasMetadataChanged">
                             <mat-icon>check</mat-icon>
                         </button>
@@ -156,8 +154,7 @@
                             mat-icon-button
                             [attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate"
                             (click)="saveChanges($event)"
-                            color="primary"
-                            data-automation-id="save-categories-metadata"
+                                data-automation-id="save-categories-metadata"
                             [disabled]="!hasMetadataChanged">
                             <mat-icon>check</mat-icon>
                         </button>
@@ -238,8 +235,7 @@
                                 mat-icon-button
                                 [attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate"
                                 (click)="saveChanges($event)"
-                                color="primary"
-                                data-automation-id="save-metadata"
+                                        data-automation-id="save-metadata"
                                 [disabled]="!hasMetadataChanged || invalidProperties.size > 0">
                                 <mat-icon>check</mat-icon>
                             </button>