[AAE-15236] Making about component panel styles configurable (#8660)

* Rebasing

* AAE-15236: Fixing syntax

lib/core/src/lib/about/about.component.html

@@ -1,8 +1,8 @@
-<mat-accordion [togglePosition]="'before'">
+<mat-accordion [togglePosition]="'before'" class="adf-about-panel">
     <ng-container *ngFor="let panel of panels">
         <mat-expansion-panel>
-            <mat-expansion-panel-header>
-                <mat-panel-title>{{panel.label}}</mat-panel-title>
+            <mat-expansion-panel-header class="adf-about-panel-header">
+                <mat-panel-title class="adf-about-panel-header__title">{{panel.label}}</mat-panel-title>
             </mat-expansion-panel-header>
             <ng-container *ngTemplateOutlet="panel.layoutTemplate"></ng-container>
         </mat-expansion-panel>

lib/core/src/lib/about/about.component.scss

@@ -0,0 +1,9 @@
+.adf-about-panel {
+    &-header {
+        height: var(--adf-about-panel-header-height);
+
+        &__title {
+            color: var(--adf-about-panel-header-title-color);
+        }
+    }
+}

lib/core/src/lib/about/about.component.ts

@@ -21,6 +21,7 @@ import { AboutPanelDirective } from './about-panel.directive';
 @Component({
     selector: 'adf-about',
     templateUrl: './about.component.html',
+    styleUrls: ['about.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class AboutComponent {

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

@@ -2,15 +2,17 @@
 
 @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-content-text-label-color: $adf-ref-edit-task-and-service-filter-content-text-label-color,
-        --adf-edit-task-and-service-filter-content-select-label-color: $adf-ref-edit-task-and-service-filter-content-select-label-color,
-        --adf-edit-task-and-service-filter-header-height: $adf-ref-edit-task-and-service-filter-header-height,
         --adf-card-view-background: $adf-ref-card-background,
         --adf-card-view-border: $adf-ref-card-border,
         --adf-card-view-border-color: $adf-ref-card-border-color,
-        --adf-card-view-border-radius: $adf-ref-card-border-radius
+        --adf-card-view-border-radius: $adf-ref-card-border-radius,
+        --adf-edit-task-and-service-filter-header-title-color: $adf-ref-title-color,
+        --adf-edit-task-and-service-filter-header-description-color: $adf-ref-description-color,
+        --adf-edit-task-and-service-filter-content-text-label-color: $adf-ref-text-field-label-color,
+        --adf-edit-task-and-service-filter-content-select-label-color: $adf-ref-select-field-label-color,
+        --adf-edit-task-and-service-filter-header-height: $adf-ref-height-48,
+        --adf-about-panel-header-height: $adf-ref-height-48,
+        --adf-about-panel-header-title-color: $adf-ref-title-color,
     );
 
     // propagates SCSS variables into the CSS variables scope

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

@@ -1,11 +1,9 @@
-$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;
-$adf-ref-edit-task-and-service-filter-content-text-label-color: rgba(0, 0, 0, 0.54);
-$adf-ref-edit-task-and-service-filter-content-text-input-color: rgba(0, 0, 0, 0.87);
-$adf-ref-edit-task-and-service-filter-content-select-label-color: rgba(0, 0, 0, 0.54);
-$adf-ref-edit-task-and-service-filter-content-select-input-color: rgba(0, 0, 0, 0.87);
 $adf-ref-card-background: white;
 $adf-ref-card-border: unset;
 $adf-ref-card-border-color: unset;
 $adf-ref-card-border-radius: 0;
+$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-select-field-label-color: rgba(0, 0, 0, 0.54);