76 lines
2.6 KiB
Plaintext
76 lines
2.6 KiB
Plaintext
component Typography {
|
|
props {
|
|
size = "default"
|
|
color = "primary"
|
|
columns = 2
|
|
gap = "md"
|
|
maxWidth = "xl"
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<div
|
|
data-ui-component="Typography"
|
|
class='wire-typography text-[var(--wire-color-text)] {class}'
|
|
class:max-w-3xl='maxWidth === "md"'
|
|
class:max-w-5xl='maxWidth === "lg"'
|
|
class:max-w-7xl='maxWidth === "xl"'
|
|
class:max-w-none='maxWidth === "full"'
|
|
class:text-sm='size === "sm"'
|
|
class:text-base='size === "default" || size === "md"'
|
|
class:text-lg='size === "lg"'
|
|
class:columns-1='columns === 1'
|
|
class:md:columns-2='columns === 2'
|
|
class:lg:columns-3='columns === 3'
|
|
class:gap-4='gap === "sm"'
|
|
class:gap-8='gap === "md"'
|
|
class:gap-12='gap === "lg"'
|
|
>
|
|
<slot></slot>
|
|
</div>
|
|
}
|
|
|
|
style {
|
|
.wire-typography :where(h1, h2, h3, h4) {
|
|
color: var(--wire-color-text);
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.2;
|
|
break-after: avoid;
|
|
}
|
|
|
|
.wire-typography :where(h1) { font-size: clamp(2rem, 4vw, 3.5rem); margin: 0 0 1.5rem; }
|
|
.wire-typography :where(h2) { font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 2.5rem 0 1rem; }
|
|
.wire-typography :where(h3) { font-size: 1.35rem; margin: 2rem 0 0.75rem; }
|
|
.wire-typography :where(p, ul, ol, blockquote, pre, table) { margin: 1rem 0; }
|
|
.wire-typography :where(p, li) { color: var(--wire-color-text-muted); line-height: 1.8; }
|
|
.wire-typography :where(a) { color: var(--wire-color-primary); font-weight: 600; text-underline-offset: 0.2em; }
|
|
.wire-typography :where(a:hover) { color: var(--wire-color-primary-hover); text-decoration: underline; }
|
|
.wire-typography :where(ul, ol) { padding-left: 1.4rem; }
|
|
.wire-typography :where(ul) { list-style: disc; }
|
|
.wire-typography :where(ol) { list-style: decimal; }
|
|
.wire-typography :where(blockquote) {
|
|
border-left: 4px solid var(--wire-color-primary);
|
|
background: var(--wire-color-primary-soft);
|
|
border-radius: 0 0.75rem 0.75rem 0;
|
|
padding: 1rem 1.25rem;
|
|
color: var(--wire-color-text);
|
|
}
|
|
.wire-typography :where(code) {
|
|
border-radius: 0.35rem;
|
|
background: var(--wire-color-surface-soft);
|
|
padding: 0.15rem 0.35rem;
|
|
font-size: 0.9em;
|
|
}
|
|
.wire-typography :where(pre) {
|
|
overflow-x: auto;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 1rem;
|
|
background: var(--wire-color-surface-raised);
|
|
padding: 1rem;
|
|
}
|
|
.wire-typography :where(img) { border-radius: 1rem; }
|
|
.wire-typography :where(hr) { border-color: var(--wire-color-border); margin: 2rem 0; }
|
|
}
|
|
}
|