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

package/lib/datatable/components/datatable/datatable.component.scss

@@ -3,9 +3,13 @@
 @use '../../../styles/mixins' as mixins;
 @use '../../../styles/mat-selectors' as ms;
 
+$data-table-header-font-size: var(--theme-caption-font-size) !default;
+$data-table-header-sort-icon-size: var(--theme-subheading-2-font-size) !default;
+$data-table-row-height: var(--theme-display-3-font-size) !default;
 $data-table-column-spacing: 36px !default;
 $data-table-column-padding: 18px !default;
-$data-table-row-height: var(--mat-sys-display-large-size);
+$data-table-card-padding: var(--theme-headline-line-height) !default;
+$data-table-cell-top: calc($data-table-card-padding / 2);
 $data-table-thumbnail-width: 65px !default;
 $data-table-cell-min-width-1: 65px !default;
 $data-table-cell-min-width-2: 110px !default;
@@ -34,7 +38,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 
         &--divider {
             padding: 24px 0;
-            border: 1px solid var(--mat-sys-outline-variant);
+            border: 1px solid var(--adf-theme-foreground-text-color-007);
         }
 
         &:hover {
@@ -53,8 +57,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 #{ms.$cdk-drag-preview} {
     display: flex;
     flex-direction: column;
-    background-color: var(--mat-sys-surface);
-    border: var(--mat-sys-outline-variant);
+    background-color: var(--adf-theme-background-card-color);
+    border: 1px solid var(--adf-theme-foreground-text-color-007);
     box-sizing: border-box;
     overflow-x: auto;
 
@@ -104,20 +108,20 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         &:not(.adf-datatable-data-loading) {
             &:hover,
             &:focus {
-                background-color: var(--mat-sys-surface-container);
+                background-color: var(--adf-theme-background-hover-color);
             }
         }
 
         &:focus {
             outline-offset: -1px;
-            outline: 1px solid var(--mat-sys-primary);
+            outline: 1px solid var(--theme-accent-color-a200);
         }
 
         .adf-cell-value,
         .adf-datatable-cell-header {
             &:focus {
                 outline-offset: -1px;
-                outline: 1px solid var(--mat-sys-primary);
+                outline: 1px solid var(--theme-accent-color-a200);
             }
         }
     }
