From dd530dcdc8059a4329355d658c35886768c4f054 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 20:06:35 +0200
Subject: [PATCH] Give light mode effects on hover/active/focus as well

---
 ts/editor-toolbar/ColorPicker.svelte  |  7 +++++++
 ts/editor-toolbar/DropdownItem.svelte |  6 ++----
 ts/editor-toolbar/LabelButton.svelte  |  4 ++++
 ts/editor-toolbar/SquareButton.svelte |  7 +++++++
 ts/sass/button_mixins.scss            | 10 ++++------
 5 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 9871a57ff..46b7a2445 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -22,6 +22,8 @@
 </script>
 
 <style lang="scss">
+    @use "ts/sass/button_mixins" as button;
+
     button {
         padding: 0;
         background: content-box linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
@@ -36,8 +38,13 @@
         overflow: hidden;
     }
 
+    .btn-light {
+        @include button.light-hover-active;
+    }
+
     input {
         display: inline-block;
+        cursor: pointer;
         opacity: 0;
     }
 </style>
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
index abfec42fa..a7ca85e4f 100644
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -21,6 +21,8 @@
         display: flex;
         justify-content: space-between;
 
+        color: black;
+
         &.nightMode {
             color: white;
 
@@ -33,10 +35,6 @@
             }
         }
 
-        &:hover, &:focus {
-            color: white;
-        }
-
         &:focus {
             box-shadow: none;
         }
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 5c2d852cf..e95ce5feb 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -42,6 +42,10 @@
         width: auto;
         height: var(--toolbar-size);
     }
+
+    .btn-light {
+        @include button.light-hover-active;
+    }
 </style>
 
 <button
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 1504b31ca..06e2ad397 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -35,8 +35,15 @@
 </script>
 
 <style lang="scss">
+    @use "ts/sass/button_mixins" as button;
+
     button {
         padding: 0;
+
+    }
+
+    .btn-light {
+        @include button.light-hover-active;
     }
 
     span {
diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss
index 41b559f6c..a29d7d45a 100644
--- a/ts/sass/button_mixins.scss
+++ b/ts/sass/button_mixins.scss
@@ -1,8 +1,6 @@
-@mixin disabled {
-    &[disabled] {
-        opacity: 0.4;
-        cursor: not-allowed;
-
-        @content;
+@mixin light-hover-active {
+    &:hover, &:focus, &:active, &.active {
+        background-color: #e3e3e8;
+        border-color: #e3e3e8;
     }
 }