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

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

@@ -9,8 +9,7 @@ adf-aspect-list-dialog {
 }
 
 .adf-aspect-list-dialog-title {
-    font-size: large;
-    font-weight: 200;
+    font: var(--mat-sys-headline-medium);
     margin-top: 0;
 }
 
@@ -44,11 +43,6 @@ 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(--adf-theme-foreground-text-color-007);
+        border: 1px solid var(--mat-sys-outline-variant);
 
         .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: 0 2px 2px -1px var(--adf-theme-foreground-text-color-007);
+            box-shadow: var(--mat-sys-level-2);
 
             &.adf-hover {
                 &:hover {
-                    background-color: var(--adf-theme-background-hover-color);
+                    background-color: var(--mat-sys-surface-container);
                 }
             }
         }
@@ -47,8 +47,6 @@ $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;
@@ -56,13 +54,13 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
             }
 
             &-header {
-                font-size: smaller;
+                font: var(--mat-sys-body-small);
                 padding-left: 0;
                 height: 48px;
             }
 
             &-header-title {
-                color: var(--theme-secondary-text);
+                color: var(--mat-sys-on-secondary-container);
             }
 
             &-header-description {
@@ -82,8 +80,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-size: 12px;
-            color: var(--adf-theme-foreground-text-color-054);
+            font: var(--mat-sys-body-small);
+            color: var(--mat-sys-on-secondary-container);
         }
 
         .adf-aspect-property-table-column {

package/lib/breadcrumb/breadcrumb.component.scss

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

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

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

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

@@ -1,28 +1,8 @@
-@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 {
@@ -52,23 +32,11 @@
         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-size: 10px;
-        color: var(--theme-secondary-text-color);
+        font: var(--mat-sys-body-small);
+        color: var(--mat-sys-on-secondary-container);
         margin-bottom: 2px;
     }
 
@@ -81,12 +49,8 @@
     min-height: 22vh;
 
     .adf-create-category-label {
-        color: var(--theme-primary-color);
+        color: var(--mat-sys-primary);
         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,21 +5,8 @@ $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;
@@ -31,37 +18,17 @@ $panel-properties-height: 56px !default;
                 }
 
                 label {
-                    font-size: 19px;
-                    line-height: 20px;
+                    font: var(--mat-sys-headline-small);
                 }
             }
         }
 
         .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(--adf-theme-foreground-text-color-054);
+            color: var(--mat-sys-on-secondary-container);
         }
 
         #{ms.$mat-chip} {
@@ -73,13 +40,14 @@ $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-size: 15px;
+            font: var(--mat-sys-body-small);
             padding: 0 0 0 12px;
         }
 
@@ -93,23 +61,5 @@ $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,18 +10,9 @@
     &-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,31 +1,17 @@
-@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-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;
-    }
+    font: var(--mat-sys-body-medium);
 }
 
 .adf-content-node-selector-panel {
     .adf-toolbar .adf-toolbar-container.adf-toolbar-container-row {
         max-height: 48px;
         border-bottom-width: 0;
-        font-size: var(--theme-body-1-font-size);
+        font-size: var(--mat-sys-body-medium-size);
         height: auto;
     }
 }
@@ -41,34 +27,6 @@ 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 {
@@ -76,11 +34,11 @@ h2.adf-search-results-label {
             margin-bottom: 8px;
 
             .adf-content-node-selector-content-input-icon:is(mat-icon) {
-                color: var(--adf-theme-foreground-icon-color-054);
+                color: var(--mat-sys-on-secondary-container);
+                font: var(--mat-sys-body-medium);
                 padding: 0 0 8px;
                 width: 1em;
                 height: 1em;
-                font-size: 20px;
             }
 
             .adf-content-node-selector-search-clear-button {
@@ -96,14 +54,10 @@ h2.adf-search-results-label {
                     cursor: pointer;
 
                     &:hover {
-                        color: var(--adf-theme-foreground-base-color);
+                        color: var(--mat-sys-on-surface);
                     }
                 }
             }
-
-            #{ms.$mat-form-field-subscript-wrapper} {
-                display: none;
-            }
         }
 
         .adf-site-dropdown-container {
@@ -120,20 +74,16 @@ h2.adf-search-results-label {
             outline: none;
 
             .adf-dropdown-breadcrumb-icon {
-                color: var(--adf-theme-foreground-base-color-045);
-
-                &:hover {
-                    color: var(--adf-theme-foreground-base-color-065);
-                }
+                color: var(--mat-sys-on-secondary-container);
             }
 
             &:focus .adf-dropdown-breadcrumb-icon {
-                color: var(--theme-primary-color);
+                color: var(--mat-sys-primary);
             }
         }
 
         .adf-dropdown-breadcrumb-item-chevron {
-            color: var(--adf-theme-foreground-base-color-045);
+            color: var(--mat-sys-on-secondary-container);
         }
     }
 
@@ -141,7 +91,7 @@ h2.adf-search-results-label {
     &-list {
         height: 40vh;
         overflow: auto;
-        border: 1px solid var(--adf-theme-foreground-text-color-007);
+        border: 1px solid var(--mat-sys-outline-variant);
         border-top: 0;
         position: relative;
 
@@ -152,7 +102,7 @@ h2.adf-search-results-label {
         }
 
         .adf-highlight {
-            color: var(--theme-primary-color);
+            color: var(--mat-sys-primary);
         }
 
         .adf-datatable-list {
@@ -168,7 +118,7 @@ h2.adf-search-results-label {
             }
 
             .adf-datatable-selected > svg {
-                fill: var(--theme-primary-color);
+                fill: var(--mat-sys-primary);
             }
 
             .adf-no-content-container.adf-datatable-cell {

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

@@ -2,8 +2,6 @@
 
 adf-content-node-selector {
     .adf-upload-dialog {
-        box-shadow: none;
-
         &__content {
             max-height: 64%;
         }
@@ -47,61 +45,19 @@ adf-content-node-selector {
     }
 
     .adf-dropdown-breadcrumb-icon {
-        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;
-        }
+        color: var(--mat-sys-on-secondary-container);
     }
 
     .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(--adf-theme-foreground-text-color-054);
-        font-size: var(--theme-caption-font-size);
+        color: var(--mat-sys-on-secondary-container);
+        font: var(--mat-sys-body-small);
     }
 }