@@ -129,7 +133,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     .adf-datatable-body {
         display: flex;
         flex-direction: column;
-        background-color: var(--mat-sys-surface);
+        background-color: inherit;
         width: 100%;
         min-width: 100%;
 
@@ -145,7 +149,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
             @include mixins.material-animation-default(0.28s);
 
             transition-property: background-color;
-            border-top: 1px solid var(--mat-sys-outline);
+            border-top: 1px solid var(--adf-theme-foreground-text-color-007);
             min-height: $data-table-row-height;
             cursor: pointer;
 
@@ -153,7 +157,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 
             &.adf-is-selected,
             &.adf-is-selected:hover {
-                background-color: var(--mat-sys-surface-container);
+                background-color: var(--adf-theme-background-selected-button-color);
             }
 
             &.adf-drag-row {
@@ -161,7 +165,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
             }
 
             &:last-child {
-                border-bottom: 1px solid var(--mat-sys-outline);
+                border-bottom: 1px solid var(--adf-theme-foreground-text-color-007);
             }
 
             label {
@@ -278,7 +282,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     }
 
     .adf-datatable-cell {
-        color: var(--mat-sys-on-surface);
+        color: var(--adf-theme-foreground-text-color);
         min-height: inherit;
     }
 
@@ -373,10 +377,10 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     .adf-location-cell {
         a {
             text-decoration: none;
-            color: var(--mat-sys-on-surface);
+            color: var(--adf-theme-foreground-text-color);
 
             &:hover {
-                color: var(--mat-sys-primary);
+                color: var(--theme-accent-500);
                 text-decoration: underline;
             }
         }
@@ -395,15 +399,15 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     }
 
     .adf-is-selected {
-        background: var(--mat-sys-primary-container);
+        background: var(--adf-theme-primary-100);
     }
 
     .adf-datatable-link {
         text-decoration: none;
-        color: var(--mat-sys-on-surface);
+        color: var(--adf-theme-foreground-text-color);
 
         &:hover {
-            color: var(--mat-sys-secondary);
+            color: var(--theme-accent-500);
             text-decoration: underline;
         }
     }
@@ -495,13 +499,13 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     /* stylelint-disable media-feature-range-notation */
 
     /* mobile phone */
-    @media all and (width <=768px) {
+    @media all and (width <= 768px) {
         .adf-desktop-only.adf-ellipsis-cell {
             display: none;
         }
     }
 
-    @media (device-width <=768px) {
+    @media (device-width <= 768px) {
         .adf-desktop-only.adf-ellipsis-cell {
             display: none;
         }
@@ -519,7 +523,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     line-height: 24px;
     letter-spacing: 0;
     min-height: $data-table-row-height;
-    font-size: var(--mat-sys-body-medium-size);
+    font-size: $data-table-header-font-size;
+    color: var(--adf-theme-foreground-text-color);
     box-sizing: border-box;
 
     &_subtitle {
@@ -536,11 +541,13 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 
     .adf-datatable__header--sorted-asc,
     .adf-datatable__header--sorted-desc {
+        color: var(--adf-theme-foreground-text-color);
         padding-right: 0.25rem;
 
         &::after {
             @include mixins.typo-icon;
 
+            font-size: $data-table-header-sort-icon-size;
             content: '\e5d8';
             left: 5px;
             right: 5px;
@@ -572,6 +579,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         }
 
         &--hovered {
+            background-color: var(--adf-theme-background-hover-color);
             border-radius: 6px;
         }
     }
@@ -598,6 +606,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 .adf-drop-header-cell-placeholder {
     display: flex;
     flex: 1;
+    background: var(--adf-theme-background-hover-color);
     border: dotted 1px rgba(0, 0, 0, 0.25);
     min-height: 55px;
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
@@ -624,11 +633,13 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     flex-direction: row;
     align-items: center;
     box-sizing: unset;
-    border-top: 2px solid var(--mat-sys-primary);
+    background-color: var(--theme-background-color);
+    border-top: 2px solid var(--theme-selected-background-color);
     opacity: 1;
 
     &.adf-datatable-cell-header {
         border-radius: 6px;
+        background-color: var(--theme-background-color);
 
         @include mat.elevation-transition;
         @include mat.elevation(4);
@@ -654,8 +665,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     .adf-datatable-header {
         display: block;
         margin-right: 0;
-        border-top: 1px solid var(--mat-sys-outline-variant);
-        border-bottom: 1px solid var(--mat-sys-outline-variant);
+        border-top: 1px solid var(--adf-theme-foreground-text-color-007);
+        border-bottom: 1px solid var(--adf-theme-foreground-text-color-007);
     }
 
     .adf-datatable-body {
@@ -668,15 +679,15 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 
 .adf-upload__dragging {
     & > div {
-        border-top: 1px dashed var(--mat-sys-secondary);
-        border-bottom: 1px dashed var(--mat-sys-secondary);
+        border-top: 1px dashed var(--theme-accent-color-a200);
+        border-bottom: 1px dashed var(--theme-accent-color-a200);
 
         &:first-child {
-            border-left: 1px dashed var(--mat-sys-secondary);
+            border-left: 1px dashed var(--theme-accent-color-a200);
         }
 
         &:last-child {
-            border-right: 1px dashed var(--mat-sys-secondary);
+            border-right: 1px dashed var(--theme-accent-color-a200);
         }
     }
 }
@@ -691,6 +702,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     .adf-datatable-body[role='rowgroup'] {
         .adf-datatable-row {
             height: 100%;
+            background-color: var(--adf-theme-background-card-color);
             border: none;
 
             &:hover,
@@ -704,7 +716,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 
 .adf-datatable--empty--header-visible {
     .adf-datatable-header {
-        border: 1px solid var(--mat-sys-outline-variant);
+        border: 1px solid var(--adf-theme-foreground-text-color-007);
     }
 
     .adf-datatable-body {
@@ -715,6 +727,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 
         .adf-datatable-row {
             height: 100%;
+            background-color: var(--adf-theme-background-card-color);
             border: none;
 
             &:hover,
@@ -726,7 +739,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     }
 }
 
-@media screen and (width <=380px) {
+@media screen and (width <= 380px) {
     .adf-datatable-header {
         max-height: 50%;
     }

package/lib/dialogs/dialog/dialog.component.scss

@@ -165,7 +165,7 @@ $dialog-padding: 24px;
             left: -$dialog-padding;
             display: block;
             height: 0;
-            border-bottom: 1px solid var(--mat-sys-outline-variant);
+            border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
             width: calc(100% + $dialog-padding * 2);
         }
     }
@@ -284,5 +284,5 @@ $dialog-padding: 24px;
 }
 
 .adf-additional-actions {
-    color: var(--mat-sys-primary);
+    color: var(--theme-primary-color);
 }

package/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.scss

@@ -1,5 +1,3 @@
-@use '@angular/material' as mat;
-
 .adf-unsaved-changes-dialog {
     .adf-unsaved-changes-dialog {
         &-header {
@@ -24,9 +22,14 @@
         &-content {
             padding: 0 8px 0 0;
             overflow: unset;
+            color: var(--adf-secondary-modal-text-color);
 
             &-checkbox {
                 margin-top: 20px;
+
+                label {
+                    color: var(--adf-secondary-modal-text-color);
+                }
             }
         }
 
@@ -38,19 +41,13 @@
             align-items: flex-end;
 
             &-cancel-button {
+                background-color: var(--adf-secondary-button-background);
                 margin-right: 4px;
             }
 
             &-discard-changes-button {
-                color: var(--mat-sys-on-error);
-                background-color: var(--mat-sys-error);
-
-                @include mat.button-overrides(
-                    (
-                        filled-label-text-color: var(--mat-sys-on-error),
-                        filled-container-color: var(--mat-sys-error)
-                    )
-                );
+                color: white;
+                background-color: var(--adf-error-color);
             }
 
             &-cancel-button,

package/lib/directives/tooltip-card/tooltip-card.component.scss

@@ -7,18 +7,20 @@
 div.adf-tooltip-card {
     @include mat.elevation(8);
 
-    border: 1px solid var(--mat-sys-primary);
+    background-color: var(--adf-theme-background-card-color);
+    border: 1px solid var(--theme-primary-color);
     padding: 12px;
     border-radius: 6px;
 
     p,
     div {
-        font-size: var(--mat-sys-body-small-size);
+        font-size: var(--theme-caption-font-size);
+        color: var(--adf-theme-foreground-text-color-075);
         margin: 0;
     }
 
     hr {
-        border: 1px solid var(--mat-sys-primary);
+        border: 1px solid var(--theme-primary-color);
         margin: 6px 0;
     }
 
@@ -26,3 +28,7 @@ div.adf-tooltip-card {
         border-radius: 6px;
     }
 }
+
+::ng-deep .cdk-overlay-connected-position-bounding-box {
+    margin-top: 10px;
+}

package/lib/dynamic-chip-list/dynamic-chip-list.component.scss

@@ -62,6 +62,10 @@
 
         #{ms.$mat-evolution-chip-action} {
             padding: 2px 12px;
+
+            #{ms.$mat-evolution-chip-text-label} {
+                color: var(--adf-theme-foreground-text-color-054);
+            }
         }
     }
 }

package/lib/form/components/form-renderer.component.scss

@@ -167,6 +167,25 @@
         top: 1.8em;
     }
 
+    #{ms.$mat-focused} {
+        width: 100%;
+
+        #{ms.$mat-text-field-focused} {
+            label {
+                color: var(--theme-primary-color);
+            }
+        }
+
+        label {
+            transition: transform 150ms linear;
+            background-color: 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
+        }
+
+        #{ms.$mat-form-field-prefix} {
+            color: var(--theme-primary-color);
+        }
+    }
+
     #{ms.$mat-grid-tile} {
         overflow: visible;
         width: 80%;
@@ -203,6 +222,8 @@
         }
 
         & #{mat-tab-label-text} {
+            font-size: var(--theme-subheading-2-font-size);
+            line-height: var(--theme-headline-line-height);
             letter-spacing: -0.4px;
             text-align: left;
             color: rgba(0, 0, 0, 0.54);
@@ -221,7 +242,7 @@
     }
 
     &-form-title {
-        font-size: var(--mat-sys-title-medium-size);
+        font-size: var(--theme-title-font-size);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -237,10 +258,10 @@
         position: absolute;
         right: 50px;
         top: 39px;
-        color: var(--mat-sys-secondary);
+        color: var(--theme-accent-color);
 
         & .adf-invalid-color {
-            color: var(--mat-sys-error);
+            color: var(--theme-warn-color);
         }
     }
 
@@ -303,4 +324,10 @@
 
 form-field {
     width: 100%;
+
+    #{ms.$mat-input-element} {
+        font-size: var(--theme-body-2-font-size);
+        padding-top: 8px;
+        line-height: normal;
+    }
 }

package/lib/form/components/inplace-form-input/inplace-form-input.component.scss

@@ -4,6 +4,16 @@
 $adf-inplace-input-padding: 7px;
 
 .adf-inplace-input-container {
+    &-error {
+        .adf-inplace-input {
+            border: 1px solid var(--theme-warn-color);
+        }
+    }
+
+    #{ms.$mat-line-ripple} {
+        display: none;
+    }
+
     #{ms.$mat-form-text-field-infix} {
         display: flex;
         border-top: 0;
@@ -21,5 +31,14 @@ $adf-inplace-input-padding: 7px;
         padding: $adf-inplace-input-padding;
         border: 1px solid transparent;
         border-radius: 4px;
+
+        &:focus {
+            border: 1px solid var(--theme-primary-color);
+        }
+
+        &:hover:not(:focus) {
+            border: 1px solid var(--adf-theme-background-hover-color);
+            background-color: var(--adf-theme-background-hover-color);
+        }
     }
 }

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

@@ -23,5 +23,11 @@
         .adf-input {
             margin-top: 3px;
         }
+
+        &:not(#{ms.$mat-focused}):not(#{ms.$mat-form-field-invalid}) {
+            .adf-amount-widget__prefix-spacing {
+                color: var(--adf-theme-foreground-secondary-text-color);
+            }
+        }
     }
 }

package/lib/form/components/widgets/date-time/date-time.widget.scss

@@ -28,5 +28,5 @@
 }
 
 #{ms.$mat-datetimepicker-toggle} {
-    color: var(--mat-sys-on-surface);
+    color: var(--adf-theme-foreground-icon-color);
 }

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/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/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);
     }
 }