From b696635afcec5a20b48428e7afc57b4964699055 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 21:58:58 +0200
Subject: [PATCH] Style light mode button bar with borders

- whereas night mode toolbar has no visible borders
---
 ts/editor-toolbar/BUILD.bazel         |  4 +++-
 ts/editor-toolbar/ButtonGroup.svelte  | 18 ++++++++++++++++--
 ts/editor-toolbar/ColorPicker.svelte  | 24 +++++++++++++++---------
 ts/editor-toolbar/DropdownItem.svelte |  3 ++-
 ts/editor-toolbar/SquareButton.svelte |  1 -
 ts/editor-toolbar/index.ts            |  5 +++--
 ts/sass/button_mixins.scss            |  8 ++++++--
 7 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index f92b14879..4732629af 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/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"],
 )
 
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 789a23d56..e80cb752b 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/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>
diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index c1bed3809..3d78e2c9f 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/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>
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
index a7ca85e4f..019294b24 100644
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -26,7 +26,8 @@
         &.nightMode {
             color: white;
 
-            &:hover, &:focus {
+            &:hover,
+            &:focus {
                 color: black;
             }
 
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 06e2ad397..3a434db7c 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -39,7 +39,6 @@
 
     button {
         padding: 0;
-
     }
 
     .btn-light {
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 10a1c2a59..07afda036 100644
--- a/ts/editor-toolbar/index.ts
+++ b/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"
+                    ),
                 },
             });
         });
diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss
index a29d7d45a..45d66d7a6 100644
--- a/ts/sass/button_mixins.scss
+++ b/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;
     }
 }