AAE-34494 break dependency on ADF mat selectors (#4536)

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

@@ -1,11 +1,11 @@
-@import '@alfresco/adf-core/lib/styles/mat-selectors';
+@use '../styles/mat-selectors' as ms;
 
 .aca-manage-rules {
-  #{$mat-slide-toggle}:is(mat-slide-toggle) #{$mat-switch}:enabled #{$mat-switch-track}::after {
+  #{ms.$mat-slide-toggle}:is(mat-slide-toggle) #{ms.$mat-switch}:enabled #{ms.$mat-switch-track}::after {
     background: var(--mdc-switch-selected-track-color);
   }
 
-  #{$mat-slide-toggle} #{$mat-switch} #{$mat-switch-handle}::before {
+  #{ms.$mat-slide-toggle} #{ms.$mat-switch} #{ms.$mat-switch-handle}::before {
     background: var(--mdc-switch-selected-pressed-handle-color);
   }
 

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

@@ -1,4 +1,4 @@
-@import '@alfresco/adf-core/lib/styles/mat-selectors';
+@use '../../styles/mat-selectors' as ms;
 
 /* stylelint-disable selector-class-pattern */
 .aca-rule-action-list {
@@ -32,7 +32,7 @@
       flex: 1;
     }
 
-    #{$mat-text-field-disabled}#{$mat-text-field-filled} {
+    #{ms.$mat-text-field-disabled}#{ms.$mat-text-field-filled} {
       background: transparent;
     }
 

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

@@ -1,4 +1,4 @@
-@import '@alfresco/adf-core/lib/styles/mat-selectors';
+@use '../../styles/mat-selectors' as ms;
 
 .aca-rule-composite-condition {
   display: block;
@@ -22,8 +22,8 @@
       display: flex;
       gap: 8px;
 
-      #{$mat-form-field} {
+      #{ms.$mat-form-field} {
-        #{$mat-form-field-infix} {
+        #{ms.$mat-form-field-infix} {
           padding-bottom: 4px;
         }
       }
@@ -38,10 +38,10 @@
         flex: 1;
       }
 
-      .aca-rule-composite-condition__boolean-mode-control #{$mat-form-field-wrapper} {
+      .aca-rule-composite-condition__boolean-mode-control #{ms.$mat-form-field-wrapper} {
         background-color: unset;
 
-        #{$mat-select-disabled} {
+        #{ms.$mat-select-disabled} {
           color: var(--adf-theme-foreground-text-color);
         }
       }

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

@@ -1,9 +1,9 @@
-@import '@alfresco/adf-core/lib/styles/mat-selectors';
+@use '../styles/mat-selectors' as ms;
 
 .aca-edit-rule-dialog-container {
   --edit-rule-dialog-padding: 8px 20px;
 
-  #{$mat-dialog-surface} {
+  #{ms.$mat-dialog-surface} {
     padding: 0;
   }
 }

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

@@ -1,4 +1,4 @@
-@import '@alfresco/adf-core/lib/styles/mat-selectors';
+@use '../styles/mat-selectors' as ms;
 
 .aca-rule-details {
   .aca-rule-details__form__triggers {
@@ -88,14 +88,14 @@
     }
 
     &.aca-read-only,
-    #{$mat-form-field-disabled} {
+    #{ms.$mat-form-field-disabled} {
-      #{$mat-notched-outline-leading},
+      #{ms.$mat-notched-outline-leading},
-      #{$mat-notched-outline-trailing},
+      #{ms.$mat-notched-outline-trailing},
-      #{$mat-notched-outline-notch} {
+      #{ms.$mat-notched-outline-notch} {
         border: none;
       }
 
-      #{$mat-line-ripple} {
+      #{ms.$mat-line-ripple} {
         &::before,
         &::after {
           display: none;
@@ -103,21 +103,21 @@
       }
 
       *:disabled,
-      #{$mat-select-disabled} #{$mat-select-value} {
+      #{ms.$mat-select-disabled} #{ms.$mat-select-value} {
         color: inherit;
       }
 
-      #{$mat-select-arrow-wrapper} {
+      #{ms.$mat-select-arrow-wrapper} {
         display: none;
       }
     }
 
-    .aca-rule-details__form__row #{$mat-form-field-flex} #{$mat-form-field-infix} {
+    .aca-rule-details__form__row #{ms.$mat-form-field-flex} #{ms.$mat-form-field-infix} {
       padding-bottom: 0.375em;
       padding-top: 24px;
     }
 
