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

package/lib/content-node-share/content-node-share.dialog.scss

@@ -1,20 +1,31 @@
+@use '../mat-selectors.scss' as ms;
+
 .adf-share-link-dialog {
     .adf-share-link {
+        #{ms.$mat-form-field-flex} {
+            height: 48px;
+        }
+
         &__dialog-content {
             display: flex;
             flex-direction: column;
         }
 
         &__dialog-container {
-            background-color: var(--mat-sys-surface);
+            background-color: var(--theme-card-background-color);
             border-radius: 16px;
         }
 
         &__label,
         &__title,
         &__info {
-            font: var(--mat-sys-body-medium);
-            color: var(--mat-sys-on-surface);
+            letter-spacing: -0.4px;
+            line-height: 2;
+            font-weight: normal;
+            font-style: normal;
+            font-stretch: normal;
+            font-size: var(--theme-body-1-font-size);
+            color: var(--adf-theme-foreground-text-color-087);
         }
 
         &__label {
@@ -24,19 +35,25 @@
         &__form {
             padding-top: 8px;
 
+            #{ms.$mat-form-field-infix}:has(.adf-share-link__input) {
+                border-top: 0.9375em solid transparent;
+                border-bottom: 0.9375em solid transparent;
+                height: 16px;
+            }
+
             &--field {
                 padding-bottom: 16px;
             }
         }
 
         &__public-content {
-            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);
         }
 
         &__warn {
-            color: var(--mat-sys-error);
-            font: var(--mat-sys-body-small);
+            color: var(--theme-warn-color-a700);
+            font-size: var(--theme-caption-font-size);
         }
 
         &--row {
@@ -65,8 +82,12 @@
             padding-bottom: 0;
         }
 
+        &__input {
+            color: var(--adf-theme-foreground-text-color-087);
+        }
+
         &__separation-line {
-            border: 1px solid var(--mat-sys-outline-variant);
+            border: 1px solid var(--theme-grey-background-color);
             margin: 8px -24px;
         }
 
@@ -76,7 +97,7 @@
         }
 
         &__icon {
-            color: var(--mat-sys-on-secondary-container);
+            color: var(--adf-theme-foreground-icon-color-054);
             padding-bottom: 0;
             padding-right: 0;
         }
@@ -88,7 +109,7 @@
 
         &__heading {
             font-weight: 700;
-            font-size: var(--mat-sys-title-small-size);
+            font-size: var(--theme-subheading-2-font-size);
         }
 
         &__copy-icon {
@@ -112,7 +133,7 @@
         }
 
         &__border-color {
-            border: 1px solid var(--mat-sys-error);
+            border: 1px solid var(--theme-warn-color-a700);
         }
     }
 
@@ -137,6 +158,8 @@
         margin: 8px 0 0;
 
         & > button {
+            color: var(--adf-theme-foreground-base-color);
+            background-color: var(--theme-grey-text-background-color);
             margin-right: 12px;
         }
     }

package/lib/content-type/content-type-dialog.component.scss

@@ -6,12 +6,14 @@
     }
 
     &-content-type-dialog-title {
-        font: var(--mat-sys-title-large);
+        font-size: large;
+        font-weight: 200;
         margin-top: 0;
     }
 
     &-content-type-dialog-description {
-        font: var(--mat-sys-body-small);
+        font-size: small;
+        line-height: normal;
     }
 
     &-content-type-table {
@@ -19,6 +21,6 @@
     }
 
     &-content-type-dialog-apply-button {
-        color: var(--mat-sys-primary);
+        color: var(--theme-primary-color);
     }
 }

package/lib/dialogs/folder/folder.dialog.scss

