IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Asaad Mahmood 2024-02-21 15:54:18 +05:00 committed by GitHub
parent 14dcdf7510
commit ecb09de6c7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
194 changed files with 536 additions and 513 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap
View File

@ -9,7 +9,7 @@ exports[`components/AutosizeTextarea should match snapshot, init 1`] = `
Object { Object {
"background": "none", "background": "none",
"borderColor": "transparent", "borderColor": "transparent",
"opacity": 0.5, "opacity": 0.75,
"overflow": "hidden", "overflow": "hidden",
"pointerEvents": "none", "pointerEvents": "none",
"position": "absolute", "position": "absolute",

4
webapp/channels/src/components/about_build_modal/about_build_modal_cloud/about_build_modal_cloud.scss
View File

@ -65,14 +65,14 @@
height: 20px; height: 20px;
align-self: center; align-self: center;
margin: 0 0; margin: 0 0;
color: rgba(var(--center-channel-color-rgb), 0.64); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
} }
.about-footer { .about-footer {
margin-top: 16px; margin-top: 16px;
color: rgba(var(--center-channel-color-rgb), 0.64); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;

4
webapp/channels/src/components/admin_console/billing/billing_history.scss
View File

@ -98,7 +98,7 @@
.BillingHistory__table-bottomDesc { .BillingHistory__table-bottomDesc {
margin-top: 4px; 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; font-size: 12px;
line-height: 16px; line-height: 16px;
} }
@ -181,7 +181,7 @@
} }
&:disabled { &:disabled {
opacity: 0.6; opacity: 0.73;
} }
&:hover:not(:disabled) { &:hover:not(:disabled) {

2
webapp/channels/src/components/admin_console/billing/billing_history_modal.scss
View File

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

2
webapp/channels/src/components/admin_console/billing/billing_subscriptions/limit_card.scss
View File

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

4
webapp/channels/src/components/admin_console/billing/billing_summary/billing_summary.scss
View File

@ -95,7 +95,7 @@
.BillingSummary__lastInvoice-date { .BillingSummary__lastInvoice-date {
margin-top: 8px; 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 { .BillingSummary__lastInvoice-productName {
@ -132,7 +132,7 @@
} }
.BillingSummary__lastInvoice-partialCharges { .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; font-size: 12px;
line-height: 16px; line-height: 16px;

4
webapp/channels/src/components/admin_console/billing/billing_summary/upsell_card.scss
View File

@ -31,7 +31,7 @@
} }
&--more { &--more {
color: rgba(63, 69, 80, 0.72); color: rgba(63, 69, 80, 0.75);
} }
} }
} }
@ -58,7 +58,7 @@
.disclaimer { .disclaimer {
margin: 5px 0; 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-size: 10px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;

4
webapp/channels/src/components/admin_console/billing/company_info_display.scss
View File

@ -127,13 +127,13 @@
.CompanyInfoDisplay__companyInfo-editButton { .CompanyInfoDisplay__companyInfo-editButton {
padding: 2px; padding: 2px;
border-radius: 4px; 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; font-size: 18px;
&:hover, &:hover,
&:focus { &:focus {
background: rgba(var(--sys-center-channel-color-rgb), 0.08); 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; text-decoration: none;
} }
} }

2
webapp/channels/src/components/admin_console/billing/company_info_edit.scss
View File

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

4
webapp/channels/src/components/admin_console/billing/delete_workspace/result_modal.scss
View File

@ -12,7 +12,7 @@
&:focus, &:focus,
&:active:focus { &:active:focus {
background-color: rgba(var(--center-channel-color-rgb), 0.08); 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; opacity: 1;
} }
@ -21,7 +21,7 @@
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 4px; 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: font-family:
'Open Sans', 'Open Sans',
sans-serif; sans-serif;

4
webapp/channels/src/components/admin_console/billing/payment_info_display.scss
View File

@ -133,13 +133,13 @@
padding: 2px; padding: 2px;
margin-left: 12px; margin-left: 12px;
border-radius: 4px; 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; font-size: 18px;
&:hover, &:hover,
&:focus { &:focus {
background: rgba(var(--sys-center-channel-color-rgb), 0.08); 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; text-decoration: none;
} }
} }

6
webapp/channels/src/components/admin_console/billing/plan_details/plan_details.scss
View File

@ -24,7 +24,7 @@
.PlanDetails__userCount { .PlanDetails__userCount {
display: block; display: block;
margin-left: auto; 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-size: 14px;
font-weight: 600; font-weight: 600;
line-height: 20px; line-height: 20px;
@ -74,7 +74,7 @@
.PlanDetails__description { .PlanDetails__description {
display: flex; display: flex;
margin-top: 8px; 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-size: 12px;
font-weight: normal; font-weight: normal;
line-height: 16px; line-height: 16px;
@ -139,7 +139,7 @@
span { span {
position: relative; position: relative;
bottom: 2px; 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-family: 'Open Sans';
font-size: 10px; font-size: 10px;
font-weight: 600; font-weight: 600;

2
webapp/channels/src/components/admin_console/billing/plan_details/plan_pricing.scss
View File

@ -5,7 +5,7 @@
color: var(--sys-center-channel-color); color: var(--sys-center-channel-color);
&__paid-tier { &__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-size: 12px;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;

4
webapp/channels/src/components/admin_console/data_grid/data_grid.scss
View File

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

6
webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/custom_policy_form.scss
View File

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

6
webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/global_policy_form.scss
View File

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

2
webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.scss
View File

@ -68,7 +68,7 @@
&.btn-inactive { &.btn-inactive {
background: rgba(var(--center-channel-color-rgb), 0.08); 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 { &.btn-secondary {

4
webapp/channels/src/components/admin_console/filter/filter.scss
View File

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

4
webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition.scss
View File

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

8
webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.scss
View File

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

2
webapp/channels/src/components/admin_console/license_settings/modals/ee_license_modal.scss
View File

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

4
webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.scss
View File

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

4
webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_edition.scss
View File

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

2
webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition.scss
View File

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

4
webapp/channels/src/components/admin_console/system_roles/system_role/system_role_permissions.scss
View File

@ -82,7 +82,7 @@
.PermissionSectionDropdownButton_more { .PermissionSectionDropdownButton_more {
margin-right: 8px; 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 { .PermissionSectionDropdownButton_icon {
@ -180,7 +180,7 @@
} }
.PermissionSectionDropdownOptions_description { .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; font-size: 12px;
} }
} }

2
webapp/channels/src/components/admin_console/team_channel_settings/channel/details/channel_profile.scss
View File

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

4
webapp/channels/src/components/admin_console/team_channel_settings/team/list/team_list.scss
View File

@ -16,7 +16,7 @@
opacity: 0.8; opacity: 0.8;
.archived-label { .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 { .TeamList_managementText {
opacity: 0.65; opacity: 0.75;
} }
.TeamList_editText { .TeamList_editText {

2
webapp/channels/src/components/admin_console/workspace-optimization/dashboard.scss
View File

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

4
webapp/channels/src/components/advanced_create_post/priority_labels.tsx
View File

@ -69,11 +69,11 @@ const Close = styled.button`
font-size: 17px; font-size: 17px;
justify-content: center; justify-content: center;
margin-top: -1px; margin-top: -1px;
opacity: 0.56; opacity: 0.73;
visibility: hidden; visibility: hidden;
&:hover { &:hover {
opacity: 0.72; opacity: 0.73;
} }
${Priority}:hover & { ${Priority}:hover & {

6
webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss
View File

@ -92,13 +92,13 @@
border: none; border: none;
background: transparent; background: transparent;
border-radius: 4px; border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
cursor: pointer; cursor: pointer;
fill: currentColor; fill: currentColor;
&:hover { &:hover {
background: rgba(var(--center-channel-color-rgb), 0.08); background: 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);
fill: currentColor; fill: currentColor;
text-decoration: none; text-decoration: none;
} }
@ -148,7 +148,7 @@
&__helper-text { &__helper-text {
display: inline-block; display: inline-block;
margin: 8px 0 4px; margin: 8px 0 4px;
color: rgba(var(--center-channel-color-rgb), 0.64); color: rgba(var(--center-channel-color-rgb), 0.75);
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
} }

4
webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_icon.tsx
View File

@ -41,11 +41,11 @@ export const IconContainer = styled.button`
background: transparent; background: transparent;
padding: 0 7px; padding: 0 7px;
border-radius: 4px; border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.64);
&:hover { &:hover {
background: rgba(var(--center-channel-color-rgb), 0.08); background: 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);
fill: currentColor; fill: currentColor;
} }

4
webapp/channels/src/components/alert_banner.scss
View File

@ -135,7 +135,7 @@
} }
.AlertBanner__closeButton { .AlertBanner__closeButton {
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.64);
} }
} }
@ -181,6 +181,6 @@
} }
.AlertBanner__closeButton { .AlertBanner__closeButton {
color: rgba(var(--sys-center-channel-color-rgb), 0.56); color: rgba(var(--sys-center-channel-color-rgb), 0.75);
} }
} }

2
webapp/channels/src/components/analytics/true_up_review.scss
View File

@ -38,7 +38,7 @@
&__dueDate { &__dueDate {
:first-child { :first-child {
color: rgba(var(--sys-center-channel-color-rgb), 0.64); color: rgba(var(--sys-center-channel-color-rgb), 0.75);
} }
} }

2
webapp/channels/src/components/announcement_bar/no_internet_connection/no_internet_connection.scss
View File

@ -18,7 +18,7 @@
.noInternetConnection__contactSupport, .noInternetConnection__contactSupport,
.noInternetConnection__emailUs { .noInternetConnection__emailUs {
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 16px; font-size: 16px;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;

4
webapp/channels/src/components/app_bar/app_bar.scss
View File

@ -105,11 +105,11 @@ $app-bar-width: 48px;
} }
.app-bar__old-icon { .app-bar__old-icon {
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.64);
&:hover, &:hover,
&--active { &--active {
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.8);
} }
} }

2
webapp/channels/src/components/apps_form/apps_form_component.scss
View File

@ -48,7 +48,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
fill: v(center-channel-color); fill: v(center-channel-color);
opacity: 0.56; opacity: 0.73;
&--large { &--large {
width: 2.4rem; width: 2.4rem;

2
webapp/channels/src/components/autosize_textarea.tsx
View File

@ -32,7 +32,7 @@ const styles = {
placeholder: { placeholder: {
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
opacity: 0.5, opacity: 0.75,
pointerEvents: 'none' as const, pointerEvents: 'none' as const,
position: 'absolute' as const, position: 'absolute' as const,
whiteSpace: 'nowrap' as const, whiteSpace: 'nowrap' as const,

11
webapp/channels/src/components/browse_channels/browse_channels.scss
View File

@ -21,9 +21,8 @@
#searchIcon { #searchIcon {
position: absolute; position: absolute;
z-index: 1; top: 16px;
top: 15px; left: 46px;
left: 42px;
color: rgba(var(--center-channel-color-rgb), 0.64); color: rgba(var(--center-channel-color-rgb), 0.64);
pointer-events: none; pointer-events: none;
} }
@ -54,7 +53,7 @@
margin: 0; margin: 0;
span { span {
color: rgba(var(--center-channel-color-rgb), 0.64); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
} }
@ -119,7 +118,7 @@
.more-modal__details { .more-modal__details {
padding-left: 0; padding-left: 0;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
svg { svg {
flex-shrink: 0; flex-shrink: 0;
@ -144,7 +143,7 @@
width: 3px; width: 3px;
height: 3px; height: 3px;
flex-shrink: 0; flex-shrink: 0;
background-color: rgba(var(--center-channel-color-rgb), 0.56); background-color: rgba(var(--center-channel-color-rgb), 0.75);
border-radius: 50%; border-radius: 50%;
} }

2
webapp/channels/src/components/category_modal.scss
View File

@ -1,7 +1,7 @@
@charset 'UTF-8'; @charset 'UTF-8';
.edit-category__helpText { .edit-category__helpText {
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px; font-size: 12px;
line-height: 40px; line-height: 40px;
} }

2
webapp/channels/src/components/center_message_lock/index.scss
View File

@ -15,7 +15,7 @@
} }
&__icon { &__icon {
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.64);
} }
&__title { &__title {

2
webapp/channels/src/components/center_message_lock/index.tsx
View File

@ -149,7 +149,7 @@ export default function CenterMessageLock(props: Props) {
return (<div className='CenterMessageLock'> return (<div className='CenterMessageLock'>
<div className='CenterMessageLock__left'> <div className='CenterMessageLock__left'>
<EyeOffOutlineIcon color={'rgba(var(--center-channel-color-rgb), 0.72)'}/> <EyeOffOutlineIcon color={'rgba(var(--center-channel-color-rgb), 0.75)'}/>
</div> </div>
<div className='CenterMessageLock__right'> <div className='CenterMessageLock__right'>
<div className='CenterMessageLock__title'> <div className='CenterMessageLock__title'>

2
webapp/channels/src/components/channel_info_rhs/about_area.tsx
View File

@ -30,7 +30,7 @@ const Container = styled.div`
padding: 0px; padding: 0px;
background: transparent; background: transparent;
border: 0px; border: 0px;
color: rgba(var(--center-channel-color-rgb), 0.64); color: rgba(var(--center-channel-color-rgb), 0.75);
} }
`; `;