-    .aca-rule-details__form__row aca-rule-action #{$mat-form-field-flex} #{$mat-form-field-infix} {
+    .aca-rule-details__form__row aca-rule-action #{ms.$mat-form-field-flex} #{ms.$mat-form-field-infix} {
       padding-top: 0.1em;
       padding-bottom: 0.1em;
     }

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

@@ -1,9 +1,9 @@
-@import '@alfresco/adf-core/lib/styles/mat-selectors';
+@use '../styles/mat-selectors' as ms;
 
 .aca-rule-set-picker-container {
   --rule-set-picker-padding: 8px 20px;
 
-  #{$mdc-dialog} #{$mat-dialog-surface} {
+  #{ms.$mdc-dialog} #{ms.$mat-dialog-surface} {
     padding: 0;
   }
 }

projects/aca-content/folder-rules/src/styles/mat-selectors.scss

@@ -0,0 +1,27 @@
+$mat-line: '.mat-line';
+$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-line-ripple: '.mdc-line-ripple';
+$mat-select: '.mat-mdc-select';
+$mat-select-value: '.mat-select-value';
+$mat-slide-toggle: '.mat-mdc-slide-toggle';
+$mat-form-field-infix: '.mat-mdc-form-field-infix';
+$mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper';
+$mat-dialog-surface: '.mat-mdc-dialog-surface';
+$mdc-dialog: '.mdc-dialog';
+$mat-notched-outline: '.mdc-notched-outline';
+$mat-select-arrow: '.mat-mdc-select-arrow';
+$mat-notched-outline-leading: '.mdc-notched-outline__leading';
+$mat-notched-outline-trailing: '.mdc-notched-outline__trailing';
+$mat-notched-outline-notch: '.mdc-notched-outline__notch';
+$mat-text-field-filled: '.mdc-text-field--filled';
+$mat-text-field-disabled: '.mdc-text-field--disabled';
+$mat-switch: '.mdc-switch';
+$mat-switch-handle: '.mdc-switch__handle';
+$mat-switch-track: '.mdc-switch__track';
+$mat-list-item: '.mdc-list-item';
+$mat-text-field: '.mdc-text-field';
+$mat-form-field-disabled: '.mat-form-field-disabled';
+$mat-select-disabled: '.mat-mdc-select-disabled';
+$mat-select-value: '.mat-mdc-select-value';

projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.scss

