AAE-40649 Material Design 3 migration (#11286)

* AAE-38957 Cleanup code from color assignments on Material elements (#11266)

* AAE-38646   cleanup core lib from custom variables (#11259)

* AAE-38646 General cleanup of custom variables from core lib

* AAE-38646 Cleanup some of the remaining variables

* AAE-38646 Last color-mix removal

* AAE-38646 Reduce amount of customizations

* AAE-38646 apply overrides, reduce customization

* AAE-38646 modify remaining styles

* AAE-38646 Fix override assignemnts

* AAE-38646 Address comments, cleanup unused

* AAE-38978 Cleanup process-services-cloud lib from custom css variables (#11295)

* AAE-38978 Cleanup custom variables inside process-services-cloud lib

* AAE-38978 Adjust rich text widget styling

* AAE-38978 Comment fixes

* AAE-38980 Cleanup insights lib from custom css variables (#11314)

* AAE-38980 Cleanup insights lib from custom css variables

* AAE-38980 Removed unnecessarily specific selector

* AAE-38979 Cleanup content-services lib from custom css variables (#11313)

* AAE-38979 Remove/replace variable and hardcoded customizations

* AAE-38979 Cleanup unused @use and @import statements

* AAE-39159 Cleanup process-services lib from custom css variables (#11316)

* AAE-39159 Cleanup process-services lib from custom css variables

* AAE-39159 Fix import and build

* Fix build

* Remove leftover button customization

* fix missing brace

* AAE-39748 Pagination font size match md3

* fix incorrect html templates after rebase

* swap leftover variables

* fix units

* copilot comments

* visual regression result fixes

* CSX-204 Update card view components (#11358)

* CSX-535 Update background color on readonly for card view selectitem (#11799)

* remove invalid color test

* add stylelint rule

---------

Co-authored-by: Ehsan Rezaei <ehsan.rezaei@hyland.com>
Co-authored-by: Ricardo Dias <ricardo.dias@hyland.com>

lib/process-services-cloud/src/lib/app/components/app-details-cloud/app-details-cloud.component.scss

@@ -0,0 +1,168 @@
+/* stylelint-disable scss/no-global-function-names */
+@mixin adf-line-clamp($line-height: 1.25, $lines: 3) {
+    position: relative;
+    line-height: $line-height;
+    padding: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    /* stylelint-disable */
+    @supports (-webkit-line-clamp: 1) {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: $lines;
+        height: calc(0.99em * #{$line-height} * #{$lines});
+    }
+
+    @supports not (-webkit-line-clamp: 1) {
+        white-space: nowrap;
+        width: 100%;
+    }
+
+    /* stylelint-enable */
+}
+
+$tile-themes: (
+    theme-1: (
+        bg: #269abc,
+        color: #168aac
+    ),
+    theme-2: (
+        bg: #7da9b0,
+        color: #6d99a0
+    ),
+    theme-3: (
+        bg: #7689ab,
+        color: #66799b
+    ),
+    theme-4: (
+        bg: #c74e3e,
+        color: #b73e2e
+    ),
+    theme-5: (
+        bg: #fab96c,
+        color: #eaa95c
+    ),
+    theme-6: (
+        bg: #759d4c,
+        color: #658d3c
+    ),
+    theme-7: (
+        bg: #b1b489,
+        color: #a1a479
+    ),
+    theme-8: (
+        bg: #a17299,
+        color: #916289
+    ),
+    theme-9: (
+        bg: #696c67,
+        color: #595c57
+    ),
+    theme-10: (
+        bg: #cabb33,
+        color: #baab23
+    )
+);
+
+adf-cloud-app-details {
+    .adf-app-listgrid {
+        padding: 8px;
+        display: block;
+
+        .adf-app-listgrid-item {
+            outline: none;
+            padding: 8px;
+            box-sizing: border-box;
+            flex: unset;
+            max-width: unset;
+
+            &-card {
+                @for $i from 1 through 10 {
+                    &.theme-#{$i} {
+                        $tile-theme: map-get($tile-themes, theme-#{$i});
+
+                        background-color: map-get($tile-theme, bg);
+
+                        .adf-app-listgrid-item-card-logo-icon {
+                            color: map-get($tile-theme, color);
+                        }
+                    }
+                }
+
+                outline: none;
+                transition:
+                    transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
+                    box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+                min-height: 200px;
+                flex-direction: column;
+                box-sizing: border-box;
+                display: flex;
+                padding: 0;
+                max-width: unset;
+
+                &:hover {
+                    box-shadow:
+                        0 8px 10px 1px rgba(0, 0, 0, 0.14),
+                        0 3px 14px 2px rgba(0, 0, 0, 0.12),
+                        0 5px 5px -3px rgba(0, 0, 0, 0.2);
+                    cursor: pointer;
+                    transform: scale(1.015);
+                }
+
+                &-logo {
+                    position: absolute;
+                    right: 20px;
+                    top: 20px;
+                    padding: 16px;
+                    z-index: 9;
+
+                    .adf-app-listgrid-item-card-logo-icon {
+                        font-size: 70px;
+                        width: 1em;
+                        height: 1em;
+                    }
+                }
+
+                &-title:has(.adf-app-listgrid-item-card-title-text) {
+                    padding: 16px;
+                    margin-bottom: 0;
+                    z-index: 9999;
+
+                    h1 {
+                        color: white;
+                        width: 80%;
+                        font-size: var(--mat-sys-headline-small-size);
+                        margin: 0;
+                        line-height: normal;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                    }
+                }
+
+                &-subtitle:has(.adf-line-clamp) {
+                    color: white;
+                    z-index: 9999;
+                    padding: 16px;
+                    flex: 1 0 auto;
+
+                    .adf-line-clamp {
+                        @include adf-line-clamp(1.25, 3);
+                    }
+                }
+
+                &-actions {
+                    padding: 0 16px 16px;
+                    border-top: 1px solid rgba(0, 0, 0, 0.1);
+                    min-height: 48px;
+                    box-sizing: border-box;
+
+                    &-icon {
+                        color: #e9f1f3;
+                    }
+                }
+            }
+        }
+    }
+}

lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss

@@ -6,7 +6,6 @@
 .adf-full-screen {
     width: 100%;
     height: 100%;
-    background-color: var(--adf-theme-background-card-color);
 }
 
 .adf-cloud-form {
@@ -37,7 +36,7 @@
         top: 0;
         left: 0;
         z-index: 100000;
-        background-color: var(--adf-theme-mat-grey-color-a400);
+        background-color: var(--mat-sys-surface-container);
         display: block;
         height: 100%;
         width: 100vw;
@@ -61,13 +60,6 @@
         }
     }
 
-    &-toolbar ::ng-deep {
-        #{ms.$mat-toolbar} {
-            background-color: var(--adf-theme-background-card-color-087);
-            border-radius: 14px 14px 0 0;
-        }
-    }
-
     &-fullscreen-button {
         position: absolute;
         right: 70px;
@@ -75,7 +67,7 @@
     }
 
     &__display-name {
-        font-size: var(--theme-subheading-2-font-size);
+        font-size: var(--mat-sys-title-small-size);
         opacity: 0.87;
         line-height: 1.5;
         letter-spacing: -0.4px;
@@ -87,7 +79,6 @@
         overflow: hidden;
         display: inline-block;
         vertical-align: middle;
-        color: var(--adf-theme-foreground-text-color);
     }
 
     &__form-title {

lib/process-services-cloud/src/lib/form/components/spinner/form-spinner.component.html

@@ -1,7 +1,6 @@
 <div class="adf-cloud-form-spinner">
     <div class="adf-cloud-form-spinner-content">
         <mat-progress-spinner
-            color="primary"
             mode="indeterminate"
         />
         <span class="adf-cloud-form-spinner-content-message">

lib/process-services-cloud/src/lib/form/components/spinner/form-spinner.component.scss

@@ -13,7 +13,7 @@
             align-items: center;
 
             &-message {
-                font-size: var(--theme-body-4-font-size);
+                font-size: var(--mat-sys-body-large-size);
             }
         }
     }

lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html

@@ -10,7 +10,6 @@
                     (click)="openSelectDialog()"
                     mat-raised-button
                     class="adf-attach-widget__menu-upload__button"
-                    color="primary"
                     [id]="field.id"
                     [title]="field.tooltip">
                         {{ 'FORM.FIELD.ATTACH' | translate }}

lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss

@@ -25,15 +25,6 @@
         align-items: center;
         margin-right: 8px;
         word-break: normal;
-
-        .adf-attach-widget__menu-upload__button {
-            line-height: 28px;
-            font-size: var(--theme-caption-font-size);
-        }
-
-        button span {
-            font-size: var(--theme-caption-font-size);
-        }
     }
 
     &-attach-widget__input-type {
@@ -55,14 +46,13 @@
         word-break: break-all;
         padding: 0.4375em;
         border-bottom: none;
-        background: var(--adf-theme-mat-grey-color-a200);
+        background: var(--mat-sys-surface-variant);
         min-height: 27px;
         margin-bottom: 12px;
 
         .adf-label {
             width: 100%;
-            font-size: var(--theme-caption-font-size);
-            line-height: var(--theme-headline-line-height);
+            font: var(--mat-sys-body-small);
             text-align: left;
             white-space: normal;
             margin-left: 8px;
@@ -71,13 +61,6 @@
         }
     }
 
-    &-attach-widget__icon {
-        font-size: var(--theme-adf-picture-1-font-size);
-        height: var(--theme-adf-picture-1-font-size);
-        width: var(--theme-adf-picture-1-font-size);
-        line-height: calc(var(--theme-adf-picture-1-font-size) - 2px);
-    }
-
     &-attach-widget__reset {
         margin-top: -2px;
     }
@@ -93,7 +76,7 @@
     &-attach-selected-file-row {
         > div:first-child {
             .adf-datatable-selected {
-                color: var(--theme-primary-color);
+                color: var(--mat-sys-primary);
                 padding-right: 6px;
             }
         }

lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table/file-properties-table-cloud.component.scss

@@ -1,7 +1,7 @@
 .adf-file-properties-table-container {
     .adf-file-properties-table.adf-properties-table table {
         width: 100%;
-        border: 1px solid var(--adf-theme-foreground-text-color-007);
+        border: 1px solid var(--mat-sys-outline-variant);
         box-shadow: none;
 
         .adf-file {

lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.scss

@@ -3,7 +3,6 @@
 }
 
 .adf-preview-placeholder {
-    background-color: var(--adf-theme-mat-grey-color-50);
     height: 100%;
     width: 100%;
     min-height: 100px;

lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.scss

@@ -7,7 +7,6 @@
         }
 
         &-preview {
-            color: var(--adf-theme-foreground-secondary-text-color);
             word-break: break-all;
         }
     }

lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.scss

@@ -1,19 +1,10 @@
 .adf-display-rich-text-widget {
     pre {
         min-height: 100px;
-        font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
-        color: #41314e;
-        line-height: 1.6em;
-        font-size: 12px;
-        background: #f8f7fa;
-        border: 1px solid #f1f1f4;
-        box-shadow: none;
         white-space: pre;
         word-wrap: normal;
         overflow-x: auto;
         resize: vertical;
-        border-radius: 3px;
-        outline: none;
         width: 100%;
     }
 }

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss

@@ -9,10 +9,6 @@
             width: 100%;
         }
 
-        .adf-select-filter {
-            font-size: var(--theme-body-1-font-size);
-        }
-
         &-select {
             width: 100%;
         }

lib/process-services-cloud/src/lib/form/components/widgets/properties-viewer/properties-viewer.widget.scss

@@ -6,7 +6,7 @@ adf-properties-viewer-widget {
         display: block;
         height: 100%;
         width: 100%;
-        border: 1px solid var(--adf-theme-foreground-text-color-007);
+        border: 1px solid var(--mat-sys-outline-variant);
         border-radius: 6px;
 
         .adf-properties-viewer-wrapper-loading {

lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.html

@@ -16,7 +16,6 @@
                 [value]="opt.id"
                 [checked]="isChecked(opt)"
                 (change)="onOptionClick(opt.id)"
-                color="primary"
                 class="adf-radio-button" *ngFor="let opt of field.options" >
                 {{opt.name}}
             </mat-radio-button>

lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.scss

@@ -1,13 +1,4 @@
 .adf {
-    &-radio-buttons-widget-cloud {
-        .adf-label {
-            font-size: var(--adf-radio-buttons-font-size, var(--adf-form-label-font-size, var(--theme-caption-font-size)));
-            font-weight: var(--adf-radio-buttons-font-weight, var(--adf-form-label-font-weight, var(--theme-font-weight)));
-            color: var(--adf-radio-buttons-color, var(--adf-form-label-color, var(--adf-theme-foreground-secondary-text-color)));
-            line-height: normal;
-        }
-    }
-
     &-radio-button-container {
         display: flex;
         flex-direction: column;

lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss

@@ -10,10 +10,8 @@
 
             .adf-group-short-name {
                 margin-right: 20px;
-                background: var(--theme-primary-color);
                 width: 40px;
                 height: 40px;
-                box-shadow: none;
             }
         }
     }
@@ -22,24 +20,15 @@
         width: 100%;
 
         &-title {
-            color: var(--adf-theme-foreground-secondary-text-color);
+            color: var(--mat-sys-on-surface-variant);
 
             &--focus {
-                color: var(--theme-primary-color);
+                color: var(--mat-sys-primary);
             }
         }
 
-        &-option-active:not(&:disabled) {
-            color: var(--adf-theme-foreground-text-color);
-        }
-
-        &-option-not-active:not(&:active) {
-            background: inherit;
-            color: var(--adf-theme-foreground-secondary-text-color);
-        }
-
         &-error {
-            color: var(--theme-warn-color);
+            color: var(--mat-sys-error);
             margin-top: -10px;
             position: absolute;
             height: 20px;

lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss

@@ -2,16 +2,11 @@
     &-people-cloud {
         width: 100%;
 
-        &-option-not-active:not(&:active) {
-            background: inherit;
-            color: var(--adf-theme-foreground-secondary-text-color);
-        }
-
         &-title {
-            color: var(--adf-theme-foreground-secondary-text-color);
+            color: var(--mat-sys-on-surface-variant);
 
             &--focus {
-                color: var(--theme-primary-color);
+                color: var(--mat-sys-primary);
             }
         }
     }
@@ -21,14 +16,6 @@
         padding: 10px 0;
     }
 
-    &-people-cloud-option-active:not(&:disabled) {
-        color: var(--adf-theme-foreground-text-color);
-    }
-
-    &-people-cloud-option-not-active:not(&:active) {
-        color: var(--adf-theme-foreground-secondary-text-color);
-    }
-
     &-people-cloud-row {
         display: flex;
         align-items: center;
@@ -36,7 +23,7 @@
     }
 
     &-people-cloud-pic {
-        background: var(--theme-primary-color);
+        background: var(--mat-sys-primary);
         display: flex;
         justify-content: center;
         align-items: center;
@@ -58,10 +45,4 @@
             width: auto;
         }
     }
-
-    &-error,
-    &-error-text,
-    &-error-icon {
-        color: var(--theme-warn-color);
-    }
 }

lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter/edit-process-filter-cloud.component.html

@@ -88,10 +88,10 @@
                                [attr.data-automation-id]="'adf-cloud-edit-process-property-date-toggle-' + processFilterProperty.key" />
                             <mat-datepicker #dateController [attr.data-automation-id]="'adf-cloud-edit-process-property-date-picker-' + processFilterProperty.key" />
                             <div class="adf-edit-process-filter-date-error-container">
-                                <div *ngIf="hasError(processFilterProperty)">
+                                <mat-error *ngIf="hasError(processFilterProperty)">
                                     <div class="adf-error-text">{{'ADF_CLOUD_EDIT_PROCESS_FILTER.ERROR.DATE' | translate}}</div>
                                     <mat-icon class="adf-error-icon" adf-icon="warning" />
-                                </div>
+                                </mat-error>
                             </div>
                         </mat-form-field>
 

lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter/edit-process-filter-cloud.component.scss

@@ -15,16 +15,8 @@
     .adf-error-text {
         padding-right: 8px;
         height: 16px;
-        font-size: var(--theme-caption-font-size);
-        line-height: 1.33;
-        color: var(--theme-warn-color);
         width: auto;
     }
-
-    .adf-error-icon {
-        font-size: var(--theme-subheading-2-font-size);
-        color: var(--theme-warn-color);
-    }
 }
 
 .adf {
@@ -64,24 +56,9 @@
         &-header {
             height: 48px;
 
-            &__title {
-                color: var(--adf-theme-foreground-text-color);
-            }
-
             &__description {
-                color: var(--adf-theme-foreground-secondary-text-color);
                 place-content: center space-between;
             }
         }
-
-        &-content {
-            &__text-label {
-                color: var(--adf-theme-foreground-secondary-text-color);
-            }
-
-            &__select-label {
-                color: var(--adf-theme-foreground-secondary-text-color);
-            }
-        }
     }
 }

lib/process-services-cloud/src/lib/process/process-filters/components/process-filters/process-filters-cloud.component.scss

@@ -3,14 +3,14 @@
 .adf-process-filters {
     &__entry-counter {
         padding: 0 5px;
-        border-radius: var(--mat-sys-corner-large, 15px);
+        border-radius: var(--mat-sys-corner-large);
 
         &.adf-active {
-            background-color: var(--mat-sys-secondary, var(--theme-accent-color));
+            background-color: var(--mat-sys-secondary);
 
             @include mat.list-overrides(
                 (
-                    list-item-trailing-supporting-text-color: var(--mat-sys-on-secondary, var(--theme-accent-color-default-contrast))
+                    list-item-trailing-supporting-text-color: var(--mat-sys-on-secondary)
                 )
             );
         }

lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.scss

@@ -1,3 +0,0 @@
-.adf-process-header-cloud-card {
-    background-color: var(--adf-theme-background-card-color);
-}

lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.ts

@@ -36,7 +36,6 @@ import { NgIf } from '@angular/common';
     imports: [CardViewComponent, MatCardModule, NgIf],
     templateUrl: './process-header-cloud.component.html',
     encapsulation: ViewEncapsulation.None,
-    styleUrls: ['./process-header-cloud.component.scss'],
     host: { class: 'adf-cloud-process-header' }
 })
 export class ProcessHeaderCloudComponent implements OnChanges, OnInit {

lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.html

@@ -140,7 +140,7 @@
     </mat-card>
 } @else {
     <div class="adf-loading-container">
-        <mat-progress-spinner class="adf-loading" color="primary" mode="indeterminate" />
+        <mat-progress-spinner class="adf-loading" mode="indeterminate" />
     </div>
 }
 

lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss

@@ -1,9 +1,5 @@
 .adf {
     &-start-process {
-        .adf-start-process-input-label {
-            color: var(--adf-theme-mat-grey-color-a200-dark);
-        }
-
         &-cloud-actions {
             display: flex;
             justify-content: flex-end;

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter/edit-service-task-filter-cloud.component.html

@@ -76,15 +76,15 @@
                             <mat-datepicker #dateController
                                             [attr.data-automation-id]="'adf-cloud-edit-task-property-date-picker-' + taskFilterProperty.key" />
                             <div class="adf-edit-task-filter-date-error-container">
-                                <div *ngIf="hasError(taskFilterProperty)">
+                                <mat-error *ngIf="hasError(taskFilterProperty)">
                                     <div class="adf-error-text">{{'ADF_TASK_LIST.START_TASK.FORM.ERROR.DATE'|translate}}</div>
                                     <mat-icon class="adf-error-icon" adf-icon="warning" />
-                                </div>
+                                </mat-error>
                             </div>
                         </mat-form-field>
                         <div class="adf-edit-task-filter-checkbox"
                              *ngIf="taskFilterProperty.type === 'checkbox'">
-                            <mat-checkbox color="primary"
+                            <mat-checkbox
                                           [formControlName]="taskFilterProperty.key"
                                           [attr.data-automation-id]="taskFilterProperty.key"
                             >{{taskFilterProperty.label | translate}}</mat-checkbox>

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter/edit-service-task-filter-cloud.component.scss

@@ -1,7 +1,6 @@
 @use '../../../../../flex' as flex;
 
 .adf-edit-task-filter-checkbox {
-    font-size: var(--theme-subheading-2-font-size);
     padding-top: 10px;
     text-align: center;
     flex: 1 23%;
@@ -22,16 +21,8 @@
     .adf-error-text {
         padding-right: 8px;
         height: 16px;
-        font-size: 10px;
-        line-height: 1.33;
-        color: var(--theme-warn-color);
         width: auto;
     }
-
-    .adf-error-icon {
-        font-size: 16px;
-        color: var(--theme-warn-color);
-    }
 }
 
 .adf-edit-task-filter-dateRange mat-grid-list {
@@ -74,24 +65,9 @@
         &-header {
             height: 48px;
 
-            &__title {
-                color: var(--adf-theme-foreground-text-color);
-            }
-
             &__description {
-                color: var(--adf-theme-foreground-secondary-text-color);
                 place-content: center space-between;
             }
         }
-
-        &-content {
-            &__text-label {
-                color: var(--adf-theme-foreground-secondary-text-color);
-            }
-
-            &__select-label {
-                color: var(--adf-theme-foreground-secondary-text-color);
-            }
-        }
     }
 }

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter/edit-task-filter-cloud.component.html

@@ -76,15 +76,15 @@
                             <mat-datepicker #dateController
                                             [attr.data-automation-id]="'adf-cloud-edit-task-property-date-picker-' + taskFilterProperty.key" />
                             <div class="adf-edit-task-filter-date-error-container">
-                                <div *ngIf="hasError(taskFilterProperty)">
+                                <mat-error *ngIf="hasError(taskFilterProperty)">
                                     <div class="adf-error-text">{{'ADF_TASK_LIST.START_TASK.FORM.ERROR.DATE'|translate}}</div>
                                     <mat-icon class="adf-error-icon" adf-icon="warning" />
-                                </div>
+                                </mat-error>
                             </div>
                         </mat-form-field>
                         <div class="adf-edit-task-filter-checkbox"
                              *ngIf="taskFilterProperty.type === 'checkbox'">
-                            <mat-checkbox color="primary"
+                            <mat-checkbox
                                           [formControlName]="taskFilterProperty.key"
                                           [attr.data-automation-id]="taskFilterProperty.key"
                             >{{taskFilterProperty.label | translate}}</mat-checkbox>

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter/edit-task-filter-cloud.component.scss

@@ -1,7 +1,6 @@
 @use '../../../../../flex' as flex;
 
 .adf-edit-task-filter-checkbox {
-    font-size: var(--theme-subheading-2-font-size);
     padding-top: 10px;
     text-align: center;
     flex: 1 23%;
@@ -22,16 +21,8 @@
     .adf-error-text {
         padding-right: 8px;
         height: 16px;
-        font-size: 10px;
-        line-height: 1.33;
-        color: var(--theme-warn-color);
         width: auto;
     }
-
-    .adf-error-icon {
-        font-size: 16px;
-        color: var(--theme-warn-color);
-    }
 }
 
 .adf-edit-task-filter-dateRange mat-grid-list {
@@ -74,24 +65,9 @@
         &-header {
             height: 48px;
 
-            &__title {
-                color: var(--adf-theme-foreground-text-color);
-            }
-
             &__description {
-                color: var(--adf-theme-foreground-secondary-text-color);
                 place-content: center space-between;
             }
         }
-
-        &-content {
-            &__text-label {
-                color: var(--adf-theme-foreground-secondary-text-color);
-            }
-
-            &__select-label {
-                color: var(--adf-theme-foreground-secondary-text-color);
-            }
-        }
     }
 }

lib/process-services-cloud/src/lib/task/task-filters/components/service-task-filters/service-task-filters-cloud.component.scss

@@ -1,9 +1,9 @@
 .adf-task-filters {
-    margin-right: calc(-1 * var(--adf-theme-spacing));
+    margin-right: -16px;
 
     &__entry {
-        font-size: var(--theme-body-1-font-size);
-        color: var(--adf-theme-foreground-text-color-054);
+        font-size: var(--mat-sys-body-medium-size);
+        color: var(--mat-sys-on-surface-variant);
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -11,7 +11,7 @@
         height: 100%;
 
         &:hover {
-            color: var(--theme-primary-color);
+            color: var(--mat-sys-primary);
         }
     }
 
@@ -19,7 +19,7 @@
         display: flex;
         flex: 1;
         align-items: center;
-        gap: var(--adf-theme-spacing);
+        gap: 16px;
     }
 
     &__entry-counter {
@@ -27,13 +27,13 @@
         border-radius: 15px;
 
         &.adf-active {
-            background-color: var(--theme-accent-color);
-            color: var(--theme-accent-color-default-contrast);
+            background-color: var(--mat-sys-secondary);
+            color: var(--mat-sys-on-secondary);
             font-size: smaller;
         }
     }
 
     .adf-active .adf-task-filters__entry-label {
-        color: var(--theme-primary-color);
+        color: var(--mat-sys-primary);
     }
 }

lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.scss

@@ -9,22 +9,6 @@
     &-container {
         width: 100%;
     }
-
-    &-label {
-        color: var(--adf-theme-foreground-secondary-text-color);
-
-        &.adf-task-assignment-filter-label--focus {
-            color: var(--theme-primary-color);
-        }
-    }
-
-    &-option {
-        color: var(--adf-theme-foreground-text-color);
-
-        &.adf-task-assignment-filter-option--selected:not(&:disabled) {
-            color: var(--theme-primary-color);
-        }
-    }
 }
 
 .adf-group-cloud-filter {

lib/process-services-cloud/src/lib/task/task-filters/components/task-filters/task-filters-cloud.component.scss

@@ -3,14 +3,14 @@
 .adf-task-filters {
     &__entry-counter {
         padding: 0 5px;
-        border-radius: var(--mat-sys-corner-large, 15px);
+        border-radius: var(--mat-sys-corner-large);
 
         &.adf-active {
-            background-color: var(--mat-sys-secondary, var(--theme-accent-color));
+            background-color: var(--mat-sys-secondary);
 
             @include mat.list-overrides(
                 (
-                    list-item-trailing-supporting-text-color: var(--mat-sys-on-secondary, var(--theme-accent-color-default-contrast))
+                    list-item-trailing-supporting-text-color: var(--mat-sys-on-secondary)
                 )
             );
         }

lib/process-services-cloud/src/lib/task/task-form/components/user-task-cloud/user-task-cloud.component.html

@@ -83,8 +83,7 @@
                             [taskId]="taskId"
                             (success)="onCompleteTask(false, taskType)"
                             (error)="onError($event)"
-                            color="primary"
-                            id="adf-form-complete"
+                                id="adf-form-complete"
                         >
                             {{ customCompleteButtonText || ('ADF_CLOUD_TASK_FORM.EMPTY_FORM.BUTTONS.COMPLETE' | translate) }}
                         </button>

lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.scss

@@ -14,12 +14,12 @@
 
     &-switch-to-edit-mode,
     &-save-edit-mode {
-        color: var(--theme-primary-color);
+        color: var(--mat-sys-primary);
     }
 
     &-cancel-edit-mode,
     &-claim-controls {
-        color: rgb(131, 131, 131);
+        color: var(--mat-sys-on-surface-variant);
     }
 
     &-task-header-loading {