WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 33 Packages Projects Releases Wiki Activity

fix(ui): stop Typography prose styles leaking into nested components

Browse Source 
Typography styled every descendant element, including those inside nested UI
components. A <Blockquote variant="bordered"> placed inside <Typography> drew
two left borders: its own, plus the one these prose rules apply to any
<blockquote>. The same leak applied to headings, links, lists and code.

Prose rules now exclude the subtree of any nested `.wrn-component`, so they
style raw markup only. The exclusion sits inside :where() so specificity stays
at zero and applications can still override these rules with a plain class.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Clintchiz
2026-08-13 15:09:46 +05:30
co-authored by Claude Opus 5
parent b508b49058
commit 2e42be7b31
1 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/Typography.wrn
+18 -12
View File
@@ -87,24 +87,30 @@ component Typography {
break-after: avoid;
}
.wrn-typography :where(h1) { font-size: clamp(2rem, 4vw, 3.5rem); margin: 0 0 1.5rem; }
.wrn-typography :where(h2) { font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 2.5rem 0 1rem; }
.wrn-typography :where(h3) { font-size: 1.35rem; margin: 2rem 0 0.75rem; }
.wrn-typography :where(p, ul, ol, blockquote, pre, table) { margin: 1rem 0; }
.wrn-typography :where(p, li) { color: var(--wrn-color-text-muted); line-height: 1.8; }
.wrn-typography :where(a) { color: var(--wrn-color-primary); font-weight: 600; text-underline-offset: 0.2em; }
.wrn-typography :where(a:hover) { color: var(--wrn-color-primary-hover); text-decoration: underline; }
.wrn-typography :where(ul, ol) { padding-left: 1.4rem; }
.wrn-typography :where(ul) { list-style: disc; }
.wrn-typography :where(ol) { list-style: decimal; }
.wrn-typography :where(blockquote) {
/* Prose styles apply to raw markup only. Every nested UI component renders
inside a `.wrn-component` wrapper, so excluding that subtree stops these
element rules from doubling up on a component's own styling — a nested
<Blockquote> otherwise drew two left borders, its own plus this one.
The exclusion lives inside :where() so specificity stays at zero and an
application can still override any of these with a plain class. */
.wrn-typography :where(h1):not(:where(.wrn-typography .wrn-component *)) { font-size: clamp(2rem, 4vw, 3.5rem); margin: 0 0 1.5rem; }
.wrn-typography :where(h2):not(:where(.wrn-typography .wrn-component *)) { font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 2.5rem 0 1rem; }
.wrn-typography :where(h3):not(:where(.wrn-typography .wrn-component *)) { font-size: 1.35rem; margin: 2rem 0 0.75rem; }
.wrn-typography :where(p, ul, ol, blockquote, pre, table):not(:where(.wrn-typography .wrn-component *)) { margin: 1rem 0; }
.wrn-typography :where(p, li):not(:where(.wrn-typography .wrn-component *)) { color: var(--wrn-color-text-muted); line-height: 1.8; }
.wrn-typography :where(a):not(:where(.wrn-typography .wrn-component *)) { color: var(--wrn-color-primary); font-weight: 600; text-underline-offset: 0.2em; }
.wrn-typography :where(a:hover):not(:where(.wrn-typography .wrn-component *)) { color: var(--wrn-color-primary-hover); text-decoration: underline; }
.wrn-typography :where(ul, ol):not(:where(.wrn-typography .wrn-component *)) { padding-left: 1.4rem; }
.wrn-typography :where(ul):not(:where(.wrn-typography .wrn-component *)) { list-style: disc; }
.wrn-typography :where(ol):not(:where(.wrn-typography .wrn-component *)) { list-style: decimal; }
.wrn-typography :where(blockquote):not(:where(.wrn-typography .wrn-component *)) {
border-left: 4px solid var(--wrn-color-primary);
background: var(--wrn-color-primary-soft);
border-radius: 0 0.75rem 0.75rem 0;
padding: 1rem 1.25rem;
color: var(--wrn-color-text);
}
.wrn-typography :where(code) {
.wrn-typography :where(code):not(:where(.wrn-typography .wrn-component *)) {
border-radius: 0.35rem;
background: var(--wrn-color-surface-soft);
padding: 0.15rem 0.35rem;