sheerly 0.0.1

package/src/typography.css

@@ -0,0 +1,176 @@
+/* Typography — a prose wrapper that styles all its children.
+ *
+ * Unlike shadcn (which ships per-element utility classes), Sheerly applies one
+ * `.sheerly-typography` class to a container and styles every descendant
+ * element (h1–h4, p, a, blockquote, ul/ol, li, code, table, small, etc.).
+ * Follows the shadcn Nova typography scale. */
+.sheerly-typography {
+  font-family: "Geist Sans", "Geist", system-ui, -apple-system, sans-serif;
+  color: var(--sheerly-foreground);
+  font-size: 16px;
+  line-height: 1.75;
+
+  & h1 {
+    font-size: 36px;
+    font-weight: 800;
+    line-height: 1.1;
+    letter-spacing: -0.025em;
+    text-wrap: balance;
+    scroll-margin-block-start: 5rem;
+  }
+
+  & h2 {
+    font-size: 30px;
+    font-weight: 600;
+    line-height: 1.2;
+    letter-spacing: -0.025em;
+    border-bottom: 1px solid var(--sheerly-border);
+    padding-bottom: 8px;
+    scroll-margin-block-start: 5rem;
+  }
+
+  & h3 {
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 1.3;
+    letter-spacing: -0.025em;
+    scroll-margin-block-start: 5rem;
+  }
+
+  & h4 {
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: -0.025em;
+    scroll-margin-block-start: 5rem;
+  }
+
+  /* Vertical rhythm: every element gets top margin except the first child and
+   * the first element after a heading (headings supply their own spacing). */
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & p,
+  & blockquote,
+  & ul,
+  & ol,
+  & table,
+  & pre {
+    margin-block-start: 24px;
+  }
+
+  & h2 {
+    margin-block-start: 40px;
+  }
+
+  & h3,
+  & h4 {
+    margin-block-start: 32px;
+  }
+
+  & > :first-child {
+    margin-block-start: 0;
+  }
+
+  & a {
+    font-weight: 500;
+    color: var(--sheerly-primary);
+    text-decoration: underline;
+    text-underline-offset: 4px;
+
+    &:hover {
+      color: oklch(from var(--sheerly-primary) l c h / 80%);
+    }
+  }
+
+  & blockquote {
+    border-inline-start: 2px solid var(--sheerly-border);
+    padding-inline-start: 24px;
+    font-style: italic;
+    color: var(--sheerly-muted-foreground);
+  }
+
+  & ul {
+    list-style: disc;
+    padding-inline-start: 24px;
+  }
+
+  & ol {
+    list-style: decimal;
+    padding-inline-start: 24px;
+  }
+
+  & li {
+    margin-block-start: 8px;
+  }
+
+  & li::marker {
+    color: var(--sheerly-muted-foreground);
+  }
+
+  & code {
+    font-family: "Geist Mono", ui-monospace, monospace;
+    font-size: 0.875em;
+    font-weight: 600;
+    border-radius: var(--sheerly-radius-sm);
+    background-color: var(--sheerly-muted);
+    padding: 0.2em 0.35em;
+  }
+
+  & pre {
+    overflow-x: auto;
+    border-radius: var(--sheerly-radius-md);
+    background-color: var(--sheerly-muted);
+    padding: 16px;
+
+    & code {
+      background-color: transparent;
+      padding: 0;
+      font-weight: 400;
+    }
+  }
+
+  & table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 14px;
+  }
+
+  & th,
+  & td {
+    border: 1px solid var(--sheerly-border);
+    padding: 8px 16px;
+    text-align: start;
+  }
+
+  & th {
+    font-weight: 700;
+  }
+
+  & tbody tr:nth-child(even) {
+    background-color: oklch(from var(--sheerly-muted) l c h / 50%);
+  }
+
+  & small {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1;
+  }
+
+  /* Lead paragraph and muted text helpers */
+  & [data-variant="lead"] {
+    font-size: 20px;
+    color: var(--sheerly-muted-foreground);
+  }
+
+  & [data-variant="large"] {
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  & [data-variant="muted"] {
+    font-size: 14px;
+    color: var(--sheerly-muted-foreground);
+  }
+}

package/src/typography.tsx

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export interface TypographyProps extends HTMLAttributes<HTMLDivElement> {}
+
+/**
+ * A prose wrapper. Unlike shadcn (per-element utility classes), Sheerly styles
+ * every child element (h1–h4, p, a, blockquote, ul/ol, li, code, table, …) via
+ * one `.sheerly-typography` class — just render semantic HTML inside it.
+ */
+export function Typography({ className, ...props }: TypographyProps) {
+  return <div className={cn('sheerly-typography', className)} {...props} />
+}