@@ -1,11 +1,11 @@
-@import '@alfresco/adf-core/lib/styles/mat-selectors';
+@use '../../ui/mat-selectors' as ms;
 
 .aca-bulk-actions-form-field {
   margin-left: 24px;
   width: 295px;
 
-  #{$mat-form-field-flex},
+  #{ms.$mat-form-field-flex},
-  #{$mat-select-value} {
+  #{ms.$mat-select-value} {
     height: 48px;
     display: flex;
     align-items: center;

projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-input/search-ai-input.component.scss

@@ -1,4 +1,4 @@
-@import '@alfresco/adf-core/lib/styles/mat-selectors';
+@use '../../../../ui/mat-selectors' as ms;
 
 aca-search-ai-input {
   width: 100%;
@@ -59,7 +59,7 @@ aca-search-ai-input {
     font-size: 15px;
     margin-right: 26px;
 
-    #{$mat-select-trigger} {
+    #{ms.$mat-select-trigger} {
       height: auto;
       margin-top: 4px;
     }
@@ -92,7 +92,7 @@ aca-search-ai-input {
   }
 }
 
-.aca-search-ai-input-agent-select-options.aca-search-ai-input-agent-select-agents#{$mat-select-panel} {
+.aca-search-ai-input-agent-select-options.aca-search-ai-input-agent-select-agents#{ms.$mat-select-panel} {
   margin-top: 9px;
 
   .aca-search-ai-input-agent-select-options-option {

projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.scss

@@ -1,4 +1,4 @@
-@import '@alfresco/adf-core/lib/styles/mat-selectors';
+@use '../../../../ui/mat-selectors' as ms;
 
 .aca-search-ai-results {
   aca-page-layout {
@@ -118,7 +118,7 @@
                 margin-right: 2px;
               }
 
-              #{$mat-button-touch-target} {
+              #{ms.$mat-button-touch-target} {
                 width: 24px;
               }
             }

projects/aca-content/src/lib/components/sidenav/sidenav.component.scss

@@ -1,4 +1,4 @@
-@import '@alfresco/adf-core/lib/styles/mat-selectors';
+@use '../../ui/mat-selectors' as mat;
 
 .aca-sidenav {
   display: flex;
@@ -119,7 +119,7 @@
       line-height: 32px;
       justify-content: start;
 
-      #{$mat-button-label} {
+      #{mat.$mat-button-label} {
         overflow: hidden;
         text-overflow: ellipsis;
       }

projects/aca-content/src/lib/testing/app-testing.module.ts

@@ -39,6 +39,7 @@ import { ContentManagementService } from '../services/content-management.service
 import { DocumentBasePageService } from '@alfresco/aca-shared';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconTestingModule } from '@angular/material/icon/testing';
 
 @NgModule({
   imports: [
@@ -58,7 +59,8 @@ import { MatDialogModule } from '@angular/material/dialog';
     ),
     EffectsModule.forRoot([]),
     MatSnackBarModule,
-    MatDialogModule
+    MatDialogModule,
+    MatIconTestingModule
   ],
   exports: [RouterTestingModule, TranslateModule],
   providers: [

projects/aca-content/src/lib/ui/application.scss

@@ -1,7 +1,7 @@
 /* stylelint-disable scss/no-global-function-names */
 @use '@angular/material' as mat;
-@import 'mixins';
+@import './mixins';
-@import 'theme';
+@import './theme';
 
 $foreground: map-get($custom-theme, foreground);
 

projects/aca-content/src/lib/ui/mat-selectors.scss

@@ -0,0 +1,101 @@
+$mat-icon: '.mat-icon';
+$mat-accent: '.mat-accent';
+$mat-line: '.mat-line';
+$mat-tab-label: '.mat-mdc-tab';
+$mat-tab-label-active: '.mdc-tab--active';
+$mat-tab-label-text: '.mdc-tab__text-label';
+$mat-tab-list: '.mat-mdc-tab-list';
+$mat-tab-header: '.mat-mdc-tab-header';
+$mat-tab-labels: '.mat-mdc-tab-labels';
+$mat-chip: '.mat-mdc-chip';
+$mat-checkbox: '.mat-mdc-checkbox';
+$mat-checkbox-box: '.mdc-checkbox';
+$mat-button: '.mat-mdc-button';
+$mat-button-label: '.mdc-button__label';
+$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-line-ripple: '.mdc-line-ripple';
+$mat-dialog-actions: '.mat-mdc-dialog-actions';
+$mat-dialog-content: '.mat-mdc-dialog-content';
+$mat-button-touch-target: '.mat-mdc-button-touch-target';
+$mat-card: '.mat-mdc-card';
+$mat-list-item-primary-text: '.mdc-list-item__primary-text';
+$mat-select: '.mat-mdc-select';
+$mat-select-value: '.mat-select-value';
+$mat-select-panel: '.mat-mdc-select-panel';
+$mat-expansion-panel: '.mat-expansion-panel';
+$mat-expansion-panel-header: '.mat-expansion-panel-header';
+$mat-calendar: '.mat-calendar';
+$mat-toolbar: '.mat-toolbar';
+$mat-slide-toggle: '.mat-mdc-slide-toggle';
+$mat-form-field-infix: '.mat-mdc-form-field-infix';
+$mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper';
+$mat-form-field-error: '.mat-mdc-form-field-error';
+$mat-checkbox-background: '.mdc-checkbox__background';
+$mat-dialog-content: '.mdc-dialog__content';
+$mat-floating-label: '.mdc-floating-label';
+$mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper';
+$mat-dialog-title: '.mdc-dialog__title';
+$mat-dialog-surface: '.mat-mdc-dialog-surface';
+$mdc-dialog: '.mdc-dialog';
+$mat-evolution-chip: '.mdc-evolution-chip';
+$mat-standard-chip: '.mat-mdc-standard-chip';
+$mat-evolution-chip-action: '.mdc-evolution-chip__action';
+$mat-evolution-chip-text-label: '.mdc-evolution-chip__text-label';
+$mat-notched-outline: '.mdc-notched-outline';
+$mat-evolution-chip-graphic: '.mdc-evolution-chip__graphic';
+$mat-select-trigger: '.mat-mdc-select-trigger';
+$mat-select-arrow: '.mat-mdc-select-arrow';
+$mat-notched-outline-leading: '.mdc-notched-outline__leading';
+$mat-notched-outline-trailing: '.mdc-notched-outline__trailing';
+$mat-notched-outline-notch: '.mdc-notched-outline__notch';
+$mat-mdc-button: '.mdc-button';
+$mat-outlined-button: '.mat-mdc-outlined-button';
+$mat-button-base: '.mat-mdc-button-base';
+$mat-button-touch-target: '.mat-mdc-button-touch-target';
+$mat-autocomplete-panel: '.mat-mdc-autocomplete-panel';
+$mat-menu-surface: '.mdc-menu-surface';
+$mat-text-field-filled: '.mdc-text-field--filled';
+$mat-text-field-disabled: '.mdc-text-field--disabled';
+$mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper';
+$mat-list-item-disabled: '.mdc-list-item--disabled';
+$mat-primary: '.mat-primary';
+$mat-checkbox-touch-target: '.mat-mdc-checkbox-touch-target';
+$mat-switch: '.mdc-switch';
+$mat-switch-selected: '.mdc-switch--selected';
+$mat-switch-checked: '.mdc-switch--checked';
+$mat-switch-handle-track: '.mdc-switch__handle-track';
+$mat-switch-handle: '.mdc-switch__handle';
+$mat-switch-track: '.mdc-switch__track';
+$mat-switch-icons: '.mdc-switch__icons';
+$mat-switch-unselected: '.mdc-switch--unselected';
+$mat-chip-action: '.mat-mdc-chip-action';
+$mat-chip-graphic: '.mat-mdc-chip-graphic';
+$mat-data-table-row: '.mdc-data-table__row';
+$mat-data-table-cell: '.mdc-data-table__cell';
+$mat-data-table-header-cell: '.mdc-data-table__header-cell';
+$mat-toolbar-single-row: '.mat-toolbar-single-row';
+$mat-toolbar-multiple-row: '.mat-toolbar-multiple-row';
+$mat-unthemed: '.mat-unthemed';
+$mat-calendar-period-button: '.mat-calendar-period-button';
+$mat-radio-button: '.mat-mdc-radio-button';
+$mat-radio: '.mdc-radio';
+$mat-tab-ripple: '.mdc-tab__ripple';
+$mat-tab-disabled: '.mat-mdc-tab-disabled';
+$mat-tab-group: '.mat-mdc-tab-group';
+$mat-tab-group-stretch: '.mat-mdc-tab-group-stretch-tabs';
+$mat-list-item: '.mdc-list-item';
+$mat-menu-item: '.mat-mdc-menu-item';
+$mat-icon-no-color: '.mat-icon-no-color';
+$mat-submenu-icon: '.mat-menu-submenu-icon';
+$mat-mdc-submenu-icon: '.mat-mdc-menu-submenu-icon';
+$mdc-form-field: '.mdc-form-field';
+$mat-divider-horizontal: '.mat-divider-horizontal';
+$mat-accordion: '.mat-accordion';
+$mat-text-field: '.mdc-text-field';
+$mat-form-field-disabled: '.mat-form-field-disabled';
+$mat-select-disabled: '.mat-mdc-select-disabled';
+$mat-select-value: '.mat-mdc-select-value';
+$mat-checkbox-native-control: '.mdc-checkbox__native-control';
+$mat-card-header: '.mat-mdc-card-header';

projects/aca-content/src/lib/ui/overrides/adf-about.theme.scss

@@ -1,10 +1,10 @@
-@import '@alfresco/adf-core/lib/styles/mat-selectors';
+@use '../mat-selectors' as ms;
 
 @mixin adf-about-theme($theme) {
   adf-about {
     /* custom ADF About Component Theme */
 
-    #{$mat-data-table-header-cell} {
+    #{ms.$mat-data-table-header-cell} {
       color: var(--adf-theme-foreground-text-color-054);
       font-size: 12px;
       font-weight: 500;
@@ -13,12 +13,12 @@
     background-color: var(--theme-about-panel-background-color);
     overflow: auto;
 
-    #{$mat-accordion} {
+    #{ms.$mat-accordion} {
       box-shadow: none;
       border: none;
 
       &.adf-about-panel {
-        #{$mat-expansion-panel} {
+        #{ms.$mat-expansion-panel} {
           box-shadow: none;
           border-radius: 12px;
           margin: 24px;
@@ -28,7 +28,7 @@
       }
     }
 
-    #{$mat-expansion-panel-header} {
+    #{ms.$mat-expansion-panel-header} {
       height: 80px;
       line-height: 32px;
     }

projects/aca-content/src/lib/ui/overrides/ay11.scss

@@ -1,3 +1,4 @@
+@use '../mixins' as mixins;
 @import '../colors';
 
 /* stylelint-disable selector-class-pattern */
@@ -7,7 +8,7 @@
   .mat-mdc-checkbox,
   .mat-mdc-raised-button {
     &:focus-visible {
-      @include rounded-outline;
+      @include mixins.rounded-outline;
     }
 
     .mat-ripple,
@@ -24,7 +25,7 @@
 
     .mdc-checkbox__native-control:focus-visible {
       & ~ .mat-mdc-checkbox-ripple {
-        @include rounded-outline;
+        @include mixins.rounded-outline;
 
         height: 22px;
         width: 22px;
@@ -58,14 +59,14 @@
 
   .mat-mdc-list-base .mat-mdc-list-option {
     .mdc-list-item__content {
-      @include rounded-border(transparent);
+      @include mixins.rounded-border(transparent);
     }
 
     &:focus-visible {
       background-color: white;
 
       .mdc-list-item__content {
-        @include rounded-border;
+        @include mixins.rounded-border;
       }
     }
   }
@@ -74,12 +75,12 @@
   .app-search-button {
     line-height: 36px;
 
-    @include rounded-border(transparent);
+    @include mixins.rounded-border(transparent);
 
     &:focus-visible {
       outline: none;
 
-      @include rounded-border;
+      @include mixins.rounded-border;
     }
   }
 
@@ -89,10 +90,10 @@
         display: none;
       }
 
-      @include rounded-border(transparent);
+      @include mixins.rounded-border(transparent);
 
       &:focus-visible {
-        @include rounded-border;
+        @include mixins.rounded-border;
 
         background-color: white;
       }
@@ -110,7 +111,7 @@
   .mat-mdc-option {
     &.cdk-keyboard-focused {
       .mat-mdc-option-ripple {
-        @include rounded-outline;
+        @include mixins.rounded-outline;
       }
     }
   }
@@ -190,10 +191,10 @@
     .mat-mdc-button-base.mat-mdc-button {
       outline: none;
 
-      @include rounded-border(transparent);
+      @include mixins.rounded-border(transparent);
 
       &:focus-visible {
-        @include rounded-border;
+        @include mixins.rounded-border;
 
         background-color: white;
       }
@@ -202,7 +203,7 @@
     &.cdk-keyboard-focused:not([aria-disabled='true']) {
       background-color: white;
 
-      @include rounded-border;
+      @include mixins.rounded-border;
     }
   }
 
@@ -234,7 +235,7 @@
 
         &.cdk-keyboard-focused {
           .mat-icon {
-            @include rounded-outline;
+            @include mixins.rounded-outline;
           }
         }
       }

projects/aca-content/src/lib/ui/theme.scss

@@ -1,8 +1,8 @@
 @use '@angular/material' as mat;
+@use './mat-selectors' as ms;
 @import '@alfresco/adf-core/theming';
-@import '@alfresco/adf-core/lib/styles/mat-selectors';
+@import './custom-theme';
-@import 'custom-theme';
+@import './variables/variables';
-@import 'variables/variables';
 @include custom-theme($custom-theme);
 @include mat.core;
 
@@ -21,29 +21,29 @@ mat-toolbar {
   color: var(--theme-secondary-text);
 }
 
-#{$mat-text-field-filled}:not(#{$mat-text-field-disabled}) {
+#{ms.$mat-text-field-filled}:not(#{ms.$mat-text-field-disabled}) {
   padding: 0;
 }
 
-#{$mat-form-field-error-wrapper}:is(div) {
+#{ms.$mat-form-field-error-wrapper}:is(div) {
   padding: 0;
   font-size: 10px;
 
-  #{$mat-form-field-error} {
+  #{ms.$mat-form-field-error} {
     position: relative;
     top: -3px;
   }
 }
 
