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

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

@@ -1,5 +1,8 @@
 .adf-display-text-widget {
     white-space: pre-wrap;
+    font-size: var(--adf-readonly-text-font-size, var(--adf-form-label-font-size, var(--theme-body-1-font-size)));
+    font-weight: var(--adf-readonly-text-font-weight, var(--adf-form-label-font-weight, var(--theme-font-weight)));
+    color: var(--adf-readonly-text-color, var(--adf-form-label-color, var(--theme-text-color)));
     line-height: normal;
     word-break: break-word;
     position: relative;

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

@@ -2,6 +2,12 @@
 /* stylelint-disable declaration-no-important */
 @use '../../../styles/mat-selectors' as ms;
 
+ul > li > form-field > .adf-focus {
+    .adf-label {
+        color: var(--theme-primary-color);
+    }
+}
+
 .adf {
     &-error-container {
         height: 20px;
@@ -11,25 +17,55 @@
     &-error-text {
         padding: 1px;
         height: 16px;
-        font-size: var(--mat-sys-body-small-size);
+        font-size: var(--theme-caption-font-size);
         line-height: 1.33;
-        color: var(--mat-sys-error);
+        color: var(--theme-warn-color);
     }
 
     &-error-icon {
-        font-size: var(--mat-sys-label-large-size);
-        color: var(--mat-sys-error);
+        font-size: var(--theme-adf-icon-1-font-size);
+        color: var(--theme-warn-color);
+    }
+
+    &-label {
+        color: var(--adf-theme-foreground-secondary-text-color);
     }
 
     &-asterisk {
         padding-left: 2px;
-        color: var(--mat-sys-error);
+        color: var(--theme-warn-color);
     }
 
     &-invalid {
+        #{ms.$mat-checkbox} {
+            padding-bottom: 12px;
+        }
+
+        #{ms.$mat-line-ripple} {
+            background-color: var(--theme-warn-color) !important;
+        }
+
+        #{ms.$mat-select} {
+            &-arrow {
+                color: var(--adf-theme-foreground-secondary-text-color) !important;
+            }
+        }
+
         .adf-file {
-            border-color: var(--mat-sys-error);
+            border-color: var(--theme-warn-color);
+        }
+
+        #{ms.$mat-form-field-prefix} {
+            color: var(--adf-theme-foreground-secondary-text-color);
         }
+
+        .adf-input {
+            border-color: var(--theme-warn-color);
+        }
+    }
+
+    &-left-label {
+        color: var(--adf-theme-foreground-secondary-text-color);
     }
 }
 

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

@@ -1,9 +1,11 @@
 .adf-container-widget-header__text {
-    border-bottom: 1px solid var(--mat-sys-outline-variant);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.87);
     padding-bottom: 10px;
     cursor: default;
     user-select: none;
-    font-size: var(--mat-sys-title-small-size);
+    font-size: var(--adf-header-font-size);
+    font-weight: var(--adf-header-font-weight);
+    color: var(--adf-header-color);
     line-height: normal;
 
     &.adf-collapsible {

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

@@ -3,6 +3,6 @@
     border-top: 0.8438em solid transparent;
 
     a {
-        color: var(--mat-sys-primary);
+        color: var(--theme-primary-color);
     }
 }

package/lib/form/components/widgets/index.d.ts

@@ -48,5 +48,6 @@ export * from './base-viewer/base-viewer.widget';
 export * from './text/text-mask.component';
 export * from './display-text';
 export * from './header';
+export * from './repeat/repeat.widget';
 export declare const WIDGET_DIRECTIVES: readonly [typeof UnknownWidgetComponent, typeof TextWidgetComponent, typeof NumberWidgetComponent, typeof DecimalWidgetComponent, typeof CheckboxWidgetComponent, typeof MultilineTextWidgetComponentComponent, typeof HyperlinkWidgetComponent, typeof DisplayTextWidgetComponent, typeof DateWidgetComponent, typeof AmountWidgetComponent, typeof ErrorWidgetComponent, typeof DateTimeWidgetComponent, typeof JsonWidgetComponent, typeof BaseViewerWidgetComponent];
 export declare const MASK_DIRECTIVE: readonly [typeof InputMaskDirective];

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

