[AAE-14726] apply design tokens for ProcessHeaderCloudComponent (#9189)

* [AAE-15295] added design tokens to PeopleCloudComponent

* [AAE-15295] re-add initials picture background

* [AAE-15294] replaced reference variables with theme

* [AAE-15294] applied design tokens for GroupCloudComponent

* [AAE-15206] add tokens for label

* [AAE-15206] replaced reference variables with theme values

* [AAE-15206] remove last remaining reference colors

* [AAE-19026] Fix app permissions (#9171)

* [AAE-15295] added design tokens to PeopleCloudComponent (#9162)

* [AAE-15295] added design tokens to PeopleCloudComponent

* [AAE-15294] separate component variables

* [AAE-15294] fix rebase

* [AAE-15294] readded background color to cloud pic

* [AAE-15294] rebase

* [AAE-15294] remove duplicate theme pick

* [AAE-15294] applied design tokens for GroupCloudComponent

* [AAE-15294] applied design tokens for GroupCloudComponent

* [AAE-15206] apply design tokens for TaskAssignmentFilterCloudComponent

* [AAE-15206] replaced reference variables with theme values

* [AAE-19026] Fix app permissions (#9171)

* [AAE-15294] separate component variables

* [AAE-15206] remove duplicate palette pick

* [AAE-15294] applied design tokens for GroupCloudComponent

* [AAE-15294] replaced reference variables with theme

* [AAE-15294] applied design tokens for GroupCloudComponent

* [AAE-15206] replaced reference variables with theme values

* [AAE-19026] Fix app permissions (#9171)

* [AAE-15294] applied design tokens for GroupCloudComponent

* [AAE-15206] replaced reference variables with theme values

* [AAE-14726] apply design tokens for ProcessHeaderCloudComponent

* [AAE-14726] remove additional palette pick

* [AAE-14726] fix comp variables

---------

Co-authored-by: Michał Fidor <42964298+MichalFidor@users.noreply.github.com>

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

@@ -88,7 +88,9 @@
         --adf-task-assignment-filter-option-default-color: mat.get-color-from-palette($foreground, text),
         --adf-task-assignment-filter-option-selected-color: mat.get-color-from-palette($primary),
         --adf-task-assignment-filter-label-default-color: mat.get-color-from-palette($foreground, secondary-text),
-        --adf-task-assignment-filter-label-focus-color: mat.get-color-from-palette($primary)
+        --adf-task-assignment-filter-label-focus-color: mat.get-color-from-palette($primary),
+
+        --adf-process-header-cloud-card-background: mat.get-color-from-palette($background, card)
     );
 
     // propagates SCSS variables into the CSS variables scope

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

@@ -1,5 +1,5 @@
-<mat-card *ngIf="processInstanceDetails">
+<mat-card *ngIf="processInstanceDetails" class="adf-process-header-cloud-card">
   <mat-card-content>
     <adf-card-view [properties]="properties"></adf-card-view>
   </mat-card-content>
-</mat-card>
+</mat-card>

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

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