Style light mode button bar with borders

- whereas night mode toolbar has no visible borders

ts/editor-toolbar/BUILD.bazel

@@ -22,7 +22,9 @@ compile_sass(
         "legacy.scss",
         "bootstrap.scss",
     ],
-    deps = [],
+    deps = [
+        "//ts/sass:button_mixins_lib",
+    ],
     visibility = ["//visibility:public"],
 )
 

ts/editor-toolbar/ButtonGroup.svelte

@@ -1,5 +1,7 @@
 <script lang="typescript">
     import type { ToolbarItem } from "./types";
+    import { getContext } from "svelte";
+    import { nightModeKey } from "./contextKeys";
 
     export let id: string;
     export let className = "";
@@ -8,11 +10,15 @@
     function filterHidden({ hidden, ...props }) {
         return props;
     }
+
+    const nightMode = getContext(nightModeKey);
 </script>
 
 <style lang="scss">
     ul {
-        display: flex;
+        display: inline-flex;
+        justify-items: start;
+
         flex-wrap: var(--toolbar-wrap);
         overflow-y: auto;
 
@@ -20,6 +26,14 @@
         margin-bottom: 0;
     }
 
+    .border-group {
+        /* buttons' borders exactly overlap each other */
+        :global(button),
+        :global(select) {
+            margin-left: -2px;
+        }
+    }
+
     li {
         display: inline-block;
         margin-bottom: calc(var(--toolbar-size) / 15);
@@ -56,7 +70,7 @@
     }
 </style>
 
-<ul {id} class={className}>
+<ul {id} class={className} class:border-group={!nightMode}>
     {#each buttons as button}
         {#if !button.hidden}
             <li>

ts/editor-toolbar/ColorPicker.svelte

@@ -14,10 +14,10 @@
 
     const nightMode = getContext(nightModeKey);
 
-    let input: HTMLInputElement;
+    let inputRef: HTMLInputElement;
 
     function delegateToInput() {
-        input.click();
+        inputRef.click();
     }
 </script>
 
@@ -40,16 +40,22 @@
     .btn-light {
         @include button.light-hover-active;
 
-        background: content-box linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
-            content-box linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
-            content-box linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
+        background: content-box
+                linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
+            content-box
+                linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
+            content-box
+                linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
             border-box $light;
     }
 
     .btn-secondary {
-        background: content-box linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
-            content-box linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
-            content-box linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
+        background: content-box
+                linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
+            content-box
+                linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
+            content-box
+                linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
             border-box $secondary;
     }
 
@@ -69,5 +75,5 @@
     title={tooltip}
     on:click={delegateToInput}
     on:mousedown|preventDefault>
-    <input bind:this={input} type="color" on:change={onChange} />
+    <input bind:this={inputRef} type="color" on:change={onChange} />
 </button>

ts/editor-toolbar/DropdownItem.svelte

@@ -26,7 +26,8 @@
         &.nightMode {
             color: white;
 
-            &:hover, &:focus {
+            &:hover,
+            &:focus {
                 color: black;
             }
 

ts/editor-toolbar/SquareButton.svelte

@@ -39,7 +39,6 @@
 
     button {
         padding: 0;
-
     }
 
     .btn-light {

ts/editor-toolbar/index.ts

@@ -58,8 +58,9 @@ class EditorToolbar extends HTMLElement {
                 props: {
                     buttons: this.buttons,
                     menus: this.menus,
-                    nightMode: document.documentElement.classList.contains("night-mode"),
-
+                    nightMode: document.documentElement.classList.contains(
+                        "night-mode"
+                    ),
                 },
             });
         });

ts/sass/button_mixins.scss

@@ -1,6 +1,10 @@
 @mixin light-hover-active {
-    &:hover, &:focus, &:active, &.active {
+    border-color: var(--faint-border) !important;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
         background-color: #e3e3e8;
-        border-color: #e3e3e8;
     }
 }