@alfresco/adf-core 8.1.0-14701637708 → 8.1.0-14711395239

package/lib/form/components/widgets/form.theme.scss

@@ -1,5 +1,6 @@
 /* stylelint-disable no-descending-specificity */
-@import 'styles/mat-selectors';
+/* stylelint-disable declaration-no-important */
+@use '../../../styles/mat-selectors' as ms;
 
 ul > li > form-field > .adf-focus {
     .adf-label {
@@ -36,15 +37,15 @@ ul > li > form-field > .adf-focus {
     }
 
     &-invalid {
-        #{$mat-checkbox} {
+        #{ms.$mat-checkbox} {
             padding-bottom: 12px;
         }
 
-        #{$mat-line-ripple} {
+        #{ms.$mat-line-ripple} {
             background-color: var(--theme-warn-color) !important;
         }
 
-        #{$mat-select} {
+        #{ms.$mat-select} {
             &-arrow {
                 color: var(--adf-theme-foreground-secondary-text-color) !important;
             }
@@ -54,7 +55,7 @@ ul > li > form-field > .adf-focus {
             border-color: var(--theme-warn-color);
         }
 
-        #{$mat-form-field-prefix} {
+        #{ms.$mat-form-field-prefix} {
             color: var(--adf-theme-foreground-secondary-text-color);
         }
 
@@ -71,9 +72,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-input-element},
-        #{$mat-select},
-        #{$mat-form-field} {
+        #{ms.$mat-input-element},
+        #{ms.$mat-select},
+        #{ms.$mat-form-field} {
             display: block !important;
         }
     }

package/lib/form/components/widgets/text/text.widget.scss

@@ -1,11 +1,11 @@
 /* stylelint-disable selector-class-pattern */
-@import 'styles/mat-selectors';
+@use '../../../../styles/mat-selectors' as ms;
 
 .adf {
     &-text-widget {
         width: 100%;
 
-        #{$mat-form-field-label} {
+        #{ms.$mat-form-field-label} {
             top: 20px;
         }
     }

package/lib/identity-user-info/identity-user-info.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../styles/flex' as flex;
 
 .adf {
     &-userinfo-container {
@@ -14,7 +14,7 @@
     &-userinfo-name {
         padding: 0 5px;
 
-        @include layout-bp(lt-md) {
+        @include flex.layout-bp(lt-md) {
             display: none;
         }
     }
@@ -65,7 +65,7 @@
         display: flex;
         flex-direction: column;
 
-        @include layout-bp(lt-sm) {
+        @include flex.layout-bp(lt-sm) {
             padding: 10px;
         }
     }

package/lib/info-drawer/info-drawer-layout.component.scss

@@ -1,5 +1,5 @@
-@import '../styles/mixins';
-@import 'styles/mat-selectors';
+@use '../styles/mixins' as mixins;
+@use '../styles/mat-selectors' as ms;
 
 $adf-info-drawer-layout-title-font-size: var(--theme-title-font-size) !default;
 $adf-info-drawer-icon-size: 48px !default;
@@ -7,25 +7,25 @@ $adf-info-drawer-icon-size-half: 24px !default;
 
 .adf {
     &-info-drawer {
-        @include flex-column;
+        @include mixins.flex-column;
     }
 
     &-info-drawer-layout {
-        @include flex-column;
+        @include mixins.flex-column;
 
         overflow: auto;
         width: 100%;
         background-color: var(--theme-card-background-color);
         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
 
-        & #{$mat-tab-label-text} {
+        & #{ms.$mat-tab-label-text} {
             font-weight: bold;
             text-align: left;
             opacity: 1;
         }
 
-        #{$mat-tab-label}#{$mat-tab-label-active} {
-            & #{$mat-tab-label-text} {
+        #{ms.$mat-tab-label}#{ms.$mat-tab-label-active} {
+            & #{ms.$mat-tab-label-text} {
                 color: inherit;
             }
         }
@@ -75,7 +75,7 @@ $adf-info-drawer-icon-size-half: 24px !default;
                 margin-bottom: 0;
             }
 
-            .adf-info-drawer-tabs #{$mat-tab-body-content} {
+            .adf-info-drawer-tabs #{ms.$mat-tab-body-content} {
                 .adf-manage-versions-empty,
                 .adf-manage-versions-no-permission {
                     margin: 0;

package/lib/info-drawer/info-drawer.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../styles/mat-selectors' as ms;
 
 .adf {
     &-info-drawer {
@@ -7,7 +7,7 @@
             margin: 0;
         }
 
-        #{$mat-tab-label-text} {
+        #{ms.$mat-tab-label-text} {
             min-width: 0;
         }
 
@@ -31,28 +31,28 @@
                 }
 
                 .adf-info-drawer-tabs {
-                    & #{$mat-tab-body-content} > * {
+                    & #{ms.$mat-tab-body-content} > * {
                         margin-bottom: 20px;
                         display: block;
                     }
 
-                    & #{$mat-tab-body-content} > *:last-child {
+                    & #{ms.$mat-tab-body-content} > *:last-child {
                         margin-bottom: 0;
                     }
 
