Make Toolbar resizable through a single CSS variable --toolbar-size

ts/editor-toolbar/ButtonGroup.svelte

@@ -22,25 +22,26 @@
 
     li {
         display: inline-block;
-        margin-bottom: 2px;
+        margin-bottom: calc(var(--toolbar-size) / 15);
 
         &:nth-child(1) {
-            margin-left: 0.25rem;
+            margin-left: calc(var(--toolbar-size) / 7.5);
 
             & > :global(button),
             & > :global(select) {
-                border-top-left-radius: 0.25rem;
+                /* default 0.25rem */
-                border-bottom-left-radius: 0.25rem;
+                border-top-left-radius: calc(var(--toolbar-size) / 7.5);
+                border-bottom-left-radius: calc(var(--toolbar-size) / 7.5);
             }
         }
 
         &:nth-last-child(1) {
-            margin-right: 0.25rem;
+            margin-right: calc(var(--toolbar-size) / 7.5);
 
             & > :global(button),
             & > :global(select) {
-                border-top-right-radius: 0.25rem;
+                border-top-right-radius: calc(var(--toolbar-size) / 7.5);
-                border-bottom-right-radius: 0.25rem;
+                border-bottom-right-radius: calc(var(--toolbar-size) / 7.5);
             }
         }
     }

ts/editor-toolbar/ColorPicker.svelte

@@ -16,7 +16,8 @@
         }
 
         &:active {
-            box-shadow: inset 0 0 12px 4px rgb(0 0 0 / 30%);
+            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;
         }
     }
@@ -33,8 +34,8 @@
     input {
         display: inline-block;
         opacity: 0;
-        width: 28px;
+        width: calc(var(--toolbar-size) - 6px);
-        height: calc(28px - 4px);
+        height: calc(var(--toolbar-size) - 6px);
 
         cursor: pointer;
     }

ts/editor-toolbar/EditorToolbar.svelte

@@ -17,6 +17,10 @@
 </script>
 
 <style lang="scss">
+    .base {
+        --toolbar-size: 30px;
+    }
+
     nav {
         position: sticky;
         top: 0;
@@ -39,12 +43,14 @@
     }
 </style>
 
-<div>
+<div class="base">
-    {#each menus as menu}
+    <div>
-        <svelte:component this={menu.component} {...menu} />
+        {#each menus as menu}
-    {/each}
+            <svelte:component this={menu.component} {...menu} />
-</div>
+        {/each}
+    </div>
 
-<nav>
+    <nav>
-    <ButtonGroup {buttons} />
+        <ButtonGroup {buttons} />
-</nav>
+    </nav>
+</div>

ts/editor-toolbar/LabelButton.svelte

@@ -13,7 +13,7 @@
     let buttonRef: HTMLButtonElement;
 
     function extendClassName(className: string): string {
-        return `${className} btn btn-secondary`;
+        return `btn btn-secondary ${className}`;
     }
 
     const dispatch = createEventDispatcher();
@@ -28,15 +28,17 @@
         display: inline-block;
         vertical-align: middle;
         width: auto;
-        height: calc(28px + 2px);
+        height: var(--toolbar-size);
 
-        padding: 0 10px;
+        font-size: calc(var(--toolbar-size) / 2.3);
+        padding: 0 calc(var(--toolbar-size) / 3);
 
         border-radius: 0;
         border-color: var(--faint-border);
 
         &:focus {
-            box-shadow: 0 0 12px 4px rgb(255 255 255 / 0.5);
+            box-shadow: 0 0 calc(var(--toolbar-size) / 2.5)
+                calc(var(--toolbar-size) / 7.5) rgb(255 255 255 / 0.5);
         }
 
         &[disabled] {
@@ -49,12 +51,12 @@
 </style>
 
 <button
+    tabindex="-1"
     bind:this={buttonRef}
     {disabled}
     {id}
     class={extendClassName(className)}
     {...props}
-    tabindex="-1"
     on:click={onClick}
     on:mousedown|preventDefault>
     {label}

ts/editor-toolbar/SelectButton.svelte

@@ -32,15 +32,22 @@
 
 <style lang="scss">
     select {
-        height: 30px;
+        height: var(--toolbar-size);
         width: auto;
 
-        font-size: smaller;
+        font-size: calc(var(--toolbar-size) / 2.3);
+        user-select: none;
+        box-shadow: none;
         border-radius: 0;
+
+        &:focus {
+            outline: none;
+        }
     }
 </style>
 
 <select
+    tabindex="-1"
     bind:this={buttonRef}
     {disabled}
     {id}

ts/editor-toolbar/SquareButton.svelte

@@ -32,7 +32,8 @@
 
         &:active,
         &.active {
-            box-shadow: inset 0 0 12px 4px rgb(0 0 0 / 30%);
+            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;
         }
 
@@ -61,8 +62,8 @@
         vertical-align: middle;
 
         /* constrain icon */
-        width: 28px;
+        width: calc(var(--toolbar-size) - 2px);
-        height: 28px;
+        height: calc(var(--toolbar-size) - 2px);
 
         & > :global(svg),
         & > :global(img) {

ts/editor-toolbar/_buttons.scss

@@ -1,27 +0,0 @@
-button.linkb {
-    -webkit-appearance: none;
-    margin-bottom: -3px;
-    border: 0;
-    box-shadow: none;
-    padding: 0px 2px;
-    background: transparent;
-
-    &:disabled {
-        opacity: 0.3;
-        cursor: not-allowed;
-    }
-}
-
-button:focus {
-    outline: none;
-}
-
-button.highlighted {
-    #topbutsleft & {
-        background-color: lightgrey;
-
-        .nightMode & {
-            background: linear-gradient(0deg, #333333 0%, #434343 100%);
-        }
-    }
-}