♻️ Change Tailwind Typography to use variables

CHANGELOG.md

@@ -13,7 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Upgrade to Tailwind v3.1.3
+- Upgrade to Tailwind v3.1.3 and Typography v0.5.2
 - Adjusted contrast of certain text to improve accessibility
 
 ## [1.1.0] - 2021-11-06

assets/css/compiled/main.css

@@ -559,7 +559,7 @@ video {
 }
 
 .prose {
-  color: #374151;
+  color: var(--tw-prose-body);
   max-width: 65ch;
 }
 
@@ -572,7 +572,7 @@ video {
 }
 
 .prose :where(a):not(:where([class~="not-prose"] *)) {
-  color: #7e22ce;
+  color: var(--tw-prose-links);
   text-decoration: underline;
   font-weight: 500;
   -webkit-text-decoration-color: #d8b4fe;
@@ -580,14 +580,13 @@ video {
 }
 
 .prose :where(a):not(:where([class~="not-prose"] *)):hover {
+  text-decoration: none;
   background-color: #9333ea;
   border-radius: 0.09rem;
-  color: #fff;
-  text-decoration: none;
 }
 
 .prose :where(strong):not(:where([class~="not-prose"] *)) {
-  color: #111827;
+  color: var(--tw-prose-bold);
   font-weight: 600;
 }
 
@@ -647,7 +646,7 @@ video {
 }
 
 .prose :where(hr):not(:where([class~="not-prose"] *)) {
-  border-color: #e5e7eb;
+  border-color: var(--tw-prose-hr);
   border-top-width: 1px;
   margin-top: 3em;
   margin-bottom: 3em;
@@ -656,9 +655,9 @@ video {
 .prose :where(blockquote):not(:where([class~="not-prose"] *)) {
   font-weight: 500;
   font-style: italic;
-  color: #1f2937;
+  color: var(--tw-prose-quotes);
   border-left-width: 0.25rem;
-  border-left-color: #e9d5ff;
+  border-left-color: var(--tw-prose-quote-borders);
   quotes: "\201C""\201D""\2018""\2019";
   margin-top: 1.6em;
   margin-bottom: 1.6em;
@@ -674,13 +673,12 @@ video {
 }
 
 .prose :where(h1):not(:where([class~="not-prose"] *)) {
-  color: #1f2937;
+  color: var(--tw-prose-headings);
   font-weight: 800;
   font-size: 2.25em;
   margin-top: 0;
   margin-bottom: 0.8888889em;
   line-height: 1.1111111;
-  position: relative;
 }
 
 .prose :where(h1 strong):not(:where([class~="not-prose"] *)) {
@@ -688,13 +686,12 @@ video {
 }
 
 .prose :where(h2):not(:where([class~="not-prose"] *)) {
-  color: #1f2937;
+  color: var(--tw-prose-headings);
   font-weight: 700;
   font-size: 1.5em;
   margin-top: 2em;
   margin-bottom: 1em;
   line-height: 1.3333333;
-  position: relative;
 }
 
 .prose :where(h2 strong):not(:where([class~="not-prose"] *)) {
@@ -702,13 +699,12 @@ video {
 }
 
 .prose :where(h3):not(:where([class~="not-prose"] *)) {
-  color: #1f2937;
+  color: var(--tw-prose-headings);
   font-weight: 600;
   font-size: 1.25em;
   margin-top: 1.6em;
   margin-bottom: 0.6em;
   line-height: 1.6;
-  position: relative;
 }
 
 .prose :where(h3 strong):not(:where([class~="not-prose"] *)) {
@@ -716,12 +712,11 @@ video {
 }
 
 .prose :where(h4):not(:where([class~="not-prose"] *)) {
-  color: #1f2937;
+  color: var(--tw-prose-headings);
   font-weight: 600;
   margin-top: 1.5em;
   margin-bottom: 0.5em;
   line-height: 1.5;
-  position: relative;
 }
 
 .prose :where(h4 strong):not(:where([class~="not-prose"] *)) {
@@ -741,7 +736,7 @@ video {
 }
 
 .prose :where(code):not(:where([class~="not-prose"] *)) {
-  color: #6b21a8;
+  color: var(--tw-prose-code);
   font-weight: 600;
   font-size: 0.875em;
 }
@@ -755,12 +750,12 @@ video {
 }
 
 .prose :where(a code):not(:where([class~="not-prose"] *)) {
-  color: var(--tw-prose-links);
+  color: var(--tw-prose-code);
 }
 
 .prose :where(pre):not(:where([class~="not-prose"] *)) {
-  color: #374151;
+  color: var(--tw-prose-pre-code);
-  background-color: #f9fafb;
+  background-color: var(--tw-prose-pre-bg);
   overflow-x: auto;
   font-weight: 400;
   font-size: 0.875em;
@@ -780,7 +775,7 @@ video {
   border-radius: 0;
   padding: 0;
   font-weight: inherit;
-  color: #374151;
+  color: inherit;
   font-size: inherit;
   font-family: inherit;
   line-height: inherit;
@@ -806,8 +801,7 @@ video {
 
 .prose :where(thead):not(:where([class~="not-prose"] *)) {
   border-bottom-width: 1px;
-  border-bottom-color: #6b7280;
+  border-bottom-color: var(--tw-prose-th-borders);
-  color: #1f2937;
 }
 
 .prose :where(thead th):not(:where([class~="not-prose"] *)) {
@@ -821,7 +815,7 @@ video {
 
 .prose :where(tbody tr):not(:where([class~="not-prose"] *)) {
   border-bottom-width: 1px;
-  border-bottom-color: #d1d5db;
+  border-bottom-color: var(--tw-prose-td-borders);
 }
 
 .prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) {
@@ -838,36 +832,36 @@ video {
 
 .prose {
   --tw-prose-body: #374151;
-  --tw-prose-headings: #111827;
+  --tw-prose-headings: #1f2937;
-  --tw-prose-lead: #4b5563;
+  --tw-prose-lead: #6b7280;
-  --tw-prose-links: #111827;
+  --tw-prose-links: #7e22ce;
   --tw-prose-bold: #111827;
-  --tw-prose-counters: #6b7280;
+  --tw-prose-counters: #1f2937;
-  --tw-prose-bullets: #d1d5db;
+  --tw-prose-bullets: #6b7280;
   --tw-prose-hr: #e5e7eb;
-  --tw-prose-quotes: #111827;
+  --tw-prose-quotes: #374151;
-  --tw-prose-quote-borders: #e5e7eb;
+  --tw-prose-quote-borders: #e9d5ff;
   --tw-prose-captions: #6b7280;
-  --tw-prose-code: #111827;
+  --tw-prose-code: #7e22ce;
-  --tw-prose-pre-code: #e5e7eb;
+  --tw-prose-pre-code: #374151;
-  --tw-prose-pre-bg: #1f2937;
+  --tw-prose-pre-bg: #f9fafb;
-  --tw-prose-th-borders: #d1d5db;
+  --tw-prose-th-borders: #6b7280;
-  --tw-prose-td-borders: #e5e7eb;
+  --tw-prose-td-borders: #d1d5db;
   --tw-prose-invert-body: #d1d5db;
-  --tw-prose-invert-headings: #fff;
+  --tw-prose-invert-headings: #f9fafb;
-  --tw-prose-invert-lead: #9ca3af;
+  --tw-prose-invert-lead: #6b7280;
-  --tw-prose-invert-links: #fff;
+  --tw-prose-invert-links: #c084fc;
   --tw-prose-invert-bold: #fff;
   --tw-prose-invert-counters: #9ca3af;
   --tw-prose-invert-bullets: #4b5563;
-  --tw-prose-invert-hr: #374151;
+  --tw-prose-invert-hr: #6b7280;
-  --tw-prose-invert-quotes: #f3f4f6;
+  --tw-prose-invert-quotes: #e5e7eb;
-  --tw-prose-invert-quote-borders: #374151;
+  --tw-prose-invert-quote-borders: #581c87;
   --tw-prose-invert-captions: #9ca3af;
-  --tw-prose-invert-code: #fff;
+  --tw-prose-invert-code: #c084fc;
-  --tw-prose-invert-pre-code: #d1d5db;
+  --tw-prose-invert-pre-code: #e5e7eb;
-  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
+  --tw-prose-invert-pre-bg: #374151;
-  --tw-prose-invert-th-borders: #4b5563;
+  --tw-prose-invert-th-borders: #6b7280;
   --tw-prose-invert-td-borders: #374151;
   font-size: 1rem;
   line-height: 1.75;
@@ -980,14 +974,6 @@ video {
   margin-bottom: 0;
 }
 
-.prose :where(ol > li):not(:where([class~="not-prose"] *))::before {
-  color: #1f2937;
-}
-
-.prose :where(ul > li):not(:where([class~="not-prose"] *))::before {
-  background-color: #6b7280;
-}
-
 .prose :where(kbd):not(:where([class~="not-prose"] *)) {
   background-color: #e5e7eb;
   padding: 0.1rem 0.4rem;
@@ -997,6 +983,7 @@ video {
 }
 
 .prose :where(mark):not(:where([class~="not-prose"] *)) {
+  color: #1f2937;
   background-color: #e9d5ff;
   padding: 0.1rem 0.2rem;
   border-radius: 0.12rem;
@@ -1385,14 +1372,9 @@ video {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
-.text-neutral-300 {
+.hover\:text-primary-500:hover {
   --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
+  color: rgb(168 85 247 / var(--tw-text-opacity));
-}
-
-.hover\:text-primary-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(192 132 252 / var(--tw-text-opacity));
 }
 
 .hover\:underline:hover {
@@ -1400,90 +1382,42 @@ video {
           text-decoration-line: underline;
 }
 
+.hover\:decoration-primary-400:hover {
+  -webkit-text-decoration-color: #c084fc;
+          text-decoration-color: #c084fc;
+}
+
 @media (prefers-color-scheme: dark) {
-  .dark\:prose-light {
+  .dark\:prose-invert {
-    color: #9ca3af;
+    --tw-prose-body: var(--tw-prose-invert-body);
+    --tw-prose-headings: var(--tw-prose-invert-headings);
+    --tw-prose-lead: var(--tw-prose-invert-lead);
+    --tw-prose-links: var(--tw-prose-invert-links);
+    --tw-prose-bold: var(--tw-prose-invert-bold);
+    --tw-prose-counters: var(--tw-prose-invert-counters);
+    --tw-prose-bullets: var(--tw-prose-invert-bullets);
+    --tw-prose-hr: var(--tw-prose-invert-hr);
+    --tw-prose-quotes: var(--tw-prose-invert-quotes);
+    --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
+    --tw-prose-captions: var(--tw-prose-invert-captions);
+    --tw-prose-code: var(--tw-prose-invert-code);
+    --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
+    --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
+    --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
+    --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
   }
 
-  .dark\:prose-light :where(a):not(:where([class~="not-prose"] *)) {
+  .dark\:prose-invert :where(a):not(:where([class~="not-prose"] *)) {
-    color: #c084fc;
+    -webkit-text-decoration-color: #4b5563;
-    -webkit-text-decoration-color: #6b7280;
+            text-decoration-color: #4b5563;
-            text-decoration-color: #6b7280;
   }
 
-  .dark\:prose-light :where(strong):not(:where([class~="not-prose"] *)) {
+  .dark\:prose-invert :where(kbd):not(:where([class~="not-prose"] *)) {
-    color: #fff;
-  }
-
-  .dark\:prose-light :where(ol > li):not(:where([class~="not-prose"] *))::before {
-    color: #9ca3af;
-  }
-
-  .dark\:prose-light :where(ul > li):not(:where([class~="not-prose"] *))::before {
-    background-color: #4b5563;
-  }
-
-  .dark\:prose-light :where(hr):not(:where([class~="not-prose"] *)) {
-    border-color: #6b7280;
-  }
-
-  .dark\:prose-light :where(blockquote):not(:where([class~="not-prose"] *)) {
-    color: #e5e7eb;
-    border-left-color: #581c87;
-  }
-
-  .dark\:prose-light :where(h1):not(:where([class~="not-prose"] *)) {
-    color: #fff;
-  }
-
-  .dark\:prose-light :where(h2):not(:where([class~="not-prose"] *)) {
-    color: #fff;
-  }
-
-  .dark\:prose-light :where(h3):not(:where([class~="not-prose"] *)) {
-    color: #fff;
-  }
-
-  .dark\:prose-light :where(h4):not(:where([class~="not-prose"] *)) {
-    color: #fff;
-  }
-
-  .dark\:prose-light :where(figure figcaption):not(:where([class~="not-prose"] *)) {
-    color: #9ca3af;
-  }
-
-  .dark\:prose-light :where(code):not(:where([class~="not-prose"] *)) {
-    color: #a855f7;
-  }
-
-  .dark\:prose-light :where(a code):not(:where([class~="not-prose"] *)) {
-    color: #fff;
-  }
-
-  .dark\:prose-light :where(pre):not(:where([class~="not-prose"] *)) {
     color: #e5e7eb;
     background-color: #374151;
   }
 
-  .dark\:prose-light :where(pre code):not(:where([class~="not-prose"] *)) {
+  .dark\:prose-invert :where(mark):not(:where([class~="not-prose"] *)) {
-    color: #e5e7eb;
-  }
-
-  .dark\:prose-light :where(thead):not(:where([class~="not-prose"] *)) {
-    color: #fff;
-    border-bottom-color: #6b7280;
-  }
-
-  .dark\:prose-light :where(tbody tr):not(:where([class~="not-prose"] *)) {
-    border-bottom-color: #374151;
-  }
-
-  .dark\:prose-light :where(kbd):not(:where([class~="not-prose"] *)) {
-    background-color: #374151;
-    color: #d1d5db;
-  }
-
-  .dark\:prose-light :where(mark):not(:where([class~="not-prose"] *)) {
     background-color: #c084fc;
   }
 
@@ -1497,15 +1431,15 @@ video {
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
 
+  .dark\:text-neutral-400 {
+    --tw-text-opacity: 1;
+    color: rgb(156 163 175 / var(--tw-text-opacity));
+  }
+
   .dark\:text-neutral-500 {
     --tw-text-opacity: 1;
     color: rgb(107 114 128 / var(--tw-text-opacity));
   }
-
-  .dark\:text-neutral-600 {
-    --tw-text-opacity: 1;
-    color: rgb(75 85 99 / var(--tw-text-opacity));
-  }
 }
 
 @media (min-width: 640px) {

layouts/_default/single.html

@@ -8,7 +8,7 @@
         {{ .Title | emojify }}
       </h1>
     </header>
-    <section class="prose dark:prose-light">
+    <section class="prose dark:prose-invert">
       {{ .Content | emojify }}
     </section>
   </article>

layouts/index.html

@@ -2,13 +2,17 @@
   <article class="flex flex-col items-center justify-center h-full mt-10 text-center">
     <header class="flex flex-col items-center mb-3">
       {{ with .Site.Author.image }}
-        <img class="mb-2 rounded-full w-36 h-36" src="{{ . | relURL }}" alt="{{ $.Site.Author.name }}" />
+        <img
+          class="mb-2 rounded-full w-36 h-36"
+          src="{{ . | relURL }}"
+          alt="{{ $.Site.Author.name }}"
+        />
       {{ end }}
       <h1 class="text-4xl font-extrabold dark:text-white">
         {{ .Params.title | default .Site.Author.name | default .Site.Title | emojify }}
       </h1>
       {{ with .Content }}
-        <section class="pt-5 prose dark:prose-light">{{ . | emojify }}</section>
+        <section class="pt-5 prose dark:prose-invert">{{ . | emojify }}</section>
       {{ end }}
     </header>
     {{ with .Site.Author.links }}

tailwind.config.js

@@ -17,164 +17,84 @@ module.exports = {
     extend: {
       typography: (theme) => ({
         DEFAULT: {
-          css: [
+          css: {
-            {
+            "--tw-prose-body": theme("colors.neutral.700"),
-              color: theme("colors.neutral.700"),
+            "--tw-prose-headings": theme("colors.neutral.800"),
-              a: {
+            "--tw-prose-lead": theme("colors.neutral.500"),
-                color: theme("colors.primary.700"),
+            "--tw-prose-links": theme("colors.primary.700"),
-                textDecoration: "underline",
+            "--tw-prose-bold": theme("colors.neutral.900"),
-                textDecorationColor: theme("colors.primary.300"),
+            "--tw-prose-counters": theme("colors.neutral.800"),
-                fontWeight: "500",
+            "--tw-prose-bullets": theme("colors.neutral.500"),
-                "&:hover": {
+            "--tw-prose-hr": theme("colors.neutral.200"),
-                  backgroundColor: theme("colors.primary.600"),
+            "--tw-prose-quotes": theme("colors.neutral.700"),
-                  borderRadius: "0.09rem",
+            "--tw-prose-quote-borders": theme("colors.primary.200"),
-                  color: theme("colors.white"),
+            "--tw-prose-captions": theme("colors.neutral.500"),
-                  textDecoration: "none",
+            "--tw-prose-code": theme("colors.primary.700"),
-                },
+            "--tw-prose-pre-code": theme("colors.neutral.700"),
-              },
+            "--tw-prose-pre-bg": theme("colors.neutral.50"),
-              strong: {
+            "--tw-prose-th-borders": theme("colors.neutral.500"),
-                color: theme("colors.neutral.900"),
+            "--tw-prose-td-borders": theme("colors.neutral.300"),
-              },
+            "--tw-prose-invert-body": theme("colors.neutral.300"),
-              "ol > li::before": {
+            "--tw-prose-invert-headings": theme("colors.neutral.50"),
-                color: theme("colors.neutral.800"),
+            "--tw-prose-invert-lead": theme("colors.neutral.500"),
-              },
+            "--tw-prose-invert-links": theme("colors.primary.400"),
-              "ul > li::before": {
+            "--tw-prose-invert-bold": theme("colors.neutral.DEFAULT"),
-                backgroundColor: theme("colors.neutral.500"),
+            "--tw-prose-invert-counters": theme("colors.neutral.400"),
-              },
+            "--tw-prose-invert-bullets": theme("colors.neutral.600"),
-              hr: {
+            "--tw-prose-invert-hr": theme("colors.neutral.500"),
-                borderColor: theme("colors.neutral.200"),
+            "--tw-prose-invert-quotes": theme("colors.neutral.200"),
-              },
+            "--tw-prose-invert-quote-borders": theme("colors.primary.900"),
-              blockquote: {
+            "--tw-prose-invert-captions": theme("colors.neutral.400"),
-                color: theme("colors.neutral.800"),
+            "--tw-prose-invert-code": theme("colors.primary.400"),
-                borderLeftColor: theme("colors.primary.200"),
+            "--tw-prose-invert-pre-code": theme("colors.neutral.200"),
-              },
+            "--tw-prose-invert-pre-bg": theme("colors.neutral.700"),
-              h1: {
+            "--tw-prose-invert-th-borders": theme("colors.neutral.500"),
-                color: theme("colors.neutral.800"),
+            "--tw-prose-invert-td-borders": theme("colors.neutral.700"),
-                position: "relative",
+            a: {
-              },
+              textDecoration: "underline",
-              h2: {
+              textDecorationColor: theme("colors.primary.300"),
-                color: theme("colors.neutral.800"),
+              fontWeight: "500",
-                position: "relative",
+              "&:hover": {
-              },
+                color: theme("colors.neutral.DEFAULT"),
-              h3: {
+                textDecoration: "none",
-                color: theme("colors.neutral.800"),
+                backgroundColor: theme("colors.primary.600"),
-                position: "relative",
+                borderRadius: "0.09rem",
-              },
-              h4: {
-                color: theme("colors.neutral.800"),
-                position: "relative",
-              },
-              code: {
-                color: theme("colors.primary.800"),
-              },
-              "pre code": {
-                color: theme("colors.neutral.700"),
-              },
-              pre: {
-                color: theme("colors.neutral.700"),
-                backgroundColor: theme("colors.neutral.50"),
-              },
-              "pre code": {
-                color: theme("colors.neutral.700"),
-              },
-              thead: {
-                color: theme("colors.neutral.800"),
-                borderBottomColor: theme("colors.neutral.500"),
-              },
-              "tbody tr": {
-                borderBottomColor: theme("colors.neutral.300"),
-              },
-              kbd: {
-                backgroundColor: theme("colors.neutral.200"),
-                padding: "0.1rem 0.4rem",
-                borderRadius: "0.25rem",
-                fontSize: "0.9rem",
-                fontWeight: "600",
-              },
-              mark: {
-                backgroundColor: theme("colors.primary.200"),
-                padding: "0.1rem 0.2rem",
-                borderRadius: "0.12rem",
               },
             },
-          ],
+            "a code": {
+              color: "var(--tw-prose-code)",
+            },
+            kbd: {
+              backgroundColor: theme("colors.neutral.200"),
+              padding: "0.1rem 0.4rem",
+              borderRadius: "0.25rem",
+              fontSize: "0.9rem",
+              fontWeight: "600",
+            },
+            mark: {
+              color: theme("colors.neutral.800"),
+              backgroundColor: theme("colors.primary.200"),
+              padding: "0.1rem 0.2rem",
+              borderRadius: "0.12rem",
+            },
+          },
         },
-        light: {
+        invert: {
-          css: [
+          css: {
-            {
+            a: {
-              color: theme("colors.neutral.400"),
+              textDecorationColor: theme("colors.neutral.600"),
-              a: {
-                color: theme("colors.primary.400"),
-                textDecorationColor: theme("colors.neutral.500"),
-              },
-              strong: {
-                color: theme("colors.white"),
-              },
-              "ol > li::before": {
-                color: theme("colors.neutral.400"),
-              },
-              "ul > li::before": {
-                backgroundColor: theme("colors.neutral.600"),
-              },
-              hr: {
-                borderColor: theme("colors.neutral.500"),
-              },
-              blockquote: {
-                color: theme("colors.neutral.200"),
-                borderLeftColor: theme("colors.primary.900"),
-              },
-              h1: {
-                color: theme("colors.white"),
-              },
-              h2: {
-                color: theme("colors.white"),
-              },
-              h3: {
-                color: theme("colors.white"),
-              },
-              h4: {
-                color: theme("colors.white"),
-              },
-              "figure figcaption": {
-                color: theme("colors.neutral.400"),
-              },
-              code: {
-                color: theme("colors.primary.500"),
-              },
-              "a code": {
-                color: theme("colors.white"),
-              },
-              pre: {
-                color: theme("colors.neutral.200"),
-                backgroundColor: theme("colors.neutral.700"),
-              },
-              "pre code": {
-                color: theme("colors.neutral.200"),
-              },
-              thead: {
-                color: theme("colors.white"),
-                borderBottomColor: theme("colors.neutral.500"),
-              },
-              "tbody tr": {
-                borderBottomColor: theme("colors.neutral.700"),
-              },
-              kbd: {
-                backgroundColor: theme("colors.neutral.700"),
-                color: theme("colors.neutral.300"),
-              },
-              mark: {
-                backgroundColor: theme("colors.primary.400"),
-              },
             },
-          ],
+            kbd: {
+              color: theme("colors.neutral.200"),
+              backgroundColor: theme("colors.neutral.700"),
+            },
+            mark: {
+              backgroundColor: theme("colors.primary.400"),
+            },
+          },
         },
       }),
     },
   },
-  variants: {
-    extend: {
-      typography: ["dark"],
-    },
-  },
   plugins: [require("@tailwindcss/typography")],
 };