-                    #{$mat-tab-label-text} {
+                    #{ms.$mat-tab-label-text} {
                         flex-grow: 1;
 
-                        #{$mat-icon} + span {
+                        #{ms.$mat-icon} + span {
                             padding-left: 5px;
                         }
                     }
 
-                    #{$mat-tab-body} {
+                    #{ms.$mat-tab-body} {
                         overflow-y: hidden;
                     }
 
-                    #{$mat-tab-body-content} {
+                    #{ms.$mat-tab-body-content} {
                         /* stylelint-disable */
                         overflow: auto;
                         /* stylelint-enable */
@@ -65,7 +65,7 @@
 
 /* stylelint-disable-next-line no-descending-specificity */
 .adf-info-drawer-tabs {
-    #{$mat-tab-label-container} {
+    #{ms.$mat-tab-label-container} {
         border-bottom: 1px solid rgba(0, 0, 0, 0.12);
     }
 
@@ -75,7 +75,7 @@
         border-bottom: unset;
         opacity: 1;
 
-        &#{$mat-tab-label} {
+        &#{ms.$mat-tab-label} {
             flex-grow: 1;
         }
 

package/lib/layout/components/header/header.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../../../styles/flex' as flex;
 
 adf-layout-header .adf-toolbar-container-row {
     color: var(--theme-header-text-color);
@@ -51,7 +51,7 @@ adf-layout-header .adf-toolbar-container-row {
         padding: 0;
     }
 
-    @include layout-bp(lt-sm) {
+    @include flex.layout-bp(lt-sm) {
         .adf-app-logo,
         .adf-app-title {
             display: none;

package/lib/layout/components/layout-container/layout-container.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../styles/mat-selectors' as ms;
 
 adf-layout-container {
     display: block;
@@ -34,8 +34,8 @@ adf-layout-container {
 }
 
 /* stylelint-disable selector-class-pattern, declaration-no-important */
-#{$mat-sidenav-content},
-#{$mat-drawer-transition} #{$mat-drawer-content} {
+#{ms.$mat-sidenav-content},
+#{ms.$mat-drawer-transition} #{ms.$mat-drawer-content} {
     margin-left: 0 !important;
     margin-right: 0 !important;
     transform: unset !important;

package/lib/layout/components/sidenav-layout/sidenav-layout.component.scss

@@ -1,6 +1,6 @@
 @use '../../../styles/flex' as flex;
-@import '../../../styles/mixins';
-@import 'styles/mat-selectors';
+@use '../../../styles/mixins' as mixins;
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-sidenav-layout {
     &-full-space {
@@ -13,7 +13,7 @@
         width: 100%;
     }
 
-    @include flex-column;
+    @include mixins.flex-column;
 
     width: 100%;
 
@@ -25,15 +25,15 @@
         flex: 0 0;
     }
 
-    #{$mat-drawer-content} {
-        @include flex-column;
+    #{ms.$mat-drawer-content} {
+        @include mixins.flex-column;
 
         position: unset;
         overflow: auto;
     }
 
     .adf-layout-container-sidenav {
-        #{$mat-icon} {
+        #{ms.$mat-icon} {
             vertical-align: sub;
         }
     }

package/lib/login/components/login/login.component.scss

@@ -1,8 +1,8 @@
-@import '../../../styles/mixins';
-@import 'styles/mat-selectors';
+@use '../../../styles/mixins' as mixins;
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-login {
-    @include flex-column;
+    @include mixins.flex-column;
 }
 
 .adf-login-content {
@@ -204,7 +204,7 @@
             padding-bottom: 16px;
             font-size: var(--theme-subheading-2-font-size);
 
-            #{$mat-form-field-infix} {
+            #{ms.$mat-form-field-infix} {
                 min-height: 0;
                 padding-bottom: 3px;
                 padding-top: 20px;
@@ -213,7 +213,7 @@
                     font-size: var(--theme-subheading-2-font-size);
                 }
 
-                #{$mat-floating-label-required} {
+                #{ms.$mat-floating-label-required} {
                     &::after {
                         font-size: var(--theme-subheading-2-font-size);
                     }

package/lib/notifications/components/notification-history.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../styles/mat-selectors' as ms;
 
 $notification-item-height: 72px;
 
@@ -8,7 +8,7 @@ $notification-item-height: 72px;
         -webkit-font-smoothing: subpixel-antialiased;
     }
 
-    &-notification-history-menu_button#{$mat-button} {
+    &-notification-history-menu_button#{ms.$mat-button} {
         border-radius: 90%;
         padding: 0;
         min-width: 40px;
@@ -154,11 +154,11 @@ $notification-item-height: 72px;
     }
 }
 
