MM-53814 - Updating contrast for accessibility (#24381)

* Updating contrast for accessiblity

* Updating accessbility

* Updating accessiblity for icons

* Updating header icons

* Updating text opacity

* Updating icons and text

* Updating sidebar left

* Upadating icon in system console

* Updating global header

* Updating channel list

* Updating tests and fixing conflicts

* Updating filter css

* Updating css

* Updating epehemeral message contrast

* Updating icon with 64 opacity

* Updating test

* Updating confirm license removal csss

* Updating unintended files

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Этот коммит содержится в:
Asaad Mahmood
2024-02-21 15:54:18 +05:00
коммит произвёл GitHub
родитель 14dcdf7510
Коммит ecb09de6c7
194 изменённых файлов: 536 добавлений и 513 удалений

Просмотреть файл

@@ -98,7 +98,7 @@
.BillingHistory__table-bottomDesc {
margin-top: 4px;
color: rgba(var(--sys-center-channel-color-rgb), 0.56);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
font-size: 12px;
line-height: 16px;
}
@@ -181,7 +181,7 @@
}
&:disabled {
opacity: 0.6;
opacity: 0.73;
}
&:hover:not(:disabled) {

Просмотреть файл

@@ -31,7 +31,7 @@
}
.close {
color: rgba(#3f4350, 0.56) !important;
color: rgba(#3f4350, 0.75) !important;
}
}
}

Просмотреть файл

@@ -28,7 +28,7 @@
&__status {
padding-bottom: 8px;
color: rgba(var(--center-channel-color-rgb), 0.72);
color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px;
&--exceeded {

Просмотреть файл

@@ -95,7 +95,7 @@
.BillingSummary__lastInvoice-date {
margin-top: 8px;
color: rgba(var(--sys-center-channel-color-rgb), 0.72);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
}
.BillingSummary__lastInvoice-productName {
@@ -132,7 +132,7 @@
}
.BillingSummary__lastInvoice-partialCharges {
color: rgba(var(--sys-center-channel-color-rgb), 0.56);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
font-size: 12px;
line-height: 16px;

Просмотреть файл

@@ -31,7 +31,7 @@
}
&--more {
color: rgba(63, 69, 80, 0.72);
color: rgba(63, 69, 80, 0.75);
}
}
}
@@ -58,7 +58,7 @@
.disclaimer {
margin: 5px 0;
color: rgba(var(--center-channel-color-rgb), 0.72);
color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 10px;
font-style: normal;
font-weight: 400;

Просмотреть файл

@@ -127,13 +127,13 @@
.CompanyInfoDisplay__companyInfo-editButton {
padding: 2px;
border-radius: 4px;
color: rgba(var(--sys-center-channel-color-rgb), 0.56);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
font-size: 18px;
&:hover,
&:focus {
background: rgba(var(--sys-center-channel-color-rgb), 0.08);
color: rgba(var(--sys-center-channel-color-rgb), 0.72);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
text-decoration: none;
}
}

Просмотреть файл

@@ -112,7 +112,7 @@
&::placeholder {
color: var(--sys-center-channel-color);
opacity: 0.64;
opacity: 0.73;
}
}
}

Просмотреть файл

@@ -12,7 +12,7 @@
&:focus,
&:active:focus {
background-color: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.72);
color: rgba(var(--center-channel-color-rgb), 0.8);
opacity: 1;
}
@@ -21,7 +21,7 @@
width: 24px;
height: 24px;
border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.56) !important;
color: rgba(var(--center-channel-color-rgb), 0.75) !important;
font-family:
'Open Sans',
sans-serif;

Просмотреть файл

@@ -133,13 +133,13 @@
padding: 2px;
margin-left: 12px;
border-radius: 4px;
color: rgba(var(--sys-center-channel-color-rgb), 0.56);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
font-size: 18px;
&:hover,
&:focus {
background: rgba(var(--sys-center-channel-color-rgb), 0.08);
color: rgba(var(--sys-center-channel-color-rgb), 0.72);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
text-decoration: none;
}
}

Просмотреть файл

