From 9abb2f5ff455d98dd88689737867204e608895c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 11 Nov 2021 14:37:29 +0100 Subject: [PATCH] Color cleanup 8 (#7108) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * $accent-color -> $accent Signed-off-by: Šimon Brandner * Remove $accent-bg-color Signed-off-by: Šimon Brandner * $notice-primary-color -> $alert Signed-off-by: Šimon Brandner * Remove $notice-primary-bg-color Signed-off-by: Šimon Brandner * Remove $accent-50pct Signed-off-by: Šimon Brandner * $warning-color -> $alert Signed-off-by: Šimon Brandner * Remove $accent-darker Signed-off-by: Šimon Brandner * Remove $orange-warning-color Signed-off-by: Šimon Brandner * Remove $warning-bg-color Signed-off-by: Šimon Brandner * Remove $info-bg-color Signed-off-by: Šimon Brandner --- res/css/_common.scss | 26 ++++++++--------- res/css/structures/_CustomRoomTagPanel.scss | 2 +- res/css/structures/_GroupFilterPanel.scss | 4 +-- res/css/structures/_GroupView.scss | 6 ++-- res/css/structures/_HomePage.scss | 2 +- res/css/structures/_MatrixChat.scss | 2 +- res/css/structures/_RightPanel.scss | 10 +++---- res/css/structures/_RoomStatusBar.scss | 6 ++-- res/css/structures/_RoomView.scss | 8 +++--- res/css/structures/_SpaceHierarchy.scss | 4 +-- res/css/structures/_SpacePanel.scss | 4 +-- res/css/structures/_SpaceRoomView.scss | 10 +++---- res/css/structures/_TabbedView.scss | 8 +++--- res/css/structures/_ToastContainer.scss | 2 +- .../structures/auth/_CompleteSecurity.scss | 2 +- res/css/structures/auth/_Login.scss | 6 ++-- .../structures/auth/_SetupEncryptionBody.scss | 2 +- res/css/views/auth/_AuthBody.scss | 2 +- res/css/views/auth/_AuthButtons.scss | 2 +- .../auth/_InteractiveAuthEntryComponents.scss | 4 +-- res/css/views/auth/_PassphraseField.scss | 4 +-- .../views/avatars/_DecoratedRoomAvatar.scss | 2 +- .../avatars/_MemberStatusMessageAvatar.scss | 2 +- res/css/views/beta/_BetaCard.scss | 4 +-- .../context_menus/_IconizedContextMenu.scss | 8 +++--- .../_StatusMessageContextMenu.scss | 4 +-- .../dialogs/_AddExistingToSpaceDialog.scss | 6 ++-- .../views/dialogs/_AddressPickerDialog.scss | 2 +- .../_CreateCommunityPrototypeDialog.scss | 2 +- res/css/views/dialogs/_CreateRoomDialog.scss | 2 +- .../_CreateSpaceFromCommunityDialog.scss | 6 ++-- res/css/views/dialogs/_DevtoolsDialog.scss | 10 +++---- res/css/views/dialogs/_FeedbackDialog.scss | 4 +-- res/css/views/dialogs/_ForwardDialog.scss | 4 +-- res/css/views/dialogs/_InviteDialog.scss | 4 +-- res/css/views/dialogs/_LeaveSpaceDialog.scss | 4 +-- .../dialogs/_MessageEditHistoryDialog.scss | 2 +- .../views/dialogs/_ServerPickerDialog.scss | 2 +- res/css/views/dialogs/_SetEmailDialog.scss | 2 +- .../views/dialogs/_SpaceSettingsDialog.scss | 2 +- .../_TabbedIntegrationManagerDialog.scss | 6 ++-- res/css/views/dialogs/_TermsDialog.scss | 2 +- .../security/_AccessSecretStorageDialog.scss | 12 ++++---- .../security/_CreateKeyBackupDialog.scss | 4 +-- .../security/_CreateSecretStorageDialog.scss | 2 +- .../security/_RestoreKeyBackupDialog.scss | 4 +-- res/css/views/directory/_NetworkDropdown.scss | 4 +-- res/css/views/elements/_AccessibleButton.scss | 28 +++++++++---------- res/css/views/elements/_AddressSelector.scss | 2 +- res/css/views/elements/_AddressTile.scss | 4 +-- .../_DesktopCapturerSourcePicker.scss | 2 +- .../views/elements/_DirectorySearchBox.scss | 2 +- res/css/views/elements/_EditableItemList.scss | 2 +- res/css/views/elements/_EventListSummary.scss | 2 +- res/css/views/elements/_Field.scss | 8 +++--- .../views/elements/_ManageIntegsButton.scss | 2 +- res/css/views/elements/_ProgressBar.scss | 2 +- res/css/views/elements/_ReplyChain.scss | 2 +- res/css/views/elements/_RichText.scss | 4 +-- res/css/views/elements/_SSOButtons.scss | 6 ++-- res/css/views/elements/_Slider.scss | 6 ++-- res/css/views/elements/_StyledCheckbox.scss | 8 +++--- .../views/elements/_StyledRadioButton.scss | 4 +-- res/css/views/elements/_ToggleSwitch.scss | 2 +- res/css/views/elements/_Validation.scss | 8 +++--- res/css/views/emojipicker/_EmojiPicker.scss | 6 ++-- res/css/views/messages/_MFileBody.scss | 6 ++-- res/css/views/messages/_MImageBody.scss | 4 +-- .../views/messages/_ReactionsRowButton.scss | 2 +- res/css/views/messages/_TextualEvent.scss | 2 +- res/css/views/messages/_ViewSourceEvent.scss | 2 +- .../views/messages/_common_CryptoEvent.scss | 4 +-- .../views/right_panel/_RoomSummaryCard.scss | 2 +- res/css/views/right_panel/_UserInfo.scss | 8 +++--- res/css/views/right_panel/_WidgetCard.scss | 2 +- .../views/room_settings/_AliasSettings.scss | 4 +-- res/css/views/rooms/_AppsDrawer.scss | 2 +- res/css/views/rooms/_E2EIcon.scss | 4 +-- res/css/views/rooms/_EditMessageComposer.scss | 2 +- res/css/views/rooms/_EventBubbleTile.scss | 2 +- res/css/views/rooms/_EventTile.scss | 12 ++++---- res/css/views/rooms/_JumpToBottomButton.scss | 2 +- res/css/views/rooms/_LinkPreviewGroup.scss | 2 +- res/css/views/rooms/_MemberList.scss | 2 +- res/css/views/rooms/_MessageComposer.scss | 16 +++++------ res/css/views/rooms/_NotificationBadge.scss | 2 +- res/css/views/rooms/_RoomHeader.scss | 12 ++++---- .../views/rooms/_RoomUpgradeWarningBar.scss | 6 ++-- res/css/views/rooms/_SearchBar.scss | 6 ++-- res/css/views/rooms/_Stickers.scss | 2 +- .../views/rooms/_TopUnreadMessagesBar.scss | 2 +- .../views/settings/_IntegrationManager.scss | 2 +- res/css/views/settings/_JoinRuleSettings.scss | 4 +-- res/css/views/settings/_LayoutSwitcher.scss | 4 +-- res/css/views/settings/tabs/_SettingsTab.scss | 8 +++--- .../tabs/user/_AppearanceUserSettingsTab.scss | 2 +- .../tabs/user/_SecurityUserSettingsTab.scss | 4 +-- res/css/views/spaces/_SpaceBasicSettings.scss | 2 +- res/css/views/spaces/_SpaceCreateMenu.scss | 2 +- .../views/terms/_InlineTermsAgreement.scss | 4 +-- res/css/views/toasts/_AnalyticsToast.scss | 4 +-- res/css/views/voip/_DialPad.scss | 2 +- res/css/views/voip/_DialPadContextMenu.scss | 2 +- res/css/views/voip/_DialPadModal.scss | 2 +- res/css/views/voip/_VideoFeed.scss | 2 +- res/themes/dark/css/_dark.scss | 10 +++---- res/themes/legacy-dark/css/_legacy-dark.scss | 10 +++---- .../legacy-light/css/_legacy-light.scss | 26 +++++------------ res/themes/light-custom/css/_custom.scss | 8 +----- .../css/_light-high-contrast.scss | 19 +++++-------- res/themes/light/css/_light.scss | 28 ++++++------------- 111 files changed, 271 insertions(+), 306 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 62d02388bb..d6d139d2bd 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -74,11 +74,11 @@ pre, code { .error, .warning, .text-error, .text-warning { - color: $warning-color; + color: $alert; } .text-success { - color: $accent-color; + color: $accent; } .text-muted { @@ -102,7 +102,7 @@ h2 { a:hover, a:link, a:visited { - color: $accent-color-alt; + color: $accent-alt; } input[type=text], @@ -238,7 +238,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { // // They are not used for layout!! #mx_theme_accentColor { - color: $accent-color; + color: $accent; } #mx_theme_secondaryAccentColor { @@ -364,7 +364,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { } .mx_Dialog_title.danger { - color: $warning-color; + color: $alert; } .mx_Dialog_cancelButton { @@ -414,8 +414,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { // flip colours for the secondary ones font-weight: 600; - border: 1px solid $accent-color; - color: $accent-color; + border: 1px solid $accent; + color: $accent; background-color: $button-secondary-bg-color; font-family: inherit; } @@ -443,7 +443,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { .mx_Dialog_buttons button.mx_Dialog_primary, .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary { color: $accent-fg-color; - background-color: $accent-color; + background-color: $accent; min-width: 156px; } @@ -451,15 +451,15 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { .mx_Dialog input[type="submit"].danger, .mx_Dialog_buttons button.danger, .mx_Dialog_buttons input[type="submit"].danger { - background-color: $warning-color; - border: solid 1px $warning-color; + background-color: $alert; + border: solid 1px $alert; color: $accent-fg-color; } .mx_Dialog button.warning, .mx_Dialog input[type="submit"].warning { - border: solid 1px $warning-color; - color: $warning-color; + border: solid 1px $alert; + color: $alert; } .mx_Dialog button:not(.mx_Dialog_nonDialogButton):disabled, @@ -499,7 +499,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { .mx_linkButton { cursor: pointer; - color: $accent-color; + color: $accent; } .mx_TextInputDialog_label { diff --git a/res/css/structures/_CustomRoomTagPanel.scss b/res/css/structures/_CustomRoomTagPanel.scss index be1138cf5b..627644f102 100644 --- a/res/css/structures/_CustomRoomTagPanel.scss +++ b/res/css/structures/_CustomRoomTagPanel.scss @@ -44,7 +44,7 @@ limitations under the License. .mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected::before { content: ''; height: 56px; - background-color: $accent-color-alt; + background-color: $accent-alt; width: 5px; position: absolute; left: -9px; diff --git a/res/css/structures/_GroupFilterPanel.scss b/res/css/structures/_GroupFilterPanel.scss index a101aba7e5..bdbd9f7643 100644 --- a/res/css/structures/_GroupFilterPanel.scss +++ b/res/css/structures/_GroupFilterPanel.scss @@ -152,7 +152,7 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation .mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected::before { content: ''; height: 100%; - background-color: $accent-color; + background-color: $accent; width: 4px; position: absolute; left: -12px; @@ -203,5 +203,5 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation } .mx_TagTile_badgeHighlight { - background-color: $warning-color; + background-color: $alert; } diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss index 5e224b1f38..313a4b32cf 100644 --- a/res/css/structures/_GroupView.scss +++ b/res/css/structures/_GroupView.scss @@ -81,13 +81,13 @@ limitations under the License. } .mx_GroupView_editable:focus { - border-bottom: 1px solid $accent-color !important; + border-bottom: 1px solid $accent !important; outline: none; box-shadow: none; } .mx_GroupView_header_isUserMember .mx_GroupView_header_name:hover div:not(.mx_GroupView_editable) { - color: $accent-color; + color: $accent; cursor: pointer; } @@ -229,7 +229,7 @@ limitations under the License. vertical-align: top; line-height: $font-24px; padding-left: 28px; - color: $accent-color; + color: $accent; } .mx_GroupView_rooms .mx_RoomDetailList { diff --git a/res/css/structures/_HomePage.scss b/res/css/structures/_HomePage.scss index b530d994c6..77da167099 100644 --- a/res/css/structures/_HomePage.scss +++ b/res/css/structures/_HomePage.scss @@ -77,7 +77,7 @@ limitations under the License. font-size: $font-15px; line-height: $font-20px; color: #fff; // on all themes - background-color: $accent-color; + background-color: $accent; &::before { top: 20px; diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss index fdf5cb1a03..80053154ab 100644 --- a/res/css/structures/_MatrixChat.scss +++ b/res/css/structures/_MatrixChat.scss @@ -52,7 +52,7 @@ limitations under the License. .mx_MatrixChat_syncError { color: $accent-fg-color; - background-color: $warning-bg-color; + background-color: #DF2A8B; // Only used here border-radius: 5px; display: table; padding: 30px; diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index 9119402490..38a1fe9099 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -71,10 +71,10 @@ limitations under the License. } &:hover { - background: rgba($accent-color, 0.1); + background: rgba($accent, 0.1); &::before { - background-color: $accent-color; + background-color: $accent; } } } @@ -104,7 +104,7 @@ limitations under the License. } $dot-size: 8px; -$pulse-color: $notice-primary-color; +$pulse-color: $alert; .mx_RightPanel_pinnedMessagesButton { &::before { @@ -175,7 +175,7 @@ $pulse-color: $notice-primary-color; .mx_RightPanel_headerButton_highlight { &::before { - background-color: $accent-color !important; + background-color: $accent !important; } } @@ -183,7 +183,7 @@ $pulse-color: $notice-primary-color; font-size: $font-8px; border-radius: 8px; color: $accent-fg-color; - background-color: $accent-color; + background-color: $accent; font-weight: bold; position: absolute; top: -4px; diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss index bdfbca1afa..a54ceae49e 100644 --- a/res/css/structures/_RoomStatusBar.scss +++ b/res/css/structures/_RoomStatusBar.scss @@ -57,7 +57,7 @@ limitations under the License. .mx_RoomStatusBar_unreadMessagesBar { padding-top: 10px; - color: $warning-color; + color: $alert; cursor: pointer; } @@ -96,7 +96,7 @@ limitations under the License. } .mx_RoomStatusBar_unsentTitle { - color: $warning-color; + color: $alert; font-size: $font-15px; } @@ -167,7 +167,7 @@ limitations under the License. } .mx_RoomStatusBar_connectionLostBar_title { - color: $warning-color; + color: $alert; } .mx_RoomStatusBar_connectionLostBar_desc { diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index 50fa304bd6..a61b330e24 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -103,7 +103,7 @@ limitations under the License. .mx_RoomView_auxPanel_hiddenHighlights { border-bottom: 1px solid $primary-hairline-color; padding: 10px 26px; - color: $warning-color; + color: $alert; cursor: pointer; } @@ -241,8 +241,8 @@ li.mx_RoomView_myReadMarker_container { } hr.mx_RoomView_myReadMarker { - border-top: solid 1px $accent-color; - border-bottom: solid 1px $accent-color; + border-top: solid 1px $accent; + border-bottom: solid 1px $accent; margin-top: 0px; position: relative; top: -1px; @@ -299,7 +299,7 @@ hr.mx_RoomView_myReadMarker { .mx_RoomView_ongoingConfCallNotification { width: 100%; text-align: center; - background-color: $warning-color; + background-color: $alert; color: $accent-fg-color; font-weight: bold; padding: 6px 0; diff --git a/res/css/structures/_SpaceHierarchy.scss b/res/css/structures/_SpaceHierarchy.scss index 5735ef016d..8ad167528b 100644 --- a/res/css/structures/_SpaceHierarchy.scss +++ b/res/css/structures/_SpaceHierarchy.scss @@ -99,7 +99,7 @@ limitations under the License. .mx_SpaceHierarchy_error { position: relative; font-weight: $font-semi-bold; - color: $notice-primary-color; + color: $alert; font-size: $font-15px; line-height: $font-18px; margin: 20px auto 12px; @@ -238,7 +238,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background-color: $accent-color; + background-color: $accent; mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg'); } } diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss index d822b9baf2..0785d4955f 100644 --- a/res/css/structures/_SpacePanel.scss +++ b/res/css/structures/_SpacePanel.scss @@ -324,10 +324,10 @@ $activeBorderColor: $secondary-content; } .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton { - color: $accent-color; + color: $accent; .mx_SpacePanel_iconInvite::before { - background-color: $accent-color; + background-color: $accent; mask-image: url('$(res)/img/element-icons/room/invite.svg'); } } diff --git a/res/css/structures/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.scss index 51b5244c5f..0f3470b0b4 100644 --- a/res/css/structures/_SpaceRoomView.scss +++ b/res/css/structures/_SpaceRoomView.scss @@ -49,10 +49,10 @@ $SpaceRoomViewInnerWidth: 428px; } &:hover { - border-color: $accent-color; + border-color: $accent; &::before { - background-color: $accent-color; + background-color: $accent; } > span { @@ -128,7 +128,7 @@ $SpaceRoomViewInnerWidth: 428px; font-weight: $font-semi-bold; font-size: $font-12px; line-height: $font-15px; - color: $notice-primary-color; + color: $alert; margin-bottom: 28px; } @@ -427,11 +427,11 @@ $SpaceRoomViewInnerWidth: 428px; } .mx_SpaceRoomView_inviteTeammates_inviteDialogButton { - color: $accent-color; + color: $accent; &::before { mask-image: url('$(res)/img/element-icons/room/invite.svg'); - background-color: $accent-color; + background-color: $accent; } } } diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss index 0749783b7b..c7d3acfdbf 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: $accent-color; + background-color: $accent; color: $tab-label-active-fg-color; } @@ -89,14 +89,14 @@ limitations under the License. } .mx_TabbedView_tabLabel_active { - color: $accent-color; + color: $accent; .mx_TabbedView_tabLabel_text { - color: $accent-color; + color: $accent; } } .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before { - background-color: $accent-color; + background-color: $accent; } .mx_TabbedView_maskedIcon { diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss index 55181a8b53..d2b3babc3a 100644 --- a/res/css/structures/_ToastContainer.scss +++ b/res/css/structures/_ToastContainer.scss @@ -76,7 +76,7 @@ limitations under the License. &::after { mask-image: url("$(res)/img/e2e/warning.svg"); - background-color: $notice-primary-color; + background-color: $alert; } } diff --git a/res/css/structures/auth/_CompleteSecurity.scss b/res/css/structures/auth/_CompleteSecurity.scss index 2c45069cfe..bf5aeb15f5 100644 --- a/res/css/structures/auth/_CompleteSecurity.scss +++ b/res/css/structures/auth/_CompleteSecurity.scss @@ -63,7 +63,7 @@ limitations under the License. margin-inline-start: 18px; &.warning { - color: $warning-color; + color: $alert; } } } diff --git a/res/css/structures/auth/_Login.scss b/res/css/structures/auth/_Login.scss index c4aaaca1d0..2290b6a345 100644 --- a/res/css/structures/auth/_Login.scss +++ b/res/css/structures/auth/_Login.scss @@ -50,7 +50,7 @@ limitations under the License. } .mx_Login_error { - color: $warning-color; + color: $alert; font-weight: bold; text-align: center; margin-top: 12px; @@ -63,7 +63,7 @@ limitations under the License. } .mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal { - color: $orange-warning-color; + color: #ff8d13; // Only used here } .mx_Login_type_container { @@ -82,7 +82,7 @@ limitations under the License. .mx_Login_underlinedServerName { width: max-content; - border-bottom: 1px dashed $accent-color; + border-bottom: 1px dashed $accent; } div.mx_AccessibleButton_kind_link.mx_Login_forgot { diff --git a/res/css/structures/auth/_SetupEncryptionBody.scss b/res/css/structures/auth/_SetupEncryptionBody.scss index 24ee114544..f40e31280b 100644 --- a/res/css/structures/auth/_SetupEncryptionBody.scss +++ b/res/css/structures/auth/_SetupEncryptionBody.scss @@ -19,6 +19,6 @@ limitations under the License. margin-top: $font-14px; a.mx_SetupEncryptionBody_reset_link:is(:link, :hover, :visited) { - color: $warning-color; + color: $alert; } } diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index d27137eb25..8c6b6bdff0 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/res/css/views/auth/_AuthBody.scss @@ -68,7 +68,7 @@ limitations under the License. } input.error { - color: $warning-color; + color: $alert; } .mx_Field input { diff --git a/res/css/views/auth/_AuthButtons.scss b/res/css/views/auth/_AuthButtons.scss index 3a2ad2adf8..a4a3cac37f 100644 --- a/res/css/views/auth/_AuthButtons.scss +++ b/res/css/views/auth/_AuthButtons.scss @@ -38,7 +38,7 @@ limitations under the License. margin-right: 4px; min-width: 80px; - background-color: $accent-color; + background-color: $accent; color: $background; cursor: pointer; diff --git a/res/css/views/auth/_InteractiveAuthEntryComponents.scss b/res/css/views/auth/_InteractiveAuthEntryComponents.scss index ec07b765fd..a37683935a 100644 --- a/res/css/views/auth/_InteractiveAuthEntryComponents.scss +++ b/res/css/views/auth/_InteractiveAuthEntryComponents.scss @@ -56,7 +56,7 @@ limitations under the License. } .mx_InteractiveAuthEntryComponents_msisdnEntry:focus { - border: 1px solid $accent-color; + border: 1px solid $accent; } .mx_InteractiveAuthEntryComponents_msisdnSubmit { @@ -78,7 +78,7 @@ limitations under the License. } .mx_InteractiveAuthEntryComponents_termsSubmit:disabled { - background-color: $accent-color-darker; + background-color: #92caad; // Only used here cursor: default; } diff --git a/res/css/views/auth/_PassphraseField.scss b/res/css/views/auth/_PassphraseField.scss index bf8e7f4438..a197ebbe03 100644 --- a/res/css/views/auth/_PassphraseField.scss +++ b/res/css/views/auth/_PassphraseField.scss @@ -14,9 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -$PassphraseStrengthHigh: $accent-color; +$PassphraseStrengthHigh: $accent; $PassphraseStrengthMedium: $username-variant5-color; -$PassphraseStrengthLow: $notice-primary-color; +$PassphraseStrengthLow: $alert; progress.mx_PassphraseField_progress { appearance: none; diff --git a/res/css/views/avatars/_DecoratedRoomAvatar.scss b/res/css/views/avatars/_DecoratedRoomAvatar.scss index ec6d99c04d..60cd18520a 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: $accent-color; + background-color: $accent; } .mx_DecoratedRoomAvatar_icon_away::before { diff --git a/res/css/views/avatars/_MemberStatusMessageAvatar.scss b/res/css/views/avatars/_MemberStatusMessageAvatar.scss index 975b4e5ce9..7f2f53668f 100644 --- a/res/css/views/avatars/_MemberStatusMessageAvatar.scss +++ b/res/css/views/avatars/_MemberStatusMessageAvatar.scss @@ -25,5 +25,5 @@ limitations under the License. } .mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar { - border-color: $accent-color; + border-color: $accent; } diff --git a/res/css/views/beta/_BetaCard.scss b/res/css/views/beta/_BetaCard.scss index ae7922e802..268d7304ad 100644 --- a/res/css/views/beta/_BetaCard.scss +++ b/res/css/views/beta/_BetaCard.scss @@ -85,7 +85,7 @@ limitations under the License. } .mx_BetaCard_betaPill { - background-color: $accent-color-alt; + background-color: $accent-alt; padding: 4px 10px; border-radius: 8px; text-transform: uppercase; @@ -100,7 +100,7 @@ limitations under the License. } } -$pulse-color: $accent-color-alt; +$pulse-color: $accent-alt; $dot-size: 12px; .mx_BetaDot { diff --git a/res/css/views/context_menus/_IconizedContextMenu.scss b/res/css/views/context_menus/_IconizedContextMenu.scss index ca40f18cd4..e6b56c5037 100644 --- a/res/css/views/context_menus/_IconizedContextMenu.scss +++ b/res/css/views/context_menus/_IconizedContextMenu.scss @@ -125,21 +125,21 @@ limitations under the License. .mx_IconizedContextMenu_optionList_red { .mx_AccessibleButton { - color: $warning-color !important; + color: $alert !important; } .mx_IconizedContextMenu_icon::before { - background-color: $warning-color; + background-color: $alert; } } .mx_IconizedContextMenu_active { &.mx_AccessibleButton, .mx_AccessibleButton { - color: $accent-color !important; + color: $accent !important; } .mx_IconizedContextMenu_icon::before { - background-color: $accent-color; + background-color: $accent; } } diff --git a/res/css/views/context_menus/_StatusMessageContextMenu.scss b/res/css/views/context_menus/_StatusMessageContextMenu.scss index 1a97fb56c7..74a08a4f5b 100644 --- a/res/css/views/context_menus/_StatusMessageContextMenu.scss +++ b/res/css/views/context_menus/_StatusMessageContextMenu.scss @@ -55,9 +55,9 @@ input.mx_StatusMessageContextMenu_message { } .mx_StatusMessageContextMenu_clear { - color: $warning-color; + color: $alert; background-color: transparent; - border: 1px solid $warning-color; + border: 1px solid $alert; } .mx_StatusMessageContextMenu_actionContainer .mx_Spinner { diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss index 8b19f506f5..5d53a99661 100644 --- a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss +++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss @@ -98,7 +98,7 @@ limitations under the License. font-weight: $font-semi-bold; font-size: $font-15px; line-height: $font-18px; - color: $notice-primary-color; + color: $alert; } .mx_AddExistingToSpace_errorCaption { @@ -199,7 +199,7 @@ limitations under the License. .mx_Dropdown_menu { .mx_SubspaceSelector_dropdownOptionActive { - color: $accent-color; + color: $accent; padding-right: 32px; position: relative; @@ -213,7 +213,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background-color: $accent-color; + background-color: $accent; mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg'); } } diff --git a/res/css/views/dialogs/_AddressPickerDialog.scss b/res/css/views/dialogs/_AddressPickerDialog.scss index a1147e6fbc..44e9f94c5f 100644 --- a/res/css/views/dialogs/_AddressPickerDialog.scss +++ b/res/css/views/dialogs/_AddressPickerDialog.scss @@ -61,7 +61,7 @@ limitations under the License. .mx_AddressPickerDialog_error { margin-top: 10px; - color: $warning-color; + color: $alert; } .mx_AddressPickerDialog_cancel { diff --git a/res/css/views/dialogs/_CreateCommunityPrototypeDialog.scss b/res/css/views/dialogs/_CreateCommunityPrototypeDialog.scss index 81babc4c38..a2378115a8 100644 --- a/res/css/views/dialogs/_CreateCommunityPrototypeDialog.scss +++ b/res/css/views/dialogs/_CreateCommunityPrototypeDialog.scss @@ -39,7 +39,7 @@ limitations under the License. } &.mx_CreateCommunityPrototypeDialog_subtext_error { - color: $warning-color; + color: $alert; } } diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss index 9cfa8ce25a..064b64c24a 100644 --- a/res/css/views/dialogs/_CreateRoomDialog.scss +++ b/res/css/views/dialogs/_CreateRoomDialog.scss @@ -22,7 +22,7 @@ limitations under the License. list-style: none; font-weight: 600; cursor: pointer; - color: $accent-color; + color: $accent; // list-style doesn't do it for webkit &::-webkit-details-marker { diff --git a/res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss b/res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss index f1af24cc5f..72c2d13ae3 100644 --- a/res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss +++ b/res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss @@ -106,7 +106,7 @@ limitations under the License. font-weight: $font-semi-bold; font-size: $font-15px; line-height: $font-18px; - color: $notice-primary-color; + color: $alert; } .mx_CreateSpaceFromCommunityDialog_errorCaption { @@ -168,7 +168,7 @@ limitations under the License. .mx_CreateSpaceFromCommunityDialog_SuccessInfoDialog_checkmark { position: relative; border-radius: 50%; - border: 3px solid $accent-color; + border: 3px solid $accent; width: 68px; height: 68px; margin: 12px auto 32px; @@ -178,7 +178,7 @@ limitations under the License. height: inherit; content: ''; position: absolute; - background-color: $accent-color; + background-color: $accent; mask-repeat: no-repeat; mask-position: center; mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg'); diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss index 4d35e8d569..738cc9ea22 100644 --- a/res/css/views/dialogs/_DevtoolsDialog.scss +++ b/res/css/views/dialogs/_DevtoolsDialog.scss @@ -215,7 +215,7 @@ limitations under the License. th { // Colour choice: first one autocomplete gave me. - border-bottom: 1px solid $accent-color; + border-bottom: 1px solid $accent; text-align: left; } @@ -233,16 +233,16 @@ limitations under the License. tr:hover { // Colour choice: first one autocomplete gave me. - background-color: $accent-color-50pct; + background-color: $accent; } } .mx_DevTools_SettingsExplorer_mutable { - background-color: $accent-color; + background-color: $accent; } .mx_DevTools_SettingsExplorer_immutable { - background-color: $warning-color; + background-color: $alert; } .mx_DevTools_SettingsExplorer_edit { @@ -251,7 +251,7 @@ limitations under the License. } .mx_DevTools_SettingsExplorer_warning { - border: 2px solid $warning-color; + border: 2px solid $alert; border-radius: 4px; padding: 4px; margin-bottom: 8px; diff --git a/res/css/views/dialogs/_FeedbackDialog.scss b/res/css/views/dialogs/_FeedbackDialog.scss index 22559d9197..8674f2bab6 100644 --- a/res/css/views/dialogs/_FeedbackDialog.scss +++ b/res/css/views/dialogs/_FeedbackDialog.scss @@ -42,7 +42,7 @@ limitations under the License. } a, .mx_AccessibleButton_kind_link { - color: $accent-color; + color: $accent; text-decoration: underline; } @@ -111,7 +111,7 @@ limitations under the License. .mx_StyledRadioButton_checked { font-size: 24px; - border-color: $accent-color; + border-color: $accent; } &::after { diff --git a/res/css/views/dialogs/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.scss index b90649fa24..97cd8b8787 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: $accent-color; + background-color: $accent; 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: $accent-color; + background-color: $accent; mask-image: url('$(res)/img/element-icons/circle-sent.svg'); mask-position: center; mask-repeat: no-repeat; diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index a753115614..cca1789904 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -362,7 +362,7 @@ limitations under the License. } .mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField:focus-within { - border-color: $accent-color; + border-color: $accent; } .mx_InviteDialog_dialPadField .mx_Field_postfix { @@ -447,7 +447,7 @@ limitations under the License. margin-left: 32px; font-size: $font-15px; line-height: $font-24px; - color: $notice-primary-color; + color: $alert; } } } diff --git a/res/css/views/dialogs/_LeaveSpaceDialog.scss b/res/css/views/dialogs/_LeaveSpaceDialog.scss index c0f24871c6..baae73a90b 100644 --- a/res/css/views/dialogs/_LeaveSpaceDialog.scss +++ b/res/css/views/dialogs/_LeaveSpaceDialog.scss @@ -69,8 +69,8 @@ limitations under the License. margin-top: 20px; .mx_Dialog_primary { - background-color: $notice-primary-color !important; // override default colour - border-color: $notice-primary-color; + background-color: $alert !important; // override default colour + border-color: $alert; } } } diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.scss b/res/css/views/dialogs/_MessageEditHistoryDialog.scss index f60bbc9589..5838939d9b 100644 --- a/res/css/views/dialogs/_MessageEditHistoryDialog.scss +++ b/res/css/views/dialogs/_MessageEditHistoryDialog.scss @@ -29,7 +29,7 @@ limitations under the License. } .mx_MessageEditHistoryDialog_error { - color: $warning-color; + color: $alert; text-align: center; } diff --git a/res/css/views/dialogs/_ServerPickerDialog.scss b/res/css/views/dialogs/_ServerPickerDialog.scss index 9a05751f91..4dde7cf800 100644 --- a/res/css/views/dialogs/_ServerPickerDialog.scss +++ b/res/css/views/dialogs/_ServerPickerDialog.scss @@ -43,7 +43,7 @@ limitations under the License. } > a { - color: $accent-color; + color: $accent; margin-left: 8px; } } diff --git a/res/css/views/dialogs/_SetEmailDialog.scss b/res/css/views/dialogs/_SetEmailDialog.scss index a39d51dfce..a07f83acdc 100644 --- a/res/css/views/dialogs/_SetEmailDialog.scss +++ b/res/css/views/dialogs/_SetEmailDialog.scss @@ -29,5 +29,5 @@ limitations under the License. .mx_SetEmailDialog_email_input:focus { outline: none; box-shadow: none; - border: 1px solid $accent-color; + border: 1px solid $accent; } diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.scss b/res/css/views/dialogs/_SpaceSettingsDialog.scss index 05cd55a570..78fbd573bd 100644 --- a/res/css/views/dialogs/_SpaceSettingsDialog.scss +++ b/res/css/views/dialogs/_SpaceSettingsDialog.scss @@ -21,7 +21,7 @@ limitations under the License. font-weight: $font-semi-bold; font-size: $font-12px; line-height: $font-15px; - color: $notice-primary-color; + color: $alert; margin-bottom: 28px; } diff --git a/res/css/views/dialogs/_TabbedIntegrationManagerDialog.scss b/res/css/views/dialogs/_TabbedIntegrationManagerDialog.scss index 0ab59c44a7..6385dd76f5 100644 --- a/res/css/views/dialogs/_TabbedIntegrationManagerDialog.scss +++ b/res/css/views/dialogs/_TabbedIntegrationManagerDialog.scss @@ -35,7 +35,7 @@ limitations under the License. .mx_TabbedIntegrationManagerDialog_currentManager { width: 100%; height: 100%; - border-top: 1px solid $accent-color; + border-top: 1px solid $accent; iframe { background-color: #fff; @@ -48,7 +48,7 @@ limitations under the License. .mx_TabbedIntegrationManagerDialog_tab { display: inline-block; - border: 1px solid $accent-color; + border: 1px solid $accent; border-bottom: 0; border-top-left-radius: 3px; border-top-right-radius: 3px; @@ -57,6 +57,6 @@ limitations under the License. } .mx_TabbedIntegrationManagerDialog_currentTab { - background-color: $accent-color; + background-color: $accent; color: $accent-fg-color; } diff --git a/res/css/views/dialogs/_TermsDialog.scss b/res/css/views/dialogs/_TermsDialog.scss index 939a31dee6..18daf8514d 100644 --- a/res/css/views/dialogs/_TermsDialog.scss +++ b/res/css/views/dialogs/_TermsDialog.scss @@ -42,7 +42,7 @@ limitations under the License. .mx_TermsDialog_link { display: inline-block; mask-image: url('$(res)/img/external-link.svg'); - background-color: $accent-color; + background-color: $accent; width: 10px; height: 10px; } diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss index becf4dba04..e8bde18232 100644 --- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss +++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss @@ -32,7 +32,7 @@ limitations under the License. } .mx_AccessSecretStorageDialog_reset_link { - color: $warning-color; + color: $alert; } } @@ -68,7 +68,7 @@ limitations under the License. .mx_AccessSecretStorageDialog_passPhraseInput { width: 300px; - border: 1px solid $accent-color; + border: 1px solid $accent; border-radius: 5px; } @@ -100,18 +100,18 @@ limitations under the License. } .mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid { - color: $accent-color; + color: $accent; &::before { mask-image: url('$(res)/img/feather-customised/check.svg'); - background-color: $accent-color; + background-color: $accent; } } .mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid { - color: $warning-color; + color: $alert; &::before { mask-image: url('$(res)/img/feather-customised/x.svg'); - background-color: $warning-color; + background-color: $alert; } } diff --git a/res/css/views/dialogs/security/_CreateKeyBackupDialog.scss b/res/css/views/dialogs/security/_CreateKeyBackupDialog.scss index 9be98e25b2..4503e08fad 100644 --- a/res/css/views/dialogs/security/_CreateKeyBackupDialog.scss +++ b/res/css/views/dialogs/security/_CreateKeyBackupDialog.scss @@ -20,7 +20,7 @@ limitations under the License. } .mx_CreateKeyBackupDialog_primaryContainer { - /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */ + /* FIXME: plinth colour in new theme(s). background-color: $accent; */ padding: 20px; } @@ -38,7 +38,7 @@ limitations under the License. .mx_CreateKeyBackupDialog_passPhraseInput { flex: none; width: 250px; - border: 1px solid $accent-color; + border: 1px solid $accent; border-radius: 5px; padding: 10px; margin-bottom: 1em; diff --git a/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss b/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss index 46b300f463..3673f59f12 100644 --- a/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss +++ b/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss @@ -72,7 +72,7 @@ limitations under the License. } .mx_CreateSecretStorageDialog_primaryContainer { - /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */ + /* FIXME: plinth colour in new theme(s). background-color: $accent; */ padding-top: 20px; } diff --git a/res/css/views/dialogs/security/_RestoreKeyBackupDialog.scss b/res/css/views/dialogs/security/_RestoreKeyBackupDialog.scss index 5689d84bc5..b0b8f1d7a5 100644 --- a/res/css/views/dialogs/security/_RestoreKeyBackupDialog.scss +++ b/res/css/views/dialogs/security/_RestoreKeyBackupDialog.scss @@ -20,14 +20,14 @@ limitations under the License. } .mx_RestoreKeyBackupDialog_primaryContainer { - /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */ + /* FIXME: plinth colour in new theme(s). background-color: $accent; */ padding: 20px; } .mx_RestoreKeyBackupDialog_passPhraseInput, .mx_RestoreKeyBackupDialog_recoveryKeyInput { width: 300px; - border: 1px solid $accent-color; + border: 1px solid $accent; border-radius: 5px; padding: 10px; } diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss index 2f9b549901..eadca7326b 100644 --- a/res/css/views/directory/_NetworkDropdown.scss +++ b/res/css/views/directory/_NetworkDropdown.scss @@ -73,7 +73,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-image: url('$(res)/img/feather-customised/x.svg'); - background-color: $notice-primary-color; + background-color: $alert; } } } @@ -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: $accent-color; + background-color: $accent; } } } diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss index 41cef2016b..8559c89e41 100644 --- a/res/css/views/elements/_AccessibleButton.scss +++ b/res/css/views/elements/_AccessibleButton.scss @@ -35,20 +35,20 @@ limitations under the License. .mx_AccessibleButton_kind_primary { color: $button-primary-fg-color; - background-color: $accent-color; - border: 1px solid $accent-color; // account for size loss of no border + background-color: $accent; + border: 1px solid $accent; // account for size loss of no border font-weight: 600; } .mx_AccessibleButton_kind_primary_outline { - color: $accent-color; + color: $accent; background-color: $button-secondary-bg-color; - border: 1px solid $accent-color; + border: 1px solid $accent; font-weight: 600; } .mx_AccessibleButton_kind_secondary { - color: $accent-color; + color: $accent; 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: $accent-color; + background-color: $accent; } .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: $notice-primary-color; + background-color: $alert; } .mx_AccessibleButton_kind_danger_outline { - color: $notice-primary-color; + color: $alert; background-color: transparent; - border: 1px solid $notice-primary-color; + border: 1px solid $alert; } .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: $notice-primary-color; + background-color: $alert; } .mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled { @@ -100,7 +100,7 @@ limitations under the License. } .mx_AccessibleButton_kind_link { - color: $accent-color; + color: $accent; } .mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled { @@ -109,7 +109,7 @@ limitations under the License. .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm { padding: 5px 12px; - color: $accent-color; + color: $accent; } .mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled { @@ -117,7 +117,7 @@ limitations under the License. } .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_confirm_sm { - background-color: $accent-color; + background-color: $accent; &::before { mask-image: url('$(res)/img/feather-customised/check.svg'); @@ -125,7 +125,7 @@ limitations under the License. } .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_cancel_sm { - background-color: $notice-primary-color; + background-color: $alert; &::before { mask-image: url('$(res)/img/feather-customised/x.svg'); diff --git a/res/css/views/elements/_AddressSelector.scss b/res/css/views/elements/_AddressSelector.scss index a7d463353b..b066d62543 100644 --- a/res/css/views/elements/_AddressSelector.scss +++ b/res/css/views/elements/_AddressSelector.scss @@ -21,7 +21,7 @@ limitations under the License. max-height: 116px; overflow-y: auto; border-radius: 3px; - border: solid 1px $accent-color; + border: solid 1px $accent; cursor: pointer; z-index: 1; } diff --git a/res/css/views/elements/_AddressTile.scss b/res/css/views/elements/_AddressTile.scss index 90c40842f7..7e646b1cf6 100644 --- a/res/css/views/elements/_AddressTile.scss +++ b/res/css/views/elements/_AddressTile.scss @@ -28,8 +28,8 @@ limitations under the License. .mx_AddressTile.mx_AddressTile_error { background-color: rgba(255, 0, 100, 0.1); - color: $warning-color; - border-color: $warning-color; + color: $alert; + border-color: $alert; } .mx_AddressTile_network { diff --git a/res/css/views/elements/_DesktopCapturerSourcePicker.scss b/res/css/views/elements/_DesktopCapturerSourcePicker.scss index b4a2c69b86..4a164d1f3f 100644 --- a/res/css/views/elements/_DesktopCapturerSourcePicker.scss +++ b/res/css/views/elements/_DesktopCapturerSourcePicker.scss @@ -41,7 +41,7 @@ limitations under the License. &.mx_desktopCapturerSourcePicker_source_thumbnail_selected, &:hover, &:focus { - border-color: $accent-color; + border-color: $accent; } } diff --git a/res/css/views/elements/_DirectorySearchBox.scss b/res/css/views/elements/_DirectorySearchBox.scss index 941a765a29..f8da4a578f 100644 --- a/res/css/views/elements/_DirectorySearchBox.scss +++ b/res/css/views/elements/_DirectorySearchBox.scss @@ -38,7 +38,7 @@ limitations under the License. } .mx_DirectorySearchBox_clear { - background-color: $warning-color; + background-color: $alert; mask: url('$(res)/img/cancel.svg'); mask-repeat: no-repeat; mask-position: center; diff --git a/res/css/views/elements/_EditableItemList.scss b/res/css/views/elements/_EditableItemList.scss index 8987510a18..91ef20539c 100644 --- a/res/css/views/elements/_EditableItemList.scss +++ b/res/css/views/elements/_EditableItemList.scss @@ -33,7 +33,7 @@ limitations under the License. height: 14px; mask-image: url('$(res)/img/feather-customised/cancel.svg'); mask-repeat: no-repeat; - background-color: $warning-color; + background-color: $alert; mask-size: 100%; } diff --git a/res/css/views/elements/_EventListSummary.scss b/res/css/views/elements/_EventListSummary.scss index f3e9f77aa3..bb82ff0dd7 100644 --- a/res/css/views/elements/_EventListSummary.scss +++ b/res/css/views/elements/_EventListSummary.scss @@ -36,7 +36,7 @@ limitations under the License. } .mx_EventListSummary_toggle { - color: $accent-color; + color: $accent; cursor: pointer; float: right; margin-right: 10px; diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index b6a692c951..a00c73191b 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: $accent-color; + border-color: $accent; } &.mx_Field label, &.mx_Field:focus-within label { - color: $accent-color; + color: $accent; } } .mx_Field_invalid { &.mx_Field, &.mx_Field:focus-within { - border-color: $warning-color; + border-color: $alert; } &.mx_Field label, &.mx_Field:focus-within label { - color: $warning-color; + color: $alert; } } diff --git a/res/css/views/elements/_ManageIntegsButton.scss b/res/css/views/elements/_ManageIntegsButton.scss index fe8c76003b..6fb82814ad 100644 --- a/res/css/views/elements/_ManageIntegsButton.scss +++ b/res/css/views/elements/_ManageIntegsButton.scss @@ -35,7 +35,7 @@ limitations under the License. font-size: 10pt; line-height: 1.5em; border-radius: 5px; - background-color: $accent-color; + background-color: $accent; color: $accent-fg-color; text-align: center; z-index: 1000; diff --git a/res/css/views/elements/_ProgressBar.scss b/res/css/views/elements/_ProgressBar.scss index f16163c87c..f9b3abef5e 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 $accent-color; + @mixin ProgressBarColour $accent; @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 587dbdfdfe..b43ff084df 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 $accent-color; + border-left: 2px solid $accent; border-radius: 2px; .mx_ReplyChain_show { diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss index ae60b9a2f6..3d20b73ba0 100644 --- a/res/css/views/elements/_RichText.scss +++ b/res/css/views/elements/_RichText.scss @@ -48,7 +48,7 @@ a.mx_Pill { } .mx_UserPill_selected { - background-color: $accent-color !important; + background-color: $accent !important; } /* More specific to override `.markdown-body a` color */ @@ -57,7 +57,7 @@ a.mx_Pill { .mx_EventTile_content .mx_AtRoomPill, .mx_MessageComposer_input .mx_AtRoomPill { color: $accent-fg-color; - background-color: $warning-color; + background-color: $alert; } /* 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 a14998259d..cb92a6d17d 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: $accent-color; + color: $accent; background-color: $button-secondary-bg-color; - border-color: $accent-color; + border-color: $accent; } .mx_SSOButton_default.mx_SSOButton_primary { color: $button-primary-fg-color; - background-color: $accent-color; + background-color: $accent; } .mx_SSOButton_mini { diff --git a/res/css/views/elements/_Slider.scss b/res/css/views/elements/_Slider.scss index 66393405bb..6b590f34af 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: $accent-color; + background-color: $accent; border-radius: 50%; z-index: 10; } @@ -72,7 +72,7 @@ limitations under the License. .mx_Slider_selection > hr { margin: 0; - border: 0.2em solid $accent-color; + border: 0.2em solid $accent; } .mx_Slider_dot { @@ -84,7 +84,7 @@ limitations under the License. } .mx_Slider_dotActive { - background-color: $accent-color; + background-color: $accent; } .mx_Slider_dotValue { diff --git a/res/css/views/elements/_StyledCheckbox.scss b/res/css/views/elements/_StyledCheckbox.scss index 398214b9b0..be671f1e9c 100644 --- a/res/css/views/elements/_StyledCheckbox.scss +++ b/res/css/views/elements/_StyledCheckbox.scss @@ -87,18 +87,18 @@ limitations under the License. } &:checked + label > .mx_Checkbox_background { - background: $accent-color; - border-color: $accent-color; + background: $accent; + border-color: $accent; } } .mx_Checkbox.mx_Checkbox_kind_outline input[type=checkbox] { & + label > .mx_Checkbox_background .mx_Checkbox_checkmark { - background: $accent-color; + background: $accent; } &:checked + label > .mx_Checkbox_background { background: transparent; - border-color: $accent-color; + border-color: $accent; } } diff --git a/res/css/views/elements/_StyledRadioButton.scss b/res/css/views/elements/_StyledRadioButton.scss index 3f92abe512..f733fd6c8b 100644 --- a/res/css/views/elements/_StyledRadioButton.scss +++ b/res/css/views/elements/_StyledRadioButton.scss @@ -21,7 +21,7 @@ limitations under the License. .mx_StyledRadioButton { $radio-circle-color: $quaternary-content; - $active-radio-circle-color: $accent-color; + $active-radio-circle-color: $accent; position: relative; display: flex; @@ -126,5 +126,5 @@ limitations under the License. } .mx_StyledRadioButton_checked { - border-color: $accent-color; + border-color: $accent; } diff --git a/res/css/views/elements/_ToggleSwitch.scss b/res/css/views/elements/_ToggleSwitch.scss index 2695e72d6d..e5e90e2d57 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: $accent-color; + background-color: $accent; > .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 94de00185e..5546515d94 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: $accent-color; + color: $accent; &::before { mask-image: url('$(res)/img/feather-customised/check.svg'); - background-color: $accent-color; + background-color: $accent; } } &.mx_Validation_invalid { - color: $warning-color; + color: $alert; &::before { mask-image: url('$(res)/img/feather-customised/x.svg'); - background-color: $warning-color; + background-color: $alert; } } } diff --git a/res/css/views/emojipicker/_EmojiPicker.scss b/res/css/views/emojipicker/_EmojiPicker.scss index 67ff7b4f64..2a59310cf7 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 $accent-color; + border-bottom: 2px solid $accent; } } @@ -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 $accent-color; + border-bottom: 2px solid $accent; } .mx_EmojiPicker_search { @@ -178,7 +178,7 @@ limitations under the License. .mx_EmojiPicker_item_selected { color: rgba(0, 0, 0, .5); - border: 1px solid $accent-color; + border: 1px solid $accent; padding: 4px; } diff --git a/res/css/views/messages/_MFileBody.scss b/res/css/views/messages/_MFileBody.scss index e23696e6a9..ccb6b9a355 100644 --- a/res/css/views/messages/_MFileBody.scss +++ b/res/css/views/messages/_MFileBody.scss @@ -15,7 +15,7 @@ limitations under the License. */ .mx_MFileBody_download { - color: $accent-color; + color: $accent; .mx_MFileBody_download_icon { // 12px instead of 14px to better match surrounding font size @@ -26,13 +26,13 @@ limitations under the License. mask-position: center; mask-repeat: no-repeat; mask-image: url("$(res)/img/download.svg"); - background-color: $accent-color; + background-color: $accent; display: inline-block; } } .mx_MFileBody_download a { - color: $accent-color; + color: $accent; text-decoration: none; cursor: pointer; } diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index 920c3011f5..0981cbf113 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -81,12 +81,12 @@ $timelineImageBorderRadius: 4px; background-color: $header-panel-bg-color; .mx_HiddenImagePlaceholder_button { - color: $accent-color; + color: $accent; span.mx_HiddenImagePlaceholder_eye { margin-right: 8px; - background-color: $accent-color; + background-color: $accent; mask-image: url('$(res)/img/feather-customised/eye.svg'); display: inline-block; width: 18px; diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss index b3bff5480f..2f20316d84 100644 --- a/res/css/views/messages/_ReactionsRowButton.scss +++ b/res/css/views/messages/_ReactionsRowButton.scss @@ -32,7 +32,7 @@ limitations under the License. &.mx_ReactionsRowButton_selected { background-color: $reaction-row-button-selected-bg-color; - border-color: $accent-color; + border-color: $accent; } &.mx_AccessibleButton_disabled { diff --git a/res/css/views/messages/_TextualEvent.scss b/res/css/views/messages/_TextualEvent.scss index e87fed90de..607ed9cecb 100644 --- a/res/css/views/messages/_TextualEvent.scss +++ b/res/css/views/messages/_TextualEvent.scss @@ -19,7 +19,7 @@ limitations under the License. overflow-y: hidden; a { - color: $accent-color; + color: $accent; cursor: pointer; } } diff --git a/res/css/views/messages/_ViewSourceEvent.scss b/res/css/views/messages/_ViewSourceEvent.scss index b0e40a5152..bdb036fe17 100644 --- a/res/css/views/messages/_ViewSourceEvent.scss +++ b/res/css/views/messages/_ViewSourceEvent.scss @@ -34,7 +34,7 @@ limitations under the License. mask-position: 0 center; mask-size: auto 12px; visibility: hidden; - background-color: $accent-color; + background-color: $accent; mask-image: url('$(res)/img/feather-customised/maximise.svg'); } diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss index ad986575a2..6de3f45f02 100644 --- a/res/css/views/messages/_common_CryptoEvent.scss +++ b/res/css/views/messages/_common_CryptoEvent.scss @@ -31,12 +31,12 @@ limitations under the License. &.mx_cryptoEvent_icon_verified::after { mask-image: url("$(res)/img/e2e/verified.svg"); - background-color: $accent-color; + background-color: $accent; } &.mx_cryptoEvent_icon_warning::after { mask-image: url("$(res)/img/e2e/warning.svg"); - background-color: $notice-primary-color; + background-color: $alert; } .mx_cryptoEvent_state, .mx_cryptoEvent_buttons { diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss index e08a11cd36..539793eef6 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.scss +++ b/res/css/views/right_panel/_RoomSummaryCard.scss @@ -190,7 +190,7 @@ limitations under the License. } .mx_RoomSummaryCard_app_pinToggle::before { - background-color: $accent-color; + background-color: $accent; } } diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss index a015ef29a7..8e01cf8b5e 100644 --- a/res/css/views/right_panel/_UserInfo.scss +++ b/res/css/views/right_panel/_UserInfo.scss @@ -188,12 +188,12 @@ limitations under the License. .mx_UserInfo_field { cursor: pointer; - color: $accent-color; + color: $accent; line-height: $font-16px; margin: 8px 0; &.mx_UserInfo_destructive { - color: $warning-color; + color: $alert; } } @@ -225,12 +225,12 @@ limitations under the License. &.mx_UserInfo_device_verified { .mx_UserInfo_device_trusted { - color: $accent-color; + color: $accent; } } &.mx_UserInfo_device_unverified { .mx_UserInfo_device_trusted { - color: $warning-color; + color: $alert; } } diff --git a/res/css/views/right_panel/_WidgetCard.scss b/res/css/views/right_panel/_WidgetCard.scss index 824f1fcb2f..edf9ba7dd7 100644 --- a/res/css/views/right_panel/_WidgetCard.scss +++ b/res/css/views/right_panel/_WidgetCard.scss @@ -58,6 +58,6 @@ limitations under the License. } .mx_WidgetCard_maxPinnedTooltip { - background-color: $notice-primary-color; + background-color: $alert; color: #ffffff; } diff --git a/res/css/views/room_settings/_AliasSettings.scss b/res/css/views/room_settings/_AliasSettings.scss index f8d92e7828..3c7cdd803f 100644 --- a/res/css/views/room_settings/_AliasSettings.scss +++ b/res/css/views/room_settings/_AliasSettings.scss @@ -22,7 +22,7 @@ limitations under the License. } .mx_AliasSettings_editable:focus { - border-bottom: 1px solid $accent-color; + border-bottom: 1px solid $accent; outline: none; box-shadow: none; } @@ -30,7 +30,7 @@ limitations under the License. .mx_AliasSettings { summary { cursor: pointer; - color: $accent-color; + color: $accent; font-weight: 600; list-style: none; diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index 1276b13fde..30f969262f 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -310,7 +310,7 @@ $MinWidth: 240px; .mx_AppPermissionWarning_helpIcon::before { display: inline-block; - background-color: $accent-color; + background-color: $accent; mask-repeat: no-repeat; mask-size: 12px; width: 12px; diff --git a/res/css/views/rooms/_E2EIcon.scss b/res/css/views/rooms/_E2EIcon.scss index 68ad44cf6a..67916767b6 100644 --- a/res/css/views/rooms/_E2EIcon.scss +++ b/res/css/views/rooms/_E2EIcon.scss @@ -65,7 +65,7 @@ limitations under the License. .mx_E2EIcon_warning::after { mask-image: url('$(res)/img/e2e/warning.svg'); - background-color: $notice-primary-color; + background-color: $alert; } .mx_E2EIcon_normal::after { @@ -75,5 +75,5 @@ limitations under the License. .mx_E2EIcon_verified::after { mask-image: url('$(res)/img/e2e/verified.svg'); - background-color: $accent-color; + background-color: $accent; } diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss index 136ae0d4eb..af7f0f8049 100644 --- a/res/css/views/rooms/_EditMessageComposer.scss +++ b/res/css/views/rooms/_EditMessageComposer.scss @@ -32,7 +32,7 @@ limitations under the License. padding: 3px 6px; &:focus { - border-color: $accent-color-50pct; + border-color: rgba($accent, 0.5); // Only ever used here } } diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 9332171bd1..7e2a1ec45e 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: $warning-color; + color: $alert; } /* For replies */ diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 2ca72d6a43..a018ec3f74 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -121,14 +121,14 @@ $left-gutter: 64px; * TODO: ultimately we probably want some transition on here. */ &.mx_EventTile_selected > .mx_EventTile_line { - border-left: $accent-color $selected-message-border-width solid; + border-left: $accent $selected-message-border-width solid; padding-left: calc($left-gutter - $selected-message-border-width); background-color: $event-selected-color; } &.mx_EventTile_highlight, &.mx_EventTile_highlight .markdown-body { - color: $warning-color; + color: $alert; .mx_EventTile_line { background-color: $event-highlight-bg-color; @@ -146,7 +146,7 @@ $left-gutter: 64px; } .mx_EventTile_searchHighlight { - background-color: $accent-color; + background-color: $accent; color: $accent-fg-color; border-radius: 5px; padding-left: 2px; @@ -155,7 +155,7 @@ $left-gutter: 64px; } .mx_EventTile_searchHighlight a { - background-color: $accent-color; + background-color: $accent; color: $accent-fg-color; } @@ -435,7 +435,7 @@ $left-gutter: 64px; .mx_EventTile_e2eIcon_warning { &::after { mask-image: url('$(res)/img/e2e/warning.svg'); - background-color: $notice-primary-color; + background-color: $alert; } opacity: 1; } @@ -582,7 +582,7 @@ $left-gutter: 64px; } .mx_EventTile_content .markdown-body a { - color: $accent-color-alt; + color: $accent-alt; } .mx_EventTile_content .markdown-body blockquote { diff --git a/res/css/views/rooms/_JumpToBottomButton.scss b/res/css/views/rooms/_JumpToBottomButton.scss index 2b38b509de..7c85f51182 100644 --- a/res/css/views/rooms/_JumpToBottomButton.scss +++ b/res/css/views/rooms/_JumpToBottomButton.scss @@ -47,7 +47,7 @@ limitations under the License. .mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge { color: $secondary-accent-color; - background-color: $warning-color; + background-color: $alert; } .mx_JumpToBottomButton_scrollDown { diff --git a/res/css/views/rooms/_LinkPreviewGroup.scss b/res/css/views/rooms/_LinkPreviewGroup.scss index ed341904fd..3edb0722e4 100644 --- a/res/css/views/rooms/_LinkPreviewGroup.scss +++ b/res/css/views/rooms/_LinkPreviewGroup.scss @@ -32,7 +32,7 @@ limitations under the License. } > .mx_AccessibleButton { - color: $accent-color; + color: $accent; text-align: center; } } diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss index cf128ebf36..80b5b28969 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: $accent-color; + background-color: $accent; 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 e1c9bf41a4..36472beae8 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -170,18 +170,18 @@ limitations under the License. /* hack for FF as vertical alignment of custom placeholder text is broken */ .mx_MessageComposer_input textarea::-moz-placeholder { line-height: 100%; - color: $accent-color; + color: $accent; opacity: 1.0; } .mx_MessageComposer_input textarea::-webkit-input-placeholder { - color: $accent-color; + color: $accent; } .mx_MessageComposer_button_highlight { - background: rgba($accent-color, 0.25); + background: rgba($accent, 0.25); // make the icon the accent color too &::before { - background-color: $accent-color !important; + background-color: $accent !important; } } @@ -234,16 +234,16 @@ limitations under the License. &:hover, &.mx_MessageComposer_closeButtonMenu { &::after { - background: rgba($accent-color, 0.1); + background: rgba($accent, 0.1); } &::before { - background-color: $accent-color; + background-color: $accent; } } &.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled)::before { - background-color: $warning-color; + background-color: $alert; } } @@ -282,7 +282,7 @@ limitations under the License. width: 32px; height: 32px; border-radius: 100%; - background-color: $accent-color; + background-color: $accent; &::before { position: absolute; diff --git a/res/css/views/rooms/_NotificationBadge.scss b/res/css/views/rooms/_NotificationBadge.scss index 670e057cfa..c06f9f5075 100644 --- a/res/css/views/rooms/_NotificationBadge.scss +++ b/res/css/views/rooms/_NotificationBadge.scss @@ -36,7 +36,7 @@ limitations under the License. &.mx_NotificationBadge_highlighted { // TODO: Use a more specific variable - background-color: $warning-color; + background-color: $alert; } // These are the 3 background types diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 81dfa90c96..b98c71b923 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -63,7 +63,7 @@ limitations under the License. } .mx_RoomHeader_textButton_danger { - background-color: $warning-color; + background-color: $alert; } .mx_RoomHeader_cancelButton { @@ -145,7 +145,7 @@ limitations under the License. } .mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) { - color: $accent-color; + color: $accent; } .mx_RoomHeader_placeholder { @@ -159,7 +159,7 @@ limitations under the License. } .mx_RoomHeader_editable:focus { - border-bottom: 1px solid $accent-color !important; + border-bottom: 1px solid $accent !important; outline: none; box-shadow: none; } @@ -228,10 +228,10 @@ limitations under the License. } &:hover { - background: rgba($accent-color, 0.1); + background: rgba($accent, 0.1); &::before { - background-color: $accent-color; + background-color: $accent; } } } @@ -245,7 +245,7 @@ limitations under the License. mask-image: url('$(res)/img/element-icons/room/apps.svg'); } .mx_RoomHeader_appsButton_highlight::before { - background-color: $accent-color; + background-color: $accent; } .mx_RoomHeader_searchButton::before { diff --git a/res/css/views/rooms/_RoomUpgradeWarningBar.scss b/res/css/views/rooms/_RoomUpgradeWarningBar.scss index 1c477cedfe..efa2ccc531 100644 --- a/res/css/views/rooms/_RoomUpgradeWarningBar.scss +++ b/res/css/views/rooms/_RoomUpgradeWarningBar.scss @@ -34,16 +34,16 @@ limitations under the License. } .mx_RoomUpgradeWarningBar_header { - color: $warning-color; + color: $alert; font-weight: bold; } .mx_RoomUpgradeWarningBar_body { - color: $warning-color; + color: $alert; } .mx_RoomUpgradeWarningBar_upgradelink { - color: $warning-color; + color: $alert; text-decoration: underline; } diff --git a/res/css/views/rooms/_SearchBar.scss b/res/css/views/rooms/_SearchBar.scss index 234363245a..f6d3478e20 100644 --- a/res/css/views/rooms/_SearchBar.scss +++ b/res/css/views/rooms/_SearchBar.scss @@ -31,7 +31,7 @@ limitations under the License. cursor: pointer; width: 37px; height: 37px; - background-color: $accent-color; + background-color: $accent; mask: url('$(res)/img/feather-customised/search-input.svg'); mask-repeat: no-repeat; mask-position: center; @@ -48,7 +48,7 @@ limitations under the License. font-size: $font-15px; cursor: pointer; color: $primary-content; - border-bottom: 2px solid $accent-color; + border-bottom: 2px solid $accent; font-weight: 600; } @@ -58,7 +58,7 @@ limitations under the License. } .mx_SearchBar_cancel { - background-color: $warning-color; + background-color: $alert; mask: url('$(res)/img/cancel.svg'); mask-repeat: no-repeat; mask-position: center; diff --git a/res/css/views/rooms/_Stickers.scss b/res/css/views/rooms/_Stickers.scss index b582c7efaf..94d1c6b779 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: $accent-color; + color: $accent; } .mx_Stickers_hideStickers { diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.scss b/res/css/views/rooms/_TopUnreadMessagesBar.scss index 7c7d96e713..fbb7cb0b1e 100644 --- a/res/css/views/rooms/_TopUnreadMessagesBar.scss +++ b/res/css/views/rooms/_TopUnreadMessagesBar.scss @@ -33,7 +33,7 @@ limitations under the License. height: 4px; border-radius: 16px; background-color: $secondary-accent-color; - border: 6px solid $accent-color; + border: 6px solid $accent; pointer-events: none; } diff --git a/res/css/views/settings/_IntegrationManager.scss b/res/css/views/settings/_IntegrationManager.scss index 81b01ab8de..043e7201ca 100644 --- a/res/css/views/settings/_IntegrationManager.scss +++ b/res/css/views/settings/_IntegrationManager.scss @@ -40,5 +40,5 @@ limitations under the License. } .mx_IntegrationManager_error h3 { - color: $warning-color; + color: $alert; } diff --git a/res/css/views/settings/_JoinRuleSettings.scss b/res/css/views/settings/_JoinRuleSettings.scss index 721dbe039e..76b1b6333a 100644 --- a/res/css/views/settings/_JoinRuleSettings.scss +++ b/res/css/views/settings/_JoinRuleSettings.scss @@ -17,9 +17,9 @@ limitations under the License. .mx_JoinRuleSettings_upgradeRequired { margin-left: 16px; padding: 4px 16px; - border: 1px solid $accent-color; + border: 1px solid $accent; border-radius: 8px; - color: $accent-color; + color: $accent; font-size: $font-12px; line-height: $font-15px; } diff --git a/res/css/views/settings/_LayoutSwitcher.scss b/res/css/views/settings/_LayoutSwitcher.scss index ef82c41b77..7836219085 100644 --- a/res/css/views/settings/_LayoutSwitcher.scss +++ b/res/css/views/settings/_LayoutSwitcher.scss @@ -57,7 +57,7 @@ limitations under the License. } &.mx_LayoutSwitcher_RadioButton_selected { - border-color: $accent-color; + border-color: $accent; } } @@ -70,7 +70,7 @@ limitations under the License. } .mx_StyledRadioButton_checked { - background-color: rgba($accent-color, 0.08); + background-color: rgba($accent, 0.08); } .mx_EventTile { diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss index 5aa9db7e86..684935152c 100644 --- a/res/css/views/settings/tabs/_SettingsTab.scss +++ b/res/css/views/settings/tabs/_SettingsTab.scss @@ -15,11 +15,11 @@ limitations under the License. */ .mx_SettingsTab { - color: $muted-fg-color; + color: $primary-content; } .mx_SettingsTab_warningText { - color: $warning-color; + color: $alert; } .mx_SettingsTab_heading { @@ -91,10 +91,10 @@ limitations under the License. .mx_SettingsTab_linkBtn { cursor: pointer; - color: $accent-color; + color: $accent; word-break: break-all; } .mx_SettingsTab a { - color: $accent-color-alt; + color: $accent-alt; } diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss index c237856e60..e967139cd9 100644 --- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss @@ -32,7 +32,7 @@ limitations under the License. } .mx_AppearanceUserSettingsTab_AdvancedToggle { - color: $accent-color; + color: $accent; cursor: pointer; } diff --git a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss index f1ad2352f2..80cb72f254 100644 --- a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss @@ -35,7 +35,7 @@ limitations under the License. } .mx_SecurityUserSettingsTab_warning { - color: $notice-primary-color; + color: $alert; position: relative; padding-left: 40px; margin-top: 30px; @@ -50,7 +50,7 @@ limitations under the License. content: ""; top: 0; left: 0; - background-color: $notice-primary-color; + background-color: $alert; mask-image: url('$(res)/img/feather-customised/alert-triangle.svg'); } } diff --git a/res/css/views/spaces/_SpaceBasicSettings.scss b/res/css/views/spaces/_SpaceBasicSettings.scss index bff574ded3..a8e0e0e2f2 100644 --- a/res/css/views/spaces/_SpaceBasicSettings.scss +++ b/res/css/views/spaces/_SpaceBasicSettings.scss @@ -69,7 +69,7 @@ limitations under the License. } > .mx_SpaceBasicSettings_avatar_remove { - color: $notice-primary-color; + color: $alert; } } diff --git a/res/css/views/spaces/_SpaceCreateMenu.scss b/res/css/views/spaces/_SpaceCreateMenu.scss index 7084c2f20e..06c799af57 100644 --- a/res/css/views/spaces/_SpaceCreateMenu.scss +++ b/res/css/views/spaces/_SpaceCreateMenu.scss @@ -116,7 +116,7 @@ $spacePanelWidth: 68px; } .mx_AccessibleButton_kind_link { - color: $accent-color; + color: $accent; position: relative; padding: 0; margin-left: 8px; diff --git a/res/css/views/terms/_InlineTermsAgreement.scss b/res/css/views/terms/_InlineTermsAgreement.scss index 1d0e3ea8c5..432f39a693 100644 --- a/res/css/views/terms/_InlineTermsAgreement.scss +++ b/res/css/views/terms/_InlineTermsAgreement.scss @@ -19,7 +19,7 @@ limitations under the License. font-size: $font-14px; a { - color: $accent-color; + color: $accent; text-decoration: none; } @@ -35,7 +35,7 @@ limitations under the License. .mx_InlineTermsAgreement_link { display: inline-block; mask-image: url('$(res)/img/external-link.svg'); - background-color: $accent-color; + background-color: $accent; mask-repeat: no-repeat; mask-size: contain; width: 12px; diff --git a/res/css/views/toasts/_AnalyticsToast.scss b/res/css/views/toasts/_AnalyticsToast.scss index fdbe7f1c76..15a94420fa 100644 --- a/res/css/views/toasts/_AnalyticsToast.scss +++ b/res/css/views/toasts/_AnalyticsToast.scss @@ -17,11 +17,11 @@ limitations under the License. .mx_AnalyticsToast { .mx_AccessibleButton_kind_danger { background: none; - color: $accent-color; + color: $accent; } .mx_AccessibleButton_kind_primary { - background: $accent-color; + background: $accent; color: #ffffff; } } diff --git a/res/css/views/voip/_DialPad.scss b/res/css/views/voip/_DialPad.scss index 288f1f5d31..c0ae2270f6 100644 --- a/res/css/views/voip/_DialPad.scss +++ b/res/css/views/voip/_DialPad.scss @@ -50,7 +50,7 @@ limitations under the License. .mx_DialPad_dialButton { /* Always show the dial button in the center grid column */ grid-column: 2; - background-color: $accent-color; + background-color: $accent; &::before { content: ''; diff --git a/res/css/views/voip/_DialPadContextMenu.scss b/res/css/views/voip/_DialPadContextMenu.scss index d2014241e9..905486de8a 100644 --- a/res/css/views/voip/_DialPadContextMenu.scss +++ b/res/css/views/voip/_DialPadContextMenu.scss @@ -47,7 +47,7 @@ limitations under the License. } .mx_DialPadContextMenu_header:focus-within { - border-bottom: 1px solid $accent-color; + border-bottom: 1px solid $accent; } .mx_DialPadContextMenu_title { diff --git a/res/css/views/voip/_DialPadModal.scss b/res/css/views/voip/_DialPadModal.scss index f378507f90..ff1ded029c 100644 --- a/res/css/views/voip/_DialPadModal.scss +++ b/res/css/views/voip/_DialPadModal.scss @@ -35,7 +35,7 @@ limitations under the License. } .mx_DialPadModal_header:focus-within { - border-bottom: 1px solid $accent-color; + border-bottom: 1px solid $accent; } .mx_DialPadModal_title { diff --git a/res/css/views/voip/_VideoFeed.scss b/res/css/views/voip/_VideoFeed.scss index 1f17a54692..1d3c3e1d50 100644 --- a/res/css/views/voip/_VideoFeed.scss +++ b/res/css/views/voip/_VideoFeed.scss @@ -27,7 +27,7 @@ limitations under the License. } &.mx_VideoFeed_speaking { - border: $accent-color 2px solid; + border: $accent 2px solid; .mx_VideoFeed_video { border-radius: 0; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index f214681f58..3ab4d68df4 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -199,7 +199,7 @@ $eventbubble-reply-color: #C1C6CD; font-family: $font-family; font-size: $font-14px; color: $button-fg-color; - background-color: $accent-color; + background-color: $accent; width: auto; padding: 7px; padding-left: 1.5em; @@ -210,19 +210,19 @@ $eventbubble-reply-color: #C1C6CD; } @define-mixin mx_DialogButton_danger { - background-color: $accent-color; + background-color: $accent; } @define-mixin mx_DialogButton_secondary { // flip colours for the secondary ones font-weight: 600; - border: 1px solid $accent-color !important; - color: $accent-color; + border: 1px solid $accent !important; + color: $accent; background-color: $button-secondary-bg-color; } @define-mixin mx_Dialog_link { - color: $accent-color; + color: $accent; text-decoration: none; } diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index 99e223134f..b9afbc5134 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -206,7 +206,7 @@ $eventbubble-reply-color: #C1C6CD; font-family: $font-family; font-size: $font-14px; color: $button-fg-color; - background-color: $accent-color; + background-color: $accent; width: auto; padding: 7px; padding-left: 1.5em; @@ -217,19 +217,19 @@ $eventbubble-reply-color: #C1C6CD; } @define-mixin mx_DialogButton_danger { - background-color: $accent-color; + background-color: $accent; } @define-mixin mx_DialogButton_secondary { // flip colours for the secondary ones font-weight: 600; - border: 1px solid $accent-color !important; - color: $accent-color; + border: 1px solid $accent !important; + color: $accent; background-color: $button-secondary-bg-color; } @define-mixin mx_Dialog_link { - color: $accent-color; + color: $accent; text-decoration: none; } diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index afdda9da84..83255da36d 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -14,10 +14,6 @@ $monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI // unified palette // try to use these colors when possible -$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); $header-panel-bg-color: #f3f8fd; // typical text (dark-on-white in light skin) @@ -35,20 +31,12 @@ $focus-bg-color: #dddddd; // button UI (white-on-green in light skin) $accent-fg-color: #ffffff; -$accent-color-50pct: rgba(3, 179, 129, 0.5); //#03b381 in rgb -$accent-color-darker: #92caad; -$accent-color-alt: #238cf5; +$accent-alt: #238cf5; $selection-fg-color: $primary-bg-color; $focus-brightness: 105%; -// warning colours -$warning-color: $notice-primary-color; // red -$orange-warning-color: #ff8d13; // used for true warnings -// background colour for warnings -$warning-bg-color: #df2a8b; -$info-bg-color: #2a9edf; $other-user-pill-bg-color: rgba(0, 0, 0, 0.1); // informational plinth @@ -223,7 +211,7 @@ $collapse-button-url: "$(res)/img/feather-customised/minimise.svg"; $expand-button-url: "$(res)/img/feather-customised/maximise.svg"; // e2e -$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color +$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent $e2e-unknown-color: #e8bf37; $e2e-unverified-color: #e8bf37; $e2e-warning-color: #ba6363; @@ -318,7 +306,7 @@ $groupFilterPanel-divider-color: $tertiary-content; font-family: $font-family; font-size: $font-14px; color: $button-fg-color; - background-color: $accent-color; + background-color: $accent; width: auto; padding: 7px; padding-left: 1.5em; @@ -332,7 +320,7 @@ $groupFilterPanel-divider-color: $tertiary-content; } @define-mixin mx_DialogButton_danger { - background-color: $accent-color; + background-color: $accent; } @define-mixin mx_DialogButton_small { @@ -344,13 +332,13 @@ $groupFilterPanel-divider-color: $tertiary-content; @define-mixin mx_DialogButton_secondary { // flip colours for the secondary ones font-weight: 600; - border: 1px solid $accent-color !important; - color: $accent-color; + border: 1px solid $accent !important; + color: $accent; background-color: $button-secondary-bg-color; } @define-mixin mx_Dialog_link { - color: $accent-color; + color: $accent; text-decoration: none; } diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index 1f09fbbb51..7ad3d9a254 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -37,10 +37,7 @@ $space-nav: rgba($panel-base, 0.1); // // --accent-color -$accent-color: var(--accent-color); -$accent-bg-color: var(--accent-color-15pct); $username-variant3-color: var(--accent-color); -$accent-color-50pct: var(--accent-color-50pct); //still needs alpha at .5 // // --timeline-background-color $button-secondary-bg-color: var(--timeline-background-color); @@ -112,13 +109,10 @@ $greyed-fg-color: var(--timeline-text-secondary-color); $info-plinth-fg-color: var(--timeline-text-secondary-color); // // --primary-color -$accent-color-alt: var(--primary-color); +$accent-alt: var(--primary-color); $input-focused-border-color: var(--primary-color); // // --warning-color -$warning-color: var(--warning-color); -$notice-primary-color: var(--warning-color); -$warning-color: var(--warning-color); $button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5 // // --username colors (which use a 0-based index) 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 c423f99438..c9d66aabf4 100644 --- a/res/themes/light-high-contrast/css/_light-high-contrast.scss +++ b/res/themes/light-high-contrast/css/_light-high-contrast.scss @@ -18,13 +18,11 @@ $username-variant6-color: #1C7274; $username-variant7-color: #5C56F5; $username-variant8-color: #3E810A; -$accent-color: $accent; -$accent-color-50pct: rgba($accent-color, 0.5); -$accent-color-alt: $links; +$accent-alt: $links; $input-border-color: $secondary-content; $input-darker-bg-color: $quinary-content; $input-darker-fg-color: $secondary-content; -$input-focused-border-color: $accent-color; +$input-focused-border-color: $accent; $resend-button-divider-color: $input-darker-bg-color; $icon-button-color: $quaternary-content; $theme-button-bg-color: $quinary-content; @@ -36,30 +34,28 @@ $voice-record-stop-border-color: $quinary-content; $voice-record-icon-color: $tertiary-content; $appearance-tab-border-color: $input-darker-bg-color; $eventbubble-reply-color: $quaternary-content; -$notice-primary-color: $alert; -$warning-color: $notice-primary-color; // red $roomtopic-color: $secondary-content; @define-mixin mx_DialogButton_danger { - background-color: $accent-color; + background-color: $accent; } @define-mixin mx_DialogButton_secondary { // flip colours for the secondary ones font-weight: 600; - border: 1px solid $accent-color !important; - color: $accent-color; + border: 1px solid $accent !important; + color: $accent; background-color: $button-secondary-bg-color; } @define-mixin mx_Dialog_link { - color: $accent-color; + color: $accent; text-decoration: none; } // Draw an outline on buttons with focus .mx_AccessibleButton:focus { - outline: 2px solid $accent-color; + outline: 2px solid $accent; outline-offset: 2px; } @@ -78,7 +74,6 @@ $roomtopic-color: $secondary-content; padding-left: 4px !important; } - .mx_BasicMessageComposer .mx_BasicMessageComposer_inputEmpty > :first-child::before { color: $secondary-content; opacity: 1 !important; diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 76f142e066..4e3da74bce 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -33,10 +33,6 @@ $space-nav: rgba($tertiary-content, 0.15); // unified palette // try to use these colors when possible -$accent-color: $accent; -$accent-bg-color: rgba(3, 179, 129, 0.16); -$notice-primary-color: $alert; -$notice-primary-bg-color: rgba(255, 75, 85, 0.16); $header-panel-bg-color: #f3f8fd; // typical text (dark-on-white in light skin) @@ -50,20 +46,12 @@ $focus-bg-color: #dddddd; // button UI (white-on-green in light skin) $accent-fg-color: $background; -$accent-color-50pct: rgba($accent-color, 0.5); -$accent-color-darker: #92caad; -$accent-color-alt: #238CF5; +$accent-alt: #238CF5; $selection-fg-color: $background; $focus-brightness: 105%; -// warning colours -$warning-color: $notice-primary-color; // red -$orange-warning-color: #ff8d13; // used for true warnings -// background colour for warnings -$warning-bg-color: #DF2A8B; -$info-bg-color: #2A9EDF; $other-user-pill-bg-color: rgba(0, 0, 0, 0.1); // informational plinth @@ -214,7 +202,7 @@ $collapse-button-url: "$(res)/img/feather-customised/minimise.svg"; $expand-button-url: "$(res)/img/feather-customised/maximise.svg"; // e2e -$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color +$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent $e2e-unknown-color: #e8bf37; $e2e-unverified-color: #e8bf37; $e2e-warning-color: #ba6363; @@ -276,7 +264,7 @@ $tooltip-timeline-fg-color: $background; $breadcrumb-placeholder-bg-color: #e8eef5; -// These two don't change between themes. They are the $warning-color, but we don't +// These two don't change between themes. They are the $alert, but we don't // want custom themes to affect them by accident. $voice-record-stop-symbol-color: #ff5b55; $voice-record-live-circle-color: #ff5b55; @@ -311,7 +299,7 @@ $eventbubble-reply-color: $quaternary-content; font-family: $font-family; font-size: $font-14px; color: $button-fg-color; - background-color: $accent-color; + background-color: $accent; width: auto; padding: 7px; padding-left: 1.5em; @@ -325,7 +313,7 @@ $eventbubble-reply-color: $quaternary-content; } @define-mixin mx_DialogButton_danger { - background-color: $accent-color; + background-color: $accent; } @define-mixin mx_DialogButton_small { @@ -337,13 +325,13 @@ $eventbubble-reply-color: $quaternary-content; @define-mixin mx_DialogButton_secondary { // flip colours for the secondary ones font-weight: 600; - border: 1px solid $accent-color !important; - color: $accent-color; + border: 1px solid $accent !important; + color: $accent; background-color: $button-secondary-bg-color; } @define-mixin mx_Dialog_link { - color: $accent-color; + color: $accent; text-decoration: none; }