Abandon btn-secondary and btn-light in favor our own definitions btn-night and btn-day

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.btn-day($with-disabled: false) using ($base) {
-        @include button.light-hover-active;
+        @include button.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 $light;
     }
 
-    .btn-secondary {
+    @include button.btn-night($with-disabled: false) using ($base) {
-        background: content-box
+        @include button.rainbow($base);
-                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;
     }
 
     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-day={!nightMode}
-    class:btn-secondary={nightMode}
+    class:btn-night={nightMode}
     title={tooltip}
     on:click={delegateToInput}
     on:mousedown|preventDefault>

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.btn-day;
-        @include button.light-hover-active;
+    @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-day={!nightMode}
-    class:btn-secondary={nightMode}
+    class:btn-night={nightMode}
     tabindex="-1"
     disabled={_disabled}
     title={tooltip}

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.btn-day;
-        @include button.light-hover-active;
+    @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-day={!nightMode}
-    class:btn-secondary={nightMode}
+    class:btn-night={nightMode}
     tabindex="-1"
     title={tooltip}
     disabled={_disabled}

ts/sass/button_mixins.scss

@@ -1,10 +1,82 @@
-@mixin light-hover-active {
+@mixin btn-day($with-disabled: true) {
-    border-color: var(--faint-border) !important;
+    $base-color: white;
 
-    &:hover,
+    .btn-day {
-    &:focus,
+        color: var(--text-fg);
-    &:active,
+        background-color: $base-color;
-    &.active {
+        border-color: var(--medium-border) !important;
-        background-color: #e3e3e8;
+
+        @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;
+}