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

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

@@ -1,31 +1,20 @@
-@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(--theme-card-background-color);
+            background-color: var(--mat-sys-surface);
             border-radius: 16px;
         }
 
         &__label,
         &__title,
         &__info {
-            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);
+            font: var(--mat-sys-body-medium);
+            color: var(--mat-sys-on-surface);
         }
 
         &__label {
@@ -35,25 +24,19 @@
         &__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(--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);
         }
 
         &__warn {
-            color: var(--theme-warn-color-a700);
-            font-size: var(--theme-caption-font-size);
+            color: var(--mat-sys-error);
+            font: var(--mat-sys-body-small);
         }
 
         &--row {
@@ -82,12 +65,8 @@
             padding-bottom: 0;
         }
 
-        &__input {
-            color: var(--adf-theme-foreground-text-color-087);
-        }
-
         &__separation-line {
-            border: 1px solid var(--theme-grey-background-color);
+            border: 1px solid var(--mat-sys-outline-variant);
             margin: 8px -24px;
         }
 
@@ -97,7 +76,7 @@
         }
 
         &__icon {
-            color: var(--adf-theme-foreground-icon-color-054);
+            color: var(--mat-sys-on-secondary-container);
             padding-bottom: 0;
             padding-right: 0;
         }
@@ -109,7 +88,7 @@
 
         &__heading {
             font-weight: 700;
-            font-size: var(--theme-subheading-2-font-size);
+            font-size: var(--mat-sys-title-small-size);
         }
 
         &__copy-icon {
@@ -133,7 +112,7 @@
         }
 
         &__border-color {
-            border: 1px solid var(--theme-warn-color-a700);
+            border: 1px solid var(--mat-sys-error);
         }
     }
 
@@ -158,8 +137,6 @@
         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,14 +6,12 @@
     }
 
     &-content-type-dialog-title {
-        font-size: large;
-        font-weight: 200;
+        font: var(--mat-sys-title-large);
         margin-top: 0;
     }
 
     &-content-type-dialog-description {
-        font-size: small;
-        line-height: normal;
+        font: var(--mat-sys-body-small);
     }
 
     &-content-type-table {
@@ -21,6 +19,6 @@
     }
 
     &-content-type-dialog-apply-button {
-        color: var(--theme-primary-color);
+        color: var(--mat-sys-primary);
     }
 }

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

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

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

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

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

@@ -1,23 +1,10 @@
-@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-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);
+        font: var(--mat-sys-title-medium);
+        color: var(--mat-sys-on-surface);
     }
 
     .adf-add-permission-dialog-content {
@@ -30,17 +17,6 @@
             &-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 {
@@ -59,23 +35,22 @@
 
     .adf-add-permission-dialog-actions {
         padding: 0 24px;
-        background-color: var(--theme-background-color);
+        background-color: var(--mat-sys-surface);
         display: flex;
         justify-content: flex-end;
-        color: var(--adf-theme-foreground-text-color);
+        color: var(--mat-sys-on-surface);
 
         button {
             text-transform: uppercase;
-            font-weight: normal;
         }
 
         .adf-choose-action {
             &[disabled] {
-                color: var(--adf-theme-foreground-secondary-text-color);
+                color: var(--mat-sys-on-surface-variant);
             }
 
             &:enabled {
-                color: var(--theme-primary-color);
+                color: var(--mat-sys-primary);
             }
         }
     }

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

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

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

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

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

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

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

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

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

@@ -10,26 +10,14 @@ 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(--theme-text-color);
+        border: 1px solid var(--mat-sys-on-surface);
         border-radius: 10px;
-        background-color: var(--theme-primary-color-default-contrast);
+        background-color: var(--mat-sys-on-primary);
         height: auto;
         word-break: break-word;
         padding: 4px 0;
@@ -43,19 +31,19 @@ adf-search-chip-autocomplete-input {
     }
 
     .adf-option-chips-delete-button.adf-autocomplete-added-option-chips-delete-button {
-        font-size: 13px;
-        height: 13px;
-        width: 13px;
+        font: var(--mat-sys-body-small);
+        height: var(--mat-sys-body-small-size);
+        width: var(--mat-sys-body-small-size);
 
         .adf-option-chips-delete-icon.adf-autocomplete-added-option-chips-delete-icon {
-            font-size: 13px;
-            height: 13px;
-            width: 13px;
+            font: var(--mat-sys-body-small);
+            height: var(--mat-sys-body-small-size);
+            width: var(--mat-sys-body-small-size);
         }
     }
 }
 
 .adf-search-chip-autocomplete-added-option.adf-autocomplete-added-option {
-    background: var(--adf-theme-mat-grey-color-a200);
-    color: var(--adf-theme-primary-300);
+    background: var(--mat-sys-surface-variant);
+    color: var(--mat-sys-primary);
 }

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

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

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

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