@@ -1,7 +1,26 @@
+@use '../../mat-selectors.scss' as ms;
+
 .adf-folder-dialog {
     .adf-folder-dialog-content {
         padding: 0;
         overflow: unset;
+
+        #{ms.$mat-form-field-infix} {
+            padding-bottom: 3.5px;
+        }
+
+        #{ms.$mat-form-field-hide-placeholder} {
+            #{ms.$mat-floating-label} {
+                padding-top: 20px;
+            }
+        }
+
+        #{ms.$mat-form-field-hint-wrapper} {
+            padding-left: 0;
+            margin-left: -2px;
+            color: var(--adf-theme-foreground-secondary-text-color);
+            font-size: 10.5px;
+        }
     }
 
     .adf-folder-dialog-title {
@@ -22,14 +41,14 @@
 }
 
 .adf-dialog-action-button:enabled {
-    color: var(--mat-sys-primary);
+    color: var(--theme-primary-color);
 }
 
 .adf-dialog-action-button:disabled > span {
-    color: var(--mat-sys-on-secondary-container);
+    color: var(--adf-theme-foreground-text-color-054);
 }
 
-@media screen and (width <=380px) {
+@media screen and (width <= 380px) {
     .adf-folder-dialog-title {
         margin: 0;
     }

package/lib/document-list/components/document-list.component.scss

@@ -3,7 +3,7 @@
 .adf-document-list {
     min-height: 0;
     height: 100%;
-    background-color: var(--mat-sys-surface);
+    background-color: var(--theme-background-color);
 }
 
 .adf-sticky-document-list {
@@ -13,7 +13,7 @@
 
 .adf-datatable-card {
     .adf-datatable-selected > svg {
-        fill: var(--mat-sys-primary);
+        fill: var(--theme-accent-color);
         width: 30px;
         height: 30px;
         position: absolute;
@@ -26,7 +26,7 @@
         display: inline-table;
 
         & > svg {
-            fill: var(--mat-sys-primary);
+            fill: var(--theme-accent-color);
             width: 30px;
             height: 30px;
         }
@@ -55,26 +55,37 @@
     }
 
     &--text {
-        color: var(--mat-sys-on-surface);
-        font-size: var(--mat-sys-title-small-size);
+        color: var(--adf-theme-foreground-text-color);
+        font-size: var(--theme-subheading-2-font-size);
     }
 }
 
 .adf-document-list__this-space-is-empty {
     height: 32px;
-    font: var(--mat-sys-display-medium);
+    opacity: 0.26;
+    font-size: var(--theme-headline-font-size);
+    line-height: 1.33;
+    letter-spacing: -1px;
+    color: var(--adf-theme-foreground-text-color);
 }
 
 .adf-document-list__drag-drop {
     height: 56px;
-    font: var(--mat-sys-display-medium);
+    opacity: 0.54;
+    font-size: 56px;
+    line-height: 1;
+    letter-spacing: -2px;
+    color: var(--adf-theme-foreground-text-color);
     margin-top: 40px;
 }
 
 .adf-document-list__any-files-here-to-add {
     height: 24px;
-    font: var(--mat-sys-title-medium);
-    color: var(--mat-sys-on-surface);
+    opacity: 0.54;
+    font-size: var(--theme-subheading-2-font-size);
+    line-height: 1.5;
+    letter-spacing: -0.4px;
+    color: var(--adf-theme-foreground-text-color);
     margin-top: 17px;
 }
 
@@ -98,11 +109,15 @@
 
 .adf-empty-list-header {
     height: 32px;
-    font: var(--mat-sys-display-medium);
+    opacity: 0.26;
+    font-size: var(--theme-headline-font-size);
+    line-height: 1.33;
+    letter-spacing: -1px;
+    color: var(--adf-theme-foreground-text-color);
 }
 
 .adf-documentlist-pagination {
-    color: var(--mat-sys-on-surface);
+    color: var(--adf-theme-foreground-text-color);
 
     .adf-pagination__block {
         border-right: none;
@@ -112,24 +127,33 @@
 .adf-empty-folder {
     &-this-space-is-empty {
         height: 32px;
-        font: var(--mat-sys-display-medium);
+        font-size: var(--theme-headline-font-size);
+        line-height: 1.33;
+        letter-spacing: -1px;
+        color: var(--adf-theme-foreground-text-color-054);
     }
 
     &-drag-drop {
         min-height: 56px;
-        font: var(--mat-sys-display-medium);
+        font-size: 53px;
+        line-height: 1;
+        letter-spacing: -2px;
+        color: var(--adf-theme-foreground-text-color);
         margin-top: 40px;
         word-break: break-all;
         white-space: pre-line;
 
         @include flex.layout-bp(lt-sm) {
-            font: var(--mat-sys-display-small);
+            font-size: 48px;
         }
     }
 
     &-any-files-here-to-add {
         min-height: 24px;
-        font: var(--mat-sys-title-medium);
+        font-size: var(--theme-subheading-2-font-size);
+        line-height: 1.5;
+        letter-spacing: -0.4px;
+        color: var(--adf-theme-foreground-text-color);
         margin-top: 17px;
         word-break: break-all;
         white-space: pre-line;

package/lib/new-version-uploader/new-version-uploader.dialog.scss

@@ -11,8 +11,14 @@
 
     .adf-new-version-uploader-dialog-title {
         flex: 0 0 auto;
-        font: var(--mat-sys-title-medium);
+        font-size: 20px;
+        font-weight: 600;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: 1.6;
         margin: 0;
+        letter-spacing: -0.5px;
+        color: var(--adf-theme-foreground-text-color-087);
     }
 
     section.adf-new-version-uploader-dialog-content {
@@ -28,11 +34,12 @@
         padding: 8px 8px 24px 8px;
         display: flex;
         justify-content: flex-end;
-        color: var(--mat-sys-on-secondary-container);
+        color: var(--adf-theme-foreground-text-color-054);
         -webkit-font-smoothing: antialiased;
 
         button {
             text-transform: uppercase;
+            font-weight: normal;
         }
     }
 

package/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss

@@ -1,10 +1,23 @@
+@use '../../../mat-selectors.scss' as ms;
+
+#{ms.$mdc-dialog} {
+    #{ms.$mat-dialog-surface}:is(div) {
+        padding-bottom: 0;
+    }
+}
+
 .adf-add-permission-dialog {
     .adf-add-permission-dialog-title {
         margin-bottom: 28px;
         margin-left: 20px;
         margin-right: 20px;
-        font: var(--mat-sys-title-medium);
-        color: var(--mat-sys-on-surface);
+        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);
     }
 
     .adf-add-permission-dialog-content {
@@ -17,6 +30,17 @@
             &-search-user-button {
                 width: 100%;
                 justify-content: unset;
+
+                #{ms.$mat-button-label} {
+                    padding-right: 0;
+                }
+
+                #{ms.$mat-icon} {
+                    font-size: 24px;
+                    width: 24px;
+                    height: 24px;
+                    margin-left: 0;
+                }
             }
 
             &-add-member-action {
@@ -35,22 +59,23 @@
 
     .adf-add-permission-dialog-actions {
         padding: 0 24px;
-        background-color: var(--mat-sys-surface);
+        background-color: var(--theme-background-color);
         display: flex;
         justify-content: flex-end;
-        color: var(--mat-sys-on-surface);
+        color: var(--adf-theme-foreground-text-color);
 
         button {
             text-transform: uppercase;
+            font-weight: normal;
         }
 
         .adf-choose-action {
             &[disabled] {
-                color: var(--mat-sys-on-surface-variant);
+                color: var(--adf-theme-foreground-secondary-text-color);
             }
 
             &:enabled {
-                color: var(--mat-sys-primary);
+                color: var(--theme-primary-color);
             }
         }
     }

package/lib/permission-manager/components/add-permission/add-permission-panel.component.scss

@@ -1,3 +1,5 @@
+@use '../../../mat-selectors.scss' as ms;
+
 $search-result-height: calc(100% - 60px);
 
 .adf {
@@ -5,7 +7,11 @@ $search-result-height: calc(100% - 60px);
         display: flex;
         height: $search-result-height;
         overflow: auto;
-        border: 2px solid var(--mat-sys-outline-variant);
+        border: 2px solid var(--adf-theme-foreground-text-color-007);
+
+        #{ms.$mat-list-item-end} {
+            display: none;
+        }
 
         &-elements {
             width: 100%;
@@ -32,7 +38,7 @@ $search-result-height: calc(100% - 60px);
         justify-content: space-around;
         height: $search-result-height;
         overflow: auto;
-        border: 2px solid var(--mat-sys-outline-variant);
+        border: 2px solid var(--adf-theme-foreground-text-color-007);
     }
 
     &-permission-no-result {
@@ -48,9 +54,24 @@ $search-result-height: calc(100% - 60px);
             padding-bottom: 0;
             padding-top: 12px;
 
+            #{ms.$mat-form-field-wrapper} {
+                #{ms.$mat-form-field-flex} {
+                    align-items: center;
+
+                    #{ms.$mat-form-field-infix} {
+                        padding-top: 0;
+                        padding-bottom: 0;
+                    }
+                }
+            }
+
+            #{ms.$mat-form-field-subscript-wrapper} {
+                height: 16px;
+            }
+
             .adf-permission-search-input-control {
                 &:focus::placeholder {
-                    color: var(--mat-sys-primary);
+                    color: var(--theme-primary-color);
                 }
             }
 
@@ -58,6 +79,7 @@ $search-result-height: calc(100% - 60px);
                 padding: 0 0 12px;
                 width: 1em;
                 height: 1em;
+                font-size: 20px;
             }
 
             .adf-permission-search-input-clear-button {
@@ -70,7 +92,7 @@ $search-result-height: calc(100% - 60px);
                     cursor: pointer;
 
                     &:hover {
-                        color: var(--mat-sys-on-surface);
+                        color: var(--adf-theme-foreground-base-color);
                     }
                 }
             }
