Tweak primary/secondary toggle button styling

src/App/Header/Authenticate.svelte

@@ -62,7 +62,7 @@
       let:toggle
       on:click={toggle}
       size="large"
-      variant="primary">
+      variant="primary-toggle-on">
       <div class="avatar">
         <NodeId
           large
@@ -100,7 +100,7 @@
       });
     }}
     size="large"
-    variant="primary-outline">
+    variant="primary-toggle-off">
     <IconSmall name="key" />
     Authenticate
     <div class="indicator" />
@@ -114,7 +114,7 @@
       });
     }}
     size="large"
-    variant="primary-outline">
+    variant="primary-toggle-off">
     <IconSmall name="chat" />
     Authenticate
   </Button>

src/App/Header/Connect.svelte

@@ -54,7 +54,7 @@
       on:click={toggle}
       title={buttonTitle[$httpdStore.state]}
       size="large"
-      variant="primary-outline">
+      variant="primary-toggle-off">
       <IconSmall name="device" />
       Connect
     </Button>
@@ -79,7 +79,7 @@
       on:click={toggle}
       title={buttonTitle[$httpdStore.state]}
       size="large"
-      variant="primary">
+      variant="primary-toggle-on">
       <IconSmall name="device" />
       Connected
     </Button>

src/App/Header/NodeInfo.svelte

@@ -23,7 +23,7 @@
     let:toggle
     on:click={toggle}
     size="large"
-    variant={running ? "primary" : "primary-outline"}>
+    variant={running ? "primary-toggle-on" : "primary-toggle-off"}>
     <IconSmall name="broadcasting" />
     {#if running}
       Syncing

src/components/Button.svelte

@@ -8,9 +8,11 @@
     | "gray-white"
     | "none"
     | "outline"
-    | "primary-outline"
-    | "primary"
+    | "primary-toggle-off"
+    | "primary-toggle-on"
     | "secondary"
+    | "secondary-toggle-off"
+    | "secondary-toggle-on"
     | "tab" = "gray";
   export let size: "small" | "regular" | "large" = "regular";
 
@@ -141,34 +143,64 @@
     color: var(--color-foreground-contrast);
   }
 
-  .primary-outline {
-    background-color: transparent;
-    color: var(--color-foreground-contrast);
-    border: 1px solid var(--color-border-hint);
-  }
-  .primary-outline[disabled] {
-    background-color: transparent;
-    color: var(--color-fill-gray);
-  }
-  .primary-outline:not([disabled]):hover {
-    background-color: transparent;
-    border: 1px solid var(--color-fill-primary);
-    color: var(--color-foreground-contrast);
-  }
-
-  .primary {
+  .primary-toggle-on {
     color: var(--color-fill-primary);
     background-color: var(--color-fill-merged);
     border: 1px solid var(--color-border-merged);
   }
 
-  .primary[disabled] {
+  .primary-toggle-on[disabled] {
     color: var(--color-foreground-match-background);
     background-color: var(--color-fill-primary);
   }
 
-  .primary:not([disabled]):hover {
-    border: 1px solid var(--color-fill-primary);
+  .primary-toggle-on:not([disabled]):hover {
+    border: 1px solid var(--color-border-primary);
+  }
+
+  .primary-toggle-off {
+    background-color: transparent;
+    color: var(--color-foreground-dim);
+    border: 1px solid var(--color-border-hint);
+  }
+  .primary-toggle-off[disabled] {
+    background-color: transparent;
+    color: var(--color-fill-gray);
+  }
+  .primary-toggle-off:not([disabled]):hover {
+    background-color: transparent;
+    border: 1px solid var(--color-border-primary);
+    color: var(--color-foreground-dim);
+  }
+
+  .secondary-toggle-off {
+    background-color: transparent;
+    color: var(--color-foreground-dim);
+    border: 1px solid var(--color-border-hint);
+  }
+  .secondary-toggle-off[disabled] {
+    background-color: transparent;
+    color: var(--color-fill-gray);
+  }
+  .secondary-toggle-off:not([disabled]):hover {
+    background-color: transparent;
+    border: 1px solid var(--color-fill-secondary);
+    color: var(--color-foreground-dim);
+  }
+
+  .secondary-toggle-on {
+    background-color: var(--color-fill-selected);
+    color: var(--color-foreground-emphasized);
+    border: 1px solid var(--color-border-selected);
+  }
+  .secondary-toggle-on[disabled] {
+    background-color: var(--color-fill-selected);
+    color: var(--color-fill-gray);
+  }
+  .secondary-toggle-on:not([disabled]):hover {
+    background-color: var(--color-fill-selected);
+    border: 1px solid var(--color-border-focus);
+    color: var(--color-foreground-emphasized);
   }
 
   .secondary {
@@ -223,12 +255,14 @@
   class:large={size === "large"}
   class:background={variant === "background"}
   class:dim={variant === "dim"}
-  class:gray={variant === "gray"}
   class:gray-white={variant === "gray-white"}
+  class:gray={variant === "gray"}
   class:none={variant === "none"}
   class:outline={variant === "outline"}
-  class:primary-outline={variant === "primary-outline"}
-  class:primary={variant === "primary"}
+  class:primary-toggle-off={variant === "primary-toggle-off"}
+  class:primary-toggle-on={variant === "primary-toggle-on"}
+  class:secondary-toggle-off={variant === "secondary-toggle-off"}
+  class:secondary-toggle-on={variant === "secondary-toggle-on"}
   class:secondary={variant === "secondary"}
   class:tab={variant === "tab"}>
   <slot />

src/views/projects/Header/TrackButton.svelte

@@ -37,22 +37,12 @@
     let:toggle
     on:click={toggle}
     size="large"
-    variant="outline"
+    variant={tracking ? "secondary-toggle-on" : "secondary-toggle-off"}
     title="Tracked by {trackings} {pluralize('node', trackings)}">
-    {#if tracking}
-      <div style:color="var(--color-fill-secondary)">
-        <IconSmall name="network" />
-      </div>
-    {:else}
-      <div style:color="var(--color-foreground-contrast)">
-        <IconSmall name="network" />
-      </div>
-    {/if}
+    <IconSmall name="network" />
     <span>
       {buttonTitle}
-      <span
-        style:color="var(--color-foreground-dim)"
-        style:font-weight="var(--font-weight-regular)">
+      <span style:font-weight="var(--font-weight-regular)">
         {trackings}
       </span>
     </span>