From 0bb69a12c314f501e358101ee04b3239997fdd3b Mon Sep 17 00:00:00 2001
From: Krishna Ayyalasomayajula <krishna@ayyalasomayajula.net>
Date: Mon, 1 Jun 2026 22:53:52 -0500
Subject: [PATCH] fix: remove @tailwindcss/typography + fix CSS architecture

- Remove @tailwindcss/typography from package.json devDependencies
- Remove @plugin and @utility prose from globals.css
- Fix @custom-variant dark to use &:is(.dark)
- Extract @keyframes outside @supports blocks
- Scope * transition to body/body*/[class*=bg-]/[class*=border-]/[class*=text-]
- Add prefers-reduced-motion rules for scroll-to-top + reading progress
- Add :focus-visible outline on scroll-to-top
---
 app/globals.css | 35 ++++++++++++-----------------------
 package.json    |  1 -
 2 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index ba4e6fc..1fafd2c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,7 +1,7 @@
 @import "tailwindcss";
 
 /* Dark mode: class-based (for @wrksz/themes) */
-@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant dark (&:is(.dark));
 
 /* === Design Tokens === */
 @theme {
@@ -248,19 +248,6 @@ html.dark code[data-theme*=" "] span {
   color: var(--shiki-dark);
 }
 
-/* === Blog typography === */
-@plugin "@tailwindcss/typography";
-
-@utility prose {
-  --tw-prose-body: var(--color-ink-soft);
-  --tw-prose-headings: var(--color-ink);
-  --tw-prose-links: var(--color-accent);
-  --tw-prose-bold: var(--color-ink);
-  --tw-prose-quote-borders: var(--color-border);
-  --tw-prose-code: var(--color-accent);
-  --tw-prose-pre-bg: var(--color-surface);
-}
-
 /* === KaTeX dark mode overrides === */
 .dark .katex,
 .dark .katex * {
@@ -352,16 +339,13 @@ html.dark code[data-theme*=" "] span {
   will-change: width;
 }
 
+@keyframes scroll-progress { from { width: 0%; } to { width: 100%; } }
 @supports (animation-timeline: scroll()) {
   .scroll-progress {
     width: 0%;
     animation: scroll-progress linear forwards;
     animation-timeline: scroll(root block);
   }
-  @keyframes scroll-progress {
-    from { width: 0%; }
-    to { width: 100%; }
-  }
 }
 
 /* === Scroll-to-top button === */
@@ -410,19 +394,16 @@ html.dark code[data-theme*=" "] span {
   background: var(--color-ink);
   border-radius: 2px;
 }
+@keyframes reading-progress { from { height: 0%; } to { height: 100%; } }
 @supports (animation-timeline: scroll()) {
   .reading-progress-fill {
     animation: reading-progress linear forwards;
     animation-timeline: scroll(root block);
   }
-  @keyframes reading-progress {
-    from { height: 0%; }
-    to { height: 100%; }
-  }
 }
 
 /* === Global transition for theme switch === */
-* {
+body, body *, [class*="bg-"], [class*="border-"], [class*="text-"] {
   transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }
 
@@ -435,4 +416,12 @@ html.dark code[data-theme*=" "] span {
     scroll-behavior: auto !important;
   }
   .scroll-progress { display: none; }
+  .scroll-to-top { opacity: 0 !important; pointer-events: none !important; }
+  .reading-progress { display: none !important; }
+}
+
+/* === Focus visible for scroll-to-top === */
+.scroll-to-top:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
 }
diff --git a/package.json b/package.json
index 726a2b9..093e01f 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,6 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
-    "@tailwindcss/typography": "^0.5.19",
     "@types/mdx": "^2.0.13",
     "@types/node": "^20",
     "@types/react": "^19",