@@ -83,7 +105,7 @@ $search-result-height: calc(100% - 60px);
         }
 
         &:enabled {
-            color: var(--mat-sys-primary);
+            color: var(--theme-primary-color);
         }
     }
 }

package/lib/permission-manager/components/add-permission/add-permission.component.scss

@@ -0,0 +1,11 @@
+.adf {
+    &-permission-action {
+        &[disabled] {
+            opacity: 0.6;
+        }
+
+        &:enabled {
+            color: var(--theme-primary-color);
+        }
+    }
+}

package/lib/permission-manager/components/permission-list/permission-list.component.scss

@@ -21,10 +21,13 @@
         justify-content: space-between;
         align-items: center;
         padding: 10px 15px;
-        border: 1px solid var(--mat-sys-outline-variant);
+        border: 1px solid var(--adf-theme-foreground-text-color-007);
 
         .adf-permission-visibility-toggle {
             .adf-permission-visibility-toggle-icon {
+                font-size: 24px;
+                height: 24px;
+                width: 24px;
                 margin: 1px 0 0 4px;
             }
         }
@@ -105,6 +108,6 @@
     .adf-pop-over-card {
         width: 100%;
         overflow: hidden;
-        box-shadow: var(--mat-sys-level-2);
+        box-shadow: 0 8px 9px -5px var(--adf-theme-foreground-divider-color), 0 15px 22px 2px var(--adf-theme-foreground-divider-color);
     }
 }

