inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-05-19 17:14:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-18779] Cannot update colours according to dynamically generated theme due to hardcoded values (#3558)

Browse Source 
* [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
This commit is contained in:
Bartosz Sekula 2023-12-11 09:49:12 +01:00 committed by GitHub
parent d599d525c7
commit 0c8b872cd0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 34 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

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

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

14
projects/aca-content/src/lib/ui/theme.scss
View File

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

27
projects/aca-content/src/lib/ui/variables/variables.scss
View File

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