Merge pull request #6963 from SimonBrandner/task/colors-5

Color clean-up numero cinco
This commit is contained in:
David Baker 2021-10-18 17:09:39 +01:00 committed by GitHub
commit e0027895e7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 49 additions and 83 deletions

View file

@ -51,7 +51,7 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
height: 0px; height: 0px;
width: 90%; width: 90%;
border: none; border: none;
border-bottom: 1px solid $groupFilterPanel-divider-color; border-bottom: 1px solid $tertiary-content;
} }
.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller { .mx_GroupFilterPanel .mx_GroupFilterPanel_scroller {

View file

@ -24,7 +24,7 @@ limitations under the License.
align-items: center; align-items: center;
height: 24px; height: 24px;
color: $roomlist-header-color; color: $tertiary-content;
margin-top: 4px; margin-top: 4px;
.mx_LeftPanelWidget_stickable { .mx_LeftPanelWidget_stickable {
@ -62,7 +62,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $roomlist-header-color; background-color: $tertiary-content;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
} }

View file

@ -49,7 +49,7 @@ $activeBorderColor: $secondary-content;
mask-repeat: no-repeat; mask-repeat: no-repeat;
margin-left: $gutterSize; margin-left: $gutterSize;
margin-bottom: 12px; margin-bottom: 12px;
background-color: $roomlist-header-color; background-color: $tertiary-content;
mask-image: url('$(res)/img/element-icons/expand-space-panel.svg'); mask-image: url('$(res)/img/element-icons/expand-space-panel.svg');
&.expanded { &.expanded {
@ -170,7 +170,7 @@ $activeBorderColor: $secondary-content;
mask-position: center; mask-position: center;
mask-size: 20px; mask-size: 20px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $roomlist-header-color; background-color: $tertiary-content;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
} }

View file

@ -51,7 +51,7 @@ limitations under the License.
} }
.mx_CompleteSecurity_waiting { .mx_CompleteSecurity_waiting {
color: $notice-secondary-color; color: $tertiary-content;
} }
.mx_CompleteSecurity_actionRow { .mx_CompleteSecurity_actionRow {

View file

@ -21,12 +21,12 @@ limitations under the License.
min-width: 32px; // for when the button is used in a flexbox min-width: 32px; // for when the button is used in a flexbox
min-height: 32px; // for when the button is used in a flexbox min-height: 32px; // for when the button is used in a flexbox
border-radius: 32px; border-radius: 32px;
background-color: $voice-playback-button-bg-color; background-color: $system;
&::before { &::before {
content: ''; content: '';
position: absolute; // sizing varies by icon position: absolute; // sizing varies by icon
background-color: $voice-playback-button-fg-color; background-color: $secondary-content;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
} }

View file

@ -31,7 +31,7 @@ limitations under the License.
.mx_Waveform { .mx_Waveform {
.mx_Waveform_bar { .mx_Waveform_bar {
background-color: $voice-record-waveform-incomplete-fg-color; background-color: $quaternary-content;
height: 100%; height: 100%;
/* Variable set by a JS component */ /* Variable set by a JS component */
transform: scaleY(max(0.05, var(--barHeight))); transform: scaleY(max(0.05, var(--barHeight)));

View file

@ -33,5 +33,5 @@ limitations under the License.
.mx_NewSessionReviewDialog_deviceID { .mx_NewSessionReviewDialog_deviceID {
font-size: $font-12px; font-size: $font-12px;
color: $notice-secondary-color; color: $tertiary-content;
} }

View file

@ -128,7 +128,7 @@ limitations under the License.
font-size: $font-10px; font-size: $font-10px;
transform: translateY(-13px); transform: translateY(-13px);
padding: 0 2px; padding: 0 2px;
background-color: $field-focused-label-bg-color; background-color: $background;
pointer-events: initial; pointer-events: initial;
} }
@ -144,7 +144,7 @@ limitations under the License.
.mx_Field input:disabled + label, .mx_Field input:disabled + label,
.mx_Field textarea:disabled, .mx_Field textarea:disabled,
.mx_Field textarea:disabled + label { .mx_Field textarea:disabled + label {
background-color: $field-focused-label-bg-color; background-color: $background;
color: $greyed-fg-color; color: $greyed-fg-color;
} }

View file

@ -56,7 +56,7 @@ limitations under the License.
padding: 10px 20px; padding: 10px 20px;
margin: auto 0; margin: auto 0;
text-align: center; text-align: center;
color: $notice-secondary-color; color: $tertiary-content;
overflow-wrap: break-word; overflow-wrap: break-word;
font-size: $font-12px; font-size: $font-12px;
} }

View file

@ -122,7 +122,7 @@ limitations under the License.
h3 { h3 {
text-transform: uppercase; text-transform: uppercase;
color: $notice-secondary-color; color: $tertiary-content;
font-weight: 600; font-weight: 600;
font-size: $font-12px; font-size: $font-12px;
margin: 4px 0; margin: 4px 0;

View file

@ -122,7 +122,7 @@ limitations under the License.
.mx_EntityTile_power { .mx_EntityTile_power {
padding-inline-start: 6px; padding-inline-start: 6px;
font-size: $font-10px; font-size: $font-10px;
color: $notice-secondary-color; color: $tertiary-content;
max-width: 6em; max-width: 6em;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

View file

@ -48,7 +48,7 @@ limitations under the License.
// to work correctly. // to work correctly.
padding-bottom: 8px; padding-bottom: 8px;
height: 24px; height: 24px;
color: $roomlist-header-color; color: $tertiary-content;
.mx_RoomSublist_stickable { .mx_RoomSublist_stickable {
flex: 1; flex: 1;
@ -165,7 +165,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $roomlist-header-color; background-color: $tertiary-content;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
} }
@ -236,7 +236,7 @@ limitations under the License.
cursor: pointer; cursor: pointer;
font-size: $font-13px; font-size: $font-13px;
line-height: $font-18px; line-height: $font-18px;
color: $roomtile-preview-color; color: $secondary-content;
// Update the render() function for RoomSublist if these change // Update the render() function for RoomSublist if these change
// Update the ListLayout class for minVisibleTiles if these change. // Update the ListLayout class for minVisibleTiles if these change.
@ -256,7 +256,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $roomlist-header-color; background: $tertiary-content;
left: -1px; // adjust for image position left: -1px; // adjust for image position
} }
@ -368,7 +368,7 @@ limitations under the License.
margin-top: 16px; margin-top: 16px;
margin-bottom: 16px; margin-bottom: 16px;
margin-right: 16px; // additional 16px margin-right: 16px; // additional 16px
border: 1px solid $roomsublist-divider-color; border: 1px solid $primary-content;
opacity: 0.1; opacity: 0.1;
} }

View file

@ -71,7 +71,7 @@ limitations under the License.
.mx_RoomTile_messagePreview { .mx_RoomTile_messagePreview {
font-size: $font-13px; font-size: $font-13px;
line-height: $font-18px; line-height: $font-18px;
color: $roomtile-preview-color; color: $secondary-content;
} }
.mx_RoomTile_nameWithPreview { .mx_RoomTile_nameWithPreview {

View file

@ -71,8 +71,6 @@ $input-focused-border-color: #238cf5;
$input-valid-border-color: $accent-color; $input-valid-border-color: $accent-color;
$input-invalid-border-color: $warning-color; $input-invalid-border-color: $warning-color;
$field-focused-label-bg-color: $background;
$resend-button-divider-color: #b9bec64a; // muted-text with a 4A opacity. $resend-button-divider-color: #b9bec64a; // muted-text with a 4A opacity.
// scrollbars // scrollbars
@ -124,19 +122,12 @@ $theme-button-bg-color: #e3e8f0;
$roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
$roomlist-bg-color: rgba(33, 38, 44, 0.90); $roomlist-bg-color: rgba(33, 38, 44, 0.90);
$roomlist-header-color: $tertiary-content;
$roomsublist-divider-color: $primary-content;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%); $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
$groupFilterPanel-divider-color: $roomlist-header-color;
$roomtile-preview-color: $secondary-content;
$roomtile-default-badge-bg-color: #61708b; $roomtile-default-badge-bg-color: #61708b;
// ******************** // ********************
$notice-secondary-color: $roomlist-header-color;
$panel-divider-color: transparent; $panel-divider-color: transparent;
$widget-menu-bar-bg-color: $header-panel-bg-color; $widget-menu-bar-bg-color: $header-panel-bg-color;
@ -206,10 +197,7 @@ $tooltip-timeline-fg-color: $primary-content;
$breadcrumb-placeholder-bg-color: #272c35; $breadcrumb-placeholder-bg-color: #272c35;
$voice-record-stop-border-color: $quaternary-content; $voice-record-stop-border-color: $quaternary-content;
$voice-record-waveform-incomplete-fg-color: $quaternary-content;
$voice-record-icon-color: $quaternary-content; $voice-record-icon-color: $quaternary-content;
$voice-playback-button-bg-color: $system;
$voice-playback-button-fg-color: $secondary-content;
// Appearance tab colors // Appearance tab colors
$appearance-tab-border-color: $room-highlight-color; $appearance-tab-border-color: $room-highlight-color;

View file

@ -64,8 +64,6 @@ $input-focused-border-color: #238cf5;
$input-valid-border-color: $accent-color; $input-valid-border-color: $accent-color;
$input-invalid-border-color: $warning-color; $input-invalid-border-color: $warning-color;
$field-focused-label-bg-color: $bg-color;
$resend-button-divider-color: $muted-fg-color; $resend-button-divider-color: $muted-fg-color;
// scrollbars // scrollbars
@ -111,6 +109,26 @@ $roomtopic-color: $text-secondary-color;
$header-divider-color: $header-panel-text-primary-color; $header-divider-color: $header-panel-text-primary-color;
$composer-e2e-icon-color: $header-panel-text-primary-color; $composer-e2e-icon-color: $header-panel-text-primary-color;
// Legacy theme backports
$accent: #0DBD8B;
$alert: #FF5B55;
$links: #0086e6;
$primary-content: $primary-fg-color;
$secondary-content: $secondary-fg-color;
$tertiary-content: $tertiary-fg-color;
$quaternary-content: #6F7882;
$quinary-content: $quaternary-content;
$system: #21262C;
$background: $primary-bg-color;
$panels: rgba($system, 0.9);
$panel-base: #8D97A5; // This color is not intended for use in the app
$panel-selected: rgba($panel-base, 0.3);
$panel-hover: rgba($panel-base, 0.1);
$panel-actions: $roomtile-selected-bg-color;
$space-nav: rgba($panel-base, 0.1);
// Legacy theme backports
// ******************** // ********************
$theme-button-bg-color: #e3e8f0; $theme-button-bg-color: #e3e8f0;
@ -120,12 +138,10 @@ $roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore b
$roomlist-filter-active-bg-color: $roomlist-button-bg-color; $roomlist-filter-active-bg-color: $roomlist-button-bg-color;
$roomlist-bg-color: $header-panel-bg-color; $roomlist-bg-color: $header-panel-bg-color;
$roomsublist-divider-color: $primary-fg-color;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%); $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
$groupFilterPanel-divider-color: $roomlist-header-color; $groupFilterPanel-divider-color: $tertiary-content;
$roomtile-preview-color: #9e9e9e;
$roomtile-default-badge-bg-color: #61708b; $roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: #1A1D23; $roomtile-selected-bg-color: #1A1D23;
@ -198,10 +214,7 @@ $breadcrumb-placeholder-bg-color: #272c35;
// See non-legacy dark for variable information // See non-legacy dark for variable information
$voice-record-stop-border-color: #6F7882; $voice-record-stop-border-color: #6F7882;
$voice-record-waveform-incomplete-fg-color: #6F7882;
$voice-record-icon-color: #6F7882; $voice-record-icon-color: #6F7882;
$voice-playback-button-bg-color: $tertiary-fg-color;
$voice-playback-button-fg-color: #21262C;
// Appearance tab colors // Appearance tab colors
$appearance-tab-border-color: $room-highlight-color; $appearance-tab-border-color: $room-highlight-color;
@ -215,16 +228,6 @@ $eventbubble-bg-hover: #1C2026;
$eventbubble-avatar-outline: $bg-color; $eventbubble-avatar-outline: $bg-color;
$eventbubble-reply-color: #C1C6CD; $eventbubble-reply-color: #C1C6CD;
// Legacy theme backports
$primary-content: $primary-fg-color;
$secondary-content: $secondary-fg-color;
$tertiary-content: $tertiary-fg-color;
$quaternary-content: #6F7882;
$quinary-content: $quaternary-content;
$background: $primary-bg-color;
$panel-actions: $roomtile-selected-bg-color;
// Legacy theme backports
// ***** Mixins! ***** // ***** Mixins! *****
@define-mixin mx_DialogButton { @define-mixin mx_DialogButton {

View file

@ -18,7 +18,6 @@ $accent-color: #03b381;
$accent-bg-color: rgba(3, 179, 129, 0.16); $accent-bg-color: rgba(3, 179, 129, 0.16);
$notice-primary-color: #ff4b55; $notice-primary-color: #ff4b55;
$notice-primary-bg-color: rgba(255, 75, 85, 0.16); $notice-primary-bg-color: rgba(255, 75, 85, 0.16);
$notice-secondary-color: #61708b;
$header-panel-bg-color: #f3f8fd; $header-panel-bg-color: #f3f8fd;
// typical text (dark-on-white in light skin) // typical text (dark-on-white in light skin)
@ -53,10 +52,6 @@ $info-bg-color: #2a9edf;
$mention-user-pill-bg-color: $warning-color; $mention-user-pill-bg-color: $warning-color;
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); $other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
// pinned events indicator
$pinned-unread-color: $notice-primary-color;
$pinned-color: $notice-secondary-color;
// informational plinth // informational plinth
$info-plinth-bg-color: #f7f7f7; $info-plinth-bg-color: #f7f7f7;
$info-plinth-fg-color: #888; $info-plinth-fg-color: #888;
@ -95,8 +90,6 @@ $input-focused-border-color: #238cf5;
$input-valid-border-color: $accent-color; $input-valid-border-color: $accent-color;
$input-invalid-border-color: $warning-color; $input-invalid-border-color: $warning-color;
$field-focused-label-bg-color: #ffffff;
$resend-button-divider-color: $input-darker-bg-color; $resend-button-divider-color: $input-darker-bg-color;
$button-bg-color: $accent-color; $button-bg-color: $accent-color;
@ -181,12 +174,8 @@ $roomlist-button-bg-color: #fff; // Buttons include the filter box, explore butt
$roomlist-filter-active-bg-color: $roomlist-button-bg-color; $roomlist-filter-active-bg-color: $roomlist-button-bg-color;
$roomlist-bg-color: $header-panel-bg-color; $roomlist-bg-color: $header-panel-bg-color;
$roomlist-header-color: $primary-fg-color; $roomlist-header-color: $primary-fg-color;
$roomsublist-divider-color: $primary-fg-color;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%); $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
$groupFilterPanel-divider-color: $roomlist-header-color;
$roomtile-preview-color: #9e9e9e;
$roomtile-default-badge-bg-color: #61708b; $roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: #fff; $roomtile-selected-bg-color: #fff;
@ -338,10 +327,7 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
$voice-record-stop-symbol-color: #ff4b55; $voice-record-stop-symbol-color: #ff4b55;
$voice-record-live-circle-color: #ff4b55; $voice-record-live-circle-color: #ff4b55;
$voice-record-stop-border-color: #E3E8F0; $voice-record-stop-border-color: #E3E8F0;
$voice-record-waveform-incomplete-fg-color: #C1C6CD;
$voice-record-icon-color: $tertiary-fg-color; $voice-record-icon-color: $tertiary-fg-color;
$voice-playback-button-bg-color: $system;
$voice-playback-button-fg-color: $secondary-content;
// FontSlider colors // FontSlider colors
$appearance-tab-border-color: $input-darker-bg-color; $appearance-tab-border-color: $input-darker-bg-color;
@ -355,6 +341,12 @@ $eventbubble-bg-hover: #FAFBFD;
$eventbubble-avatar-outline: #fff; $eventbubble-avatar-outline: #fff;
$eventbubble-reply-color: #C1C6CD; $eventbubble-reply-color: #C1C6CD;
// pinned events indicator
$pinned-unread-color: $notice-primary-color;
$pinned-color: $tertiary-content;
$groupFilterPanel-divider-color: $tertiary-content;
// ***** Mixins! ***** // ***** Mixins! *****
@define-mixin mx_DialogButton { @define-mixin mx_DialogButton {

View file

@ -52,7 +52,6 @@ $accent-color-50pct: var(--accent-color-50pct); //still needs alpha at .5
// --timeline-background-color // --timeline-background-color
$authpage-body-bg-color: var(--timeline-background-color); $authpage-body-bg-color: var(--timeline-background-color);
$button-secondary-bg-color: var(--timeline-background-color); $button-secondary-bg-color: var(--timeline-background-color);
$field-focused-label-bg-color: var(--timeline-background-color);
$lightbox-border-color: var(--timeline-background-color); $lightbox-border-color: var(--timeline-background-color);
$menu-bg-color: var(--timeline-background-color); $menu-bg-color: var(--timeline-background-color);
$avatar-bg-color: var(--timeline-background-color); $avatar-bg-color: var(--timeline-background-color);
@ -103,8 +102,6 @@ $roomheader-color: var(--timeline-text-color);
// was #232f32 // was #232f32
$authpage-primary-color: var(--timeline-text-color); $authpage-primary-color: var(--timeline-text-color);
// --roomlist-text-secondary-color // --roomlist-text-secondary-color
$roomtile-preview-color: var(--roomlist-text-secondary-color);
$roomlist-header-color: var(--roomlist-text-secondary-color);
$roomtile-default-badge-bg-color: var(--roomlist-text-secondary-color); $roomtile-default-badge-bg-color: var(--roomlist-text-secondary-color);
// //
@ -112,12 +109,10 @@ $roomtile-default-badge-bg-color: var(--roomlist-text-secondary-color);
$input-darker-bg-color: var(--roomlist-separator-color); $input-darker-bg-color: var(--roomlist-separator-color);
$panel-divider-color: var(--roomlist-separator-color);// originally #dee1f3, but close enough $panel-divider-color: var(--roomlist-separator-color);// originally #dee1f3, but close enough
$primary-hairline-color: var(--roomlist-separator-color);// originally #e5e5e5, but close enough $primary-hairline-color: var(--roomlist-separator-color);// originally #e5e5e5, but close enough
$roomsublist-divider-color: var(--roomlist-separator-color);
// //
// --timeline-text-secondary-color // --timeline-text-secondary-color
$authpage-secondary-color: var(--timeline-text-secondary-color); $authpage-secondary-color: var(--timeline-text-secondary-color);
$memberstatus-placeholder-color: var(--timeline-text-secondary-color); $memberstatus-placeholder-color: var(--timeline-text-secondary-color);
$notice-secondary-color: var(--timeline-text-secondary-color);
$pinned-color: var(--timeline-text-secondary-color); $pinned-color: var(--timeline-text-secondary-color);
$settings-subsection-fg-color: var(--timeline-text-secondary-color); $settings-subsection-fg-color: var(--timeline-text-secondary-color);
$roomheader-addroom-bg-color: var(--timeline-text-secondary-color); $roomheader-addroom-bg-color: var(--timeline-text-secondary-color);

View file

@ -101,8 +101,6 @@ $input-focused-border-color: #238cf5;
$input-valid-border-color: $accent-color; $input-valid-border-color: $accent-color;
$input-invalid-border-color: $warning-color; $input-invalid-border-color: $warning-color;
$field-focused-label-bg-color: $background;
$button-bg-color: $accent-color; $button-bg-color: $accent-color;
$button-fg-color: white; $button-fg-color: white;
@ -186,13 +184,8 @@ $theme-button-bg-color: $quinary-content;
$roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
$roomlist-bg-color: rgba(245, 245, 245, 0.90); $roomlist-bg-color: rgba(245, 245, 245, 0.90);
$roomlist-header-color: $tertiary-content;
$roomsublist-divider-color: $primary-content;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%); $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
$groupFilterPanel-divider-color: $roomlist-header-color;
$roomtile-preview-color: $secondary-content;
$roomtile-default-badge-bg-color: #61708b; $roomtile-default-badge-bg-color: #61708b;
$presence-online: $accent-color; $presence-online: $accent-color;
@ -210,13 +203,11 @@ $username-variant6-color: #2dc2c5;
$username-variant7-color: #5c56f5; $username-variant7-color: #5c56f5;
$username-variant8-color: #74d12c; $username-variant8-color: #74d12c;
$notice-secondary-color: $roomlist-header-color;
$panel-divider-color: transparent; $panel-divider-color: transparent;
// pinned events indicator // pinned events indicator
$pinned-unread-color: $notice-primary-color; $pinned-unread-color: $notice-primary-color;
$pinned-color: $notice-secondary-color; $pinned-color: $tertiary-content;
// ******************** // ********************
@ -331,10 +322,7 @@ $voice-record-stop-symbol-color: #ff4b55;
$voice-record-live-circle-color: #ff4b55; $voice-record-live-circle-color: #ff4b55;
$voice-record-stop-border-color: $quinary-content; $voice-record-stop-border-color: $quinary-content;
$voice-record-waveform-incomplete-fg-color: $quaternary-content;
$voice-record-icon-color: $tertiary-content; $voice-record-icon-color: $tertiary-content;
$voice-playback-button-bg-color: $system;
$voice-playback-button-fg-color: $secondary-content;
// FontSlider colors // FontSlider colors
$appearance-tab-border-color: $input-darker-bg-color; $appearance-tab-border-color: $input-darker-bg-color;