Improve contrast in light mode

Signed-off-by: Brandon Oxendine <brandon.oxendine@gmail.com>
Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>

public/colors.css

@@ -56,6 +56,7 @@
   --color-foreground-6: #c2c3d4;
 
   --color-background: #0b131a;
+  --color-background-1: #121a21;
 }
 
 [data-theme="light"] {
@@ -116,4 +117,5 @@
   --color-foreground-6: #42425a;
 
   --color-background: #f3f6fd;
+  --color-background-1: #ffffff;
 }

src/App/Header/SettingsDropdown.svelte

@@ -24,7 +24,7 @@
     top: 5rem;
     right: 1.5rem;
     width: 16.5rem;
-    background: var(--color-foreground-1);
+    background: var(--color-background-1);
     border-radius: var(--border-radius);
     display: flex;
     flex-direction: column;

src/components/Dropdown.svelte

@@ -20,7 +20,7 @@
 
 <style>
   .dropdown {
-    background-color: var(--color-foreground-1);
+    background-color: var(--color-background-1);
     margin-top: 0.5rem;
     padding: 0.5rem 0;
     position: absolute;

src/components/TextInput.svelte

@@ -80,6 +80,10 @@
     font-size: var(--font-size-small);
     padding: 0.5rem 1.25rem;
   }
+  .dashed:hover,
+  .dashed:focus {
+    background: var(--color-background-1);
+  }
   .right-container {
     color: var(--color-secondary);
     position: absolute;

src/components/ToggleSwitch.svelte

@@ -13,7 +13,7 @@
   }
 
   .toggle label {
-    background-color: var(--color-foreground-1);
+    background-color: var(--color-background-1);
     border: 1px solid var(--color-foreground-6);
     border-radius: var(--border-radius-round);
     cursor: pointer;
@@ -39,7 +39,7 @@
   }
 
   .toggle input[type="checkbox"]:checked ~ label {
-    background-color: var(--color-foreground-1);
+    background-color: var(--color-background-1);
     border-color: var(--color-foreground-6);
   }
 

src/views/projects/Blob.svelte

@@ -166,6 +166,7 @@
     border-top-style: dashed;
     border-bottom-left-radius: var(--border-radius-small);
     border-bottom-right-radius: var(--border-radius-small);
+    background: var(--color-background-1);
   }
 
   .binary {

src/views/projects/CloneButton.svelte

@@ -26,7 +26,7 @@
     background-color: var(--color-caution-3);
   }
   .dropdown {
-    background-color: var(--color-foreground-1);
+    background-color: var(--color-background-1);
     border-radius: var(--border-radius-small);
     box-shadow: var(--elevation-low);
     margin-top: 0.5rem;

src/views/projects/Commit.svelte

@@ -24,7 +24,7 @@
   }
   header {
     padding: 1rem;
-    background: var(--color-foreground-1);
+    background: var(--color-background-1);
     border-radius: var(--border-radius);
     margin-bottom: 1.5rem;
   }

src/views/projects/Commit/CommitTeaser.svelte

@@ -23,7 +23,7 @@
     padding: 0 1.5rem;
   }
   .commit-teaser {
-    background-color: var(--color-foreground-1);
+    background-color: var(--color-background-1);
     padding: 0.75rem 0rem;
   }
   .commit-teaser:hover {

src/views/projects/History.svelte

@@ -40,16 +40,13 @@
   .commit-group-headers {
     margin-bottom: 2rem;
   }
-
-  .commit {
-    background-color: var(--color-foreground-1);
-  }
   .commit:not(:last-child) {
     border-bottom: 1px dashed var(--color-background);
   }
   .commit:hover {
     background-color: var(--color-foreground-2);
     cursor: pointer;
+    border-radius: var(--border-radius-small);
   }
   .commit:first-child {
     border-top-left-radius: var(--border-radius-small);

src/views/projects/Readme.svelte

@@ -15,7 +15,7 @@
   article {
     padding: 2rem;
     width: 100%;
-    background: var(--color-foreground-1);
+    background: var(--color-background-1);
     border-bottom-left-radius: var(--border-radius-small);
     border-bottom-right-radius: var(--border-radius-small);
   }

src/views/projects/SourceBrowser/FileDiff.svelte

@@ -36,6 +36,8 @@
   }
   main {
     border-top: 1px dashed var(--color-foreground-4);
+    background: var(--color-background-1);
+    border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
   }
   .changeset-file main {
     overflow-x: auto;

src/views/projects/Widget.svelte

@@ -28,6 +28,7 @@
     border-radius: var(--border-radius-small);
     min-width: 36rem;
     cursor: pointer;
+    background: var(--color-background-1);
   }
   article .right {
     display: flex;