diff --git a/res/css/_common.scss b/res/css/_common.scss index 3663b087c8..62d02388bb 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -221,7 +221,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], .mx_textinput { - color: $input-lighter-fg-color; + color: $input-darker-fg-color; background-color: $input-lighter-bg-color; border: none; } diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index a96e8a7e76..51d7693cff 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -104,7 +104,7 @@ limitations under the License. } $dot-size: 8px; -$pulse-color: $pinned-unread-color; +$pulse-color: $notice-primary-color; .mx_RightPanel_pinnedMessagesButton { &::before { diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss index e185197f25..0749783b7b 100644 --- a/res/css/structures/_TabbedView.scss +++ b/res/css/structures/_TabbedView.scss @@ -44,7 +44,7 @@ limitations under the License. } .mx_TabbedView_tabLabel_active { - background-color: $tab-label-active-bg-color; + background-color: $accent-color; color: $tab-label-active-fg-color; } diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index 3c2736459a..d27137eb25 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/res/css/views/auth/_AuthBody.scss @@ -19,7 +19,7 @@ limitations under the License. width: 500px; font-size: $font-12px; color: $authpage-secondary-color; - background-color: $authpage-body-bg-color; + background-color: $background; border-radius: 0 4px 4px 0; padding: 25px 60px; box-sizing: border-box; @@ -55,7 +55,7 @@ limitations under the License. .mx_Field input, .mx_Field select { color: $authpage-primary-color; - background-color: $authpage-body-bg-color; + background-color: $background; } .mx_Field_labelAlwaysTopLeft label, @@ -64,7 +64,7 @@ limitations under the License. .mx_Field input:not(:placeholder-shown) + label, .mx_Field textarea:focus + label, .mx_Field textarea:not(:placeholder-shown) + label { - background-color: $authpage-body-bg-color; + background-color: $background; } input.error { @@ -88,7 +88,7 @@ limitations under the License. } .mx_Dropdown_menu { - background-color: $authpage-body-bg-color; + background-color: $background; .mx_Dropdown_option_highlight { background-color: $authpage-focus-bg-color; diff --git a/res/css/views/auth/_CompleteSecurityBody.scss b/res/css/views/auth/_CompleteSecurityBody.scss index 46b7abe2cc..c23f53bd21 100644 --- a/res/css/views/auth/_CompleteSecurityBody.scss +++ b/res/css/views/auth/_CompleteSecurityBody.scss @@ -18,7 +18,7 @@ limitations under the License. .mx_CompleteSecurityBody { width: 600px; color: $authpage-primary-color; - background-color: $authpage-body-bg-color; + background-color: $background; border-radius: 4px; padding: 20px; box-sizing: border-box; diff --git a/res/css/views/avatars/_BaseAvatar.scss b/res/css/views/avatars/_BaseAvatar.scss index cbddd97e18..486958887e 100644 --- a/res/css/views/avatars/_BaseAvatar.scss +++ b/res/css/views/avatars/_BaseAvatar.scss @@ -43,5 +43,5 @@ limitations under the License. object-fit: cover; border-radius: 125px; vertical-align: top; - background-color: $avatar-bg-color; + background-color: $background; } diff --git a/res/css/views/avatars/_DecoratedRoomAvatar.scss b/res/css/views/avatars/_DecoratedRoomAvatar.scss index 4922068462..ec6d99c04d 100644 --- a/res/css/views/avatars/_DecoratedRoomAvatar.scss +++ b/res/css/views/avatars/_DecoratedRoomAvatar.scss @@ -56,7 +56,7 @@ limitations under the License. } .mx_DecoratedRoomAvatar_icon_online::before { - background-color: $presence-online; + background-color: $accent-color; } .mx_DecoratedRoomAvatar_icon_away::before { diff --git a/res/css/views/dialogs/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.scss index da8ce3de5b..b90649fa24 100644 --- a/res/css/views/dialogs/_ForwardDialog.scss +++ b/res/css/views/dialogs/_ForwardDialog.scss @@ -138,7 +138,7 @@ limitations under the License. } &.mx_ForwardList_sending .mx_ForwardList_sendIcon { - background-color: $button-primary-bg-color; + background-color: $accent-color; mask-image: url('$(res)/img/element-icons/circle-sending.svg'); mask-position: center; mask-repeat: no-repeat; @@ -148,7 +148,7 @@ limitations under the License. } &.mx_ForwardList_sent .mx_ForwardList_sendIcon { - background-color: $button-primary-bg-color; + background-color: $accent-color; mask-image: url('$(res)/img/element-icons/circle-sent.svg'); mask-position: center; mask-repeat: no-repeat; diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss index b239b7356b..becf4dba04 100644 --- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss +++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss @@ -100,18 +100,18 @@ limitations under the License. } .mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid { - color: $input-valid-border-color; + color: $accent-color; &::before { mask-image: url('$(res)/img/feather-customised/check.svg'); - background-color: $input-valid-border-color; + background-color: $accent-color; } } .mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid { - color: $input-invalid-border-color; + color: $warning-color; &::before { mask-image: url('$(res)/img/feather-customised/x.svg'); - background-color: $input-invalid-border-color; + background-color: $warning-color; } } diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss index 93cecd8676..2f9b549901 100644 --- a/res/css/views/directory/_NetworkDropdown.scss +++ b/res/css/views/directory/_NetworkDropdown.scss @@ -108,7 +108,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-image: url('$(res)/img/feather-customised/check.svg'); - background-color: $input-valid-border-color; + background-color: $accent-color; } } } diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss index c39fdb5f49..2960d4d74b 100644 --- a/res/css/views/elements/_AccessibleButton.scss +++ b/res/css/views/elements/_AccessibleButton.scss @@ -35,15 +35,15 @@ limitations under the License. .mx_AccessibleButton_kind_primary { color: $button-primary-fg-color; - background-color: $button-primary-bg-color; - border: 1px solid $button-primary-bg-color; // account for size loss of no border + background-color: $accent-color; + border: 1px solid $accent-color; // account for size loss of no border font-weight: 600; } .mx_AccessibleButton_kind_primary_outline { - color: $button-primary-bg-color; + color: $accent-color; background-color: $button-secondary-bg-color; - border: 1px solid $button-primary-bg-color; + border: 1px solid $accent-color; font-weight: 600; } @@ -60,7 +60,7 @@ limitations under the License. .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm { padding: 5px 12px; color: $button-primary-fg-color; - background-color: $button-primary-bg-color; + background-color: $accent-color; } .mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled { @@ -69,13 +69,13 @@ limitations under the License. .mx_AccessibleButton_kind_danger { color: $button-danger-fg-color; - background-color: $button-danger-bg-color; + background-color: $notice-primary-color; } .mx_AccessibleButton_kind_danger_outline { - color: $button-danger-bg-color; + color: $notice-primary-color; background-color: transparent; - border: 1px solid $button-danger-bg-color; + border: 1px solid $notice-primary-color; } .mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled { @@ -91,7 +91,7 @@ limitations under the License. .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm { padding: 5px 12px; color: $button-danger-fg-color; - background-color: $button-danger-bg-color; + background-color: $notice-primary-color; } .mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled { @@ -100,7 +100,7 @@ limitations under the License. } .mx_AccessibleButton_kind_link { - color: $button-link-fg-color; + color: $accent-color; background-color: $button-link-bg-color; } @@ -110,7 +110,7 @@ limitations under the License. .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm { padding: 5px 12px; - color: $button-link-fg-color; + color: $accent-color; background-color: $button-link-bg-color; } @@ -119,7 +119,7 @@ limitations under the License. } .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_confirm_sm { - background-color: $button-primary-bg-color; + background-color: $accent-color; &::before { mask-image: url('$(res)/img/feather-customised/check.svg'); @@ -127,7 +127,7 @@ limitations under the License. } .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_cancel_sm { - background-color: $button-danger-bg-color; + background-color: $notice-primary-color; &::before { mask-image: url('$(res)/img/feather-customised/x.svg'); diff --git a/res/css/views/elements/_DirectorySearchBox.scss b/res/css/views/elements/_DirectorySearchBox.scss index e4b1ac5574..941a765a29 100644 --- a/res/css/views/elements/_DirectorySearchBox.scss +++ b/res/css/views/elements/_DirectorySearchBox.scss @@ -25,7 +25,7 @@ limitations under the License. padding: 3px; padding-left: 10px; padding-right: 10px; - background-color: $plinth-bg-color; + background-color: $secondary-accent-color; border-radius: 3px; background-image: url('$(res)/img/icon-return.svg'); background-position: 8px 70%; diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index 1d4fc2b003..b6a692c951 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -152,24 +152,24 @@ limitations under the License. .mx_Field_valid { &.mx_Field, &.mx_Field:focus-within { - border-color: $input-valid-border-color; + border-color: $accent-color; } &.mx_Field label, &.mx_Field:focus-within label { - color: $input-valid-border-color; + color: $accent-color; } } .mx_Field_invalid { &.mx_Field, &.mx_Field:focus-within { - border-color: $input-invalid-border-color; + border-color: $warning-color; } &.mx_Field label, &.mx_Field:focus-within label { - color: $input-invalid-border-color; + color: $warning-color; } } diff --git a/res/css/views/elements/_ProgressBar.scss b/res/css/views/elements/_ProgressBar.scss index c075ac74ff..f16163c87c 100644 --- a/res/css/views/elements/_ProgressBar.scss +++ b/res/css/views/elements/_ProgressBar.scss @@ -22,7 +22,7 @@ progress.mx_ProgressBar { border: none; @mixin ProgressBarBorderRadius 6px; - @mixin ProgressBarColour $progressbar-fg-color; + @mixin ProgressBarColour $accent-color; @mixin ProgressBarBgColour $progressbar-bg-color; ::-webkit-progress-value { transition: width 1s; diff --git a/res/css/views/elements/_ReplyChain.scss b/res/css/views/elements/_ReplyChain.scss index c6b9c2bbaa..587dbdfdfe 100644 --- a/res/css/views/elements/_ReplyChain.scss +++ b/res/css/views/elements/_ReplyChain.scss @@ -20,7 +20,7 @@ limitations under the License. margin-right: 0; margin-bottom: 8px; padding: 0 10px; - border-left: 2px solid $button-bg-color; + border-left: 2px solid $accent-color; border-radius: 2px; .mx_ReplyChain_show { diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss index 1043fd08d1..ae60b9a2f6 100644 --- a/res/css/views/elements/_RichText.scss +++ b/res/css/views/elements/_RichText.scss @@ -57,7 +57,7 @@ a.mx_Pill { .mx_EventTile_content .mx_AtRoomPill, .mx_MessageComposer_input .mx_AtRoomPill { color: $accent-fg-color; - background-color: $mention-user-pill-bg-color; + background-color: $warning-color; } /* More specific to override `.markdown-body a` color */ diff --git a/res/css/views/elements/_SSOButtons.scss b/res/css/views/elements/_SSOButtons.scss index a98e7b4024..a14998259d 100644 --- a/res/css/views/elements/_SSOButtons.scss +++ b/res/css/views/elements/_SSOButtons.scss @@ -46,13 +46,13 @@ limitations under the License. } .mx_SSOButton_default { - color: $button-primary-bg-color; + color: $accent-color; background-color: $button-secondary-bg-color; - border-color: $button-primary-bg-color; + border-color: $accent-color; } .mx_SSOButton_default.mx_SSOButton_primary { color: $button-primary-fg-color; - background-color: $button-primary-bg-color; + background-color: $accent-color; } .mx_SSOButton_mini { diff --git a/res/css/views/elements/_Slider.scss b/res/css/views/elements/_Slider.scss index 3cfc14ab46..66393405bb 100644 --- a/res/css/views/elements/_Slider.scss +++ b/res/css/views/elements/_Slider.scss @@ -56,7 +56,7 @@ limitations under the License. position: absolute; width: $slider-selection-dot-size; height: $slider-selection-dot-size; - background-color: $slider-selection-color; + background-color: $accent-color; border-radius: 50%; z-index: 10; } @@ -72,7 +72,7 @@ limitations under the License. .mx_Slider_selection > hr { margin: 0; - border: 0.2em solid $slider-selection-color; + border: 0.2em solid $accent-color; } .mx_Slider_dot { @@ -84,7 +84,7 @@ limitations under the License. } .mx_Slider_dotActive { - background-color: $slider-selection-color; + background-color: $accent-color; } .mx_Slider_dotValue { diff --git a/res/css/views/elements/_ToggleSwitch.scss b/res/css/views/elements/_ToggleSwitch.scss index 62669889ee..2695e72d6d 100644 --- a/res/css/views/elements/_ToggleSwitch.scss +++ b/res/css/views/elements/_ToggleSwitch.scss @@ -32,7 +32,7 @@ limitations under the License. } .mx_ToggleSwitch.mx_ToggleSwitch_on { - background-color: $togglesw-on-color; + background-color: $accent-color; > .mx_ToggleSwitch_ball { left: calc(100% - $font-20px); diff --git a/res/css/views/elements/_Validation.scss b/res/css/views/elements/_Validation.scss index 1f9bd880e6..94de00185e 100644 --- a/res/css/views/elements/_Validation.scss +++ b/res/css/views/elements/_Validation.scss @@ -50,20 +50,20 @@ limitations under the License. } &.mx_Validation_valid { - color: $input-valid-border-color; + color: $accent-color; &::before { mask-image: url('$(res)/img/feather-customised/check.svg'); - background-color: $input-valid-border-color; + background-color: $accent-color; } } &.mx_Validation_invalid { - color: $input-invalid-border-color; + color: $warning-color; &::before { mask-image: url('$(res)/img/feather-customised/x.svg'); - background-color: $input-invalid-border-color; + background-color: $warning-color; } } } diff --git a/res/css/views/emojipicker/_EmojiPicker.scss b/res/css/views/emojipicker/_EmojiPicker.scss index 91c68158c9..67ff7b4f64 100644 --- a/res/css/views/emojipicker/_EmojiPicker.scss +++ b/res/css/views/emojipicker/_EmojiPicker.scss @@ -52,7 +52,7 @@ limitations under the License. &:not(:disabled):hover { background-color: $focus-bg-color; - border-bottom: 2px solid $button-bg-color; + border-bottom: 2px solid $accent-color; } } @@ -82,7 +82,7 @@ limitations under the License. .mx_EmojiPicker_anchor_symbols::before { mask-image: url('$(res)/img/emojipicker/symbols.svg'); } .mx_EmojiPicker_anchor_visible { - border-bottom: 2px solid $button-bg-color; + border-bottom: 2px solid $accent-color; } .mx_EmojiPicker_search { @@ -178,7 +178,7 @@ limitations under the License. .mx_EmojiPicker_item_selected { color: rgba(0, 0, 0, .5); - border: 1px solid $input-valid-border-color; + border: 1px solid $accent-color; padding: 4px; } diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss index 752d3b0a54..a09078aa6d 100644 --- a/res/css/views/rooms/_BasicMessageComposer.scss +++ b/res/css/views/rooms/_BasicMessageComposer.scss @@ -54,7 +54,7 @@ limitations under the License. width: $font-16px; height: $font-16px; margin-right: 0.24rem; - background: var(--avatar-background), $avatar-bg-color; + background: var(--avatar-background), $background; color: $avatar-initial-color; background-repeat: no-repeat; background-size: $font-16px; diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index faeb91da3e..15bfa7424d 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -43,7 +43,7 @@ limitations under the License. background-color: $event-highlight-bg-color; } - color: $event-highlight-fg-color; + color: $warning-color; } /* For replies */ diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 8665d7abad..002ff1540c 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -128,7 +128,7 @@ $left-gutter: 64px; &.mx_EventTile_highlight, &.mx_EventTile_highlight .markdown-body { - color: $event-highlight-fg-color; + color: $warning-color; .mx_EventTile_line { background-color: $event-highlight-bg-color; diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss index 24900ee14b..b874f753ae 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -21,7 +21,7 @@ limitations under the License. display: flex; border-left: 2px solid $preview-widget-bar-color; border-radius: 2px; - color: $preview-widget-fg-color; + color: $greyed-fg-color; } .mx_LinkPreviewWidget_image { diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss index 075e9ff585..cf128ebf36 100644 --- a/res/css/views/rooms/_MemberList.scss +++ b/res/css/views/rooms/_MemberList.scss @@ -86,7 +86,7 @@ limitations under the License. .mx_MemberList_invite { flex: 0 0 auto; position: relative; - background-color: $button-bg-color; + background-color: $accent-color; border-radius: 4px; margin: 5px 9px 9px; display: flex; diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index 3db4c7bce2..e1c9bf41a4 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -282,7 +282,7 @@ limitations under the License. width: 32px; height: 32px; border-radius: 100%; - background-color: $button-bg-color; + background-color: $accent-color; &::before { position: absolute; diff --git a/res/css/views/rooms/_Stickers.scss b/res/css/views/rooms/_Stickers.scss index da86797f42..b582c7efaf 100644 --- a/res/css/views/rooms/_Stickers.scss +++ b/res/css/views/rooms/_Stickers.scss @@ -42,7 +42,7 @@ .mx_Stickers_addLink { display: inline; cursor: pointer; - color: $button-link-fg-color; + color: $accent-color; } .mx_Stickers_hideStickers { diff --git a/res/css/views/settings/_AvatarSetting.scss b/res/css/views/settings/_AvatarSetting.scss index 9b2bd328cc..ab5afbcd3f 100644 --- a/res/css/views/settings/_AvatarSetting.scss +++ b/res/css/views/settings/_AvatarSetting.scss @@ -123,7 +123,7 @@ limitations under the License. mask-repeat: no-repeat; mask-position: center; mask-size: 55%; - background-color: $settings-profile-button-fg-color; + background-color: $settings-profile-overlay-placeholder-fg-color; mask-image: url('$(res)/img/feather-customised/edit.svg'); } } diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 865eb4de43..9cb768a6ac 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -38,7 +38,6 @@ $light-fg-color: $header-panel-text-secondary-color; // used for focusing form controls $focus-bg-color: $room-highlight-color; -$mention-user-pill-bg-color: $warning-color; $other-user-pill-bg-color: $room-highlight-color; $rte-room-pill-color: $room-highlight-color; $rte-group-pill-color: $room-highlight-color; @@ -66,10 +65,7 @@ $input-border-color: rgba(231, 231, 231, 0.2); $input-darker-bg-color: $search-bg-color; $input-darker-fg-color: $search-placeholder-color; $input-lighter-bg-color: #f2f5f8; -$input-lighter-fg-color: $input-darker-fg-color; $input-focused-border-color: #238cf5; -$input-valid-border-color: $accent-color; -$input-invalid-border-color: $warning-color; $resend-button-divider-color: #b9bec64a; // muted-text with a 4A opacity. @@ -84,7 +80,6 @@ $menu-box-shadow-color: $background; $menu-selected-color: $room-highlight-color; $avatar-initial-color: #ffffff; -$avatar-bg-color: $background; $h3-color: $primary-content; @@ -93,14 +88,12 @@ $dialog-backdrop-color: #000; $dialog-shadow-color: rgba(0, 0, 0, 0.48); $dialog-close-fg-color: #9fa9ba; -$dialog-background-bg-color: $header-panel-bg-color; $lightbox-background-bg-color: #000; $lightbox-background-bg-opacity: 0.85; $settings-grey-fg-color: #a2a2a2; $settings-profile-overlay-placeholder-fg-color: #454545; $settings-profile-button-bg-color: #e7e7e7; -$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color; $settings-subsection-fg-color: $text-secondary-color; $topleftmenu-color: $primary-content; @@ -137,7 +130,6 @@ $widget-body-bg-color: rgba(141, 151, 165, 0.2); $event-redacted-fg-color: #606060; $event-redacted-border-color: #000000; -$event-highlight-fg-color: $warning-color; $event-highlight-bg-color: #25271F; // event timestamp @@ -147,19 +139,15 @@ $event-timestamp-color: $text-secondary-color; $tab-label-fg-color: $primary-content; $tab-label-active-fg-color: $primary-content; $tab-label-bg-color: transparent; -$tab-label-active-bg-color: $accent-color; $tab-label-icon-bg-color: $primary-content; $tab-label-active-icon-bg-color: $primary-content; // Buttons $button-primary-fg-color: $primary-content; -$button-primary-bg-color: $accent-color; $button-secondary-bg-color: transparent; $button-danger-fg-color: $primary-content; -$button-danger-bg-color: $notice-primary-color; $button-danger-disabled-fg-color: $primary-content; $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color -$button-link-fg-color: $accent-color; $button-link-bg-color: transparent; // Toggle switch @@ -168,14 +156,12 @@ $togglesw-off-color: $room-highlight-color; // Slider $slider-background-color: $quinary-content; -$progressbar-fg-color: $accent-color; $progressbar-bg-color: $system; $visual-bell-bg-color: #800; $room-warning-bg-color: $header-panel-bg-color; -$authpage-body-bg-color: $background; $authpage-primary-color: $primary-content; $dark-panel-bg-color: $header-panel-bg-color; @@ -231,7 +217,7 @@ $eventbubble-reply-color: #C1C6CD; font-family: $font-family; font-size: $font-14px; color: $button-fg-color; - background-color: $button-bg-color; + background-color: $accent-color; width: auto; padding: 7px; padding-left: 1.5em; diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index 5fa0e903ba..1b4890e3b5 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -23,15 +23,12 @@ $tertiary-fg-color: $primary-fg-color; $primary-bg-color: $bg-color; $muted-fg-color: $header-panel-text-primary-color; - - // used for dialog box text $light-fg-color: $header-panel-text-secondary-color; // used for focusing form controls $focus-bg-color: $room-highlight-color; -$mention-user-pill-bg-color: $warning-color; $other-user-pill-bg-color: $room-highlight-color; $rte-room-pill-color: $room-highlight-color; $rte-group-pill-color: $room-highlight-color; @@ -59,10 +56,7 @@ $input-border-color: #e7e7e7; $input-darker-bg-color: $search-bg-color; $input-darker-fg-color: $search-placeholder-color; $input-lighter-bg-color: #f2f5f8; -$input-lighter-fg-color: $input-darker-fg-color; $input-focused-border-color: #238cf5; -$input-valid-border-color: $accent-color; -$input-invalid-border-color: $warning-color; $resend-button-divider-color: $muted-fg-color; @@ -77,7 +71,6 @@ $menu-box-shadow-color: $bg-color; $menu-selected-color: $room-highlight-color; $avatar-initial-color: #ffffff; -$avatar-bg-color: $bg-color; $h3-color: $primary-fg-color; @@ -86,14 +79,12 @@ $dialog-backdrop-color: #000; $dialog-shadow-color: rgba(0, 0, 0, 0.48); $dialog-close-fg-color: #9fa9ba; -$dialog-background-bg-color: $header-panel-bg-color; $lightbox-background-bg-color: #000; $lightbox-background-bg-opacity: 0.85; $settings-grey-fg-color: #a2a2a2; $settings-profile-overlay-placeholder-fg-color: #454545; $settings-profile-button-bg-color: #e7e7e7; -$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color; $settings-subsection-fg-color: $text-secondary-color; $topleftmenu-color: $text-primary-color; @@ -133,7 +124,6 @@ $space-nav: rgba($panel-base, 0.1); $theme-button-bg-color: #e3e8f0; - $roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons $roomlist-filter-active-bg-color: $roomlist-button-bg-color; $roomlist-bg-color: $header-panel-bg-color; @@ -156,7 +146,6 @@ $widget-body-bg-color: #1A1D23; $event-redacted-fg-color: #606060; $event-redacted-border-color: #000000; -$event-highlight-fg-color: $warning-color; $event-highlight-bg-color: #25271F; // event timestamp @@ -166,25 +155,20 @@ $event-timestamp-color: $text-secondary-color; $tab-label-fg-color: $text-primary-color; $tab-label-active-fg-color: $text-primary-color; $tab-label-bg-color: transparent; -$tab-label-active-bg-color: $accent-color; $tab-label-icon-bg-color: $text-primary-color; $tab-label-active-icon-bg-color: $text-primary-color; // Buttons $button-primary-fg-color: #ffffff; -$button-primary-bg-color: $accent-color; $button-secondary-bg-color: transparent; $button-danger-fg-color: #ffffff; -$button-danger-bg-color: $notice-primary-color; $button-danger-disabled-fg-color: #ffffff; $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color -$button-link-fg-color: $accent-color; $button-link-bg-color: transparent; // Toggle switch $togglesw-off-color: $room-highlight-color; -$progressbar-fg-color: $accent-color; $progressbar-bg-color: #21262c; $visual-bell-bg-color: #800; @@ -240,7 +224,7 @@ $eventbubble-reply-color: #C1C6CD; font-family: $font-family; font-size: $font-14px; color: $button-fg-color; - background-color: $button-bg-color; + background-color: $accent-color; width: auto; padding: 7px; padding-left: 1.5em; diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 7fe5649787..b3f3869ac6 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -49,7 +49,6 @@ $orange-warning-color: #ff8d13; // used for true warnings // background colour for warnings $warning-bg-color: #df2a8b; $info-bg-color: #2a9edf; -$mention-user-pill-bg-color: $warning-color; $other-user-pill-bg-color: rgba(0, 0, 0, 0.1); // informational plinth @@ -65,9 +64,6 @@ $tertiary-accent-color: #d3efe1; $groupFilterPanel-bg-color: #27303a; $inverted-bg-color: $groupFilterPanel-bg-color; -// used by RoomDirectory permissions -$plinth-bg-color: $secondary-accent-color; - // used by RoomDropTarget $droptarget-bg-color: rgba(255, 255, 255, 0.5); @@ -85,14 +81,10 @@ $input-border-color: #e7e7e7; $input-darker-bg-color: #e3e8f0; $input-darker-fg-color: #9fa9ba; $input-lighter-bg-color: #f2f5f8; -$input-lighter-fg-color: $input-darker-fg-color; $input-focused-border-color: #238cf5; -$input-valid-border-color: $accent-color; -$input-invalid-border-color: $warning-color; $resend-button-divider-color: $input-darker-bg-color; -$button-bg-color: $accent-color; $button-fg-color: white; // apart from login forms, which have stronger border @@ -111,7 +103,6 @@ $menu-box-shadow-color: rgba(118, 131, 156, 0.6); $menu-selected-color: #f5f8fa; $avatar-initial-color: #ffffff; -$avatar-bg-color: #ffffff; $h3-color: #3d3b39; @@ -120,7 +111,6 @@ $dialog-backdrop-color: rgba(46, 48, 51, 0.38); $dialog-shadow-color: rgba(0, 0, 0, 0.48); $dialog-close-fg-color: #c1c1c1; -$dialog-background-bg-color: #e9e9e9; $lightbox-background-bg-color: #000; $lightbox-background-bg-opacity: 0.95; @@ -133,7 +123,6 @@ $greyed-fg-color: #888; $neutral-badge-color: #dbdbdb; $preview-widget-bar-color: #ddd; -$preview-widget-fg-color: $greyed-fg-color; $blockquote-bar-color: #ddd; $blockquote-fg-color: #777; @@ -141,12 +130,8 @@ $blockquote-fg-color: #777; $settings-grey-fg-color: #a2a2a2; $settings-profile-overlay-placeholder-fg-color: #2e2f32; $settings-profile-button-bg-color: #e7e7e7; -$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color; $settings-subsection-fg-color: #61708b; -$voip-decline-color: #f48080; -$voip-accept-color: #80f480; - $rte-bg-color: #e9e9e9; $rte-code-bg-color: rgba(0, 0, 0, 0.04); $rte-room-pill-color: #aaa; @@ -179,7 +164,6 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%) $roomtile-default-badge-bg-color: #61708b; $roomtile-selected-bg-color: #fff; -$presence-online: $accent-color; $presence-away: #d9b072; $presence-offline: #e3e8f0; @@ -232,7 +216,6 @@ $yellow-background: #fff8e3; // event tile lifecycle $event-notsent-color: #f44; -$event-highlight-fg-color: $warning-color; $event-highlight-bg-color: $yellow-background; // event redaction @@ -261,33 +244,26 @@ $lightbox-border-color: #ffffff; $tab-label-fg-color: #45474a; $tab-label-active-fg-color: #ffffff; $tab-label-bg-color: transparent; -$tab-label-active-bg-color: $accent-color; $tab-label-icon-bg-color: #454545; $tab-label-active-icon-bg-color: $tab-label-active-fg-color; // Buttons $button-primary-fg-color: #ffffff; -$button-primary-bg-color: $accent-color; $button-secondary-bg-color: $accent-fg-color; $button-danger-fg-color: #ffffff; -$button-danger-bg-color: $notice-primary-color; $button-danger-disabled-fg-color: #ffffff; $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color -$button-link-fg-color: $accent-color; $button-link-bg-color: transparent; $visual-bell-bg-color: #faa; // Toggle switch $togglesw-off-color: #c1c9d6; -$togglesw-on-color: $accent-color; $togglesw-ball-color: #fff; // Slider -$slider-selection-color: $accent-color; $slider-background-color: #c1c9d6; -$progressbar-fg-color: $accent-color; $progressbar-bg-color: rgba(141, 151, 165, 0.2); $room-warning-bg-color: $yellow-background; @@ -296,7 +272,6 @@ $memberstatus-placeholder-color: $muted-fg-color; $authpage-bg-color: #2e3649; $authpage-modal-bg-color: rgba(255, 255, 255, 0.59); -$authpage-body-bg-color: #ffffff; $authpage-focus-bg-color: #dddddd; $authpage-lang-color: #4e5054; $authpage-primary-color: #232f32; @@ -344,7 +319,6 @@ $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; @@ -359,7 +333,7 @@ $groupFilterPanel-divider-color: $tertiary-content; font-family: $font-family; font-size: $font-14px; color: $button-fg-color; - background-color: $button-bg-color; + background-color: $accent-color; width: auto; padding: 7px; padding-left: 1.5em; diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index 2fbb91c523..3c867c8b12 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -39,22 +39,14 @@ $space-nav: rgba($panel-base, 0.1); // --accent-color $accent-color: var(--accent-color); $accent-bg-color: var(--accent-color-15pct); -$button-bg-color: var(--accent-color); -$button-link-fg-color: var(--accent-color); -$button-primary-bg-color: var(--accent-color); -$input-valid-border-color: var(--accent-color); $reaction-row-button-selected-border-color: var(--accent-color); -$tab-label-active-bg-color: var(--accent-color); -$togglesw-on-color: var(--accent-color); $username-variant3-color: var(--accent-color); $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); $lightbox-border-color: var(--timeline-background-color); $menu-bg-color: var(--timeline-background-color); -$avatar-bg-color: var(--timeline-background-color); $message-action-bar-bg-color: var(--timeline-background-color); $background: var(--timeline-background-color); $togglesw-ball-color: var(--timeline-background-color); @@ -78,7 +70,6 @@ $panel-gradient: var(--roomlist-background-color-0pct), var(--roomlist-backgroun // these were #f2f5f8 instead of #f3f8fd, but close enough $dark-panel-bg-color: var(--roomlist-background-color); $input-lighter-bg-color: var(--roomlist-background-color); -$plinth-bg-color: var(--roomlist-background-color); $secondary-accent-color: var(--roomlist-background-color); $selected-color: var(--roomlist-background-color); $widget-menu-bar-bg-color: var(--roomlist-background-color); @@ -123,19 +114,14 @@ $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); -$preview-widget-fg-color: var(--timeline-text-secondary-color); // // --primary-color $accent-color-alt: var(--primary-color); $input-focused-border-color: var(--primary-color); // // --warning-color -$button-danger-bg-color: var(--warning-color); -$event-highlight-fg-color: var(--warning-color); -$input-invalid-border-color: var(--warning-color); -$mention-user-pill-bg-color: var(--warning-color); +$warning-color: var(--warning-color); $notice-primary-color: var(--warning-color); -$pinned-unread-color: var(--warning-color); $warning-color: var(--warning-color); $button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5 // diff --git a/res/themes/light-high-contrast/css/_light-high-contrast.scss b/res/themes/light-high-contrast/css/_light-high-contrast.scss index b1c592e1ea..7c6ebee881 100644 --- a/res/themes/light-high-contrast/css/_light-high-contrast.scss +++ b/res/themes/light-high-contrast/css/_light-high-contrast.scss @@ -24,23 +24,13 @@ $accent-color-alt: $links; $input-border-color: $secondary-content; $input-darker-bg-color: $quinary-content; $input-darker-fg-color: $secondary-content; -$input-lighter-fg-color: $input-darker-fg-color; -$input-valid-border-color: $accent-color; $input-focused-border-color: $accent-color; -$button-bg-color: $accent-color; $resend-button-divider-color: $input-darker-bg-color; $icon-button-color: $quaternary-content; $theme-button-bg-color: $quinary-content; -$presence-online: $accent-color; $presence-offline: $quinary-content; $pinned-color: $tertiary-content; -$tab-label-active-bg-color: $accent-color; -$button-primary-bg-color: $accent-color; $button-secondary-bg-color: $accent-fg-color; -$button-link-fg-color: $accent-color; -$togglesw-on-color: $accent-color; -$slider-selection-color: $accent-color; -$progressbar-fg-color: $accent-color; $message-action-bar-fg-color: $primary-content; $reaction-row-button-selected-border-color: $accent-color; $voice-record-stop-border-color: $quinary-content; @@ -49,11 +39,6 @@ $appearance-tab-border-color: $input-darker-bg-color; $eventbubble-reply-color: $quaternary-content; $notice-primary-color: $alert; $warning-color: $notice-primary-color; // red -$pinned-unread-color: $notice-primary-color; -$button-danger-bg-color: $notice-primary-color; -$mention-user-pill-bg-color: $warning-color; -$input-invalid-border-color: $warning-color; -$event-highlight-fg-color: $warning-color; $roomtopic-color: $secondary-content; @define-mixin mx_DialogButton_danger { diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index ef4ab0115d..e1e7a0d179 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -64,7 +64,6 @@ $orange-warning-color: #ff8d13; // used for true warnings // background colour for warnings $warning-bg-color: #DF2A8B; $info-bg-color: #2A9EDF; -$mention-user-pill-bg-color: $warning-color; $other-user-pill-bg-color: rgba(0, 0, 0, 0.1); // informational plinth @@ -79,9 +78,6 @@ $tertiary-accent-color: #d3efe1; $groupFilterPanel-bg-color: rgba(232, 232, 232, 0.77); -// used by RoomDirectory permissions -$plinth-bg-color: $secondary-accent-color; - // used by AddressSelector $selected-color: $secondary-accent-color; @@ -96,12 +92,8 @@ $input-border-color: #e7e7e7; $input-darker-bg-color: $quinary-content; $input-darker-fg-color: #9fa9ba; $input-lighter-bg-color: #f2f5f8; -$input-lighter-fg-color: $input-darker-fg-color; $input-focused-border-color: #238cf5; -$input-valid-border-color: $accent-color; -$input-invalid-border-color: $warning-color; -$button-bg-color: $accent-color; $button-fg-color: white; $resend-button-divider-color: $input-darker-bg-color; @@ -122,7 +114,6 @@ $menu-box-shadow-color: rgba(118, 131, 156, 0.6); $menu-selected-color: #f5f8fa; $avatar-initial-color: $background; -$avatar-bg-color: $background; $h3-color: #3d3b39; @@ -131,7 +122,6 @@ $dialog-backdrop-color: rgba(46, 48, 51, 0.38); $dialog-shadow-color: rgba(0, 0, 0, 0.48); $dialog-close-fg-color: #c1c1c1; -$dialog-background-bg-color: #e9e9e9; $lightbox-background-bg-color: #000; $lightbox-background-bg-opacity: 0.95; @@ -144,7 +134,6 @@ $greyed-fg-color: #888; $neutral-badge-color: #dbdbdb; $preview-widget-bar-color: #ddd; -$preview-widget-fg-color: $greyed-fg-color; $blockquote-bar-color: #ddd; $blockquote-fg-color: #777; @@ -152,12 +141,8 @@ $blockquote-fg-color: #777; $settings-grey-fg-color: #a2a2a2; $settings-profile-overlay-placeholder-fg-color: #2e2f32; $settings-profile-button-bg-color: #e7e7e7; -$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color; $settings-subsection-fg-color: #61708b; -$voip-decline-color: #f48080; -$voip-accept-color: #80f480; - $rte-bg-color: #e9e9e9; $rte-code-bg-color: rgba(0, 0, 0, 0.04); $rte-room-pill-color: #aaa; @@ -188,7 +173,6 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%) $roomtile-default-badge-bg-color: #61708b; -$presence-online: $accent-color; $presence-away: #d9b072; $presence-offline: $quinary-content; @@ -206,7 +190,6 @@ $username-variant8-color: #74d12c; $panel-divider-color: transparent; // pinned events indicator -$pinned-unread-color: $notice-primary-color; $pinned-color: $tertiary-content; // ******************** @@ -224,7 +207,6 @@ $yellow-background: #fff8e3; // event tile lifecycle $event-notsent-color: #f44; -$event-highlight-fg-color: $warning-color; $event-highlight-bg-color: $yellow-background; // event redaction @@ -253,33 +235,26 @@ $lightbox-border-color: #ffffff; $tab-label-fg-color: #45474a; $tab-label-active-fg-color: $background; $tab-label-bg-color: transparent; -$tab-label-active-bg-color: $accent-color; $tab-label-icon-bg-color: #454545; $tab-label-active-icon-bg-color: $tab-label-active-fg-color; // Buttons $button-primary-fg-color: #ffffff; -$button-primary-bg-color: $accent-color; $button-secondary-bg-color: $accent-fg-color; $button-danger-fg-color: $background; -$button-danger-bg-color: $notice-primary-color; $button-danger-disabled-fg-color: $background; $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color -$button-link-fg-color: $accent-color; $button-link-bg-color: transparent; $visual-bell-bg-color: #faa; // Toggle switch $togglesw-off-color: #c1c9d6; -$togglesw-on-color: $accent-color; $togglesw-ball-color: #fff; // Slider -$slider-selection-color: $accent-color; $slider-background-color: #c1c9d6; -$progressbar-fg-color: $accent-color; $progressbar-bg-color: rgba(141, 151, 165, 0.2); $room-warning-bg-color: $yellow-background; @@ -288,7 +263,6 @@ $memberstatus-placeholder-color: $muted-fg-color; $authpage-bg-color: #2e3649; $authpage-modal-bg-color: rgba(245, 245, 245, 0.90); -$authpage-body-bg-color: $background; $authpage-focus-bg-color: #dddddd; $authpage-lang-color: #4e5054; $authpage-primary-color: #232f32; @@ -352,7 +326,7 @@ $eventbubble-reply-color: $quaternary-content; font-family: $font-family; font-size: $font-14px; color: $button-fg-color; - background-color: $button-bg-color; + background-color: $accent-color; width: auto; padding: 7px; padding-left: 1.5em;