-#{$mat-checkbox} {
+#{ms.$mat-checkbox} {
-  #{$mat-checkbox-box}:has(div) {
+  #{ms.$mat-checkbox-box}:has(div) {
     padding-right: 2px;
   }
 
-  #{$mdc-form-field} {
+  #{ms.$mdc-form-field} {
     height: auto;
 
-    #{$mat-checkbox-box} {
+    #{ms.$mat-checkbox-box} {
       padding: 0;
       margin-right: 2px;
 
@@ -53,7 +53,7 @@ mat-toolbar {
         position: relative;
       }
 
-      #{$mat-checkbox-background} {
+      #{ms.$mat-checkbox-background} {
         top: 1px;
         left: 0;
         height: 16px;
@@ -62,62 +62,62 @@ mat-toolbar {
     }
   }
 
-  #{$mat-checkbox-touch-target} {
+  #{ms.$mat-checkbox-touch-target} {
     height: 24px;
     width: 24px;
   }
 
-  #{$mat-checkbox-box}:has(#{$mat-checkbox-native-control}):hover,
+  #{ms.$mat-checkbox-box}:has(#{ms.$mat-checkbox-native-control}):hover,
-  #{$mat-checkbox-box}:has(#{$mat-checkbox-native-control}) {
+  #{ms.$mat-checkbox-box}:has(#{ms.$mat-checkbox-native-control}) {
-    #{$mat-checkbox-native-control}:enabled ~ #{$mat-checkbox-background}:is(div) {
+    #{ms.$mat-checkbox-native-control}:enabled ~ #{ms.$mat-checkbox-background}:is(div) {
       border-color: var(--theme-blue-checkbox-color);
       background-color: var(--theme-blue-checkbox-color);
     }
   }
 }
 
