Switch toggle styles

Co-authored-by: dnlklmn <pelicansinberlin@gmail.com>

public/colors.css

@@ -31,7 +31,7 @@
   --color-fill-secondary-hover: #8585ff;
   --color-fill-secondary-counter: #7a7aff;
   --color-fill-ghost: #ebebff;
-  --color-fill-ghost-hover: #f5f5ff;
+  --color-fill-ghost-hover: #dbdbff;
   --color-fill-separator: #dbdbff;
   --color-fill-primary: #ff70ff;
   --color-fill-primary-hover: #ff80ff;
@@ -45,7 +45,7 @@
   --color-fill-diff-green: #badeca;
   --color-fill-diff-green-light: #dcefe5;
   --color-fill-float: #fafaff;
-  --color-fill-float-hover: #ffffff;
+  --color-fill-float-hover: #dbdbff;
   --color-fill-merged: #ffeeff;
   --color-fill-selected: #ebebff;
   --color-fill-warning: #ffffe5;

public/index.css

@@ -91,6 +91,11 @@ pre {
   min-width: 1.25rem;
   text-align: center;
 }
+.global-spacer {
+  width: 1px;
+  height: 100%;
+  background-color: var(--color-fill-ghost);
+}
 
 @media (max-width: 720px) {
   body {

src/App/Settings.svelte

@@ -46,6 +46,7 @@
           on:click={() => storeTheme("light")}>
           <Icon name="sun" />
         </Button>
+        <div class="global-spacer" />
         <Button
           ariaLabel="Dark Mode"
           styleBorderRadius="0"
@@ -70,6 +71,7 @@
               : "not-selected"}>
             {font.displayName}
           </Button>
+          <div class="global-spacer" />
         {/each}
       </Radio>
     </div>

src/components/Button.svelte

@@ -89,21 +89,6 @@
     background-color: var(--color-fill-ghost);
   }
 
-  .not-selected {
-    background-color: var(--color-fill-float-hover);
-    color: var(--color-foreground-contrast);
-    font-weight: var(--font-weight-normal);
-  }
-  .not-selected[disabled] {
-    background-color: var(--color-fill-float-hover);
-    color: var(--color-foreground-disabled);
-    font-weight: var(--font-weight-normal);
-  }
-  .not-selected:not([disabled]):hover {
-    background-color: var(--color-fill-ghost-hover);
-    color: var(--color-foreground-contrast);
-  }
-
   .gray {
     background-color: var(--color-fill-ghost);
     color: var(--color-foreground-contrast);
@@ -130,7 +115,7 @@
     color: var(--color-foreground-contrast);
   }
   .selected {
-    background-color: var(--color-fill-ghost);
+    background-color: var(--color-fill-float-hover);
     color: var(--color-foreground-contrast);
     cursor: default;
   }
@@ -139,6 +124,22 @@
     color: var(--color-foreground-disabled);
   }
 
+  .not-selected {
+    background-color: var(--color-fill-ghost);
+    color: var(--color-foreground-contrast);
+    font-weight: var(--font-weight-normal);
+    letter-spacing: 0.02rem;
+  }
+  .not-selected[disabled] {
+    background-color: var(--color-fill-float-hover);
+    color: var(--color-foreground-disabled);
+    font-weight: var(--font-weight-normal);
+  }
+  .not-selected:not([disabled]):hover {
+    background-color: var(--color-fill-ghost-hover);
+    color: var(--color-foreground-contrast);
+  }
+
   .none {
     background-color: transparent;
     color: var(--color-foreground-emphasized);

src/components/ExtendedTextarea.svelte

@@ -179,6 +179,7 @@
       <IconSmall name="edit" />
       Edit
     </Button>
+    <div class="global-spacer" />
     <Button
       styleBorderRadius="0"
       disabled={disallowEmptyBody && body.length === 0}

src/views/projects/Header/CloneButton.svelte

@@ -58,6 +58,7 @@
           <IconSmall name="logo" />
           Radicle
         </Button>
+        <div class="global-spacer" />
         <Button
           styleWidth="100%"
           styleBorderRadius="0"

src/views/projects/Source/Blob.svelte

@@ -221,6 +221,7 @@
             }}>
             <IconSmall name="eye-open" />Preview
           </Button>
+          <div class="global-spacer" />
         </Radio>
       {/if}
       <a href="{rawPath}/{blob.path}" target="_blank" rel="noreferrer">

src/views/projects/Source/BranchSelector.svelte

@@ -79,6 +79,8 @@
     </Popover>
   {/if}
 
+  <div class="global-spacer" />
+
   <Button
     title="Current HEAD"
     variant="not-selected"