style: improve hr contrast

assets/css/compiled/main.css

@@ -519,6 +519,7 @@
       border-top-width: 1px;
       margin-top: 3em;
       margin-bottom: 3em;
+      border: 0.8px solid rgba(var(--color-neutral-300), 1);
     }
     :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       font-weight: 500;
@@ -741,7 +742,7 @@
     --tw-prose-bold: rgba(var(--color-neutral-900), 1);
     --tw-prose-counters: rgba(var(--color-neutral-800), 1);
     --tw-prose-bullets: rgba(var(--color-neutral-500), 1);
-    --tw-prose-hr: rgba(var(--color-neutral-200), 1);
+    --tw-prose-hr: oklch(92.8% 0.006 264.531);
     --tw-prose-quotes: rgba(var(--color-neutral-700), 1);
     --tw-prose-quote-borders: rgba(var(--color-primary-500), 1);
     --tw-prose-captions: rgba(var(--color-neutral-500), 1);
@@ -759,7 +760,7 @@
     --tw-prose-invert-bold: rgba(var(--color-neutral), 1);
     --tw-prose-invert-counters: rgba(var(--color-neutral-400), 1);
     --tw-prose-invert-bullets: rgba(var(--color-neutral-600), 1);
-    --tw-prose-invert-hr: rgba(var(--color-neutral-500), 1);
+    --tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
     --tw-prose-invert-quotes: rgba(var(--color-neutral-200), 1);
     --tw-prose-invert-quote-borders: rgba(var(--color-primary-600), 1);
     --tw-prose-invert-captions: rgba(var(--color-neutral-400), 1);
@@ -1618,6 +1619,9 @@
     :where(p.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       text-decoration-color: rgba(var(--color-primary-400), 1);
     }
+    :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      border: 0.8px solid rgba(var(--color-neutral-500), 1);
+    }
   }
   .bg-\[\#6d6d6d\] {
     background-color: #6d6d6d;
@@ -3076,6 +3080,9 @@
       :where(p.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
         text-decoration-color: rgba(var(--color-primary-400), 1);
       }
+      :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+        border: 0.8px solid rgba(var(--color-neutral-500), 1);
+      }
     }
   }
   .dark\:bg-neutral-400 {

tailwind.config.js

@@ -68,7 +68,6 @@ module.exports = {
             "--tw-prose-bold": theme("colors.neutral.900 / 1"),
             "--tw-prose-counters": theme("colors.neutral.800 / 1"),
             "--tw-prose-bullets": theme("colors.neutral.500 / 1"),
-            "--tw-prose-hr": theme("colors.neutral.200 / 1"),
             "--tw-prose-quotes": theme("colors.neutral.700 / 1"),
             "--tw-prose-quote-borders": theme("colors.primary.500 / 1"),
             "--tw-prose-captions": theme("colors.neutral.500 / 1"),
@@ -84,7 +83,6 @@ module.exports = {
             "--tw-prose-invert-bold": theme("colors.neutral.DEFAULT / 1"),
             "--tw-prose-invert-counters": theme("colors.neutral.400 / 1"),
             "--tw-prose-invert-bullets": theme("colors.neutral.600 / 1"),
-            "--tw-prose-invert-hr": theme("colors.neutral.500 / 1"),
             "--tw-prose-invert-quotes": theme("colors.neutral.200 / 1"),
             "--tw-prose-invert-quote-borders": theme("colors.primary.600 / 1"),
             "--tw-prose-invert-captions": theme("colors.neutral.400 / 1"),
@@ -106,6 +104,9 @@ module.exports = {
             "a code": {
               color: "var(--tw-prose-code)",
             },
+            hr: {
+              border: '0.8px solid theme("colors.neutral.300 / 1")',
+            },
             kbd: {
               backgroundColor: theme("colors.neutral.200 / 1"),
               padding: "0.1rem 0.4rem",
@@ -170,6 +171,9 @@ module.exports = {
             "p.active": {
               "text-decoration-color": theme("colors.primary.400 / 1"),
             },
+            hr: {
+              border: '0.8px solid theme("colors.neutral.500 / 1")',
+            },
           },
         },
       }),