From 02c8893fc93fdbe95dd01684834db088ffbfcb74 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 17:43:55 +0200
Subject: [PATCH] Update CSS for ColorPicker and forecolor button

---
 ts/editor-toolbar/ColorPicker.svelte | 38 ++++++++++------------------
 ts/editor-toolbar/color.scss         |  2 +-
 2 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 9eb4c3ebe..bba435836 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -1,50 +1,40 @@
 <script lang="typescript">
+    import { getContext } from "svelte";
+    import { nightModeKey } from "./contextKeys";
+
     export let id: string;
     export let className = "";
     export let tooltip: string;
 
     export let onChange: (event: Event) => void;
+
+    function extendClassName(className: string): string {
+        return `btn ${className}`;
+    }
+
+    const nightMode = getContext(nightModeKey);
 </script>
 
 <style lang="scss">
     button {
-        display: inline-block;
         padding: 0;
-
-        &:hover {
-            background-color: #eee;
-        }
-
-        &: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;
-        }
-    }
-
-    span {
-        display: inline-block;
-        vertical-align: middle;
-        width: 100%;
-        height: 100%;
-
-        cursor: pointer;
     }
 
     input {
         display: inline-block;
         opacity: 0;
-        width: calc(var(--toolbar-size) - 6px);
-        height: calc(var(--toolbar-size) - 6px);
 
-        cursor: pointer;
+        width: calc(var(--toolbar-size) - 2px);
+        height: calc(var(--toolbar-size) - 7px);
     }
 </style>
 
 <button
     tabindex="-1"
     {id}
-    class={className}
+    class={extendClassName(className)}
+    class:btn-light={!nightMode}
+    class:btn-secondary={nightMode}
     title={tooltip}
     on:mousedown|preventDefault>
     <span> <input type="color" on:change={onChange} /> </span>
diff --git a/ts/editor-toolbar/color.scss b/ts/editor-toolbar/color.scss
index 6e6077eb4..973008821 100644
--- a/ts/editor-toolbar/color.scss
+++ b/ts/editor-toolbar/color.scss
@@ -3,7 +3,7 @@
 }
 
 .forecolor {
-    color: var(--foreground-color);
+    color: var(--foreground-color) !important;
 }
 
 .rainbow {