124 lines
3.3 KiB
Plaintext
124 lines
3.3 KiB
Plaintext
component Typography {
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
columns: number = 2
|
|
gap: string = "md"
|
|
maxWidth: string = "xl"
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<div
|
|
data-ui-component="Typography"
|
|
class='wrn-typography {class}'
|
|
data-size='{size}'
|
|
data-columns='{columns}'
|
|
data-gap='{gap}'
|
|
data-max-width='{maxWidth}'
|
|
>
|
|
<slot></slot>
|
|
</div>
|
|
}
|
|
|
|
style {
|
|
.wrn-typography {
|
|
color: var(--wrn-color-text);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.wrn-typography[data-size="sm"] {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.wrn-typography[data-size="lg"] {
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.wrn-typography[data-max-width="md"] {
|
|
max-width: 48rem;
|
|
}
|
|
|
|
.wrn-typography[data-max-width="lg"] {
|
|
max-width: 64rem;
|
|
}
|
|
|
|
.wrn-typography[data-max-width="xl"] {
|
|
max-width: 80rem;
|
|
}
|
|
|
|
.wrn-typography[data-max-width="full"] {
|
|
max-width: none;
|
|
}
|
|
|
|
/*
|
|
* Multi-column prose only below a comfortable reading width; a narrow
|
|
* screen split into columns is unreadable.
|
|
*/
|
|
.wrn-typography[data-gap="sm"] {
|
|
column-gap: 1rem;
|
|
}
|
|
|
|
.wrn-typography[data-gap="md"] {
|
|
column-gap: 2rem;
|
|
}
|
|
|
|
.wrn-typography[data-gap="lg"] {
|
|
column-gap: 3rem;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.wrn-typography[data-columns="2"] {
|
|
column-count: 2;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.wrn-typography[data-columns="3"] {
|
|
column-count: 3;
|
|
}
|
|
}
|
|
|
|
.wrn-typography :where(h1, h2, h3, h4) {
|
|
color: var(--wrn-color-text);
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.2;
|
|
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) {
|
|
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) {
|
|
border-radius: 0.35rem;
|
|
background: var(--wrn-color-surface-soft);
|
|
padding: 0.15rem 0.35rem;
|
|
font-size: 0.9em;
|
|
}
|
|
.wrn-typography :where(pre) {
|
|
overflow-x: auto;
|
|
border: 1px solid var(--wrn-color-border);
|
|
border-radius: 1rem;
|
|
background: var(--wrn-color-surface-raised);
|
|
padding: 1rem;
|
|
}
|
|
.wrn-typography :where(img) { border-radius: 1rem; }
|
|
.wrn-typography :where(hr) { border-color: var(--wrn-color-border); margin: 2rem 0; }
|
|
}
|
|
}
|