[AAE-15295] added design tokens to PeopleCloudComponent

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

@@ -4,6 +4,7 @@
 @mixin adf-components-variables($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
 
     $defaults: (
         --adf-card-view-background: $adf-ref-card-background,
@@ -62,6 +63,12 @@
         --adf-info-drawer-tab-active-focused-background: mat.get-color-from-palette($primary),
         --adf-info-drawer-tab-active-focused-color:unset,
         --adf-info-drawer-tab-active-focused-bottom-line:unset,
+
+        --adf-people-cloud-input-label-default-color: $adf-ref-text-field-label-color,
+        --adf-people-cloud-input-label-focus-color: mat.get-color-from-palette($primary),
+        --adf-people-cloud-autosuggest-result-active-color: $adf-ref-autosuggest-result-active-color,
+        --adf-people-cloud-autosuggest-result-disabled-color: $adf-ref-autosuggest-result-disabled-color,
+        --adf-people-cloud-input-caption-error-color: mat.get-color-from-palette($warn)
     );
 
     // propagates SCSS variables into the CSS variables scope

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

@@ -6,6 +6,7 @@ $adf-ref-height-48: 48px;
 $adf-ref-title-color: rgba(0, 0, 0, 0.87);
 $adf-ref-description-color: rgba(0, 0, 0, 0.54);
 $adf-ref-text-field-label-color: rgba(0, 0, 0, 0.54);
+$adf-ref-text-field-caption-error-color: #f44336;
 $adf-ref-select-field-label-color: rgba(0, 0, 0, 0.54);
 $adf-ref-card-color: rgba(0, 0, 0, 0.87);
 $adf-ref-card-padding: 16px;
@@ -27,3 +28,5 @@ $adf-ref-height: 40px;
 $adf-ref-width: 40px;
 $adf-ref-line-height: 40px;
 $adf-ref-margin-right: 8px;
+$adf-ref-autosuggest-result-active-color: rgba(0, 0, 0, 0.87);
+$adf-ref-autosuggest-result-disabled-color: rgba(0, 0, 0, 0.54);

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

@@ -1,6 +1,7 @@
 <form>
-    <mat-form-field [floatLabel]="'auto'" class="adf-people-cloud" [class.adf-invalid]="hasError() && isDirty()">
-        <mat-label *ngIf="!isReadonly()" id="adf-people-cloud-title-id">{{ title | translate }}</mat-label>
+    <mat-form-field floatLabel="auto" class="adf-people-cloud" [class.adf-invalid]="hasError() && isDirty()">
+        <mat-label *ngIf="!isReadonly()" id="adf-people-cloud-title-id" class="adf-people-cloud-title"
+            [ngClass]="{'adf-people-cloud-title--focus': isFocused}">{{ title | translate }}</mat-label>
         <mat-chip-list #userMultipleChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-people-chip-list">
             <mat-chip
                 *ngFor="let user of selectedUsers"
@@ -17,6 +18,7 @@
                 </mat-icon>
             </mat-chip>
             <input *ngIf="!isReadonly()" matInput
+                   #chipInput
                    [formControl]="searchUserCtrl"
                    [matAutocomplete]="auto"
                    [matChipInputFor]="userMultipleChipList"
@@ -32,7 +34,8 @@
                           (optionSelected)="onSelect($event.option.value)"
                           [displayWith]="getDisplayName">
             <ng-container *ngIf="(searchUsers$ | async)?.length else noResults" >
-            <mat-option *ngFor="let user of searchUsers$ | async; let i = index" [value]="user">
+            <mat-option *ngFor="let user of searchUsers$ | async; let i = index" [value]="user"
+                class="adf-people-cloud-option-active">
                 <div class="adf-people-cloud-row" id="adf-people-cloud-user-{{user.username}}"
                      data-automation-id="adf-people-cloud-row">
                     <div [outerHTML]="user | usernameInitials:'adf-people-cloud-pic'"></div>

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

@@ -5,13 +5,29 @@
         &-option-not-active {
             background: inherit !important;
         }
+
+        &-title {
+            color: var(--adf-people-cloud-input-label-default-color);
+
+            &--focus {
+                color: var(--adf-people-cloud-input-label-focus-color);
+            }
+        }
     }
 
     &-people-cloud-list {
         margin: 5px 0;
         padding: 10px 0;
     }
 
+    &-people-cloud-option-active:not(&:disabled) {
+        color: var(--adf-people-cloud-autosuggest-result-active-color);
+    }
+
+    &-people-cloud-option-not-active:not(&:active) {
+        color: var(--adf-people-cloud-autosuggest-result-disabled-color);
+    }
+
     &-people-cloud-row {
         display: flex;
         align-items: center;
@@ -26,9 +42,6 @@
         width: 40px;
         height: 40px;
         border-radius: 100px;
-        color: var(--adf-theme-foreground-text-color);
-        font-weight: bolder;
-        font-size: var(--theme-adf-picture-1-font-size);
         text-transform: uppercase;
     }
 
@@ -40,15 +53,14 @@
         &-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);
-        }
+    &-error,
+    &-error-text,
+    &-error-icon {
+        color: var(--adf-people-cloud-input-caption-error-color);
     }
 }