package/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss

@@ -1,22 +1,27 @@
 .adf-cell-value {
     .adf-people-initial {
-        background: var(--mat-sys-primary);
+        background: var(--theme-primary-color);
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
         width: 40px;
         height: 40px;
-        color: var(--mat-sys-on-primary);
-        font: var(--mat-sys-body-small);
+        color: var(--theme-primary-color-default-contrast);
+        font-weight: bolder;
+        font-size: var(--theme-adf-picture-1-font-size);
         text-transform: uppercase;
     }
 
     .adf-group-icon {
-        background: var(--mat-sys-primary);
+        height: 20px;
+        width: 20px;
+        background: var(--theme-primary-color);
         border-radius: 50%;
         padding: 10px;
-        color: var(--mat-sys-on-primary);
+        color: var(--theme-primary-color-default-contrast);
+        font-weight: bolder;
+        font-size: var(--theme-title-font-size);
     }
 
     .adf-datatable-selected {
@@ -30,7 +35,7 @@
         margin: 0;
 
         svg {
-            fill: var(--mat-sys-secondary);
+            fill: var(--theme-accent-color);
             width: 40px;
             height: 40px;
         }

package/lib/permission-manager/components/user-name-column/user-name-column.component.scss

@@ -1,9 +1,13 @@
 .adf-user {
     &-name-column {
-        font: var(--mat-sys-body-medium);
+        font-weight: 600;
+        font-size: var(--theme-body-1-font-size);
     }
 
     &-email-column {
-        font: var(--mat-sys-body-medium);
+        font-size: var(--theme-body-1-font-size);
+        letter-spacing: -0.2px;
+        line-height: 1.43;
+        color: var(--adf-theme-foreground-text-color);
     }
 }

package/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss

@@ -10,14 +10,26 @@ adf-search-chip-autocomplete-input {
         margin-top: 4px;
     }
 
+    #{ms.$mat-form-text-field-infix} {
+        border: none;
+    }
+
+    .adf-chip-list#{ms.$mat-form-field} {
+        #{ms.$mat-form-field-infix} {
+            padding-top: 14px;
+            padding-bottom: 14px;
+            min-height: unset;
+        }
+    }
+
     .adf-search-properties-file-input {
         margin-left: 3px;
     }
 
     .adf-autocomplete-added-option-chips.adf-option-chips {
-        border: 1px solid var(--mat-sys-on-surface);
+        border: 1px solid var(--theme-text-color);
         border-radius: 10px;
-        background-color: var(--mat-sys-on-primary);
+        background-color: var(--theme-primary-color-default-contrast);
         height: auto;
         word-break: break-word;
         padding: 4px 0;
@@ -31,19 +43,19 @@ adf-search-chip-autocomplete-input {
     }
 
     .adf-option-chips-delete-button.adf-autocomplete-added-option-chips-delete-button {
-        font: var(--mat-sys-body-small);
-        height: var(--mat-sys-body-small-size);
-        width: var(--mat-sys-body-small-size);
+        font-size: 13px;
+        height: 13px;
+        width: 13px;
 
         .adf-option-chips-delete-icon.adf-autocomplete-added-option-chips-delete-icon {
-            font: var(--mat-sys-body-small);
-            height: var(--mat-sys-body-small-size);
-            width: var(--mat-sys-body-small-size);
+            font-size: 13px;
+            height: 13px;
+            width: 13px;
         }
     }
 }
 
 .adf-search-chip-autocomplete-added-option.adf-autocomplete-added-option {
-    background: var(--mat-sys-surface-variant);
-    color: var(--mat-sys-primary);
+    background: var(--adf-theme-mat-grey-color-a200);
+    color: var(--adf-theme-primary-300);
 }