2
webapp/channels/src/components/channel_info_rhs/about_area_channel.tsx
View File

@ -17,7 +17,7 @@ const ChannelId = styled.div`
font-size: 11px; font-size: 11px;
line-height: 16px; line-height: 16px;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: rgba(var(--center-channel-color-rgb), .64); color: rgba(var(--center-channel-color-rgb), 0.75);
`; `;
const ChannelPurpose = styled.div` const ChannelPurpose = styled.div`

2
webapp/channels/src/components/channel_info_rhs/about_area_dm.tsx
View File

@ -73,7 +73,7 @@ const ChannelId = styled.div`
font-size: 11px; font-size: 11px;
line-height: 16px; line-height: 16px;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: rgba(var(--center-channel-color-rgb), .64); color: rgba(var(--center-channel-color-rgb), 0.75);
`; `;
interface Props { interface Props {

2
webapp/channels/src/components/channel_info_rhs/about_area_gm.tsx
View File

@ -60,7 +60,7 @@ const ChannelId = styled.div`
font-size: 11px; font-size: 11px;
line-height: 16px; line-height: 16px;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: rgba(var(--center-channel-color-rgb), .64); color: rgba(var(--center-channel-color-rgb), 0.75);
`; `;
interface Props { interface Props {

8
webapp/channels/src/components/channel_info_rhs/components/editable_area.tsx
View File

@ -11,10 +11,10 @@ const EditButton = styled.button`
padding: 0px; padding: 0px;
border-radius: 4px; border-radius: 4px;
background: rgba(var(--center-channel-color-rgb), 0.04); background: rgba(var(--center-channel-color-rgb), 0.04);
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
&:hover { &:hover {
background: rgba(var(--center-channel-color-rgb), 0.08); background: 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.75);
} }
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -27,14 +27,14 @@ const EmptyPlace = styled.button`
padding: 0px; padding: 0px;
background: transparent; background: transparent;
border: 0px; border: 0px;
color: rgba(var(--center-channel-color-rgb), 0.64); color: rgba(var(--center-channel-color-rgb), 0.75);
i { i {
display: none; display: none;
font-size: 14px; font-size: 14px;
margin-left: 4px; margin-left: 4px;
} }
&:hover { &:hover {
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.75);
i { i {
display: inline-block; display: inline-block;
} }

4
webapp/channels/src/components/channel_info_rhs/menu.tsx
View File

@ -18,7 +18,7 @@ const MenuItemContainer = styled.div`
`; `;
const Icon = styled.div` const Icon = styled.div`
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.64);
`; `;
const MenuItemText = styled.div` const MenuItemText = styled.div`
@ -28,7 +28,7 @@ const MenuItemText = styled.div`
const RightSide = styled.div` const RightSide = styled.div`
display: flex; display: flex;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
`; `;
const Badge = styled.div` const Badge = styled.div`

28
webapp/channels/src/components/channel_info_rhs/top_buttons.tsx
View File

@ -11,37 +11,47 @@ import Constants from 'utils/constants';
const ChannelInfoRhsTopButtons = styled.div` const ChannelInfoRhsTopButtons = styled.div`
display: flex; display: flex;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
margin-top: 24px; margin-top: 24px;
padding: 0 18px; padding: 0 18px;
`; `;
const Button = styled.button` const Button = styled.button`
border-radius: 4px;
border: 0;
padding: 12px 0 10px 0;
background: rgba(var(--center-channel-color-rgb), 0.04);
flex: 1; flex: 1;
padding: 12px 0 10px 0;
border: 0;
margin: 0 6px; margin: 0 6px;
background: rgba(var(--center-channel-color-rgb), 0.04);
border-radius: 4px;
&:hover { &:hover {
background: rgba(var(--center-channel-color-rgb), 0.08); background: 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);
& i {
color: rgba(var(--center-channel-color-rgb), 0.8);
}
} }
&:active, &:active,
&.active { &.active {
background: rgba(var(--button-bg-rgb), 0.08); background: rgba(var(--button-bg-rgb), 0.08);
color: var(--button-bg); color: var(--button-bg);
& i {
color: var(--button-bg-rgb);
}
} }
& i { & i {
color: rgba(var(--center-channel-color-rgb), 0.64);
font-size: 24px; font-size: 24px;
} }
& span { & span {
line-height: 16px;
font-size: 10px; font-size: 10px;
font-weight: 600; font-weight: 600;
line-height: 16px;
} }
`; `;
@ -51,7 +61,7 @@ const CopyButton = styled(Button)`
&:active, &:active,
&.active { &.active {
background: rgba(var(--center-channel-color-rgb), 0.08); background: 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.75);
transition: none; transition: none;
} }

