@alfresco/adf-content-services 8.4.0-19063861366 → 8.4.0-19066231420

package/lib/search/components/search-facet-field/search-facet-field.component.scss

@@ -21,7 +21,7 @@
 
         .adf-facet-search-container {
             border-radius: 6px;
-            background: var(--mat-sys-surface);
+            background: var(--theme-background-color);
             display: flex;
             height: 32px;
 
@@ -30,7 +30,7 @@
                 margin-top: -3px;
 
                 .adf-search-field-icon {
-                    font: var(--mat-sys-body-large);
+                    font-size: var(--theme-subheading-1-font-size);
                 }
             }
 
@@ -38,7 +38,9 @@
                 padding: 2px;
                 flex: 1;
                 margin-top: -16px;
-                font: var(--mat-sys-body-medium);
+                font-size: var(--theme-body-1-font-size);
+                line-height: 24px;
+                letter-spacing: 0.25px;
             }
         }
     }
@@ -56,6 +58,6 @@
     }
 
     .adf-facet-label {
-        color: var(--mat-sys-on-secondary-container);
+        color: var(--adf-theme-foreground-text-color-054);
     }
 }

package/lib/search/components/search-filter/search-filter.component.scss

@@ -1,10 +1,10 @@
 .adf-search-filter {
     .adf-search-filter-header-title {
-        font: var(--mat-sys-body-medium);
-        color: var(--mat-sys-on-secondary-container);
+        font-size: var(--theme-body-1-font-size);
+        color: var(--adf-theme-foreground-text-color-087);
     }
 
     .adf-search-check-list-label {
-        color: var(--mat-sys-on-secondary-container);
+        color: var(--adf-theme-foreground-text-color-054);
     }
 }

package/lib/search/components/search-filter-chips/search-filter-chips.component.scss

@@ -1,4 +1,5 @@
 @use '@angular/material' as mat;
+@use '../../../mat-selectors.scss' as ms;
 
 .adf-search-filter-chip,
 .adf-search-filter-chip-tabbed {
@@ -6,22 +7,21 @@
     max-width: 320px;
     text-overflow: ellipsis;
     overflow: hidden;
-    background: var(--mat-sys-surface-variant);
+    background: var(--adf-theme-background-unselected-chip-color);
 
     &.adf-search-toggle-chip {
-        background: var(--mat-sys-surface);
-        border: 2px solid var(--mat-sys-primary);
+        background: var(--adf-theme-background-card-color);
+        border: 2px solid var(--theme-primary-color);
     }
 
     .adf-search-filter-placeholder {
         flex: 1 1 auto;
         white-space: nowrap;
-        opacity: 0.38;
-        color: var(--mat-sys-on-surface);
+        color: var(--adf-theme-foreground-disabled-text-color);
     }
 
     &.adf-search-filter-facet-chip::after {
-        background: var(--mat-sys-surface-variant);
+        background: var(--adf-theme-background-unselected-chip-color);
         color: unset;
     }
 
@@ -29,10 +29,11 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        font-weight: 300;
     }
 
     .adf-filter-value {
-        font: var(--mat-sys-body-medium);
+        font-weight: 500;
     }
 
     .adf-search-filter-chip-icon {
@@ -46,3 +47,16 @@
         @include mat.elevation(2);
     }
 }
+
+.adf-search-filter-chip#{ms.$mat-evolution-chip}#{ms.$mat-standard-chip} {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+#{ms.$mat-standard-chip} {
+    -webkit-font-smoothing: unset;
+}
+
+#{ms.$mat-evolution-chip-set} {
+    margin-top: -4px;
+}

package/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss

