[AAE-15149] Added reference variables to edit task filter component (#8636)

* AAE-15149: Added reference variables to edit task filter component

* AAE-15149: Added component variables

* AAE-15149: updated variable names

* AAE-15149: updated class names targeting directly the elements

* AAE-15149: updated class names targeting directly the elements

* AAE-15149: Fixed lint errors

lib/core/src/lib/styles/_components-variables.scss

@@ -0,0 +1,16 @@
+@use './reference-variables' as *;
+
+@mixin adf-components-variables() {
+    $defaults: (
+        --adf-edit-task-and-service-filter-header-title-color: $adf-ref-edit-task-and-service-filter-header-title-color,
+        --adf-edit-task-and-service-filter-header-description-color: $adf-ref-edit-task-and-service-filter-header-description-color,
+        --adf-edit-task-and-service-filter-header-height: $adf-ref-edit-task-and-service-filter-header-height,
+    );
+
+    // propagates SCSS variables into the CSS variables scope
+    :root {
+        @each $name, $value in $defaults {
+            #{$name}: #{$value};
+        }
+    }
+}

lib/core/src/lib/styles/_index.scss

@@ -10,6 +10,7 @@
 @import '../clipboard/clipboard.theme';
 @import './snackbar.theme';
 @import './material.theme';
+@import './components-variables';
 @import '../../../../../node_modules/@mat-datetimepicker/core/datetimepicker/datetimepicker-theme';
 
 @mixin alfresco-material-theme($theme) {
@@ -112,6 +113,7 @@
     @include mat-datetimepicker-theme($theme);
     @include adf-snackbar-theme;
     @include adf-material-theme;
+    @include adf-components-variables;
 }
 
 $adf-custom-theme-sizes: (

lib/core/src/lib/styles/_reference-variables.scss

@@ -0,0 +1,3 @@
+$adf-ref-edit-task-and-service-filter-header-title-color: rgba(0, 0, 0, 0.87);          
+$adf-ref-edit-task-and-service-filter-header-description-color: rgba(0, 0, 0, 0.54);          
+$adf-ref-edit-task-and-service-filter-header-height: 48px;

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

@@ -1,10 +1,10 @@
-<mat-accordion [hideToggle]="isLoading">
+<mat-accordion [hideToggle]="isLoading" class="adf-edit-task-filter">
     <mat-expansion-panel (afterExpand)="onExpand()" (closed)="onClose()">
-        <mat-expansion-panel-header *ngIf="taskFilter" id="adf-edit-task-filter-expansion-header">
+        <mat-expansion-panel-header *ngIf="taskFilter" id="adf-edit-task-filter-expansion-header" class="adf-edit-task-filter-header">
             <ng-container *ngIf="!isLoading; else loadingTemplate">
-                <mat-panel-title *ngIf="showTaskFilterName" id="adf-edit-task-filter-title-id"
+                <mat-panel-title *ngIf="showTaskFilterName" id="adf-edit-task-filter-title-id" class="adf-edit-task-filter-header__title"
                     >{{taskFilter.name | translate}}</mat-panel-title>
-                <mat-panel-description class="adf-edit-task-filter-description" id="adf-edit-task-filter-sub-title-id">
+                <mat-panel-description class="adf-edit-task-filter-header__description" id="adf-edit-task-filter-sub-title-id">
                     <span *ngIf="showTitle">{{ 'ADF_CLOUD_EDIT_TASK_FILTER.TITLE' | translate}}</span>
                     <div *ngIf="showFilterActions" class="adf-cloud-edit-task-filter-actions">
                         <ng-container *ngIf="toggleFilterActions">

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

@@ -42,10 +42,6 @@
         margin-right: calc((100% - 100px) / 2);
     }
 
-    &-edit-task-filter-description {
-        place-content: center space-between;
-    }
-
     &-edit-task-filter-form {
         flex-flow: row wrap;
         display: flex;
@@ -72,4 +68,19 @@
             }
         }
     }
+
+    &-edit-task-filter {
+        &-header {
+            height: var(--adf-edit-task-and-service-filter-header-height);
+
+            &__title {
+                color: var(--adf-edit-task-and-service-filter-header-title-color);
+            }
+
+            &__description {
+                color: var(--adf-edit-task-and-service-filter-header-description-color);
+                place-content: center space-between;
+            }
+        }
+    }
 }