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

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

@@ -3,13 +3,9 @@
 @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-card-padding: var(--theme-headline-line-height) !default;
-$data-table-cell-top: calc($data-table-card-padding / 2);
+$data-table-row-height: var(--mat-sys-display-large-size);
 $data-table-thumbnail-width: 65px !default;
 $data-table-cell-min-width-1: 65px !default;
 $data-table-cell-min-width-2: 110px !default;
@@ -38,7 +34,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 
         &--divider {
             padding: 24px 0;
-            border: 1px solid var(--adf-theme-foreground-text-color-007);
+            border: 1px solid var(--mat-sys-outline-variant);
         }
 
         &:hover {
@@ -57,8 +53,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(--adf-theme-background-card-color);
-    border: 1px solid var(--adf-theme-foreground-text-color-007);
+    background-color: var(--mat-sys-surface);
+    border: var(--mat-sys-outline-variant);
     box-sizing: border-box;
     overflow-x: auto;
 
@@ -108,20 +104,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(--adf-theme-background-hover-color);
+                background-color: var(--mat-sys-surface-container);
             }
         }
 
         &:focus {
             outline-offset: -1px;
-            outline: 1px solid var(--theme-accent-color-a200);
+            outline: 1px solid var(--mat-sys-primary);
         }
 
         .adf-cell-value,
         .adf-datatable-cell-header {
             &:focus {
                 outline-offset: -1px;
-                outline: 1px solid var(--theme-accent-color-a200);
+                outline: 1px solid var(--mat-sys-primary);
             }
         }
     }
@@ -133,7 +129,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: inherit;
+        background-color: var(--mat-sys-surface);
         width: 100%;
         min-width: 100%;
 
@@ -149,7 +145,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(--adf-theme-foreground-text-color-007);
+            border-top: 1px solid var(--mat-sys-outline);
             min-height: $data-table-row-height;
             cursor: pointer;
 
@@ -157,7 +153,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(--adf-theme-background-selected-button-color);
+                background-color: var(--mat-sys-surface-container);
             }
 
             &.adf-drag-row {
@@ -165,7 +161,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
             }
 
             &:last-child {
-                border-bottom: 1px solid var(--adf-theme-foreground-text-color-007);
+                border-bottom: 1px solid var(--mat-sys-outline);
             }
 
             label {
@@ -282,7 +278,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     }
 
     .adf-datatable-cell {
-        color: var(--adf-theme-foreground-text-color);
+        color: var(--mat-sys-on-surface);
         min-height: inherit;
     }
 
@@ -377,10 +373,10 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     .adf-location-cell {
         a {
             text-decoration: none;
-            color: var(--adf-theme-foreground-text-color);
+            color: var(--mat-sys-on-surface);
 
             &:hover {
-                color: var(--theme-accent-500);
+                color: var(--mat-sys-primary);
                 text-decoration: underline;
             }
         }
@@ -399,15 +395,15 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     }
 
     .adf-is-selected {
-        background: var(--adf-theme-primary-100);
+        background: var(--mat-sys-primary-container);
     }
 
     .adf-datatable-link {
         text-decoration: none;
-        color: var(--adf-theme-foreground-text-color);
+        color: var(--mat-sys-on-surface);
 
         &:hover {
-            color: var(--theme-accent-500);
+            color: var(--mat-sys-secondary);
             text-decoration: underline;
         }
     }
@@ -499,13 +495,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;
         }
@@ -523,8 +519,7 @@ $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: $data-table-header-font-size;
-    color: var(--adf-theme-foreground-text-color);
+    font-size: var(--mat-sys-body-medium-size);
     box-sizing: border-box;
 
     &_subtitle {
@@ -541,13 +536,11 @@ $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;
@@ -579,7 +572,6 @@ $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;
         }
     }
@@ -606,7 +598,6 @@ $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);
@@ -633,13 +624,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     flex-direction: row;
     align-items: center;
     box-sizing: unset;
-    background-color: var(--theme-background-color);
-    border-top: 2px solid var(--theme-selected-background-color);
+    border-top: 2px solid var(--mat-sys-primary);
     opacity: 1;
 
     &.adf-datatable-cell-header {
         border-radius: 6px;
-        background-color: var(--theme-background-color);
 
         @include mat.elevation-transition;
         @include mat.elevation(4);
@@ -665,8 +654,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(--adf-theme-foreground-text-color-007);
-        border-bottom: 1px solid var(--adf-theme-foreground-text-color-007);
+        border-top: 1px solid var(--mat-sys-outline-variant);
+        border-bottom: 1px solid var(--mat-sys-outline-variant);
     }
 
     .adf-datatable-body {
@@ -679,15 +668,15 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 
 .adf-upload__dragging {
     & > div {
-        border-top: 1px dashed var(--theme-accent-color-a200);
-        border-bottom: 1px dashed var(--theme-accent-color-a200);
+        border-top: 1px dashed var(--mat-sys-secondary);
+        border-bottom: 1px dashed var(--mat-sys-secondary);
 
         &:first-child {
-            border-left: 1px dashed var(--theme-accent-color-a200);
+            border-left: 1px dashed var(--mat-sys-secondary);
         }
 
         &:last-child {
-            border-right: 1px dashed var(--theme-accent-color-a200);
+            border-right: 1px dashed var(--mat-sys-secondary);
         }
     }
 }
@@ -702,7 +691,6 @@ $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,
@@ -716,7 +704,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(--adf-theme-foreground-text-color-007);
+        border: 1px solid var(--mat-sys-outline-variant);
     }
 
     .adf-datatable-body {
@@ -727,7 +715,6 @@ $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,
@@ -739,7 +726,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(--adf-theme-foreground-divider-color);
+            border-bottom: 1px solid var(--mat-sys-outline-variant);
             width: calc(100% + $dialog-padding * 2);
         }
     }
