@texturehq/edges 1.33.1 → 1.34.0

package/dist/prose.css

@@ -0,0 +1,202 @@
+/**
+ * Prose — @texturehq/edges-tokens
+ *
+ * Editorial composition styles for long-form content. Wrap any container in
+ * `.prose` and the descendant `h1`–`h6`, `p`, `ul`, `ol`, `blockquote`, `a`,
+ * `code`, and `hr` elements pick up the editorial type system, spacing
+ * rules, inline-element styling, and the 42rem reading column.
+ *
+ * Authors do not put role class names on individual elements — the wrapper
+ * owns them all. This is the canonical wrapper described on
+ *   https://edges.texturehq.com/foundations/typography
+ *
+ * Import after `@texturehq/edges-tokens/css/light` so the referenced
+ * `--text-*`, `--color-*`, `--spacing-*`, and `--radius-*` custom
+ * properties are defined.
+ */
+
+.prose {
+  max-width: 42rem;
+  color: var(--color-text-primary);
+}
+
+/* Size variants — apply alongside .prose. */
+.prose.prose-sm {
+  max-width: 36rem;
+}
+.prose.prose-sm p,
+.prose.prose-sm ul,
+.prose.prose-sm ol,
+.prose.prose-sm blockquote {
+  font: var(--text-body-md);
+  letter-spacing: var(--text-body-md-letter-spacing);
+}
+.prose.prose-lede p:first-child,
+.prose.prose-lede > p:only-child {
+  font: var(--text-body-lg);
+  letter-spacing: var(--text-body-lg-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+/* Headings — Rethink Sans display roles with balanced wrapping. */
+.prose h1 {
+  font: var(--text-display-lg);
+  letter-spacing: var(--text-display-lg-letter-spacing);
+  color: var(--color-text-primary);
+  text-wrap: balance;
+  margin: 0 0 var(--spacing-4);
+}
+
+.prose h2 {
+  font: var(--text-display-md);
+  letter-spacing: var(--text-display-md-letter-spacing);
+  color: var(--color-text-primary);
+  text-wrap: balance;
+  margin: var(--spacing-10) 0 var(--spacing-3);
+}
+
+.prose h3 {
+  font: var(--text-display-sm);
+  letter-spacing: var(--text-display-sm-letter-spacing);
+  color: var(--color-text-primary);
+  text-wrap: balance;
+  margin: var(--spacing-8) 0 var(--spacing-3);
+}
+
+.prose h4 {
+  font: var(--text-heading-lg);
+  letter-spacing: var(--text-heading-lg-letter-spacing);
+  color: var(--color-text-primary);
+  text-wrap: balance;
+  margin: var(--spacing-6) 0 var(--spacing-2);
+}
+
+.prose h5 {
+  font: var(--text-heading-md);
+  letter-spacing: var(--text-heading-md-letter-spacing);
+  color: var(--color-text-primary);
+  text-wrap: balance;
+  margin: var(--spacing-6) 0 var(--spacing-2);
+}
+
+.prose h6 {
+  font: var(--text-heading-sm);
+  letter-spacing: var(--text-heading-sm-letter-spacing);
+  color: var(--color-text-primary);
+  text-wrap: balance;
+  margin: var(--spacing-6) 0 var(--spacing-2);
+}
+
+/* Body paragraphs — 18px, 1.55, pretty-wrapped with hyphenation. */
+.prose p {
+  font: var(--text-body-lg);
+  letter-spacing: var(--text-body-lg-letter-spacing);
+  color: var(--color-text-primary);
+  text-wrap: pretty;
+  hyphens: auto;
+  margin: 0 0 var(--spacing-5);
+}
+
+.prose > :last-child {
+  margin-bottom: 0;
+}
+
+/* Inline emphasis. */
+.prose strong,
+.prose b {
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.prose em,
+.prose i {
+  font-style: italic;
+}
+
+/* Editorial links — iris with the long underline treatment. */
+.prose a {
+  color: var(--color-iris-base);
+  font-weight: 500;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 6px;
+  text-decoration-color: color-mix(in oklch, var(--color-iris-base), transparent 60%);
+  transition:
+    color 150ms ease,
+    text-decoration-color 150ms ease;
+}
+
+.prose a:hover,
+.prose a:focus-visible {
+  color: color-mix(in oklch, var(--color-iris-base), black 15%);
+  text-decoration-color: currentcolor;
+}
+
+/* Inline code — warm-tinted pill (the Slack/GitHub/Notion convention). */
+.prose :where(code):not(pre code) {
+  font: var(--text-code);
+  letter-spacing: var(--text-code-letter-spacing);
+  font-size: 0.875em;
+  background: var(--color-rose-pastel);
+  color: var(--color-rose-base);
+  padding: 0 5px;
+  border-radius: var(--radius-sm);
+}
+
+/* Lists. */
+.prose ul,
+.prose ol {
+  padding-left: 1.5rem;
+  margin: 0 0 var(--spacing-5);
+  font: var(--text-body-lg);
+  letter-spacing: var(--text-body-lg-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.prose ul {
+  list-style: disc;
+}
+
+.prose ol {
+  list-style: decimal;
+}
+
+.prose li + li {
+  margin-top: 0.75rem;
+}
+
+/* Blockquote. */
+.prose blockquote {
+  margin: 0 0 var(--spacing-5);
+  padding: 4px 0 4px 1.5rem;
+  border-left: 3px solid var(--color-border-default);
+  font: var(--text-body-lg);
+  letter-spacing: var(--text-body-lg-letter-spacing);
+  color: var(--color-text-primary);
+  font-style: italic;
+}
+
+/* Horizontal rule — full reading column, generous vertical breathing room. */
+.prose hr {
+  max-width: 42rem;
+  margin: var(--spacing-10) 0;
+  border: 0;
+  border-top: 1px solid var(--color-border-default);
+}
+
+/* Neutral tone — text-primary links with the same underline treatment as
+   editorial (long offset, semi-transparent), just tinted from the body
+   color instead of iris. Use in product contexts (forms, in-app chrome,
+   banners) where the editorial iris would compete with the surface's
+   brand action color. */
+.prose-neutral a {
+  color: var(--color-text-primary);
+  font-weight: 600;
+  text-decoration-color: color-mix(in oklch, var(--color-text-primary), transparent 60%);
+}
+
+.prose-neutral a:hover,
+.prose-neutral a:focus-visible {
+  color: var(--color-text-primary);
+  text-decoration-color: currentcolor;
+}