[AAE-15240] Making package list component styles configurable (#8667)

lib/core/src/lib/about/about-package/package-list.component.html

@@ -1,11 +1,11 @@
-<mat-table [dataSource]="data">
+<mat-table [dataSource]="data" class="adf-package-list-table">
   <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
-    <mat-header-cell *matHeaderCellDef>
+    <mat-header-cell *matHeaderCellDef class="adf-package-list-table__header-cell">
       {{ column.header | translate }}
     </mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ column.cell(row) }}</mat-cell>
+    <mat-cell *matCellDef="let row" class="adf-package-list-table__row-cell">{{ column.cell(row) }}</mat-cell>
   </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-header-row *matHeaderRowDef="displayedColumns" class="adf-package-list-table__header-row"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns" class="adf-package-list-table__row"></mat-row>
 </mat-table>

lib/core/src/lib/about/about-package/package-list.component.scss

@@ -0,0 +1,27 @@
+.adf-package-list-table {
+    background: var(--adf-package-list-table-background);
+
+    &__header-row {
+        border-bottom-color: var(--adf-package-list-table-header-border-bottom-color);
+        border-style: var(--adf-package-list-table-header-border-style);
+        border-width: var(--adf-package-list-table-header-border-width);
+        border-bottom-width: var(--adf-package-list-table-header-border-bottom-width);
+        min-height: var(--adf-package-list-table-header-min-height);
+    }
+
+    &__header-cell {
+        color: var(--adf-package-list-table-header-cell-color);
+    }
+
+    &__row {
+        border-bottom-color: var(--adf-package-list-table-row-border-bottom-color);
+        border-style: var(--adf-package-list-table-row-border-style);
+        border-width: var(--adf-package-list-table-row-border-width);
+        border-bottom-width: var(--adf-package-list-table-row-border-bottom-width);
+        min-height: var(--adf-package-list-table-row-min-height);
+
+        &-cell {
+            color: var(--adf-package-list-table-row-cell-color);
+        }
+    }
+}

lib/core/src/lib/about/about-package/package-list.component.ts

@@ -15,13 +15,13 @@
  * limitations under the License.
  */
 
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, OnInit } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, OnInit } from '@angular/core';
 import { PackageInfo } from '../interfaces';
 
 @Component({
   selector: 'adf-about-package-list',
   templateUrl: './package-list.component.html',
-  encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./package-list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PackageListComponent implements OnInit {

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

@@ -22,6 +22,19 @@
         --adf-about-server-settings-color: $adf-ref-card-color,
         --adf-about-server-settings-border-radius: $adf-ref-card-border-radius-4,
         --adf-about-server-settings-padding: $adf-ref-card-padding-16,
+        --adf-package-list-table-background: $adf-ref-table-background,
+        --adf-package-list-table-header-border-bottom-color: $adf-ref-table-header-border-bottom-color,
+        --adf-package-list-table-header-border-style: $adf-ref-table-header-border-style,
+        --adf-package-list-table-header-border-bottom-width: $adf-ref-table-header-border-bottom-width,
+        --adf-package-list-table-header-border-width: $adf-ref-table-header-border-width,
+        --adf-package-list-table-header-min-height: $adf-ref-table-header-min-height,
+        --adf-package-list-table-header-cell-color: $adf-table-header-cell-color,
+        --adf-package-list-table-row-border-bottom-color: $adf-ref-table-row-border-bottom-color,
+        --adf-package-list-table-row-border-style: $adf-ref-table-row-border-style,
+        --adf-package-list-table-row-border-bottom-width: $adf-ref-table-row-border-bottom-width,
+        --adf-package-list-table-row-border-width: $adf-ref-table-row-border-width,
+        --adf-package-list-table-row-min-height: $adf-ref-table-row-min-height,
+        --adf-package-list-table-row-cell-color: $adf-table-row-cell-color,
     );
 
     // propagates SCSS variables into the CSS variables scope

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

@@ -10,3 +10,16 @@ $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-16: 16px;
 $adf-ref-card-border-radius-4: 4px;
+$adf-ref-table-background: white;
+$adf-ref-table-header-border-bottom-color: rgba(0, 0, 0, 0.12);
+$adf-ref-table-header-border-style: solid;
+$adf-ref-table-header-border-bottom-width: 1px;
+$adf-ref-table-header-border-width: 0;
+$adf-ref-table-header-min-height: 56px;
+$adf-table-header-cell-color: rgba(0, 0, 0, 0.54);
+$adf-ref-table-row-border-bottom-color: rgba(0, 0, 0, 0.12);
+$adf-ref-table-row-border-style: solid;
+$adf-ref-table-row-border-bottom-width: 1px;
+$adf-ref-table-row-border-width: 0;
+$adf-ref-table-row-min-height: 48px;
+$adf-table-row-cell-color: rgba(0, 0, 0, 0.87);