diff --git a/res/css/structures/_GroupFilterPanel.scss b/res/css/structures/_GroupFilterPanel.scss index ceea20ed79..a101aba7e5 100644 --- a/res/css/structures/_GroupFilterPanel.scss +++ b/res/css/structures/_GroupFilterPanel.scss @@ -51,7 +51,7 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation height: 0px; width: 90%; border: none; - border-bottom: 1px solid $groupFilterPanel-divider-color; + border-bottom: 1px solid $tertiary-content; } .mx_GroupFilterPanel .mx_GroupFilterPanel_scroller { diff --git a/res/css/structures/_LeftPanelWidget.scss b/res/css/structures/_LeftPanelWidget.scss index 93c2898395..bb04b85624 100644 --- a/res/css/structures/_LeftPanelWidget.scss +++ b/res/css/structures/_LeftPanelWidget.scss @@ -24,7 +24,7 @@ limitations under the License. align-items: center; height: 24px; - color: $roomlist-header-color; + color: $tertiary-content; margin-top: 4px; .mx_LeftPanelWidget_stickable { @@ -62,7 +62,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background-color: $roomlist-header-color; + background-color: $tertiary-content; mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); } diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss index 149436960e..c9e88d4342 100644 --- a/res/css/structures/_SpacePanel.scss +++ b/res/css/structures/_SpacePanel.scss @@ -49,7 +49,7 @@ $activeBorderColor: $secondary-content; mask-repeat: no-repeat; margin-left: $gutterSize; margin-bottom: 12px; - background-color: $roomlist-header-color; + background-color: $tertiary-content; mask-image: url('$(res)/img/element-icons/expand-space-panel.svg'); &.expanded { @@ -170,7 +170,7 @@ $activeBorderColor: $secondary-content; mask-position: center; mask-size: 20px; mask-repeat: no-repeat; - background-color: $roomlist-header-color; + background-color: $tertiary-content; mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); } diff --git a/res/css/structures/auth/_CompleteSecurity.scss b/res/css/structures/auth/_CompleteSecurity.scss index 566507211c..2c45069cfe 100644 --- a/res/css/structures/auth/_CompleteSecurity.scss +++ b/res/css/structures/auth/_CompleteSecurity.scss @@ -51,7 +51,7 @@ limitations under the License. } .mx_CompleteSecurity_waiting { - color: $notice-secondary-color; + color: $tertiary-content; } .mx_CompleteSecurity_actionRow { diff --git a/res/css/views/audio_messages/_PlayPauseButton.scss b/res/css/views/audio_messages/_PlayPauseButton.scss index 714da3e605..9548b62dfd 100644 --- a/res/css/views/audio_messages/_PlayPauseButton.scss +++ b/res/css/views/audio_messages/_PlayPauseButton.scss @@ -21,12 +21,12 @@ limitations under the License. min-width: 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; - background-color: $voice-playback-button-bg-color; + background-color: $system; &::before { content: ''; position: absolute; // sizing varies by icon - background-color: $voice-playback-button-fg-color; + background-color: $secondary-content; mask-repeat: no-repeat; mask-size: contain; } diff --git a/res/css/views/audio_messages/_PlaybackContainer.scss b/res/css/views/audio_messages/_PlaybackContainer.scss index 3886e38583..408a295389 100644 --- a/res/css/views/audio_messages/_PlaybackContainer.scss +++ b/res/css/views/audio_messages/_PlaybackContainer.scss @@ -31,7 +31,7 @@ limitations under the License. .mx_Waveform { .mx_Waveform_bar { - background-color: $voice-record-waveform-incomplete-fg-color; + background-color: $quaternary-content; height: 100%; /* Variable set by a JS component */ transform: scaleY(max(0.05, var(--barHeight))); diff --git a/res/css/views/dialogs/_NewSessionReviewDialog.scss b/res/css/views/dialogs/_NewSessionReviewDialog.scss index b35c570c80..0016b5b91b 100644 --- a/res/css/views/dialogs/_NewSessionReviewDialog.scss +++ b/res/css/views/dialogs/_NewSessionReviewDialog.scss @@ -33,5 +33,5 @@ limitations under the License. .mx_NewSessionReviewDialog_deviceID { font-size: $font-12px; - color: $notice-secondary-color; + color: $tertiary-content; } diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index 37d335b76d..7bbb91a066 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -128,7 +128,7 @@ limitations under the License. font-size: $font-10px; transform: translateY(-13px); padding: 0 2px; - background-color: $field-focused-label-bg-color; + background-color: $background; pointer-events: initial; } @@ -144,7 +144,7 @@ limitations under the License. .mx_Field input:disabled + label, .mx_Field textarea:disabled, .mx_Field textarea:disabled + label { - background-color: $field-focused-label-bg-color; + background-color: $background; color: $greyed-fg-color; } diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss index afaed50fa4..b400a933ae 100644 --- a/res/css/views/messages/_common_CryptoEvent.scss +++ b/res/css/views/messages/_common_CryptoEvent.scss @@ -56,7 +56,7 @@ limitations under the License. padding: 10px 20px; margin: auto 0; text-align: center; - color: $notice-secondary-color; + color: $tertiary-content; overflow-wrap: break-word; font-size: $font-12px; } diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss index edc82cfdbf..9a09d96bc9 100644 --- a/res/css/views/right_panel/_UserInfo.scss +++ b/res/css/views/right_panel/_UserInfo.scss @@ -122,7 +122,7 @@ limitations under the License. h3 { text-transform: uppercase; - color: $notice-secondary-color; + color: $tertiary-content; font-weight: 600; font-size: $font-12px; margin: 4px 0; diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss index a2ebd6c11b..23a5ffc99f 100644 --- a/res/css/views/rooms/_EntityTile.scss +++ b/res/css/views/rooms/_EntityTile.scss @@ -122,7 +122,7 @@ limitations under the License. .mx_EntityTile_power { padding-inline-start: 6px; font-size: $font-10px; - color: $notice-secondary-color; + color: $tertiary-content; max-width: 6em; overflow: hidden; text-overflow: ellipsis; diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss index 0cf5f5a9e0..011824d9d4 100644 --- a/res/css/views/rooms/_RoomSublist.scss +++ b/res/css/views/rooms/_RoomSublist.scss @@ -48,7 +48,7 @@ limitations under the License. // to work correctly. padding-bottom: 8px; height: 24px; - color: $roomlist-header-color; + color: $tertiary-content; .mx_RoomSublist_stickable { flex: 1; @@ -165,7 +165,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background-color: $roomlist-header-color; + background-color: $tertiary-content; mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); } @@ -236,7 +236,7 @@ limitations under the License. cursor: pointer; font-size: $font-13px; line-height: $font-18px; - color: $roomtile-preview-color; + color: $secondary-content; // Update the render() function for RoomSublist if these change // Update the ListLayout class for minVisibleTiles if these change. @@ -256,7 +256,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background: $roomlist-header-color; + background: $tertiary-content; left: -1px; // adjust for image position } @@ -368,7 +368,7 @@ limitations under the License. margin-top: 16px; margin-bottom: 16px; margin-right: 16px; // additional 16px - border: 1px solid $roomsublist-divider-color; + border: 1px solid $primary-content; opacity: 0.1; } diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 0ec0b3988e..5cd75fd69e 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -71,7 +71,7 @@ limitations under the License. .mx_RoomTile_messagePreview { font-size: $font-13px; line-height: $font-18px; - color: $roomtile-preview-color; + color: $secondary-content; } .mx_RoomTile_nameWithPreview { diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 75637455e4..ca06d38b1f 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -71,8 +71,6 @@ $input-focused-border-color: #238cf5; $input-valid-border-color: $accent-color; $input-invalid-border-color: $warning-color; -$field-focused-label-bg-color: $background; - $resend-button-divider-color: #b9bec64a; // muted-text with a 4A opacity. // 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-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%); -$groupFilterPanel-divider-color: $roomlist-header-color; - -$roomtile-preview-color: $secondary-content; $roomtile-default-badge-bg-color: #61708b; // ******************** -$notice-secondary-color: $roomlist-header-color; - $panel-divider-color: transparent; $widget-menu-bar-bg-color: $header-panel-bg-color; @@ -206,10 +197,7 @@ $tooltip-timeline-fg-color: $primary-content; $breadcrumb-placeholder-bg-color: #272c35; $voice-record-stop-border-color: $quaternary-content; -$voice-record-waveform-incomplete-fg-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-border-color: $room-highlight-color; diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index 778b7cc6d1..0fe9f22dde 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -64,8 +64,6 @@ $input-focused-border-color: #238cf5; $input-valid-border-color: $accent-color; $input-invalid-border-color: $warning-color; -$field-focused-label-bg-color: $bg-color; - $resend-button-divider-color: $muted-fg-color; // scrollbars @@ -111,6 +109,26 @@ $roomtopic-color: $text-secondary-color; $header-divider-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; @@ -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-bg-color: $header-panel-bg-color; -$roomsublist-divider-color: $primary-fg-color; $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-selected-bg-color: #1A1D23; @@ -198,10 +214,7 @@ $breadcrumb-placeholder-bg-color: #272c35; // See non-legacy dark for variable information $voice-record-stop-border-color: #6F7882; -$voice-record-waveform-incomplete-fg-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-border-color: $room-highlight-color; @@ -215,16 +228,6 @@ $eventbubble-bg-hover: #1C2026; $eventbubble-avatar-outline: $bg-color; $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! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index fc625876f3..09dd46d151 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -18,7 +18,6 @@ $accent-color: #03b381; $accent-bg-color: rgba(3, 179, 129, 0.16); $notice-primary-color: #ff4b55; $notice-primary-bg-color: rgba(255, 75, 85, 0.16); -$notice-secondary-color: #61708b; $header-panel-bg-color: #f3f8fd; // typical text (dark-on-white in light skin) @@ -53,10 +52,6 @@ $info-bg-color: #2a9edf; $mention-user-pill-bg-color: $warning-color; $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 $info-plinth-bg-color: #f7f7f7; $info-plinth-fg-color: #888; @@ -95,8 +90,6 @@ $input-focused-border-color: #238cf5; $input-valid-border-color: $accent-color; $input-invalid-border-color: $warning-color; -$field-focused-label-bg-color: #ffffff; - $resend-button-divider-color: $input-darker-bg-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-bg-color: $header-panel-bg-color; $roomlist-header-color: $primary-fg-color; -$roomsublist-divider-color: $primary-fg-color; $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-selected-bg-color: #fff; @@ -338,10 +327,7 @@ $breadcrumb-placeholder-bg-color: #e8eef5; $voice-record-stop-symbol-color: #ff4b55; $voice-record-live-circle-color: #ff4b55; $voice-record-stop-border-color: #E3E8F0; -$voice-record-waveform-incomplete-fg-color: #C1C6CD; $voice-record-icon-color: $tertiary-fg-color; -$voice-playback-button-bg-color: $system; -$voice-playback-button-fg-color: $secondary-content; // FontSlider colors $appearance-tab-border-color: $input-darker-bg-color; @@ -355,6 +341,12 @@ $eventbubble-bg-hover: #FAFBFD; $eventbubble-avatar-outline: #fff; $eventbubble-reply-color: #C1C6CD; +// pinned events indicator +$pinned-unread-color: $notice-primary-color; +$pinned-color: $tertiary-content; + +$groupFilterPanel-divider-color: $tertiary-content; + // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index 99cfc4148b..2fbb91c523 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -52,7 +52,6 @@ $accent-color-50pct: var(--accent-color-50pct); //still needs alpha at .5 // --timeline-background-color $authpage-body-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); $menu-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 $authpage-primary-color: var(--timeline-text-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); // @@ -112,12 +109,10 @@ $roomtile-default-badge-bg-color: var(--roomlist-text-secondary-color); $input-darker-bg-color: var(--roomlist-separator-color); $panel-divider-color: var(--roomlist-separator-color);// originally #dee1f3, 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 $authpage-secondary-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); $settings-subsection-fg-color: var(--timeline-text-secondary-color); $roomheader-addroom-bg-color: var(--timeline-text-secondary-color); diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index d8088c9988..1733831b95 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -101,8 +101,6 @@ $input-focused-border-color: #238cf5; $input-valid-border-color: $accent-color; $input-invalid-border-color: $warning-color; -$field-focused-label-bg-color: $background; - $button-bg-color: $accent-color; $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-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%); -$groupFilterPanel-divider-color: $roomlist-header-color; - -$roomtile-preview-color: $secondary-content; $roomtile-default-badge-bg-color: #61708b; $presence-online: $accent-color; @@ -210,13 +203,11 @@ $username-variant6-color: #2dc2c5; $username-variant7-color: #5c56f5; $username-variant8-color: #74d12c; -$notice-secondary-color: $roomlist-header-color; - $panel-divider-color: transparent; // pinned events indicator $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-stop-border-color: $quinary-content; -$voice-record-waveform-incomplete-fg-color: $quaternary-content; $voice-record-icon-color: $tertiary-content; -$voice-playback-button-bg-color: $system; -$voice-playback-button-fg-color: $secondary-content; // FontSlider colors $appearance-tab-border-color: $input-darker-bg-color;