Simplify theme config

.env

@@ -1,5 +1,4 @@
-VITE_THEME_DARK=transparent:transparent,black:#0f0f0e,white:#FFFFFF,accent:#EB5E28,accent-light:#FB652C,gray-1:#FFFFFF,gray-2:#FAF6F1,gray-3:#F2EBE1,gray-4:#E9E0D3,gray-5:#B3AA98,gray-6:#565249,gray-7:#393530,gray-8:#252422,danger:#ff0000,warning:#ebd112,success:#37ab51,input:#FAF6F1,input-hover:#F2EBE1
+VITE_THEME=transparent:transparent,black:#0f0f0e,white:#FFFFFF,accent:#EB5E28,accent-light:#FB652C,gray-dark:#8D8581,gray-light:#A8A5A4,danger:#ff0000,warning:#ebd112,success:#37ab51,input:#FAF6F1,input-hover:#F2EBE1
-VITE_THEME_LIGHT=transparent:transparent,black:#0f0f0e,white:#FFFFFF,accent:#EB5E28,accent-light:#FB652C,gray-8:#FFFFFF,gray-7:#FAF6F1,gray-6:#F2EBE1,gray-5:#B3AA98,gray-4:#B3AA98,gray-3:#565249,gray-2:#393530,gray-1:#252422,danger:#ff0000,warning:#ebd112,success:#37ab51,input:#FAF6F1,input-hover:#F2EBE1
 VITE_DUFFLEPUD_URL=https://dufflepud.onrender.com
 VITE_DEFAULT_FOLLOWS=97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322,3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d,82341f882b6eabcd2ba7f1ef90aad961cf074af15b9ef44a09f9d2a8fbfbe6a2,6e468422dfb74a5738702a8823b9b28168abab8655faacb6853cd0ee15deee93
 VITE_ENABLE_ZAPS=true

src/app/Routes.svelte

