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
This commit is contained in:
2026-06-01 22:53:52 -05:00
parent 126fc53ab3
commit 0bb69a12c3
2 changed files with 12 additions and 24 deletions

View File

@@ -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;
}

View File

@@ -30,7 +30,6 @@
},
"devDependencies": {
"@tailwindcss/postcss": "^4",
"@tailwindcss/typography": "^0.5.19",
"@types/mdx": "^2.0.13",
"@types/node": "^20",
"@types/react": "^19",