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