@@ -284,5 +284,5 @@ $dialog-padding: 24px;
 }
 
 .adf-additional-actions {
-    color: var(--theme-primary-color);
+    color: var(--mat-sys-primary);
 }

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

@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 .adf-unsaved-changes-dialog {
     .adf-unsaved-changes-dialog {
         &-header {
@@ -22,14 +24,9 @@
         &-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);
-                }
             }
         }
 
@@ -41,13 +38,19 @@
             align-items: flex-end;
 
             &-cancel-button {
-                background-color: var(--adf-secondary-button-background);
                 margin-right: 4px;
             }
 
             &-discard-changes-button {
-                color: white;
-                background-color: var(--adf-error-color);
+                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)
+                    )
+                );
             }
 
             &-cancel-button,

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

@@ -7,20 +7,18 @@
 div.adf-tooltip-card {
     @include mat.elevation(8);
 
-    background-color: var(--adf-theme-background-card-color);
-    border: 1px solid var(--theme-primary-color);
+    border: 1px solid var(--mat-sys-primary);
     padding: 12px;
     border-radius: 6px;
 
     p,
     div {
-        font-size: var(--theme-caption-font-size);
-        color: var(--adf-theme-foreground-text-color-075);
+        font-size: var(--mat-sys-body-small-size);
         margin: 0;
     }
 
     hr {
-        border: 1px solid var(--theme-primary-color);
+        border: 1px solid var(--mat-sys-primary);
         margin: 6px 0;
     }
 
@@ -28,7 +26,3 @@ 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,10 +62,6 @@
 
         #{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

@@ -123,25 +123,6 @@
         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%;
@@ -178,8 +159,6 @@
         }
 
         & #{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);
@@ -198,7 +177,7 @@
     }
 
     &-form-title {
-        font-size: var(--theme-title-font-size);
+        font-size: var(--mat-sys-title-medium-size);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -214,10 +193,10 @@
         position: absolute;
         right: 50px;
         top: 39px;
-        color: var(--theme-accent-color);
+        color: var(--mat-sys-secondary);
 
         & .adf-invalid-color {
-            color: var(--theme-warn-color);
+            color: var(--mat-sys-error);
         }
     }
 
@@ -280,10 +259,4 @@
 
 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,16 +4,6 @@
 $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;
@@ -31,14 +21,5 @@ $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,11 +23,5 @@
         .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(--adf-theme-foreground-icon-color);
+    color: var(--mat-sys-on-surface);
 }

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

@@ -1,8 +1,5 @@
 .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,12 +2,6 @@
 /* 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;
@@ -17,55 +11,25 @@ ul > li > form-field > .adf-focus {
     &-error-text {
         padding: 1px;
         height: 16px;
-        font-size: var(--theme-caption-font-size);
+        font-size: var(--mat-sys-body-small-size);
         line-height: 1.33;
-        color: var(--theme-warn-color);
+        color: var(--mat-sys-error);
     }
 
     &-error-icon {
-        font-size: var(--theme-adf-icon-1-font-size);
-        color: var(--theme-warn-color);
-    }
-
-    &-label {
-        color: var(--adf-theme-foreground-secondary-text-color);
+        font-size: var(--mat-sys-label-large-size);
+        color: var(--mat-sys-error);
     }
 
     &-asterisk {
         padding-left: 2px;
-        color: var(--theme-warn-color);
+        color: var(--mat-sys-error);
     }
 
     &-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(--theme-warn-color);
-        }
-
-        #{ms.$mat-form-field-prefix} {
-            color: var(--adf-theme-foreground-secondary-text-color);
+            border-color: var(--mat-sys-error);
         }
-
-        .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,11 +1,9 @@
 .adf-container-widget-header__text {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.87);
+    border-bottom: 1px solid var(--mat-sys-outline-variant);
     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);
+    font-size: var(--mat-sys-title-small-size);
     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(--theme-primary-color);
+        color: var(--mat-sys-primary);
     }
 }

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(--theme-caption-font-size);
+        font-size: var(--mat-sys-body-small-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: var(--adf-header-width, 100%);
-    height: var(--adf-header-height, 100%);
+    width: 100%;
+    height: 100%;
 
     .adf-toolbar {
-        width: var(--adf-toolbar-width, 100%);
-        height: var(--adf-toolbar-height, 100%);
+        width: 100%;
+        height: 100%;
 
         .adf-toolbar-title {
-            width: var(--adf-toolbar-title-width, 100%);
+            width: 100%;
             align-items: center;
-            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);
+            font-size: var(--mat-sys-title-medium-size);
+            font-weight: var(--mat-sys-title-medium-weight);
+            color: var(--mat-sys-on-surface);
+            gap: 25px;
         }
 
         .adf-toolbar-logo {
-            height: var(--adf-header-logo-height, 36px);
-            width: var(--adf-header-logo-width, --adf-header-logo-height);
+            height: 36px;
+            width: 36px;
         }
 
         .adf-toolbar-actions > * {
             display: flex;
             align-items: center;
-            gap: var(--adf-toolbar-actions-gap, 10px);
+            gap: 10px;
         }
 
         .adf-toolbar-container.adf-toolbar-container-row {

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

@@ -1,19 +1,11 @@
 .adf-navbar-item {
     .adf-navbar-item-btn {
-        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);
+        height: 100%;
         box-sizing: border-box;
-        border-bottom: 3px solid transparent;
-        border-top: 3px solid transparent;
     }
 
     .adf-navbar-item-active {
-        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);
+        border-radius: 0;
+        opacity: 1;
     }
 }