-#{$mat-switch}:is(button)#{$mat-switch-selected}#{$mat-switch-checked} #{$mat-switch-handle-track} #{$mat-switch-handle}::after {
+#{ms.$mat-switch}:is(button)#{ms.$mat-switch-selected}#{ms.$mat-switch-checked} #{ms.$mat-switch-handle-track} #{ms.$mat-switch-handle}::after {
   background-color: transparent;
 }
 
-#{$mat-slide-toggle}:is(mat-slide-toggle) #{$mat-switch}:enabled #{$mat-switch-track}::after {
+#{ms.$mat-slide-toggle}:is(mat-slide-toggle) #{ms.$mat-switch}:enabled #{ms.$mat-switch-track}::after {
   background-color: var(--theme-blue-button-color);
 }
 
 mat-slide-toggle {
-  #{$mat-switch-icons} {
+  #{ms.$mat-switch-icons} {
     display: none;
   }
 
-  #{$mat-switch-unselected}#{$mat-switch}:enabled #{$mat-switch-track}::before,
+  #{ms.$mat-switch-unselected}#{ms.$mat-switch}:enabled #{ms.$mat-switch-track}::before,
-  #{$mat-switch-unselected}#{$mat-switch}:enabled:active #{$mat-switch-track}::before,
+  #{ms.$mat-switch-unselected}#{ms.$mat-switch}:enabled:active #{ms.$mat-switch-track}::before,
-  #{$mat-switch-unselected}#{$mat-switch}:enabled:focus:not(:active) #{$mat-switch-track}::before,
+  #{ms.$mat-switch-unselected}#{ms.$mat-switch}:enabled:focus:not(:active) #{ms.$mat-switch-track}::before,
-  #{$mat-switch-unselected}#{$mat-switch}:enabled:hover:not(:focus:active) #{$mat-switch-track}::before {
+  #{ms.$mat-switch-unselected}#{ms.$mat-switch}:enabled:hover:not(:focus:active) #{ms.$mat-switch-track}::before {
     background: var(--adf-theme-foreground-disabled-text-color);
   }
 }
 