@@ -1,13 +1,21 @@
 .adf-search-filter-menu-card {
+    color: var(--adf-theme-foreground-text-color);
+    background: var(--adf-theme-background-card-color);
+
     .adf-search-filter-title {
         display: flex;
         justify-content: space-between;
+        color: var(--adf-theme-foreground-text-color-054);
         align-items: center;
         padding: 16px 12px;
         height: 32px;
-        font: var(--mat-sys-body-medium);
+        font-size: var(--theme-body-1-font-size);
+        letter-spacing: 0.15px;
+        font-weight: bold;
+        font-style: inherit;
 
         &-action {
+            color: var(--adf-theme-foreground-text-color-087);
             float: right;
         }
     }

package/lib/search/components/search-filter-container/search-filter-container.component.scss

@@ -1,17 +1,19 @@
 @use '@angular/material' as mat;
+@use '../../../mat-selectors.scss' as ms;
 
 .adf-filter {
     &-button:has(.adf-filter-icon) {
         margin-left: -7px;
 
         .adf-icon {
-            color: var(--mat-sys-on-surface);
+            opacity: 1;
+            color: var(--adf-theme-foreground-icon-color);
 
             &.adf-icon-active {
-                color: var(--mat-sys-primary);
+                color: var(--theme-primary-color);
 
                 span {
-                    border: 2px solid var(--mat-sys-outline-variant);
+                    border: 2px solid var(--adf-theme-background-card-color);
                     width: 10px;
                     height: 10px;
                     top: -3px;
@@ -25,7 +27,7 @@
         display: flex;
         flex-direction: column;
         padding: 15.5px 15px 10px;
-        color: var(--mat-sys-on-surface);
+        color: var(--adf-theme-foreground-text-color-087);
 
         .adf-facet-buttons {
             display: none;
@@ -34,11 +36,16 @@
         .adf-search-check-list {
             padding: 5px 0;
         }
+
+        input {
+            background: 2px solid var(--adf-theme-background-card-color);
+        }
     }
 
     &-title {
-        font: var(--mat-sys-body-medium);
+        font-size: 1.1em;
         padding-bottom: 5px;
+        color: var(--adf-theme-foreground-text-color-087);
         -webkit-font-smoothing: subpixel-antialiased;
     }
 }
@@ -56,13 +63,19 @@
         display: flex;
         justify-content: flex-end;
         padding: 15px;
-        background-color: var(--mat-sys-surface-container);
+        background-color: var(--adf-theme-background-hover-color);
 
         > button {
+            font-size: 0.9em;
             height: 36px;
             width: auto;
             padding-left: 16px;
             padding-right: 16px;
+            -webkit-font-smoothing: subpixel-antialiased;
+
+            #{ms.$mat-button-label} {
+                font-weight: unset;
+            }
         }
     }
 }

package/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss

@@ -6,7 +6,11 @@ adf-search-filter-tabbed {
     }
 
     .adf-search-tab-label-active {
-        border-bottom: 1px solid var(--mat-sys-primary);
+        border-bottom: 1px solid var(--theme-primary-color);
+
+        #{ms.$mat-tab-label-text} {
+            color: var(--adf-theme-foreground-secondary-text-color);
+        }
     }
 
     // The important tag is used here as a workaround for a bug in angular material, when MatTabs are used in conjunction with MatMenu

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

@@ -1,4 +1,5 @@
 @use '@angular/material' as mat;
+@use '../../../mat-selectors.scss' as ms;
 
 .adf-search-form {
     &.adf-search-form-button {
@@ -19,21 +20,25 @@
     &-title {
         max-width: 120px;
         min-width: 120px;
-        font: var(--mat-sys-body-medium);
+        font-size: var(--theme-body-1-font-size);
+        line-height: 24px;
         padding-right: 12px;
         text-overflow: ellipsis;
         overflow: hidden;
         text-align: left;
     }
 
-    .adf-search-form-icon {
+    .adf-search-form-icon#{ms.$mat-icon} {
+        font-size: 24px;
+        height: 24px;
+        width: 24px;
         border: 2px solid transparent;
         border-radius: 6px;
         transition: border 500ms ease-out;
     }
 
     &-icon-selected {
-        border-color: var(--mat-sys-secondary);
+        border-color: var(--theme-accent-color);
     }
 }
 

package/lib/search/components/search-logical-filter/search-logical-filter.component.scss

@@ -7,5 +7,15 @@
         &:last-child {
             padding: 0;
         }
+
+        input {
+            height: 25px;
+            border: 1px solid var(--adf-theme-mat-grey-color-a400);
+            border-radius: 5px;
+            margin-top: 5px;
+            padding: 5px;
+            font-size: 14px;
+            color: var(--adf-theme-foreground-text-color);
+        }
     }
 }

