[ACS-10226] Improve color contrast for better accessibility (#11429)

This commit is contained in:
Michal Kinas
2025-12-08 15:52:21 +01:00
committed by GitHub
parent 58591c67dc
commit 9717a88818
26 changed files with 36 additions and 35 deletions
@@ -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;
@@ -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);
@@ -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} {
@@ -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 {
@@ -58,6 +58,6 @@
}
.adf-facet-label {
color: var(--adf-theme-foreground-text-color-054);
color: var(--adf-theme-foreground-text-color-064);
}
}
@@ -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;
@@ -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,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);
}
}
@@ -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;
@@ -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 {
+5 -5
View File
@@ -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;
}