Add buttons_mixins.scss for sharing SCSS across components

ts/editor-toolbar/LabelButton.svelte

@@ -32,27 +32,25 @@
 </script>
 
 <style lang="scss">
+    @use "ts/sass/button_mixins" as button;
+
     button {
         display: inline-block;
-        vertical-align: middle;
-        width: auto;
-        height: var(--toolbar-size);
+        padding: 0 calc(var(--toolbar-size) / 3);
 
         font-size: calc(var(--toolbar-size) / 2.3);
-        padding: 0 calc(var(--toolbar-size) / 3);
+        width: auto;
+        height: var(--toolbar-size);
 
         border-radius: 0;
         border-color: var(--faint-border);
 
-        &:focus {
+        &:hover {
             box-shadow: 0 0 calc(var(--toolbar-size) / 2.5)
                 calc(var(--toolbar-size) / 7.5) rgb(255 255 255 / 0.5);
         }
 
-        &[disabled] {
-            opacity: 0.4;
-            cursor: not-allowed;
-
+        @include button.disabled {
             border-color: var(--faint-border);
         }
     }

ts/editor-toolbar/SquareButton.svelte

@@ -29,6 +29,8 @@
 </script>
 
 <style lang="scss">
+    @use "ts/sass/button_mixins" as button;
+
     button {
         display: inline-block;
         padding: 0;
@@ -36,7 +38,8 @@
         background-color: white;
 
         &:hover {
-            background-color: #eee;
+            box-shadow: 0 0 calc(var(--toolbar-size) / 2.5)
+                calc(var(--toolbar-size) / 7.5) rgb(255 255 255 / 0.5);
         }
 
         &:active,
@@ -51,10 +54,7 @@
             border-color: var(--border);
         }
 
-        &[disabled] {
-            opacity: 0.4;
-            cursor: not-allowed;
-
+        @include button.disabled {
             &:hover {
                 background-color: white;
             }

ts/sass/BUILD.bazel

@@ -44,6 +44,14 @@ sass_library(
     visibility = ["//visibility:public"],
 )
 
+sass_library(
+    name = "button_mixins_lib",
+    srcs = [
+        "button_mixins.scss",
+    ],
+    visibility = ["//visibility:public"],
+)
+
 # qt package extracts colours from source file
 exports_files(
     ["_vars.scss"],

ts/sass/button_mixins.scss

@@ -0,0 +1,8 @@
+@mixin disabled {
+    &[disabled] {
+        opacity: 0.4;
+        cursor: not-allowed;
+
+        @content;
+    }
+}