From d6d4269aaf131e33f8876856cb3ecb7c5b7bf1dd Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 16:26:23 +0200
Subject: [PATCH] Rely more heavily on bootstrap provided types for
 editor-toolbar

---
 ts/editor-toolbar/ButtonGroup.svelte  | 10 +++----
 ts/editor-toolbar/LabelButton.svelte  | 28 ++++++-----------
 ts/editor-toolbar/SquareButton.svelte | 43 +++++++--------------------
 ts/editor-toolbar/bootstrap.scss      |  3 ++
 4 files changed, 27 insertions(+), 57 deletions(-)

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 3ae758c5b..90c0862b4 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -18,17 +18,17 @@
 
         padding-inline-start: 0;
         margin-bottom: 0;
-
-        & :global(button),
-        & :global(select) {
-            margin-left: -1px;
-        }
     }
 
     li {
         display: inline-block;
         margin-bottom: calc(var(--toolbar-size) / 15);
 
+        & > :global(button),
+        & > :global(select) {
+            border-radius: 0;
+        }
+
         &:nth-child(1) {
             margin-left: calc(var(--toolbar-size) / 7.5);
 
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index e919acab7..5c2d852cf 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -1,6 +1,6 @@
 <script lang="typescript">
     import { onMount, createEventDispatcher, getContext } from "svelte";
-    import { disabledKey } from "./contextKeys";
+    import { disabledKey, nightModeKey } from "./contextKeys";
 
     export let id: string;
     export let className = "";
@@ -21,38 +21,26 @@
     let buttonRef: HTMLButtonElement;
 
     function extendClassName(className: string): string {
-        return `btn btn-secondary ${className}`;
+        return `btn ${className}`;
     }
 
-    const dispatch = createEventDispatcher();
-    onMount(() => dispatch("mount", { button: buttonRef }));
-
     const disabled = getContext(disabledKey);
     $: _disabled = disables && $disabled;
+
+    const nightMode = getContext(nightModeKey);
+
+    const dispatch = createEventDispatcher();
+    onMount(() => dispatch("mount", { button: buttonRef }));
 </script>
 
 <style lang="scss">
     @use "ts/sass/button_mixins" as button;
 
     button {
-        display: inline-block;
         padding: 0 calc(var(--toolbar-size) / 3);
-
         font-size: calc(var(--toolbar-size) / 2.3);
         width: auto;
         height: var(--toolbar-size);
-
-        border-radius: 0;
-        border-color: var(--faint-border);
-
-        &:hover {
-            box-shadow: 0 0 calc(var(--toolbar-size) / 2.5)
-                calc(var(--toolbar-size) / 7.5) rgb(255 255 255 / 0.5);
-        }
-
-        @include button.disabled {
-            border-color: var(--faint-border);
-        }
     }
 </style>
 
@@ -61,6 +49,8 @@
     {id}
     class={extendClassName(className)}
     class:dropdown-toggle={dropdownToggle}
+    class:btn-light={!nightMode}
+    class:btn-secondary={nightMode}
     tabindex="-1"
     disabled={_disabled}
     title={tooltip}
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 0aeaa27d7..7c60ff85c 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -1,7 +1,7 @@
 <script lang="typescript">
     import { getContext, onMount, createEventDispatcher } from "svelte";
     import type { Readable } from "svelte/store";
-    import { disabledKey } from "./contextKeys";
+    import { disabledKey, nightModeKey } from "./contextKeys";
 
     export let id: string;
     export let className = "";
@@ -21,9 +21,15 @@
 
     let buttonRef: HTMLButtonElement;
 
+    function extendClassName(className: string): string {
+        return `btn ${className}`;
+    }
+
     const disabled = getContext(disabledKey);
     $: _disabled = disables && $disabled;
 
+    const nightMode = getContext(nightModeKey);
+
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
 </script>
@@ -32,38 +38,7 @@
     @use "ts/sass/button_mixins" as button;
 
     button {
-        display: inline-block;
         padding: 0;
-
-        background-color: white;
-
-        &:hover {
-            box-shadow: 0 0 calc(var(--toolbar-size) / 2.5)
-                calc(var(--toolbar-size) / 7.5) rgb(255 255 255 / 0.5);
-        }
-
-        &:active,
-        &.active {
-            box-shadow: inset 0 0 calc(var(--toolbar-size) / 2.5)
-                calc(var(--toolbar-size) / 7.5) rgb(0 0 0 / 30%);
-            border-color: #aaa;
-        }
-
-        &.active:active {
-            box-shadow: none;
-            border-color: var(--border);
-        }
-
-        @include button.disabled {
-            &:hover {
-                background-color: white;
-            }
-
-            &:active,
-            &.active {
-                box-shadow: none;
-            }
-        }
     }
 
     span {
@@ -91,9 +66,11 @@
 <button
     bind:this={buttonRef}
     {id}
-    class={className}
+    class={extendClassName(className)}
     class:active
     class:dropdown-toggle={dropdownToggle}
+    class:btn-light={!nightMode}
+    class:btn-secondary={nightMode}
     tabindex="-1"
     title={tooltip}
     disabled={_disabled}
diff --git a/ts/editor-toolbar/bootstrap.scss b/ts/editor-toolbar/bootstrap.scss
index 33aaef9a8..f5f023c9c 100644
--- a/ts/editor-toolbar/bootstrap.scss
+++ b/ts/editor-toolbar/bootstrap.scss
@@ -1,5 +1,8 @@
 @import "ts/node_modules/bootstrap/scss/functions";
 @import "ts/node_modules/bootstrap/scss/variables";
 @import "ts/node_modules/bootstrap/scss/mixins";
+
+$btn-disabled-opacity: 0.4;
+
 @import "ts/node_modules/bootstrap/scss/buttons";
 @import "ts/node_modules/bootstrap/scss/dropdown";