From 72c6b590f13cc4112ad3e413387e244afee0cb16 Mon Sep 17 00:00:00 2001
From: Gordon Pedersen <death.au@death.id.au>
Date: Thu, 25 Jul 2024 15:00:46 +1000
Subject: [PATCH] Light theme!

---
 Components/Layout/AvatarMenuLinks.razor |  4 ++
 Components/Pages/Directory.razor        |  2 +-
 Components/PasteCard.razor              |  2 +-
 wwwroot/css/color.css                   | 94 ++++++++++++++++++++-----
 4 files changed, 82 insertions(+), 20 deletions(-)

diff --git a/Components/Layout/AvatarMenuLinks.razor b/Components/Layout/AvatarMenuLinks.razor
index dc9f2c0..c4b63c5 100644
--- a/Components/Layout/AvatarMenuLinks.razor
+++ b/Components/Layout/AvatarMenuLinks.razor
@@ -34,6 +34,10 @@
       <i class="fa-duotone fa-seedling"></i>
       <span>/Now</span>
     </a>
+    <a class="indent row" href="/person/@State.SelectedAddressName#pastebin">
+      <i class="fa-solid fa-clipboard"></i>
+      <span>Pastebin</span>
+    </a>
   }
 }
 
diff --git a/Components/Pages/Directory.razor b/Components/Pages/Directory.razor
index a7d1dac..05d177e 100644
--- a/Components/Pages/Directory.razor
+++ b/Components/Pages/Directory.razor
@@ -35,7 +35,7 @@
             catch (Exception) { }
           }
           <li>
-            <a class="chip medium no-border no-margin" href="/person/@address">
+            <a class="chip medium no-border tiny-margin transparent" href="/person/@address">
               <img class="circle avatar responsive" src="https://profiles.cache.lol/@linkAddress/picture">
               <span>@displayAddress</span>
             </a>
diff --git a/Components/PasteCard.razor b/Components/PasteCard.razor
index f8e5273..666f7fd 100644
--- a/Components/PasteCard.razor
+++ b/Components/PasteCard.razor
@@ -19,7 +19,7 @@
       <i class="fa-solid fa-share-nodes"></i>
     </button>
   </nav>
-  <small class="nowrap gray-5-fg"><i class="fa-solid fa-clock tiny"></i> @Paste.RelativeTime</small>
+  <small class="nowrap chip no-border"><i class="fa-solid fa-clock tiny"></i> @Paste.RelativeTime</small>
   @if(MarkupView){
     <div class="padding">
       @Utilities.MdToHtmlMarkup(Paste.Content)
diff --git a/wwwroot/css/color.css b/wwwroot/css/color.css
index 86cc057..c68a70e 100644
--- a/wwwroot/css/color.css
+++ b/wwwroot/css/color.css
@@ -9,33 +9,91 @@ body.dark {
   --on-background: var(--gray-1);
   --surface: var(--gray-9);
   --on-surface: var(--gray-4);
+  --on-surface-variant: var(--gray-6);
 }
 
-.author { color: inherit }
+@media (prefers-color-scheme: light) {
+  body.dark {
+    --primary: #6750a4;
+    --on-primary: #ffffff;
+    --primary-container: #e9ddff;
+    --on-primary-container: #22005d;
+    --secondary: #625b71;
+    --on-secondary: #ffffff;
+    --secondary-container: var(--gray-4);
+    --on-secondary-container: #1e192b;
+    --tertiary: #7e5260;
+    --on-tertiary: #ffffff;
+    --tertiary-container: #ffd9e3;
+    --on-tertiary-container: #31101d;
+    --error: #ba1a1a;
+    --on-error: #ffffff;
+    --error-container: #ffdad6;
+    --on-error-container: #410002;
+    --background: var(--gray-0);
+    --on-background: var(--gray-8);
+    --surface: var(--gray-2);
+    --on-surface: var(--gray-9);
+    --surface-variant: var(--gray-1);
+    --on-surface-variant: var(--gray-7);
+    --outline: #7a757f;
+    --outline-variant: #cac4cf;
+    --shadow: #000000;
+    --scrim: #000000;
+    --inverse-surface: var(--gray-1);
+    --inverse-on-surface: var(--gray-9);
+    --inverse-primary: #cfbcff;
+    --surface-dim: #ddd8dd;
+    --surface-bright: #fdf8fd;
+    --surface-container-lowest: #ffffff;
+    --surface-container-low: var(--gray-3);
+    --surface-container: var(--gray-3);
+    --surface-container-high: #ece7eb;
+    --surface-container-highest: #e6e1e6;
+    --overlay: rgb(0 0 0 / .5);
+    --active: rgb(0 0 0 / .1);
+    --elevate1: 0 .125rem .125rem 0 rgb(0 0 0 / .32);
+    --elevate2: 0 .25rem .5rem 0 rgb(0 0 0 / .4);
+    --elevate3: 0 .375rem .75rem 0 rgb(0 0 0 / .48);
+    --secondary-container: var(--gray-4);
+  }
+}
 
-.status nav, .status nav .chip { color: var(--gray-7) }
+.author {
+  color: inherit
+}
+
+.status nav, .status nav .chip {
+  color: var(--gray-7)
+}
 
 .avatar::after {
-  background-color: var(--surface-container-low);
-  border: 1px dashed var(--gray-4)
+  background-color: var(--surface);
+  border: 1px dashed var(--on-surface)
 }
 
-article.ephemeral { border: 2px dashed var(--gray-7) }
+  article.ephemeral {
+    border: 2px dashed var(--outline)
+  }
 
-article.now {
-  background-color: var(--green-2);
-  color: var(--black)
-}
+  article.now {
+    background-color: var(--green-2);
+    color: var(--black)
+  }
 
-a.row.indent { border-left: 1px solid var(--outline) }
+  a.row.indent {
+    border-left: 1px solid var(--outline)
+  }
 
-.markdown-editor .editor-preview { background: var(--surface) }
+  .markdown-editor .editor-preview {
+    background: var(--surface)
+  }
 
-menu > details > a:is(:hover,:focus,.active), menu > details > summary:is(:hover,:focus,.active) {
-  background-color: var(--active)
-}
+  menu > details > a:is(:hover,:focus,.active), menu > details > summary:is(:hover,:focus,.active) {
+    background-color: var(--active)
+  }
 
-#advanced :is(.field.textarea, textarea), .EasyMDEContainer, article.paste code {
-  background-color: #212121;
-  color: #eff
-}
\ No newline at end of file
+  #advanced :is(.field.textarea, textarea), .EasyMDEContainer, article.paste code {
+    background-color: #212121;
+    color: #eff
+  }
\ No newline at end of file