package/lib/search/components/search-sorting-picker/search-sorting-picker.component.scss

@@ -0,0 +1,5 @@
+.adf-search-sorting-picker {
+    .adf-sorting-picker-button {
+        color: var(--adf-theme-foreground-text-color-054);
+    }
+}

package/lib/tag/tag-actions/tag-actions.component.scss

@@ -9,7 +9,7 @@
     }
 
     .adf-tag-actions-delete-text {
-        font-size: var(--mat-sys-title-small-size);
+        font-size: var(--theme-subheading-2-font-size);
         float: left;
     }
 

package/lib/tag/tag-list/tag-list.component.scss

@@ -10,11 +10,11 @@
 
         .adf-list-tag {
             display: block;
-            font-size: var(--mat-sys-title-small-size);
+            font-size: var(--theme-subheading-2-font-size);
 
             .adf-tag-list-chip {
-                color: var(--mat-sys-on-primary);
-                background-color: var(--mat-sys-primary);
+                color: var(--theme-primary-color-default-contrast);
+                background-color: var(--theme-primary-color);
             }
         }
     }

package/lib/tag/tags-creator/tags-creator.component.scss

@@ -1,3 +1,5 @@
+@use '../../mat-selectors.scss' as ms;
+
 adf-tags-creator {
     display: block;
 
@@ -15,7 +17,13 @@ adf-tags-creator {
     }
 
     .adf-tag-search-field {
+        background: var(--adf-metadata-buttons-background-color);
+        border-radius: 12px;
         padding: 5px 6px;
+        border: none;
+        outline: none;
+        font: inherit;
+        color: currentcolor;
         margin: 0;
         vertical-align: bottom;
         text-align: inherit;
@@ -23,7 +31,7 @@ adf-tags-creator {
     }
 
     .adf-create-tag-label {
-        color: var(--mat-sys-primary);
+        color: var(--theme-primary-color);
         cursor: pointer;
         margin-top: -1px;
         padding-left: 12px;
@@ -48,7 +56,7 @@ adf-tags-creator {
 
         .adf-existing-tags-label {
             font-size: 10px;
-            color: var(--mat-sys-on-surface-variant);
+            color: var(--theme-secondary-text-color);
             padding-left: 12px;
             margin-bottom: 2px;
         }
@@ -69,6 +77,11 @@ adf-tags-creator {
                 background-color: inherit;
                 color: inherit;
 
+                &:not(#{ms.$mat-list-item-disabled}):hover {
+                    cursor: pointer;
+                    background: var(--adf-theme-mat-grey-color-a200);
+                }
+
                 & span {
                     padding: 0;
                 }
@@ -79,6 +92,10 @@ adf-tags-creator {
                 overflow: unset;
                 min-height: 62px;
             }
+
+            #{ms.$mat-list-item-disabled} #{ms.$mat-list-item-primary-text} {
+                opacity: 1;
+            }
         }
     }
 
@@ -92,7 +109,6 @@ adf-tags-creator {
             word-break: break-all;
         }
     }
-
     /* stylelint-enable selector-class-pattern */
 
     [hidden] {

package/lib/tree/components/tree.component.scss

@@ -24,7 +24,7 @@ $tree-header-font-size: 12px !default;
     padding-left: 15px;
     padding-right: 15px;
     transition-property: background-color;
-    border-bottom: 1px solid var(--mat-sys-outline-variant);
+    border-bottom: 1px solid var(--adf-theme-foreground-text-color-007);
     min-height: $tree-row-height;
     user-select: none;
 
@@ -33,7 +33,7 @@ $tree-header-font-size: 12px !default;
     }
 
     &:hover {
-        background-color: var(--mat-sys-surface-container);
+        background-color: var(--adf-theme-background-hover-color);
 
         .adf-tree-actions {
             display: flex;
@@ -41,9 +41,9 @@ $tree-header-font-size: 12px !default;
     }
 
     &:focus {
-        background-color: var(--mat-sys-surface-container);
+        background-color: var(--adf-theme-background-hover-color);
         outline-offset: -1px;
-        outline: 1px solid var(--mat-sys-secondary);
+        outline: 1px solid var(--theme-accent-color-a200);
     }
 
     .adf-tree-expand-collapse-button,
@@ -55,7 +55,7 @@ $tree-header-font-size: 12px !default;
     }
 
     .adf-tree-cell {
-        color: var(--mat-sys-on-surface);
+        color: var(--adf-theme-foreground-text-color);
         width: 100%;
 
         .adf-tree-cell-value {
@@ -82,13 +82,13 @@ $tree-header-font-size: 12px !default;
         letter-spacing: 0;
         min-height: $tree-row-height;
         font-size: $tree-header-font-size;
-        color: var(--mat-sys-on-surface);
+        color: var(--adf-theme-foreground-text-color);
         box-sizing: border-box;
         padding-top: 12px;
 
         &:focus {
             outline-offset: -1px;
-            outline: 1px solid var(--mat-sys-primary);
+            outline: 1px solid var(--theme-accent-color-a200);
         }
     }
 }

package/lib/tree-view/components/tree-view.component.scss

@@ -1,11 +1,11 @@
 .adf {
     &-tree-view-icon {
-        color: var(--mat-sys-primary);
+        color: #d9e022;
     }
 
     &-tree-view-node.adf-tree-view {
         min-height: 40px;
-        font-size: var(--mat-sys-body-small-size);
+        font-size: var(--theme-caption-font-size);
         align-items: baseline;
     }
 

package/lib/upload/components/file-uploading-dialog.component.scss

@@ -1,6 +1,7 @@
 /* stylelint-disable no-descending-specificity */
 .adf-upload-dialog {
-    background: var(--mat-sys-surface-container-high);
+    background: var(--adf-theme-background-dialog-color);
+    color: var(--adf-theme-foreground-text-color-054);
     position: fixed;
     bottom: 20px;
     width: 40%;
@@ -34,6 +35,8 @@
             height: 24px;
             width: 24px;
             padding: 0;
+            line-height: 0;
+            color: var(--adf-theme-foreground-text-color-054);
         }
     }
 
@@ -49,8 +52,8 @@
     &__content {
         overflow: auto;
         max-height: 194px;
-        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-014);
+        border-bottom: 1px solid var(--adf-theme-foreground-text-color-014);
     }
 
     &__confirmation {
@@ -58,7 +61,10 @@
     }
 
     &__confirmation--title {
-        font: var(--mat-sys-title-small-size);
+        font-size: var(--theme-subheading-2-font-size);
+        line-height: 1.5;
+        letter-spacing: -0.4px;
+        color: var(--adf-theme-foreground-text-color-087);
     }
 
     &__confirmation--text {
@@ -87,7 +93,7 @@
     right: 25px;
 }
 