-#{$mat-menu-panel}.adf-notification-history-menu.adf-notification-history-menu-panel {
+#{ms.$mat-menu-panel}.adf-notification-history-menu.adf-notification-history-menu-panel {
     min-width: 320px;
     max-height: 500px;
 
-    #{$mat-menu-content} {
+    #{ms.$mat-menu-content} {
         padding: 0;
     }
 }

package/lib/search-text/search-text-input.component.scss

@@ -1,11 +1,11 @@
-@import 'styles/mat-selectors';
+@use '../styles/mat-selectors' as ms;
 
 .adf-search-container {
     &:has(.adf-input-form-field-divider) {
         overflow: hidden;
     }
 
-    #{$mat-form-field-subscript-wrapper} {
+    #{ms.$mat-form-field-subscript-wrapper} {
         display: none;
     }
 

package/lib/snackbar-content/snackbar-content.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../styles/mat-selectors' as ms;
 
 :host {
     display: flex;
@@ -20,7 +20,7 @@
         display: flex;
         flex-direction: row;
 
-        #{$mat-button} {
+        #{ms.$mat-button} {
             min-width: 0;
             margin: -8px;
             height: unset;

package/lib/styles/_index.scss

@@ -26,70 +26,70 @@
     // map SCSS variables to expose as CSS variables
     $defaults: (
         // theme colors
-        --theme-primary-color: mat.m2-get-color-from-palette($primary),
-        --theme-primary-color-default-contrast: mat.m2-get-color-from-palette($primary, default-contrast),
-        --theme-header-text-color: mat.m2-get-color-from-palette($primary, default-contrast),
-        --adf-theme-primary-50: mat.m2-get-color-from-palette($primary, 50),
-        --adf-theme-primary-100: mat.m2-get-color-from-palette($primary, 100),
-        --adf-theme-primary-300: mat.m2-get-color-from-palette($primary, 300),
-        --adf-theme-primary-900: mat.m2-get-color-from-palette($primary, 900),
-        --theme-warn-color: mat.m2-get-color-from-palette($warn),
-        --theme-warn-color-a700: mat.m2-get-color-from-palette($warn, A700),
-        --theme-warn-color-default-contrast: mat.m2-get-color-from-palette($warn, default-contrast),
-        --theme-accent-color: mat.m2-get-color-from-palette($accent),
-        --theme-accent-color-a200: mat.m2-get-color-from-palette($accent, A200),
-        --theme-accent-color-default-contrast: mat.m2-get-color-from-palette($accent, default-contrast),
-        --theme-accent-500: mat.m2-get-color-from-palette($accent, 500),
-        --adf-theme-foreground-base-color: mat.m2-get-color-from-palette($foreground, base),
-        --adf-theme-foreground-base-color-065: mat.m2-get-color-from-palette($foreground, base, 0.65),
-        --adf-theme-foreground-base-color-045: mat.m2-get-color-from-palette($foreground, base, 0.45),
-        --adf-theme-foreground-disabled-text-color: mat.m2-get-color-from-palette($foreground, disabled-text),
-        --adf-theme-foreground-divider-color: mat.m2-get-color-from-palette($foreground, divider),
-        --adf-theme-foreground-icon-color: mat.m2-get-color-from-palette($foreground, icon),
-        --adf-theme-foreground-icon-color-054: mat.m2-get-color-from-palette($foreground, icon, 0.54),
-        --adf-theme-foreground-secondary-text-color: mat.m2-get-color-from-palette($foreground, secondary-text),
-        --adf-theme-foreground-text-color: mat.m2-get-color-from-palette($foreground, text),
-        --adf-theme-foreground-text-color-087: mat.m2-get-color-from-palette($foreground, text, 0.87),
-        --adf-theme-foreground-text-color-075: mat.m2-get-color-from-palette($foreground, text, 0.75),
-        --adf-theme-foreground-text-color-064: mat.m2-get-color-from-palette($foreground, text, 0.64),
-        --adf-theme-foreground-text-color-054: mat.m2-get-color-from-palette($foreground, text, 0.54),
-        --adf-theme-foreground-text-color-040: mat.m2-get-color-from-palette($foreground, text, 0.4),
-        --adf-theme-foreground-text-color-027: mat.m2-get-color-from-palette($foreground, text, 0.27),
-        --adf-theme-foreground-text-color-025: mat.m2-get-color-from-palette($foreground, text, 0.25),
-        --adf-theme-foreground-text-color-014: mat.m2-get-color-from-palette($foreground, text, 0.14),
-        --adf-theme-foreground-text-color-007: mat.m2-get-color-from-palette($foreground, text, 0.07),
-        --adf-theme-background-card-color: mat.m2-get-color-from-palette($background, card),
-        --adf-theme-background-card-color-087: mat.m2-get-color-from-palette($background, card, 0.87),
-        --theme-background-color: mat.m2-get-color-from-palette($background, background),
-        --adf-theme-background-dialog-color: mat.m2-get-color-from-palette($background, dialog),
-        --adf-theme-background-hover-color: mat.m2-get-color-from-palette($background, hover),
-        --adf-theme-background-selected-button-color: mat.m2-get-color-from-palette($background, selected-button),
-        --adf-theme-background-status-bar-color: mat.m2-get-color-from-palette($background, status-bar),
-        --adf-theme-background-unselected-chip-color: mat.m2-get-color-from-palette($background, unselected-chip),
+        --theme-primary-color: mat.get-color-from-palette($primary),
+        --theme-primary-color-default-contrast: mat.get-color-from-palette($primary, default-contrast),
+        --theme-header-text-color: mat.get-color-from-palette($primary, default-contrast),
+        --adf-theme-primary-50: mat.get-color-from-palette($primary, 50),
+        --adf-theme-primary-100: mat.get-color-from-palette($primary, 100),
+        --adf-theme-primary-300: mat.get-color-from-palette($primary, 300),
+        --adf-theme-primary-900: mat.get-color-from-palette($primary, 900),
+        --theme-warn-color: mat.get-color-from-palette($warn),
+        --theme-warn-color-a700: mat.get-color-from-palette($warn, A700),
+        --theme-warn-color-default-contrast: mat.get-color-from-palette($warn, default-contrast),
+        --theme-accent-color: mat.get-color-from-palette($accent),
+        --theme-accent-color-a200: mat.get-color-from-palette($accent, A200),
+        --theme-accent-color-default-contrast: mat.get-color-from-palette($accent, default-contrast),
+        --theme-accent-500: mat.get-color-from-palette($accent, 500),
+        --adf-theme-foreground-base-color: mat.get-color-from-palette($foreground, base),
+        --adf-theme-foreground-base-color-065: mat.get-color-from-palette($foreground, base, 0.65),
+        --adf-theme-foreground-base-color-045: mat.get-color-from-palette($foreground, base, 0.45),
+        --adf-theme-foreground-disabled-text-color: mat.get-color-from-palette($foreground, disabled-text),
+        --adf-theme-foreground-divider-color: mat.get-color-from-palette($foreground, divider),
+        --adf-theme-foreground-icon-color: mat.get-color-from-palette($foreground, icon),
+        --adf-theme-foreground-icon-color-054: mat.get-color-from-palette($foreground, icon, 0.54),
+        --adf-theme-foreground-secondary-text-color: mat.get-color-from-palette($foreground, secondary-text),
+        --adf-theme-foreground-text-color: mat.get-color-from-palette($foreground, text),
+        --adf-theme-foreground-text-color-087: mat.get-color-from-palette($foreground, text, 0.87),
+        --adf-theme-foreground-text-color-075: mat.get-color-from-palette($foreground, text, 0.75),
+        --adf-theme-foreground-text-color-064: mat.get-color-from-palette($foreground, text, 0.64),
+        --adf-theme-foreground-text-color-054: mat.get-color-from-palette($foreground, text, 0.54),
+        --adf-theme-foreground-text-color-040: mat.get-color-from-palette($foreground, text, 0.4),
+        --adf-theme-foreground-text-color-027: mat.get-color-from-palette($foreground, text, 0.27),
+        --adf-theme-foreground-text-color-025: mat.get-color-from-palette($foreground, text, 0.25),
+        --adf-theme-foreground-text-color-014: mat.get-color-from-palette($foreground, text, 0.14),
+        --adf-theme-foreground-text-color-007: mat.get-color-from-palette($foreground, text, 0.07),
+        --adf-theme-background-card-color: mat.get-color-from-palette($background, card),
+        --adf-theme-background-card-color-087: mat.get-color-from-palette($background, card, 0.87),
+        --theme-background-color: mat.get-color-from-palette($background, background),
+        --adf-theme-background-dialog-color: mat.get-color-from-palette($background, dialog),
+        --adf-theme-background-hover-color: mat.get-color-from-palette($background, hover),
+        --adf-theme-background-selected-button-color: mat.get-color-from-palette($background, selected-button),
+        --adf-theme-background-status-bar-color: mat.get-color-from-palette($background, status-bar),
+        --adf-theme-background-unselected-chip-color: mat.get-color-from-palette($background, unselected-chip),
         // typography
-        --theme-font-family: mat.m2-font-family($typography),
+        --theme-font-family: mat.font-family($typography),
         --theme-font-weight: normal,
-        --theme-body-1-font-size: mat.m2-font-size($typography, body-2),
-        --theme-body-2-font-size: mat.m2-font-size($typography, subtitle-2),
-        --theme-body-1-line-height: mat.m2-line-height($typography, body-2),
-        --theme-display-1-font-size: mat.m2-font-size($typography, headline-4),
-        --theme-display-3-font-size: mat.m2-font-size($typography, headline-2),
-        --theme-display-4-font-size: mat.m2-font-size($typography, headline-1),
-        --theme-caption-font-size: mat.m2-font-size($typography, caption),
-        --theme-title-font-size: mat.m2-font-size($typography, headline-6),
-        --theme-subheading-1-font-size: mat.m2-font-size($typography, body-1),
-        --theme-subheading-2-font-size: mat.m2-font-size($typography, subtitle-1),
-        --theme-button-font-size: mat.m2-font-size($typography, button),
-        --theme-headline-font-size: mat.m2-font-size($typography, headline-5),
-        --theme-headline-line-height: mat.m2-line-height($typography, headline-5),
+        --theme-body-1-font-size: mat.font-size($typography, body-2),
+        --theme-body-2-font-size: mat.font-size($typography, subtitle-2),
+        --theme-body-1-line-height: mat.line-height($typography, body-2),
+        --theme-display-1-font-size: mat.font-size($typography, headline-4),
+        --theme-display-3-font-size: mat.font-size($typography, headline-2),
+        --theme-display-4-font-size: mat.font-size($typography, headline-1),
+        --theme-caption-font-size: mat.font-size($typography, caption),
+        --theme-title-font-size: mat.font-size($typography, headline-6),
+        --theme-subheading-1-font-size: mat.font-size($typography, body-1),
+        --theme-subheading-2-font-size: mat.font-size($typography, subtitle-1),
+        --theme-button-font-size: mat.font-size($typography, button),
+        --theme-headline-font-size: mat.font-size($typography, headline-5),
+        --theme-headline-line-height: mat.line-height($typography, headline-5),
         --theme-adf-icon-1-font-size: map-get($custom-css-variables, 'theme-adf-icon-1-font-size'),
         --theme-adf-picture-1-font-size: map-get($custom-css-variables, 'theme-adf-picture-1-font-size'),
         --theme-adf-task-footer-font-size: map-get($custom-css-variables, 'theme-adf-task-footer-font-size'),
         --theme-adf-task-title-font-size: map-get($custom-css-variables, 'theme-adf-task-title-font-size'),
         // specific colors
-        --adf-theme-mat-grey-color-a200: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 'A200'),
-        --adf-theme-mat-grey-color-a400: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 'A400'),
-        --adf-theme-mat-grey-color-50: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 50),
+        --adf-theme-mat-grey-color-a200: mat.get-color-from-palette(mat.$grey-palette, A200),
+        --adf-theme-mat-grey-color-a400: mat.get-color-from-palette(mat.$grey-palette, A400),
+        --adf-theme-mat-grey-color-50: mat.get-color-from-palette(mat.$grey-palette, 50),
         // spacing
         --adf-theme-spacing: map-get($custom-css-variables, 'theme-adf-spacing'),
         // components

