From 0c8b872cd05e8f68160564ca5cc8b8cd812d51af Mon Sep 17 00:00:00 2001 From: Bartosz Sekula Date: Mon, 11 Dec 2023 09:49:12 +0100 Subject: [PATCH] [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 --- .../name-column/name-column.component.scss | 2 +- .../tags-column/tags-column.component.scss | 2 +- .../search-input/search-input.component.scss | 2 +- .../search-results.component.scss | 4 +-- .../components/sidenav/sidenav.component.scss | 6 ++--- .../user-menu/user-menu.component.scss | 2 +- projects/aca-content/src/lib/ui/theme.scss | 14 +++++----- .../src/lib/ui/variables/variables.scss | 27 ++++++++++++------- 8 files changed, 34 insertions(+), 25 deletions(-) diff --git a/projects/aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.scss b/projects/aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.scss index 985605f27..395de95fa 100644 --- a/projects/aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.scss +++ b/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); } } diff --git a/projects/aca-content/src/lib/components/dl-custom-components/tags-column/tags-column.component.scss b/projects/aca-content/src/lib/components/dl-custom-components/tags-column/tags-column.component.scss index 31454cc84..8c67eaa8c 100644 --- a/projects/aca-content/src/lib/components/dl-custom-components/tags-column/tags-column.component.scss +++ b/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); diff --git a/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss b/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss index e45afb69b..514177e84 100644 --- a/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss +++ b/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; diff --git a/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss b/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss index dc7ced64d..3a20a9a9d 100644 --- a/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss +++ b/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 { diff --git a/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss b/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss index 97ca0a5b1..90701d5e2 100644 --- a/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss +++ b/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); } } diff --git a/projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.scss b/projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.scss index 36cc0442b..cfee62257 100644 --- a/projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.scss +++ b/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; } diff --git a/projects/aca-content/src/lib/ui/theme.scss b/projects/aca-content/src/lib/ui/theme.scss index b49254815..ec6d2e8b9 100644 --- a/projects/aca-content/src/lib/ui/theme.scss +++ b/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,14 +27,14 @@ 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); } } @@ -42,7 +42,7 @@ mat-toolbar.mat-toolbar.mat-toolbar-single-row { .adf-version-list-item { &-comment, &-date { - color: var(--theme-contrast-gray); + color: var(--theme-secondary-text); opacity: 1; } } @@ -50,14 +50,14 @@ mat-toolbar.mat-toolbar.mat-toolbar-single-row { .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); } diff --git a/projects/aca-content/src/lib/ui/variables/variables.scss b/projects/aca-content/src/lib/ui/variables/variables.scss index 8a11c0804..f675236fa 100644 --- a/projects/aca-content/src/lib/ui/variables/variables.scss +++ b/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