Display .active:active as :hover buttons

ts/editor-toolbar/ColorPicker.svelte

@@ -17,7 +17,8 @@
         }
 
         &:active {
-            box-shadow: inset 0 0 10px 3px rgb(0 0 0 / 30%);
+            box-shadow: inset 0 0 12px 4px rgb(0 0 0 / 30%);
+            border-color: #aaa;
         }
     }
 

ts/editor-toolbar/CommandIconButton.svelte

@@ -10,19 +10,27 @@
         );
     }
 
-    export function updateButtons() {
+    function updateButtons(callback: (key: string) => boolean): void {
         commandMap.update(
             (map: Map<string, boolean>): Map<string, boolean> => {
                 const newMap = new Map<string, boolean>();
 
                 for (const key of map.keys()) {
-                    newMap.set(key, document.queryCommandState(key));
+                    newMap.set(key, callback(key));
                 }
 
                 return newMap;
             }
         );
     }
+
+    export function updateButtonActive() {
+        updateButtons((key: string): boolean => document.queryCommandState(key));
+    }
+
+    export function clearButtonActive() {
+        updateButtons((): boolean => false);
+    }
 </script>
 
 <script lang="typescript">

ts/editor-toolbar/InnerButton.svelte

@@ -27,7 +27,13 @@
 
         &:active,
         &.active {
-            box-shadow: inset 0 0 10px 3px rgb(0 0 0 / 30%);
+            box-shadow: inset 0 0 12px 4px rgb(0 0 0 / 30%);
+            border-color: #aaa;
+        }
+
+        &.active:active {
+            box-shadow: none;
+            border-color: var(--border);
         }
 
         &[disabled] {

ts/editor-toolbar/LabelButton.svelte

@@ -13,7 +13,7 @@
         margin: 0 3px;
 
         &:focus {
-            box-shadow: 0 0 0 0.05rem rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 12px 4px rgb(255 255 255 / 0.5);
         }
     }
 </style>

ts/editor-toolbar/format.ts

@@ -1,5 +1,5 @@
 // @ts-ignore
-import CommandIconButton, { updateButtons } from "./CommandIconButton.svelte";
+import CommandIconButton, { updateButtonActive } from "./CommandIconButton.svelte";
 import boldIcon from "./type-bold.svg";
 import italicIcon from "./type-italic.svg";
 import underlineIcon from "./type-underline.svg";
@@ -45,4 +45,4 @@ export const eraserButton = {
 };
 
 // TODO
-setInterval(updateButtons, 2000);
+setInterval(updateButtonActive, 2000);