2
webapp/channels/src/components/channel_members_rhs/channel_members_rhs.tsx
View File

@ -303,7 +303,7 @@ const MemberListSeparator = styled.div`
letter-spacing: 0.02em; letter-spacing: 0.02em;
text-transform: uppercase; text-transform: uppercase;
padding: 0px 12px; padding: 0px 12px;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
margin-top: 16px; margin-top: 16px;
`; `;

6
webapp/channels/src/components/channel_members_rhs/member.tsx
View File

@ -52,7 +52,7 @@ const DisplayName = styled.span`
const Username = styled.span` const Username = styled.span`
margin-left: 4px; margin-left: 4px;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
`; `;
@ -72,7 +72,7 @@ const SendMessage = styled.button`
} }
.icon { .icon {
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.64);
font-size: 14.4px; font-size: 14.4px;
}; };
`; `;
@ -247,7 +247,7 @@ export default styled(Member)`
&:hover { &:hover {
background: rgba(var(--center-channel-color-rgb), 0.08); 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);
${SendMessage} { ${SendMessage} {
display: block; display: block;

4
webapp/channels/src/components/cloud_invoice_preview/cloud_invoice_preview.scss
View File

@ -16,7 +16,7 @@
.close { .close {
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
color: rgba(#3f4350, 0.56) !important; color: rgba(#3f4350, 0.75) !important;
} }
.modal-title { .modal-title {
@ -29,7 +29,7 @@
.subtitle { .subtitle {
margin-top: 10px; margin-top: 10px;
color: rgba(#3d3c40, 0.72); color: rgba(#3d3c40, 0.75);
font-family: 'Metropolis'; font-family: 'Metropolis';
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;

4
webapp/channels/src/components/cloud_start_trial/request_business_email_modal.scss
View File

@ -23,7 +23,7 @@
&:focus, &:focus,
&:active:focus { &:active:focus {
background-color: rgba(var(--center-channel-color-rgb), 0.08); 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; opacity: 1;
} }
@ -32,7 +32,7 @@
width: 4rem; width: 4rem;
height: 4rem; height: 4rem;
border-radius: 4px; 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: font-family:
'Open Sans', 'Open Sans',
sans-serif; sans-serif;

2
webapp/channels/src/components/cloud_usage_modal/limit_line.scss
View File

@ -19,7 +19,7 @@
flex-grow: 1; flex-grow: 1;
padding-right: 24px; padding-right: 24px;
padding-left: 12px; padding-left: 12px;
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.75);
&:first-child { &:first-child {
padding-left: 0; padding-left: 0;

2
webapp/channels/src/components/common/chip/chip.tsx
View File

@ -41,7 +41,7 @@ const StyledChip = styled.button<{ otherOption?: boolean }>`
border-radius: 16px; border-radius: 16px;
background-color: var(--center-channel-bg); background-color: var(--center-channel-bg);
${(p) => (p.otherOption ? 'color: rgba(var(--center-channel-color-rgb), 0.72);' : '')} ${(p) => (p.otherOption ? 'color: rgba(var(--center-channel-color-rgb), 0.75);' : '')}
&:hover { &:hover {
background-color: rgba(var(--center-channel-color-rgb), 0.08); background-color: rgba(var(--center-channel-color-rgb), 0.08);

18
webapp/channels/src/components/custom_status/custom_status.scss
View File

@ -2,7 +2,7 @@
position: absolute; position: absolute;
top: 16px; top: 16px;
right: 20px; right: 20px;
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.64);
opacity: 1; opacity: 1;
} }
@ -53,7 +53,7 @@
button.dateTime__calendar-icon { button.dateTime__calendar-icon {
margin: 0 8px 0 0; margin: 0 8px 0 0;
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.64);
} }
input#customStatus__calendar-input { input#customStatus__calendar-input {
@ -107,13 +107,13 @@
border: none; border: none;
background: transparent; background: transparent;
border-radius: 4px; border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.64);
fill: rgba(var(--center-channel-color-rgb), 0.56); fill: rgba(var(--center-channel-color-rgb), 0.64);
&:hover { &:hover {
background: rgba(var(--center-channel-color-rgb), 0.08); background: 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);
fill: rgba(var(--center-channel-color-rgb), 0.72); fill: rgba(var(--center-channel-color-rgb), 0.8);
} }
&:active, &:active,
@ -150,7 +150,7 @@
.status-dropdown-menu, .status-dropdown-menu,
.StatusModal__input { .StatusModal__input {
.input-clear-x { .input-clear-x {
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.64);
.icon { .icon {
font-size: 20px; font-size: 20px;
@ -249,7 +249,7 @@
&__duration { &__duration {
margin-left: 8px; margin-left: 8px;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 14px; line-height: 14px;
@ -351,7 +351,7 @@ span.emoticon[style]:hover {
left: 12px; left: 12px;
padding: 0 4px; padding: 0 4px;
background: var(--center-channel-bg); background: var(--center-channel-bg);
color: rgba(var(--center-channel-color-rgb), 0.64); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 10px; font-size: 10px;
letter-spacing: 0.03em; letter-spacing: 0.03em;
line-height: 16px; line-height: 16px;

6
webapp/channels/src/components/date_picker/date_picker.scss
View File

@ -26,7 +26,7 @@
} }
.rdp-head_cell { .rdp-head_cell {
color: rgba(var(--center-channel-color-rgb), 0.64); color: rgba(var(--center-channel-color-rgb), 0.75);
font-family: 'Open Sans'; font-family: 'Open Sans';
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
@ -83,7 +83,7 @@
&.rdp-nav_button { &.rdp-nav_button {
border-radius: 4px; border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
&_previous { &_previous {
margin-right: 8px; margin-right: 8px;
@ -97,7 +97,7 @@
&:hover { &:hover {
background-color: rgba(var(--center-channel-color-rgb), 0.08); 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.75);
} }
&:active { &:active {

2
webapp/channels/src/components/desktop_auth_token.scss
View File

@ -22,7 +22,7 @@
.DesktopAuthToken__sub { .DesktopAuthToken__sub {
margin-bottom: 24px; margin-bottom: 24px;
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 18px; font-size: 18px;
line-height: 28px; line-height: 28px;

4
webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.scss
View File

@ -104,7 +104,7 @@
padding: 0 4px; padding: 0 4px;
margin: 0 14px; margin: 0 14px;
background: rgba(var(--center-channel-bg-rgb), 1); background: rgba(var(--center-channel-bg-rgb), 1);
color: rgba(var(--center-channel-color-rgb), 0.64); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 10px; font-size: 10px;
} }
@ -126,7 +126,7 @@
button.dateTime__calendar-icon { button.dateTime__calendar-icon {
margin: 0 8px 0 0; margin: 0 8px 0 0;
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.64);
&:active { &:active {
background-color: transparent; background-color: transparent;

8
webapp/channels/src/components/drafts/draft_actions/action.scss
View File

@ -31,12 +31,12 @@
} }
.icon { .icon {
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.64);
fill: rgba(var(--center-channel-color-rgb), 0.56); fill: rgba(var(--center-channel-color-rgb), 0.64);
&:hover { &:hover {
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.8);
fill: rgba(var(--center-channel-color-rgb), 0.72); fill: rgba(var(--center-channel-color-rgb), 0.8);
} }
} }

4
webapp/channels/src/components/drafts/drafts_link/drafts_link.scss
View File

@ -11,7 +11,7 @@
.icon { .icon {
svg { svg {
fill: rgba(var(--sidebar-text-rgb), 0.6); fill: rgba(var(--sidebar-text-rgb), 0.75);
vertical-align: middle; vertical-align: middle;
} }
} }
@ -43,7 +43,7 @@
margin-top: 1px; margin-top: 1px;
svg { svg {
fill: rgba(var(--sidebar-text-rgb), 0.6); fill: rgba(var(--sidebar-text-rgb), 0.75);
} }
} }

4
webapp/channels/src/components/drafts/panel/panel_header.scss
View File

@ -6,7 +6,7 @@
justify-content: space-between; justify-content: space-between;
padding: 0 16px; padding: 0 16px;
border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.08); border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.64); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
@ -47,7 +47,7 @@
&__timestamp { &__timestamp {
padding-right: 8px; padding-right: 8px;
color: rgba(var(--center-channel-color-rgb), 0.64); color: rgba(var(--center-channel-color-rgb), 0.75);
vertical-align: middle; vertical-align: middle;
} }

2
webapp/channels/src/components/emoji_picker/components/emoji_picker_skin.tsx
View File

@ -102,7 +102,7 @@ export class EmojiPickerSkin extends React.PureComponent<Props, State> {
> >
<CloseIcon <CloseIcon
size={16} size={16}
color={'rgba(var(--center-channel-color-rgb), 0.56)'} color={'rgba(var(--center-channel-color-rgb), 0.75)'}
/> />
</button> </button>
<div className='skin-tones__close-text'> <div className='skin-tones__close-text'>

2
webapp/channels/src/components/external_login_button/external_login_button.scss
View File

@ -10,7 +10,7 @@
min-width: 136px; min-width: 136px;
flex: 1 1 0%; flex: 1 1 0%;
border-color: rgba(var(--center-channel-color-rgb), 0.16); border-color: rgba(var(--center-channel-color-rgb), 0.16);
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.75);
text-decoration: none; text-decoration: none;
&.direction-column { &.direction-column {

2
webapp/channels/src/components/feature_restricted_modal/feature_restricted_modal.scss
View File

@ -13,7 +13,7 @@
&__terms { &__terms {
padding-top: 14px; padding-top: 14px;
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
line-height: 16px; line-height: 16px;

2
webapp/channels/src/components/file_preview_modal/file_preview_modal.scss
View File

@ -58,7 +58,7 @@
&__zoom-bar { &__zoom-bar {
.modal .modal-image & { .modal .modal-image & {
background-color: rgba(61, 60, 64, 0.56); background-color: rgba(61, 60, 64, 0.75);
} }
} }

2
webapp/channels/src/components/file_preview_modal/file_preview_modal_info/file_preview_modal_info.scss
View File

@ -36,7 +36,7 @@
&__file-details { &__file-details {
overflow: hidden; overflow: hidden;
max-width: 30vw; max-width: 30vw;
color: rgba(255, 255, 255, 0.56); color: rgba(255, 255, 255, 0.75);
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 400; font-weight: 400;
text-overflow: ellipsis; text-overflow: ellipsis;

8
webapp/channels/src/components/file_search_results/file_search_result_item.scss
View File

@ -71,7 +71,7 @@
gap: 8px; gap: 8px;
> :not(.Tag) { > :not(.Tag) {
opacity: 0.56; opacity: 0.73;
} }
.Tag { .Tag {
@ -93,9 +93,9 @@
margin-left: 8px; margin-left: 8px;
background-color: var(--center-channel-bg); background-color: var(--center-channel-bg);
border-radius: 4px; border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.64);
cursor: pointer; cursor: pointer;
fill: rgba(var(--center-channel-color-rgb), 0.72); fill: rgba(var(--center-channel-color-rgb), 0.64);
opacity: 0; opacity: 0;
text-decoration: none; text-decoration: none;
transition: opacity 0.15s ease; transition: opacity 0.15s ease;
@ -110,7 +110,7 @@
&:hover { &:hover {
background-color: rgba(var(--center-channel-color-rgb), 0.08); 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);
} }
} }

4
webapp/channels/src/components/forward_post_modal/forward_post_channel_select.tsx
View File

@ -75,7 +75,7 @@ const FormattedOption = (props: ChannelOption & {className: string; isSingleValu
let icon; let icon;
const iconProps = { const iconProps = {
size: 16, size: 16,
color: 'rgba(var(--center-channel-color-rgb), 0.56)', color: 'rgba(var(--center-channel-color-rgb), 0.75)',
}; };
if (channelIsArchived) { if (channelIsArchived) {
@ -216,7 +216,7 @@ const DropdownIndicator = (props: IndicatorProps<ChannelOption>) => {
<components.DropdownIndicator {...props}> <components.DropdownIndicator {...props}>
<ChevronDownIcon <ChevronDownIcon
size={16} size={16}
color={'rgba(var(--center-channel-color-rgb), 0.64)'} color={'rgba(var(--center-channel-color-rgb), 0.75)'}
/> />
</components.DropdownIndicator> </components.DropdownIndicator>
); );

4
webapp/channels/src/components/forward_post_modal/forward_post_channel_select_styles.tsx
View File

@ -27,7 +27,7 @@ const getBaseStyles = (bodyHeight: number) => {
placeholder: (provided: CSSProperties): CSSPropertiesWithPseudos => ({ placeholder: (provided: CSSProperties): CSSPropertiesWithPseudos => ({
...provided, ...provided,
margin: 0, margin: 0,
color: 'rgba(var(--center-channel-color-rgb), 0.64)', color: 'rgba(var(--center-channel-color-rgb), 0.75)',
fontSize: '14px', fontSize: '14px',
lineHeight: '20px', lineHeight: '20px',
}), }),
@ -120,7 +120,7 @@ const getBaseStyles = (bodyHeight: number) => {
justifyContent: 'flex-start', justifyContent: 'flex-start',
padding: '0 0 0 2rem', padding: '0 0 0 2rem',
margin: 0, margin: 0,
color: 'rgba(var(--center-channel-color-rgb), 0.56)', color: 'rgba(var(--center-channel-color-rgb), 0.75)',
backgroundColor: 'none', backgroundColor: 'none',
fontSize: '1.2rem', fontSize: '1.2rem',
fontWeight: 600, fontWeight: 600,

6
webapp/channels/src/components/forward_post_modal/forward_post_modal.scss
View File

@ -84,7 +84,7 @@
} }
&--description { &--description {
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
} }
.emoticon { .emoticon {
@ -95,7 +95,7 @@
&__team-name { &__team-name {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
grid-column: 3 / 4; grid-column: 3 / 4;
text-align: right; text-align: right;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -138,7 +138,7 @@
box-shadow: none; box-shadow: none;
&#forward_post_textbox_placeholder { &#forward_post_textbox_placeholder {
opacity: 0.64 !important; opacity: 0.73 !important;
} }
} }

2
webapp/channels/src/components/header_footer_route/content_layouts/column.scss
View File

@ -24,7 +24,7 @@
} }
.content-layout-column-message { .content-layout-column-message {
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;

4
webapp/channels/src/components/header_footer_route/footer.scss
View File

@ -17,7 +17,7 @@
.footer-link { .footer-link {
@include link; @include link;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 11px; font-size: 11px;
font-weight: 400; font-weight: 400;
line-height: 16px; line-height: 16px;
@ -29,7 +29,7 @@
.footer-copyright { .footer-copyright {
margin-right: 24px; margin-right: 24px;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 11px; font-size: 11px;
line-height: 16px; line-height: 16px;
} }

5
webapp/channels/src/components/hint-toast/hint_toast.scss
View File

@ -29,13 +29,12 @@
background-color: var(--center-channel-bg); background-color: var(--center-channel-bg);
svg { svg {
fill: rgba(var(--center-channel-color-rgb), 0.72); fill: rgba(var(--center-channel-color-rgb), 0.75);
} }
} }
svg { svg {
padding-top: 2px; /* Vertical alignment fix */ fill: rgba(var(--center-channel-color-rgb), 0.75);
fill: rgba(var(--center-channel-color-rgb), 0.56);
vertical-align: middle; vertical-align: middle;
} }

8
webapp/channels/src/components/invitation_modal/add_to_channels.scss
View File

@ -5,7 +5,7 @@
width: 100%; width: 100%;
height: 90px; height: 90px;
padding: 12px; padding: 12px;
border: 1px solid rgba(var(--center-channel-color-rgb), 0.64); border: 1px solid rgba(var(--center-channel-color-rgb), 0.75);
margin-bottom: 8px; margin-bottom: 8px;
background: var(--center-channel-bg); background: var(--center-channel-bg);
border-radius: 4px; border-radius: 4px;
@ -20,7 +20,7 @@
.help-text { .help-text {
// override default from _inputs.scss // override default from _inputs.scss
margin: 0; margin: 0;
color: rgba(var(--center-channel-color-rgb), 0.64); color: rgba(var(--center-channel-color-rgb), 0.75);
} }
&__customMessage { &__customMessage {
@ -41,7 +41,7 @@
svg { svg {
&:hover { &:hover {
fill: rgba(var(--center-channel-color-rgb), 0.56); fill: rgba(var(--center-channel-color-rgb), 0.75);
} }
position: relative; position: relative;
@ -49,7 +49,7 @@
width: 24px; width: 24px;
height: 24px; height: 24px;
cursor: pointer; cursor: pointer;
fill: rgba(var(--center-channel-color-rgb), 0.64); fill: rgba(var(--center-channel-color-rgb), 0.75);
} }
.help-text { .help-text {

2
webapp/channels/src/components/invitation_modal/invite_as.scss
View File

@ -23,7 +23,7 @@
} }
.disabled-legend { .disabled-legend {
opacity: 0.6; opacity: 0.73;
} }
// TODO@UI // TODO@UI

2
webapp/channels/src/components/invitation_modal/invite_view.scss
View File

@ -31,7 +31,7 @@
} }
&__sectionTitleParenthetical { &__sectionTitleParenthetical {
color: rgba(var(--center-channel-color-rgb), 0.6); color: rgba(var(--center-channel-color-rgb), 0.75);
font-weight: normal; font-weight: normal;
} }
} }

2
webapp/channels/src/components/invitation_modal/no_permissions_view.scss
View File

@ -16,7 +16,7 @@
appearance: none; appearance: none;
background: none; background: none;
color: inherit; color: inherit;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.64);
cursor: pointer; cursor: pointer;
font: inherit; font: inherit;
font-size: 24px; font-size: 24px;

2
webapp/channels/src/components/invitation_modal/result_table.scss
View File

@ -99,7 +99,7 @@
.invitation-modal-confirm { .invitation-modal-confirm {
h2 { h2 {
margin-bottom: 13px; margin-bottom: 13px;
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
} }

4
webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal_step.scss
View File

@ -48,7 +48,7 @@
width: 90%; width: 90%;
height: 32px; height: 32px;
margin-top: 15px; margin-top: 15px;
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.75);
font-family: "Open Sans"; font-family: "Open Sans";
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
@ -60,7 +60,7 @@
position: fixed; position: fixed;
bottom: 24px; bottom: 24px;
left: 24px; left: 24px;
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;

6
webapp/channels/src/components/login/login.scss
View File

@ -30,7 +30,7 @@
justify-content: center; justify-content: center;
.login-body-message-subtitle { .login-body-message-subtitle {
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
line-height: 28px; line-height: 28px;
@ -167,7 +167,7 @@
.login-body-card-form-divider-label { .login-body-card-form-divider-label {
padding: 0 10px; padding: 0 10px;
background-color: var(--center-channel-bg); background-color: var(--center-channel-bg);
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px; font-size: 12px;
line-height: 0; line-height: 0;
} }
@ -210,7 +210,7 @@
p { p {
width: 100%; width: 100%;
margin: 0; margin: 0;
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
line-height: 28px; line-height: 28px;

6
webapp/channels/src/components/markdown_image_expand/markdown_image_expand.scss
View File

@ -19,7 +19,7 @@
background-color: var(--center-channel-bg); background-color: var(--center-channel-bg);
border-radius: 16px; border-radius: 16px;
box-shadow: $elevation-1; box-shadow: $elevation-1;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.64);
font-size: 18px; font-size: 18px;
line-height: 21px; line-height: 21px;
@ -50,12 +50,12 @@
border: none; border: none;
background: transparent; background: transparent;
border-radius: 4px; border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.64);
font-size: 18px; font-size: 18px;
line-height: 18px; line-height: 18px;
&:hover { &:hover {
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.8);
} }
.icon { .icon {

10
webapp/channels/src/components/menu/menu_item.tsx
View File

@ -240,10 +240,10 @@ export const MenuItemStyled = styled(MuiMenuItem, {
width: '18px', width: '18px',
height: '18px', height: '18px',
marginInlineEnd: '10px', marginInlineEnd: '10px',
color: isRegular ? 'rgba(var(--center-channel-color-rgb), 0.56)' : 'var(--error-text)', color: isRegular ? 'rgba(var(--center-channel-color-rgb), 0.64)' : 'var(--error-text)',
}, },
'&:hover .leading-element': { '&:hover .leading-element': {
color: isRegular ? 'rgba(var(--center-channel-color-rgb), 0.72)' : 'var(--button-color)', color: isRegular ? 'rgba(var(--center-channel-color-rgb), 0.8)' : 'var(--button-color)',
}, },
'&>.label-elements': { '&>.label-elements': {
@ -262,7 +262,7 @@ export const MenuItemStyled = styled(MuiMenuItem, {
'&>.label-elements>:last-child': { '&>.label-elements>:last-child': {
fontSize: '12px', fontSize: '12px',
color: isRegular ? 'rgba(var(--center-channel-color-rgb), 0.56)' : 'var(--error-text)', color: isRegular ? 'rgba(var(--center-channel-color-rgb), 0.75)' : 'var(--error-text)',
}, },
'&:hover .label-elements>:last-child': { '&:hover .label-elements>:last-child': {
color: isDestructive && 'var(--button-color)', color: isDestructive && 'var(--button-color)',
@ -281,7 +281,7 @@ export const MenuItemStyled = styled(MuiMenuItem, {
flexDirection: 'row', flexDirection: 'row',
flexWrap: 'nowrap', flexWrap: 'nowrap',
justifyContent: 'flex-end', justifyContent: 'flex-end',
color: isRegular ? 'rgba(var(--center-channel-color-rgb), 0.56)' : 'var(--error-text)', color: isRegular ? 'rgba(var(--center-channel-color-rgb), 0.75)' : 'var(--error-text)',
gap: '4px', gap: '4px',
marginInlineStart: '24px', marginInlineStart: '24px',
fontSize: '12px', fontSize: '12px',
@ -289,7 +289,7 @@ export const MenuItemStyled = styled(MuiMenuItem, {
alignItems: 'center', alignItems: 'center',
}, },
'&:hover .trailing-elements': { '&:hover .trailing-elements': {
color: isRegular ? 'rgba(var(--center-channel-color-rgb), 0.72)' : 'var(--button-color)', color: isRegular ? 'rgba(var(--center-channel-color-rgb), 0.75)' : 'var(--button-color)',
}, },
}, },
}); });

2
webapp/channels/src/components/new_channel_modal/new_channel_modal.scss
View File

@ -38,7 +38,7 @@
.new-channel-modal-purpose-info { .new-channel-modal-purpose-info {
margin-top: 5px; margin-top: 5px;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
text-align: left; text-align: left;

6
webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist.tsx
View File

@ -69,7 +69,7 @@ const TaskItems = styled.div`
p { p {
font-size: 12px; font-size: 12px;
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.75);
padding: 4px 24px; padding: 4px 24px;
} }
@ -101,12 +101,12 @@ const Button = styled.button<{open: boolean}>(({open}) => {
background: var(--center-channel-bg); background: var(--center-channel-bg);
border: solid 1px rgba(var(--center-channel-color-rgb), 0.16); border: solid 1px rgba(var(--center-channel-color-rgb), 0.16);
box-shadow: var(--elevation-3); box-shadow: var(--elevation-3);
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
&:hover { &:hover {
border-color: rgba(var(--center-channel-color-rgb), 0.24); border-color: rgba(var(--center-channel-color-rgb), 0.24);
box-shadow: var(--elevation-4); box-shadow: var(--elevation-4);
color: rgba(var(--center-channel-color-rgb), 0.72) color: rgba(var(--center-channel-color-rgb), 0.75)
} }
span { span {

4
webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_completed.tsx
View File

@ -71,7 +71,7 @@ const CompletedWrapper = styled.div`
.start-trial-text, .completed-subtitle { .start-trial-text, .completed-subtitle {
font-size: 14px !important; font-size: 14px !important;
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.75);
line-height: 20px; line-height: 20px;
} }
@ -82,7 +82,7 @@ const CompletedWrapper = styled.div`
.disclaimer, .download-apps { .disclaimer, .download-apps {
width: 90%; width: 90%;
margin-top: 15px; margin-top: 15px;
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.75);
font-family: "Open Sans"; font-family: "Open Sans";
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;

2
webapp/channels/src/components/payment_form/card_input.css
View File

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

2
webapp/channels/src/components/payment_form/card_input.tsx
View File

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

14
webapp/channels/src/components/payment_form/gather_intent/gather_intent.scss
View File

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

4
webapp/channels/src/components/payment_form/payment_form.scss
View File

@ -30,7 +30,7 @@
.section-title { .section-title {
margin-bottom: 24px; 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-size: 16px;
font-weight: 600; font-weight: 600;
text-align: left; text-align: left;
@ -108,7 +108,7 @@
&::placeholder { &::placeholder {
color: var(--center-channel-color); color: var(--center-channel-color);
opacity: 0.64; opacity: 0.73;
} }
} }
} }

2
webapp/channels/src/components/plugin_marketplace/marketplace_modal.scss
View File

@ -58,7 +58,7 @@
padding: 13px 12px; padding: 13px 12px;
border: none; border: none;
background: transparent; background: transparent;
color: rgba(var(--center-channel-color-rgb), 0.64); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
line-height: 20px; line-height: 20px;

2
webapp/channels/src/components/post_edit_history/post_edit_history.scss
View File

@ -28,7 +28,7 @@
} }
&__error_subheading { &__error_subheading {
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.75);
font-weight: 400; font-weight: 400;
} }
} }

6
webapp/channels/src/components/post_priority/post_priority_picker.tsx
View File

@ -33,15 +33,15 @@ const ImportantIcon = styled(AlertCircleOutlineIcon)`
`; `;
const StandardIcon = styled(MessageTextOutlineIcon)` const StandardIcon = styled(MessageTextOutlineIcon)`
fill: rgba(var(--center-channel-color-rgb), 0.56); fill: rgba(var(--center-channel-color-rgb), 0.75);
`; `;
const AcknowledgementIcon = styled(CheckCircleOutlineIcon)` const AcknowledgementIcon = styled(CheckCircleOutlineIcon)`
fill: rgba(var(--center-channel-color-rgb), 0.56); fill: rgba(var(--center-channel-color-rgb), 0.75);
`; `;
const PersistentNotificationsIcon = styled(BellRingOutlineIcon)` const PersistentNotificationsIcon = styled(BellRingOutlineIcon)`
fill: rgba(var(--center-channel-color-rgb), 0.56); fill: rgba(var(--center-channel-color-rgb), 0.75);
`; `;
const Header = styled.h4` const Header = styled.h4`

2
webapp/channels/src/components/post_priority/post_priority_picker_item.tsx
View File

@ -53,7 +53,7 @@ const Text = styled.div`
const Description = styled.div` const Description = styled.div`
padding: 0 44px 6px; padding: 0 44px 6px;
font-size: 12px; font-size: 12px;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
`; `;
const ToggleWrapper = styled.div` const ToggleWrapper = styled.div`

2
webapp/channels/src/components/post_reminder_custom_time_picker_modal/post_reminder_custom_time_picker_modal.scss
View File

@ -25,7 +25,7 @@
button.dateTime__calendar-icon { button.dateTime__calendar-icon {
margin: 0 8px 0 0; margin: 0 8px 0 0;
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.64);
} }
input#customStatus__calendar-input { input#customStatus__calendar-input {

4
webapp/channels/src/components/post_view/acknowledgements/post_acknowledgements_users_popover.tsx
View File

@ -39,7 +39,7 @@ const Info = styled.div`
`; `;
const Title = styled.div` const Title = styled.div`
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
line-height: 16px; line-height: 16px;
@ -47,7 +47,7 @@ const Title = styled.div`
`; `;
const Span = styled.span` const Span = styled.span`
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
`; `;

8
webapp/channels/src/components/post_view/post_attachment_opengraph/post_attachment_opengraph.scss
View File

@ -57,11 +57,11 @@
padding: 5px; padding: 5px;
background-color: rgba(var(--center-channel-color-rgb), 0); background-color: rgba(var(--center-channel-color-rgb), 0);
border-radius: 4px; border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
&:hover:not(:active) { &:hover:not(:active) {
background-color: rgba(var(--center-channel-color-rgb), 0.08); background-color: 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.8);
} }
&:active { &:active {
@ -80,7 +80,7 @@
} }
.sitename { .sitename {
color: rgba(var(--center-channel-color-rgb), 0.64); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 11px; font-size: 11px;
font-weight: 400; font-weight: 400;
line-height: 16px; line-height: 16px;
@ -161,7 +161,7 @@
border: 1px solid rgba(var(--center-channel-color-rgb), 0.16); border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
background-color: var(--center-channel-bg); background-color: var(--center-channel-bg);
border-radius: 50%; border-radius: 50%;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px; font-size: 12px;
place-content: center; place-content: center;
place-items: center; place-items: center;

10
webapp/channels/src/components/post_view/reaction/reaction.scss
View File

@ -21,9 +21,9 @@
margin: 0 4px 4px 0; margin: 0 4px 4px 0;
background: rgba(var(--center-channel-color-rgb), 0.08); background: rgba(var(--center-channel-color-rgb), 0.08);
border-radius: 4px; border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.64); color: rgba(var(--center-channel-color-rgb), 0.75);
cursor: pointer; cursor: pointer;
fill: rgba(var(--center-channel-color-rgb), 0.56); fill: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
transition: transition:
@ -34,15 +34,15 @@
&:hover { &:hover {
border: solid 1px rgba(#3d3c40, 0.16); border: solid 1px rgba(#3d3c40, 0.16);
background-color: transparent; background-color: transparent;
color: rgba(#3d3c40, 0.72); color: rgba(#3d3c40, 0.75);
} }
&:not(.Reaction--reacted) { &:not(.Reaction--reacted) {
&:hover { &:hover {
border-color: rgba(var(--center-channel-color-rgb), 0.16); border-color: rgba(var(--center-channel-color-rgb), 0.16);
background-color: v(center-channel-bg); background-color: v(center-channel-bg);
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.75);
fill: rgba(var(--center-channel-color-rgb), 0.72); fill: rgba(var(--center-channel-color-rgb), 0.75);
} }
&:active { &:active {

2
webapp/channels/src/components/preparing_workspace/description.scss
View File

@ -1,6 +1,6 @@
.PreparingWorkspaceDescription { .PreparingWorkspaceDescription {
margin-bottom: 24px; margin-bottom: 24px;
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 18px; font-size: 18px;
} }

2
webapp/channels/src/components/preparing_workspace/invite_members_link.scss
View File

@ -13,7 +13,7 @@
border-left: 1px solid rgba(var(--center-channel-color-rgb), 0.2); border-left: 1px solid rgba(var(--center-channel-color-rgb), 0.2);
background: var(--center-channel-color-rgb); background: var(--center-channel-color-rgb);
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 16px; font-size: 16px;
} }

2
webapp/channels/src/components/preparing_workspace/organization.scss
View File

@ -29,7 +29,7 @@
&__status { &__status {
display: flex; display: flex;
align-items: center; align-items: center;
color: rgba(var(--center-channel-color-rgb), 0.72); color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px; font-size: 12px;
&--error { &--error {

Some files were not shown because too many files have changed in this diff Show More