package/lib/search/components/search-chip-list/search-chip-list.component.scss

@@ -1,9 +1,9 @@
 .adf-search-chip-list-item:focus {
-    color: var(--mat-sys-on-secondary);
-    background-color: var(--mat-sys-secondary);
+    color: var(--theme-accent-color-default-contrast);
+    background-color: var(--theme-accent-color);
 
     .adf-search-chip-list-item-remove {
-        color: var(--mat-sys-on-secondary);
+        color: var(--theme-accent-color-default-contrast);
         opacity: 1;
     }
 }

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

@@ -18,10 +18,11 @@ $mat-menu-overlay-max-width: 280px !default; // 56 * 5
         max-height: 400px;
         margin-left: 45px;
         margin-top: -22px;
-        font: var(--mat-sys-body-large);
+        font-size: var(--theme-subheading-1-font-size);
         z-index: 5;
-        color: var(--mat-sys-on-surface);
-        background-color: var(--mat-sys-surface);
+        color: var(--adf-theme-foreground-text-color);
+        background-color: var(--adf-theme-background-card-color);
+        border-radius: 2px;
 
         @include flex.layout-bp(lt-md) {
             white-space: nowrap;
@@ -32,7 +33,7 @@ $mat-menu-overlay-max-width: 280px !default; // 56 * 5
 
     &-search-autocomplete-item {
         &:hover {
-            background-color: var(--mat-sys-surface-container);
+            background-color: var(--adf-theme-background-hover-color);
             opacity: 1;
         }
     }