@@ -29,7 +29,7 @@
 </script>
 
 {#if ready}
-  <div class="pt-16 text-gray-3 lg:ml-56">
+  <div class="pt-16 text-gray-2 lg:ml-56">
     <Route path="/notifications" component={Notifications} />
     <Route path="/notifications/:activeTab" component={Notifications} />
     <Route path="/search">

src/app/SideNav.svelte

@@ -28,7 +28,7 @@
 
 <ul
   class="fixed top-0 bottom-0 left-0 z-20 mt-16 w-56 overflow-hidden border-r border-gray-6 bg-gray-7 pt-4
-         pb-20 text-gray-3 shadow-xl transition-all lg:mt-0 lg:ml-0"
+         pb-20 text-gray-2 shadow-xl transition-all lg:mt-0 lg:ml-0"
   class:-ml-56={!$menuIsOpen}>
   {#if $profile.pubkey}
     <li>

src/app/Toast.svelte

@@ -15,9 +15,9 @@
           "pointer-events-auto m-2 ml-16 rounded border p-3 text-center shadow-xl sm:ml-2",
           "max-w-xl flex-grow transition-all",
           {
-            "border-gray-6 bg-gray-7 text-gray-3": $toast.type === "info",
+            "border-gray-6 bg-gray-7 text-gray-2": $toast.type === "info",
-            "border-warning bg-gray-7 text-gray-3": $toast.type === "warning",
+            "border-warning bg-gray-7 text-gray-2": $toast.type === "warning",
-            "border-danger bg-gray-7 text-gray-3": $toast.type === "error",
+            "border-danger bg-gray-7 text-gray-2": $toast.type === "error",
           }
         )}>
         {#if is(String, $toast.message)}

src/app/TopNav.svelte

@@ -20,7 +20,7 @@
 
 <div
   class="fixed top-0 z-10 flex h-16 w-full items-center justify-between border-b
-            border-gray-6 bg-gray-7 p-4 text-gray-3">
+            border-gray-6 bg-gray-7 p-4 text-gray-2">
   <div class="fa fa-bars fa-2xl -m-6 cursor-pointer p-6 lg:hidden" on:click={toggleMenu} />
   <div class="flex items-center gap-4">
     <Anchor

src/app/shared/Note.svelte

@@ -184,7 +184,7 @@
     <div class="relative">
       <div
         class="absolute top-0 right-0 z-10 -mt-4 -mr-2 flex h-6 w-6 cursor-pointer items-center
-                 justify-center rounded-full border border-solid border-gray-7 bg-gray-8 text-gray-3"
+                 justify-center rounded-full border border-solid border-gray-7 bg-gray-8 text-gray-2"
         on:click={() => {
           collapsed = !collapsed
         }}>

src/app/shared/NoteReply.svelte

@@ -99,14 +99,14 @@
     class="note-reply relative z-10 my-2 flex flex-col gap-1"
     bind:this={container}
     on:click|stopPropagation>
-    <div class={`border border-${borderColor} border-solid rounded-2xl overflow-hidden`}>
+    <div class={`border border-${borderColor} overflow-hidden rounded-2xl border-solid`}>
       <div class="bg-gray-7" class:rounded-b={data.mentions.length === 0}>
         <Compose bind:this={reply} onSubmit={send}>
           <button
             slot="addon"
             on:click={send}
             class="flex cursor-pointer flex-col justify-center gap-2 border-l border-solid
-                 border-gray-7 p-4 py-8 text-gray-3 transition-all hover:bg-accent">
+                 border-gray-7 p-4 py-8 text-gray-2 transition-all hover:bg-accent">
             <i class="fa fa-paper-plane fa-xl" />
           </button>
         </Compose>
@@ -121,7 +121,7 @@
         </div>
       {/if}
       <div class={`h-px bg-${borderColor}`} />
-      <div class="flex gap-2 rounded-b bg-gray-7 p-2 text-sm text-gray-3">
+      <div class="flex gap-2 rounded-b bg-gray-7 p-2 text-sm text-gray-2">
         <div class="inline-block border-r border-solid border-gray-6 py-2 pl-1 pr-3">
           <div class="flex cursor-pointer items-center gap-3">
             <ImageInput bind:value={data.image} icon="image" hideInput>
@@ -136,7 +136,7 @@
               {displayPerson(getPersonWithFallback(p))}
             </Chip>
           {:else}
-            <div class="text-gray-3 inline-block py-2">No mentions</div>
+            <div class="text-gray-2 inline-block py-2">No mentions</div>
           {/each}
           <div class="-mb-2" />
         </div>

src/partials/Channel.svelte

@@ -140,11 +140,11 @@
         bind:this={textarea}
         on:keypress={onKeyPress}
         class="w-full resize-none bg-gray-6 p-2
-               text-gray-3 outline-0 placeholder:text-gray-1" />
+               text-gray-2 outline-0 placeholder:text-gray-1" />
       <button
         on:click={send}
         class="flex cursor-pointer flex-col justify-center gap-2 border-l border-solid border-gray-7 p-4
-               py-8 text-gray-3 transition-all hover:bg-accent ">
+               py-8 text-gray-2 transition-all hover:bg-accent ">
         <i class="fa-solid fa-paper-plane fa-xl" />
       </button>
     </div>
@@ -154,7 +154,7 @@
       class="fixed bottom-32 flex w-full cursor-pointer justify-center"
       transition:fly|local={{y: 20}}
       on:click={scrollToBottom}>
-      <div class="rounded-full bg-accent py-2 px-4 text-gray-3">New messages found</div>
+      <div class="rounded-full bg-accent py-2 px-4 text-gray-2">New messages found</div>
     </div>
   {/if}
 </div>

src/partials/Content.svelte

@@ -4,7 +4,7 @@
   export let gap = 6
   export let size = "2xl"
 
-  const className = `flex flex-col m-auto text-gray-3 gap-${gap} overflow-hidden`
+  const className = `flex flex-col m-auto text-gray-2 gap-${gap} overflow-hidden`
 
   if (!["inherit", "lg", "2xl"].includes(size)) {
     throw new Error(`Invalid size: ${size}`)

src/partials/ContentEditable.svelte

@@ -86,7 +86,7 @@
 </script>
 
 <div
-  class="w-full min-w-0 p-2 text-gray-3 outline-0"
+  class="w-full min-w-0 p-2 text-gray-2 outline-0"
   autofocus
   contenteditable
   bind:this={input}

src/partials/OverflowMenu.svelte

@@ -29,7 +29,7 @@
           class="absolute top-0 right-0 bottom-0 w-32 rounded-3xl bg-gray-8"
           style="filter: blur(15px) opacity(0.75)" />
         {#each actions as { label, icon, onClick }}
-          <div class="relative z-10 cursor-pointer text-gray-3" on:click={onClick}>
+          <div class="relative z-10 cursor-pointer text-gray-2" on:click={onClick}>
             <span class="absolute right-0 mr-12 mt-2 whitespace-nowrap">{label}</span>
             <Anchor type="button-circle"><i class={`fa fa-${icon}`} /></Anchor>
           </div>

src/partials/state.ts

@@ -1,10 +1,10 @@
 import {prop, whereEq, reject, last, fromPairs} from "ramda"
-import {uuid, switcher} from "hurdak/lib/hurdak"
+import {uuid, range} from "hurdak/lib/hurdak"
 import type {Writable} from "svelte/store"
 import {navigate} from "svelte-routing"
 import {writable, get} from "svelte/store"
 import {globalHistory} from "svelte-routing/src/history"
-import {sleep, synced, WritableList} from "src/util/misc"
+import {sleep, shadeColor, synced, WritableList} from "src/util/misc"
 
 // Settings
 
@@ -94,14 +94,23 @@ location.subscribe($location => {
 
 // Themes
 
-const parseTheme = s => fromPairs(s.split(",").map(x => x.split(":")))
+const THEME = fromPairs(import.meta.env.VITE_THEME.split(",").map(x => x.split(":")))
-const THEME_LIGHT = parseTheme(import.meta.env.VITE_THEME_LIGHT)
-const THEME_DARK = parseTheme(import.meta.env.VITE_THEME_DARK)
 const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
 
 export const theme = synced("ui/theme", prefersDark ? "dark" : "light")
 
-export const getThemeColors = $theme => switcher($theme, {light: THEME_LIGHT, dark: THEME_DARK})
+export const getThemeColors = $theme => {
+  for (const x of range(1, 10)) {
+    // const lum = $theme === 'dark' ? (x - 5) * 30 : (4 - x) * 30
+    const lum = $theme === "dark" ? (5 - x) * 25 : (x - 5) * 25
+
+    console.log(lum, shadeColor(THEME[`gray-${$theme}`], lum))
+
+    THEME[`gray-${x}`] = shadeColor(THEME[`gray-${$theme}`], lum)
+  }
+
+  return THEME
+}
 
 export const getThemeColor = ($theme, k) => prop(k, getThemeColors($theme))
 

src/util/misc.ts

@@ -370,3 +370,27 @@ export class WritableList<T> {
     this._store.update(xs => (xs.includes(x) ? without([x], xs) : xs.concat(x)))
   }
 }
+
+export const shadeColor = (color, percent) => {
+  let R = parseInt(color.substring(1, 3), 16)
+  let G = parseInt(color.substring(3, 5), 16)
+  let B = parseInt(color.substring(5, 7), 16)
+
+  R = (R * (100 + percent)) / 100
+  G = (G * (100 + percent)) / 100
+  B = (B * (100 + percent)) / 100
+
+  R = R < 255 ? R : 255
+  G = G < 255 ? G : 255
+  B = B < 255 ? B : 255
+
+  R = Math.round(R)
+  G = Math.round(G)
+  B = Math.round(B)
+
+  const RR = R.toString(16).length == 1 ? "0" + R.toString(16) : R.toString(16)
+  const GG = G.toString(16).length == 1 ? "0" + G.toString(16) : G.toString(16)
+  const BB = B.toString(16).length == 1 ? "0" + B.toString(16) : B.toString(16)
+
+  return "#" + RR + GG + BB
+}