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 {
"background": "none",
"borderColor": "transparent",
"opacity": 0.5,
"opacity": 0.75,
"overflow": "hidden",
"pointerEvents": "none",
"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;
align-self: center;
margin: 0 0;
color: rgba(var(--center-channel-color-rgb), 0.64);
color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 14px;
line-height: 20px;
}
.about-footer {
margin-top: 16px;
color: rgba(var(--center-channel-color-rgb), 0.64);
color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px;
line-height: 16px;

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

@ -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) {

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

@ -31,7 +31,7 @@
}
.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 {
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 {

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

@ -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;

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

@ -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;

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

@ -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;
}
}

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

@ -112,7 +112,7 @@
&::placeholder {
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,
&: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;

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

@ -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;
}
}

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

@ -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;

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);
&__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;

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

@ -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;
}

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___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);
}
}

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___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 {

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

@ -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 {

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);
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 {

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

@ -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;

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

@ -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;

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

@ -4,7 +4,7 @@
button.close {
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 {
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;

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

@ -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;

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

@ -30,7 +30,7 @@
}
: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 {
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;
}
}

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

@ -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;

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

@ -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 {

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

@ -212,7 +212,7 @@
}
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;
justify-content: center;
margin-top: -1px;
opacity: 0.56;
opacity: 0.73;
visibility: hidden;
&:hover {
opacity: 0.72;
opacity: 0.73;
}
${Priority}:hover & {

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

@ -92,13 +92,13 @@
border: none;
background: transparent;
border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.56);
color: rgba(var(--center-channel-color-rgb), 0.75);
cursor: pointer;
fill: currentColor;
&:hover {
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;
text-decoration: none;
}
@ -148,7 +148,7 @@
&__helper-text {
display: inline-block;
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;
}

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;
padding: 0 7px;
border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.56);
color: rgba(var(--center-channel-color-rgb), 0.64);
&:hover {
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;
}

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

@ -135,7 +135,7 @@
}
.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 {
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 {
: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__emailUs {
color: rgba(var(--center-channel-color-rgb), 0.72);
color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 16px;
font-style: 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 {
color: rgba(var(--center-channel-color-rgb), 0.56);
color: rgba(var(--center-channel-color-rgb), 0.64);
&:hover,
&--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;
justify-content: center;
fill: v(center-channel-color);
opacity: 0.56;
opacity: 0.73;
&--large {
width: 2.4rem;

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

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

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

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

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

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

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

@ -15,7 +15,7 @@
}
&__icon {
color: rgba(var(--center-channel-color-rgb), 0.72);
color: rgba(var(--center-channel-color-rgb), 0.64);
}
&__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'>
<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 className='CenterMessageLock__right'>
<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;
background: transparent;
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;
line-height: 16px;
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`

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;
line-height: 16px;
letter-spacing: 0.02em;
color: rgba(var(--center-channel-color-rgb), .64);
color: rgba(var(--center-channel-color-rgb), 0.75);
`;
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;
line-height: 16px;
letter-spacing: 0.02em;
color: rgba(var(--center-channel-color-rgb), .64);
color: rgba(var(--center-channel-color-rgb), 0.75);
`;
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;
border-radius: 4px;
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 {
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;
height: 24px;
@ -27,14 +27,14 @@ const EmptyPlace = styled.button`
padding: 0px;
background: transparent;
border: 0px;
color: rgba(var(--center-channel-color-rgb), 0.64);
color: rgba(var(--center-channel-color-rgb), 0.75);
i {
display: none;
font-size: 14px;
margin-left: 4px;
}
&:hover {
color: rgba(var(--center-channel-color-rgb), 0.72);
color: rgba(var(--center-channel-color-rgb), 0.75);
i {
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`
color: rgba(var(--center-channel-color-rgb), 0.56);
color: rgba(var(--center-channel-color-rgb), 0.64);
`;
const MenuItemText = styled.div`
@ -28,7 +28,7 @@ const MenuItemText = styled.div`
const RightSide = styled.div`
display: flex;
color: rgba(var(--center-channel-color-rgb), 0.56);
color: rgba(var(--center-channel-color-rgb), 0.75);
`;
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`
display: flex;
color: rgba(var(--center-channel-color-rgb), 0.56);
color: rgba(var(--center-channel-color-rgb), 0.75);
margin-top: 24px;
padding: 0 18px;
`;
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;
padding: 12px 0 10px 0;
border: 0;
margin: 0 6px;
background: rgba(var(--center-channel-color-rgb), 0.04);
border-radius: 4px;
&:hover {
background: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.72);
background: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.8);
& i {
color: rgba(var(--center-channel-color-rgb), 0.8);
}
}
&:active,
&.active {
background: rgba(var(--button-bg-rgb), 0.08);
color: var(--button-bg);
& i {
color: var(--button-bg-rgb);
}
}
& i {
color: rgba(var(--center-channel-color-rgb), 0.64);
font-size: 24px;
}
& span {
line-height: 16px;
font-size: 10px;
font-weight: 600;
line-height: 16px;
}
`;
@ -51,7 +61,7 @@ const CopyButton = styled(Button)`
&:active,
&.active {
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;
}

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

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

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

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

@ -23,7 +23,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;
}
@ -32,7 +32,7 @@
width: 4rem;
height: 4rem;
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;

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

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

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

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

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

@ -22,7 +22,7 @@
.DesktopAuthToken__sub {
margin-bottom: 24px;
color: rgba(var(--center-channel-color-rgb), 0.72);
color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 18px;
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;
margin: 0 14px;
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;
}
@ -126,7 +126,7 @@
button.dateTime__calendar-icon {
margin: 0 8px 0 0;
color: rgba(var(--center-channel-color-rgb), 0.72);
color: rgba(var(--center-channel-color-rgb), 0.64);
&:active {
background-color: transparent;

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

@ -31,12 +31,12 @@
}
.icon {
color: rgba(var(--center-channel-color-rgb), 0.56);
fill: 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.64);
&:hover {
color: rgba(var(--center-channel-color-rgb), 0.72);
fill: 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.8);
}
}

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

@ -11,7 +11,7 @@
.icon {
svg {
fill: rgba(var(--sidebar-text-rgb), 0.6);
fill: rgba(var(--sidebar-text-rgb), 0.75);
vertical-align: middle;
}
}
@ -43,7 +43,7 @@
margin-top: 1px;
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;
padding: 0 16px;
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;
line-height: 16px;
@ -47,7 +47,7 @@
&__timestamp {
padding-right: 8px;
color: rgba(var(--center-channel-color-rgb), 0.64);
color: rgba(var(--center-channel-color-rgb), 0.75);
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
size={16}
color={'rgba(var(--center-channel-color-rgb), 0.56)'}
color={'rgba(var(--center-channel-color-rgb), 0.75)'}
/>
</button>
<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;
flex: 1 1 0%;
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;
&.direction-column {

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

@ -13,7 +13,7 @@
&__terms {
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-weight: 400;
line-height: 16px;

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

@ -58,7 +58,7 @@
&__zoom-bar {
.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 {
overflow: hidden;
max-width: 30vw;
color: rgba(255, 255, 255, 0.56);
color: rgba(255, 255, 255, 0.75);
font-size: 1.4rem;
font-weight: 400;
text-overflow: ellipsis;

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

@ -71,7 +71,7 @@
gap: 8px;
> :not(.Tag) {
opacity: 0.56;
opacity: 0.73;
}
.Tag {
@ -93,9 +93,9 @@
margin-left: 8px;
background-color: var(--center-channel-bg);
border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.72);
color: rgba(var(--center-channel-color-rgb), 0.64);
cursor: pointer;
fill: rgba(var(--center-channel-color-rgb), 0.72);
fill: rgba(var(--center-channel-color-rgb), 0.64);
opacity: 0;
text-decoration: none;
transition: opacity 0.15s ease;
@ -110,7 +110,7 @@
&:hover {
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;
const iconProps = {
size: 16,
color: 'rgba(var(--center-channel-color-rgb), 0.56)',
color: 'rgba(var(--center-channel-color-rgb), 0.75)',
};
if (channelIsArchived) {
@ -216,7 +216,7 @@ const DropdownIndicator = (props: IndicatorProps<ChannelOption>) => {
<components.DropdownIndicator {...props}>
<ChevronDownIcon
size={16}
color={'rgba(var(--center-channel-color-rgb), 0.64)'}
color={'rgba(var(--center-channel-color-rgb), 0.75)'}
/>
</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 => ({
...provided,
margin: 0,
color: 'rgba(var(--center-channel-color-rgb), 0.64)',
color: 'rgba(var(--center-channel-color-rgb), 0.75)',
fontSize: '14px',
lineHeight: '20px',
}),
@ -120,7 +120,7 @@ const getBaseStyles = (bodyHeight: number) => {
justifyContent: 'flex-start',
padding: '0 0 0 2rem',
margin: 0,
color: 'rgba(var(--center-channel-color-rgb), 0.56)',
color: 'rgba(var(--center-channel-color-rgb), 0.75)',
backgroundColor: 'none',
fontSize: '1.2rem',
fontWeight: 600,

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

@ -84,7 +84,7 @@
}
&--description {
color: rgba(var(--center-channel-color-rgb), 0.56);
color: rgba(var(--center-channel-color-rgb), 0.75);
}
.emoticon {
@ -95,7 +95,7 @@
&__team-name {
overflow: hidden;
width: 100%;
color: rgba(var(--center-channel-color-rgb), 0.56);
color: rgba(var(--center-channel-color-rgb), 0.75);
grid-column: 3 / 4;
text-align: right;
text-overflow: ellipsis;
@ -138,7 +138,7 @@
box-shadow: none;
&#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 {
color: rgba(var(--center-channel-color-rgb), 0.72);
color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 16px;
font-weight: 400;
line-height: 24px;

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

@ -17,7 +17,7 @@
.footer-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-weight: 400;
line-height: 16px;
@ -29,7 +29,7 @@
.footer-copyright {
margin-right: 24px;
color: rgba(var(--center-channel-color-rgb), 0.56);
color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 11px;
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);
svg {
fill: rgba(var(--center-channel-color-rgb), 0.72);
fill: rgba(var(--center-channel-color-rgb), 0.75);
}
}
svg {
padding-top: 2px; /* Vertical alignment fix */
fill: rgba(var(--center-channel-color-rgb), 0.56);
fill: rgba(var(--center-channel-color-rgb), 0.75);
vertical-align: middle;
}

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

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

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

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

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

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

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

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

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

@ -99,7 +99,7 @@
.invitation-modal-confirm {
h2 {
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-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%;
height: 32px;
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-size: 12px;
font-style: normal;
@ -60,7 +60,7 @@
position: fixed;
bottom: 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-style: normal;
font-weight: normal;

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

@ -30,7 +30,7 @@
justify-content: center;
.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-weight: 400;
line-height: 28px;
@ -167,7 +167,7 @@
.login-body-card-form-divider-label {
padding: 0 10px;
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;
line-height: 0;
}
@ -210,7 +210,7 @@
p {
width: 100%;
margin: 0;
color: rgba(var(--center-channel-color-rgb), 0.72);
color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 18px;
font-weight: 400;
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);
border-radius: 16px;
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;
line-height: 21px;
@ -50,12 +50,12 @@
border: none;
background: transparent;
border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.56);
color: rgba(var(--center-channel-color-rgb), 0.64);
font-size: 18px;
line-height: 18px;
&:hover {
color: rgba(var(--center-channel-color-rgb), 0.72);
color: rgba(var(--center-channel-color-rgb), 0.8);
}
.icon {

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

@ -240,10 +240,10 @@ export const MenuItemStyled = styled(MuiMenuItem, {
width: '18px',
height: '18px',
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': {
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': {
@ -262,7 +262,7 @@ export const MenuItemStyled = styled(MuiMenuItem, {
'&>.label-elements>:last-child': {
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': {
color: isDestructive && 'var(--button-color)',
@ -281,7 +281,7 @@ export const MenuItemStyled = styled(MuiMenuItem, {
flexDirection: 'row',
flexWrap: 'nowrap',
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',
marginInlineStart: '24px',
fontSize: '12px',
@ -289,7 +289,7 @@ export const MenuItemStyled = styled(MuiMenuItem, {
alignItems: 'center',
},
'&: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 {
margin-top: 5px;
color: rgba(var(--center-channel-color-rgb), 0.56);
color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px;
line-height: 16px;
text-align: left;

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

@ -69,7 +69,7 @@ const TaskItems = styled.div`
p {
font-size: 12px;
color: rgba(var(--center-channel-color-rgb), 0.72);
color: rgba(var(--center-channel-color-rgb), 0.75);
padding: 4px 24px;
}
@ -101,12 +101,12 @@ const Button = styled.button<{open: boolean}>(({open}) => {
background: var(--center-channel-bg);
border: solid 1px rgba(var(--center-channel-color-rgb), 0.16);
box-shadow: var(--elevation-3);
color: rgba(var(--center-channel-color-rgb), 0.56);
color: rgba(var(--center-channel-color-rgb), 0.75);
&:hover {
border-color: rgba(var(--center-channel-color-rgb), 0.24);
box-shadow: var(--elevation-4);
color: rgba(var(--center-channel-color-rgb), 0.72)
color: rgba(var(--center-channel-color-rgb), 0.75)
}
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 {
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;
}
@ -82,7 +82,7 @@ const CompletedWrapper = styled.div`
.disclaimer, .download-apps {
width: 90%;
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-style: normal;
font-weight: normal;

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

@ -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;
}

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',
color: theme.centerChannelColor,
'::placeholder': {
color: `rgba(${toRgbValues(theme.centerChannelColor)}, 0.64)`,
color: `rgba(${toRgbValues(theme.centerChannelColor)}, 0.75)`,
},
},
invalid: {

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

@ -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;
}

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

@ -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;
}
}
}

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

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

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

@ -28,7 +28,7 @@
}
&__error_subheading {
color: rgba(var(--center-channel-color-rgb), 0.72);
color: rgba(var(--center-channel-color-rgb), 0.75);
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)`
fill: rgba(var(--center-channel-color-rgb), 0.56);
fill: rgba(var(--center-channel-color-rgb), 0.75);
`;
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)`
fill: rgba(var(--center-channel-color-rgb), 0.56);
fill: rgba(var(--center-channel-color-rgb), 0.75);
`;
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`
padding: 0 44px 6px;
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`

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 {
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 {

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`
color: rgba(var(--center-channel-color-rgb), 0.56);
color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px;
font-weight: 600;
line-height: 16px;
@ -47,7 +47,7 @@ const Title = styled.div`
`;
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;
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;
background-color: rgba(var(--center-channel-color-rgb), 0);
border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.56);
color: rgba(var(--center-channel-color-rgb), 0.75);
&:hover:not(:active) {
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 {
@ -80,7 +80,7 @@
}
.sitename {
color: rgba(var(--center-channel-color-rgb), 0.64);
color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 11px;
font-weight: 400;
line-height: 16px;
@ -161,7 +161,7 @@
border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
background-color: var(--center-channel-bg);
border-radius: 50%;
color: rgba(var(--center-channel-color-rgb), 0.56);
color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px;
place-content: 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;
background: rgba(var(--center-channel-color-rgb), 0.08);
border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.64);
color: rgba(var(--center-channel-color-rgb), 0.75);
cursor: pointer;
fill: rgba(var(--center-channel-color-rgb), 0.56);
fill: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 11px;
font-weight: 600;
transition:
@ -34,15 +34,15 @@
&:hover {
border: solid 1px rgba(#3d3c40, 0.16);
background-color: transparent;
color: rgba(#3d3c40, 0.72);
color: rgba(#3d3c40, 0.75);
}
&:not(.Reaction--reacted) {
&:hover {
border-color: rgba(var(--center-channel-color-rgb), 0.16);
background-color: v(center-channel-bg);
color: rgba(var(--center-channel-color-rgb), 0.72);
fill: 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.75);
}
&:active {

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

@ -1,6 +1,6 @@
.PreparingWorkspaceDescription {
margin-bottom: 24px;
color: rgba(var(--center-channel-color-rgb), 0.72);
color: rgba(var(--center-channel-color-rgb), 0.75);
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);
background: var(--center-channel-color-rgb);
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;
}

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

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

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