diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss index 313a4b32cf..f0f60f26bb 100644 --- a/res/css/structures/_GroupView.scss +++ b/res/css/structures/_GroupView.scss @@ -56,7 +56,7 @@ limitations under the License. position: absolute; height: 20px; width: 20px; - background-color: $groupheader-button-color; + background-color: $header-panel-text-primary-color; mask-repeat: no-repeat; mask-size: contain; } diff --git a/res/css/structures/_HeaderButtons.scss b/res/css/structures/_HeaderButtons.scss index 72b663ef0e..2d26e66c1c 100644 --- a/res/css/structures/_HeaderButtons.scss +++ b/res/css/structures/_HeaderButtons.scss @@ -28,7 +28,7 @@ limitations under the License. .mx_HeaderButtons::before { content: ""; - background-color: $header-divider-color; + background-color: $header-panel-text-primary-color; opacity: 0.5; margin: 6px 8px; border-radius: 1px; diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index 38a1fe9099..c9df59fbdf 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -229,7 +229,7 @@ $pulse-color: $alert; margin: 11px auto 29px auto; height: 42px; width: 42px; - background-color: $rightpanel-button-color; + background-color: $header-panel-text-primary-color; mask-repeat: no-repeat; mask-size: contain; mask-position: center; diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss index c7d3acfdbf..3776f5dc4a 100644 --- a/res/css/structures/_TabbedView.scss +++ b/res/css/structures/_TabbedView.scss @@ -49,7 +49,7 @@ limitations under the License. } .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before { - background-color: $tab-label-active-icon-bg-color; + background-color: $tab-label-active-fg-color; } .mx_TabbedView_maskedIcon { diff --git a/res/css/views/messages/_CreateEvent.scss b/res/css/views/messages/_CreateEvent.scss index cb2bf841dd..b3f1ad4e4d 100644 --- a/res/css/views/messages/_CreateEvent.scss +++ b/res/css/views/messages/_CreateEvent.scss @@ -16,7 +16,7 @@ limitations under the License. .mx_CreateEvent { &::before { - background-color: $composer-e2e-icon-color; + background-color: $header-panel-text-primary-color; mask-image: url('$(res)/img/element-icons/chat-bubbles.svg'); } } diff --git a/res/css/views/messages/_MJitsiWidgetEvent.scss b/res/css/views/messages/_MJitsiWidgetEvent.scss index bea8651543..6360d089fa 100644 --- a/res/css/views/messages/_MJitsiWidgetEvent.scss +++ b/res/css/views/messages/_MJitsiWidgetEvent.scss @@ -16,7 +16,7 @@ limitations under the License. .mx_MJitsiWidgetEvent { &::before { - background-color: $composer-e2e-icon-color; // XXX: Variable abuse + background-color: $header-panel-text-primary-color; // XXX: Variable abuse mask-image: url('$(res)/img/element-icons/call/video-call.svg'); } } diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss index 6de3f45f02..5938f4fcb9 100644 --- a/res/css/views/messages/_common_CryptoEvent.scss +++ b/res/css/views/messages/_common_CryptoEvent.scss @@ -26,7 +26,7 @@ limitations under the License. &.mx_cryptoEvent_icon::after { mask-image: url('$(res)/img/e2e/normal.svg'); - background-color: $composer-e2e-icon-color; + background-color: $header-panel-text-primary-color; } &.mx_cryptoEvent_icon_verified::after { diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss index 305ab824eb..bed4c68142 100644 --- a/res/css/views/right_panel/_BaseCard.scss +++ b/res/css/views/right_panel/_BaseCard.scss @@ -51,7 +51,7 @@ limitations under the License. left: 0; mask-repeat: no-repeat; mask-position: center; - background-color: $rightpanel-button-color; + background-color: $header-panel-text-primary-color; } } diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss index 1a6c615090..e1a3fce9ee 100644 --- a/res/css/views/right_panel/_UserInfo.scss +++ b/res/css/views/right_panel/_UserInfo.scss @@ -40,7 +40,7 @@ limitations under the License. mask-image: url('$(res)/img/minimise.svg'); mask-repeat: no-repeat; mask-position: 7px center; - background-color: $rightpanel-button-color; + background-color: $header-panel-text-primary-color; } } diff --git a/res/css/views/rooms/_E2EIcon.scss b/res/css/views/rooms/_E2EIcon.scss index 67916767b6..46809df00a 100644 --- a/res/css/views/rooms/_E2EIcon.scss +++ b/res/css/views/rooms/_E2EIcon.scss @@ -70,7 +70,7 @@ limitations under the License. .mx_E2EIcon_normal::after { mask-image: url('$(res)/img/e2e/normal.svg'); - background-color: $composer-e2e-icon-color; + background-color: $header-panel-text-primary-color; } .mx_E2EIcon_verified::after { diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss index 23a5ffc99f..10c8799413 100644 --- a/res/css/views/rooms/_EntityTile.scss +++ b/res/css/views/rooms/_EntityTile.scss @@ -43,7 +43,7 @@ limitations under the License. mask-repeat: no-repeat; width: 16px; height: 16px; - background-color: $rightpanel-button-color; + background-color: $header-panel-text-primary-color; } .mx_EntityTile .mx_PresenceLabel { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index f7b5570956..8c0960b0d0 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -443,7 +443,7 @@ $left-gutter: 64px; .mx_EventTile_e2eIcon_normal { &::after { mask-image: url('$(res)/img/e2e/normal.svg'); - background-color: $composer-e2e-icon-color; + background-color: $header-panel-text-primary-color; } opacity: 1; } diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss index 4abd9c7c30..b0583ee94e 100644 --- a/res/css/views/rooms/_MemberInfo.scss +++ b/res/css/views/rooms/_MemberInfo.scss @@ -39,7 +39,7 @@ limitations under the License. mask-image: url('$(res)/img/minimise.svg'); mask-repeat: no-repeat; mask-position: 16px center; - background-color: $rightpanel-button-color; + background-color: $header-panel-text-primary-color; } .mx_MemberInfo_name h2 { diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index 36472beae8..642f548b35 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -137,13 +137,6 @@ limitations under the License. animation: 0.2s visualbell; } -.mx_MessageComposer_input blockquote { - color: $blockquote-fg-color; - margin: 0 0 16px; - padding: 0 15px; - border-left: 4px solid $blockquote-bar-color; -} - .mx_MessageComposer_input pre { background-color: $rte-code-bg-color; border-radius: 3px; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 3716c67db1..dca852db2f 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -48,11 +48,6 @@ $h3-color: $primary-content; $focus-bg-color: $room-highlight-color; $roomtopic-color: $text-secondary-color; $light-fg-color: $header-panel-text-secondary-color; -$composer-e2e-icon-color: $header-panel-text-primary-color; -$header-divider-color: $header-panel-text-primary-color; -$groupFilterPanel-button-color: $header-panel-text-primary-color; -$groupheader-button-color: $header-panel-text-primary-color; -$rightpanel-button-color: $header-panel-text-primary-color; $muted-fg-color: $header-panel-text-primary-color; $info-plinth-bg-color: $header-panel-bg-color; $dark-panel-bg-color: $header-panel-bg-color; @@ -79,7 +74,6 @@ $input-border-color: rgba(231, 231, 231, 0.2); $input-darker-bg-color: #181b21; $input-darker-fg-color: #61708b; $input-lighter-bg-color: #f2f5f8; -$input-focused-border-color: #238cf5; // ******************** // Menu @@ -122,7 +116,6 @@ $widget-body-bg-color: rgba(141, 151, 165, 0.2); // ******************** $tab-label-fg-color: $primary-content; $tab-label-active-fg-color: $primary-content; -$tab-label-active-icon-bg-color: $primary-content; // ******************** // Buttons diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index 894b138695..3539e2054d 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -86,15 +86,9 @@ $settings-subsection-fg-color: $text-secondary-color; $topleftmenu-color: $text-primary-color; $roomheader-addroom-bg-color: #3c4556; $roomheader-addroom-fg-color: $text-primary-color; -$groupFilterPanel-button-color: $header-panel-text-primary-color; -$groupheader-button-color: $header-panel-text-primary-color; -$rightpanel-button-color: $header-panel-text-primary-color; $icon-button-color: $header-panel-text-primary-color; $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; @@ -148,7 +142,6 @@ $event-timestamp-color: $text-secondary-color; // Tabbed views $tab-label-fg-color: $text-primary-color; $tab-label-active-fg-color: $text-primary-color; -$tab-label-active-icon-bg-color: $text-primary-color; // Buttons $button-primary-fg-color: #ffffff; diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 703cc9a917..1d05dec11b 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -112,7 +112,6 @@ $neutral-badge-color: #dbdbdb; $preview-widget-bar-color: #ddd; $blockquote-bar-color: #ddd; -$blockquote-fg-color: #777; $settings-grey-fg-color: #a2a2a2; $settings-profile-overlay-placeholder-fg-color: #2e2f32; @@ -124,19 +123,15 @@ $rte-code-bg-color: rgba(0, 0, 0, 0.04); $rte-room-pill-color: #aaa; $rte-group-pill-color: #aaa; +$header-panel-text-primary-color: #91a1c0; + $topleftmenu-color: #212121; $roomheader-bg-color: $primary-bg-color; $roomheader-addroom-bg-color: #91a1c0; $roomheader-addroom-fg-color: $accent-fg-color; -$groupFilterPanel-button-color: #91a1c0; -$groupheader-button-color: #91a1c0; -$rightpanel-button-color: #91a1c0; $icon-button-color: #91a1c0; $roomtopic-color: #9e9e9e; -$composer-e2e-icon-color: #91a1c0; -$header-divider-color: #91a1c0; - // ******************** $theme-button-bg-color: #e3e8f0; @@ -230,7 +225,6 @@ $lightbox-border-color: #ffffff; // Tabbed views $tab-label-fg-color: #45474a; $tab-label-active-fg-color: #ffffff; -$tab-label-active-icon-bg-color: $tab-label-active-fg-color; // Buttons $button-primary-fg-color: #ffffff; diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index 106eb9209d..02815eee5b 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -101,8 +101,6 @@ $settings-subsection-fg-color: var(--timeline-text-secondary-color); $roomheader-addroom-bg-color: var(--timeline-text-secondary-color); // was #747474 $light-fg-color: var(--timeline-text-secondary-color); -// was #777777 -$blockquote-fg-color: var(--timeline-text-secondary-color); // was #888888 $greyed-fg-color: var(--timeline-text-secondary-color); $info-plinth-fg-color: var(--timeline-text-secondary-color); diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 8a88427335..67e15e58a2 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -53,6 +53,7 @@ $icon-button-color: $quaternary-content; // Colors that aren't in Figma - we need to get rid of these // ******************** +$header-panel-text-primary-color: #91A1C0; $muted-fg-color: #61708b; $light-fg-color: #747474; $focus-bg-color: #dddddd; @@ -72,12 +73,7 @@ $strong-input-border-color: #c7c7c7; $neutral-badge-color: #dbdbdb; $preview-widget-bar-color: #ddd; $topleftmenu-color: #212121; -$groupFilterPanel-button-color: #91A1C0; -$groupheader-button-color: #91A1C0; -$rightpanel-button-color: #91A1C0; $roomtopic-color: #9e9e9e; -$composer-e2e-icon-color: #91A1C0; -$header-divider-color: #91A1C0; $groupFilterPanel-bg-color: rgba(232, 232, 232, 0.77); $progressbar-bg-color: rgba(141, 151, 165, 0.2); $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); @@ -91,7 +87,6 @@ $memberstatus-placeholder-color: $muted-fg-color; // Blockquote // ******************** $blockquote-bar-color: #ddd; -$blockquote-fg-color: #777; // ******************** // Tooltip @@ -103,13 +98,13 @@ $tooltip-timeline-fg-color: $background; // Widget // ******************** $widget-menu-bar-bg-color: $secondary-accent-color; -$widget-body-bg-color: #FFF; +$widget-body-bg-color: $background; // ******************** // Menu // ******************** $menu-border-color: #e7e7e7; -$menu-bg-color: #fff; +$menu-bg-color: $system; $menu-box-shadow-color: rgba(118, 131, 156, 0.6); $menu-selected-color: #f5f8fa; // ******************** @@ -119,7 +114,7 @@ $menu-selected-color: #f5f8fa; $settings-grey-fg-color: #a2a2a2; $settings-profile-overlay-placeholder-fg-color: #2e2f32; $settings-profile-button-bg-color: #e7e7e7; -$settings-subsection-fg-color: #61708b; +$settings-subsection-fg-color: $muted-fg-color; // ******************** // RoomHeader @@ -150,7 +145,7 @@ $input-border-color: #e7e7e7; $input-darker-bg-color: $quinary-content; $input-darker-fg-color: #9fa9ba; $input-lighter-bg-color: #f2f5f8; -$input-focused-border-color: #238cf5; +$input-focused-border-color: $accent-alt; // ******************** // Dialog @@ -173,7 +168,7 @@ $imagebody-giflabel-color: rgba(255, 255, 255, 1); $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); $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%); -$roomtile-default-badge-bg-color: #61708b; +$roomtile-default-badge-bg-color: $muted-fg-color; // ******************** // e2e @@ -188,12 +183,11 @@ $e2e-warning-color: #ba6363; // ******************** $tab-label-fg-color: #45474a; $tab-label-active-fg-color: $background; -$tab-label-active-icon-bg-color: $tab-label-active-fg-color; // ******************** // Buttons // ******************** -$button-primary-fg-color: #ffffff; +$button-primary-fg-color: $background; $button-secondary-bg-color: $accent-fg-color; $button-danger-fg-color: $background; $button-danger-disabled-fg-color: $background; @@ -203,7 +197,7 @@ $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color // Toggle switch // ******************** $togglesw-off-color: #c1c9d6; -$togglesw-ball-color: #fff; +$togglesw-ball-color: $background; // ******************** // Authpage @@ -213,7 +207,7 @@ $authpage-modal-bg-color: rgba(245, 245, 245, 0.90); $authpage-focus-bg-color: #dddddd; $authpage-lang-color: #4e5054; $authpage-primary-color: #232f32; -$authpage-secondary-color: #61708b; +$authpage-secondary-color: $muted-fg-color; // ******************** // Message action bar @@ -251,7 +245,7 @@ $eventbubble-reply-color: $quaternary-content; // Lightbox // ******************** -$lightbox-fg-color: #ffffff; +$lightbox-fg-color: $background; $lightbox-background-bg-color: #000; $lightbox-background-bg-opacity: 0.95; // ********************