-#{$mat-list-item-primary-text} {
+#{ms.$mat-list-item-primary-text} {
   color: var(--adf-theme-foreground-text-color-087);
 }
 
-#{$mat-chip}#{$mat-evolution-chip}#{$mat-standard-chip} {
+#{ms.$mat-chip}#{ms.$mat-evolution-chip}#{ms.$mat-standard-chip} {
   height: auto;
 
-  #{$mat-evolution-chip-text-label} {
+  #{ms.$mat-evolution-chip-text-label} {
     white-space: normal;
     display: flex;
   }
 
-  #{$mat-evolution-chip-action}#{$mat-chip-action} {
+  #{ms.$mat-evolution-chip-action}#{ms.$mat-chip-action} {
-    #{$mat-evolution-chip-graphic}#{$mat-chip-graphic} {
+    #{ms.$mat-evolution-chip-graphic}#{ms.$mat-chip-graphic} {
       padding: 0;
     }
   }
 }
 
-#{$mdc-dialog} {
+#{ms.$mdc-dialog} {
-  #{$mat-dialog-title} {
+  #{ms.$mat-dialog-title} {
     margin-bottom: 20px;
     padding: 0;
 
@@ -126,43 +126,43 @@ mat-slide-toggle {
     }
   }
 
-  #{$mat-dialog-actions} {
+  #{ms.$mat-dialog-actions} {
     padding: 8px 0;
   }
 
