From 8760bd9ac6c855adb07be10f7faaf04c41d0860b Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 19:36:41 +0200
Subject: [PATCH] Add theming support for DropdownItem and DropdownMenu

---
 ts/editor-toolbar/ButtonGroup.svelte  | 12 +++----
 ts/editor-toolbar/DropdownItem.svelte | 48 ++++++++++++++++++++++++---
 ts/editor-toolbar/DropdownMenu.svelte | 21 ++++++++++--
 ts/editor-toolbar/SquareButton.svelte |  2 +-
 4 files changed, 70 insertions(+), 13 deletions(-)

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 9c93b5055..789a23d56 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -24,16 +24,16 @@
         display: inline-block;
         margin-bottom: calc(var(--toolbar-size) / 15);
 
-        & > :global(button),
-        & > :global(select) {
+        > :global(button),
+        > :global(select) {
             border-radius: 0;
         }
 
         &:nth-child(1) {
             margin-left: calc(var(--toolbar-size) / 7.5);
 
-            & > :global(button),
-            & > :global(select) {
+            > :global(button),
+            > :global(select) {
                 /* default 0.25rem */
                 border-top-left-radius: calc(var(--toolbar-size) / 7.5);
                 border-bottom-left-radius: calc(var(--toolbar-size) / 7.5);
@@ -43,8 +43,8 @@
         &:nth-last-child(1) {
             margin-right: calc(var(--toolbar-size) / 7.5);
 
-            & > :global(button),
-            & > :global(select) {
+            > :global(button),
+            > :global(select) {
                 border-top-right-radius: calc(var(--toolbar-size) / 7.5);
                 border-bottom-right-radius: calc(var(--toolbar-size) / 7.5);
             }
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
index 18211e662..abfec42fa 100644
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -1,4 +1,7 @@
 <script lang="typescript">
+    import { getContext } from "svelte";
+    import { nightModeKey } from "./contextKeys";
+
     export let id: string;
     export let className = "";
     export let tooltip: string;
@@ -6,15 +9,52 @@
     export let onClick: (event: MouseEvent) => void;
     export let label: string;
     export let endLabel: string;
+
+    const nightMode = getContext(nightModeKey);
 </script>
 
+<style lang="scss">
+    @import "ts/node_modules/bootstrap/scss/functions";
+    @import "ts/node_modules/bootstrap/scss/variables";
+
+    button {
+        display: flex;
+        justify-content: space-between;
+
+        &.nightMode {
+            color: white;
+
+            &:hover, &:focus {
+                color: black;
+            }
+
+            &:active {
+                color: white;
+            }
+        }
+
+        &:hover, &:focus {
+            color: white;
+        }
+
+        &:focus {
+            box-shadow: none;
+        }
+    }
+
+    span {
+        font-size: calc(var(--toolbar-size) / 2.3);
+        color: inherit;
+    }
+</style>
+
 <button
     {id}
-    class={`dropdown-item ${className}`}
+    class={`btn dropdown-item ${className}`}
+    class:nightMode
     title={tooltip}
     on:click={onClick}
     on:mousedown|preventDefault>
-    <span class="float-start">{label}</span>
-
-    {#if endLabel}<span class="float-end">{endLabel}</span>{/if}
+    <span class:me-2={endLabel}>{label}</span>
+    {#if endLabel}<span>{endLabel}</span>{/if}
 </button>
diff --git a/ts/editor-toolbar/DropdownMenu.svelte b/ts/editor-toolbar/DropdownMenu.svelte
index 6fb0c7eb1..a789dd95a 100644
--- a/ts/editor-toolbar/DropdownMenu.svelte
+++ b/ts/editor-toolbar/DropdownMenu.svelte
@@ -1,13 +1,30 @@
 <script lang="typescript">
     import type { SvelteComponentDefinition } from "./types";
+    import { getContext } from "svelte";
+    import { nightModeKey } from "./contextKeys";
 
     export let id: string;
     export let menuItems: SvelteComponentDefinition[];
+
+    const nightMode = getContext(nightModeKey);
 </script>
 
-<ul class="dropdown-menu" {id}>
+<style lang="scss">
+    @import "ts/node_modules/bootstrap/scss/functions";
+    @import "ts/node_modules/bootstrap/scss/variables";
+
+    ul {
+        background-color: $light;
+
+        &.nightMode {
+            background-color: $secondary;
+        }
+    }
+</style>
+
+<ul {id} class="dropdown-menu" class:nightMode>
     {#each menuItems as menuItem}
-        <li>
+        <li class:nightMode>
             <svelte:component this={menuItem.component} {...menuItem} />
         </li>
     {/each}
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 4fb7fe61c..1504b31ca 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -1,6 +1,6 @@
 <script lang="typescript">
-    import { getContext, onMount, createEventDispatcher } from "svelte";
     import type { Readable } from "svelte/store";
+    import { getContext, onMount, createEventDispatcher } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
 
     export let id: string;