package/lib/styles/_mat-selectors.scss

@@ -186,3 +186,13 @@ $mat-checkbox-selected: '.mdc-checkbox--selected';
 $mat-checkbox-ripple: '.mat-mdc-checkbox-ripple';
 $mat-list-base: '.mat-mdc-list-base';
 $mat-card-header: '.mat-mdc-card-header';
+$mat-datetimepicker-calendar: '.mat-datetimepicker-calendar';
+$mat-datetimepicker-calendar-header: '.mat-datetimepicker-calendar-header';
+$mat-datetimepicker-calendar-table-header: '.mat-datetimepicker-calendar-table-header';
+$mat-datetimepicker-calendar-header-year: '.mat-datetimepicker-calendar-header-year';
+$mat-datetimepicker-calendar-header-date: '.mat-datetimepicker-calendar-header-date';
+$mat-datetimepicker-calendar-header-time: '.mat-datetimepicker-calendar-header-time';
+$mat-datetimepicker-calendar-content: '.mat-datetimepicker-calendar-content';
+$mat-datetimepicker-calendar-body-disabled: '.mat-datetimepicker-calendar-body-disabled';
+$mat-datetimepicker-toggle: '.mat-datetimepicker-toggle';
+$mat-form-field-underline: '.mat-form-field-underline';

