Reduce blue color usage in menu buttons buttons

This makes the interface overall more legible.

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>

src/App/Header/ThemeSettings.svelte

@@ -56,14 +56,14 @@
         <Button
           ariaLabel="Light Mode"
           styleBorderRadius="0"
-          variant={$theme === "light" ? "secondary" : "gray"}
+          variant={$theme === "light" ? "gray-white" : "dim"}
           on:click={() => switchTheme("light")}>
           <Icon name="sun" />
         </Button>
         <Button
           ariaLabel="Dark Mode"
           styleBorderRadius="0"
-          variant={$theme === "dark" ? "secondary" : "gray"}
+          variant={$theme === "dark" ? "gray-white" : "dim"}
           on:click={() => switchTheme("dark")}>
           <Icon name="moon" />
         </Button>
@@ -79,7 +79,7 @@
             styleBorderRadius="0"
             styleFontFamily={font.fontFamily}
             on:click={() => switchFont(font.storedName)}
-            variant={$codeFont === font.storedName ? "secondary" : "gray"}>
+            variant={$codeFont === font.storedName ? "gray-white" : "dim"}>
             {font.displayName}
           </Button>
         {/each}

src/components/Button.svelte

@@ -73,7 +73,7 @@
 
   .dim {
     background-color: var(--color-fill-float-hover);
-    color: var(--color-fill-secondary);
+    color: var(--color-foreground-gray);
   }
   .dim[disabled] {
     background-color: var(--color-fill-float-hover);
@@ -81,7 +81,7 @@
   }
   .dim:not([disabled]):hover {
     background-color: var(--color-fill-ghost-hover);
-    color: var(--color-fill-secondary);
+    color: var(--color-foreground-gray);
   }
 
   .gray {

src/components/ExtendedTextarea.svelte

@@ -171,7 +171,7 @@
   <Radio>
     <Button
       styleBorderRadius="0"
-      variant={!preview ? "secondary" : "gray"}
+      variant={!preview ? "gray-white" : "dim"}
       on:click={() => {
         preview = false;
       }}>
@@ -181,7 +181,7 @@
     <Button
       styleBorderRadius="0"
       disabled={body === ""}
-      variant={preview ? "secondary" : "gray"}
+      variant={preview ? "gray-white" : "dim"}
       on:click={() => {
         preview = true;
       }}>

src/views/projects/Header/CloneButton.svelte

@@ -37,7 +37,7 @@
   popoverPositionTop="3rem"
   popoverPositionRight="0"
   popoverWidth="26rem">
-  <Button slot="toggle" size="large" variant="primary">
+  <Button slot="toggle" size="large" variant="secondary">
     Clone
     <Icon name="download" />
   </Button>

src/views/projects/Patch.svelte

@@ -650,7 +650,7 @@
               <Button
                 styleBorderRadius="0"
                 size="regular"
-                variant={name === view.name ? "secondary" : "gray"}>
+                variant={name === view.name ? "gray-white" : "dim"}>
                 <IconSmall name={icon} />
                 {capitalize(name)}
               </Button>
@@ -669,7 +669,7 @@
                   toCommit: view.toCommit,
                 },
               }}>
-              <Button styleBorderRadius="0" size="regular" variant="secondary">
+              <Button styleBorderRadius="0" size="regular" variant="gray-white">
                 Compare <span class="diff-button-range">
                   {view.fromCommit.substring(0, 6)}..{view.toCommit.substring(
                     0,

src/views/projects/Source/Blob.svelte

@@ -208,7 +208,7 @@
         <Radio ariaLabel="Toggle render method">
           <Button
             styleBorderRadius="0"
-            variant={showMarkdown ? "secondary" : "gray"}
+            variant={showMarkdown ? "gray-white" : "dim"}
             on:click={() => {
               window.location.hash = "";
               showMarkdown = true;
@@ -217,7 +217,7 @@
           </Button>
           <Button
             styleBorderRadius="0"
-            variant={!showMarkdown ? "secondary" : "gray"}
+            variant={!showMarkdown ? "gray-white" : "dim"}
             on:click={() => {
               showMarkdown = false;
             }}>
@@ -226,7 +226,7 @@
         </Radio>
       {/if}
       <a href="{rawPath}/{blob.path}">
-        <Button variant="secondary">
+        <Button variant="gray-white">
           Raw
           <IconSmall name="arrow-box-up-right" />
         </Button>

src/views/projects/Source/BranchSelector.svelte

@@ -27,7 +27,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 1px;
   }
 
   .identifier {
@@ -44,6 +43,7 @@
       popoverBorderRadius="var(--border-radius-small)"
       disabled={hideDropdown}>
       <Button
+        variant="outline"
         let:expanded
         slot="toggle"
         styleBorderRadius="var(--border-radius-tiny) 0 0 var(--border-radius-tiny)"
@@ -67,6 +67,7 @@
   {/if}
 
   <Button
+    variant={selectedBranch ? "gray" : "outline"}
     styleBorderRadius={selectedBranch
       ? "0 var(--border-radius-tiny) var(--border-radius-tiny) 0"
       : "var(--border-radius-tiny)"}>

src/views/projects/Source/Header.svelte

@@ -75,7 +75,7 @@
       }}>
       <Button
         styleBorderRadius="0"
-        variant={filesLinkActive ? "secondary" : "gray"}>
+        variant={filesLinkActive ? "gray-white" : "dim"}>
         <IconSmall name="file" />Files
       </Button>
     </Link>
@@ -90,7 +90,7 @@
       }}>
       <Button
         styleBorderRadius="0"
-        variant={historyLinkActive ? "secondary" : "gray"}>
+        variant={historyLinkActive ? "gray-white" : "dim"}>
         <IconSmall name="commit" />
         <div>
           {tree.stats.commits}
@@ -98,13 +98,13 @@
         </div>
       </Button>
     </Link>
-
-    <Button styleBorderRadius="0" disabled>
-      <IconSmall name="user" />
-      <div>
-        {tree.stats.contributors}
-        {pluralize("contributor", tree.stats.contributors)}
-      </div>
-    </Button>
   </Radio>
+
+  <Button disabled variant="outline">
+    <IconSmall name="user" />
+    <div>
+      {tree.stats.contributors}
+      {pluralize("contributor", tree.stats.contributors)}
+    </div>
+  </Button>
 </div>