@alfresco/adf-core 8.4.0-19302006691 → 8.4.0-19336680353

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

@@ -20,14 +20,14 @@
     }
 
     &-userinfo-pic {
-        background: var(--mat-sys-primary);
+        background: var(--adf-theme-primary-300);
         display: inline-block;
         width: 40px;
         height: 40px;
         border-radius: 100px;
         text-align: center;
         font-weight: bolder;
-        font-size: var(--mat-sys-title-large-size);
+        font-size: var(--theme-adf-picture-1-font-size);
         text-transform: uppercase;
         vertical-align: middle;
         line-height: 40px;
@@ -75,7 +75,7 @@
     }
 
     &-userinfo-profile-picture {
-        background: var(--mat-sys-primary);
+        background: var(--adf-theme-primary-300);
         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(--mat-sys-title-medium-size) !default;
+$adf-info-drawer-layout-title-font-size: var(--theme-title-font-size) !default;
 $adf-info-drawer-icon-size: 48px !default;
 $adf-info-drawer-icon-size-half: 24px !default;
 
@@ -15,6 +15,7 @@ $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} {
@@ -50,12 +51,14 @@ $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);
                 }
             }
         }
@@ -77,6 +80,7 @@ $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,7 +65,13 @@
 
 /* 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,12 +90,26 @@
         }
 
         &--active {
-            color: var(--mat-sys-primary);
+            color: var(--theme-primary-color);
+            background-color: var(--adf-theme-background-card-color);
             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(--mat-sys-on-primary);
+    color: var(--theme-header-text-color);
     position: relative;
     padding: 0 24px;
 
@@ -36,14 +36,14 @@ adf-layout-header .adf-toolbar-container-row {
         margin: 0 5px;
 
         & > div {
-            background-color: var(--mat-sys-surface);
+            background-color: var(--adf-theme-background-card-color);
         }
     }
 
     .adf-header-delimiter {
         height: 24px;
         width: 2px;
-        background-color: var(--mat-sys-on-primary);
+        background-color: var(--theme-primary-color-default-contrast);
     }
 
     .adf-userinfo-container {

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

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

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

@@ -8,7 +8,10 @@
             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 {
@@ -20,11 +23,11 @@
 
     &-sidebar-action-menu-icon {
         margin: 18px 0 0 20px;
-        color: var(--mat-sys-on-surface);
+        color: var(--adf-theme-foreground-text-color-054);
         cursor: pointer;
 
         &:hover {
-            color: var(--mat-sys-primary);
+            color: var(--theme-primary-color);
         }
     }
 
@@ -33,11 +36,14 @@
         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,3 +1,4 @@
+@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,4 +1,5 @@
 @use '../../../styles/mixins' as mixins;
+@use '../../../styles/mat-selectors' as ms;
 
 .adf-login {
     @include mixins.flex-column;
@@ -55,14 +56,15 @@
 
     .adf-login-card-wide {
         border-radius: 8px;
-        box-shadow: var(--mat-sys-level2);
+        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);
         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);
         }
@@ -76,10 +78,10 @@
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
-        color: var(--mat-sys-error);
+        color: var(--theme-warn-color);
         padding: 0;
         margin-bottom: 4px;
-        font-size: var(--mat-sys-body-small-size);
+        font-size: var(--theme-caption-font-size);
     }
 
     .adf-error-message .adf-error-icon {
@@ -109,6 +111,26 @@
     .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 {
@@ -141,20 +163,32 @@
 
     .adf-is-active {
         background-color: transparent;
-        font-size: var(--mat-sys-body-small-size);
+        font-size: var(--theme-caption-font-size);
         font-weight: normal;
         line-height: 1.33;
-        color: var(--mat-sys-error);
+        color: var(--theme-warn-color);
     }
 
     .adf-copyright {
         min-width: 320px;
         text-align: center;
         padding: 16px 0;
-        font-size: var(--mat-sys-body-small-size);
+        font-size: var(--theme-caption-font-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;
@@ -168,19 +202,43 @@
         .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(--mat-sys-error);
-        font-size: var(--mat-sys-body-small-size);
+        color: var(--theme-warn-color);
+        font-size: var(--theme-caption-font-size);
     }
 
     .adf-login-error {
-        color: var(--mat-sys-error);
+        color: var(--theme-warn-color);
         position: absolute;
-        font-size: var(--mat-sys-body-small-size);
+        font-size: var(--theme-caption-font-size);
         margin-top: -12px;
         display: block;
     }
@@ -198,7 +256,7 @@
     }
 
     .adf-login-remember-me:has(.adf-login-remember-me-label) {
-        color: var(--mat-sys-on-surface);
+        color: var(--adf-theme-foreground-text-color);
     }
 
     .adf-login-action-container {

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

@@ -20,6 +20,7 @@ $notification-item-height: 72px;
             font-size: 24px;
             height: 24px;
             width: 24px;
+            color: var(--theme-text-color);
         }
     }
 
@@ -79,19 +80,31 @@ $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;
@@ -104,7 +117,7 @@ $notification-item-height: 72px;
         }
 
         .adf-notification-history-menu-date.adf-notification-history-menu-text:is(p) {
-            font-size: var(--mat-sys-body-small-size);
+            font-size: var(--theme-caption-font-size);
             text-indent: 3px;
         }
 
@@ -115,16 +128,17 @@ $notification-item-height: 72px;
 
     &-notification-initiator-pic {
         min-width: 40px;
-        background: var(--mat-sys-secondary);
+        background: var(--theme-accent-color);
         display: inline-block;
         height: 40px;
         border-radius: 100px;
         text-align: center;
         font-weight: bolder;
-        font-size: var(--mat-sys-title-large-size);
+        font-size: var(--theme-adf-picture-1-font-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,6 +9,7 @@ $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;
@@ -55,6 +56,11 @@ $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,9 +18,14 @@
         &-search-fixed-text {
             line-height: normal;
         }
+
+        &-clear-search-button {
+            font-size: var(--theme-button-font-size);
+            cursor: pointer;
+        }
     }
 
     .adf-highlight {
-        color: var(--mat-sys-primary);
+        color: var(--adf-theme-primary-900);
     }
 }

package/lib/styles/_globals.scss

@@ -6,7 +6,30 @@
         & #{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(--mat-sys-surface-container);
+                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;
             }
         }
     }
@@ -28,11 +51,11 @@
 
         #{ms.$mat-datetimepicker-calendar-content} {
             #{ms.$mat-datetimepicker-calendar-table-header} th {
-                color: var(--mat-sys-on-surface);
+                color: var(--adf-theme-foreground-text-color-054);
             }
 
             #{ms.$mat-datetimepicker-calendar-body-disabled} > div {
-                color: var(--mat-sys-on-surface);
+                color: var(--adf-theme-foreground-text-color-054);
             }
         }
     }
@@ -47,6 +70,12 @@
         }
     }
 
+    #{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(--mat-sys-headline-small-size);
+    font-size: var(--theme-headline-font-size);
     line-height: 1;
     letter-spacing: normal;
     text-transform: none;

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

@@ -1,4 +1,5 @@
 .adf-empty-content {
+    color: var(--adf-theme-foreground-text-color-054);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -7,13 +8,13 @@
     width: 100%;
 
     &__icon > *:first-child {
-        font-size: var(--mat-sys-display-medium-size);
-        height: var(--mat-sys-display-medium-size);
-        width: var(--mat-sys-display-medium-size);
+        font-size: var(--theme-display-3-font-size);
+        height: var(--theme-display-3-font-size);
+        width: var(--theme-display-3-font-size);
     }
 
     &__title {
-        font-size: var(--mat-sys-title-large-size);
+        font-size: var(--theme-adf-task-title-font-size);
         font-weight: 600;
         line-height: 0;
         white-space: normal;
@@ -23,6 +24,7 @@
 
     &__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,6 +1,7 @@
 @use '../../styles/flex' as flex;
 
 .adf-error-content {
+    color: var(--adf-theme-foreground-text-color-054);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -48,11 +49,11 @@
         }
 
         &-title {
-            font-size: var(--mat-sys-headline-small-size);
+            font-size: var(--theme-headline-font-size);
         }
 
         &-description {
-            font-size: var(--mat-sys-title-small-size);
+            font-size: var(--theme-subheading-2-font-size);
         }
     }
 }

package/lib/toolbar/toolbar.component.scss

@@ -10,7 +10,10 @@
     }
 
     .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,10 +1,12 @@
+@use '../../../styles/mat-selectors' as ms;
+
 .adf-image-viewer {
     width: 100%;
 
     .adf-image-container {
         &:focus {
             outline-offset: -1px;
-            outline: 1px solid var(--mat-sys-primary);
+            outline: 1px solid var(--theme-accent-color-a200);
         }
 
         display: flex;
@@ -31,6 +33,15 @@
         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;
         }
@@ -44,7 +55,8 @@
             cursor: default;
             width: 79px;
             height: 24px;
-            border: 1px solid var(--mat-sys-outline);
+            font-size: var(--theme-body-1-font-size);
+            border: 1px solid var(--adf-theme-foreground-text-color-007);
             text-align: center;
             line-height: 24px;
             margin-left: 4px;