Improvement/AAE-19176-reapply-selector-changes (#9424)

* AAE-19510 remove selector variable

* AAE-19510 poc for card view using variable selectors

* AAE-19176 rename mat selectors file

* AAE-19176 add missing style imports

* AAE-19176 remove remaining mat selectors

* AAE-19176 replaced todo material selectors with variables

* AAE-19176 changes made in meantime

* AAE-19176 conflict fixes

demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .app-form-container {
     padding: 10px;
 }
@@ -31,7 +33,7 @@
 }
 
 .app-form-editor-buttons {
-    & > .mat-mdc-raised-button {
+    & > #{$mat-raised-button} {
         margin-right: 5px;
     }
 }

demo-shell/src/app/components/cloud/cloud-layout.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .app-cloud-layout-overflow {
     overflow: auto;
 }

lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss

@@ -1,10 +1,12 @@
 /* stylelint-disable selector-class-pattern */
+@import 'styles/mat-selectors';
+
 adf-search-chip-autocomplete-input {
     .adf-chip-list {
         width: 100%;
     }
 
-    .mat-mdc-form-field-infix {
+    #{$mat-form-field-infix} {
         border: none;
     }
 

lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss

@@ -1,4 +1,6 @@
 /* stylelint-disable selector-class-pattern */
+@import 'styles/mat-selectors';
+
 adf-search-properties {
     .adf-search-properties-file-size-label {
         display: block;
@@ -19,14 +21,14 @@ adf-search-properties {
 
     .adf-search-properties-file-size-operator,
     .adf-search-properties-file-size-unit {
-        .mat-mdc-form-field-infix {
+        #{$mat-form-field-infix} {
             border: 1px solid var(--adf-theme-mat-grey-color-a400);
             border-radius: 5px;
             padding: 9px;
         }
 
-        &.mat-focused {
+        &#{$mat-focused} {
-            .mat-mdc-form-field-infix {
+            #{$mat-form-field-infix} {
                 outline: 2px auto -webkit-focus-ring-color;
             }
         }
@@ -39,8 +41,7 @@ adf-search-properties {
     adf-search-chip-autocomplete-input {
         display: block;
 
-        .mdc-text-field--outlined {
+        #{$mat-text-field-outlined} {
-            .mdc-text-field--outlined {
             &-start,
             &-end {
                 border-top: 1px solid var(--adf-theme-mat-grey-color-a400);
@@ -55,17 +56,16 @@ adf-search-properties {
                 border-right: 1px solid var(--adf-theme-mat-grey-color-a400);
             }
         }
-        }
 
-        .mat-focused {
+        #{$mat-focused} {
-            .mdc-text-field--outlined {
+            #{$mat-text-field-outlined} {
                 outline: 2px auto -webkit-focus-ring-color;
             }
         }
 
-        .mat-form-field-appearance-outline {
+        #{$mat-form-field-appearance-outline} {
-            .mdc-text-field--outlined-thick {
+            #{$mat-text-field-outlined-thick} {
-                .mdc-text-field--outlined {
+                #{$mat-text-field-outlined} {
                     &-start,
                     &-end {
                         border-width: 1px;

lib/content-services/src/lib/version-manager/version-list.component.scss

@@ -1,4 +1,6 @@
 /* stylelint-disable selector-class-pattern */
+@import 'styles/mat-selectors';
+
 .adf-version-list {
     &-viewport {
         height: 100%;

lib/core/src/lib/buttons-menu/buttons-menu.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-buttons-menu {
     margin-right: 10px;
 
@@ -21,7 +23,7 @@
             display: none;
         }
 
-        button > mat-icon.mat-icon.material-icons {
+        button > #{$material-icons} {
             color: black;
             margin: 0 10px;
         }

lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf {
     &-array-item-icon {
         font-size: var(--theme-subheading-2-font-size);
@@ -21,7 +23,7 @@
     }
 
     &-array-item-more-chip-container {
-        &.mat-mdc-card {
+        &#{$mat-card} {
             box-shadow: none;
             max-height: 300px;
             overflow-y: auto;
@@ -29,8 +31,7 @@
     }
 
     &-property-value {
-        /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
+        #{$mat-chip-list} {
-        .mat-chip-list {
             padding-top: 6px;
         }
     }
@@ -46,7 +47,7 @@
         border-color: var(--adf-card-view-array-item-border-color);
         border-radius: var(--adf-card-view-array-item-border-radius);
 
-        .mat-mdc-chip:hover {
+        #{$mat-chip}:hover {
             cursor: pointer;
         }
     }

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-card-view-dateitem {
     .adf-property-value {
         padding: 6px 0;
@@ -43,13 +45,13 @@
             justify-content: space-between;
             padding-bottom: 6px;
 
-            button.mat-mdc-icon-button {
+            button#{$mat-icon-button} {
                 line-height: 20px;
                 height: 20px;
                 width: 20px;
             }
 
-            mat-icon {
+            #{$mat-icon} {
                 width: 16px;
                 height: 16px;
                 opacity: 0.5;

lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-card-view-key-value-pairs-item {
     .adf-property-col-key {
         width: 50%;
@@ -26,19 +28,19 @@
                 justify-content: center;
             }
 
-            &__add-btn.mat-mdc-button {
+            &__add-btn#{$mat-button} {
                 margin-bottom: 20px;
             }
 
             &__read-only {
                 padding-bottom: 20px;
 
-                .mat-mdc-table {
+                #{$mat-table} {
                     box-shadow: none;
                 }
 
-                .mat-mdc-header-row,
+                #{$mat-header-row},
-                .mat-mdc-row {
+                #{$mat-row} {
                     padding: 0;
                 }
             }

lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-card-view-selectitem {
     .adf-property-value {
         width: 100%;
@@ -19,8 +21,7 @@
             margin-top: 0;
             border-radius: 6px;
 
-            /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
+            #{$mat-select-value} {
-            .mat-mdc-select-value {
                 color: var(--adf-metadata-action-button-clear-color);
             }
         }

lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 $select-filter-height: 4em !default;
 
 .adf-select-filter-input {
@@ -16,12 +18,12 @@ $select-filter-height: 4em !default;
         background: var(--adf-theme-background-card-color);
     }
 
-    .mat-mdc-form-field {
+    #{$mat-form-field} {
         width: 100%;
     }
 }
 
-.mat-mdc-select-panel.adf-select-filter {
+#{$mat-select-panel}.adf-select-filter {
     transform: none !important;
     overflow-x: hidden !important;
     max-height: calc(256px + #{$select-filter-height});

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-card-view-textitem {
     .adf-property-field {
         padding-top: 15px;
@@ -32,8 +34,7 @@
     }
 
     .adf-textitem-chip-list-container {
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+        #{$mat-form-field-label} {
-        .mat-form-field-label {
             margin-top: 6px;
         }
     }
@@ -47,7 +48,7 @@
         }
 
         .adf-property-field {
-            .mat-mdc-input-element {
+            #{$mat-input-element} {
                 color: var(--theme-primary-color);
                 cursor: pointer;
             }

lib/core/src/lib/card-view/components/card-view/card-view.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-property-list {
     background: var(--adf-card-view-background);
     border: var(--adf-card-view-border);
@@ -27,13 +29,11 @@
         .adf-property-field {
             width: 100%;
 
-            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+            #{mat-form-field-underline} {
-            .mat-form-field-underline {
                 display: none;
             }
 
-            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+            #{mat-input-element} {
-            .mat-mdc-input-element {
                 text-overflow: ellipsis;
                 color: var(--adf-metadata-property-panel-title-color);
                 padding: 6px 0;
@@ -41,37 +41,33 @@
             }
 
             .adf-card-view__key-value-pairs__row {
-                .mat-mdc-input-element {
+                #{$mat-input-element} {
                     margin-top: 0;
                     padding-left: 12px;
                 }
             }
-            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+
-            .mat-mdc-form-field-infix {
+            #{$mat-form-field-infix} {
                 border-top-width: 0;
                 padding: 0;
             }
 
-            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+            #{$mat-form-field-flex} {
-            .mat-form-field-flex {
                 padding-top: 0;
             }
 
-            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+            #{$mat-form-field-wrapper} {
-            .mat-form-field-wrapper {
                 padding-bottom: 0;
             }
 
-            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+            #{$mat-form-field-label} {
-            .mat-form-field-label {
                 padding: 0;
                 justify-content: center;
                 display: flex;
                 flex-direction: column;
                 height: 20px;
 
-                /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+                &.adf-property-field-label--empty {
-                &.mat-form-field-empty {
                     transform: translateY(-1.3437em) scale(1);
              }
             }
@@ -86,7 +82,7 @@
             background-color: var(--adf-metadata-buttons-background-color);
             border-radius: 6px;
 
-            &.mat-mdc-input-element {
+            #{$mat-input-element} {
                 color: var(--adf-metadata-action-button-clear-color);
                 padding: 6px 0 6px 12px;
                 margin: 5px 0 0;
@@ -96,7 +92,7 @@
         &.adf-property-readonly-value {
             color: var(--adf-metadata-property-panel-label-color);
 
-            &.mat-mdc-input-element {
+            #{$mat-input-element} {
                 color: var(--adf-metadata-property-panel-label-color);
             }
         }

lib/core/src/lib/comments/comments.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 adf-comments {
     .adf-comments-container {
         height: 100%;
@@ -24,7 +26,7 @@ adf-comments {
             resize: vertical;
         }
 
-        .mat-mdc-form-field {
+        #{$mat-form-field} {
             width: 100%;
         }
     }

lib/core/src/lib/datatable/components/datatable/datatable.component.scss

@@ -1,6 +1,7 @@
 /* stylelint-disable no-descending-specificity */
 @use '@angular/material' as mat;
 @import '../../../styles/mixins';
+@import 'styles/mat-selectors';
 
 $data-table-header-font-size: var(--theme-caption-font-size) !default;
 $data-table-header-sort-icon-size: var(--theme-subheading-2-font-size) !default;

lib/core/src/lib/dialogs/edit-json/edit-json.dialog.scss

@@ -1,5 +1,7 @@
+@import 'styles/mat-selectors';
+
 .adf-edit-json-dialog {
-    .mat-mdc-dialog-content {
+    #{$mat-dialog-content} {
         height: 300px;
         overflow: hidden;
     }

lib/core/src/lib/form/components/form-renderer.component.scss

@@ -1,5 +1,6 @@
 /* stylelint-disable selector-class-pattern */
 @import 'styles/flex';
+@import 'styles/mat-selectors';
 
 .adf-hidden {
     display: none;
@@ -83,7 +84,7 @@
         }
     }
 
-    .mat-mdc-form-field {
+    #{$mat-form-field} {
         width: 100%;
     }
 
@@ -91,12 +92,11 @@
         width: 100%;
     }
 
-    /* TODO(mdc-migration): The following rule targets internal classes of input that may no longer apply for the MDC version. */
+    #{mat-input-placeholder} {
-    .mat-input-placeholder {
+        top: 1.8em !important;
-        top: 1.8em;
     }
 
-    .mat-focused {
+    #{$mat-form-field} {
         label {
             transform: scaleX(1);
             transition: transform 150ms linear;
@@ -104,13 +104,12 @@
             color: var(--theme-primary-color);
         }
 
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+        #{$mat-form-field-prefix} {
-        .mat-form-field-prefix {
             color: var(--theme-primary-color);
         }
     }
 
-    .mat-grid-tile {
+    #{$mat-grid-tile} {
         overflow: visible;
         width: 80%;
     }
@@ -125,25 +124,20 @@
         max-width: 100%;
         max-height: 100%;
 
-        & .mat-mdc-card {
+        & #{$mat-card} {
             padding: 16px 24px;
             overflow: hidden;
         }
 
-        /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
+        & #{$mat-card-header-text} {
-        & .mat-mdc-card-header-text {
             margin: 0 !important;
         }
 
-        
+        & #{$mat-tab-body-content} {
-        /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
-        & .mat-tab-body-content {
             overflow: hidden;
         }
 
-        
+        & #{mat-tab-label-text} {
-        /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
-        & .mdc-tab__text-label {
             font-size: var(--theme-subheading-2-font-size);
             line-height: var(--theme-headline-line-height);
             letter-spacing: -0.4px;
@@ -152,13 +146,11 @@
             text-transform: uppercase;
         }
 
-        & .mat-ink-bar {
+        & #{$mat-tab-ink-bar} {
             height: 4px;
         }
 
-        
+        & #{$mat-form-field-wrapper} {
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
-        & .mat-mdc-text-field-wrapper {
             margin: 0 12px 0 0;
         }
     }
@@ -223,13 +215,12 @@
         padding-bottom: 25px !important;
         padding-right: 25px !important;
 
-        & .mat-mdc-button {
+        & #{$mat-button} {
             height: 36px;
             border-radius: 5px;
         }
 
-        /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+        & #{$mat-button-label} {
-        & .mdc-button__label {
             width: 58px;
             height: 20px;
             opacity: 0.54;
@@ -246,8 +237,7 @@
         }
     }
 
-    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+    &-left-label-input-container #{$mat-form-field-label} {
-    &-left-label-input-container .mat-form-field-label-wrapper {
         top: auto;
         bottom: 0;
     }
@@ -261,7 +251,7 @@
 form-field {
     width: 100%;
 
-    .mat-mdc-input-element {
+    #{$mat-input-element} {
         font-size: var(--theme-body-2-font-size);
         padding-top: 8px;
         line-height: normal;

lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss

@@ -1,20 +1,19 @@
 /* stylelint-disable selector-class-pattern */
+@import 'styles/mat-selectors';
+
 $adf-inplace-input-padding: 7px;
 
 .adf-inplace-input-container {
-    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+    #{$mat-form-field-underline} {
-    .mat-form-field-underline {
         display: none;
     }
 
-    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+    #{$mat-form-field-infix} {
-    .mat-mdc-form-field-infix {
         display: flex;
         border-top: 0;
     }
 
-    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+    #{$mat-form-field-label} {
-    .mat-form-field-label {
         padding: $adf-inplace-input-padding;
     }
 

lib/core/src/lib/form/components/widgets/amount/amount.widget.scss

@@ -1,4 +1,7 @@
 /* stylelint-disable selector-class-pattern */
+@import 'styles/mat-selectors';
+
+
 .adf {
     &-amount-widget {
         width: 100%;
@@ -12,11 +15,11 @@
     &-amount-widget__input {
         margin-top: -15px;
 
-        .mat-focused {
+        #{$mat-focused} {
             transition: none;
         }
 
-        &:not(.mat-focused):not(.mat-form-field-invalid) {
+        &:not(#{$mat-focused}):not(#{$mat-form-field-invalid}) {
             .adf-amount-widget__prefix-spacing {
                 color: var(--adf-theme-foreground-secondary-text-color);
             }

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss

@@ -1,25 +1,23 @@
 /* stylelint-disable selector-class-pattern */
+@import 'styles/mat-selectors';
+
 .adf {
     &-date-time-widget {
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+        #{$mat-form-field-suffix} {
-        .mat-mdc-form-field-text-suffix {
             top: 26px;
         }
 
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+        #{$mat-form-field-label} {
-        .mat-form-field-label-wrapper {
             top: 20px;
         }
     }
 
     &-left-label-input-datepicker {
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+        #{$mat-form-field-suffix} {
-        .mat-mdc-form-field-text-suffix {
             top: 0;
-        }
 
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+        }
-        .mat-mdc-form-field-infix {
+        #{$mat-form-field-infix} {
             width: 100%;
         }
     }

lib/core/src/lib/form/components/widgets/form.theme.scss

@@ -1,4 +1,6 @@
 /* stylelint-disable no-descending-specificity */
+@import 'styles/mat-selectors';
+
 ul > li > form-field > .adf-focus {
     .adf-label {
         color: var(--theme-primary-color);
@@ -34,17 +36,15 @@ ul > li > form-field > .adf-focus {
     }
 
     &-invalid {
-        /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
+        #{$mat-checkbox} {
-        .mat-mdc-checkbox {
             padding-bottom: 12px;
         }
 
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+        #{$mat-form-field-underline} {
-        .mat-form-field-underline {
+            background-color: var(--theme-warn-color) !important;
-            background-color: var(--theme-warn-color);
         }
 
-        .mat-mdc-select {
+        #{$mat-select} {
             &-arrow {
                 color: var(--adf-theme-foreground-secondary-text-color) !important;
             }
@@ -54,8 +54,7 @@ ul > li > form-field > .adf-focus {
             border-color: var(--theme-warn-color);
         }
 
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+        #{$mat-form-field-prefix} {
-        .mat-form-field-prefix {
             color: var(--adf-theme-foreground-secondary-text-color);
         }
 
@@ -72,9 +71,9 @@ ul > li > form-field > .adf-focus {
 /* query for Microsoft IE 11 */
 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
     adf-form-field {
-        .mat-mdc-input-element,
+        #{$mat-input-element},
-        .mat-mdc-select,
+        #{$mat-select},
-        .mat-mdc-form-field {
+        #{$mat-form-field} {
             display: block !important;
         }
     }

lib/core/src/lib/form/components/widgets/text/text.widget.scss

@@ -1,10 +1,11 @@
 /* stylelint-disable selector-class-pattern */
+@import 'styles/mat-selectors';
+
 .adf {
     &-text-widget {
         width: 100%;
 
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+        #{$mat-form-field-label} {
-        .mat-form-field-label-wrapper {
             top: 20px;
         }
     }

lib/core/src/lib/info-drawer/info-drawer-layout.component.scss

@@ -1,4 +1,5 @@
 @import '../styles/mixins';
+@import 'styles/mat-selectors';
 
 $adf-info-drawer-layout-title-font-size: var(--theme-title-font-size) !default;
 $adf-info-drawer-icon-size: 48px !default;
@@ -68,8 +69,7 @@ $adf-info-drawer-icon-size-half: 24px !default;
                 margin-bottom: 0;
             }
 
-            /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+            .adf-info-drawer-tabs #{$mat-tab-body-content} {
-            .adf-info-drawer-tabs .mat-tab-body-content {
                 .adf-manage-versions-empty,
                 .adf-manage-versions-no-permission {
                     margin: 0;

lib/core/src/lib/info-drawer/info-drawer.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf {
     &-info-drawer {
         .adf-metadata-properties-panel {
@@ -5,8 +7,7 @@
             margin: 0;
         }
 
-        /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+        #{$mat-tab-label-text} {
-        .mdc-tab__text-label {
             min-width: 0;
         }
 
@@ -30,36 +31,33 @@
                 }
 
                 .adf-info-drawer-tabs {
-                    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+                    & #{$mat-tab-body-content} > * {
-                    & .mat-tab-body-content > * {
                         margin-bottom: 20px;
                         display: block;
                     }
 
-                    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+                    & #{$mat-tab-body-content} > *:last-child {
-                    & .mat-tab-body-content > *:last-child {
                         margin-bottom: 0;
                     }
 
                     .mdc-tab__text-label {
                         flex-grow: 1;
 
-                        .mat-icon + span {
+                        #{$mat-icon} + span {
                             padding-left: 5px;
                         }
                     }
 
-                    .mat-ink-bar {
+                    #{$mat-tab-ink-bar} {
                         height: 2px;
                     }
 
-                    .mat-mdc-tab-body {
+                    #{$mat-tab-body} {
                         padding: 10px;
                         overflow-y: hidden;
                     }
 
-                    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+                    #{$mat-tab-body-content} {
-                    .mat-tab-body-content {
                         /* stylelint-disable */
                         overflow: auto;
                         /* stylelint-enable */

lib/core/src/lib/layout/components/layout-container/layout-container.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 adf-layout-container {
     display: block;
     width: 100%;
@@ -29,9 +31,9 @@ adf-layout-container {
     background-color: var(--theme-background-color);
 }
 
-/* stylelint-disable selector-class-pattern declaration-no-important */
+/* stylelint-disable selector-class-pattern */
-mat-sidenav-content.mat-sidenav-content,
+#{$mat-sidenav-content},
-.mat-drawer-transition .mat-drawer-content {
+#{$mat-drawer-transition} #{$mat-drawer-content} {
     margin-left: 0 !important;
     transform: unset !important;
     transition-property: unset !important;

lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss

@@ -1,5 +1,6 @@
 @use '../../../styles/flex' as flex;
 @import '../../../styles/mixins';
+@import 'styles/mat-selectors';
 
 .adf-sidenav-layout {
     &-full-space {
@@ -25,7 +26,7 @@
     }
 
     /* stylelint-disable-next-line selector-class-pattern */
-    .mat-drawer-content {
+    #{$mat-drawer-content} {
         @include flex-column;
 
         position: unset;

lib/core/src/lib/notifications/components/notification-history.component.scss

@@ -1,5 +1,7 @@
+@import 'styles/mat-selectors';
+
 .adf {
-    &-notification-history-menu_button.mat-mdc-button {
+    &-notification-history-menu_button#{$mat-button} {
         margin-right: 0;
         border-radius: 90%;
         padding: 0;
@@ -7,7 +9,7 @@
         height: 40px;
     }
 
-    &-notification-history-list .mat-mdc-subheader {
+    &-notification-history-list #{$mat-subheader} {
         justify-content: space-between;
     }
 
@@ -61,11 +63,11 @@
     }
 }
 
-.mat-mdc-menu-panel.adf-notification-history-menu {
+#{$mat-menu-panel}.adf-notification-history-menu {
     min-width: 320px;
     max-height: 500px;
 
-    .mat-mdc-menu-content {
+    #{$mat-menu-content} {
         padding: 0;
     }
 }

lib/core/src/lib/search-text/search-text-input.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-search-container:has(.adf-input-form-field-divider) {
     overflow: hidden;
 }
@@ -20,14 +22,8 @@
     }
 
     &-input-form-field-divider {
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+        #{$mat-form-field-underline} {
-        .mat-form-field-underline {
             background-color: var(--adf-theme-primary-50);
-
-            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
-            .mdc-line-ripple {
-                background-color: var(--adf-theme-primary-50);
-            }
         }
 
         font-size: var(--theme-subheading-2-font-size);

lib/core/src/lib/snackbar-content/snackbar-content.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 :host {
     display: flex;
     align-items: center;
@@ -16,7 +18,7 @@
     .adf-snackbar-message-content-action {
         margin-left: 24px;
 
-        .mat-mdc-button {
+        #{$mat-button} {
             min-width: 0;
             margin: -8px;
 

lib/core/src/lib/styles/_mat-selectors.scss

@@ -0,0 +1,91 @@
+$material-icons: ".material-icons";
+$mat-icon: ".mat-icon";
+$mat-icon-button: ".mat-mdc-icon-button";
+$mat-accent: ".mat-accent";
+$mat-focused: ".mat-focused";
+$mat-line: ".mat-line";
+$mat-tab-label: ".mat-mdc-tab";
+$mat-tab-label-active: ".mdc-tab--active";
+$mat-tab-label-content: ".mdc-tab__content";
+$mat-tab-label-container: ".mat-mdc-tab-label-container";
+$mat-tab-label-text: ".mdc-tab__text-label";
+$mat-tab-list: ".mat-mdc-tab-list";
+$mat-tab-body: ".mat-mdc-tab-body";
+$mat-tab-body-wrapper: ".mat-mdc-tab-body-wrapper";
+$mat-tab-body-content: ".mat-mdc-tab-body-content";
+$mat-tab-header: ".mat-mdc-tab-header";
+$mat-tab-header-pagination: ".mat-mdc-tab-header-pagination";
+$mat-tab-header-pagination-controls-enabled: ".mat-mdc-tab-header-pagination-controls-enabled";
+$mat-tab-labels: ".mat-mdc-tab-labels";
+$mat-tab-ink-bar: ".mdc-tab-indicator";
+$mat-chip: ".mat-mdc-chip";
+$mat-chip-list: ".mat-mdc-chip-list";
+$mat-chip-list-wrapper: ".mat-chip-list-wrapper";
+$mat-checkbox: ".mat-mdc-checkbox";
+$mat-checkbox-frame: ".mdc-checkbox__checkmark";
+$mat-checkbox-label: ".mdc-label";
+$mat-checkbox-checked: ".mat-mdc-checkbox-checked";
+$mat-button: ".mat-mdc-button";
+$mat-button-label: ".mdc-button__label";
+$mat-button-label-text: ".mdc-button__label";
+$mat-button-focus-overlay: ".mat-mdc-focus-indicator";
+$mat-raised-button: ".mat-mdc-raised-button";
+$mat-radio-outer-circle: ".mdc-radio__outer-circle";
+$mat-radio-inner-circle: ".mdc-radio__inner-circle";
+$mat-radio-checked: ".mat-mdc-radio-checked";
+$mat-radio-label-content: ".mdc-label";
+$mat-radio-label: ".mdc -label";
+$mat-progress-bar: ".mat-mdc-progress-bar";
+$mat-progress-bar-buffer: ".mdc-linear-progress__buffer";
+$mat-progress-spinner: ".mat-mdc-progress-spinner";
+$mat-form-field: ".mat-mdc-form-field";
+$mat-form-field-flex: ".mat-mdc-form-field-flex";
+$mat-form-field-wrapper: ".mat-mdc-text-field-wrapper";
+$mat-form-field-underline: ".mdc-line-ripple";
+$mat-form-field-subscript-wrapper: ".mat-mdc-form-field-subscript-wrapper";
+$mat-form-field-prefix: ".mat-mdc-form-field-text-prefix";
+$mat-form-field-suffix: ".mat-mdc-form-field-text-suffix";
+$mat-form-field-infix: ".mat-mdc-form-text-infix";
+$mat-form-field-label: ".mat-mdc-floating-label";
+$mat-form-field-invalid: ".mat-form-field-invalid";
+$mat-form-field-appearance-outline: ".mat-form-field-appearance-outline";
+$mat-text-field-outlined: ".mdc-text-field--outlined";
+$mat-text-field-outlined-thick: ".mdc-text-field--outlined-thick";
+$mat-dialog-actions: ".mat-mdc-dialog-actions";
+$mat-dialog-container: ".mdc-dialog__container";
+$mat-dialog-content: ".mat-mdc-dialog-content";
+$mat-button-toggle: ".mat-button-toggle";
+$mat-button-toggle-checked: ".mat-button-toggle-checked";
+$mat-button-toggle-disabled: ".mat-button-toggle-disabled";
+$mat-button-toggle-focus-overlay: ".mat-button-toggle-focus-overlay";
+$mat-input-element: ".mat-mdc-input-element";
+$mat-card: ".mat-mdc-card";
+$mat-card-actions: ".mat-mdc-card-actions";
+$mat-card-header-text: ".mat-mdc-card-header-text";
+$mat-card-title: ".mat-mdc-card-title";
+$mat-mini-fab: ".mat-mdc-mini-fab";
+$mat-list-item-primary-text: ".mdc-list-item__primary-text";
+$mat-table: ".mat-mdc-table";
+$mat-header-row: ".mat-mdc-header-row";
+$mat-row: ".mat-mdc-row";
+$mat-select: ".mat-mdc-select";
+$mat-select-value: ".mat-select-value";
+$mat-select-value-text: ".mat-mdc-select-value-text";
+$mat-select-panel: ".mat-mdc-select-panel";
+$mat-grid-tile: ".mat-grid-tile";
+$mat-sidenav-content: ".mat-sidenav-content";
+$mat-drawer-transition: ".mat-drawer-transition";
+$mat-drawer-content: ".mat-drawer-content";
+$mat-subheader: ".mat-mdc-subheader";
+$mat-menu-panel: ".mat-mdc-menu-panel";
+$mat-menu-content: ".mat-mdc-menu-content";
+$mat-expansion-panel: ".mat-expansion-panel";
+$mat-expansion-panel-header: ".mat-expansion-panel-header";
+$mat-expanded: ".mat-expanded";
+$mat-calendar: ".mat-calendar";
+$mat-calendar-header: ".mat-calendar-header";
+$mat-calendar-content: ".mat-calendar-content";
+$mat-calendar-table-header: ".mat-calendar-table-header";
+$mat-calendar-body-disabled: ".mat-calendar-body-disabled";
+$mat-toolbar: ".mat-toolbar";
+$mat-slide-toggle: ".mat-mdc-slide-toggle";

lib/core/src/lib/styles/material.theme.scss

@@ -1,16 +1,18 @@
+@import './mat-selectors';
+
 @mixin adf-material-theme() {
-    .mat-expansion-panel {
+    #{$mat-expansion-panel} {
-        & .mat-expansion-panel-header.cdk-keyboard-focused,
+        & #{$mat-expansion-panel-header}.cdk-keyboard-focused,
-        & .mat-expansion-panel-header.cdk-program-focused,
+        & #{$mat-expansion-panel-header}.cdk-program-focused,
-        &:not(.mat-expanded) .mat-expansion-panel-header:hover {
+        &:not(#{$mat-expanded}) #{$mat-expansion-panel-header}:hover {
             &:not([aria-disabled='true']) {
                 background-color: var(--adf-theme-background-hover-color);
             }
         }
     }
 
-    .mat-calendar {
+    #{$mat-calendar} {
-        .mat-calendar-header {
+        #{$mat-calendar-header} {
             button {
                 color: var(--adf-theme-foreground-text-color-087);
 
@@ -20,13 +22,13 @@
             }
         }
 
-        .mat-calendar-content {
+        #{$mat-calendar-content} {
-            .mat-calendar-table-header th {
+            #{$mat-calendar-table-header} th {
                 color: var(--adf-theme-foreground-text-color-054);
             }
 
-            .mat-calendar-body-disabled > div {
+            #{$mat-calendar-body-disabled} > div {
-                color: var(--adf-theme-foreground-text-color-054);
+                color: var(--adf-theme-foreground-text-color-054) !important;
             }
         }
     }

lib/core/src/lib/templates/empty-content/empty-content.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-empty-content {
     color: var(--adf-theme-foreground-text-color-054);
     display: flex;

lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-image-viewer {
     width: 100%;
 
@@ -31,7 +33,7 @@
         left: 50%;
         transform: translateX(-50%);
 
-        .adf-toolbar .adf-toolbar-container {
+        .adf-toolbar #{$mat-toolbar} {
             max-height: 48px;
             background-color: var(--adf-theme-background-card-color);
             border-width: 0;

lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-pdf-viewer {
     width: 100%;
     height: 100%;
@@ -77,7 +79,7 @@
         max-height: 100px;
         max-width: 300px;
 
-        &-progress-bar {
+        #{$mat-progress-bar} {
             max-width: 300px;
             margin: 0;
             position: absolute;
@@ -96,7 +98,7 @@
         left: 50%;
         transform: translateX(-50%);
 
-        .adf-toolbar .adf-toolbar-container {
+        .adf-toolbar #{$mat-toolbar} {
             max-height: 48px;
             background-color: var(--adf-theme-background-card-color);
             border-width: 0;

lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.scss

@@ -1,4 +1,6 @@
 /* stylelint-disable scss/at-extend-no-missing-placeholder */
+@import 'styles/mat-selectors';
+
 .adf-full-screen {
     width: 100%;
     height: 100%;

lib/core/src/lib/viewer/components/viewer.component.scss

@@ -1,4 +1,6 @@
 /* stylelint-disable scss/at-extend-no-missing-placeholder */
+@import 'styles/mat-selectors';
+
 .adf-full-screen {
     width: 100%;
     height: 100%;
@@ -10,7 +12,7 @@
     width: 100%;
     height: 100%;
 
-    .mat-toolbar {
+    #{$mat-toolbar} {
         color: var(--adf-theme-foreground-text-color-054);
 
         .adf-toolbar-title {
@@ -29,7 +31,7 @@
     }
 
     &-toolbar {
-        .mat-toolbar {
+        #{$mat-toolbar} {
             background-color: var(--adf-theme-background-card-color-087);
         }
     }

lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss

@@ -1,5 +1,7 @@
+@import 'styles/mat-selectors';
 /* cspell: disable-next-line */
 /* stylelint-disable scss/at-extend-no-missing-placeholder */
+
 .adf-full-screen {
     width: 100%;
     height: 100%;
@@ -31,8 +33,7 @@
     }
 
     &-toolbar {
-        /* stylelint-disable-next-line selector-class-pattern */
+        #{$mat-toolbar} {
-        .mat-toolbar {
             background-color: var(--adf-theme-background-card-color-087);
         }
     }

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss

@@ -1,9 +1,10 @@
 /* stylelint-disable selector-class-pattern */
+@import 'styles/mat-selectors';
+
 .adf {
     // eslint-disable-selector-class-pattern
     &-date-widget {
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+        #{$mat-form-field-suffix} {
-        .mat-mdc-form-field-text-suffix {
             top: 26px;
         }
 
@@ -13,13 +14,11 @@
     }
 
     &-left-label-input-datepicker {
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+        #{$mat-form-field-suffix} {
-        .mat-mdc-form-field-text-suffix {
             top: 0;
         }
 
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+        #{$mat-form-field-infix} {
-        .mat-mdc-form-field-infix {
             width: 100%;
         }
     }

lib/process-services/src/lib/app-list/apps-list.component.scss

@@ -1,4 +1,5 @@
 @import 'styles/flex';
+@import 'styles/mat-selectors';
 
 /* stylelint-disable scss/no-global-function-names */
 @mixin adf-line-clamp($line-height: 1.25, $lines: 3) {
@@ -48,7 +49,7 @@ $tile-themes: (
     flex-direction: column;
     height: 85vh;
 
-    .mat-mdc-progress-spinner {
+    #{$mat-progress-spinner} {
         margin: 0 auto;
     }
 }

lib/process-services/src/lib/form/start-form/start-form.component.scss

@@ -1,22 +1,23 @@
+@import 'styles/mat-selectors';
+
 .adf-form-container {
     max-width: 100%;
     max-height: 100%;
 
-    & .mat-mdc-card {
+    & #{$mat-card} {
         padding: 16px 24px;
         overflow: hidden;
     }
 
-    & .mat-mdc-card-header-text {
+    & #{$mat-card-header-text} {
         margin: 0;
     }
 
-    & .mat-tab-body-content {
+    & #{$mat-tab-body-content} {
         overflow: hidden;
     }
 
-    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+    & #{$mat-tab-label-text} {
-    & .mdc-tab__text-label {
         font-size: var(--theme-subheading-2-font-size);
         line-height: var(--theme-headline-line-height);
         letter-spacing: -0.4px;
@@ -25,14 +26,14 @@
         text-transform: uppercase;
     }
 
-    & .mat-ink-bar {
+    & #{$mat-tab-ink-bar} {
         height: 4px;
     }
 
-    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+    & #{$mat-form-field-wrapper} {
-    & .mat-mdc-text-field-wrapper {
         margin: 0 12px 0 0;
     }
+}
 
     .adf-form-container-card {
         .adf {
@@ -92,12 +93,12 @@
                 padding-bottom: 25px;
                 padding-right: 25px;
 
-                & .mat-mdc-button {
+                & #{$mat-button} {
                     height: 36px;
                     border-radius: 5px;
                 }
 
-                & .mdc-button__label {
+            & #{$mat-button-label} {
                 width: 58px;
                 height: 20px;
                 opacity: 0.54;
@@ -106,13 +107,13 @@
             }
         }
     }
-    }
 }
 
+
 form-field {
     width: 100%;
 
-    .mat-mdc-input-element {
+    #{$mat-input-element} {
         font-size: var(--theme-body-2-font-size);
         padding-top: 8px;
         line-height: normal;

lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget-dialog.component.scss

@@ -1,5 +1,7 @@
+@import 'styles/mat-selectors';
+
 .adf-attach-file-widget-dialog {
-    .mat-mdc-dialog-actions {
+    #{$mat-dialog-actions} {
         background-color: var(--theme-background-color);
         display: flex;
         justify-content: flex-end;

lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.scss

@@ -1,4 +1,5 @@
 @import 'styles/flex';
+@import 'styles/mat-selectors';
 
 .adf {
     &-attach-widget-container {
@@ -39,12 +40,11 @@
     &-attach-widget-repo-button {
         padding-left: 10px;
 
-        /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+        #{$mat-button-label} {
-        .mdc-button__label {
             display: inline;
         }
 
-        .mat-mdc-mini-fab.mat-accent {
+        #{$mat-mini-fab}#{$mat-accent} {
             background-color: inherit;
         }
     }
@@ -67,18 +67,17 @@
     }
 
     &-attach-files-row {
-        .mat-line {
+        #{$mat-line} {
             margin-bottom: 0;
         }
 
-        /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
+        #{$mat-list-item-primary-text} {
-        .mdc-list-item__primary-text {
             max-width: 200px;
         }
 
         @include layout-bp(lt-md) {
-            /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
+
-            .mdc-list-item__primary-text {
+            #{$mat-list-item-primary-text} {
                 max-width: 150px;
             }
         }

lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf {
     &-attach-folder-widget-container {
         margin-bottom: 15px;
@@ -26,7 +28,7 @@
     &-attach-folder-files-row {
         padding-left: 8px;
 
-        .mat-line {
+        #{$mat-line} {
             margin-bottom: 0;
         }
     }

lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf {
     &-dropdown-widget {
         width: 100%;
@@ -7,7 +9,7 @@
             width: 100%;
         }
 
-        .mat-mdc-select-value-text {
+        #{$mat-select-value-text} {
             font-size: var(--theme-body-1-font-size);
         }
 

lib/process-services/src/lib/form/widgets/people/people.widget.scss

@@ -1,9 +1,10 @@
+@import 'styles/mat-selectors';
+
 .adf {
     &-people-widget {
         width: 100%;
 
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+        #{$mat-form-field-label} {
-        .mat-form-field-label-wrapper {
             top: 10px;
         }
     }

lib/process-services/src/lib/form/widgets/upload/upload.widget.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf {
     &-upload-widget-container {
         margin-bottom: 15px;
@@ -25,7 +27,7 @@
     }
 
     &-upload-files-row {
-        .mat-line {
+        #{$mat-line} {
             margin-bottom: 0;
         }
     }

lib/process-services/src/lib/people/components/people/people.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-assignment-header {
     border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
     padding: 6px 20px;
@@ -24,7 +26,7 @@
     }
 }
 
-.adf-assignment-top-container.mat-mdc-card {
+.adf-assignment-top-container#{$mat-card} {
     border-top: 1px solid var(--adf-theme-foreground-divider-color);
     margin: 0;
     padding: 0;

lib/process-services/src/lib/process-list/components/start-process/start-process.component.html

@@ -117,7 +117,7 @@
                     <mat-spinner class="adf-start-process-loading"></mat-spinner>
                 </ng-template>
             </div>
-            <div class="mat-content-actions" *ngIf="!hasStartForm()">
+            <div class="adf-start-process-content-actions" *ngIf="!hasStartForm()">
                 <button
                     class="adf-start-process-button"
                     mat-button

lib/process-services/src/lib/process-list/components/start-process/start-process.component.scss

@@ -1,4 +1,5 @@
 @import 'styles/flex';
+@import 'styles/mat-selectors';
 
 .adf {
     &-start-process {
@@ -11,16 +12,14 @@
             width: 100%;
         }
 
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+        #{$mat-form-field-label} {
-        .mat-form-field-label {
             color: var(--adf-theme-mat-grey-color-a200-dark);
         }
 
-        .mat-content-actions {
+        #{$mat-content-actions} {
             text-align: right;
         }
-
+        #{$mat-button} {
-        .mat-mdc-button {
             text-transform: uppercase !important;
         }
     }

lib/process-services/src/lib/process-user-info/process-user-info.component.scss

@@ -1,4 +1,5 @@
 @import 'styles/flex';
+@import 'styles/mat-selectors';
 
 .adf {
     &-userinfo-container {
@@ -49,7 +50,7 @@
         display: inline-block;
     }
 
-    &-userinfo-menu_button.mat-mdc-button {
+    &-userinfo-menu_button#{$mat-button} {
         margin-right: 0;
         border-radius: 90%;
         padding: 0;
@@ -57,13 +58,13 @@
         height: 40px;
     }
 
-    &-userinfo-tab .mat-mdc-tab-header {
+    &-userinfo-tab #{$mat-tab-header} {
         align-self: center;
         width: 100%;
         min-width: 250px;
     }
-    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+
-    &-userinfo-tab .mdc-tab__text-label {
+    &-userinfo-tab #{$mat-tab-label-text} {
         flex: auto;
         font-weight: 500;
         font-size: var(--theme-body-1-font-size);
@@ -81,7 +82,7 @@
         box-sizing: border-box;
     }
 
-    &-userinfo-card.mat-mdc-card {
+    &-userinfo-card#{$mat-card} {
         padding: 0;
     }
 
@@ -160,7 +161,7 @@
 }
 
 @media only screen and (min-device-width: 480px) {
-    .mat-mdc-menu-panel.adf-userinfo-menu {
+    #{$mat-menu-panel}.adf-userinfo-menu {
         max-height: 450px;
         min-width: 450px;
         overflow: auto;
@@ -168,6 +169,6 @@
     }
 }
 
-.mat-mdc-menu-panel.adf-userinfo-menu .mat-mdc-menu-content {
+#{$mat-menu-panel}.adf-userinfo-menu #{$mat-menu-content} {
     padding: 0;
 }

lib/process-services/src/lib/task-list/components/attach-form/attach-form.component.scss

@@ -1,5 +1,7 @@
+@import 'styles/mat-selectors';
+
 .adf-attach-form {
-    .mat-mdc-form-field {
+    #{$mat-form-field} {
         width: 100%;
     }
 

lib/process-services/src/lib/task-list/components/checklist/checklist.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 :host {
     width: 100%;
 }
@@ -6,7 +8,7 @@
     font-weight: bolder;
 }
 
-.mat-mdc-form-field {
+#{$mat-form-field} {
     width: 100%;
 }
 

lib/process-services/src/lib/task-list/components/start-task/start-task.component.scss

@@ -1,11 +1,12 @@
 @import 'styles/flex';
+@import 'styles/mat-selectors';
 
 /* stylelint-disable no-descending-specificity */
 .adf-new-task-heading {
     padding-top: 12px;
     border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
 
-    .mat-mdc-card-title {
+    #{$mat-card-title} {
         font-weight: bold;
         font-size: var(--theme-adf-task-title-font-size);
     }
@@ -68,21 +69,20 @@
 }
 
 adf-start-task {
-    .mat-mdc-button.adf-uppercase {
+    #{$mat-button}.adf-uppercase {
         text-transform: uppercase;
     }
 
     people-widget.adf-people-widget-content {
         width: 100%;
 
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+        #{$mat-form-field-label} {
-        .mat-form-field-label-wrapper {
             top: -14px;
         }
     }
 
     .adf-people-widget-content {
-        .mat-mdc-form-field {
+        #{$mat-form-field} {
             width: 100%;
         }
 
@@ -96,7 +96,7 @@ adf-start-task {
     }
 
     .adf {
-        &-start-task-input-container .mat-mdc-text-field-wrapper {
+        &-start-task-input-container #{$mat-form-field-wrapper} {
             padding-top: 8px;
         }
 
@@ -136,8 +136,7 @@ adf-start-task {
                 border-color: var(--theme-warn-color);
             }
 
-            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+            #{$mat-form-field-prefix} {
-            .mat-form-field-prefix {
                 color: var(--theme-warn-color);
             }
 

lib/process-services/src/lib/task-list/components/task-details/task-details.component.scss

@@ -1,4 +1,5 @@
 @import 'styles/flex';
+@import 'styles/mat-selectors';
 
 adf-task-details {
     width: 100%;
@@ -75,7 +76,7 @@ adf-task-details {
                     flex-direction: column;
                     padding: 20px 0;
 
-                    .mat-mdc-slide-toggle {
+                    #{$mat-slide-toggle} {
                         margin-left: auto;
 
                         & + div {
@@ -88,8 +89,7 @@ adf-task-details {
                     }
                 }
 
-                /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+                & #{$mat-tab-label-text} {
-                & .mdc-tab__text-label {
                     flex-grow: 1;
                 }
             }

lib/process-services/src/lib/task-list/components/task-form/task-form.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-task-form {
     &-container {
         overflow: hidden;
@@ -8,13 +10,12 @@
         padding-right: 25px;
         padding-bottom: 25px;
 
-        & .mat-mdc-button {
+        & #{$mat-button} {
             height: 36px;
             border-radius: 5px;
         }
 
-        /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+        & #{$mat-button-label} {
-        & .mdc-button__label {
             width: 58px;
             height: 20px;
             opacity: 0.54;

lib/process-services/src/lib/task-list/components/task-standalone/task-standalone.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-message-card {
     width: 60%;
     box-sizing: border-box;
@@ -46,7 +48,7 @@
                 border-radius: 5px;
             }
 
-            & .mdc-button__label {
+            & #{$mat-button-label} {
                 opacity: 0.54;
                 font-size: var(--theme-button-font-size);
                 font-weight: bold;