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

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;

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 {

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;

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

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 {

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;

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 {

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

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

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;

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

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 {

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;

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 {

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

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

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

View File

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

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 {

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;

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

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

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

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 {

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;

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 {

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 {