[AAE-18779] Cannot update colours according to dynamically generated …

…theme due to hardcoded values (#3558)

* [AAE-18779] Custom theme - cannot update colours according to dynamically generated theme due to hardcoded values

* Fix colours part1

* Fix chip colours

* Fix column chip colour

* Fix sidenav text

* Fix sidenav selected text color

* Fix colours

projects/aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.scss

@@ -8,7 +8,7 @@
     display: flex;
 
     .adf-datatable-cell-badge {
-      color: var(--theme-contrast-gray);
+      color: var(--theme-secondary-text);
     }
   }
 

projects/aca-content/src/lib/components/dl-custom-components/tags-column/tags-column.component.scss

@@ -6,7 +6,7 @@
     width: inherit;
 
     .adf-tag-chips {
-      background-color: white;
+      background-color: var(--theme-background-card-colour);
       border: 1px solid var(--theme-text-color);
       border-radius: 10px;
       color: var(--theme-text-color);

projects/aca-content/src/lib/components/search/search-input/search-input.component.scss

@@ -1,6 +1,6 @@
 $search-width: 594px;
 $search-height: 32px;
-$search-background: #f5f6f5;
+$search-background: var(--theme-search-background-color);
 $search-border-radius: 4px;
 $top-margin: 12px;
 

projects/aca-content/src/lib/components/search/search-results/search-results.component.scss

@@ -38,7 +38,7 @@ aca-search-results {
 
         &:hover,
         &:focus {
-          background-color: var(--theme-grey-background-hover);
+          background-color: var(--theme-dropdown-background-hover);
         }
 
         &[disabled] {
@@ -110,7 +110,7 @@ aca-search-results {
     place-content: flex-start space-between;
     align-items: flex-start;
     padding: 16px 12px;
-    background-color: var(--theme-primary-color-default-contrast);
+    background-color: var(--theme-card-background-color);
 
     &__filter-set {
       p {

projects/aca-content/src/lib/components/sidenav/sidenav.component.scss

@@ -27,7 +27,7 @@
 
       &-text {
         flex: 1;
-        color: var(--theme-selected-text-color);
+        color: var(--theme-sidenav-text-color);
         padding-left: 12px;
         letter-spacing: 0.25px;
         font-style: normal;
@@ -80,7 +80,7 @@
         user-select: none;
 
         &:hover .aca-action-button__label {
-          color: var(--theme-selected-text-color);
+          color: var(--theme-sidenav-text-color);
         }
       }
 
@@ -103,7 +103,7 @@
       line-height: 32px;
 
       &--active {
-        color: var(--theme-selected-text-color);
+        color: var(--theme-sidenav-text-color);
         background: var(--theme-selected-background-color);
       }
     }

projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.scss

@@ -9,6 +9,6 @@
   text-align: center;
   vertical-align: middle;
   background: var(--theme-about-panel-border-color);
-  color: var(--theme-selected-text-color);
+  color: var(--theme-sidenav-user-menu-color);
   border: none;
 }

projects/aca-content/src/lib/ui/theme.scss

@@ -9,7 +9,7 @@ mat-toolbar {
 }
 
 .adf-name-location-cell-location.adf-datatable-cell-value {
-  color: var(--theme-contrast-gray);
+  color: var(--theme-secondary-text);
 }
 
 .mat-tab-list {
@@ -27,37 +27,37 @@ mat-toolbar {
 .mat-checkbox-label,
 mat-toolbar.mat-toolbar.mat-toolbar-multiple-row,
 mat-toolbar.mat-toolbar.mat-toolbar-single-row {
-  color: var(--theme-contrast-gray);
+  color: var(--theme-secondary-text);
   opacity: 1;
 }
 
 .adf-upload-dialog {
   &__header,
   &__content {
-    color: var(--theme-contrast-gray);
+    color: var(--theme-secondary-text);
   }
 }
 
 .adf-version-list {
   .adf-version-list-item {
     &-comment,
     &-date {
-      color: var(--theme-contrast-gray);
+      color: var(--theme-secondary-text);
       opacity: 1;
     }
   }
 }
 
 .adf-property-field {
   .adf-textitem-edit-icon.mat-icon {
-    color: var(--theme-contrast-gray);
+    color: var(--theme-secondary-text);
   }
 }
 
 .adf-property-field.adf-card-textitem-field:hover .adf-property-clear-value {
-  color: var(--theme-contrast-gray);
+  color: var(--theme-secondary-text);
 }
 
 .adf-empty-content__icon {
-  color: var(--theme-contrast-gray);
+  color: var(--theme-secondary-text);
 }

projects/aca-content/src/lib/ui/variables/variables.scss

@@ -1,8 +1,13 @@
 /* stylelint-disable scss/no-global-function-names */
 @use '@angular/material' as mat;
+@use 'sass:color';
 
 $foreground: map-get($custom-theme, foreground);
 $background: map-get($custom-theme, background);
+$background-color: mat.get-color-from-palette($background, background);
+$background-card-color: mat.get-color-from-palette($background, card);
+$text-color: mat.get-color-from-palette($foreground, text);
+$secondary-text: mat.get-color-from-palette($foreground, secondary-text);
 
 // Custom variables - ACA specific styling:
 $data-table-thumbnail-width: 35px;
@@ -21,25 +26,29 @@ $grey-text-background: rgba(33, 33, 33, 0.05);
 $grey-hover-background: rgba(33, 33, 33, 0.24);
 $blue-save-button-background: #1f74db;
 $black-heading: #4e4c4c;
-$grey-dropdown-background: #eee;
-$grey-background-hover: #e0e0e0;
+$theme-dropdown-background: darken($background-color, 5%);
+$theme-dropdown-background-hover: darken($background-color, 10%);
 $grey-divider: rgba(0, 0, 0, 0.22);
 $datetimepicker-font-color: rgba(black, 0.87);
 $datetimepicker-selected-date-background: #2254b2;
 $datetimepicker-cell-background-color: #fff;
 $datetimepicker-cell-focus-border-color: #1f74db;
-$sidenav-background-color: #f8f8f8;
+$sidenav-background-color: $background-color;
 $selected-text-color: #212121;
 $selected-background-color: rgba(31, 116, 219, 0.24);
-$action-button-text-color: rgba(33, 35, 40, 0.7);
-$page-layout-header-background-color: #fff;
+$action-button-text-color: lighten($text-color, 35%);
+$page-layout-header-background-color: $background-card-color;
 $search-chip-icon-color: #757575;
 $disabled-chip-background-color: #f5f5f5;
-$contrast-gray: #646569;
+$contrast-gray: mat.get-color-from-palette($foreground, 'secondary-tex');
 
 // CSS Variables
 $defaults: (
+  --theme-background-color: $background-color,
+  --theme-search-background-color: darken($background-color, 1),
   --theme-text-color: mat.get-color-from-palette($foreground, text, 0.54),
+  --theme-sidenav-text-color: mat.get-color-from-palette($foreground, text),
+  --theme-sidenav-user-menu-color: mat.get-color-from-palette($foreground, text),
   --theme-text-bold-color: mat.get-color-from-palette($foreground, text, 0.87),
   --theme-title-color: mat.get-color-from-palette($foreground, text, 0.87),
   --theme-text-disabled-color: mat.get-color-from-palette($foreground, text, 0.38),
@@ -57,8 +66,8 @@ $defaults: (
   --theme-grey-hover-background-color: $grey-hover-background,
   --theme-blue-button-color: $blue-save-button-background,
   --theme-heading-color: $black-heading,
-  --theme-dropdown-color: $grey-dropdown-background,
-  --theme-grey-background-hover: $grey-background-hover,
+  --theme-dropdown-color: $theme-dropdown-background,
+  --theme-dropdown-background-hover: $theme-dropdown-background-hover,
   --theme-grey-divider-color: $grey-divider,
   --theme-pagination-background-color: mat.get-color-from-palette($background, background),
   --theme-about-panel-border-color: $grey-background,
@@ -76,7 +85,7 @@ $defaults: (
   --theme-page-layout-header-background-color: $page-layout-header-background-color,
   --theme-search-chip-icon-color: $search-chip-icon-color,
   --theme-disabled-chip-background-color: $disabled-chip-background-color,
-  --theme-contrast-gray: $contrast-gray
+  --theme-secondary-text: $secondary-text
 );
 
 // propagates SCSS variables into the CSS variables scope