release: WRNexusJS 0.5.12

2026-07-30 18:59:01 +05:30
parent f37303b22d
commit d64e899993
462 changed files with 75432 additions and 2570 deletions
@@ -7,7 +7,69 @@ component Typography {
    maxWidth = "xl"
    class = ""
  }
+
  view {
-    <article class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--typography wire-next--gap-{gap} wire-next--columns-{columns} wire-next--max-{maxWidth} {class}"><slot /></article>
+    <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; }
  }
 }