-  #{$mat-slide-toggle} #{$mdc-form-field} {
+  #{ms.$mat-slide-toggle} #{ms.$mdc-form-field} {
     width: 36px;
   }
 
-  #{$mat-data-table-row}:last-child #{$mat-data-table-cell} {
+  #{ms.$mat-data-table-row}:last-child #{ms.$mat-data-table-cell} {
     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
   }
 
-  #{$mat-dialog-content} {
+  #{ms.$mat-dialog-content} {
     padding: 16px 0;
     color: var(--adf-theme-foreground-text-color-087);
 
     --mdc-dialog-supporting-text-color: var(--theme-primary-text);
   }
 
-  #{$mat-dialog-surface} {
+  #{ms.$mat-dialog-surface} {
     padding: 24px;
 
-    #{$mat-button} {
+    #{ms.$mat-button} {
       width: auto;
 
-      #{$mat-button-label} {
+      #{ms.$mat-button-label} {
         padding: 0 16px;
       }
     }
   }
 }
 
-#{$mat-floating-label},
+#{ms.$mat-floating-label},
-#{$mat-tab-list} #{$mat-tab-labels} #{$mat-tab-label},
+#{ms.$mat-tab-list} #{ms.$mat-tab-labels} #{ms.$mat-tab-label},
-#{$mat-checkbox} label,
+#{ms.$mat-checkbox} label,
-mat-toolbar#{$mat-toolbar}#{$mat-toolbar-multiple-row},
+mat-toolbar#{ms.$mat-toolbar}#{ms.$mat-toolbar-multiple-row},
-mat-toolbar#{$mat-toolbar}#{$mat-toolbar-single-row} {
+mat-toolbar#{ms.$mat-toolbar}#{ms.$mat-toolbar-single-row} {
   color: var(--theme-secondary-text);
   opacity: 1;
 }
@@ -186,7 +186,7 @@ mat-toolbar#{$mat-toolbar}#{$mat-toolbar-single-row} {
 
 .adf-datatable-row {
   .adf-datatable-checkbox {
-    #{$mat-checkbox} label {
+    #{ms.$mat-checkbox} label {
       display: none;
     }
   }
@@ -222,7 +222,7 @@ mat-toolbar#{$mat-toolbar}#{$mat-toolbar-single-row} {
 }
 
 .adf-property-field {
-  .adf-textitem-edit-icon#{$mat-icon} {
+  .adf-textitem-edit-icon#{ms.$mat-icon} {
     color: var(--theme-secondary-text);
   }
 }
@@ -236,13 +236,13 @@ mat-toolbar#{$mat-toolbar}#{$mat-toolbar-single-row} {
 }
 
 .aca-details-tabs {
-  #{$mat-tab-label-text} {
+  #{ms.$mat-tab-label-text} {
     line-height: 19px;
   }
 }
 
 mat-snack-bar-container {
-  #{$mat-button}#{$mat-unthemed} {
+  #{ms.$mat-button}#{ms.$mat-unthemed} {
     --mdc-text-button-label-text-color: #fff;
   }
 }
@@ -267,8 +267,8 @@ mat-snack-bar-container {
   --mdc-snackbar-container-color: var(--theme-warn-color);
 }
 
-#{$mat-calendar} {
+#{ms.$mat-calendar} {
-  #{$mat-calendar-period-button}:is(button) {
+  #{ms.$mat-calendar-period-button}:is(button) {
     width: unset;
     height: unset;
     padding: 0 16px;
@@ -276,54 +276,54 @@ mat-snack-bar-container {
   }
 }
 
-#{$mat-radio-button} #{$mat-radio}:is(div) {
+#{ms.$mat-radio-button} #{ms.$mat-radio}:is(div) {
   padding: 0 5px 0 0;
 }
 
-#{$mdc-form-field} > label:is(label) {
+#{ms.$mdc-form-field} > label:is(label) {
   padding-left: 3px;
 }
 
-#{$mat-tab-ripple} {
+#{ms.$mat-tab-ripple} {
   display: none;
 }
 
-#{$mat-tab-labels} {
+#{ms.$mat-tab-labels} {
   border-bottom: 1px solid var(--adf-theme-foreground-text-color-014);
 }
 
