OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Color cleanup number six (#7050) 

* Remove $voip-decline-color and $voip-accept-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $dialog-background-bg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $mention-user-pill-bg-color -> $warning-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $plinth-bg-color -> $secondary-accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $input-lighter-fg-color -> $input-darker-fg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $input-valid-border-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $input-invalid-border-color -> $warning-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $button-bg-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $avatar-bg-color -> $background

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $preview-widget-fg-color -> $greyed-fg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $settings-profile-button-fg-color -> $settings-profile-overlay-placeholder-fg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $presence-online -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $pinned-unread-color -> $notice-primary-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $event-highlight-fg-color -> $warning-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $tab-label-active-bg-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $button-primary-bg-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $button-danger-bg-color -> $notice-primary-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $button-link-fg-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $togglesw-on-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $slider-selection-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $progressbar-fg-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $authpage-body-bg-color -> $background

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Fix merge issue

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Fix second merge issue

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
pull/21833/head
Šimon Brandner 2021-11-08 12:50:53 +01:00 committed by GitHub
parent f08c0b3592
commit 07d9e93d67
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 65 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
res/css/_common.scss
View File

@ -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;
}

2
res/css/structures/_RightPanel.scss
View File

@ -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 {

2
res/css/structures/_TabbedView.scss
View File

@ -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;
}

8
res/css/views/auth/_AuthBody.scss
View File

@ -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;

2
res/css/views/auth/_CompleteSecurityBody.scss
View File

@ -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;

2
res/css/views/avatars/_BaseAvatar.scss
View File

@ -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;
}

2
res/css/views/avatars/_DecoratedRoomAvatar.scss
View File

@ -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 {

4
res/css/views/dialogs/_ForwardDialog.scss
View File

@ -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;

8
res/css/views/dialogs/security/_AccessSecretStorageDialog.scss
View File

@ -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;
}
}

2
res/css/views/directory/_NetworkDropdown.scss
View File

@ -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;
}
}
}

26
res/css/views/elements/_AccessibleButton.scss
View File

@ -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');

2
res/css/views/elements/_DirectorySearchBox.scss
View File

@ -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%;

8
res/css/views/elements/_Field.scss
View File

@ -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;
}
}

2
res/css/views/elements/_ProgressBar.scss
View File

@ -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;

2
res/css/views/elements/_ReplyChain.scss
View File

@ -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 {

2
res/css/views/elements/_RichText.scss
View File

@ -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 */

6
res/css/views/elements/_SSOButtons.scss
View File

@ -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 {

6
res/css/views/elements/_Slider.scss
View File

@ -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 {

2
res/css/views/elements/_ToggleSwitch.scss
View File

@ -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);

8
res/css/views/elements/_Validation.scss
View File

@ -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;
}
}
}

6
res/css/views/emojipicker/_EmojiPicker.scss
View File

@ -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;
}

2
res/css/views/rooms/_BasicMessageComposer.scss
View File

@ -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;

2
res/css/views/rooms/_EventBubbleTile.scss
View File

@ -43,7 +43,7 @@ limitations under the License.
background-color: $event-highlight-bg-color;
}
color: $event-highlight-fg-color;
color: $warning-color;
}
/* For replies */

2
res/css/views/rooms/_EventTile.scss
View File

@ -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;

2
res/css/views/rooms/_LinkPreviewWidget.scss
View File

@ -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 {

2
res/css/views/rooms/_MemberList.scss
View File

@ -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;

2
res/css/views/rooms/_MessageComposer.scss
View File

@ -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;

2
res/css/views/rooms/_Stickers.scss
View File

@ -42,7 +42,7 @@
.mx_Stickers_addLink {
display: inline;
cursor: pointer;
color: $button-link-fg-color;
color: $accent-color;
}
.mx_Stickers_hideStickers {

2
res/css/views/settings/_AvatarSetting.scss
View File

@ -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');
}
}

16
res/themes/dark/css/_dark.scss
View File

@ -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;

18
res/themes/legacy-dark/css/_legacy-dark.scss
View File

@ -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;

28
res/themes/legacy-light/css/_legacy-light.scss
View File

@ -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;

16
res/themes/light-custom/css/_custom.scss
View File

@ -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
//

15
res/themes/light-high-contrast/css/_light-high-contrast.scss
View File

@ -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 {

28
res/themes/light/css/_light.scss
View File

@ -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;