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

package/lib/aspect-list/aspect-list-dialog.component.scss

@@ -9,7 +9,8 @@ adf-aspect-list-dialog {
 }
 
 .adf-aspect-list-dialog-title {
-    font: var(--mat-sys-headline-medium);
+    font-size: large;
+    font-weight: 200;
     margin-top: 0;
 }
 
@@ -43,6 +44,11 @@ adf-aspect-list-dialog {
     margin-bottom: 8px;
 
     .adf-aspect-property-table {
+        .adf-aspect-property-table-cell {
+            font-size: smaller;
+            color: var(--adf-theme-foreground-text-color-087);
+        }
+
         .adf-aspect-property-table-column {
             &-name {
                 width: 30%;

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

@@ -23,7 +23,7 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
     &-aspect-list-container {
         max-height: $dialog-list-height;
         overflow: auto;
-        border: 1px solid var(--mat-sys-outline-variant);
+        border: 1px solid var(--adf-theme-foreground-text-color-007);
 
         .adf-aspect-list-check-button {
             margin-right: 5px;
@@ -35,11 +35,11 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
         .adf-accordion-aspect-list-item {
             padding-left: 14px;
             display: flex;
-            box-shadow: var(--mat-sys-level-2);
+            box-shadow: 0 2px 2px -1px var(--adf-theme-foreground-text-color-007);
 
             &.adf-hover {
                 &:hover {
-                    background-color: var(--mat-sys-surface-container);
+                    background-color: var(--adf-theme-background-hover-color);
                 }
             }
         }
@@ -47,6 +47,8 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
         .adf-accordion-aspect-list-expansion-panel {
             margin: 0;
             width: 100%;
+            box-shadow: none;
+            background: border-box;
 
             #{ms.$mat-checkbox-background} {
                 height: 16px;
@@ -54,13 +56,13 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
             }
 
             &-header {
-                font: var(--mat-sys-body-small);
+                font-size: smaller;
                 padding-left: 0;
                 height: 48px;
             }
 
             &-header-title {
-                color: var(--mat-sys-on-secondary-container);
+                color: var(--theme-secondary-text);
             }
 
             &-header-description {
@@ -80,8 +82,8 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
         .adf-aspect-property-table-column-name,
         .adf-aspect-property-table-column-title,
         .adf-aspect-property-table-column-data-type {
-            font: var(--mat-sys-body-small);
-            color: var(--mat-sys-on-secondary-container);
+            font-size: 12px;
+            color: var(--adf-theme-foreground-text-color-054);
         }
 
         .adf-aspect-property-table-column {

package/lib/breadcrumb/breadcrumb.component.scss

@@ -1,8 +1,11 @@
 .adf-breadcrumb {
     display: flex;
     flex: 1;
-    font: var(--mat-sys-body-medium);
-    color: var(--mat-sys-on-surface);
+    line-height: 24px;
+    font-size: var(--theme-body-1-font-size);
+    font-weight: 600;
+    letter-spacing: -0.2px;
+    color: var(--adf-theme-foreground-text-color-054);
     overflow: hidden;
 
     &-container {
@@ -32,7 +35,7 @@
             margin-right: 5px;
 
             &:focus {
-                color: var(--mat-sys-primary);
+                color: var(--theme-primary-color);
                 outline: none;
             }
 
@@ -41,11 +44,11 @@
             }
 
             &-arrow {
-                font: var(--mat-sys-body-small);
+                font-size: var(--theme-adf-icon-1-font-size);
                 position: absolute;
                 left: 4px;
                 top: 4px;
-                color: var(--mat-sys-on-secondary);
+                color: white;
                 z-index: 2;
             }
 
@@ -67,21 +70,30 @@
         padding-right: 2px;
         overflow: hidden;
         display: flex;
-        font: var(--mat-sys-body-medium);
+        line-height: 33px;
+        font-size: var(--theme-body-1-font-size);
+        font-weight: 600;
+        letter-spacing: -0.2px;
         text-align: left;
-        color: var(--mat-sys-on-secondary-container);
+        color: var(--adf-theme-foreground-text-color-054);
         flex: 0 1 auto;
         min-width: 35px;
         margin-top: auto;
         text-overflow: ellipsis;
 
+        &:hover,
         &.adf-active {
-            color: var(--mat-sys-on-surface);
+            color: var(--adf-theme-foreground-text-color-064);
+        }
+
+        &.adf-active {
+            color: var(--adf-theme-foreground-text-color-087);
         }
 
         &-chevron {
+            opacity: 1;
             margin-top: 9px;
-            font: var(--mat-sys-body-small);
+            font-size: var(--theme-adf-icon-1-font-size);
         }
 
         &-anchor {
@@ -98,7 +110,7 @@
             text-align: start;
 
             &:focus {
-                outline: 1px solid var(--mat-sys-outline-variant);
+                outline: 1px solid var(--theme-accent-color-a200);
                 outline-offset: -1px;
             }
         }

package/lib/breadcrumb/dropdown-breadcrumb.component.scss

@@ -6,8 +6,11 @@ $dropdown-horizontal-offset: 30px;
     &-dropdown-breadcrumb {
         display: flex;
         flex: 1;
-        font: var(--mat-sys-body-medium);
-        color: var(--mat-sys-on-secondary-container);
+        line-height: 24px;
+        font-size: var(--theme-body-1-font-size);
+        font-weight: 600;
+        letter-spacing: -0.2px;
+        color: var(--adf-theme-foreground-text-color-054);
         overflow: hidden;
         margin-top: 10px;
 
@@ -33,7 +36,7 @@ $dropdown-horizontal-offset: 30px;
         width: 25px;
 
         &:focus {
-            color: var(--mat-sys-primary);
+            color: var(--theme-primary-color);
             outline: none;
         }
     }
@@ -58,12 +61,12 @@ $dropdown-horizontal-offset: 30px;
         text-overflow: ellipsis;
         display: inline-block;
         width: 75%;
-        color: var(--mat-sys-on-surface);
+        color: var(--adf-theme-foreground-text-color);
     }
 
     &-dropdown-breadcrumb-path-option.adf-dropdown-breadcrumb-path-option-node {
         padding: 0 12px;
-        font-size: var(--mat-sys-body-small-size);
+        font-size: var(--theme-caption-font-size);
     }
 
     &-dropdown-breadcrumb-path-option.adf-dropdown-breadcrumb-path-option-node:first-child {

package/lib/category/categories-management/categories-management.component.scss

@@ -1,8 +1,28 @@
+@use '../../mat-selectors.scss' as ms;
+
 .adf-categories-management {
     .adf-category-name-field {
         display: flex;
         flex-direction: column;
         margin-right: 12px;
+
+        input {
+            background: var(--adf-metadata-buttons-background-color);
+            border-radius: 12px;
+            padding: 7px 8px;
+            border: none;
+            outline: none;
+            font: inherit;
+            color: currentcolor;
+            margin: 0;
+            vertical-align: bottom;
+            text-align: inherit;
+            box-sizing: content-box;
+        }
+
+        #{ms.$mat-form-field-error} {
+            padding-top: 5px;
+        }
     }
 
     .adf-assigned-categories {
@@ -32,11 +52,23 @@
         height: 100%;
         overflow-wrap: anywhere;
         padding: 5px 0;
+        font-size: 14px;
+        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;
+        }
     }
 
     .adf-existing-categories-label {
-        font: var(--mat-sys-body-small);
-        color: var(--mat-sys-on-secondary-container);
+        font-size: 10px;
+        color: var(--theme-secondary-text-color);
         margin-bottom: 2px;
     }
 
@@ -49,8 +81,12 @@
     min-height: 22vh;
 
     .adf-create-category-label {
-        color: var(--mat-sys-primary);
+        color: var(--theme-primary-color);
         cursor: pointer;
         overflow-wrap: anywhere;
     }
+
+    #{ms.$mat-list-item-disabled} #{ms.$mat-list-item-primary-text} {
+        opacity: 1;
+    }
 }

package/lib/content-metadata/components/content-metadata/content-metadata.component.scss

@@ -5,8 +5,21 @@ $panel-properties-height: 56px !default;
 .adf {
     &-metadata-properties {
         .adf-content-metadata-panel {
+            box-shadow: none;
+            border: 1px solid var(--adf-metadata-property-panel-border-color);
+            border-radius: 12px;
             margin: 12px;
 
+            adf-card-view-textitem {
+                #{ms.$mat-form-field-subscript-wrapper} {
+                    display: none;
+                }
+
+                #{ms.$mat-form-field-infix} {
+                    padding-bottom: 0;
+                }
+            }
+
             .adf-property-list .adf-property .adf-property-field {
                 .adf-property-value:not(.adf-card-view-selectitem .adf-property-value) {
                     margin-top: 10px;
@@ -18,17 +31,37 @@ $panel-properties-height: 56px !default;
                 }
 
                 label {
-                    font: var(--mat-sys-headline-small);
+                    font-size: 19px;
+                    line-height: 20px;
                 }
             }
         }
 
         .adf-metadata-properties-header {
             height: $panel-properties-height;
+            padding: 0 12px;
+            border-radius: 12px 12px 0 0;
+
+            &.adf-metadata-properties-header-expanded {
+                border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
+            }
+        }
+
+        #{ms.$mat-expansion-panel-body} {
+            padding-top: 16px;
+
+            input {
+                border-color: transparent;
+                width: 100%;
+
+                &:focus-visible {
+                    outline: none;
+                }
+            }
         }
 
         .adf-edit-icon-buttons {
-            color: var(--mat-sys-on-secondary-container);
+            color: var(--adf-theme-foreground-text-color-054);
         }
 
         #{ms.$mat-chip} {
@@ -40,14 +73,13 @@ $panel-properties-height: 56px !default;
                 .mat-mdc-chip-action-label {
                     overflow: hidden;
                 }
-
                 /* stylelint-enable selector-class-pattern */
             }
         }
 
         .adf-metadata-no-item-added {
             word-break: break-all;
-            font: var(--mat-sys-body-small);
+            font-size: 15px;
             padding: 0 0 0 12px;
         }
 
@@ -61,5 +93,23 @@ $panel-properties-height: 56px !default;
     &-metadata-action-buttons {
         display: flex;
         justify-content: space-evenly;
+
+        &-clear {
+            color: var(--adf-metadata-action-button-clear-color);
+        }
+    }
+
+    &-metadata-categories-header {
+        .adf-categories-button {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 15px;
+            height: $panel-properties-height;
+
+            [hidden] {
+                visibility: hidden;
+            }
+        }
     }
 }

package/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss

@@ -10,9 +10,18 @@
     &-footer.adf-content-metadata-card-view-footer {
         margin: 0;
         padding: 8px 12px;
+        border-top: 1px solid var(--adf-theme-foreground-text-color-007);
         display: flex;
         place-content: stretch space-between;
         align-items: stretch;
         max-height: 100%;
+
+        button {
+            color: var(--adf-theme-foreground-text-color-054);
+
+            &:hover {
+                color: var(--adf-theme-foreground-text-color-087);
+            }
+        }
     }
 }

package/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss

@@ -1,17 +1,31 @@
+@use '../../mat-selectors.scss' as ms;
+
 /* stylelint-disable no-descending-specificity */
 $content-node-selector-thumbnail-width: 35px !default;
 $content-node-selector-thumbnail-max-width: 40px !default;
 
 h2.adf-search-results-label {
     flex: 1;
-    font: var(--mat-sys-body-medium);
+    font-weight: 600;
+    font-size: var(--theme-body-1-font-size);
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1.43;
+    letter-spacing: -0.2px;
+    color: var(--adf-theme-foreground-text-color-087);
+}
+
+#{ms.$mdc-dialog} {
+    #{ms.$mat-dialog-surface}:is(div) {
+        padding-bottom: 0;
+    }
 }
 
 .adf-content-node-selector-panel {
     .adf-toolbar .adf-toolbar-container.adf-toolbar-container-row {
         max-height: 48px;
         border-bottom-width: 0;
-        font-size: var(--mat-sys-body-medium-size);
+        font-size: var(--theme-body-1-font-size);
         height: auto;
     }
 }
