keyboard stuff, styling things

src/routes/+layout.svelte

@@ -3,7 +3,7 @@
   import "$lib/fonts/material-symbols-rounded.scss"
   import "$lib/style/scrollbar.scss"
   import "$lib/style/tippy.scss"
-  import "$lib/style/toggle.scss"
+  import "$lib/style/theme.scss"
   import {onMount} from "svelte"
   import {applyTheme, argbFromHex, themeFromSourceColor} from "@material/material-color-utilities"
   import Navigation from "./Navigation.svelte"
@@ -76,34 +76,6 @@
 {/if}
 
 <style lang="scss" global>
-  * {
-    box-sizing: border-box;
-    appearance: none;
-  }
-
-  a {
-    color: var(--md-sys-color-tertiary);
-  }
-
-  label:has(input):hover,
-  .button:hover:not(:active),
-  a:hover:not(:active),
-  button:hover:not(:active) {
-    filter: brightness(70%);
-    transition: filter 250ms ease;
-
-    &:has(:checked),
-    &.active {
-      filter: brightness(120%);
-    }
-
-    &:disabled,
-    &.disabled {
-      opacity: 0.5;
-      filter: none;
-    }
-  }
-
   body {
     overflow: hidden;
     display: flex;

src/routes/BackupPopup.svelte

@@ -95,34 +95,4 @@
     display: flex;
     gap: 4px;
   }
-
-  .button,
-  button {
-    cursor: pointer;
-
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    justify-content: center;
-
-    width: max-content;
-    height: 48px;
-    padding-block: 8px;
-    padding-inline: 16px;
-
-    font-family: "Noto Sans Mono", monospace;
-    font-weight: 600;
-    color: var(--md-sys-color-on-background);
-
-    background: transparent;
-    border: none;
-    border-radius: 32px;
-
-    transition: all 250ms ease;
-  }
-
-  button.primary {
-    color: var(--md-sys-color-on-primary);
-    background: var(--md-sys-color-primary);
-  }
 </style>

src/routes/ConfigTabs.svelte

@@ -1,5 +1,6 @@
 <script>
   import {page} from "$app/stores"
+  import {action} from "$lib/title"
   import LL from "../i18n/i18n-svelte"
 
   $: paths = [
@@ -10,8 +11,8 @@
 </script>
 
 <nav>
-  {#each paths as { href, title, icon }}
-    <a {href} class:active={$page.url.pathname.startsWith(href)}>
+  {#each paths as { href, title, icon }, i}
+    <a {href} class:active={$page.url.pathname.startsWith(href)} use:action={{shortcut: `shift+${i + 1}`}}>
       <span class="icon">{icon}</span>
       {title}
     </a>
@@ -27,30 +28,13 @@
 
     padding: 8px;
 
+    color: var(--md-sys-color-on-surface-variant);
+
     background: var(--md-sys-color-surface-variant);
     border: none;
     border-radius: 32px;
   }
 
-  a {
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    justify-content: center;
-
-    margin: 0;
-    padding: 8px;
-    padding-inline: 16px;
-
-    font-weight: 600;
-    color: var(--md-sys-color-on-surface-variant);
-    text-decoration: none;
-
-    border-radius: 24px;
-
-    transition: all 250ms ease;
-  }
-
   a.active {
     --icon-fill: 1;
 

src/routes/ConnectionPopup.svelte

@@ -153,43 +153,6 @@
     background: var(--md-sys-color-secondary);
   }
 
-  a,
-  button {
-    cursor: pointer;
-
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    justify-content: center;
-
-    height: 48px;
-    padding: 8px;
-    padding-inline-end: 16px;
-
-    font-size: 1rem;
-    color: var(--md-sys-color-on-background);
-    text-decoration: none;
-
-    background: transparent;
-    border: none;
-    border-radius: 32px;
-
-    transition: all 250ms ease;
-
-    &.icon {
-      aspect-ratio: 1;
-      padding-inline-end: 8px;
-      font-size: 24px;
-      border-radius: 50%;
-    }
-  }
-
-  a.disabled,
-  button:disabled {
-    cursor: default;
-    opacity: 0.5;
-  }
-
   button:active:not(:disabled) {
     color: var(--md-sys-color-on-surface-variant);
     background: var(--md-sys-color-surface-variant);

src/routes/EditActions.svelte

@@ -3,6 +3,7 @@
   import {changes} from "$lib/serial/connection"
   import type {Change} from "$lib/serial/connection"
   import {fly} from "svelte/transition"
+  import {action} from "$lib/title"
 
   function undo() {
     redoQueue = [$changes.pop()!, ...redoQueue]
@@ -24,39 +25,27 @@
   }
 </script>
 
-<button title={$LL.saveActions.UNDO()} class="icon" disabled={$changes.length === 0} on:click={undo}
-  >undo</button
+<button
+  use:action={{title: $LL.saveActions.UNDO(), shortcut: "ctrl+z"}}
+  class="icon"
+  disabled={$changes.length === 0}
+  on:click={undo}>undo</button
 >
-<button title={$LL.saveActions.REDO()} class="icon" disabled={redoQueue.length === 0} on:click={redo}
-  >redo</button
+<button
+  use:action={{title: $LL.saveActions.REDO(), shortcut: "ctrl+y"}}
+  class="icon"
+  disabled={redoQueue.length === 0}
+  on:click={redo}>redo</button
 >
 <div class="separator" />
-<button title={$LL.saveActions.SAVE()} class="icon">save</button>
+<button use:action={{title: $LL.saveActions.SAVE(), shortcut: "ctrl+shift+s"}} class="icon">save</button>
 {#if $changes.length !== 0}
-  <button class="click-me" transition:fly={{x: 8}}
+  <button class="click-me" transition:fly={{x: 8}} use:action={{shortcut: "ctrl+s"}}
     ><span class="icon">bolt</span>{$LL.saveActions.APPLY()}</button
   >
 {/if}
 
 <style lang="scss">
-  button {
-    cursor: pointer;
-
-    padding: 0;
-
-    color: currentcolor;
-
-    background: none;
-    border: none;
-
-    transition: all 250ms ease;
-  }
-
-  :disabled {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
   .click-me {
     display: flex;
     align-items: center;