mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
[ACS-10226] Improve color contrast for better accessibility (#11429)
This commit is contained in:
@@ -83,7 +83,7 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
|
||||
.adf-aspect-property-table-column-title,
|
||||
.adf-aspect-property-table-column-data-type {
|
||||
font-size: 12px;
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
}
|
||||
|
||||
.adf-aspect-property-table-column {
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
overflow: hidden;
|
||||
|
||||
&-container {
|
||||
@@ -75,7 +75,7 @@
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
text-align: left;
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
flex: 0 1 auto;
|
||||
min-width: 35px;
|
||||
margin-top: auto;
|
||||
|
||||
@@ -10,7 +10,7 @@ $dropdown-horizontal-offset: 30px;
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
overflow: hidden;
|
||||
margin-top: 10px;
|
||||
|
||||
|
||||
+1
-1
@@ -17,7 +17,7 @@
|
||||
max-height: 100%;
|
||||
|
||||
button {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
|
||||
&:hover {
|
||||
color: var(--adf-theme-foreground-text-color-087);
|
||||
|
||||
+1
-1
@@ -61,7 +61,7 @@ $panel-properties-height: 56px !default;
|
||||
}
|
||||
|
||||
.adf-edit-icon-buttons {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
}
|
||||
|
||||
#{ms.$mat-chip} {
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
display: grid;
|
||||
|
||||
&-location {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
font-size: var(--theme-caption-font-size);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
}
|
||||
|
||||
&__public-content {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
font-size: var(--theme-caption-font-size);
|
||||
}
|
||||
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
}
|
||||
|
||||
.adf-dialog-action-button:disabled > span {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
}
|
||||
|
||||
@media screen and (width <= 380px) {
|
||||
|
||||
@@ -130,7 +130,7 @@
|
||||
font-size: var(--theme-headline-font-size);
|
||||
line-height: 1.33;
|
||||
letter-spacing: -1px;
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
}
|
||||
|
||||
&-drag-drop {
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
padding: 8px 8px 24px 8px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
button {
|
||||
|
||||
+1
-1
@@ -58,6 +58,6 @@
|
||||
}
|
||||
|
||||
.adf-facet-label {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -5,7 +5,7 @@
|
||||
.adf-search-filter-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
align-items: center;
|
||||
padding: 16px 12px;
|
||||
height: 32px;
|
||||
|
||||
+1
-1
@@ -5,6 +5,6 @@
|
||||
}
|
||||
|
||||
.adf-search-check-list-label {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
.adf-search-sorting-picker {
|
||||
.adf-sorting-picker-button {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/* stylelint-disable no-descending-specificity */
|
||||
.adf-upload-dialog {
|
||||
background: var(--adf-theme-background-dialog-color);
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
width: 40%;
|
||||
@@ -36,7 +36,7 @@
|
||||
width: 24px;
|
||||
padding: 0;
|
||||
line-height: 0;
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+1
-1
@@ -76,7 +76,7 @@
|
||||
}
|
||||
|
||||
.adf-textitem-default-value {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
}
|
||||
|
||||
.adf-property-value-not-editable {
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
padding: 2px 12px;
|
||||
|
||||
#{ms.$mat-evolution-chip-text-label} {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -51,7 +51,7 @@ $adf-info-drawer-icon-size-half: 24px !default;
|
||||
letter-spacing: 0.15px;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
overflow: hidden;
|
||||
|
||||
& > div {
|
||||
@@ -80,7 +80,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(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
+1
-2
@@ -11,7 +11,6 @@
|
||||
background-color: var(--theme-primary-color);
|
||||
color: var(--theme-primary-color-default-contrast);
|
||||
border-radius: 4px;
|
||||
|
||||
}
|
||||
|
||||
&-text {
|
||||
@@ -23,7 +22,7 @@
|
||||
|
||||
&-sidebar-action-menu-icon {
|
||||
margin: 18px 0 0 20px;
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -17,19 +17,19 @@
|
||||
color: var(--adf-theme-foreground-text-color-087);
|
||||
|
||||
&:disabled {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{ms.$mat-calendar-content} {
|
||||
#{ms.$mat-calendar-table-header} th {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
}
|
||||
|
||||
#{ms.$mat-calendar-body-disabled} > div {
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
color: var(--adf-theme-foreground-text-color-054) !important;
|
||||
color: var(--adf-theme-foreground-text-color-064) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -51,11 +51,11 @@
|
||||
|
||||
#{ms.$mat-datetimepicker-calendar-content} {
|
||||
#{ms.$mat-datetimepicker-calendar-table-header} th {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
}
|
||||
|
||||
#{ms.$mat-datetimepicker-calendar-body-disabled} > div {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.adf-empty-content {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@use '../../styles/flex' as flex;
|
||||
|
||||
.adf-error-content {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
.adf-toolbar-container.adf-toolbar-container-row {
|
||||
border: 1px solid var(--adf-theme-foreground-text-color-007);
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
height: 64px;
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
white-space: normal;
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -103,7 +103,9 @@
|
||||
background-color: var(--adf-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);
|
||||
box-shadow:
|
||||
0 2px 2px 0 rgba(0, 0, 0, 20.4),
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
&-page-selector {
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
height: 100%;
|
||||
|
||||
#{ms.$mat-toolbar} {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
|
||||
.adf-toolbar-title {
|
||||
width: auto;
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
line-height: var(--theme-headline-line-height);
|
||||
letter-spacing: -0.4px;
|
||||
text-align: left;
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user