@alfresco/adf-core 8.4.0-19060916420 → 8.4.0-19063861366

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

@@ -20,14 +20,14 @@
     }
 
     &-userinfo-pic {
-        background: var(--adf-theme-primary-300);
+        background: var(--mat-sys-primary);
         display: inline-block;
         width: 40px;
         height: 40px;
         border-radius: 100px;
         text-align: center;
         font-weight: bolder;
-        font-size: var(--theme-adf-picture-1-font-size);
+        font-size: var(--mat-sys-title-large-size);
         text-transform: uppercase;
         vertical-align: middle;
         line-height: 40px;
@@ -75,7 +75,7 @@
     }
 
     &-userinfo-profile-picture {
-        background: var(--adf-theme-primary-300);
+        background: var(--mat-sys-primary);
         background-size: cover;
         border-radius: 50%;
         height: 80px;
@@ -91,7 +91,7 @@
     }
 }
 
-@media only screen and (device-width >= 480px) {
+@media only screen and (device-width >=480px) {
     .adf-identity-userinfo-menu.adf-userinfo-menu {
         max-height: 450px;
         min-width: 450px;

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

@@ -1,7 +1,7 @@
 @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-layout-title-font-size: var(--mat-sys-title-medium-size) !default;
 $adf-info-drawer-icon-size: 48px !default;
 $adf-info-drawer-icon-size-half: 24px !default;
 
@@ -15,7 +15,6 @@ $adf-info-drawer-icon-size-half: 24px !default;
 
         overflow: auto;
         width: 100%;
-        background-color: var(--theme-card-background-color);
         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
 
         & #{ms.$mat-tab-label-text} {
@@ -51,14 +50,12 @@ $adf-info-drawer-icon-size-half: 24px !default;
                 letter-spacing: 0.15px;
                 text-align: left;
                 align-items: center;
-                color: var(--adf-theme-foreground-text-color-054);
                 overflow: hidden;
 
                 & > div {
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
-                    color: var(--adf-metadata-property-panel-title-color);
                 }
             }
         }
@@ -80,7 +77,6 @@ $adf-info-drawer-icon-size-half: 24px !default;
                 .adf-manage-versions-no-permission {
                     margin: 0;
                     padding: $adf-info-drawer-icon-size-half;
-                    color: var(--adf-theme-foreground-text-color-054);
                     text-align: center;
                     display: flex;
                     flex-direction: column;

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

@@ -65,13 +65,7 @@
 
 /* stylelint-disable-next-line no-descending-specificity */
 .adf-info-drawer-tabs {
-    #{ms.$mat-tab-label-container} {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-    }
-
     div[role='tab'].adf-info-drawer-tab {
-        color: var(--theme-accent-color);
-        background-color: var(--adf-theme-background-card-color);
         border-bottom: unset;
         opacity: 1;
 
@@ -84,26 +78,12 @@
         }
 
         &--active {
-            color: var(--theme-primary-color);
-            background-color: var(--adf-theme-background-card-color);
+            color: var(--mat-sys-primary);
             border-bottom: 1px solid unset;
 
             &:focus {
-                color: var(--adf-theme-foreground-text-color);
                 border-bottom: unset;
             }
         }
-
-        &:hover:not([class*='--disabled'], [class*='--active']) {
-            color: var(--theme-accent-color);
-            background-color: var(--adf-theme-background-card-color);
-            border-bottom: unset;
-        }
-
-        &--disabled {
-            color: var(--adf-info-drawer-tab-disabled-color);
-            background-color: var(--adf-info-drawer-tab-disabled-background);
-            border-bottom: var(--adf-info-drawer-tab-disabled-bottom-line);
-        }
     }
 }

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

@@ -1,7 +1,7 @@
 @use '../../../styles/flex' as flex;
 
 adf-layout-header .adf-toolbar-container-row {
-    color: var(--theme-header-text-color);
+    color: var(--mat-sys-on-primary);
     position: relative;
     padding: 0 24px;
 
@@ -36,14 +36,14 @@ adf-layout-header .adf-toolbar-container-row {
         margin: 0 5px;
 
         & > div {
-            background-color: var(--adf-theme-background-card-color);
+            background-color: var(--mat-sys-surface);
         }
     }
 
     .adf-header-delimiter {
         height: 24px;
         width: 2px;
-        background-color: var(--theme-primary-color-default-contrast);
+        background-color: var(--mat-sys-on-primary);
     }
 
     .adf-userinfo-container {

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

@@ -8,9 +8,7 @@ adf-layout-container {
 
     .adf-layout-container-sidenav {
         overflow: hidden;
-        border-right: 1px solid var(--adf-theme-foreground-text-color-007);
-        background-color: var(--theme-background-color);
-        color: var(--adf-theme-foreground-text-color);
+        border-right: 1px solid var(--mat-sys-outline-variant);
     }
 }
 

package/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss

@@ -8,10 +8,7 @@
             box-shadow: none;
             height: 37.5px;
             font-weight: bold;
-            background-color: var(--theme-primary-color);
-            color: var(--theme-primary-color-default-contrast);
             border-radius: 4px;
-
         }
 
         &-text {
@@ -23,11 +20,11 @@
 
     &-sidebar-action-menu-icon {
         margin: 18px 0 0 20px;
-        color: var(--adf-theme-foreground-text-color-054);
+        color: var(--mat-sys-on-surface);
         cursor: pointer;
 
         &:hover {
-            color: var(--theme-primary-color);
+            color: var(--mat-sys-primary);
         }
     }
 
@@ -36,14 +33,11 @@
         letter-spacing: -0.4px;
 
         button {
-            font-size: var(--theme-body-1-font-size);
-            color: var(--adf-theme-foreground-text-color-087);
             text-align: left;
             line-height: 1.5;
             letter-spacing: -0.4px;
 
             &:hover {
-                color: var(--theme-primary-color);
                 opacity: inherit;
             }
         }

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

@@ -1,4 +1,3 @@
-@use '../../../styles/flex' as flex;
 @use '../../../styles/mixins' as mixins;
 @use '../../../styles/mat-selectors' as ms;
 

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

@@ -1,5 +1,4 @@
 @use '../../../styles/mixins' as mixins;
-@use '../../../styles/mat-selectors' as ms;
 
 .adf-login {
     @include mixins.flex-column;
@@ -56,15 +55,14 @@
 
     .adf-login-card-wide {
         border-radius: 8px;
-        background-color: var(--adf-theme-background-dialog-color);
-        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+        box-shadow: var(--mat-sys-level2);
         width: 450px;
         min-width: 320px;
         padding: 21px 64px 34px;
         box-sizing: border-box;
     }
 
-    @media screen and (width <= 482px) {
+    @media screen and (width <=482px) {
         .adf-login-card-wide {
             width: calc(100% - 32px);
         }
@@ -78,10 +76,10 @@
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
-        color: var(--theme-warn-color);
+        color: var(--mat-sys-error);
         padding: 0;
         margin-bottom: 4px;
-        font-size: var(--theme-caption-font-size);
+        font-size: var(--mat-sys-body-small-size);
     }
 
     .adf-error-message .adf-error-icon {
@@ -111,26 +109,6 @@
     .adf-login-button {
         width: 100%;
         height: 36px;
-        line-height: normal;
-        box-shadow: none;
-    }
-
-    .adf-login-button-label {
-        color: var(--theme-accent-color-default-contrast);
-        font-weight: bolder;
-    }
-
-    .adf-login-button.adf-isChecking {
-        background-color: #e0f7fa;
-    }
-
-    .adf-login-button.adf-isChecking .adf-login-button-label {
-        color: var(--theme-primary-color);
-    }
-
-    .adf-login-button.adf-isWelcome {
-        background-color: var(--theme-primary-color);
-        color: var(--theme-primary-color-default-contrast);
     }
 
     .adf-login-button.adf-isWelcome .adf-welcome-icon {
@@ -163,32 +141,20 @@
 
     .adf-is-active {
         background-color: transparent;
-        font-size: var(--theme-caption-font-size);
+        font-size: var(--mat-sys-body-small-size);
         font-weight: normal;
         line-height: 1.33;
-        color: var(--theme-warn-color);
+        color: var(--mat-sys-error);
     }
 
     .adf-copyright {
         min-width: 320px;
         text-align: center;
         padding: 16px 0;
-        font-size: var(--theme-caption-font-size);
+        font-size: var(--mat-sys-body-small-size);
         opacity: 0.54;
     }
 
-    .adf-login-input:is(input) {
-        font-size: var(--theme-subheading-2-font-size);
-    }
-
-    .adf-login-form-field .adf-login-password-icon.adf-login-form-password-icon {
-        color: var(--adf-theme-foreground-text-color);
-        font-size: var(--theme-subheading-2-font-size);
-        top: 9px;
-        position: relative;
-        left: 7px;
-    }
-
     .adf-login-controls:has(div) {
         padding: 0 0 26px;
         overflow: visible;
@@ -202,43 +168,19 @@
         .adf-login__field {
             display: block;
             padding-bottom: 16px;
-            font-size: var(--theme-subheading-2-font-size);
-
-            #{ms.$mat-form-field-infix} {
-                min-height: 0;
-                padding-bottom: 3px;
-                padding-top: 20px;
-
-                .adf-login-form-input-label {
-                    font-size: var(--theme-subheading-2-font-size);
-                }
-
-                #{ms.$mat-floating-label-required} {
-                    &::after {
-                        font-size: var(--theme-subheading-2-font-size);
-                    }
-                }
-            }
-
-            & input:-webkit-autofill {
-                /* stylelint-disable */
-                -webkit-box-shadow: 0 0 0 1000px var(--adf-theme-background-dialog-color) inset;
-                -webkit-text-fill-color: var(--adf-theme-foreground-text-color);
-                /* stylelint-enable */
-            }
         }
     }
 
     .adf-login-validation {
         background-color: transparent;
-        color: var(--theme-warn-color);
-        font-size: var(--theme-caption-font-size);
+        color: var(--mat-sys-error);
+        font-size: var(--mat-sys-body-small-size);
     }
 
     .adf-login-error {
-        color: var(--theme-warn-color);
+        color: var(--mat-sys-error);
         position: absolute;
-        font-size: var(--theme-caption-font-size);
+        font-size: var(--mat-sys-body-small-size);
         margin-top: -12px;
         display: block;
     }
@@ -256,7 +198,7 @@
     }
 
     .adf-login-remember-me:has(.adf-login-remember-me-label) {
-        color: var(--adf-theme-foreground-text-color);
+        color: var(--mat-sys-on-surface);
     }
 
     .adf-login-action-container {

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

@@ -20,7 +20,6 @@ $notification-item-height: 72px;
             font-size: 24px;
             height: 24px;
             width: 24px;
-            color: var(--theme-text-color);
         }
     }
 
@@ -80,31 +79,19 @@ $notification-item-height: 72px;
                         p {
                             line-height: normal;
                             margin: 0;
-                            color: var(--theme-sidenav-user-menu-color);
                         }
                     }
                 }
             }
         }
 
