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>

webapp/channels/src/components/payment_form/card_input.css

@@ -21,7 +21,7 @@
 }
 
 .StripeElement::placeholder {
-    color: rgba(var(--center-channel-color-rgb), 0.72);
+    color: rgba(var(--center-channel-color-rgb), 0.75);
     font-size: 14px;
     opacity: 0.5;
 }

webapp/channels/src/components/payment_form/card_input.tsx

@@ -144,7 +144,7 @@ class CardInput extends React.PureComponent<Props, State> {
                     fontSmoothing: 'antialiased',
                     color: theme.centerChannelColor,
                     '::placeholder': {
-                        color: `rgba(${toRgbValues(theme.centerChannelColor)}, 0.64)`,
+                        color: `rgba(${toRgbValues(theme.centerChannelColor)}, 0.75)`,
                     },
                 },
                 invalid: {

webapp/channels/src/components/payment_form/gather_intent/gather_intent.scss

@@ -6,7 +6,7 @@
     &__title {
         padding: 0;
         margin: 0 0 8px;
-        color: rgba(var(--center-channel-color-rgb), 0.72);
+        color: rgba(var(--center-channel-color-rgb), 0.75);
         font-size: 16px !important;
         font-weight: 600 !important;
         line-height: 24px !important;
@@ -26,7 +26,7 @@
 
 .savedFeedback__text {
     align-self: center;
-    color: rgba(var(--center-channel-color-rgb), 0.72);
+    color: rgba(var(--center-channel-color-rgb), 0.75);
     font-size: 22px;
     font-weight: 600;
 }
@@ -75,7 +75,7 @@
 
         h3 {
             margin: 0;
-            color: rgba(var(--center-channel-color-rgb), 0.72);
+            color: rgba(var(--center-channel-color-rgb), 0.75);
             font-size: 22px;
             font-weight: bold;
             line-height: 28px;
@@ -86,7 +86,7 @@
             border: none;
             margin-left: auto;
             background: var(--center-channel-bg);
-            color: rgba(var(--center-channel-color-rgb), 0.72);
+            color: rgba(var(--center-channel-color-rgb), 0.64);
             font-size: 24px;
         }
     }
@@ -96,7 +96,7 @@
         overflow: auto;
         padding: 0 32px;
         margin-bottom: 24px;
-        color: rgba(var(--center-channel-color-rgb), 0.72);
+        color: rgba(var(--center-channel-color-rgb), 0.75);
     }
 
     &__submitted-icon-container {
@@ -115,7 +115,7 @@
 
         &__question {
             margin-bottom: 10px;
-            color: rgba(var(--center-channel-color-rgb), 0.72);
+            color: rgba(var(--center-channel-color-rgb), 0.75);
             font-size: 14px;
             font-weight: 600;
         }
@@ -123,7 +123,7 @@
         &__option {
             margin-top: 0;
             margin-bottom: 12px;
-            color: rgba(var(--center-channel-color-rgb), 0.72);
+            color: rgba(var(--center-channel-color-rgb), 0.75);
             font-size: 14px;
             font-weight: 400;
         }

webapp/channels/src/components/payment_form/payment_form.scss

@@ -30,7 +30,7 @@
 
     .section-title {
         margin-bottom: 24px;
-        color: rgba(var(--center-channel-color-rgb), 0.72);
+        color: rgba(var(--center-channel-color-rgb), 0.75);
         font-size: 16px;
         font-weight: 600;
         text-align: left;
@@ -108,7 +108,7 @@
 
             &::placeholder {
                 color: var(--center-channel-color);
-                opacity: 0.64;
+                opacity: 0.73;
             }
         }
     }