From ccc48bd1d7975dfac7bb8d4a6aa3fbf0dccb293e Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 15 Apr 2021 18:35:46 +0200
Subject: [PATCH] Abandon btn-secondary and btn-light in favor our own
 definitions btn-night and btn-day

---
 ts/editor-toolbar/ColorPicker.svelte  | 26 ++------
 ts/editor-toolbar/LabelButton.svelte  |  9 ++-
 ts/editor-toolbar/SquareButton.svelte |  9 ++-
 ts/sass/button_mixins.scss            | 86 ++++++++++++++++++++++++---
 4 files changed, 93 insertions(+), 37 deletions(-)

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 621972ae6..f491531c8 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -41,26 +41,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         overflow: hidden;
     }
 
-    .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%),
-            border-box $light;
+    @include button.btn-day($with-disabled: false) using ($base) {
+        @include button.rainbow($base);
     }
 
-    .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%),
-            border-box $secondary;
+    @include button.btn-night($with-disabled: false) using ($base) {
+        @include button.rainbow($base);
     }
 
     input {
@@ -74,8 +60,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     tabindex="-1"
     {id}
     class={extendClassName(className)}
-    class:btn-light={!nightMode}
-    class:btn-secondary={nightMode}
+    class:btn-day={!nightMode}
+    class:btn-night={nightMode}
     title={tooltip}
     on:click={delegateToInput}
     on:mousedown|preventDefault>
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index e150bed08..0b838ce2e 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -48,9 +48,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         height: var(--toolbar-size);
     }
 
-    .btn-light {
-        @include button.light-hover-active;
-    }
+    @include button.btn-day;
+    @include button.btn-night;
 </style>
 
 <button
@@ -58,8 +57,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {id}
     class={extendClassName(className)}
     class:dropdown-toggle={dropdownToggle}
-    class:btn-light={!nightMode}
-    class:btn-secondary={nightMode}
+    class:btn-day={!nightMode}
+    class:btn-night={nightMode}
     tabindex="-1"
     disabled={_disabled}
     title={tooltip}
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 21a4319e6..f0fc17e1b 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -45,9 +45,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         padding: 0;
     }
 
-    .btn-light {
-        @include button.light-hover-active;
-    }
+    @include button.btn-day;
+    @include button.btn-night;
 
     span {
         display: inline-block;
@@ -77,8 +76,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class={extendClassName(className)}
     class:active
     class:dropdown-toggle={dropdownToggle}
-    class:btn-light={!nightMode}
-    class:btn-secondary={nightMode}
+    class:btn-day={!nightMode}
+    class:btn-night={nightMode}
     tabindex="-1"
     title={tooltip}
     disabled={_disabled}
diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss
index 45d66d7a6..acb917ea9 100644
--- a/ts/sass/button_mixins.scss
+++ b/ts/sass/button_mixins.scss
@@ -1,10 +1,82 @@
-@mixin light-hover-active {
-    border-color: var(--faint-border) !important;
+@mixin btn-day($with-disabled: true) {
+    $base-color: white;
 
-    &:hover,
-    &:focus,
-    &:active,
-    &.active {
-        background-color: #e3e3e8;
+    .btn-day {
+        color: var(--text-fg);
+        background-color: $base-color;
+        border-color: var(--medium-border) !important;
+
+        @content ($base-color);
+
+        &:hover {
+            background-color: darken($base-color, 8%);
+        }
+
+        &:active,
+        &.active {
+            @include impressed-shadow(0.25);
+        }
+
+        &:active.active {
+            box-shadow: none;
+        }
+
+        @if ($with-disabled) {
+            &[disabled] {
+                background-color: $base-color !important;
+                box-shadow: none !important;
+            }
+        }
     }
 }
+
+@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);
+
+        &:hover {
+            background-color: lighten($base-color, 8%);
+            border-color: lighten($base-color, 8%);
+        }
+
+        &:active,
+        &.active {
+            @include impressed-shadow(0.35);
+            border-color: darken($base-color, 8%);
+        }
+
+        &:active.active {
+            box-shadow: none;
+            border-color: $base-color;
+        }
+
+        @if ($with-disabled) {
+            &[disabled] {
+                background-color: $base-color !important;
+                box-shadow: none !important;
+                border-color: $base-color !important;
+            }
+        }
+    }
+}
+
+@mixin impressed-shadow($intensity) {
+    box-shadow: inset 0 calc(var(--toolbar-size) / 15) calc(var(--toolbar-size) / 5)
+        rgba(black, $intensity);
+}
+
+@mixin rainbow($base) {
+    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 $base;
+}