From b60f9cd05d273ac2a5f9d7d50b122f05ef64dd37 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 16 Apr 2021 18:14:09 +0200
Subject: [PATCH] Change style for Dropdown{Menu,Item} to match
 Button{Group,Dropdown}

---
 ts/editor-toolbar/DropdownItem.svelte | 31 +++++++--------
 ts/editor-toolbar/DropdownMenu.svelte | 16 ++++----
 ts/sass/button_mixins.scss            | 56 ++++++++++++++++-----------
 3 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
index 3a772503e..0d5baaa8b 100644
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -18,30 +18,28 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <style lang="scss">
-    @import "ts/sass/bootstrap/functions";
-    @import "ts/sass/bootstrap/variables";
+    @use 'ts/sass/button_mixins' as button;
 
     button {
         display: flex;
         justify-content: space-between;
 
-        color: black;
-
-        &.nightMode {
+        &:active {
+            background-color: button.$focus-color;
             color: white;
-
-            &:hover,
-            &:focus {
-                color: black;
-            }
-
-            &:active {
-                color: white;
-            }
         }
+    }
 
+    .btn-day {
+        color: black;
+    }
+
+    .btn-night {
+        color: white;
+
+        &:hover,
         &:focus {
-            box-shadow: none;
+            @include button.btn-night-base;
         }
     }
 
@@ -58,7 +56,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <button
     {id}
     class={`btn dropdown-item ${className}`}
-    class:nightMode
+    class:btn-day={!nightMode}
+    class:btn-night={nightMode}
     title={tooltip}
     on:click={onClick}
     on:mousedown|preventDefault>
diff --git a/ts/editor-toolbar/DropdownMenu.svelte b/ts/editor-toolbar/DropdownMenu.svelte
index 4ddb2f888..546b2d78f 100644
--- a/ts/editor-toolbar/DropdownMenu.svelte
+++ b/ts/editor-toolbar/DropdownMenu.svelte
@@ -14,21 +14,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <style lang="scss">
-    @import "ts/sass/bootstrap/functions";
-    @import "ts/sass/bootstrap/variables";
+    @use 'ts/sass/button_mixins' as button;
 
     ul {
-        background-color: $light;
+        background-color: white;
+        border-color: var(--medium-border);
+    }
 
-        &.nightMode {
-            background-color: $secondary;
-        }
+    .night-mode {
+        background-color: var(--bg-color);
     }
 </style>
 
-<ul {id} class="dropdown-menu" class:nightMode>
+<ul {id} class="dropdown-menu" class:night-mode={nightMode}>
     {#each menuItems as menuItem}
-        <li class:nightMode>
+        <li>
             <svelte:component this={menuItem.component} {...menuItem} />
         </li>
     {/each}
diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss
index acb917ea9..d3d1647fb 100644
--- a/ts/sass/button_mixins.scss
+++ b/ts/sass/button_mixins.scss
@@ -1,15 +1,21 @@
+@import "ts/bootstrap/functions";
+@import "ts/bootstrap/variables";
+
+$btn-base-color-day: white;
+
+@mixin btn-day-base {
+    color: var(--text-fg);
+    background-color: $btn-base-color-day;
+    border-color: var(--medium-border) !important;
+}
+
 @mixin btn-day($with-disabled: true) {
-    $base-color: white;
-
     .btn-day {
-        color: var(--text-fg);
-        background-color: $base-color;
-        border-color: var(--medium-border) !important;
-
-        @content ($base-color);
+        @include btn-day-base;
+        @content ($btn-base-color-day);
 
         &:hover {
-            background-color: darken($base-color, 8%);
+            background-color: darken($btn-base-color-day, 8%);
         }
 
         &:active,
@@ -23,49 +29,55 @@
 
         @if ($with-disabled) {
             &[disabled] {
-                background-color: $base-color !important;
+                background-color: $btn-base-color-day !important;
                 box-shadow: none !important;
             }
         }
     }
 }
 
+$btn-base-color-night: #666;
+
+@mixin btn-night-base {
+    color: var(--text-fg);
+    background-color: $btn-base-color-night;
+    border-color: $btn-base-color-night;
+}
+
 @mixin btn-night($with-disabled: true) {
-    $base-color: #666;
-
     .btn-night {
-        color: var(--text-fg);
-        background-color: $base-color;
-        border-color: $base-color;
-
-        @content ($base-color);
+        @include btn-night-base;
+        @content ($btn-base-color-night);
 
         &:hover {
-            background-color: lighten($base-color, 8%);
-            border-color: lighten($base-color, 8%);
+            background-color: lighten($btn-base-color-night, 8%);
+            border-color: lighten($btn-base-color-night, 8%);
         }
 
         &:active,
         &.active {
             @include impressed-shadow(0.35);
-            border-color: darken($base-color, 8%);
+            border-color: darken($btn-base-color-night, 8%);
         }
 
         &:active.active {
             box-shadow: none;
-            border-color: $base-color;
+            border-color: $btn-base-color-night;
         }
 
         @if ($with-disabled) {
             &[disabled] {
-                background-color: $base-color !important;
+                background-color: $btn-base-color-night !important;
                 box-shadow: none !important;
-                border-color: $base-color !important;
+                border-color: $btn-base-color-night !important;
             }
         }
     }
 }
 
+// should be similar to -webkit-focus-ring-color
+$focus-color: $blue;
+
 @mixin impressed-shadow($intensity) {
     box-shadow: inset 0 calc(var(--toolbar-size) / 15) calc(var(--toolbar-size) / 5)
         rgba(black, $intensity);