package/lib/styles/_typography.scss

@@ -1,18 +1,18 @@
 @use '@angular/material' as mat;
 
-$alfresco-typography: mat.m2-define-typography-config(
+$alfresco-typography: mat.define-typography-config(
     $font-family: 'Roboto, "Helvetica Neue", sans-serif',
-    $headline-1: mat.m2-define-typography-level(112px, 112px, 300),
-    $headline-2: mat.m2-define-typography-level(56px, 56px, 400),
-    $headline-3: mat.m2-define-typography-level(45px, 48px, 400),
-    $headline-4: mat.m2-define-typography-level(34px, 40px, 400),
-    $headline-5: mat.m2-define-typography-level(24px, 32px, 400),
-    $headline-6: mat.m2-define-typography-level(20px, 32px, 500),
-    $subtitle-1: mat.m2-define-typography-level(16px, 28px, 400),
-    $body-1: mat.m2-define-typography-level(15px, 24px, 400),
-    $subtitle-2: mat.m2-define-typography-level(14px, 24px, 500),
-    $body-2: mat.m2-define-typography-level(14px, 20px, 400),
-    $caption: mat.m2-define-typography-level(12px, 20px, 400),
-    $button: mat.m2-define-typography-level(14px, 14px, 500),
+    $headline-1: mat.define-typography-level(112px, 112px, 300),
+    $headline-2: mat.define-typography-level(56px, 56px, 400),
+    $headline-3: mat.define-typography-level(45px, 48px, 400),
+    $headline-4: mat.define-typography-level(34px, 40px, 400),
+    $headline-5: mat.define-typography-level(24px, 32px, 400),
+    $headline-6: mat.define-typography-level(20px, 32px, 500),
+    $subtitle-1: mat.define-typography-level(16px, 28px, 400),
+    $body-1: mat.define-typography-level(15px, 24px, 400),
+    $subtitle-2: mat.define-typography-level(14px, 24px, 500),
+    $body-2: mat.define-typography-level(14px, 20px, 400),
+    $caption: mat.define-typography-level(12px, 20px, 400),
+    $button: mat.define-typography-level(14px, 14px, 500),
     // Line-height must be unit-less fraction of the font-size.
 );

package/lib/styles/material.theme.scss

@@ -1,18 +1,18 @@
-@import './mat-selectors';
+@use './mat-selectors' as ms;
 
 @mixin adf-material-theme() {
-    #{$mat-expansion-panel} {
-        & #{$mat-expansion-panel-header}.cdk-keyboard-focused,
-        & #{$mat-expansion-panel-header}.cdk-program-focused,
-        &:not(#{$mat-expanded}) #{$mat-expansion-panel-header}:hover {
+    #{ms.$mat-expansion-panel} {
+        & #{ms.$mat-expansion-panel-header}.cdk-keyboard-focused,
+        & #{ms.$mat-expansion-panel-header}.cdk-program-focused,
+        &:not(#{ms.$mat-expanded}) #{ms.$mat-expansion-panel-header}:hover {
             &:not([aria-disabled='true']) {
                 background-color: var(--adf-theme-background-hover-color);
             }
         }
     }
 
-    #{$mat-calendar} {
-        #{$mat-calendar-header} {
+    #{ms.$mat-calendar} {
+        #{ms.$mat-calendar-header} {
             button {
                 color: var(--adf-theme-foreground-text-color-087);
 
@@ -22,68 +22,69 @@
             }
         }
 
-        #{$mat-calendar-content} {
-            #{$mat-calendar-table-header} th {
+        #{ms.$mat-calendar-content} {
+            #{ms.$mat-calendar-table-header} th {
                 color: var(--adf-theme-foreground-text-color-054);
             }
 
