159f766 Tweak primary/secondary toggle button styling — radicle-explorer

modified 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>

modified 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>

modified 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

modified 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 {
   .primary-toggle-on {
     color: var(--color-fill-primary);
     background-color: var(--color-fill-merged);
     border: 1px solid var(--color-border-merged);
   }
   .primary-toggle-on[disabled] {
     color: var(--color-foreground-match-background);
     background-color: 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-contrast);
     color: var(--color-foreground-dim);
     border: 1px solid var(--color-border-hint);
   }
   .primary-outline[disabled] {
   .primary-toggle-off[disabled] {
     background-color: transparent;
     color: var(--color-fill-gray);
   }
   .primary-outline:not([disabled]):hover {
   .primary-toggle-off:not([disabled]):hover {
     background-color: transparent;
     border: 1px solid var(--color-fill-primary);
     color: var(--color-foreground-contrast);
     border: 1px solid var(--color-border-primary);
     color: var(--color-foreground-dim);
   }
   .primary {
     color: var(--color-fill-primary);
     background-color: var(--color-fill-merged);
     border: 1px solid var(--color-border-merged);
   .secondary-toggle-off {
     background-color: transparent;
     color: var(--color-foreground-dim);
     border: 1px solid var(--color-border-hint);
   }
   .primary[disabled] {
     color: var(--color-foreground-match-background);
     background-color: var(--color-fill-primary);
   .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);
   }
   .primary:not([disabled]):hover {
     border: 1px solid var(--color-fill-primary);
   .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 />

modified 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>