From a39480bc48deabca6699f09c2981de116f9d2527 Mon Sep 17 00:00:00 2001 From: tomasz hanaj <12088991+tomaszhanaj@users.noreply.github.com> Date: Thu, 9 Mar 2023 00:40:48 +0100 Subject: [PATCH] [AAE-12872] custom css variables replaced with theme related variables (#8332) * AAE-12872 replaced global variables related to foreground text * AAE-12872 replaced global css variables related to foreground * AAE-12872 replaced global css variables related to background,palette colors --- .../app-layout/app-layout.component.ts | 4 +- .../aspect-list/aspect-list.component.scss | 2 +- .../lib/breadcrumb/breadcrumb.component.scss | 8 +- .../dropdown-breadcrumb.component.scss | 2 +- .../content-metadata-card.component.scss | 6 +- .../content-metadata.component.scss | 2 +- ...content-node-selector-panel.component.scss | 14 +-- .../content-node-selector.component.scss | 4 +- .../name-location-cell.component.scss | 2 +- .../content-node-share.dialog.scss | 6 +- .../content-user-info.component.scss | 8 +- .../src/lib/dialogs/folder.dialog.scss | 2 +- .../components/document-list.component.scss | 14 +-- .../new-version-uploader.dialog.scss | 4 +- .../add-permission-dialog.component.scss | 4 +- .../add-permission-panel.component.scss | 8 +- .../permission-list.component.scss | 4 +- .../components/search-control.component.scss | 6 +- .../search-facet-field.component.scss | 2 +- .../search-filter-chips.component.scss | 8 +- .../search-filter-menu-card.component.scss | 4 +- .../search-filter-container.component.scss | 14 +-- .../search-filter.component.scss | 4 +- .../search-sorting-picker.component.scss | 2 +- .../src/lib/tag/tag-node-list.component.scss | 2 +- .../lib/tree/components/tree.component.scss | 10 +- .../file-uploading-dialog.component.scss | 12 +-- .../file-uploading-list-row.component.scss | 2 +- .../card-view-arrayitem.component.scss | 4 +- .../card-view-dateitem.component.scss | 2 +- ...card-view-keyvaluepairsitem.component.scss | 2 +- .../select-filter-input.component.scss | 4 +- .../card-view-textitem.component.scss | 20 ++-- .../card-view/card-view.component.scss | 4 +- .../comment-list/comment-list.component.scss | 8 +- .../src/lib/comments/comments.component.scss | 4 +- .../columns-selector.component.scss | 2 +- .../datatable/datatable.component.scss | 52 +++++------ .../tooltip-card/tooltip-card.component.scss | 4 +- .../inplace-form-input.component.scss | 4 +- .../widgets/amount/amount.widget.scss | 2 +- .../widgets/date-time/date-time.widget.scss | 2 +- .../form/components/widgets/form.theme.scss | 10 +- .../identity-user-info.component.scss | 8 +- .../info-drawer-layout.component.scss | 4 +- .../components/header/header.component.scss | 6 +- .../layout-container.component.scss | 2 +- .../sidebar-action-menu.component.scss | 4 +- .../lib/login/components/login.component.scss | 10 +- .../notification-history.component.scss | 6 +- .../lib/pagination/pagination.component.scss | 4 +- .../search-text-input.component.scss | 6 +- lib/core/src/lib/styles/_index.scss | 92 +++++++++---------- lib/core/src/lib/styles/material.theme.scss | 14 +-- lib/core/src/lib/styles/snackbar.theme.scss | 12 +-- .../empty-content.component.scss | 2 +- .../error-content.component.scss | 2 +- .../src/lib/toolbar/toolbar.component.scss | 4 +- .../components/img-viewer.component.scss | 4 +- .../pdf-viewer-thumbnails.component.scss | 2 +- .../components/pdf-viewer.component.scss | 10 +- .../unknown-format.component.scss | 2 +- .../components/viewer-render.component.scss | 2 +- .../viewer/components/viewer.component.scss | 14 +-- .../analytics-report-list.component.scss | 6 +- ...analytics-report-parameters.component.scss | 2 +- .../attach-file-cloud-widget.component.scss | 2 +- ...file-properties-table-cloud.component.scss | 2 +- .../properties-viewer.widget.scss | 2 +- .../components/people-cloud.component.scss | 2 +- .../start-process-cloud.component.scss | 2 +- .../start-task-cloud.component.scss | 2 +- .../base-task-filters-cloud.component.scss | 2 +- .../src/lib/form/start-form.component.scss | 2 +- .../attach-file-widget-dialog.component.scss | 2 +- .../dynamic-table/dynamic-table.widget.scss | 14 +-- .../form/widgets/people/people.widget.scss | 4 +- .../components/people/people.component.scss | 6 +- .../process-comments.component.scss | 4 +- .../components/start-process.component.scss | 2 +- .../process-user-info.component.scss | 8 +- .../components/start-task.component.scss | 2 +- .../components/task-standalone.component.scss | 2 +- 83 files changed, 277 insertions(+), 285 deletions(-) diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.ts b/demo-shell/src/app/components/app-layout/app-layout.component.ts index 80fa8820f2..7a3c0ec586 100644 --- a/demo-shell/src/app/components/app-layout/app-layout.component.ts +++ b/demo-shell/src/app/components/app-layout/app-layout.component.ts @@ -127,7 +127,7 @@ export class AppLayoutComponent implements OnInit, OnDestroy { this.color = color; } else { this.color = undefined; - document.documentElement.style.setProperty('--adf-header-background-color', color); + document.documentElement.style.setProperty('--theme-primary-color', color); } }); @@ -138,7 +138,7 @@ export class AppLayoutComponent implements OnInit, OnDestroy { this.headerService.headerTextColor .pipe(takeUntil(this.onDestroy$)) .subscribe(headerTextColor => { - document.documentElement.style.setProperty('--adf-header-text-color', headerTextColor); + document.documentElement.style.setProperty('--theme-primary-color-default-contrast', headerTextColor); }); this.headerService.logo diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.scss b/lib/content-services/src/lib/aspect-list/aspect-list.component.scss index 07eafac17e..3d901980e9 100644 --- a/lib/content-services/src/lib/aspect-list/aspect-list.component.scss +++ b/lib/content-services/src/lib/aspect-list/aspect-list.component.scss @@ -10,7 +10,7 @@ padding-top: 3px; height: 400px; overflow: auto; - border: 1px solid var(--theme-border-color); + border: 1px solid var(--theme-foreground-text-color-007); .adf-aspect-list-check-button { margin-right: 5px; diff --git a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss index 0195df887b..882dc6ed50 100644 --- a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss +++ b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss @@ -5,7 +5,7 @@ font-size: var(--theme-body-1-font-size); font-weight: 600; letter-spacing: -0.2px; - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); overflow: hidden; &-container { @@ -79,7 +79,7 @@ font-weight: 600; letter-spacing: -0.2px; text-align: left; - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); flex: 0 1 auto; min-width: 35px; margin-top: auto; @@ -87,11 +87,11 @@ &:hover, &.adf-active { - color: var(--adf-breadcrumb-item-active-hover-color); + color: var(--theme-foreground-text-color-064); } &.adf-active { - color: var(--adf-breadcrumb-item-active-color); + color: var(--theme-foreground-text-color-087); } &-chevron { diff --git a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss index 29335e92a0..8fb83d1dfd 100644 --- a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss +++ b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss @@ -8,7 +8,7 @@ $dropdown-horizontal-offset: 30px; font-size: var(--theme-body-1-font-size); font-weight: 600; letter-spacing: -0.2px; - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); overflow: hidden; margin-top: 10px; diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss index 81d8b64c7a..fcbaad29c2 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss @@ -10,13 +10,13 @@ &-footer.mat-card-footer { margin: 0; padding: 8px 12px; - border-top: 1px solid var(--theme-border-color); + border-top: 1px solid var(--theme-foreground-text-color-007); button { - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); &:hover { - color: var(--theme-text-bold-color); + color: var(--theme-foreground-text-color-087); } } } diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss index 238b48e4a9..f92f34fda4 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss @@ -2,7 +2,7 @@ &-metadata-properties { .mat-expansion-panel-header.mat-expanded:hover, .mat-expansion-panel-header.mat-expanded:focus { - background: var(--theme-bg-hover-color); + background: var(--theme-background-hover-color); } mat-expansion-panel-header { diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss index 38fcc403b7..9834cc84df 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss @@ -10,7 +10,7 @@ h2.adf-search-results-label { font-stretch: normal; line-height: 1.43; letter-spacing: -0.2px; - color: var(--theme-text-bold-color); + color: var(--theme-foreground-text-color-087); } .adf-toolbar .mat-toolbar { @@ -39,11 +39,11 @@ h2.adf-search-results-label { width: 100%; &-icon { - color: var(--adf-node-selector-icon-color); + color: var(--theme-foreground-icon-color-054); cursor: pointer; &:hover { - color: var(--theme-fg-base-color); + color: var(--theme-foreground-base-color); } } } @@ -74,10 +74,10 @@ h2.adf-search-results-label { outline: none; .mat-icon { - color: var(--adf-node-selector-base-color); + color: var(--theme-foreground-base-color-045); &:hover { - color: var(--adf-node-selector-base-bold-color); + color: var(--theme-foreground-base-color-065); } } @@ -87,14 +87,14 @@ h2.adf-search-results-label { } .adf-dropdown-breadcrumb-item-chevron { - color: var(--adf-node-selector-base-color); + color: var(--theme-foreground-base-color-045); } } &-list { height: 40vh; overflow: auto; - border: 1px solid var(--theme-border-color); + border: 1px solid var(--theme-foreground-text-color-007); border-top: 0; position: relative; diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss index 1bcd15abc6..fef5e2d21f 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss @@ -60,7 +60,7 @@ adf-content-node-selector { font-stretch: normal; line-height: 1.6; letter-spacing: -0.5px; - color: var(--theme-text-bold-color); + color: var(--theme-foreground-text-color-087); h2 { margin: unset; @@ -94,7 +94,7 @@ adf-content-node-selector { .adf-choose-action { &[disabled] { - color: var(--theme-secondary-text-color); + color: var(--theme-foreground-secondary-text-color); } &:enabled { diff --git a/lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.component.scss b/lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.component.scss index 3d89343eda..515260f480 100644 --- a/lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.component.scss +++ b/lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.component.scss @@ -2,7 +2,7 @@ display: grid; &-location { - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); font-size: var(--theme-caption-font-size); } } diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss index 0438fa9ba5..418aabc65c 100644 --- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss +++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss @@ -18,7 +18,7 @@ font-style: normal; font-stretch: normal; font-size: var(--theme-subheading-2-font-size); - color: var(--theme-text-bold-color); + color: var(--theme-foreground-text-color-087); } &__label { @@ -26,7 +26,7 @@ } &__info { - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); font-size: var(--theme-caption-font-size); } @@ -39,7 +39,7 @@ } &__input { - color: var(--theme-text-bold-color); + color: var(--theme-foreground-text-color-087); } } diff --git a/lib/content-services/src/lib/content-user-info/content-user-info.component.scss b/lib/content-services/src/lib/content-user-info/content-user-info.component.scss index 4161e22a04..ee6ef20e07 100644 --- a/lib/content-services/src/lib/content-user-info/content-user-info.component.scss +++ b/lib/content-services/src/lib/content-user-info/content-user-info.component.scss @@ -18,7 +18,7 @@ } &-userinfo-pic { - background: var(--adf-user-info-color); + background: var(--theme-primary-300); display: inline-block; width: 40px; height: 40px; @@ -32,7 +32,7 @@ } &-userinfo-profile-image { - background: var(--adf-user-info-color); + background: var(--theme-primary-300); text-align: center; border-radius: 90%; width: 40px; @@ -132,7 +132,7 @@ } &-userinfo-profile-picture { - background: var(--adf-user-info-color); + background: var(--theme-primary-300); background-size: cover; border-radius: 50%; height: 80px; @@ -144,7 +144,7 @@ &-userinfo-profile-initials { text-transform: uppercase; background-size: cover; - background-color: var(--adf-user-info-color); + background-color: var(--theme-primary-300); border-radius: 50%; height: 80px; width: 80px; diff --git a/lib/content-services/src/lib/dialogs/folder.dialog.scss b/lib/content-services/src/lib/dialogs/folder.dialog.scss index 82288cc33c..ce47fbb059 100644 --- a/lib/content-services/src/lib/dialogs/folder.dialog.scss +++ b/lib/content-services/src/lib/dialogs/folder.dialog.scss @@ -30,7 +30,7 @@ } .adf-dialog-action-button:disabled > span { - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); } @media screen and (max-width: 380px) { diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.scss b/lib/content-services/src/lib/document-list/components/document-list.component.scss index 04f9b5af0e..fbdabe0627 100644 --- a/lib/content-services/src/lib/document-list/components/document-list.component.scss +++ b/lib/content-services/src/lib/document-list/components/document-list.component.scss @@ -56,7 +56,7 @@ } &--text { - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); font-size: var(--theme-subheading-2-font-size); } } @@ -67,7 +67,7 @@ font-size: var(--theme-headline-font-size); line-height: 1.33; letter-spacing: -1px; - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); } .adf-document-list__drag-drop { @@ -76,7 +76,7 @@ font-size: 56px; line-height: 1; letter-spacing: -2px; - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); margin-top: 40px; } @@ -86,7 +86,7 @@ font-size: var(--theme-subheading-2-font-size); line-height: 1.5; letter-spacing: -0.4px; - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); margin-top: 17px; } @@ -114,11 +114,11 @@ font-size: var(--theme-headline-font-size); line-height: 1.33; letter-spacing: -1px; - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); } .adf-documentlist-pagination { - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); .adf-pagination__block { border-right: none; @@ -131,7 +131,7 @@ font-size: var(--theme-headline-font-size); line-height: 1.33; letter-spacing: -1px; - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); } &-drag-drop { diff --git a/lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.scss b/lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.scss index ffc32eec5d..bc770df44d 100644 --- a/lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.scss +++ b/lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.scss @@ -34,7 +34,7 @@ line-height: 1.6; margin: 0; letter-spacing: -0.5px; - color: var(--theme-text-bold-color); + color: var(--theme-foreground-text-color-087); } &-content { @@ -51,7 +51,7 @@ padding: 8px 8px 24px 8px; display: flex; justify-content: flex-end; - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); button { text-transform: uppercase; diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss index 073c666d3c..ea691ac4ed 100644 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss +++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss @@ -8,7 +8,7 @@ font-stretch: normal; line-height: 1.6; letter-spacing: -0.5px; - color: var(--theme-text-bold-color); + color: var(--theme-foreground-text-color-087); } .mat-dialog-container { @@ -45,7 +45,7 @@ .adf-choose-action { &[disabled] { - color: var(--theme-secondary-text-color); + color: var(--theme-foreground-secondary-text-color); } &:enabled { diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss index 41d06b71e6..a675ea2442 100644 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss +++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss @@ -5,7 +5,7 @@ $search-result-height: calc(100% - 75px); display: flex; height: $search-result-height; overflow: auto; - border: 2px solid var(--theme-border-color); + border: 2px solid var(--theme-foreground-text-color-007); &-elements { width: 100%; @@ -22,7 +22,7 @@ $search-result-height: calc(100% - 75px); justify-content: space-around; height: $search-result-height; overflow: auto; - border: 2px solid var(--theme-border-color); + border: 2px solid var(--theme-foreground-text-color-007); } &-permission-no-result { @@ -37,11 +37,11 @@ $search-result-height: calc(100% - 75px); width: 100%; &-icon { - color: var(--theme-selected-button-bg-color); + color: var(--theme-background-selected-button-color); cursor: pointer; &:hover { - color: var(--theme-fg-base-color); + color: var(--theme-foreground-base-color); } } } diff --git a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss index 8569a683c1..1bd6fe0922 100644 --- a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss +++ b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss @@ -18,7 +18,7 @@ justify-content: space-between; align-items: center; padding: 10px 15px; - border: 1px solid var(--theme-border-color); + border: 1px solid var(--theme-foreground-text-color-007); } &-inherit-container { @@ -89,6 +89,6 @@ .adf-pop-over-card { width: 100%; overflow: hidden; - box-shadow: 0 8px 9px -5px var(--theme-fg-divider), 0 15px 22px 2px var(--theme-fg-divider); + box-shadow: 0 8px 9px -5px var(--theme-foreground-divider-color), 0 15px 22px 2px var(--theme-foreground-divider-color); } } diff --git a/lib/content-services/src/lib/search/components/search-control.component.scss b/lib/content-services/src/lib/search/components/search-control.component.scss index a3115a577e..b17e93054f 100644 --- a/lib/content-services/src/lib/search/components/search-control.component.scss +++ b/lib/content-services/src/lib/search/components/search-control.component.scss @@ -19,8 +19,8 @@ $mat-menu-overlay-max-width: 280px !default; // 56 * 5 margin-top: -22px; font-size: var(--theme-subheading-1-font-size); z-index: 5; - color: var(--theme-text-fg-color); - background-color: var(--theme-card-bg-color); + color: var(--theme-foreground-text-color); + background-color: var(--theme-background-card-color); border-radius: 2px; @media screen and (max-width: 959px) { @@ -32,7 +32,7 @@ $mat-menu-overlay-max-width: 280px !default; // 56 * 5 &-search-autocomplete-item { &:hover { - background-color: var(--theme-bg-hover-color); + background-color: var(--theme-background-hover-color); opacity: 1; } } diff --git a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss index f66c85fcd6..bd8bd6c65b 100644 --- a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss +++ b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss @@ -83,6 +83,6 @@ .mat-checkbox-label, .mat-radio-label { - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); } } diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss index 95231da64d..17cdf80201 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss @@ -7,14 +7,14 @@ max-width: 320px; text-overflow: ellipsis; overflow: hidden; - background: var(--theme-unselected-chip-bg-color); + background: var(--theme-background-unselected-chip-color); &:focus { color: unset; } &.mat-standard-chip::after { - background: var(--theme-unselected-chip-bg-color); + background: var(--theme-background-unselected-chip-color); color: unset; } @@ -24,7 +24,7 @@ } &.adf-search-toggle-chip { - background: var(--theme-card-bg-color); + background: var(--theme-background-card-color); border: 2px solid var(--theme-accent-color); &.mat-chip::after { @@ -35,7 +35,7 @@ .adf-search-filter-placeholder { flex: 1 1 auto; white-space: nowrap; - color: var(--theme-disabled-text-color); + color: var(--theme-foreground-disabled-text-color); } .adf-search-filter-ellipsis { diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss index 4ba8c6040f..1d47a8339b 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss @@ -1,6 +1,6 @@ .adf-search-filter-menu-card { - color: var(--theme-text-fg-color); - background: var(--theme-card-bg-color); + color: var(--theme-foreground-text-color); + background: var(--theme-background-card-color); .adf-search-filter-title { padding: 16px 12px; diff --git a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss index aa764b9e5e..16c7354567 100644 --- a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss +++ b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss @@ -4,14 +4,14 @@ .adf-icon { opacity: 1; - color: var(--theme-icon-fg-color); + color: var(--theme-foreground-icon-color); &-active { color: var(--theme-primary-color); } .mat-badge-active { - border: 2px solid var(--theme-card-bg-color) !important; + border: 2px solid var(--theme-background-card-color) !important; } } @@ -27,7 +27,7 @@ display: flex; flex-direction: column; padding: 15px 15px 10px; - color: var(--theme-text-bold-color) !important; + color: var(--theme-foreground-text-color-087) !important; .adf-facet-buttons { display: none; @@ -38,25 +38,25 @@ } input { - background: 2px solid var(--theme-card-bg-color) !important; + background: 2px solid var(--theme-background-card-color) !important; } } &-title { font-size: 1.1em; padding-bottom: 5px; - color: var(--theme-text-bold-color); + color: var(--theme-foreground-text-color-087); } &-actions { display: flex; justify-content: flex-end; padding: 15px; - background-color: var(--theme-hover-bg-color); + background-color: var(--theme-background-hover-color); > button { font-size: 0.9em; - color: var(--theme-text-bold-color); + color: var(--theme-foreground-text-color-087); } } } diff --git a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss index ced6f0d233..56022a1652 100644 --- a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss +++ b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss @@ -1,11 +1,11 @@ .adf-search-filter { .mat-expansion-panel-header-title { font-size: var(--theme-body-1-font-size); - color: var(--theme-text-bold-color); + color: var(--theme-foreground-text-color-087); } .mat-checkbox-label, .mat-radio-label { - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); } } diff --git a/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.scss b/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.scss index 5fea2fddcf..df3bdb2c7b 100644 --- a/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.scss +++ b/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.scss @@ -1,5 +1,5 @@ .adf-search-sorting-picker { .mat-icon-button { - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); } } diff --git a/lib/content-services/src/lib/tag/tag-node-list.component.scss b/lib/content-services/src/lib/tag/tag-node-list.component.scss index 059f14c698..f459988ad4 100644 --- a/lib/content-services/src/lib/tag/tag-node-list.component.scss +++ b/lib/content-services/src/lib/tag/tag-node-list.component.scss @@ -10,7 +10,7 @@ .adf-view-more-button { margin: 4px; - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); } .adf-full-width { diff --git a/lib/content-services/src/lib/tree/components/tree.component.scss b/lib/content-services/src/lib/tree/components/tree.component.scss index b987c4bb80..2faa5dd28f 100644 --- a/lib/content-services/src/lib/tree/components/tree.component.scss +++ b/lib/content-services/src/lib/tree/components/tree.component.scss @@ -24,7 +24,7 @@ $tree-header-font-size: 12px !default; padding-left: 15px; padding-right: 15px; transition-property: background-color; - border-bottom: 1px solid var(--theme-border-color); + border-bottom: 1px solid var(--theme-foreground-text-color-007); min-height: $tree-row-height; user-select: none; @@ -33,7 +33,7 @@ $tree-header-font-size: 12px !default; } &:hover { - background-color: var(--theme-bg-hover-color); + background-color: var(--theme-background-hover-color); .adf-tree-actions { display: flex; @@ -41,7 +41,7 @@ $tree-header-font-size: 12px !default; } &:focus { - background-color: var(--theme-bg-hover-color); + background-color: var(--theme-background-hover-color); outline-offset: -1px; outline: 1px solid var(--theme-accent-color-a200); } @@ -55,7 +55,7 @@ $tree-header-font-size: 12px !default; } .adf-tree-cell { - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); width: 100%; .adf-tree-cell-value { @@ -82,7 +82,7 @@ $tree-header-font-size: 12px !default; letter-spacing: 0; min-height: $tree-row-height !important; font-size: $tree-header-font-size; - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); box-sizing: border-box; padding-top: 12px !important; diff --git a/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.scss b/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.scss index 4cc9373d59..175625f03b 100644 --- a/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.scss +++ b/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.scss @@ -1,7 +1,7 @@ /* stylelint-disable no-descending-specificity */ .adf-upload-dialog { - background: var(--theme-dialog-bg-color); - color: var(--theme-text-color); + background: var(--theme-background-dialog-color); + color: var(--theme-foreground-text-color-054); position: fixed; bottom: 20px; width: 40%; @@ -33,7 +33,7 @@ min-width: 0; padding: 0; line-height: 0; - color: var(--theme-text-color) !important; + color: var(--theme-foreground-text-color-054) !important; } } @@ -49,8 +49,8 @@ &__content { overflow: auto; max-height: 194px; - border-top: 1px solid var(--adf-upload-border-color); - border-bottom: 1px solid var(--adf-upload-border-color); + border-top: 1px solid var(--theme-foreground-text-color-014); + border-bottom: 1px solid var(--theme-foreground-text-color-014); } &__confirmation { @@ -61,7 +61,7 @@ font-size: var(--theme-subheading-2-font-size); line-height: 1.5; letter-spacing: -0.4px; - color: var(--theme-text-bold-color); + color: var(--theme-foreground-text-color-087); } &__confirmation--text { diff --git a/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.scss b/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.scss index 7f04f58216..d3532b745a 100644 --- a/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.scss +++ b/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.scss @@ -2,7 +2,7 @@ $file-uploading-row-hover-color: #eee !default; adf-file-uploading-list-row:not(:first-child) { display: block; - border-top: 1px solid var(--adf-upload-border-color); + border-top: 1px solid var(--theme-foreground-text-color-014); } .adf-file-uploading-row { diff --git a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss index 7186676530..0f788175eb 100644 --- a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss @@ -5,12 +5,12 @@ } &-array-item-action { - color: var(--adf-card-view-text-color); + color: var(--theme-foreground-text-color-025); } &-array-item-action:hover, &-array-item-action:focus { - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); } &-card-array-item-default { diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss index 9f2d1890b4..92ca41980a 100644 --- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss @@ -29,7 +29,7 @@ &-dateitem-editable { cursor: pointer; - border-bottom: 1px solid var(--adf-card-view-datetime-border-color); + border-bottom: 1px solid var(--theme-foreground-text-color-042); padding-bottom: 6px; &-controls { diff --git a/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss b/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss index 4e1a030c0e..353a8ee60e 100644 --- a/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss @@ -14,7 +14,7 @@ } .mat-form-field-appearance-legacy .mat-form-field-label { - color: var(--adf-card-view-label-color) !important; + color: var(--theme-foreground-text-color-040) !important; } } diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss b/lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss index 152454e3b2..fb17cd6497 100644 --- a/lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss @@ -11,11 +11,11 @@ $select-filter-height: 4em !default; display: flex; z-index: 100; font-size: var(--theme-body-1-font-size); - color: var(--theme-text-bold-color); + color: var(--theme-foreground-text-color-087); line-height: 3em; height: $select-filter-height; padding: 5px 16px 0; - background: var(--theme-card-bg-color); + background: var(--theme-background-card-color); } .mat-form-field { diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss index 953aa13ce0..42ac73bd52 100644 --- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss @@ -3,19 +3,19 @@ font-size: var(--theme-subheading-2-font-size); width: 16px; height: 16px; - color: var(--adf-card-view-text-color); + color: var(--theme-foreground-text-color-025); } &-textitem-action.mat-icon-button { width: 20px; height: 20px; line-height: 20px; - color: var(--adf-card-view-text-color); + color: var(--theme-foreground-text-color-025); } &-textitem-action:hover, &-textitem-action:focus { - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); } &-update-icon { @@ -27,7 +27,7 @@ &:hover .adf-textitem-action, &:focus .adf-textitem-action { - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); } } @@ -49,7 +49,7 @@ } &:hover .adf-textitem-action { - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); } } @@ -64,7 +64,7 @@ align-items: center; mat-icon:not(.adf-button-disabled):hover { - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); cursor: pointer !important; } @@ -96,7 +96,7 @@ } &-textitem-default-value { - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); } &-textitem-editable .mat-form-field-wrapper { @@ -153,7 +153,7 @@ &:hover::-webkit-scrollbar-thumb { display: block; - background-color: var(--adf-card-view-text-color); + background-color: var(--theme-foreground-text-color-025); border-radius: 2px; } } @@ -172,12 +172,12 @@ } .adf-property-clear-value { - color: var(--adf-card-view-text-color); + color: var(--theme-foreground-text-color-025); display: inline; } .adf-property-clear-value:hover { - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); } } } diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss index 9e3088f3f9..f48964aa93 100644 --- a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss +++ b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss @@ -34,14 +34,14 @@ .adf-property-label { font-size: var(--theme-caption-font-size); - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); word-wrap: break-word; } .adf-property-value, .mat-form-field-label { font-size: var(--theme-body-1-font-size); - color: var(--theme-text-bold-color); + color: var(--theme-foreground-text-color-087); } } } diff --git a/lib/core/src/lib/comments/comment-list/comment-list.component.scss b/lib/core/src/lib/comments/comment-list/comment-list.component.scss index 14fdb8e936..dbac7d3993 100644 --- a/lib/core/src/lib/comments/comment-list/comment-list.component.scss +++ b/lib/core/src/lib/comments/comment-list/comment-list.component.scss @@ -1,5 +1,5 @@ .adf-is-selected { - background: var(--adf-comment-list-primary-color); + background: var(--theme-primary-100); } .adf { @@ -25,13 +25,13 @@ &:hover { background: - var(--adf-comment-list-primary-color) - radial-gradient(circle, transparent 1%, var(--adf-comment-list-primary-color) 1%) + var(--theme-primary-100) + radial-gradient(circle, transparent 1%, var(--theme-primary-100) 1%) center/15000%; } &:active { - background-color: var(--adf-comment-list-ripple-color); + background-color: var(--theme-primary-300); background-size: 100%; transition: background 0s; } diff --git a/lib/core/src/lib/comments/comments.component.scss b/lib/core/src/lib/comments/comments.component.scss index 0f351c059c..a6f757312a 100644 --- a/lib/core/src/lib/comments/comments.component.scss +++ b/lib/core/src/lib/comments/comments.component.scss @@ -8,14 +8,14 @@ padding: 10px 20px; font-size: var(--theme-body-1-font-size); font-weight: 600; - border-bottom: 1px solid var(--theme-fg-divider); + border-bottom: 1px solid var(--theme-foreground-divider-color); margin: 0; } .adf-comments-input-container { width: calc(100% - 30px); padding: 8px 15px 0; - border-bottom: 1px solid var(--theme-fg-divider); + border-bottom: 1px solid var(--theme-foreground-divider-color); textarea { resize: vertical; diff --git a/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.scss b/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.scss index b56dc7f5ae..8288b57b55 100644 --- a/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.scss +++ b/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.scss @@ -35,7 +35,7 @@ $adf-columns-selector-space: 12px; margin-top: 10px; &:hover { - background-color: var(--theme-bg-hover-color); + background-color: var(--theme-background-hover-color); } } diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss index 4c163b7c9a..47738551c9 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss @@ -27,7 +27,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; &--divider { padding: 24px 0; - border: 1px solid var(--theme-border-color); + border: 1px solid var(--theme-foreground-text-color-007); } &:hover { @@ -43,7 +43,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; } .adf-datatable-card { - border: 1px solid var(--theme-fg-divider); + border: 1px solid var(--theme-foreground-divider-color); .adf-datatable-body { flex-flow: row wrap; @@ -80,7 +80,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; } .adf-is-selected { - background: var(--adf-datatable-selected-color); + background: var(--theme-primary-100); padding-bottom: 31px; } @@ -128,7 +128,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; margin-left: 10px; text-align: left; content: attr(title); - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); float: left; width: 140px; white-space: nowrap; @@ -159,7 +159,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; margin: 8px; padding: 4px; overflow: visible; - border-bottom: 1px solid var(--theme-fg-divider); + border-bottom: 1px solid var(--theme-foreground-divider-color); .adf-datatable-cell-container { float: left; @@ -191,8 +191,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; .adf-datatable-list { display: flex; flex-direction: column; - background-color: var(--theme-card-bg-color); - border: 1px solid var(--theme-border-color); + background-color: var(--theme-background-card-color); + border: 1px solid var(--theme-foreground-text-color-007); box-sizing: border-box; overflow-x: auto; @@ -237,13 +237,13 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; } .adf-datatable-cell { - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); } .adf-datatable-row { &:hover, &:focus { - background-color: var(--theme-bg-hover-color); + background-color: var(--theme-background-hover-color); } &:focus { @@ -275,7 +275,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; @include material-animation-default(0.28s); transition-property: background-color; - border-top: 1px solid var(--theme-border-color); + border-top: 1px solid var(--theme-foreground-text-color-007); min-height: $data-table-row-height; cursor: pointer; @@ -283,11 +283,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; &.adf-is-selected, &.adf-is-selected:hover { - background-color: var(--theme-selected-button-bg-color); + background-color: var(--theme-background-selected-button-color); } &:last-child { - border-bottom: 1px solid var(--theme-border-color); + border-bottom: 1px solid var(--theme-foreground-text-color-007); } } } @@ -438,10 +438,10 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; .adf-location-cell { a { text-decoration: none; - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); &:hover { - color: var(--adf-datatable-cell-link-hover-color); + color: var(--theme-accent-500); text-decoration: underline; } } @@ -460,15 +460,15 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; } .adf-is-selected { - background: var(--adf-datatable-selected-color); + background: var(--theme-primary-100); } .adf-datatable-link { text-decoration: none; - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); &:hover { - color: var(--adf-datatable-cell-link-hover-color); + color: var(--theme-accent-500); text-decoration: underline; } } @@ -592,7 +592,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; letter-spacing: 0; min-height: $data-table-row-height !important; font-size: $data-table-header-font-size; - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); box-sizing: border-box; &.adf-sortable { @@ -604,7 +604,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; .adf-datatable__header--sorted-asc, .adf-datatable__header--sorted-desc { - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); &::after { @include typo-icon; @@ -646,7 +646,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; } &--hovered { - background-color: var(--theme-bg-hover-color); + background-color: var(--theme-background-hover-color); border-radius: 6px; } } @@ -674,7 +674,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; display: flex; flex: 1; flex-grow: 1; - background: var(--theme-bg-hover-color); + background: var(--theme-background-hover-color); border: dotted 1px rgba(0, 0, 0, 0.25); min-height: 55px; transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); @@ -724,8 +724,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; .adf-datatable-header { display: block; margin-right: 0; - border-top: 1px solid var(--theme-border-color); - border-bottom: 1px solid var(--theme-border-color); + border-top: 1px solid var(--theme-foreground-text-color-007); + border-bottom: 1px solid var(--theme-foreground-text-color-007); } .adf-datatable-body { @@ -761,7 +761,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; .adf-datatable-body { .adf-datatable-row { height: 100%; - background-color: var(--theme-card-bg-color); + background-color: var(--theme-background-card-color); border: none !important; &:hover, @@ -775,7 +775,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; .adf-datatable--empty--header-visible { .adf-datatable-header { - border: 1px solid var(--theme-border-color); + border: 1px solid var(--theme-foreground-text-color-007); } .adf-datatable-body { @@ -786,7 +786,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; .adf-datatable-row { height: 100%; - background-color: var(--theme-card-bg-color); + background-color: var(--theme-background-card-color); border: none !important; &:hover, diff --git a/lib/core/src/lib/directives/tooltip-card/tooltip-card.component.scss b/lib/core/src/lib/directives/tooltip-card/tooltip-card.component.scss index d973dad8fd..0142a551fa 100644 --- a/lib/core/src/lib/directives/tooltip-card/tooltip-card.component.scss +++ b/lib/core/src/lib/directives/tooltip-card/tooltip-card.component.scss @@ -7,7 +7,7 @@ div.adf-tooltip-card { @include mat.elevation(8); - background-color: var(--theme-card-bg-color); + background-color: var(--theme-background-card-color); border: 1px solid var(--theme-primary-color); padding: 12px; border-radius: 6px; @@ -15,7 +15,7 @@ div.adf-tooltip-card { p, div { font-size: var(--theme-caption-font-size); - color: var(--adf-tooltip-card-color); + color: var(--theme-foreground-text-color-075); margin: 0; } diff --git a/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss b/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss index 45114e0d8a..e883ee6d91 100644 --- a/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss +++ b/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss @@ -34,8 +34,8 @@ $adf-inplace-input-padding: 7px; } &:hover:not(:focus) { - border: 1px solid var(--theme-bg-hover-color); - background-color: var(--theme-bg-hover-color); + border: 1px solid var(--theme-background-hover-color); + background-color: var(--theme-background-hover-color); } } } diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss b/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss index 8557e21f01..ac892841e6 100644 --- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss +++ b/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss @@ -17,7 +17,7 @@ &:not(.mat-focused):not(.mat-form-field-invalid) { .adf-amount-widget__prefix-spacing { - color: var(--theme-secondary-text-color); + color: var(--theme-foreground-secondary-text-color); } } } diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss index 4ae5337d5e..daeb35eb05 100644 --- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss +++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss @@ -21,5 +21,5 @@ } .mat-datetimepicker-toggle { - color: var(--theme-icon-fg-color); + color: var(--theme-foreground-icon-color); } diff --git a/lib/core/src/lib/form/components/widgets/form.theme.scss b/lib/core/src/lib/form/components/widgets/form.theme.scss index 286affc701..16a5f7c60c 100644 --- a/lib/core/src/lib/form/components/widgets/form.theme.scss +++ b/lib/core/src/lib/form/components/widgets/form.theme.scss @@ -6,7 +6,7 @@ ul > li > form-field > .adf-focus { } .mat-form-field-label { - color: var(--theme-colors-mat-grey-dark) !important; + color: var(--theme-mat-grey-color-a200-dark) !important; } .adf { @@ -29,7 +29,7 @@ ul > li > form-field > .adf-focus { } &-label { - color: var(--theme-secondary-text-color); + color: var(--theme-foreground-secondary-text-color); } &-asterisk { @@ -48,7 +48,7 @@ ul > li > form-field > .adf-focus { .mat-select { &-arrow { - color: var(--theme-secondary-text-color) !important; + color: var(--theme-foreground-secondary-text-color) !important; } } @@ -57,7 +57,7 @@ ul > li > form-field > .adf-focus { } .mat-form-field-prefix { - color: var(--theme-secondary-text-color); + color: var(--theme-foreground-secondary-text-color); } .adf-input { @@ -66,7 +66,7 @@ ul > li > form-field > .adf-focus { } &-left-label { - color: var(--theme-secondary-text-color); + color: var(--theme-foreground-secondary-text-color); } } diff --git a/lib/core/src/lib/identity-user-info/identity-user-info.component.scss b/lib/core/src/lib/identity-user-info/identity-user-info.component.scss index 4161e22a04..ee6ef20e07 100644 --- a/lib/core/src/lib/identity-user-info/identity-user-info.component.scss +++ b/lib/core/src/lib/identity-user-info/identity-user-info.component.scss @@ -18,7 +18,7 @@ } &-userinfo-pic { - background: var(--adf-user-info-color); + background: var(--theme-primary-300); display: inline-block; width: 40px; height: 40px; @@ -32,7 +32,7 @@ } &-userinfo-profile-image { - background: var(--adf-user-info-color); + background: var(--theme-primary-300); text-align: center; border-radius: 90%; width: 40px; @@ -132,7 +132,7 @@ } &-userinfo-profile-picture { - background: var(--adf-user-info-color); + background: var(--theme-primary-300); background-size: cover; border-radius: 50%; height: 80px; @@ -144,7 +144,7 @@ &-userinfo-profile-initials { text-transform: uppercase; background-size: cover; - background-color: var(--adf-user-info-color); + background-color: var(--theme-primary-300); border-radius: 50%; height: 80px; width: 80px; diff --git a/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss b/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss index ee0065d223..3c2632207d 100644 --- a/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss +++ b/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss @@ -50,7 +50,7 @@ $adf-info-drawer-icon-size-half: 24px !default; line-height: 1.6; letter-spacing: -0.5px; text-align: left; - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); & > div { overflow: hidden; @@ -77,7 +77,7 @@ $adf-info-drawer-icon-size-half: 24px !default; .adf-manage-versions-no-permission { margin: 0; padding: $adf-info-drawer-icon-size-half; - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); text-align: center; display: flex; flex-direction: column; diff --git a/lib/core/src/lib/layout/components/header/header.component.scss b/lib/core/src/lib/layout/components/header/header.component.scss index ccddb6e043..a0da71f59c 100644 --- a/lib/core/src/lib/layout/components/header/header.component.scss +++ b/lib/core/src/lib/layout/components/header/header.component.scss @@ -1,6 +1,6 @@ adf-layout-header .mat-toolbar-single-row { - color: var(--adf-header-text-color) !important; - background-color: var(--adf-header-background-color); + color: var(--theme-primary-color-default-contrast) !important; + background-color: var(--theme-primary-color); position: relative; padding: 0 24px; @@ -35,7 +35,7 @@ adf-layout-header .mat-toolbar-single-row { margin: 0 5px; & > div { - background-color: var(--theme-card-bg-color); + background-color: var(--theme-background-card-color); } } diff --git a/lib/core/src/lib/layout/components/layout-container/layout-container.component.scss b/lib/core/src/lib/layout/components/layout-container/layout-container.component.scss index 2e8322ba17..0c0f473248 100644 --- a/lib/core/src/lib/layout/components/layout-container/layout-container.component.scss +++ b/lib/core/src/lib/layout/components/layout-container/layout-container.component.scss @@ -32,7 +32,7 @@ adf-layout-container { .mat-sidenav { overflow: hidden; - border-right: 1px solid var(--theme-border-color); + border-right: 1px solid var(--theme-foreground-text-color-007); background-color: var(--theme-background-color); } diff --git a/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss b/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss index 771263a905..057de80724 100644 --- a/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss +++ b/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss @@ -28,7 +28,7 @@ &-sidebar-action-menu-icon { margin: 18px 0 0 20px; - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); cursor: pointer; &:hover { @@ -42,7 +42,7 @@ .mat-menu-item { font-size: var(--theme-body-1-font-size); - color: var(--theme-text-bold-color); + color: var(--theme-foreground-text-color-087); text-align: left; line-height: 1.5; letter-spacing: -0.4px; diff --git a/lib/core/src/lib/login/components/login.component.scss b/lib/core/src/lib/login/components/login.component.scss index d54ff91ca2..292f7fa832 100644 --- a/lib/core/src/lib/login/components/login.component.scss +++ b/lib/core/src/lib/login/components/login.component.scss @@ -63,7 +63,7 @@ .adf-login-card-wide { border-radius: 8px; - background-color: var(--theme-dialog-bg-color); + background-color: var(--theme-background-dialog-color); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); width: 450px; min-width: 320px; @@ -191,7 +191,7 @@ } .mat-form-field .adf-login-password-icon.mat-icon { - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); } .adf-login__field .mat-form-field-wrapper { @@ -201,8 +201,8 @@ .adf-login__field input:-webkit-autofill { /* stylelint-disable */ - -webkit-box-shadow: 0 0 0 1000px var(--theme-dialog-bg-color) inset; - -webkit-text-fill-color: var(--theme-text-fg-color) !important; + -webkit-box-shadow: 0 0 0 1000px var(--theme-background-dialog-color) inset; + -webkit-text-fill-color: var(--theme-foreground-text-color) !important; /* stylelint-enable */ } @@ -240,7 +240,7 @@ } .adf-login-remember-me { - color: var(--theme-text-fg-color) !important; + color: var(--theme-foreground-text-color) !important; } .adf-login-action-container { diff --git a/lib/core/src/lib/notifications/components/notification-history.component.scss b/lib/core/src/lib/notifications/components/notification-history.component.scss index 5f8cfeac76..8016f7e34f 100644 --- a/lib/core/src/lib/notifications/components/notification-history.component.scss +++ b/lib/core/src/lib/notifications/components/notification-history.component.scss @@ -18,11 +18,11 @@ &-item:focus { outline: none; - background: var(--theme-bg-hover-color); + background: var(--theme-background-hover-color); } &-item:hover { - background-color: var(--theme-bg-hover-color); + background-color: var(--theme-background-hover-color); } &-message, @@ -51,7 +51,7 @@ text-transform: uppercase; vertical-align: middle; line-height: 40px; - color: var(--theme-colors-mat-grey); + color: var(--theme-mat-grey-color-a200); } &-notification-history-load-more { diff --git a/lib/core/src/lib/pagination/pagination.component.scss b/lib/core/src/lib/pagination/pagination.component.scss index d933e0de27..06af5c0993 100644 --- a/lib/core/src/lib/pagination/pagination.component.scss +++ b/lib/core/src/lib/pagination/pagination.component.scss @@ -11,7 +11,7 @@ $adf-pagination-empty-border: none !default; border-top: $adf-pagination-border; height: $adf-pagination-height; line-height: 20px; - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); &__block { display: flex; @@ -60,7 +60,7 @@ $adf-pagination-empty-border: none !default; &, & + button { - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); } & + button { diff --git a/lib/core/src/lib/search-text/search-text-input.component.scss b/lib/core/src/lib/search-text/search-text-input.component.scss index 04e746e20e..0812993786 100644 --- a/lib/core/src/lib/search-text/search-text-input.component.scss +++ b/lib/core/src/lib/search-text/search-text-input.component.scss @@ -21,10 +21,10 @@ &-input-form-field-divider { .mat-form-field-underline { - background-color: var(--adf-search-input-bg-color); + background-color: var(--theme-primary-50); .mat-form-field-ripple { - background-color: var(--adf-search-input-bg-color); + background-color: var(--theme-primary-50); } } @@ -33,5 +33,5 @@ } .adf-highlight { - color: var(--adf-search-input-highlight-color); + color: var(--theme-primary-900); } diff --git a/lib/core/src/lib/styles/_index.scss b/lib/core/src/lib/styles/_index.scss index 4e089f7fd5..064d9415fc 100644 --- a/lib/core/src/lib/styles/_index.scss +++ b/lib/core/src/lib/styles/_index.scss @@ -26,63 +26,55 @@ // map SCSS variables to expose as CSS variables $defaults: ( - // material colors + // theme colors --theme-primary-color: mat.get-color-from-palette($primary), --theme-primary-color-default-contrast: mat.get-color-from-palette($primary, default-contrast), + --theme-primary-contrast-500:mat.get-color-from-palette($primary, '500-contrast'), + --theme-primary-50:mat.get-color-from-palette($primary, 50), + --theme-primary-100:mat.get-color-from-palette($primary, 100), + --theme-primary-300:mat.get-color-from-palette($primary, 300), + --theme-primary-900:mat.get-color-from-palette($primary, 900), + --theme-warn-color: mat.get-color-from-palette($warn), --theme-warn-color-default-contrast: mat.get-color-from-palette($warn, default-contrast), + --theme-warn-contrast-500: mat.get-color-from-palette($warn, '500-contrast'), + --theme-accent-color: mat.get-color-from-palette($accent), + --theme-accent-contrast-500:mat.get-color-from-palette($accent, '500-contrast'), --theme-accent-color-a200: mat.get-color-from-palette($accent, A200), --theme-accent-color-default-contrast: mat.get-color-from-palette($accent, default-contrast), + --theme-accent-500:mat.get-color-from-palette($accent, 500), - // component themes - --adf-snackbar-error-bg-color: mat.get-color-from-palette($warn), - --adf-snackbar-error-action-color: white, - --adf-snackbar-warning-bg-color: mat.get-color-from-palette($accent), - --adf-snackbar-warning-action-color: white, - --adf-snackbar-info-bg-color: mat.get-color-from-palette($primary), - --adf-snackbar-info-action-color: white, - --adf-breadcrumb-item-active-color: mat.get-color-from-palette($foreground, text, 0.87), - --adf-breadcrumb-item-active-hover-color: mat.get-color-from-palette($foreground, text, 0.64), - --adf-node-selector-icon-color: mat.get-color-from-palette($foreground, icon, 0.54), - --adf-node-selector-base-color: mat.get-color-from-palette($foreground, base, 0.45), - --adf-node-selector-base-bold-color: mat.get-color-from-palette($foreground, base, 0.65), - --adf-datatable-cell-link-hover-color: mat.get-color-from-palette($accent, 500), - --adf-datatable-selected-color: mat.get-color-from-palette($primary, 100), - --adf-user-info-color: mat.get-color-from-palette($primary, 300), - --adf-comment-list-primary-color: mat.get-color-from-palette($primary, 100), - --adf-comment-list-ripple-color: mat.get-color-from-palette($primary, 300), - --adf-search-input-bg-color: mat.get-color-from-palette($primary, 50), - --adf-search-input-highlight-color: mat.get-color-from-palette($primary, 900), - --adf-tooltip-card-color: mat.get-color-from-palette($foreground, text, 0.75), - --adf-card-view-text-color: mat.get-color-from-palette($foreground, text, 0.25), - --adf-card-view-label-color: mat.get-color-from-palette($foreground, text, 0.4), - --adf-card-view-datetime-border-color: mat.get-color-from-palette($foreground, text, 0.42), - --adf-upload-border-color: mat.get-color-from-palette($foreground, text, 0.14), - --adf-header-background-color: mat.get-color-from-palette($primary), - --adf-header-text-color: mat.get-color-from-palette($primary, default-contrast), + --theme-foreground-base-color: mat.get-color-from-palette($foreground, base), + --theme-foreground-base-color-065: mat.get-color-from-palette($foreground, base, 0.65), + --theme-foreground-base-color-045: mat.get-color-from-palette($foreground, base, 0.45), + --theme-foreground-disabled-text-color: mat.get-color-from-palette($foreground, disabled-text), + --theme-foreground-divider-color: mat.get-color-from-palette($foreground, divider), + --theme-foreground-icon-color: mat.get-color-from-palette($foreground, icon), + --theme-foreground-icon-color-054: mat.get-color-from-palette($foreground, icon, 0.54), + --theme-foreground-secondary-text-color: mat.get-color-from-palette($foreground, secondary-text), + --theme-foreground-text-color: mat.get-color-from-palette($foreground, text), + --theme-foreground-text-color-087: mat.get-color-from-palette($foreground, text, 0.87), + --theme-foreground-text-color-075: mat.get-color-from-palette($foreground, text, 0.75), + --theme-foreground-text-color-064: mat.get-color-from-palette($foreground, text, 0.64), + --theme-foreground-text-color-054: mat.get-color-from-palette($foreground, text, 0.54), + --theme-foreground-text-color-042: mat.get-color-from-palette($foreground, text, 0.42), + --theme-foreground-text-color-040: mat.get-color-from-palette($foreground, text, 0.4), + --theme-foreground-text-color-027: mat.get-color-from-palette($foreground, text, 0.27), + --theme-foreground-text-color-025: mat.get-color-from-palette($foreground, text, 0.25), + --theme-foreground-text-color-014: mat.get-color-from-palette($foreground, text, 0.14), + --theme-foreground-text-color-007: mat.get-color-from-palette($foreground, text, 0.07), - --theme-hover-bg-color: mat.get-color-from-palette($background, hover), - --theme-text-color: mat.get-color-from-palette($foreground, text, 0.54), - --theme-text-bold-color: mat.get-color-from-palette($foreground, text, 0.87), + --theme-background-card-color: mat.get-color-from-palette($background, card), + --theme-background-card-color-087: mat.get-color-from-palette($background, card, 0.87), --theme-background-color: mat.get-color-from-palette($background, background), - --theme-text-fg-color: mat.get-color-from-palette($foreground, text), - --theme-text-fg-shadow-color: mat.get-color-from-palette($foreground, text, 0.27), - --theme-border-color: mat.get-color-from-palette($foreground, text, 0.07), - --theme-card-bg-color: mat.get-color-from-palette($background, card), - --theme-card-bg-bold-color: mat.get-color-from-palette($background, card, 0.87), - --theme-foreground-text-color: mat.get-color-from-palette($foreground, text, 0.72), - --theme-secondary-text-color: mat.get-color-from-palette($foreground, secondary-text), - --theme-dialog-bg-color: mat.get-color-from-palette($background, dialog), - --theme-bg-hover-color: mat.get-color-from-palette($background, hover), - --theme-fg-base-color: mat.get-color-from-palette($foreground, base), - --theme-fg-divider: mat.get-color-from-palette($foreground, divider), - --theme-disabled-text-color: mat.get-color-from-palette($foreground, disabled-text), - --theme-selected-button-bg-color: mat.get-color-from-palette($background, selected-button), - --theme-icon-fg-color: mat.get-color-from-palette($foreground, icon), - --theme-unselected-chip-bg-color: mat.get-color-from-palette($background, unselected-chip), - --theme-status-bar-bg-color: mat.get-color-from-palette($background, status-bar), - // fonts + --theme-background-dialog-color: mat.get-color-from-palette($background, dialog), + --theme-background-hover-color: mat.get-color-from-palette($background, hover), + --theme-background-selected-button-color: mat.get-color-from-palette($background, selected-button), + --theme-background-status-bar-color: mat.get-color-from-palette($background, status-bar), + --theme-background-unselected-chip-color: mat.get-color-from-palette($background, unselected-chip), + + // typography --theme-font-family: mat.font-family($typography), --theme-body-1-font-size: mat.font-size($typography, body-1), --theme-body-2-font-size: mat.font-size($typography, body-2), @@ -104,9 +96,9 @@ --theme-adf-task-title-font-size: map-get($custom-css-variables, 'theme-adf-task-title-font-size'), // specific colors - --theme-colors-mat-grey: mat.get-color-from-palette(mat.$grey-palette, A200), - --theme-colors-mat-grey-dark: mat.get-color-from-palette(mat.$grey-palette, A400), - --theme-colors-mag-grey-light: mat.get-color-from-palette(mat.$grey-palette, 50), + --theme-mat-grey-color-a200: mat.get-color-from-palette(mat.$grey-palette, A200), + --theme-mat-grey-color-a400: mat.get-color-from-palette(mat.$grey-palette, A400), + --theme-mat-grey-color-50: mat.get-color-from-palette(mat.$grey-palette, 50), ); // propagates SCSS variables into the CSS variables scope diff --git a/lib/core/src/lib/styles/material.theme.scss b/lib/core/src/lib/styles/material.theme.scss index fc6548e9f9..54d9f3da06 100644 --- a/lib/core/src/lib/styles/material.theme.scss +++ b/lib/core/src/lib/styles/material.theme.scss @@ -4,7 +4,7 @@ & .mat-expansion-panel-header.cdk-program-focused, &:not(.mat-expanded) .mat-expansion-panel-header:hover { &:not([aria-disabled='true']) { - background-color: var(--theme-hover-bg-color); + background-color: var(--theme-background-hover-color); } } } @@ -12,21 +12,21 @@ .mat-calendar { .mat-calendar-header { button { - color: var(--theme-text-bold-color); + color: var(--theme-foreground-text-color-087); &:disabled { - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); } } } .mat-calendar-content { .mat-calendar-table-header th { - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); } .mat-calendar-body-disabled > div { - color: var(--theme-text-color) !important; + color: var(--theme-foreground-text-color-054) !important; } } } @@ -48,11 +48,11 @@ .mat-datetimepicker-calendar-content { .mat-datetimepicker-calendar-table-header th { - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); } .mat-datetimepicker-calendar-body-disabled > div { - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); } } } diff --git a/lib/core/src/lib/styles/snackbar.theme.scss b/lib/core/src/lib/styles/snackbar.theme.scss index 7e46dd3083..ba9de94b51 100644 --- a/lib/core/src/lib/styles/snackbar.theme.scss +++ b/lib/core/src/lib/styles/snackbar.theme.scss @@ -1,25 +1,25 @@ @mixin adf-snackbar-theme() { .adf-error-snackbar { - background-color: var(--adf-snackbar-error-bg-color); + background-color: var(--theme-warn-color); .mat-simple-snackbar-action { - color: var(--adf-snackbar-error-action-color); + color: var(--theme-warn-contrast-500); } } .adf-warning-snackbar { - background-color: var(--adf-snackbar-warning-bg-color); + background-color: var(--theme-accent-color); .mat-simple-snackbar-action { - color: var(--adf-snackbar-warning-action-color); + color: var(--theme-accent-contrast-500); } } .adf-info-snackbar { - background-color: var(--adf-snackbar-info-bg-color); + background-color: var(--theme-primary-color); .mat-simple-snackbar-action { - color: var(--adf-snackbar-info-action-color); + color: var(--theme-primary-contrast-500); } } } diff --git a/lib/core/src/lib/templates/empty-content/empty-content.component.scss b/lib/core/src/lib/templates/empty-content/empty-content.component.scss index dcce571069..dc278a693a 100644 --- a/lib/core/src/lib/templates/empty-content/empty-content.component.scss +++ b/lib/core/src/lib/templates/empty-content/empty-content.component.scss @@ -1,5 +1,5 @@ .adf-empty-content { - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); display: flex; flex-direction: column; align-items: center; diff --git a/lib/core/src/lib/templates/error-content/error-content.component.scss b/lib/core/src/lib/templates/error-content/error-content.component.scss index 022d4942c0..5cff139bb5 100644 --- a/lib/core/src/lib/templates/error-content/error-content.component.scss +++ b/lib/core/src/lib/templates/error-content/error-content.component.scss @@ -1,5 +1,5 @@ .adf-error-content { - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); display: flex; flex-direction: column; align-items: center; diff --git a/lib/core/src/lib/toolbar/toolbar.component.scss b/lib/core/src/lib/toolbar/toolbar.component.scss index b72a3427fa..ce58a654e5 100644 --- a/lib/core/src/lib/toolbar/toolbar.component.scss +++ b/lib/core/src/lib/toolbar/toolbar.component.scss @@ -11,8 +11,8 @@ .mat-toolbar { min-height: 48px; - border: 1px solid var(--theme-border-color); - color: var(--theme-text-color); + border: 1px solid var(--theme-foreground-text-color-007); + color: var(--theme-foreground-text-color-054); } .mat-toolbar-row { diff --git a/lib/core/src/lib/viewer/components/img-viewer.component.scss b/lib/core/src/lib/viewer/components/img-viewer.component.scss index 5377346499..0969b929d0 100644 --- a/lib/core/src/lib/viewer/components/img-viewer.component.scss +++ b/lib/core/src/lib/viewer/components/img-viewer.component.scss @@ -33,7 +33,7 @@ .adf-toolbar .mat-toolbar { max-height: 48px; - background-color: var(--theme-card-bg-color); + background-color: var(--theme-background-card-color); border-width: 0; border-radius: 2px; /* stylelint-disable-next-line */ @@ -54,7 +54,7 @@ width: 79px; height: 24px; font-size: var(--theme-body-1-font-size); - border: 1px solid var(--theme-border-color); + border: 1px solid var(--theme-foreground-text-color-007); text-align: center; line-height: 24px; margin-left: 4px; diff --git a/lib/core/src/lib/viewer/components/pdf-viewer-thumbnails.component.scss b/lib/core/src/lib/viewer/components/pdf-viewer-thumbnails.component.scss index 03c6a64514..39fc85e899 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer-thumbnails.component.scss +++ b/lib/core/src/lib/viewer/components/pdf-viewer-thumbnails.component.scss @@ -21,7 +21,7 @@ } &__thumb:hover { - box-shadow: 0 0 5px 0 var(--theme-text-bold-color); + box-shadow: 0 0 5px 0 var(--theme-foreground-text-color-087); } &__thumb--selected { diff --git a/lib/core/src/lib/viewer/components/pdf-viewer.component.scss b/lib/core/src/lib/viewer/components/pdf-viewer.component.scss index 2d31c1a512..36997e5c92 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer.component.scss +++ b/lib/core/src/lib/viewer/components/pdf-viewer.component.scss @@ -57,7 +57,7 @@ justify-content: flex-end; align-items: flex-end; display: flex; - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); } } @@ -97,7 +97,7 @@ .adf-toolbar .mat-toolbar { max-height: 48px; - background-color: var(--theme-card-bg-color); + background-color: var(--theme-background-card-color); border-width: 0; border-radius: 2px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 20.4), 0 0 2px 0 rgba(0, 0, 0, 0.12); @@ -109,8 +109,8 @@ font-size: var(--theme-body-1-font-size); & > input { - border: 1px solid var(--theme-border-color); - background-color: var(--theme-card-bg-color); + border: 1px solid var(--theme-foreground-text-color-007); + background-color: var(--theme-background-card-color); color: inherit; font-size: var(--theme-body-1-font-size); padding: 5px; @@ -129,7 +129,7 @@ width: 79px; height: 24px; font-size: var(--theme-body-1-font-size); - border: 1px solid var(--theme-border-color); + border: 1px solid var(--theme-foreground-text-color-007); text-align: center; line-height: 24px; margin-left: 4px; diff --git a/lib/core/src/lib/viewer/components/unknown-format/unknown-format.component.scss b/lib/core/src/lib/viewer/components/unknown-format/unknown-format.component.scss index 7543a3caff..0202dadbae 100644 --- a/lib/core/src/lib/viewer/components/unknown-format/unknown-format.component.scss +++ b/lib/core/src/lib/viewer/components/unknown-format/unknown-format.component.scss @@ -5,5 +5,5 @@ flex: 1; flex-direction: column; justify-content: center; - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); } diff --git a/lib/core/src/lib/viewer/components/viewer-render.component.scss b/lib/core/src/lib/viewer/components/viewer-render.component.scss index c9d287d346..2a4b66ed44 100644 --- a/lib/core/src/lib/viewer/components/viewer-render.component.scss +++ b/lib/core/src/lib/viewer/components/viewer-render.component.scss @@ -2,7 +2,7 @@ .adf-full-screen { width: 100%; height: 100%; - background-color: var(--theme-card-bg-color); + background-color: var(--theme-background-card-color); } .adf-viewer-render { diff --git a/lib/core/src/lib/viewer/components/viewer.component.scss b/lib/core/src/lib/viewer/components/viewer.component.scss index 3bc4c52a70..e785b25751 100644 --- a/lib/core/src/lib/viewer/components/viewer.component.scss +++ b/lib/core/src/lib/viewer/components/viewer.component.scss @@ -2,7 +2,7 @@ .adf-full-screen { width: 100%; height: 100%; - background-color: var(--theme-card-bg-color); + background-color: var(--theme-background-card-color); } .adf-viewer { @@ -11,7 +11,7 @@ height: 100%; .mat-toolbar { - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); .adf-toolbar-title { width: auto; @@ -30,7 +30,7 @@ &-toolbar { .mat-toolbar { - background-color: var(--theme-card-bg-bold-color); + background-color: var(--theme-background-card-color-087); } } @@ -51,7 +51,7 @@ overflow: hidden; display: inline-block; vertical-align: middle; - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); } &-container { @@ -117,15 +117,15 @@ display: block; padding: 0; background-color: var(--theme-background-color); - box-shadow: 0 2px 4px 0 var(--theme-text-fg-shadow-color); + box-shadow: 0 2px 4px 0 var(--theme-foreground-text-color-027); overflow: auto; &__right { - border-left: 1px solid var(--theme-border-color); + border-left: 1px solid var(--theme-foreground-text-color-007); } &__left { - border-right: 1px solid var(--theme-border-color); + border-right: 1px solid var(--theme-foreground-text-color-007); } } } diff --git a/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.scss b/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.scss index c0a2e35b8e..8e7f8bda7a 100644 --- a/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.scss +++ b/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.scss @@ -75,16 +75,16 @@ } &-actions { - border-top: 1px solid var(--theme-fg-divider); + border-top: 1px solid var(--theme-foreground-divider-color); padding: 8px; box-sizing: border-box; height: 40px; &-icon { - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); &:hover { - color: var(--theme-text-bold-color); + color: var(--theme-foreground-text-color-087); } } } diff --git a/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.scss b/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.scss index 0e594a3524..1f86fc3f69 100644 --- a/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.scss +++ b/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.scss @@ -56,7 +56,7 @@ } .adf-report-report-container { - border-bottom: solid 1px var(--theme-fg-divider); + border-bottom: solid 1px var(--theme-foreground-divider-color); padding-top: 10px; .mat-toolbar { diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss index 61446f8d34..48c31a27ed 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss @@ -71,7 +71,7 @@ word-break: break-all; padding: 0.4375em; border-bottom: none; - background: var(--theme-colors-mat-grey); + background: var(--theme-mat-grey-color-a200); min-height: 27px; margin-bottom: 12px; diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.scss b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.scss index b3bd125d65..a14c8db14f 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.scss @@ -1,7 +1,7 @@ .adf-file-properties-table { table { width: 100%; - border: 1px solid var(--theme-border-color); + border: 1px solid var(--theme-foreground-text-color-007); box-shadow: none; .adf-file { diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/properties-viewer/properties-viewer.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/properties-viewer/properties-viewer.widget.scss index 69b0dac828..3a6e3238e9 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/properties-viewer/properties-viewer.widget.scss +++ b/lib/process-services-cloud/src/lib/form/components/widgets/properties-viewer/properties-viewer.widget.scss @@ -6,7 +6,7 @@ adf-properties-viewer-widget { display: block; height: 100%; width: 100%; - border: 1px solid var(--theme-border-color); + border: 1px solid var(--theme-foreground-text-color-007); border-radius: 6px; .adf-properties-viewer-wrapper-loading { diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss index db10ff750b..4344622257 100644 --- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss @@ -26,7 +26,7 @@ width: 40px; height: 40px; border-radius: 100px; - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); font-weight: bolder; font-size: var(--theme-adf-picture-1-font-size); text-transform: uppercase; diff --git a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss index cc64d54efb..f0fcc6e824 100755 --- a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss @@ -1,7 +1,7 @@ .adf { &-start-process { .mat-form-field-label { - color: var(--theme-colors-mat-grey-dark); + color: var(--theme-mat-grey-color-a200-dark); } mat-card-actions { diff --git a/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss b/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss index 5d200d2f77..d0a9df914a 100644 --- a/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss @@ -1,5 +1,5 @@ .adf-cloud-start-task-heading { - border-bottom: 1px solid var(--theme-fg-divider); + border-bottom: 1px solid var(--theme-foreground-divider-color); margin-bottom: 10px; .mat-card-title { diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.scss index bc87227faa..0166171288 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.scss @@ -36,7 +36,7 @@ padding: 0 5px; border-radius: 15px; background-color: var(--theme-accent-color); - color: var(--theme-colors-mag-grey-light); + color: var(--theme-mat-grey-color-50); font-size: smaller; } } diff --git a/lib/process-services/src/lib/form/start-form.component.scss b/lib/process-services/src/lib/form/start-form.component.scss index f90236a8e4..fa53b2f7d1 100644 --- a/lib/process-services/src/lib/form/start-form.component.scss +++ b/lib/process-services/src/lib/form/start-form.component.scss @@ -21,7 +21,7 @@ line-height: var(--theme-headline-line-height); letter-spacing: -0.4px; text-align: left; - color: var(--theme-text-color); + color: var(--theme-foreground-text-color-054); text-transform: uppercase; } diff --git a/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget-dialog.component.scss b/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget-dialog.component.scss index c2ae4a38fb..9604921d85 100644 --- a/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget-dialog.component.scss +++ b/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget-dialog.component.scss @@ -12,7 +12,7 @@ .adf-choose-action { &[disabled] { - color: var(--theme-secondary-text-color); + color: var(--theme-foreground-secondary-text-color); } &:enabled { diff --git a/lib/process-services/src/lib/form/widgets/dynamic-table/dynamic-table.widget.scss b/lib/process-services/src/lib/form/widgets/dynamic-table/dynamic-table.widget.scss index fafbc5c2b4..94ca7f6d4b 100644 --- a/lib/process-services/src/lib/form/widgets/dynamic-table/dynamic-table.widget.scss +++ b/lib/process-services/src/lib/form/widgets/dynamic-table/dynamic-table.widget.scss @@ -26,7 +26,7 @@ dynamic-table-widget .adf-label { &-dynamic-table { width: 100%; position: relative; - border: 1px solid var(--theme-border-color); + border: 1px solid var(--theme-foreground-text-color-007); white-space: nowrap; font-size: $dynamic-table-font-size; @@ -78,12 +78,12 @@ dynamic-table-widget .adf-label { } td { - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); position: relative; vertical-align: middle; height: $dynamic-table-row-height; - border-top: 1px solid var(--theme-border-color); - border-bottom: 1px solid var(--theme-border-color); + border-top: 1px solid var(--theme-foreground-text-color-007); + border-bottom: 1px solid var(--theme-foreground-text-color-007); padding-top: $dynamic-table-cell-top; box-sizing: border-box; @@ -104,7 +104,7 @@ dynamic-table-widget .adf-label { letter-spacing: 0; height: $dynamic-table-row-height; font-size: $dynamic-table-header-font-size; - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); padding-bottom: 8px; box-sizing: border-box; @@ -118,7 +118,7 @@ dynamic-table-widget .adf-label { &.adf-dynamic-table__header--sorted-asc, &.adf-dynamic-table__header--sorted-desc { - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); &::before { @include typo-icon; @@ -133,7 +133,7 @@ dynamic-table-widget .adf-label { cursor: pointer; &::before { - color: var(--theme-disabled-text-color); + color: var(--theme-foreground-disabled-text-color); } } } diff --git a/lib/process-services/src/lib/form/widgets/people/people.widget.scss b/lib/process-services/src/lib/form/widgets/people/people.widget.scss index e20af0b929..c90d2f4326 100644 --- a/lib/process-services/src/lib/form/widgets/people/people.widget.scss +++ b/lib/process-services/src/lib/form/widgets/people/people.widget.scss @@ -25,7 +25,7 @@ width: 40px; height: 40px; border-radius: 100px; - color: var(--theme-text-fg-color); + color: var(--theme-foreground-text-color); font-weight: bolder; font-size: var(--theme-adf-picture-1-font-size); text-transform: uppercase; @@ -34,7 +34,7 @@ &-people-widget-image { margin-left: -44px; left: 21px; - background: var(--theme-dialog-bg-color); + background: var(--theme-background-dialog-color); border-radius: 100px; width: 40px; height: 40px; diff --git a/lib/process-services/src/lib/people/components/people/people.component.scss b/lib/process-services/src/lib/people/components/people/people.component.scss index 7a44edfa61..b9de540240 100644 --- a/lib/process-services/src/lib/people/components/people/people.component.scss +++ b/lib/process-services/src/lib/people/components/people/people.component.scss @@ -1,5 +1,5 @@ .adf-assignment-header { - border-bottom: 1px solid var(--theme-fg-divider); + border-bottom: 1px solid var(--theme-foreground-divider-color); padding: 6px 20px; } @@ -25,7 +25,7 @@ } .adf-assignment-top-container.mat-card { - border-top: 1px solid var(--theme-fg-divider); + border-top: 1px solid var(--theme-foreground-divider-color); margin: 0; padding: 0; display: flex; @@ -43,7 +43,7 @@ .adf-assignment-container { padding: 10px 20px; - border-bottom: 1px solid var(--theme-fg-divider); + border-bottom: 1px solid var(--theme-foreground-divider-color); max-width: 100%; } diff --git a/lib/process-services/src/lib/process-comments/process-comments.component.scss b/lib/process-services/src/lib/process-comments/process-comments.component.scss index cde618468c..e79fe18895 100644 --- a/lib/process-services/src/lib/process-comments/process-comments.component.scss +++ b/lib/process-services/src/lib/process-comments/process-comments.component.scss @@ -32,13 +32,13 @@ padding: 10px 20px; font-size: var(--theme-body-1-font-size); font-weight: 600; - border-bottom: 1px solid var(--theme-fg-divider); + border-bottom: 1px solid var(--theme-foreground-divider-color); } .adf-comments-input-container { width: calc(100% - 30px); padding: 8px 15px 0; - border-bottom: 1px solid var(--theme-fg-divider); + border-bottom: 1px solid var(--theme-foreground-divider-color); } .adf-full-width { diff --git a/lib/process-services/src/lib/process-list/components/start-process.component.scss b/lib/process-services/src/lib/process-list/components/start-process.component.scss index 256a40752d..0b7292815b 100644 --- a/lib/process-services/src/lib/process-list/components/start-process.component.scss +++ b/lib/process-services/src/lib/process-list/components/start-process.component.scss @@ -10,7 +10,7 @@ } .mat-form-field-label { - color: var(--theme-colors-mat-grey-dark); + color: var(--theme-mat-grey-color-a200-dark); } .mat-content-actions { diff --git a/lib/process-services/src/lib/process-user-info/process-user-info.component.scss b/lib/process-services/src/lib/process-user-info/process-user-info.component.scss index 4161e22a04..ee6ef20e07 100644 --- a/lib/process-services/src/lib/process-user-info/process-user-info.component.scss +++ b/lib/process-services/src/lib/process-user-info/process-user-info.component.scss @@ -18,7 +18,7 @@ } &-userinfo-pic { - background: var(--adf-user-info-color); + background: var(--theme-primary-300); display: inline-block; width: 40px; height: 40px; @@ -32,7 +32,7 @@ } &-userinfo-profile-image { - background: var(--adf-user-info-color); + background: var(--theme-primary-300); text-align: center; border-radius: 90%; width: 40px; @@ -132,7 +132,7 @@ } &-userinfo-profile-picture { - background: var(--adf-user-info-color); + background: var(--theme-primary-300); background-size: cover; border-radius: 50%; height: 80px; @@ -144,7 +144,7 @@ &-userinfo-profile-initials { text-transform: uppercase; background-size: cover; - background-color: var(--adf-user-info-color); + background-color: var(--theme-primary-300); border-radius: 50%; height: 80px; width: 80px; diff --git a/lib/process-services/src/lib/task-list/components/start-task.component.scss b/lib/process-services/src/lib/task-list/components/start-task.component.scss index 01c877d657..c08334f270 100644 --- a/lib/process-services/src/lib/task-list/components/start-task.component.scss +++ b/lib/process-services/src/lib/task-list/components/start-task.component.scss @@ -1,7 +1,7 @@ /* stylelint-disable no-descending-specificity */ .adf-new-task-heading { padding-top: 12px; - border-bottom: 1px solid var(--theme-fg-divider); + border-bottom: 1px solid var(--theme-foreground-divider-color); .mat-card-title { font-weight: bold; diff --git a/lib/process-services/src/lib/task-list/components/task-standalone.component.scss b/lib/process-services/src/lib/task-list/components/task-standalone.component.scss index 3fda0ba28f..f15cdee953 100644 --- a/lib/process-services/src/lib/task-list/components/task-standalone.component.scss +++ b/lib/process-services/src/lib/task-list/components/task-standalone.component.scss @@ -5,7 +5,7 @@ margin: 16px auto; .mat-card-actions { - border-top: solid 1px var(--theme-status-bar-bg-color); + border-top: solid 1px var(--theme-background-status-bar-color); } }