@@ -15,7 +15,7 @@
         margin-top: -20px;
         min-height: 24px;
         min-width: 1px;
-        font-size: var(--mat-sys-body-small-size);
+        font-size: var(--theme-caption-font-size);
         line-height: 14px;
         overflow: hidden;
         transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);

package/lib/form/components/widgets/repeat/repeat.widget.d.ts

@@ -0,0 +1,10 @@
+import { ContainerModel } from '../core/container.model';
+import * as i0 from "@angular/core";
+export declare class RepeatWidgetComponent {
+    element: ContainerModel;
+    isEditor: boolean;
+    addRow(): void;
+    getAddedRowsCount(): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RepeatWidgetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RepeatWidgetComponent, "adf-repeat-widget", never, { "element": { "alias": "element"; "required": false; }; "isEditor": { "alias": "isEditor"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

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

@@ -0,0 +1,25 @@
+.adf-container-widget {
+    &-repeat__text {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.87);
+        padding-bottom: 10px;
+        cursor: default;
+        user-select: none;
+        font-size: var(--adf-header-font-size);
+        font-weight: var(--adf-header-font-weight);
+        color: var(--adf-header-color);
+        line-height: normal;
+
+        &.adf-collapsible {
+            cursor: pointer;
+        }
+    }
+
+    &-row-action {
+        margin-left: 10px;
+    }
+
+    &-row-limit {
+        color: rgba(0, 0, 0, 0.67);
+        font-size: 12px;
+    }
+}

package/lib/header/header.component.scss

@@ -1,31 +1,31 @@
 .adf-header {
     display: flex;
     flex-direction: column;
-    width: 100%;
-    height: 100%;
+    width: var(--adf-header-width, 100%);
+    height: var(--adf-header-height, 100%);
 
     .adf-toolbar {
-        width: 100%;
-        height: 100%;
+        width: var(--adf-toolbar-width, 100%);
+        height: var(--adf-toolbar-height, 100%);
 
         .adf-toolbar-title {
-            width: 100%;
+            width: var(--adf-toolbar-title-width, 100%);
             align-items: center;
-            font-size: var(--mat-sys-title-medium-size);
-            font-weight: var(--mat-sys-title-medium-weight);
-            color: var(--mat-sys-on-surface);
-            gap: 25px;
+            font-size: var(--adf-toolbar-title-font-size, 16px);
+            font-weight: var(--adf-toolbar-title-font-weight, 500);
+            color: var(--adf-toolbar-title-color, #000);
+            gap: var(--adf-toolbar-title-gap, 25px);
         }
 
         .adf-toolbar-logo {
-            height: 36px;
-            width: 36px;
+            height: var(--adf-header-logo-height, 36px);
+            width: var(--adf-header-logo-width, --adf-header-logo-height);
         }
 
         .adf-toolbar-actions > * {
             display: flex;
             align-items: center;
-            gap: 10px;
+            gap: var(--adf-toolbar-actions-gap, 10px);
         }
 
         .adf-toolbar-container.adf-toolbar-container-row {

package/lib/header/navbar/navbar-item.component.scss

@@ -1,11 +1,19 @@
 .adf-navbar-item {
     .adf-navbar-item-btn {
-        height: 100%;
+        height: var(--adf-navbar-btn-height, 100%);
+        background-color: var(--adf-navbar-btn-background-color, inherit);
+        font-size: var(--adf-navbar-btn-font-size, 16px);
+        font-weight: var(--adf-navbar-btn-font-weight, 500);
+        color: var(--adf-navbar-btn-color, #000);
+        opacity: var(--adf-navbar-btn-opacity, 0.48);
         box-sizing: border-box;
+        border-bottom: 3px solid transparent;
+        border-top: 3px solid transparent;
     }
 
     .adf-navbar-item-active {
-        border-radius: 0;
-        opacity: 1;
+        border-radius: var(--adf-navbar-selected-btn-border-radius, 0);
+        opacity: var(--adf-navbar-selected-btn-opacity, 1);
+        border-bottom: var(--adf-navbar-selected-btn-border-bottom, 3px solid black);
     }
 }

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;
 
@@ -78,12 +84,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 {