@@ -24,7 +24,7 @@
.PlanDetails__userCount {
display: block;
margin-left: auto;
color: rgba(var(--sys-center-channel-color-rgb), 0.56);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
font-size: 14px;
font-weight: 600;
line-height: 20px;
@@ -74,7 +74,7 @@
.PlanDetails__description {
display: flex;
margin-top: 8px;
color: rgba(var(--sys-center-channel-color-rgb), 0.56);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
font-size: 12px;
font-weight: normal;
line-height: 16px;
@@ -139,7 +139,7 @@
span {
position: relative;
bottom: 2px;
color: rgba(var(--center-channel-text-rgb), 0.56);
color: rgba(var(--center-channel-text-rgb), 0.75);
font-family: 'Open Sans';
font-size: 10px;
font-weight: 600;

Просмотреть файл

@@ -5,7 +5,7 @@
color: var(--sys-center-channel-color);
&__paid-tier {
color: rgba(var(--sys-center-channel-color-rgb), 0.56);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
font-size: 12px;
font-style: normal;
font-weight: normal;

Просмотреть файл

@@ -104,7 +104,7 @@
white-space: nowrap;
.more-modal__shared-actions {
color: rgba(61, 60, 64, 0.72);
color: rgba(61, 60, 64, 0.75);
.shared-user-icon {
width: 16px;
@@ -218,7 +218,7 @@
margin-left: auto;
background: transparent;
border-radius: 4px;
color: rgba(var(--sys-center-channel-color-rgb), 0.72);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
text-decoration: none;
}

Просмотреть файл

@@ -19,11 +19,11 @@
.Input_wrapper,
.Input___info {
color: rgba(var(--sys-center-channel-color-rgb), 0.56);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
}
.Input::placeholder {
color: rgba(var(--sys-center-channel-color-rgb), 0.64);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
}
.Input_fieldset {
@@ -46,7 +46,7 @@
.Input_legend {
background-color: var(--sys-center-channel-bg);
color: rgba(var(--sys-center-channel-color-rgb), 0.64);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
}
}

Просмотреть файл

@@ -19,11 +19,11 @@
.Input_wrapper,
.Input___info {
color: rgba(var(--sys-center-channel-color-rgb), 0.56);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
}
.Input::placeholder {
color: rgba(var(--sys-center-channel-color-rgb), 0.64);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
}
.Input_fieldset {
@@ -46,7 +46,7 @@
.Input_legend {
background-color: var(--sys-center-channel-bg);
color: rgba(var(--sys-center-channel-color-rgb), 0.64);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
}
.alert {

Просмотреть файл

@@ -68,7 +68,7 @@
&.btn-inactive {
background: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.56);
color: rgba(var(--center-channel-color-rgb), 0.75);
}
&.btn-secondary {

Просмотреть файл

@@ -106,7 +106,7 @@
border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.16);
background: var(--sys-center-channel-bg);
border-radius: 4px;
color: rgba(var(--sys-center-channel-color-rgb), 0.64);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
font-size: 12px;
&:hover {
@@ -156,7 +156,7 @@
position: relative;
top: -4px;
margin: 0 8px 0 2px;
opacity: 0.64;
opacity: 0.73;
vertical-align: bottom;
&:checked {

Просмотреть файл

@@ -31,7 +31,7 @@
}
:last-child {
color: rgba(63, 69, 80, 0.72);
color: rgba(63, 69, 80, 0.64);
}
}
@@ -71,7 +71,7 @@
.pre-title {
margin-bottom: 10px;
color: rgba(63, 67, 80, 0.56) !important;
color: rgba(63, 67, 80, 0.75) !important;
font-size: 12px;
font-weight: 600;
line-height: 16px;

Просмотреть файл

@@ -1,4 +1,12 @@
.ConfirmLicenseRemovalModal {
.modal-header {
button.close {
span {
color: rgba(63, 67, 80, 0.75) !important;
}
}
}
.modal-body {
padding-top: 0 !important;
padding-bottom: 40px !important;

Просмотреть файл

@@ -4,7 +4,7 @@
button.close {
span {
color: rgba(63, 67, 80, 0.56) !important;
color: rgba(63, 67, 80, 0.75) !important;
}
}
}

Просмотреть файл

@@ -5,7 +5,7 @@
button.close {
span {
color: rgba(63, 67, 80, 0.56) !important;
color: rgba(63, 67, 80, 0.75) !important;
}
}
}
@@ -57,7 +57,7 @@
border-radius: 4px;
&__titleSection {
color: rgba(63, 67, 80, 0.72);
color: rgba(63, 67, 80, 0.75);
font-size: 12px;
font-weight: bold;
line-height: 16px;

Просмотреть файл

@@ -33,7 +33,7 @@
}
:last-child {
color: rgba(63, 69, 80, 0.72);
color: rgba(63, 69, 80, 0.64);
}
}
@@ -93,7 +93,7 @@
.pre-title {
margin-bottom: 10px;
color: rgba(63, 67, 80, 0.56) !important;
color: rgba(63, 67, 80, 0.75) !important;
font-size: 12px;
font-weight: 600;
line-height: 16px;

Просмотреть файл

@@ -30,7 +30,7 @@
}
:last-child {
color: rgba(63, 69, 80, 0.72);
color: rgba(63, 69, 80, 0.64);
}
}

Просмотреть файл

@@ -82,7 +82,7 @@
.PermissionSectionDropdownButton_more {
margin-right: 8px;
color: rgba(var(--sys-center-channel-color-rgb), 0.6);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
}
.PermissionSectionDropdownButton_icon {
@@ -180,7 +180,7 @@
}
.PermissionSectionDropdownOptions_description {
color: rgba(var(--sys-center-channel-color-rgb), 0.56);
color: rgba(var(--sys-center-channel-color-rgb), 0.75);
font-size: 12px;
}
}

Просмотреть файл

@@ -10,7 +10,7 @@
width: 16px;
height: 16px;
margin-right: 4px;
color: rgba(61, 60, 64, 0.72);
color: rgba(61, 60, 64, 0.64);
font-size: 16px;
line-height: 16px;

Просмотреть файл

@@ -16,7 +16,7 @@
opacity: 0.8;
.archived-label {
color: rgba(var(--center-channel-color-rgb), 0.64);
color: rgba(var(--center-channel-color-rgb), 0.75);
}
}
@@ -36,7 +36,7 @@
}
.TeamList_managementText {
opacity: 0.65;
opacity: 0.75;
}
.TeamList_editText {

Просмотреть файл

@@ -212,7 +212,7 @@
}
svg {
opacity: 0.56;
opacity: 0.73;
}
}
}