-#{$mat-tab-list} {
+#{ms.$mat-tab-list} {
-  #{$mat-tab-labels} {
+  #{ms.$mat-tab-labels} {
-    #{$mat-tab-label-active} {
+    #{ms.$mat-tab-label-active} {
       color: var($selected-text-color);
     }
   }
 }
 
-#{$mat-tab-label}:not(#{$mat-tab-disabled})#{$mat-tab-label-active} #{$mat-tab-label-text} {
+#{ms.$mat-tab-label}:not(#{ms.$mat-tab-disabled})#{ms.$mat-tab-label-active} #{ms.$mat-tab-label-text} {
   color: var(--theme-tab-active-text-color);
 }
 
 adf-dynamic-component {
-  mat-icon#{$mat-icon}#{$mat-submenu-icon} {
+  mat-icon#{ms.$mat-icon}#{ms.$mat-submenu-icon} {
     color: var(--theme-text-color);
   }
 }
 
-#{$mat-menu-item} #{$mat-icon} {
+#{ms.$mat-menu-item} #{ms.$mat-icon} {
-  &#{$mat-icon-no-color},
+  &#{ms.$mat-icon-no-color},
-  &#{$mat-mdc-submenu-icon} {
+  &#{ms.$mat-mdc-submenu-icon} {
     color: var(--theme-text-color);
   }
 }
 
-#{$mat-notched-outline-trailing},
+#{ms.$mat-notched-outline-trailing},
-#{$mat-notched-outline-notch},
+#{ms.$mat-notched-outline-notch},
-#{$mat-notched-outline-leading} {
+#{ms.$mat-notched-outline-leading} {
   border-color: var(--adf-theme-foreground-text-color-014);
 }
 
-#{$mat-menu-surface}#{$mat-autocomplete-panel}:is(div) {
+#{ms.$mat-menu-surface}#{ms.$mat-autocomplete-panel}:is(div) {
   padding: 0;
 
   span {
@@ -331,14 +331,14 @@ adf-dynamic-component {
   }
 }
 
-#{$mat-list-item}#{$mat-list-item-disabled} {
+#{ms.$mat-list-item}#{ms.$mat-list-item-disabled} {
-  #{$mat-list-item-primary-text}:is(div) {
+  #{ms.$mat-list-item-primary-text}:is(div) {
     color: unset;
   }
 }
 
-#{$mat-tab-group}#{$mat-tab-group-stretch} > #{$mat-tab-header} {
+#{ms.$mat-tab-group}#{ms.$mat-tab-group-stretch} > #{ms.$mat-tab-header} {
-  #{$mat-tab-label}:is(div) {
+  #{ms.$mat-tab-label}:is(div) {
     min-width: 160px;
   }
 }
@@ -349,6 +349,6 @@ adf-dynamic-component {
   }
 }
 
-#{$mat-form-field-infix} {
+#{ms.$mat-form-field-infix} {
   min-height: unset;
 }

projects/aca-shared/src/lib/components/open-in-app/open-in-app.component.scss

@@ -1,4 +1,4 @@
-@import '@alfresco/adf-core/lib/styles/mat-selectors';
+@use '../../styles/mat-selectors' as ms;
 
 aca-open-in-app {
   .aca-open-in-app {
@@ -57,7 +57,7 @@ aca-open-in-app {
       }
     }
 
-    #{$mat-button} {
+    #{ms.$mat-button} {
       --mat-mdc-button-persistent-ripple-color: unset;
       --mat-mdc-button-ripple-color: unset;
     }

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

@@ -1,7 +1,7 @@
-@import '@alfresco/adf-core/lib/styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 aca-toolbar-action {
-  #{$mat-mdc-button}#{$mat-button-base}#{$mat-outlined-button}#{$mat-unthemed} {
+  #{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);
   }
 }

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

@@ -1,7 +1,7 @@
-@import '@alfresco/adf-core/lib/styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 .app-toolbar-menu-item {
-  &:last-child > #{$mat-divider-horizontal} {
+  &:last-child > #{ms.$mat-divider-horizontal} {
     display: none;
   }
 

projects/aca-shared/src/lib/styles/mat-selectors.scss

@@ -0,0 +1,6 @@
+$mat-button: '.mat-mdc-button';
+$mat-mdc-button: '.mdc-button';
+$mat-outlined-button: '.mat-mdc-outlined-button';
+$mat-button-base: '.mat-mdc-button-base';
+$mat-unthemed: '.mat-unthemed';
+$mat-divider-horizontal: '.mat-divider-horizontal';