-        .adf-notification-history-menu-item:focus {
-            outline: none;
-            background: var(--adf-theme-background-hover-color);
-        }
-
-        .adf-notification-history-menu-item:hover {
-            background-color: var(--adf-theme-background-hover-color);
-        }
-
         .adf-notification-history-menu-message:is(p) {
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
-            font-size: var(--theme-body-1-font-size);
         }
 
         .adf-notification-history-item-list .adf-notification-history-menu-no-message-text {
-            color: var(--theme-sidenav-user-menu-color);
             margin: 0;
             padding: 12px 16px;
             opacity: inherit;
@@ -117,7 +104,7 @@ $notification-item-height: 72px;
         }
 
         .adf-notification-history-menu-date.adf-notification-history-menu-text:is(p) {
-            font-size: var(--theme-caption-font-size);
+            font-size: var(--mat-sys-body-small-size);
             text-indent: 3px;
         }
 
@@ -128,17 +115,16 @@ $notification-item-height: 72px;
 
     &-notification-initiator-pic {
         min-width: 40px;
-        background: var(--theme-accent-color);
+        background: var(--mat-sys-secondary);
         display: inline-block;
         height: 40px;
         border-radius: 100px;
         text-align: center;
         font-weight: bolder;
-        font-size: var(--theme-adf-picture-1-font-size);
+        font-size: var(--mat-sys-title-large-size);
         text-transform: uppercase;
         vertical-align: middle;
         line-height: 40px;
-        color: var(--adf-theme-mat-grey-color-a200);
     }
 
     &-notification-history-load-more {

package/lib/pagination/pagination.component.scss

@@ -9,7 +9,6 @@ $adf-pagination-line-height: 20px;
     border-top: $adf-pagination-border;
     height: $adf-pagination-height;
     line-height: $adf-pagination-line-height;
-    color: var(--adf-theme-foreground-text-color);
 
     &__block {
         display: flex;
@@ -56,11 +55,6 @@ $adf-pagination-line-height: 20px;
     &__current-page {
         margin-right: 5px;
 
-        &,
-        & + button {
-            color: var(--adf-theme-foreground-text-color);
-        }
-
         & + button {
             margin-left: -10px;
         }

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

@@ -18,14 +18,9 @@
         &-search-fixed-text {
             line-height: normal;
         }
-
-        &-clear-search-button {
-            font-size: var(--theme-button-font-size);
-            cursor: pointer;
-        }
     }
 
     .adf-highlight {
-        color: var(--adf-theme-primary-900);
+        color: var(--mat-sys-primary);
     }
 }

package/lib/styles/_globals.scss

@@ -6,30 +6,7 @@
         & #{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);
-            }
-        }
-    }
-
-    #{ms.$mat-calendar} {
-        #{ms.$mat-calendar-header} {
-            button {
-                color: var(--adf-theme-foreground-text-color-087);
-
-                &:disabled {
-                    color: var(--adf-theme-foreground-text-color-054);
-                }
-            }
-        }
-
-        #{ms.$mat-calendar-content} {
-            #{ms.$mat-calendar-table-header} th {
-                color: var(--adf-theme-foreground-text-color-054);
-            }
-
-            #{ms.$mat-calendar-body-disabled} > div {
-                /* stylelint-disable-next-line declaration-no-important */
-                color: var(--adf-theme-foreground-text-color-054) !important;
+                background-color: var(--mat-sys-surface-container);
             }
         }
     }
