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>
matrix-org · Nov 8, 2021 · 07d9e93 · 07d9e93
1 parent f08c0b3
commit 07d9e93
Show file tree

Hide file tree

Showing 35 changed files with 65 additions and 176 deletions.
diff --git a/res/css/_common.scss b/res/css/_common.scss
@@ -221,7 +221,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
     .mx_textinput {
-        color: $input-lighter-fg-color;
+        color: $input-darker-fg-color;
         background-color: $input-lighter-bg-color;
         border: none;
     }

diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss
@@ -104,7 +104,7 @@ limitations under the License.
 }
 
 $dot-size: 8px;
-$pulse-color: $pinned-unread-color;
+$pulse-color: $notice-primary-color;
 
 .mx_RightPanel_pinnedMessagesButton {
     &::before {

diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss
@@ -44,7 +44,7 @@ limitations under the License.
     }
 
     .mx_TabbedView_tabLabel_active {
-        background-color: $tab-label-active-bg-color;
+        background-color: $accent-color;
         color: $tab-label-active-fg-color;
     }
 

diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss
@@ -19,7 +19,7 @@ limitations under the License.
     width: 500px;
     font-size: $font-12px;
     color: $authpage-secondary-color;
-    background-color: $authpage-body-bg-color;
+    background-color: $background;
     border-radius: 0 4px 4px 0;
     padding: 25px 60px;
     box-sizing: border-box;
@@ -55,7 +55,7 @@ limitations under the License.
     .mx_Field input,
     .mx_Field select {
         color: $authpage-primary-color;
-        background-color: $authpage-body-bg-color;
+        background-color: $background;
     }
 
     .mx_Field_labelAlwaysTopLeft label,
@@ -64,7 +64,7 @@ limitations under the License.
     .mx_Field input:not(:placeholder-shown) + label,
     .mx_Field textarea:focus + label,
     .mx_Field textarea:not(:placeholder-shown) + label {
-        background-color: $authpage-body-bg-color;
+        background-color: $background;
     }
 
     input.error {
@@ -88,7 +88,7 @@ limitations under the License.
     }
 
     .mx_Dropdown_menu {
-        background-color: $authpage-body-bg-color;
+        background-color: $background;
 
         .mx_Dropdown_option_highlight {
             background-color: $authpage-focus-bg-color;

diff --git a/res/css/views/auth/_CompleteSecurityBody.scss b/res/css/views/auth/_CompleteSecurityBody.scss
@@ -18,7 +18,7 @@ limitations under the License.
 .mx_CompleteSecurityBody {
     width: 600px;
     color: $authpage-primary-color;
-    background-color: $authpage-body-bg-color;
+    background-color: $background;
     border-radius: 4px;
     padding: 20px;
     box-sizing: border-box;

diff --git a/res/css/views/avatars/_BaseAvatar.scss b/res/css/views/avatars/_BaseAvatar.scss
@@ -43,5 +43,5 @@ limitations under the License.
     object-fit: cover;
     border-radius: 125px;
     vertical-align: top;
-    background-color: $avatar-bg-color;
+    background-color: $background;
 }
diff --git a/res/css/views/avatars/_DecoratedRoomAvatar.scss b/res/css/views/avatars/_DecoratedRoomAvatar.scss
@@ -56,7 +56,7 @@ limitations under the License.
     }
 
     .mx_DecoratedRoomAvatar_icon_online::before {
-        background-color: $presence-online;
+        background-color: $accent-color;
     }
 
     .mx_DecoratedRoomAvatar_icon_away::before {

diff --git a/res/css/views/dialogs/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.scss
@@ -138,7 +138,7 @@ limitations under the License.
                     }
 
                     &.mx_ForwardList_sending .mx_ForwardList_sendIcon {
-                        background-color: $button-primary-bg-color;
+                        background-color: $accent-color;
                         mask-image: url('$(res)/img/element-icons/circle-sending.svg');
                         mask-position: center;
                         mask-repeat: no-repeat;
@@ -148,7 +148,7 @@ limitations under the License.
                     }
 
                     &.mx_ForwardList_sent .mx_ForwardList_sendIcon {
-                        background-color: $button-primary-bg-color;
+                        background-color: $accent-color;
                         mask-image: url('$(res)/img/element-icons/circle-sent.svg');
                         mask-position: center;
                         mask-repeat: no-repeat;

diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss
@@ -100,18 +100,18 @@ limitations under the License.
 }
 
 .mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid {
-    color: $input-valid-border-color;
+    color: $accent-color;
     &::before {
         mask-image: url('$(res)/img/feather-customised/check.svg');
-        background-color: $input-valid-border-color;
+        background-color: $accent-color;
     }
 }
 
 .mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid {
-    color: $input-invalid-border-color;
+    color: $warning-color;
     &::before {
         mask-image: url('$(res)/img/feather-customised/x.svg');
-        background-color: $input-invalid-border-color;
+        background-color: $warning-color;
     }
 }
 

diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss
@@ -108,7 +108,7 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-image: url('$(res)/img/feather-customised/check.svg');
-            background-color: $input-valid-border-color;
+            background-color: $accent-color;
         }
     }
 }

diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss
@@ -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,15 +119,15 @@ 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');
     }
 }
 
 .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_cancel_sm {
-    background-color: $button-danger-bg-color;
+    background-color: $notice-primary-color;
 
     &::before {
         mask-image: url('$(res)/img/feather-customised/x.svg');

diff --git a/res/css/views/elements/_DirectorySearchBox.scss b/res/css/views/elements/_DirectorySearchBox.scss
@@ -25,7 +25,7 @@ limitations under the License.
     padding: 3px;
     padding-left: 10px;
     padding-right: 10px;
-    background-color: $plinth-bg-color;
+    background-color: $secondary-accent-color;
     border-radius: 3px;
     background-image: url('$(res)/img/icon-return.svg');
     background-position: 8px 70%;

diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss
@@ -152,24 +152,24 @@ limitations under the License.
 .mx_Field_valid {
     &.mx_Field,
     &.mx_Field:focus-within {
-        border-color: $input-valid-border-color;
+        border-color: $accent-color;
     }
 
     &.mx_Field label,
     &.mx_Field:focus-within label {
-        color: $input-valid-border-color;
+        color: $accent-color;
     }
 }
 
 .mx_Field_invalid {
     &.mx_Field,
     &.mx_Field:focus-within {
-        border-color: $input-invalid-border-color;
+        border-color: $warning-color;
     }
 
     &.mx_Field label,
     &.mx_Field:focus-within label {
-        color: $input-invalid-border-color;
+        color: $warning-color;
     }
 }
 

diff --git a/res/css/views/elements/_ProgressBar.scss b/res/css/views/elements/_ProgressBar.scss
@@ -22,7 +22,7 @@ progress.mx_ProgressBar {
     border: none;
 
     @mixin ProgressBarBorderRadius 6px;
-    @mixin ProgressBarColour $progressbar-fg-color;
+    @mixin ProgressBarColour $accent-color;
     @mixin ProgressBarBgColour $progressbar-bg-color;
     ::-webkit-progress-value {
         transition: width 1s;

diff --git a/res/css/views/elements/_ReplyChain.scss b/res/css/views/elements/_ReplyChain.scss
@@ -20,7 +20,7 @@ limitations under the License.
     margin-right: 0;
     margin-bottom: 8px;
     padding: 0 10px;
-    border-left: 2px solid $button-bg-color;
+    border-left: 2px solid $accent-color;
     border-radius: 2px;
 
     .mx_ReplyChain_show {

diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss
@@ -57,7 +57,7 @@ a.mx_Pill {
 .mx_EventTile_content .mx_AtRoomPill,
 .mx_MessageComposer_input .mx_AtRoomPill {
     color: $accent-fg-color;
-    background-color: $mention-user-pill-bg-color;
+    background-color: $warning-color;
 }
 
 /* More specific to override `.markdown-body a` color */

diff --git a/res/css/views/elements/_SSOButtons.scss b/res/css/views/elements/_SSOButtons.scss
@@ -46,13 +46,13 @@ limitations under the License.
     }
 
     .mx_SSOButton_default {
-        color: $button-primary-bg-color;
+        color: $accent-color;
         background-color: $button-secondary-bg-color;
-        border-color: $button-primary-bg-color;
+        border-color: $accent-color;
     }
     .mx_SSOButton_default.mx_SSOButton_primary {
         color: $button-primary-fg-color;
-        background-color: $button-primary-bg-color;
+        background-color: $accent-color;
     }
 
     .mx_SSOButton_mini {

diff --git a/res/css/views/elements/_Slider.scss b/res/css/views/elements/_Slider.scss
@@ -56,7 +56,7 @@ limitations under the License.
     position: absolute;
     width: $slider-selection-dot-size;
     height: $slider-selection-dot-size;
-    background-color: $slider-selection-color;
+    background-color: $accent-color;
     border-radius: 50%;
     z-index: 10;
 }
@@ -72,7 +72,7 @@ limitations under the License.
 
 .mx_Slider_selection > hr {
     margin: 0;
-    border: 0.2em solid $slider-selection-color;
+    border: 0.2em solid $accent-color;
 }
 
 .mx_Slider_dot {
@@ -84,7 +84,7 @@ limitations under the License.
 }
 
 .mx_Slider_dotActive {
-    background-color: $slider-selection-color;
+    background-color: $accent-color;
 }
 
 .mx_Slider_dotValue {

diff --git a/res/css/views/elements/_ToggleSwitch.scss b/res/css/views/elements/_ToggleSwitch.scss
@@ -32,7 +32,7 @@ limitations under the License.
 }
 
 .mx_ToggleSwitch.mx_ToggleSwitch_on {
-    background-color: $togglesw-on-color;
+    background-color: $accent-color;
 
     > .mx_ToggleSwitch_ball {
         left: calc(100% - $font-20px);

diff --git a/res/css/views/elements/_Validation.scss b/res/css/views/elements/_Validation.scss
@@ -50,20 +50,20 @@ limitations under the License.
     }
 
     &.mx_Validation_valid {
-        color: $input-valid-border-color;
+        color: $accent-color;
 
         &::before {
             mask-image: url('$(res)/img/feather-customised/check.svg');
-            background-color: $input-valid-border-color;
+            background-color: $accent-color;
         }
     }
 
     &.mx_Validation_invalid {
-        color: $input-invalid-border-color;
+        color: $warning-color;
 
         &::before {
             mask-image: url('$(res)/img/feather-customised/x.svg');
-            background-color: $input-invalid-border-color;
+            background-color: $warning-color;
         }
     }
 }
diff --git a/res/css/views/emojipicker/_EmojiPicker.scss b/res/css/views/emojipicker/_EmojiPicker.scss
@@ -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;
 }