@@ -27,6 +41,34 @@ h2.adf-search-results-label {
     }
 
     &-content {
+        #{ms.$mat-input-element} {
+            &:focus::placeholder {
+                color: var(--theme-primary-color);
+            }
+        }
+
+        #{ms.$mat-form-field-wrapper} {
+            #{ms.$mat-form-field-flex} {
+                align-items: center;
+
+                #{ms.$mat-form-field-infix} {
+                    padding-bottom: 0;
+                }
+            }
+        }
+
+        .adf-sites-dropdown-form-field {
+            label {
+                &#{ms.$mat-form-field-label} {
+                    top: 32px;
+                }
+            }
+        }
+
+        #{ms.$mat-form-field-subscript-wrapper} {
+            height: 16px;
+        }
+
         padding-top: 0;
 
         &-input {
@@ -34,11 +76,11 @@ h2.adf-search-results-label {
             margin-bottom: 8px;
 
             .adf-content-node-selector-content-input-icon:is(mat-icon) {
-                color: var(--mat-sys-on-secondary-container);
-                font: var(--mat-sys-body-medium);
+                color: var(--adf-theme-foreground-icon-color-054);
                 padding: 0 0 8px;
                 width: 1em;
                 height: 1em;
+                font-size: 20px;
             }
 
             .adf-content-node-selector-search-clear-button {
@@ -54,10 +96,14 @@ h2.adf-search-results-label {
                     cursor: pointer;
 
                     &:hover {
-                        color: var(--mat-sys-on-surface);
+                        color: var(--adf-theme-foreground-base-color);
                     }
                 }
             }
+
+            #{ms.$mat-form-field-subscript-wrapper} {
+                display: none;
+            }
         }
 
         .adf-site-dropdown-container {
@@ -74,16 +120,20 @@ h2.adf-search-results-label {
             outline: none;
 
             .adf-dropdown-breadcrumb-icon {
-                color: var(--mat-sys-on-secondary-container);
+                color: var(--adf-theme-foreground-base-color-045);
+
+                &:hover {
+                    color: var(--adf-theme-foreground-base-color-065);
+                }
             }
 
             &:focus .adf-dropdown-breadcrumb-icon {
-                color: var(--mat-sys-primary);
+                color: var(--theme-primary-color);
             }
         }
 
         .adf-dropdown-breadcrumb-item-chevron {
-            color: var(--mat-sys-on-secondary-container);
+            color: var(--adf-theme-foreground-base-color-045);
         }
     }
 