@@ -51,11 +28,11 @@
 
         #{ms.$mat-datetimepicker-calendar-content} {
             #{ms.$mat-datetimepicker-calendar-table-header} th {
-                color: var(--adf-theme-foreground-text-color-054);
+                color: var(--mat-sys-on-surface);
             }
 
             #{ms.$mat-datetimepicker-calendar-body-disabled} > div {
-                color: var(--adf-theme-foreground-text-color-054);
+                color: var(--mat-sys-on-surface);
             }
         }
     }
@@ -70,12 +47,6 @@
         }
     }
 
-    #{ms.$mat-input-element} {
-        &:focus::placeholder {
-            color: var(--theme-primary-color);
-        }
-    }
-
     #{ms.$mat-datetimepicker-dialog} {
         #{ms.$mat-dialog-container} {
             #{ms.$mat-dialog-surface} {

package/lib/styles/_mixins.scss

@@ -14,7 +14,7 @@
     font-family: 'Material Icons';
     font-weight: normal;
     font-style: normal;
-    font-size: var(--theme-headline-font-size);
+    font-size: var(--mat-sys-headline-small-size);
     line-height: 1;
     letter-spacing: normal;
     text-transform: none;

package/lib/templates/empty-content/empty-content.component.scss

@@ -1,5 +1,4 @@
 .adf-empty-content {
-    color: var(--adf-theme-foreground-text-color-054);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -8,13 +7,13 @@
     width: 100%;
 
     &__icon > *:first-child {
-        font-size: var(--theme-display-3-font-size);
-        height: var(--theme-display-3-font-size);
-        width: var(--theme-display-3-font-size);
+        font-size: var(--mat-sys-display-medium-size);
+        height: var(--mat-sys-display-medium-size);
+        width: var(--mat-sys-display-medium-size);
     }
 
     &__title {
-        font-size: var(--theme-adf-task-title-font-size);
+        font-size: var(--mat-sys-title-large-size);
         font-weight: 600;
         line-height: 0;
         white-space: normal;
@@ -24,7 +23,6 @@
 
     &__subtitle,
     &__text {
-        font-size: var(--theme-body-1-font-size);
         font-weight: 300;
         line-height: inherit;
         white-space: normal;

package/lib/templates/error-content/error-content.component.scss

@@ -1,7 +1,6 @@
 @use '../../styles/flex' as flex;
 
 .adf-error-content {
-    color: var(--adf-theme-foreground-text-color-054);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -49,11 +48,11 @@
         }
 
         &-title {
-            font-size: var(--theme-headline-font-size);
+            font-size: var(--mat-sys-headline-small-size);
         }
 
         &-description {
-            font-size: var(--theme-subheading-2-font-size);
+            font-size: var(--mat-sys-title-small-size);
         }
     }
 }

package/lib/toolbar/toolbar.component.scss

@@ -10,10 +10,7 @@
     }
 
     .adf-toolbar-container.adf-toolbar-container-row {
-        border: 1px solid var(--adf-theme-foreground-text-color-007);
-        color: var(--adf-theme-foreground-text-color-054);
         height: 64px;
-        font-size: var(--theme-body-1-font-size);
         white-space: normal;
         padding: 0 16px;
     }

package/lib/viewer/components/img-viewer/img-viewer.component.scss

@@ -1,12 +1,10 @@
-@use '../../../styles/mat-selectors' as ms;
-
 .adf-image-viewer {
     width: 100%;
 
     .adf-image-container {
         &:focus {
             outline-offset: -1px;
-            outline: 1px solid var(--theme-accent-color-a200);
+            outline: 1px solid var(--mat-sys-primary);
         }
 
         display: flex;
@@ -33,15 +31,6 @@
         left: 50%;
         transform: translateX(-50%);
 
-        .adf-toolbar #{ms.$mat-toolbar} {
-            max-height: 48px;
-            background-color: var(--adf-theme-background-card-color);
-            border-width: 0;
-            border-radius: 2px;
-            /* stylelint-disable-next-line */
-            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
-        }
-
         .adf-main-toolbar {
             display: inline-block;
         }
@@ -55,8 +44,7 @@
             cursor: default;
             width: 79px;
             height: 24px;
-            font-size: var(--theme-body-1-font-size);
-            border: 1px solid var(--adf-theme-foreground-text-color-007);
+            border: 1px solid var(--mat-sys-outline);
             text-align: center;
             line-height: 24px;
             margin-left: 4px;