[AAE-15294] applied design tokens for GroupCloudComponent (#9168)

* [AAE-15295] added design tokens to PeopleCloudComponent

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

* [AAE-15294] applied design tokens for GroupCloudComponent

* [AAE-15294] replaced reference variables with theme

* [AAE-15294] applied design tokens for GroupCloudComponent

* [AAE-15206] apply design tokens for TaskAssignmentFilterCloudComponent

* [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] fixed lint

* [AAE-15294] rebase

* [AAE-15294] remove duplicate theme pick

* [AAE-15294] fix whitespace in label

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

@@ -71,12 +71,19 @@
         --adf-people-cloud-autosuggest-result-active-color: mat.get-color-from-palette($foreground, text),
         --adf-people-cloud-autosuggest-result-disabled-color: mat.get-color-from-palette($foreground, secondary-text),
         --adf-people-cloud-input-caption-error-color: mat.get-color-from-palette($warn),
+
         --adf-metadata-property-panel-border-color: $adf-ref-metadata-property-panel-border-color,
         --adf-metadata-buttons-background-color: $adf-ref-metadata-buttons-background-color,
         --adf-metadata-action-button-clear-color: $adf-ref-metadata-action-button-clear-color,
         --adf-metadata-property-panel-text-color: $adf-ref-metadata-property-panel-text-color,
         --adf-metadata-property-panel-label-color: $adf-ref-metadata-property-panel-label-color,
         --adf-metadata-property-panel-title-color: $adf-ref-metadata-property-panel-title-color,
+
+        --adf-group-cloud-input-label-default-color: mat.get-color-from-palette($foreground, secondary-text),
+        --adf-group-cloud-input-label-focus-color: mat.get-color-from-palette($primary),
+        --adf-group-cloud-autosuggest-result-active-color: mat.get-color-from-palette($foreground, text),
+        --adf-group-cloud-autosuggest-result-disabled-color: mat.get-color-from-palette($foreground, secondary-text),
+        --adf-group-cloud-input-caption-error-color: mat.get-color-from-palette($warn)
     );
 
     // propagates SCSS variables into the CSS variables scope

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

@@ -1,7 +1,7 @@
 <form>
-    <mat-form-field class="adf-cloud-group" [class.adf-invalid]="hasError() && isDirty()">
+    <mat-form-field floatLabel="auto" class="adf-cloud-group" [class.adf-invalid]="hasError() && isDirty()">
-        <mat-label *ngIf="!isReadonly()"
+        <mat-label *ngIf="!isReadonly()" id="adf-group-cloud-title-id" class="adf-cloud-group-title"
-            id="adf-group-cloud-title-id">{{ (title || 'ADF_CLOUD_GROUPS.SEARCH-GROUP') | translate }}</mat-label>
+            [ngClass]="{'adf-cloud-group-title--focus': isFocused}">{{ (title || 'ADF_CLOUD_GROUPS.SEARCH-GROUP') | translate }}</mat-label>
         <mat-chip-list #groupChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-group-chip-list">
             <mat-chip
                 *ngFor="let group of selectedGroups"

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

@@ -1,4 +1,15 @@
 .adf {
+    &-group-short-name {
+        background: var(--theme-primary-color);
+        width: 40px;
+        height: 40px;
+        box-shadow: none !important;
+
+        .mat-button-wrapper {
+            display: inline !important;
+        }
+    }
+
     &-cloud-group-list {
         margin: 5px 0;
         padding: 10px 0;
@@ -17,15 +28,25 @@
     &-cloud-group {
         width: 100%;
 
-        &-option-not-active {
+        &-title {
-            background: inherit !important;
+            color: var(--adf-group-cloud-input-label-default-color);
+
+            &--focus {
+                color: var(--adf-group-cloud-input-label-focus-color);
+            }
         }
 
-        .mat-form-field {
+        &-option-active:not(&:disabled) {
-            width: 100%;
+            color: var(--adf-group-cloud-autosuggest-result-active-color);
+        }
+
+        &-option-not-active:not(&:active) {
+            background: inherit !important;
+            color: var(--adf-group-cloud-autosuggest-result-disabled-color);
         }
 
         &-error {
+            color: var(--adf-group-cloud-input-caption-error-color);
             margin-top: -10px;
             position: absolute;
             height: 20px;
@@ -33,29 +54,9 @@
             &-message {
                 padding-right: 8px;
                 height: 16px;
-                font-size: var(--theme-caption-font-size);
                 line-height: 1.33;
-                color: var(--theme-warn-color);
                 width: auto;
             }
-
-            &-icon {
-                font-size: var(--theme-adf-icon-1-font-size);
-                color: var(--theme-warn-color);
-            }
         }
     }
 }
-
-.mat-autocomplete-panel .mat-fab {
-    background: var(--theme-primary-color);
-    width: 40px;
-    height: 40px;
-    font-weight: bolder;
-    font-size: var(--theme-adf-picture-1-font-size);
-    box-shadow: none !important;
-
-    .mat-button-wrapper {
-        display: inline !important;
-    }
-}