-            #{$mat-calendar-body-disabled} > div {
+            #{ms.$mat-calendar-body-disabled} > div {
+                /* stylelint-disable-next-line declaration-no-important */
                 color: var(--adf-theme-foreground-text-color-054) !important;
             }
         }
     }
 
-    .mat-datetimepicker-calendar {
-        .mat-datetimepicker-calendar-header {
-            .mat-datetimepicker-calendar-header-year {
+    #{ms.$mat-datetimepicker-calendar} {
+        #{ms.$mat-datetimepicker-calendar-header} {
+            #{ms.$mat-datetimepicker-calendar-header-year} {
                 opacity: 1;
             }
 
-            .mat-datetimepicker-calendar-header-date {
+            #{ms.$mat-datetimepicker-calendar-header-date} {
                 opacity: 1;
             }
 
-            .mat-datetimepicker-calendar-header-time {
+            #{ms.$mat-datetimepicker-calendar-header-time} {
                 opacity: 1;
             }
         }
 
-        .mat-datetimepicker-calendar-content {
-            .mat-datetimepicker-calendar-table-header th {
+        #{ms.$mat-datetimepicker-calendar-content} {
+            #{ms.$mat-datetimepicker-calendar-table-header} th {
                 color: var(--adf-theme-foreground-text-color-054);
             }
 
-            .mat-datetimepicker-calendar-body-disabled > div {
+            #{ms.$mat-datetimepicker-calendar-body-disabled} > div {
                 color: var(--adf-theme-foreground-text-color-054);
             }
         }
     }
 
-    #{$mat-snackbar} {
-        &#{$mat-snack-bar-container} {
+    #{ms.$mat-snackbar} {
+        &#{ms.$mat-snack-bar-container} {
             margin: 24px;
 
-            #{$mat-snackbar-label} {
+            #{ms.$mat-snackbar-label} {
                 line-height: unset;
             }
         }
     }
 
-    #{$mat-input-element} {
+    #{ms.$mat-input-element} {
         &:focus::placeholder {
             color: var(--theme-primary-color);
         }
     }
 
-    #{$mat-datetimepicker-dialog} {
-        #{$mat-dialog-container} {
-            #{$mat-dialog-surface} {
+    #{ms.$mat-datetimepicker-dialog} {
+        #{ms.$mat-dialog-container} {
+            #{ms.$mat-dialog-surface} {
                 padding: 0;
             }
         }
     }
 
-    #{$mat-button-base} {
+    #{ms.$mat-button-base} {
         -webkit-font-smoothing: antialiased;
     }
 }