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;
.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;
.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);

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

@ -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;

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

@ -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 {

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

@ -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);
}
}

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

@ -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;
}

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 {
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);
}

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

@ -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