-@media screen and (width >=380px) and (width <=768px) {
+@media screen and (width >= 380px) and (width <= 768px) {
     .adf-upload-dialog {
         width: 60%;
     }
@@ -97,7 +103,7 @@
     }
 }
 
-@media screen and (width <=380px) {
+@media screen and (width <= 380px) {
     .adf-upload-dialog {
         width: 85%;
     }

package/lib/upload/components/file-uploading-list-row.component.scss

@@ -1,6 +1,8 @@
+$file-uploading-row-hover-color: #eee !default;
+
 adf-file-uploading-list-row:not(:first-child) {
     display: block;
-    border-top: 1px solid var(--mat-sys-outline-variant);
+    border-top: 1px solid var(--adf-theme-foreground-text-color-014);
 }
 
 .adf-file-uploading-row {
@@ -10,7 +12,7 @@ adf-file-uploading-list-row:not(:first-child) {
     cursor: default;
 
     &:hover {
-        background: var(--mat-sys-surface);
+        background: $file-uploading-row-hover-color;
     }
 
     &__name {
@@ -27,7 +29,8 @@ adf-file-uploading-list-row:not(:first-child) {
         min-width: 100px;
         display: flex;
         justify-content: flex-end;
-        font: var(--mat-sys-body-large);
+        line-height: 40px;
+        height: 40px;
         align-items: center;
         padding: 0 12px;
     }
@@ -36,23 +39,24 @@ adf-file-uploading-list-row:not(:first-child) {
         cursor: pointer;
         display: flex;
         align-items: center;
-        font: var(--mat-sys-body-large);
+        height: 40px;
+        line-height: 40px;
     }
 
     &__status--done {
-        color: var(--mat-sys-secondary);
+        color: var(--theme-accent-color);
     }
 
     &__status--error {
-        color: var(--mat-sys-error);
+        color: var(--theme-warn-color);
         padding: 0 12px;
     }
 
     &__action--cancel {
-        color: var(--mat-sys-error);
+        color: var(--theme-warn-color);
     }
 
     &__action--remove {
-        color: var(--mat-sys-error);
+        color: var(--theme-warn-color);
     }
 }

package/lib/upload/components/upload-button.component.scss

@@ -2,6 +2,9 @@
     &-upload-button-file-container {
         .adf-upload-button-icon {
             margin: 0;
+            font-size: 24px;
+            width: 24px;
+            height: 24px;
         }
 
         input {
@@ -14,7 +17,18 @@
         align-items: center;
         cursor: pointer;
         padding: 8px 16px;
-        box-shadow: var(--mat-sys-level-2);
+        box-shadow: 0 3px 1px -2px #0003, 0 2px 2px rgba(0, 0, 0, 0.14), 0 1px 5px rgba(0, 0, 0, 0.12);
         border-radius: 4px;
+
+        &:active {
+            box-shadow: 0 5px 5px -3px #0003, 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+        }
+    }
+
+    &-upload-button-file-container-upload-single-file[disabled] + &-upload-button-label {
+        background-color: var(--adf-disabled-button-background);
+        color: var(--adf-theme-foreground-disabled-text-color);
+        box-shadow: none;
+        cursor: default;
     }
 }

package/lib/version-manager/version-comparison.component.scss

@@ -17,7 +17,7 @@
 }
 
 .adf-version-arrow-icon {
-    font-size: var(--mat-sys-display-large-size);
+    font-size: var(--theme-display-4-font-size);
 }
 
 .adf-version-comparison-node-name,

package/lib/version-manager/version-list.component.scss

@@ -26,12 +26,12 @@
 
     .adf-version-list-icon {
         margin: 0 16px;
-        color: var(--mat-sys-on-surface);
+        color: var(--theme-sidenav-user-menu-color);
     }
 
     &.adf-version-list-element {
         .adf-version-list-item {
-            border-bottom: 1px solid var(--mat-sys-outline-variant);
+            border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
             width: 100%;
             height: 88px;
         }
@@ -50,7 +50,7 @@
         width: auto;
         opacity: 0.5;
 
-        @media screen and (width <=629px) {
+        @media screen and (width <= 629px) {
             width: 97%;
         }
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alfresco/adf-content-services",
   "description": "Alfresco ADF content services",
-  "version": "8.4.0-19063861366",
+  "version": "8.4.0-19066231420",
   "author": "Hyland Software, Inc. and its affiliates",
   "repository": {
     "type": "git",
@@ -21,9 +21,9 @@
     "@angular/platform-browser": ">=14.1.3",
     "@angular/platform-browser-dynamic": ">=14.1.3",
     "@angular/router": ">=14.1.3",
-    "@alfresco/js-api": ">=9.4.0-19063861366",
+    "@alfresco/js-api": ">=9.4.0-19066231420",
     "@ngx-translate/core": ">=16.0.0",
-    "@alfresco/adf-core": ">=8.4.0-19063861366"
+    "@alfresco/adf-core": ">=8.4.0-19066231420"
   },
   "keywords": [
     "content-services",