@alfresco/adf-core 8.4.0-19063861366 → 8.4.0-19066231420

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

@@ -1,9 +1,19 @@
 .adf-package-list-table {
+    background: var(--adf-theme-background-card-color);
+
     &__header-row {
         min-height: 56px;
     }
 
+    &__header-cell {
+        color: var(--adf-theme-foreground-secondary-text-color);
+    }
+
     &__row {
         min-height: 48px;
+
+        &-cell {
+            color: var(--adf-theme-foreground-text-color);
+        }
     }
 }

package/lib/about/about-server-settings/about-server-settings.component.scss

@@ -1,5 +1,7 @@
 .adf-about-server-settings {
     &__card {
+        background: var(--adf-theme-background-card-color);
+        color: var(--adf-theme-foreground-text-color);
         border-radius: 4px;
         padding: 16px;
 

package/lib/about/about.component.scss

@@ -1,5 +1,9 @@
 .adf-about-panel {
     &-header {
         height: 48px;
+
+        &__title {
+            color: var(--adf-theme-foreground-text-color);
+        }
     }
 }

package/lib/avatar/avatar.component.scss

@@ -3,16 +3,18 @@
 }
 
 .adf-avatar__image {
-    cursor: auto;
+    cursor: var(--adf-avatar-cursor, auto);
     display: inline-block;
     overflow: hidden;
     line-height: 1;
-    border-radius: 50%;
-    width: 32px;
-    height: 32px;
-    color: var(--mat-sys-on-primary);
-    background-color: var(--mat-sys-primary);
-    box-shadow: var(--mat-sys-level2);
+    border-radius: var(--adf-avatar-border-radius, 50%);
+    width: var(--adf-avatar-size, 32px);
+    height: var(--adf-avatar-size, 32px);
+    color: var(--adf-avatar-color, #333);
+    background-color: var(--adf-avatar-background-color, #f3f3f3);
+    box-shadow: 0 0 0 1px var(--adf-avatar-border-color, rgba(31, 35, 40, 0.15));
+    font-size: var(--adf-avatar-font-size, 14px);
+    font-weight: var(--adf-avatar-font-weight, 500);
     text-align: center;
     align-content: center;
 }

package/lib/button/button.component.scss

@@ -0,0 +1,13 @@
+adf-button {
+    // custom styles
+
+    .adf-button__content {
+        // custom styles
+    }
+
+    .adf-button__icon {
+        font-size: var(--adf-button-icon-size, 24px);
+        width: var(--adf-button-icon-size, 24px);
+        height: var(--adf-button-icon-size, 24px);
+    }
+}

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

@@ -2,13 +2,22 @@
 
 .adf-property-list {
     border: unset;
-    border-color: var(--mat-sys-outline);
+    border-color: var(--adf-theme-foreground-divider-color);
     border-radius: 0;
 
     .adf-property-label {
+        color: var(--adf-metadata-property-panel-text-color);
         display: flex;
         line-height: 20px;
         margin-bottom: 4px;
+
+        &.adf-property-readonly-value {
+            color: var(--adf-metadata-property-panel-label-color);
+        }
+
+        &.adf-property-value-editable {
+            color: var(--adf-metadata-property-panel-title-color);
+        }
     }
 
     .adf-property-container {
@@ -29,6 +38,10 @@
 
                 &.adf-property-value-editable {
                     padding: 6px 0 6px 12px;
+
+                    &:disabled {
+                        color: var(--adf-metadata-property-panel-label-color);
+                    }
                 }
             }
 
@@ -76,22 +89,33 @@
 
     .adf-property-value {
         &.adf-property-value-editable {
+            background-color: var(--adf-metadata-buttons-background-color);
             box-sizing: border-box;
             border-radius: 6px;
             height: 32px;
             padding-left: 10px;
 
             #{ms.$mat-input-element} {
+                color: var(--adf-metadata-action-button-clear-color);
                 padding: 5px 0 6px 12px;
                 margin: 5px 0 0;
             }
         }
 
         &.adf-property-readonly-value {
-            color: var(--mat-sys-surface-dim);
+            color: var(--adf-metadata-property-panel-label-color);
+
+            #{ms.$mat-input-element} {
+                color: var(--adf-metadata-property-panel-label-color);
+            }
+        }
+
+        &-has-error {
+            border: 1px solid var(--theme-warn-color);
         }
 
         &-input {
+            background-color: var(--adf-metadata-buttons-background-color);
             box-sizing: border-box;
             border-radius: 6px;
             padding: 6px 0;

package/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss

@@ -5,6 +5,15 @@
         margin-right: 5px;
     }
 
+    &-array-item-action {
+        color: var(--adf-theme-foreground-text-color-025);
+    }
+
+    &-array-item-action:hover,
+    &-array-item-action:focus {
+        color: var(--adf-theme-foreground-text-color);
+    }
+
     &-card-array-item-default {
         overflow: hidden;
         text-overflow: ellipsis;
@@ -32,7 +41,8 @@
         display: flex;
         place-content: center space-between;
         align-items: center;
-        border-color: var(--mat-sys-outline-variant);
+        background: var(--adf-theme-background-card-color);
+        border-color: var(--adf-theme-foreground-divider-color);
         border-radius: 0;
 
         #{ms.$mat-chip}:hover {

package/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss

@@ -46,6 +46,7 @@
         padding-top: 6px;
         padding-bottom: 6px;
         line-height: 20px;
+        color: var(--adf-metadata-property-panel-title-color);
         margin-top: 10px;
 
         &.adf-property-value-editable {

package/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss

@@ -6,6 +6,7 @@
     }
 
     .adf-select-filter-input {
+        background: var(--adf-theme-background-card-color);
         position: sticky;
         top: 0;
         left: 0;
@@ -28,6 +29,10 @@
             margin-top: 0;
             border-radius: 6px;
 
+            #{ms.$mat-select-value} {
+                color: var(--adf-metadata-action-button-clear-color);
+            }
+
             #{ms.$mat-select-trigger} {
                 padding-left: 6px;
                 padding-right: 6px;
@@ -49,7 +54,7 @@
         white-space: nowrap;
         cursor: default;
         padding: 6px 0;
-        border-bottom: 1px solid var(--mat-sys-outline-variant);
+        border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
     }
 
     #{ms.$mat-line-ripple} {
@@ -57,7 +62,7 @@
     }
 
     .adf-property-readonly-value {
-        color: var(--mat-sys-surface-dim);
+        color: var(--adf-metadata-property-panel-label-color);
     }
 
     .adf-property-label {

package/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss

@@ -9,9 +9,12 @@ $select-filter-height: 4em !default;
     .adf-select-filter-input-container {
         width: 100%;
         z-index: 100;
+        font-size: var(--theme-body-1-font-size);
+        color: var(--adf-theme-foreground-text-color-087);
         line-height: 3em;
         height: $select-filter-height;
         padding: 5px 16px 0;
+        background: var(--adf-theme-background-card-color);
     }
 
     #{ms.$mat-form-field} {

package/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss

@@ -2,6 +2,7 @@
 
 .adf-card-view-textitem {
     .adf-textitem-error {
+        font-size: var(--theme-caption-font-size);
         padding-top: 6px;
 
         &::before {
@@ -25,6 +26,12 @@
         height: 30px;
         padding: 0;
         line-height: 20px;
+        color: var(--adf-theme-foreground-text-color-025);
+
+        &:hover,
+        &:focus {
+            color: var(--adf-theme-foreground-text-color);
+        }
 
         #{ms.$mat-button-touch-target} {
             width: 30px;
@@ -55,10 +62,30 @@
     .adf-textitem-clickable {
         cursor: pointer;
         padding-top: 3px;
+
+        .adf-textitem-action:hover {
+            color: var(--adf-theme-foreground-text-color);
+        }
+
+        .adf-property-field {
+            #{ms.$mat-input-element} {
+                color: var(--theme-primary-color);
+                cursor: pointer;
+            }
+        }
+    }
+
+    .adf-textitem-default-value {
+        color: var(--adf-theme-foreground-text-color-054);
     }
 
     .adf-property-read-only:not(:has(.adf-property-readonly-value)) {
-        border-bottom: 1px solid var(--mat-sys-outline-variant);
+        border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
+    }
+
+    .adf-property-value-not-editable {
+        /* stylelint-disable-next-line declaration-no-important */
+        color: var(--adf-metadata-property-panel-title-color);
     }
 
     .adf-property-value-has-icon-suffix {

package/lib/clipboard/clipboard.theme.scss

@@ -1,8 +1,8 @@
 .adf-copy-tooltip {
     position: absolute;
-    background: var(--mat-sys-primary);
-    color: var(--mat-sys-on-primary);
-    font-size: var(--mat-sys-body-small-size);
+    background: var(--theme-primary-color);
+    color: var(--theme-primary-color-default-contrast);
+    font-size: var(--theme-caption-font-size);
     padding: 2px 5px;
     border-radius: 5px;
     bottom: 93%;

package/lib/comments/comment-list/comment-list.component.scss

@@ -1,6 +1,5 @@
 .adf-comment-list {
     padding-bottom: 0;
-
     .adf {
         &-comment-img-container {
             width: 40px;
@@ -11,7 +10,6 @@
         }
 
         &-comment-list-item:has(.adf-comment-img-container) {
-            /* stylelint-disable-next-line declaration-property-value-disallowed-list */
             white-space: initial;
             display: table-row-group;
             padding-top: 12px;
@@ -28,8 +26,10 @@
                     width: 100%;
                     padding: 2px 10px;
                     white-space: pre-line;
+                    font-size: var(--theme-body-1-font-size);
                     letter-spacing: -0.2px;
                     line-height: 1.43;
+                    color: var(--adf-theme-foreground-text-color);
                 }
             }
         }
@@ -37,10 +37,10 @@
         &-comment-user-icon {
             padding: 10px 5px;
             width: 30px;
-            background-color: var(--mat-sys-primary);
-            color: var(--mat-sys-on-primary);
+            background-color: var(--theme-primary-color);
+            color: var(--theme-primary-color-default-contrast);
             border-radius: 50%;
-            font-size: var(--mat-sys-title-small-size);
+            font-size: var(--theme-subheading-2-font-size);
             text-align: center;
             height: 20px;
             background-size: cover;
@@ -50,6 +50,7 @@
             width: 100%;
             padding: 2px 10px;
             font-weight: 600;
+            font-size: var(--theme-body-1-font-size);
         }
 
         &-comment-message-time {
@@ -57,6 +58,7 @@
             width: 100%;
             padding: 2px 10px;
             font-size: unset;
+            color: var(--adf-theme-foreground-text-color);
         }
 
         &-people-img {

package/lib/comments/comments.component.scss

@@ -10,6 +10,35 @@ adf-comments {
             width: 100%;
             padding-bottom: 8px;
 
+            #{ms.$mat-form-field} {
+                width: 100%;
+
+                &#{ms.$mat-form-field-invalid} {
+                    #{ms.$mat-input-element} {
+                        &::placeholder,
+                        &:focus::placeholder {
+                            color: var(--theme-warn-color);
+                        }
+                    }
+                }
+            }
+
+            #{ms.$mat-form-field-wrapper} {
+                #{ms.$mat-form-field-flex} {
+                    #{ms.$mat-form-field-infix} {
+                        padding-bottom: 2px;
+                        padding-top: 25px;
+                    }
+                }
+
+                #{ms.$mat-input-element} {
+                    &:focus::placeholder {
+                        color: var(--theme-primary-color);
+                        -webkit-font-smoothing: subpixel-antialiased;
+                    }
+                }
+            }
+
             textarea {
                 resize: vertical;
                 height: 20px;
@@ -18,12 +47,12 @@ adf-comments {
     }
 
     .adf-comments-divider {
-        border-bottom: 1px solid var(--mat-sys-outline);
+        border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
     }
 
     .adf-comments-header {
         padding: 10px 0;
-        font-size: var(--mat-sys-body-medium-size);
+        font-size: var(--theme-body-1-font-size);
         font-weight: 600;
     }
 

package/lib/datatable/components/columns-selector/columns-selector.component.scss

@@ -21,6 +21,10 @@ $adf-columns-selector-space: 12px;
         align-items: center;
     }
 
+    &-header-label {
+        font-size: var(--theme-body-1-font-size);
+    }
+
     &-list-container {
         max-height: 350px;
         overflow: hidden auto;
@@ -30,7 +34,7 @@ $adf-columns-selector-space: 12px;
         margin-top: 10px;
 
         &:hover {
-            background-color: var(--mat-sys-surface-container);
+            background-color: var(--adf-theme-background-hover-color);
         }
     }
 
@@ -43,8 +47,8 @@ $adf-columns-selector-space: 12px;
     }
 
     &-subtitle {
-        color: var(--mat-sys-on-surface);
-        font-size: var(--mat-sys-body-small-size);
+        color: var(--adf-theme-foreground-text-color);
+        font-size: var(--theme-caption-font-size);
         opacity: 0.6;
         display: flex;
         column-gap: 3px;
@@ -53,6 +57,9 @@ $adf-columns-selector-space: 12px;
 
     &-subtitle-icon {
         margin-top: 3px;
+        height: var(--theme-caption-font-size);
+        width: var(--theme-caption-font-size);
+        font-size: var(--theme-caption-font-size);
     }
 
     &-column-checkbox {
@@ -84,7 +91,8 @@ $adf-columns-selector-space: 12px;
         width: 100%;
         outline: 0;
         border-radius: 6px;
-        border: 1px solid var(--mat-sys-surface);
+        border: 1px solid var(--theme-background-color);
+        background: var(--theme-background-color);
 
         &:focus {
             outline: none;
@@ -95,7 +103,6 @@ $adf-columns-selector-space: 12px;
         position: absolute;
         left: 17px;
         top: 10px;
-        font-size: var(--mat-sys-label-large-size);
-        line-height: var(--mat-sys-label-large-line-height);
+        font-size: var(--theme-adf-icon-1-font-size);
     }
 }