inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-12872] custom css variables replaced with theme related variables (#8332)

Browse Source 
* 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
This commit is contained in:
tomasz hanaj
2023-03-09 00:40:48 +01:00
committed by GitHub
parent 9863149a28
commit a39480bc48
83 changed files with 277 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
demo-shell/src/app/components/app-layout/app-layout.component.ts
View File

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

2
lib/content-services/src/lib/aspect-list/aspect-list.component.scss
View File

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

8
lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss
View File

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

2
lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss
View File

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

6
lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss
View File

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

2
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
View File

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

14
lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss
View File

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

4
lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss
View File

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

2
lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.component.scss
View File

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

6
lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
View File

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

8
lib/content-services/src/lib/content-user-info/content-user-info.component.scss
View File

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

2
lib/content-services/src/lib/dialogs/folder.dialog.scss
View File

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

14
lib/content-services/src/lib/document-list/components/document-list.component.scss
View File

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

4
lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.scss
View File

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

4
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss
View File

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

8
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss
View File

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

4
lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss
View File

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

6
lib/content-services/src/lib/search/components/search-control.component.scss
View File

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

2
lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss
View File

@@ -83,6 +83,6 @@
.mat-checkbox-label,
.mat-radio-label {
color: var(--theme-text-color);
color: var(--theme-foreground-text-color-054);
}
}

8
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss
View File

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

4
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss
View File

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

14
lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss
View File

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

4
lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss
View File

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

2
lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.scss
View File

@@ -1,5 +1,5 @@
.adf-search-sorting-picker {
.mat-icon-button {
color: var(--theme-text-color);
color: var(--theme-foreground-text-color-054);
}
}

2
lib/content-services/src/lib/tag/tag-node-list.component.scss
View File

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

10
lib/content-services/src/lib/tree/components/tree.component.scss
View File

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

12
lib/content-services/src/lib/upload/components/file-uploading-dialog.component.scss
View File

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

2
lib/content-services/src/lib/upload/components/file-uploading-list-row.component.scss
View File

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

4
lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
View File

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

2
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
View File

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

2
lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss
View File

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

4
lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss
View File

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

20
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
View File

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

4
lib/core/src/lib/card-view/components/card-view/card-view.component.scss
View File

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

8
lib/core/src/lib/comments/comment-list/comment-list.component.scss
View File

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

4
lib/core/src/lib/comments/comments.component.scss
View File

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

2
lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.scss
View File

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

52
lib/core/src/lib/datatable/components/datatable/datatable.component.scss
View File

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

4
lib/core/src/lib/directives/tooltip-card/tooltip-card.component.scss
View File

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

4
lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss
View File

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

2
lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
View File

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

2
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss
View File

@@ -21,5 +21,5 @@
}
.mat-datetimepicker-toggle {
color: var(--theme-icon-fg-color);
color: var(--theme-foreground-icon-color);
}

10
lib/core/src/lib/form/components/widgets/form.theme.scss
View File

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

8
lib/core/src/lib/identity-user-info/identity-user-info.component.scss
View File

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

4
lib/core/src/lib/info-drawer/info-drawer-layout.component.scss
View File

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

6
lib/core/src/lib/layout/components/header/header.component.scss
View File

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

2
lib/core/src/lib/layout/components/layout-container/layout-container.component.scss
View File

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

4
lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss
View File

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

10
lib/core/src/lib/login/components/login.component.scss
View File

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

6
lib/core/src/lib/notifications/components/notification-history.component.scss
View File

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

4
lib/core/src/lib/pagination/pagination.component.scss
View File

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

6
lib/core/src/lib/search-text/search-text-input.component.scss
View File

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

92
lib/core/src/lib/styles/_index.scss
View File

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

14
lib/core/src/lib/styles/material.theme.scss
View File

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

12
lib/core/src/lib/styles/snackbar.theme.scss
View File

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

2
lib/core/src/lib/templates/empty-content/empty-content.component.scss
View File

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

2
lib/core/src/lib/templates/error-content/error-content.component.scss
View File

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

4
lib/core/src/lib/toolbar/toolbar.component.scss
View File

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

4
lib/core/src/lib/viewer/components/img-viewer.component.scss
View File

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

2
lib/core/src/lib/viewer/components/pdf-viewer-thumbnails.component.scss
View File

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

10
lib/core/src/lib/viewer/components/pdf-viewer.component.scss
View File

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

2
lib/core/src/lib/viewer/components/unknown-format/unknown-format.component.scss
View File

@@ -5,5 +5,5 @@
flex: 1;
flex-direction: column;
justify-content: center;
color: var(--theme-text-fg-color);
color: var(--theme-foreground-text-color);
}

2
lib/core/src/lib/viewer/components/viewer-render.component.scss
View File

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

14
lib/core/src/lib/viewer/components/viewer.component.scss
View File

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

6
lib/insights/src/lib/analytics-process/components/analytics-report-list.component.scss
View File

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

2
lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.scss
View File

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

2
lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss
View File

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

2
lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.scss
View File

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

2
lib/process-services-cloud/src/lib/form/components/widgets/properties-viewer/properties-viewer.widget.scss
View File

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

2
lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss
View File

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

2
lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss
View File

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

2
lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss
View File

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

2
lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.scss
View File

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

2
lib/process-services/src/lib/form/start-form.component.scss
View File

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

2
lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget-dialog.component.scss
View File

@@ -12,7 +12,7 @@
.adf-choose-action {
&[disabled] {
color: var(--theme-secondary-text-color);
color: var(--theme-foreground-secondary-text-color);
}
&:enabled {

14
lib/process-services/src/lib/form/widgets/dynamic-table/dynamic-table.widget.scss
View File

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

4
lib/process-services/src/lib/form/widgets/people/people.widget.scss
View File

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

6
lib/process-services/src/lib/people/components/people/people.component.scss
View File

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

4
lib/process-services/src/lib/process-comments/process-comments.component.scss
View File

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

2
lib/process-services/src/lib/process-list/components/start-process.component.scss
View File

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

8
lib/process-services/src/lib/process-user-info/process-user-info.component.scss
View File

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

2
lib/process-services/src/lib/task-list/components/start-task.component.scss
View File

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

2
lib/process-services/src/lib/task-list/components/task-standalone.component.scss
View File

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