Give light mode effects on hover/active/focus as well

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>

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

ts/editor-toolbar/LabelButton.svelte

@@ -42,6 +42,10 @@
         width: auto;
         height: var(--toolbar-size);
     }
+
+    .btn-light {
+        @include button.light-hover-active;
+    }
 </style>
 
 <button

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 {

ts/sass/button_mixins.scss

@@ -1,8 +1,6 @@
-@mixin disabled {
+@mixin light-hover-active {
-    &[disabled] {
+    &:hover, &:focus, &:active, &.active {
-        opacity: 0.4;
+        background-color: #e3e3e8;
-        cursor: not-allowed;
+        border-color: #e3e3e8;
-
-        @content;
     }
 }