remake theme, focus on gruvbox

assets/css/app.css

@@ -7,95 +7,71 @@
 @import "./lightbox.css";
 
 @layer base {
-  :root[data-theme=default] {
+  :root { font-family: 'Inter', sans-serif; }
-    --color-primary: 68 68 68;
+  @supports (font-variation-settings: normal) {
-    --color-background: 255 255 255;
+    :root { font-family: 'Inter var', sans-serif; }
-    --color-text-base: 68 68 68;
-    --color-text-heading: 68 68 68;
-    --color-text-muted: 153 153 153;
-    --color-text-dim: 204 204 204;
   }
 
-  :root[data-theme=default][data-mode=dark] {
+  :root {
-    --color-primary: 255 255 255;
+    --color-primary: 214 93 14; /* orange */
-    --color-background: 34 34 34;
+    --color-primary1: 175 58 3; /* orange faded */
-    --color-text-base: 204 204 204;
+
-    --color-text-heading: 255 255 255;
+    --color-secondary: 104 157 106; /* aqua */
-    --color-text-muted: 102 102 102;
+    --color-secondary1: 66 123 88; /* aqua faded */
-    --color-text-dim: 68 68 68;
+
+    --color-background: 253 244 193; /* light0 */
+    --color-background1: 235 219 178; /* light1 */
+
+    --color-foreground: 60 56 54; /* dark1 */
+    --color-foreground1: 80 73 69; /* dark2 */
+
+    --color-heading: var(--color-secondary);
+    --color-code: var(--color-background1);
+
+    @apply selection:bg-theme-primary/50;
   }
 
-  :root[data-theme=frame] {
+  :root[data-mode=dark] {
-    --color-primary: 91 82 254;
+    --color-primary: 214 93 14; /* orange */
-    --color-background: 237 238 242;
+    --color-primary1: 254 128 25; /* orange bright */
-    --color-text-base: 38 43 55;
+
-    --color-text-heading: 57 65 83;
+    --color-secondary: 104 157 106; /* aqua */
-    --color-text-muted: 57 65 83;
+    --color-secondary1: 142 192 124; /* aqua faded */
-    --color-text-dim: 76 87 111;
+
+    --color-background: 40 40 40; /* dark0 */
+    --color-background1: 60 56 54; /* dark1 */
+
+    --color-foreground: 235 219 178; /* light1 */
+    --color-foreground1: 213 196 161; /* light2 */
+
+    --color-heading: var(--color-secondary);
+    --color-code: var(--color-base);
   }
 
-  :root[data-theme=frame][data-mode=dark] {
+    :root[data-mode=dark] .prose {
-    --color-primary: 91 82 254;
-    --color-background: 38 43 55;
-    --color-text-base: 204 204 204;
-    --color-text-heading: 204 204 204;
-    --color-text-muted: 76 87 111;
-    --color-text-dim: 57 65 83;
-  }
-
-  :root[data-theme=gruvbox] {
-    --color-primary: 175 58 3;
-    --color-background: 251 241 199;
-    --color-text-base :40 40 40;
-    --color-text-heading: 66 123 88;
-    --color-text-muted: 60 56 54;
-    --color-text-dim: 102 92 84;
-  }
-
-  :root[data-theme=gruvbox][data-mode=dark] {
-    --color-primary: 214 93 14;
-    --color-background: 40 40 40;
-    --color-text-base: 251 241 199;
-    --color-text-heading: 104 157 106;
-    --color-text-muted: 235 219 178;
-    --color-text-dim: 189 174 147;
-  }
-}
-
-/* 
-  Invert prose styles based on the variant of the theme. 
-*/
-:root[data-mode=dark] .prose {
     @apply prose-invert;
+  }
 }
 
-.prose :where(a):not(:where([class~="not-prose"] *)) {
+@layer components {
-  @apply underline decoration-1 decoration-theme-primary;
+  /* Set width and color for identity icons */
-}
+  a[rel] svg { 
-
-.prose :where(h2):not(:where([class~="not-prose"] *)) {
-  @apply font-serif text-theme-heading;
-}
-
-.prose img {
-  @apply rounded border border-theme-dim;
-}
-
-/* Set width and color for identity icons */
-a[rel] svg { 
     width: 1em;
     fill: rgb(var(--color-primary));
-}
+  }
-
+  svg {
-/* Set width and color for identity icons */
-svg {
     width: 1.5em;
-}
+  }
 
-.alert {
+  .alert {
     @apply p-3 mt-3 rounded;
-}
+  }
 
-.alert-danger {
+  .alert.alert-danger {
     @apply bg-red-100 text-red-500 dark:bg-red-950 dark:text-red-500;
+  }
+
+  .prose a {
+    @apply underline decoration-2 decoration-theme-primary hover:bg-theme-primary hover:text-theme-background transition;
+  }
 }

assets/css/lolight.css

@@ -1,23 +1,22 @@
 .ll-nam { /* words */
-    color: #2196f3;
+    @apply text-theme-code;
-    @apply text-code-500;
 }
 .ll-num { /* numbers */
-    @apply text-code-400;
+    @apply text-theme-code;
 }
 .ll-str { /* strings */
-    @apply text-code-600;
+    @apply text-theme-code;
 }
 .ll-rex { /* regular expressions */
-    @apply text-code-600;
+    @apply text-theme-code;
 }
 .ll-pct { /* operators, punctation */
-    @apply text-code-200;
+    @apply text-theme-code;
 }
 .ll-key { /* keywords */
-    @apply text-code-300 font-bold;
+    @apply text-theme-code font-bold;
 }
 .ll-com { /* comments */
-    @apply text-code-100;
+    @apply text-theme-code;
     font-style: italic;
 }

assets/tailwind.config.js

@@ -15,16 +15,37 @@ module.exports = {
   darkMode: ['class', '[data-mode="dark"]'],
   theme: {
     extend: {
+      typography: {
+        gruvbox: {
+          css: {
+            '--tw-prose-body': 'rgb(var(--color-foreground))',
+            '--tw-prose-links': 'rgb(var(--color-foreground))',
+            '--tw-prose-headings': 'rgb(var(--color-foreground))',
+            '--tw-prose-bold': 'rgb(var(--color-foreground))',
+            '--tw-prose-quotes': 'rgb(var(--color-foreground))',
+            '--tw-prose-bullets': 'rgb(var(--color-primary))',
+            '--tw-prose-quote-borders': 'rgb(var(--color-primary))',
+            '--tw-prose-invert-body': 'rgb(var(--color-foreground))',
+            '--tw-prose-invert-links': 'rgb(var(--color-foreground))',
+            '--tw-prose-invert-headings': 'rgb(var(--color-foreground))',
+            '--tw-prose-invert-bold': 'rgb(var(--color-foreground))',
+            '--tw-prose-invert-quotes': 'rgb(var(--color-foreground))',
+            '--tw-prose-invert-bullets': 'rgb(var(--color-primary))',
+            '--tw-prose-invert-quote-borders': 'rgb(var(--color-primary))'    
+          }
+        }
+      },
       colors: {
         code: colors.emerald,
         gray: colors.zinc,
         theme: {
-          primary: 'rgb(var(--color-primary) / <alpha-value>)',
-          heading: 'rgb(var(--color-text-heading) / <alpha-value>)',
-          base: 'rgb(var(--color-text-base) / <alpha-value>)',
-          muted: 'rgb(var(--color-text-muted) / <alpha-value>)',
           background: 'rgb(var(--color-background) / <alpha-value>)',
-          dim: 'rgb(var(--color-text-dim) / <alpha-value>)'
+          background1: 'rgb(var(--color-background1) / <alpha-value>)',
+          base: 'rgb(var(--color-foreground) / <alpha-value>)',
+          base1: 'rgb(var(--color-foreground1) / <alpha-value>)',
+          primary: 'rgb(var(--color-primary) / <alpha-value>)',
+          heading: 'rgb(var(--color-heading) / <alpha-value>)',
+          code: 'rgb(var(--color-code) / <alpha-value>)'
         } 
       }
     },

lib/chiya_web/components/layouts/app.html.heex

@@ -1,36 +1,42 @@
 <header class="px-4 sm:px-6 lg:px-8">
   <div class="flex items-center justify-end border-b border-gray-300 dark:border-gray-800 py-3">
+    <% items = [
+        %{
+          path: ~p"/admin/notes",
+          icon: "hero-document-text-solid",
+          name: "Notes"
+        },
+        %{
+          path: ~p"/admin/comments",
+          icon: "hero-chat-bubble-oval-left-ellipsis-solid",
+          name: "Comments"
+        },
+        %{
+          path: ~p"/admin/channels",
+          icon: "hero-speaker-wave-solid",
+          name: "Channels"
+        },
+        %{
+          path: ~p"/admin/identities",
+          icon: "hero-user-solid",
+          name: "Identities"
+        },
+        %{
+          path: ~p"/admin/settings",
+          icon: "hero-wrench-screwdriver-solid",
+          name: "Settings"
+        }
+      ] %>
     <div class="flex items-center gap-4">
+    <%= for item <- items do %>
       <.link
-        href={~p"/admin/comments"}
+        href={item.path}
         class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-200"
       >
-        <.icon name="hero-document-text" class="w-4 h-4" /> Comments
+        <.icon name={item.icon} class="w-4 h-4" />
-      </.link>
+        <span class="align-sub"><%= item.name %></span>
-      <.link
-        href={~p"/admin/notes"}
-        class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-200"
-      >
-        <.icon name="hero-document-text" class="w-4 h-4" /> Notes
-      </.link>
-      <.link
-        href={~p"/admin/channels"}
-        class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-200"
-      >
-        <.icon name="hero-speaker-wave" class="w-4 h-4" /> Channels
-      </.link>
-      <.link
-        href={~p"/admin/identities"}
-        class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-200"
-      >
-        <.icon name="hero-user" class="w-4 h-4" /> Identities
-      </.link>
-      <.link
-        href={~p"/admin/settings"}
-        class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-200"
-      >
-        <.icon name="hero-wrench-screwdriver" class="w-4 h-4" /> Settings
       </.link>
+    <% end %>
     </div>
   </div>
 </header>

lib/chiya_web/components/layouts/root_app.html.heex

@@ -10,6 +10,8 @@
 
     <.favicon />
 
+    <link rel="preconnect" href="https://rsms.me/">
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>

lib/chiya_web/components/layouts/root_public.html.heex

@@ -10,6 +10,8 @@
 
     <.favicon />
 
+    <link rel="preconnect" href="https://rsms.me/">
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/public.js"}>
     </script>

lib/chiya_web/controllers/page_html/note.html.heex

@@ -1,6 +1,6 @@
 <div class="mx-auto max-w-xl mx-4 lg:mx-0">
   <header>
-    <h1 class="mt-16 text-3xl font-semibold leading-8 text-theme-heading font-serif">
+    <h1 class="mt-16 text-3xl font-extrabold text-theme-base">
       <%= @note.name %>
     </h1>
     <p class="mt-2 text-sm leading-6 text-theme-base">
@@ -9,10 +9,11 @@
       <% else %>
         <span>Unpublished</span>
       <% end %>
-      <time class="text-theme-primary font-semibold"><%= pretty_date(@note.published_at) %></time>
+      <time class="font-semibold"><%= pretty_date(@note.published_at) %></time>
       <span>·</span>
       <span>Last Updated</span>
-      <time class="text-theme-primary font-semibold"><%= pretty_date(@note.updated_at) %></time>
+      <time class="font-semibold"><%= pretty_date(@note.updated_at) %></time>
+      <%= if not Enum.empty?(@note.tags) do %>
       <span>·</span>
       <span>Tags</span>
       <span class="text-theme-primary font-semibold">
@@ -20,14 +21,15 @@
           <a href={~p"/t/#{tag.slug}"}><%= tag.name %></a>
         <% end %>
       </span>
+      <% end %>
       <%= if @current_user do %>
         <span>·</span>
-        <a href={~p"/admin/notes/#{@note}/edit"} class="text-theme-primary font-semibold">Edit</a>
+        <a href={~p"/admin/notes/#{@note}/edit"} class="font-semibold underline decoration-2 decoration-theme-primary hover:bg-theme-primary hover:text-theme-background transition">Edit</a>
       <% end %>
     </p>
   </header>
 
-  <section class="prose mt-8">
+  <section class="mt-8 prose prose-gruvbox md:prose-lg lg:prose-xl">
     <%= Markdown.render(@note.content) |> raw %>
   </section>