Improved contrast on all text, to meet accessibility guidelines

src/app.css

@@ -7,7 +7,7 @@
 /* Custom styles */
 @layer base {
   .leather {
-    @apply bg-primary-0 dark:bg-primary-1000 text-gray-800 dark:text-gray-200;
+    @apply bg-primary-0 dark:bg-primary-1000 text-gray-900 dark:text-gray-100;
   }
 
   .btn-leather.text-xs {
@@ -27,7 +27,7 @@
   }
 
   div[role='tooltip'] button.btn-leather {
-    @apply hover:text-primary-400 dark:hover:text-primary-500 hover:border-primary-400 dark:hover:border-primary-500 hover:bg-gray-200 dark:hover:bg-gray-700;
+    @apply hover:text-primary-600 dark:hover:text-primary-400 hover:border-primary-600 dark:hover:border-primary-400 hover:bg-gray-200 dark:hover:bg-gray-700;
   }
 
   .image-border {
@@ -45,11 +45,11 @@
   div.card-leather h4,
   div.card-leather h5,
   div.card-leather h6 {
-    @apply text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500;
+    @apply text-gray-900 hover:text-primary-600 dark:text-gray-100 dark:hover:text-primary-400;
   }
 
   div.card-leather .font-thin {
-    @apply text-gray-900 hover:text-primary-600 dark:text-gray-200 dark:hover:text-primary-200;
+    @apply text-gray-900 hover:text-primary-700 dark:text-gray-100 dark:hover:text-primary-300;
   }
 
   main {
@@ -67,13 +67,13 @@
 
   main.main-leather,
   article.article-leather {
-    @apply bg-primary-0 dark:bg-primary-1000 text-gray-800 dark:text-gray-300;
+    @apply bg-primary-0 dark:bg-primary-1000 text-gray-900 dark:text-gray-100;
   }
 
   div.note-leather,
   p.note-leather,
   section.note-leather {
-    @apply bg-primary-0 dark:bg-primary-1000 text-gray-800 dark:text-gray-300 p-2 rounded;
+    @apply bg-primary-0 dark:bg-primary-1000 text-gray-900 dark:text-gray-100 p-2 rounded;
   }
 
   .edit div.note-leather:hover:not(:has(.note-leather:hover)),
@@ -88,7 +88,7 @@
   h4.h-leather,
   h5.h-leather,
   h6.h-leather {
-    @apply text-gray-800 dark:text-gray-300;
+    @apply text-gray-900 dark:text-gray-100;
   }
 
   h1.h-leather {
@@ -125,11 +125,11 @@
   div.modal-leather>div>h4,
   div.modal-leather>div>h5,
   div.modal-leather>div>h6 {
-    @apply text-gray-800 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-300;
+    @apply text-gray-900 hover:text-gray-900 dark:text-gray-100 dark:hover:text-gray-100;
   }
 
   div.modal-leather button {
-    @apply bg-primary-0 hover:bg-primary-0 dark:bg-primary-950 dark:hover:bg-primary-950 text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500;
+    @apply bg-primary-0 hover:bg-primary-0 dark:bg-primary-950 dark:hover:bg-primary-950 text-gray-900 hover:text-primary-600 dark:text-gray-100 dark:hover:text-primary-400;
   }
 
   /* Navbar */
@@ -142,7 +142,7 @@
   }
 
   nav.navbar-leather svg {
-    @apply fill-gray-800 hover:fill-primary-400 dark:fill-gray-300 dark:hover:fill-primary-500;
+    @apply fill-gray-900 hover:fill-primary-600 dark:fill-gray-100 dark:hover:fill-primary-400;
   }
 
   nav.navbar-leather h1,
@@ -151,7 +151,7 @@
   nav.navbar-leather h4,
   nav.navbar-leather h5,
   nav.navbar-leather h6 {
-    @apply text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500;
+    @apply text-gray-900 hover:text-primary-600 dark:text-gray-100 dark:hover:text-primary-400;
   }
 
   /* Sidebar */
@@ -187,11 +187,11 @@
 
   div.textarea-leather,
   div.textarea-leather textarea {
-    @apply text-gray-800 dark:text-gray-300;
+    @apply text-gray-900 dark:text-gray-100;
   }
 
   div.tooltip-leather {
-    @apply text-gray-800 dark:text-gray-300;
+    @apply text-gray-900 dark:text-gray-100;
   }
 
   div[role='tooltip'] button.btn-leather .tooltip-leather {
@@ -215,7 +215,7 @@
 /* Utilities can be applied via the @apply directive. */
 @layer utilities {
   .h-leather {
-    @apply text-gray-800 dark:text-gray-300 pt-4;
+    @apply text-gray-900 dark:text-gray-100 pt-4;
   }
 
   .h1-leather {
@@ -245,11 +245,11 @@
   /* Lists */
   .ol-leather li a,
   .ul-leather li a {
-    @apply text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500;
+    @apply text-gray-900 hover:text-primary-600 dark:text-gray-100 dark:hover:text-primary-400;
   }
 
   .link {
-    @apply underline cursor-pointer hover:text-primary-400 dark:hover:text-primary-500;
+    @apply underline cursor-pointer hover:text-primary-600 dark:hover:text-primary-400;
   }
 
   /* Card with transition */
@@ -286,7 +286,7 @@
 
   /* Tooltip */
   .tooltip-leather {
-    @apply fixed p-4 rounded shadow-lg bg-primary-0 dark:bg-primary-1000 text-gray-800 dark:text-gray-300 border border-gray-200 dark:border-gray-700 transition-colors duration-200;
+    @apply fixed p-4 rounded shadow-lg bg-primary-0 dark:bg-primary-1000 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 transition-colors duration-200;
     max-width: 400px;
     z-index: 1000;
   }
@@ -377,7 +377,7 @@
     }
 
     .stemblock {
-      @apply bg-gray-100 dark:bg-gray-900 p-4 rounded-lg;
+      @apply bg-gray-200 dark:bg-gray-800 p-4 rounded-lg;
     }
 
     .literalblock {
@@ -494,7 +494,7 @@
   input[type="tel"],
   input[type="url"],
   textarea {
-    @apply bg-primary-0 dark:bg-primary-1000 text-gray-800 dark:text-gray-300 border-s-4 border-primary-200 rounded shadow-none px-4 py-2;
+    @apply bg-primary-0 dark:bg-primary-1000 text-gray-900 dark:text-gray-100 border-s-4 border-primary-200 rounded shadow-none px-4 py-2;
-    @apply focus:border-primary-400 dark:focus:border-primary-500;
+    @apply focus:border-primary-600 dark:focus:border-primary-400;
   }
 }

src/lib/components/CommentBox.svelte

@@ -281,7 +281,7 @@
             }}
           />
         {/if}
-        <span class="text-gray-700 dark:text-gray-300">
+        <span class="text-gray-900 dark:text-gray-100">
           {userProfile.displayName || userProfile.name || nip19.npubEncode(props.userPubkey).slice(0, 8) + '...'}
         </span>
       </div>

src/lib/components/EventDetails.svelte

@@ -109,31 +109,31 @@
 
   <div class="flex items-center space-x-2">
     {#if toNpub(event.pubkey)}
-      <span class="text-gray-600 dark:text-gray-400">Author: {@render userBadge(toNpub(event.pubkey) as string, profile?.display_name || event.pubkey)}</span>
+      <span class="text-gray-700 dark:text-gray-300">Author: {@render userBadge(toNpub(event.pubkey) as string, profile?.display_name || event.pubkey)}</span>
     {:else}
-      <span class="text-gray-600 dark:text-gray-400">Author: {profile?.display_name || event.pubkey}</span>
+      <span class="text-gray-700 dark:text-gray-300">Author: {profile?.display_name || event.pubkey}</span>
     {/if}
   </div>
 
   <div class="flex items-center space-x-2">
-    <span class="text-gray-600 dark:text-gray-400">Kind:</span>
+    <span class="text-gray-700 dark:text-gray-300">Kind:</span>
     <span class="font-mono">{event.kind}</span>
-    <span class="text-gray-600 dark:text-gray-400">({getEventTypeDisplay(event)})</span>
+    <span class="text-gray-700 dark:text-gray-300">({getEventTypeDisplay(event)})</span>
   </div>
 
   {#if getEventSummary(event)}
     <div class="flex flex-col space-y-1">
-      <span class="text-gray-600 dark:text-gray-400">Summary:</span>
+      <span class="text-gray-700 dark:text-gray-300">Summary:</span>
-      <p class="text-gray-800 dark:text-gray-200">{getEventSummary(event)}</p>
+      <p class="text-gray-900 dark:text-gray-100">{getEventSummary(event)}</p>
     </div>
   {/if}
 
   {#if getEventHashtags(event).length}
     <div class="flex flex-col space-y-1">
-      <span class="text-gray-600 dark:text-gray-400">Tags:</span>
+      <span class="text-gray-700 dark:text-gray-300">Tags:</span>
       <div class="flex flex-wrap gap-2">
         {#each getEventHashtags(event) as tag}
-          <span class="px-2 py-1 rounded bg-primary-100 text-primary-700 text-sm font-medium">#{tag}</span>
+          <span class="px-2 py-1 rounded bg-primary-100 text-primary-800 text-sm font-medium">#{tag}</span>
         {/each}
       </div>
     </div>
@@ -142,11 +142,11 @@
   <!-- Content -->
   <div class="flex flex-col space-y-1">
     {#if event.kind !== 0}
-      <span class="text-gray-600 dark:text-gray-400">Content:</span>
+      <span class="text-gray-700 dark:text-gray-300">Content:</span>
       <div class="prose dark:prose-invert max-w-none">
         {@html showFullContent ? parsedContent : contentPreview}
         {#if !showFullContent && parsedContent.length > 250}
-          <button class="mt-2 text-primary-600 hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-300" onclick={() => showFullContent = true}>Show more</button>
+          <button class="mt-2 text-primary-700 hover:text-primary-900 dark:text-primary-400 dark:hover:text-primary-200" onclick={() => showFullContent = true}>Show more</button>
         {/if}
       </div>
     {/if}
@@ -160,7 +160,7 @@
   <!-- Tags Array -->
   {#if event.tags && event.tags.length}
     <div class="flex flex-col space-y-1">
-      <span class="text-gray-600 dark:text-gray-400">Event Tags:</span>
+      <span class="text-gray-700 dark:text-gray-300">Event Tags:</span>
       <div class="flex flex-wrap gap-2">
         {#each event.tags as tag}
           {@html renderTag(tag)}

src/lib/components/EventLimitControl.svelte

@@ -45,7 +45,7 @@
   />
   <button
     on:click={handleUpdate}
-    class="btn-leather px-3 py-1 bg-primary-0 dark:bg-primary-1000 border border-gray-300 dark:border-gray-700 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
+            class="btn-leather px-3 py-1 bg-primary-0 dark:bg-primary-1000 border border-gray-400 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
   >
     Update
   </button>

src/lib/components/EventRenderLevelLimit.svelte

@@ -45,7 +45,7 @@
   />
   <button
     onclick={handleUpdate}
-    class="px-3 py-1 bg-primary-0 dark:bg-primary-1000 border border-gray-300 dark:border-gray-700 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
+            class="px-3 py-1 bg-primary-0 dark:bg-primary-1000 border border-gray-400 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
   >
     Update
   </button>

src/lib/components/EventSearch.svelte

@@ -195,7 +195,7 @@
       {/each}
     </div>
     {#if !foundEvent && Object.values(relayStatuses).some(s => s === 'pending')}
-      <div class="text-gray-500 mt-2">Searching relays...</div>
+              <div class="text-gray-700 dark:text-gray-300 mt-2">Searching relays...</div>
     {/if}
     {#if !foundEvent && !searching && Object.values(relayStatuses).every(s => s !== 'pending')}
       <div class="text-red-500 mt-2">Event not found on any relay.</div>

src/lib/components/LoginModal.svelte

@@ -43,16 +43,16 @@
         <div class="flex items-start justify-between p-5 border-b border-solid border-gray-300 dark:border-gray-600 rounded-t">
           <h3 class="text-xl font-medium text-gray-900 dark:text-gray-100">Login Required</h3>
           <button 
-            class="ml-auto bg-transparent border-0 text-gray-400 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
+            class="ml-auto bg-transparent border-0 text-gray-600 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
             onclick={onClose}
           >
-            <span class="bg-transparent text-gray-500 dark:text-gray-400 h-6 w-6 text-2xl block outline-none focus:outline-none">×</span>
+            <span class="bg-transparent text-gray-700 dark:text-gray-300 h-6 w-6 text-2xl block outline-none focus:outline-none">×</span>
           </button>
         </div>
         
         <!-- Body -->
         <div class="relative p-6 flex-auto">
-          <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400 mb-6">
+          <p class="text-base leading-relaxed text-gray-700 dark:text-gray-300 mb-6">
             You need to be logged in to submit an issue. Your form data will be preserved.
           </p>
           <div class="flex flex-col space-y-4">

src/lib/components/Publication.svelte

@@ -193,7 +193,7 @@
       {:else if !isDone}
         <Button color="primary" on:click={() => loadMore(1)}>Show More</Button>
       {:else}
-        <p class="text-gray-500 dark:text-gray-400">
+        <p class="text-gray-700 dark:text-gray-300">
           You've reached the end of the publication.
         </p>
       {/if}
@@ -287,7 +287,7 @@
             <Card class="ArticleBox card-leather w-full grid max-w-xl">
               <div class="flex flex-col my-2">
                 <span>Unknown</span>
-                <span class="text-gray-500">1.1.1970</span>
+                <span class="text-gray-700 dark:text-gray-300">1.1.1970</span>
               </div>
               <div class="flex flex-col flex-grow space-y-4">
                 This is a very intelligent comment placeholder that applies to

src/lib/components/PublicationFeed.svelte

@@ -242,13 +242,13 @@
   {:else if loadingMore}
     <div class='flex justify-center mt-4 mb-8'>
       <Button outline disabled class="w-full max-w-md">
-        <Spinner class='mr-3 text-gray-300' size='4' />
+        <Spinner class='mr-3 text-gray-600 dark:text-gray-300' size='4' />
         Loading...
       </Button>
     </div>
   {:else}
     <div class='flex justify-center mt-4 mb-8'>
-      <P class='text-sm text-gray-600'>You've reached the end of the feed.</P>
+              <P class='text-sm text-gray-700 dark:text-gray-300'>You've reached the end of the feed.</P>
     </div>
   {/if}
 </div>

src/lib/components/PublicationHeader.svelte

@@ -52,7 +52,7 @@
             {/if}
           </h3>
           {#if version != '1'}
-            <h3 class='text-base font-thin'>version: {version}</h3>
+            <h3 class='text-base font-medium text-primary-700 dark:text-primary-300'>version: {version}</h3>
           {/if}
         </a>
       </div>

src/lib/components/RelayActions.svelte

@@ -162,7 +162,7 @@
 {#if showRelayModal}
   <div class="fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center">
     <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 w-full max-w-lg relative">
-      <button class="absolute top-2 right-2 text-gray-500 hover:text-gray-800" onclick={closeRelayModal}>&times;</button>
+              <button class="absolute top-2 right-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100" onclick={closeRelayModal}>&times;</button>
       <h2 class="text-lg font-semibold mb-4">Relay Search Results</h2>
       <div class="flex flex-col gap-4 max-h-96 overflow-y-auto">
         {#each Object.entries({
@@ -172,7 +172,7 @@
         }) as [groupName, groupRelays]}
           {#if groupRelays.length > 0}
             <div class="flex flex-col gap-2">
-              <h3 class="font-medium text-gray-700 dark:text-gray-300 sticky top-0 bg-white dark:bg-gray-900 py-2">
+              <h3 class="font-medium text-gray-900 dark:text-gray-100 sticky top-0 bg-white dark:bg-gray-900 py-2">
                 {groupName}
               </h3>
               {#each groupRelays as relay}

src/lib/components/RelayDisplay.svelte

@@ -46,7 +46,7 @@
   <span class="font-mono text-xs flex-1">{relay}</span>
   {#if showStatus && status}
     {#if status === 'pending'}
-      <svg class="w-4 h-4 animate-spin text-gray-400" fill="none" viewBox="0 0 24 24">
+              <svg class="w-4 h-4 animate-spin text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24">
         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
         <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
       </svg>

src/lib/components/cards/BlogHeader.svelte

@@ -39,7 +39,7 @@
       <div class="flex flex-row justify-between my-2">
         <div class="flex flex-col">
           {@render userBadge(authorPubkey, author)}
-          <span class='text-gray-500'>{publishedAt()}</span>
+          <span class='text-gray-700 dark:text-gray-300'>{publishedAt()}</span>
         </div>
         <CardActions event={event} />
       </div>

src/lib/components/util/CardActions.svelte

@@ -171,7 +171,7 @@
           {/if}
         </h2>
         {#if version}
-          <h4 class='text-base font-thin mt-2'>Version: {version}</h4>
+          <h4 class='text-base font-medium text-primary-700 dark:text-primary-300 mt-2'>Version: {version}</h4>
         {/if}
       </div>
     </div>

src/lib/components/util/Details.svelte

@@ -53,7 +53,7 @@
         {/if}
       </h2>
       {#if version !== '1' }
-        <h4 class="text-base font-thin">Version: {version}</h4>
+        <h4 class="text-base font-medium text-primary-700 dark:text-primary-300">Version: {version}</h4>
       {/if}
     </div>
   </div>

src/lib/components/util/Interactions.svelte

@@ -80,7 +80,7 @@
   }
 </script>
 
-<div class='InteractiveMenu !hidden flex-{direction} justify-around align-middle text-primary-700 dark:text-gray-500'>
+      <div class='InteractiveMenu !hidden flex-{direction} justify-around align-middle text-primary-700 dark:text-gray-300'>
   <Button color="none" class='flex flex-{direction} shrink-0 md:min-w-11 min-h-11 items-center p-0' onclick={doLike}><HeartOutline class="mx-2" size="lg" /><span>{likeCount}</span></Button>
   <Button color="none" class='flex flex-{direction} shrink-0 md:min-w-11 min-h-11 items-center p-0' onclick={doZap}><ZapOutline className="mx-2" /><span>{zapCount}</span></Button>
   <Button color="none" class='flex flex-{direction} shrink-0 md:min-w-11 min-h-11 items-center p-0' onclick={doHighlight}><FilePenOutline class="mx-2" size="lg"/><span>{highlightCount}</span></Button>

src/routes/+page.svelte

@@ -24,7 +24,7 @@
   let searchQuery = $state('');
 </script>
 
-<Alert rounded={false} id="alert-experimental" class='border-t-4 border-primary-500 text-gray-900 dark:text-gray-100 dark:border-primary-500 flex justify-left mb-2'>
+      <Alert rounded={false} id="alert-experimental" class='border-t-4 border-primary-600 text-gray-900 dark:text-gray-100 dark:border-primary-500 flex justify-left mb-2'>
   <HammerSolid class='mr-2 h-5 w-5 text-primary-500 dark:text-primary-500' />
   <span class='font-medium'>
       Pardon our dust!  The publication view is currently using an experimental loader, and may be unstable.

src/routes/about/+page.svelte

@@ -15,7 +15,7 @@
       >
       {#if isVersionKnown}
         <span
-          class="text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-nowrap"
+          class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded text-nowrap"
           >Version: {appVersion}</span
         >
       {/if}

src/routes/contact/+page.svelte

@@ -330,7 +330,7 @@
                 <div class="absolute inset-0 overflow-hidden">
                   <Textarea
                     id="content"
-                    class="w-full h-full resize-none bg-primary-0 dark:bg-primary-1000 text-gray-800 dark:text-gray-300 border-s-4 border-primary-200 rounded-b-lg rounded-t-none shadow-none px-4 py-2 focus:border-primary-400 dark:focus:border-primary-500"
+                    class="w-full h-full resize-none bg-primary-0 dark:bg-primary-1000 text-gray-900 dark:text-gray-100 border-s-4 border-primary-200 rounded-b-lg rounded-t-none shadow-none px-4 py-2 focus:border-primary-600 dark:focus:border-primary-400"
                     bind:value={content}
                     required
                     placeholder="Describe your issue in detail...
@@ -378,7 +378,7 @@ Also renders nostr identifiers: npubs, nprofiles, nevents, notes, and naddrs. Wi
                     {#await parseAdvancedmarkup(content)}
                       <p>Loading preview...</p>
                     {:then html}
-                      {@html html || '<p class="text-gray-500">Nothing to preview</p>'}
+                      {@html html || '<p class="text-gray-700 dark:text-gray-300">Nothing to preview</p>'}
                     {:catch error}
                       <p class="text-red-500">Error rendering preview: {error.message}</p>
                     {/await}
@@ -416,7 +416,7 @@ Also renders nostr identifiers: npubs, nprofiles, nevents, notes, and naddrs. Wi
         <div class="p-6 mb-4 text-sm bg-success-200 dark:bg-success-700 border border-success-300 dark:border-success-600 rounded-lg relative" role="alert">
           <!-- Close button -->
           <button 
-            class="absolute top-2 right-2 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-100"
+            class="absolute top-2 right-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100"
             onclick={closeSuccessMessage}
             aria-label="Close"
           >
@@ -490,7 +490,7 @@ Also renders nostr identifiers: npubs, nprofiles, nevents, notes, and naddrs. Wi
   class="w-full"
 >
   <div class="text-center">
-    <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
+            <h3 class="mb-5 text-lg font-normal text-gray-700 dark:text-gray-300">
       Would you like to submit the issue?
     </h3>
     <div class="flex justify-center gap-4">

src/routes/events/+page.svelte

@@ -70,7 +70,7 @@
           <CommentBox event={event} userPubkey={userPubkey} userRelayPreference={userRelayPreference} />
         </div>
       {:else}
-        <div class="mt-8 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
+        <div class="mt-8 p-4 bg-gray-200 dark:bg-gray-700 rounded-lg">
           <P>Please sign in to add comments.</P>
         </div>
       {/if}

src/routes/visualize/+page.svelte

@@ -123,7 +123,7 @@
       <div role="status">
         <svg
           aria-hidden="true"
-          class="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
+          class="w-8 h-8 text-gray-300 animate-spin dark:text-gray-500 fill-blue-600"
           viewBox="0 0 100 101"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"

src/styles/publications.css

@@ -1,7 +1,7 @@
 @layer components {
     /* AsciiDoc content */
     .publication-leather p a {
-        @apply underline hover:text-primary-500 dark:hover:text-primary-400;
+        @apply underline hover:text-primary-600 dark:hover:text-primary-400;
     }
 
     .publication-leather section p {