@@ -91,7 +141,7 @@ h2.adf-search-results-label {
     &-list {
         height: 40vh;
         overflow: auto;
-        border: 1px solid var(--mat-sys-outline-variant);
+        border: 1px solid var(--adf-theme-foreground-text-color-007);
         border-top: 0;
         position: relative;
 
@@ -102,7 +152,7 @@ h2.adf-search-results-label {
         }
 
         .adf-highlight {
-            color: var(--mat-sys-primary);
+            color: var(--theme-primary-color);
         }
 
         .adf-datatable-list {
@@ -118,7 +168,7 @@ h2.adf-search-results-label {
             }
 
             .adf-datatable-selected > svg {
-                fill: var(--mat-sys-primary);
+                fill: var(--theme-primary-color);
             }
 
             .adf-no-content-container.adf-datatable-cell {

package/lib/content-node-selector/content-node-selector.component.scss

@@ -2,6 +2,8 @@
 
 adf-content-node-selector {
     .adf-upload-dialog {
+        box-shadow: none;
+
         &__content {
             max-height: 64%;
         }
@@ -45,19 +47,61 @@ adf-content-node-selector {
     }
 
     .adf-dropdown-breadcrumb-icon {
-        color: var(--mat-sys-on-secondary-container);
+        color: var(--adf-theme-foreground-base-color-045);
+    }
+
+    #{ms.$mat-dialog-title} {
+        margin-bottom: 0;
+        padding: 0;
+
+        &::before {
+            display: none;
+        }
+    }
+
+    .adf-content-node-selector-dialog-title {
+        font-size: var(--theme-title-font-size);
+        font-weight: 600;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: 1.6;
+        letter-spacing: -0.5px;
+        color: var(--adf-theme-foreground-text-color-087);
+        margin-bottom: 20px;
+
+        h2 {
+            margin: unset;
+            font-size: unset;
+        }
     }
 
     .adf-content-node-selector-dialog-actions {
         padding: 8px;
         height: 77px;
+        background-color: var(--theme-background-color);
         display: flex;
         flex-direction: row;
         justify-content: space-between;
+        color: var(--adf-theme-foreground-text-color);
+
+        label {
+            text-transform: uppercase;
+            font-weight: normal;
+        }
+
+        .adf-choose-action {
+            &[disabled] {
+                color: var(--adf-theme-foreground-secondary-text-color);
+            }
+
+            &:enabled {
+                color: var(--theme-primary-color);
+            }
+        }
     }
 }
 
-@media screen and (width <=768px) {
+@media screen and (width <= 768px) {
     .adf-content-node-selector-dialog {
         height: 100vh;
     }

package/lib/content-node-selector/name-location-cell/name-location-cell.component.scss

@@ -2,7 +2,7 @@
     display: grid;
 
     &-location {
-        color: var(--mat-sys-on-secondary-container);
-        font: var(--mat-sys-body-small);
+        color: var(--adf-theme-foreground-text-color-054);
+        font-size: var(--theme-caption-font-size);
     }
 }