@nextrap/style-typography 1.0.5 → 2.0.0

package/.ai-usage-info.md

@@ -0,0 +1,38 @@
+# @nextrap/style-typography
+
+## Purpose
+
+Provides composable typographic rules and vertical rhythm for individual native text elements. It does not own `.prose`, boxes, tables, image layouts, containers, page wrappers or section layout; those belong to `@nextrap/style-elements` or the consuming layout/theme.
+
+## Usage
+
+```scss
+@use '@nextrap/style-typography' as type;
+
+.theme {
+  @include type.style-typography();
+}
+```
+
+`index.scss` is a mixin-only Sass API and emits no CSS. `default.scss` invokes `style-typography()` from `_style-typography.scss` at root and materializes the ready-to-use native selectors and helper classes.
+
+```scss
+@use '@nextrap/style-base/default';
+@use '@nextrap/style-typography/default';
+```
+
+## Token contract
+
+- Consume public `--nt-*` tokens from `@nextrap/style-base`; never import private Sass internals from sibling packages.
+- Use `--nt-header`, `--nt-text`, `--nt-text-muted`, typography scale tokens and `--nt-spacing-text` for the standard document rhythm.
+- Semantic surface utilities override the real base tokens locally: `--nt-text`, `--nt-text-muted`, `--nt-header`, `--nt-link` and `--nt-link-hover`.
+- Package-local overrides use the `--typography-*` prefix. Legacy typography variables remain fallback inputs where already supported.
+- Mixins style the current selector and must not own page, content or section selectors.
+- `.small` is the class equivalent of the native `small` element and `.text-body-secondary` provides the Bootstrap-compatible secondary body color.
+- `.text-muted` remains the compatibility alias for older Bootstrap usage. `.text-nowrap`, `.text-break`, `.text-uppercase`, `.fw-normal`, `.fw-semibold` and `.fw-bold` are provided by `@nextrap/style-utils` and are materialized by the consuming theme's utility layer.
+
+For rich-content composition, load `@nextrap/style-elements` separately:
+
+```scss
+@use '@nextrap/style-elements/default';
+```

package/README.md

@@ -1,5 +1,30 @@
-# style-typography
+# @nextrap/style-typography
 
-Typography styles and .prose class for rich text content.
+Typographic rules and vertical rhythm for individual text elements. Rich-content patterns such as `.prose`, boxes, tables and image layouts belong to `@nextrap/style-elements`.
 
-See Demo markdown file for examples. [prose.md](./demo/prose.md)
+## Sass entry points
+
+The main entry point exports mixins without emitting CSS:
+
+```scss
+@use '@nextrap/style-typography' as type;
+
+.article-theme {
+  @include type.style-typography();
+}
+```
+
+The scoped include styles native text elements and typography helper classes below `.article-theme`. To materialize the default typography globally, use:
+
+```scss
+@use '@nextrap/style-base/default';
+@use '@nextrap/style-typography/default';
+```
+
+Load rich-content element patterns separately when needed:
+
+```scss
+@use '@nextrap/style-elements/default';
+```
+
+See the [typography demo](./demo/typography.md) for the supported text elements.

package/default.scss

@@ -0,0 +1,3 @@
+@use './index' as type;
+
+@include type.style-typography();

package/index.css

@@ -1 +1 @@
-h1,.h1{font-size:var(--nt-fs-h1);font-family:var(--nt-font-family-header),sans-serif;line-height:var(--nt-line-height-header)}h2,.h2{font-size:var(--nt-fs-h2);font-family:var(--nt-font-family-header),sans-serif;line-height:var(--nt-line-height-header)}h3,.h3{font-size:var(--nt-fs-h3);font-family:var(--nt-font-family-header),sans-serif;line-height:var(--nt-line-height-header)}h4,.h4{font-size:var(--nt-fs-h4);font-family:var(--nt-font-family-header) sans-serif;line-height:var(--nt-line-height-header)}h5,.h5{font-size:var(--nt-fs-h5);font-family:var(--nt-font-family-header),sans-serif;line-height:var(--nt-line-height-header)}h6,.h6{font-size:var(--nt-fs-h6);font-family:var(--nt-font-family-header),sans-serif;line-height:var(--nt-line-height-header)}p,ul,ol,blockquote{--fs: var(--nt-fs-base);--font-family: var(--nt-font-family-base);--font-color: var(--nt-text)}body{font-family:var(--nt-font-family-base),sans-serif}p{font-size:var(--font-size-base);color:var(--font-color)}small{font-size:var(--nt-fs-small)}body a{color:var(--nt-link);position:relative;text-decoration:underline;text-decoration-color:var(-nt-link);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}body a:hover{color:color-mix(in srgb,var(--nt-link),black 30%);text-decoration:underline}body a:focus{outline:1px dashed var(--nt-link);outline-offset:2px;text-decoration:underline}.prose{--prose-max-w: 75ch;--prose-section-space-top: var(--nt-space-5);--prose-section-space-bottom: var(--nt-space-4);--prose-para-space: var(--nt-space-4);--prose-link-decoration: underline;--prose-text: var(--nt-text);--prose-muted: rgba(from var(--nt-text) r g b / .7);max-width:var(--prose-max-w);color:var(--nt-text);line-height:1.65;display:block;margin:0 auto;--prose-table-border-color: var(--nt-text)}.prose.prose-xl{--prose-max-w: 100%}.prose *{margin-bottom:var(--prose-para-space)}.prose .box{--box-border: var(--nt-text);--box-background: transparentize();--box-text: var(--nt-text);--box-radius: var(--nt-border-radius);--box-header-color: var(--box-border);border:2px solid var(--box-border);border-radius:var(--box-radius);background:var(--box-background);padding:var(--nt-space)}.prose .box h1,.prose .box h2,.prose .box h3,.prose .box h4,.prose .box h5,.prose .box h6{color:var(--box-header-color)}.prose .box *:first-child{margin-top:0!important}.prose .box *:last-child{margin-bottom:0!important}.prose .box-primary{--box-border: var(--nt-primary-emphasis);--box-background: var(--nt-primary-subtle);--box-header-color: var(--nt-primary-emphasis)}.prose .box-secondary{--box-border: var(--nt-secondary-emphasis);--box-background: var(--nt-secondary-subtle);--box-header-color: var(--nt-secondary-emphasis)}.prose .box-accent{--box-border: var(--nt-accent-emphasis);--box-background: var(--nt-accent-subtle);--box-header-color: var(--nt-accent-emphasis)}.prose .box-success{--box-border: var(--nt-success-emphasis);--box-background: var(--nt-success-subtle);--box-header-color: var(--nt-success-emphasis)}.prose .box-info{--box-border: var(--nt-info-emphasis);--box-background: var(--nt-info-subtle);--box-header-color: var(--nt-info-emphasis)}.prose .box-warning{--box-border: var(--nt-warning-emphasis);--box-background: var(--nt-warning-subtle);--box-header-color: var(--nt-warning-emphasis)}.prose .box-danger{--box-border: var(--nt-danger-emphasis);--box-background: var(--nt-danger-subtle);--box-header-color: var(--nt-danger-emphasis)}.prose .box-light{--box-border: var(--nt-light-emphasis);--box-background: var(--nt-light-subtle);--box-header-color: var(--nt-light-emphasis)}.prose .box-dark{--box-border: var(--nt-dark-emphasis);--box-background: var(--nt-dark-subtle);--box-header-color: var(--nt-dark-emphasis)}.prose table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden}.prose thead{--border-bottom: 2px solid var(--prose-table-border-color)}.prose tbody{--border-bottom: 1px solid var(--prose-table-border-color)}.prose tfoot{--border-bottom: none}.prose th,.prose td{text-align:left;padding:var(--nt-space-2) var(--nt-space-3);border-bottom:var(--border-bottom, none)}.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{line-height:1.2;margin-top:var(--prose-section-space-top)}.prose h1>small,.prose h2>small,.prose h3>small,.prose h4>small,.prose h5>small,.prose h6>small{font-size:.6em;color:var(--prose-muted);margin-left:var(--nt-space-2);font-weight:400}.prose img,.prose video{max-width:100%;height:auto;border-radius:var(--nt-border-radius)}.prose .img-fluid{max-width:100%;height:auto}.prose .img-start{float:left;margin:0 var(--nt-space-3) 0 0;max-width:33%}.prose .img-end{float:right;margin:0 0 0 var(--nt-space-3);max-width:33%}.prose .img-inline{display:inline-block;vertical-align:middle;margin:0}.prose .img-caption{font-size:.875em;color:var(--prose-muted);text-align:center;margin-top:var(--nt-space-1);margin-bottom:var(--prose-para-space)}.prose .img-caption img{margin-bottom:0}.prose p.img-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--nt-space-3);justify-items:center;align-items:center}.prose p.img-grid img,.prose p.img-grid video{margin:0}.prose strong{font-weight:700}.prose em{font-style:italic}.prose small{font-size:.875em}.prose mark{background:rgb(from var(--nt-warning) r g b/var(--nt-alpha));padding:0 .25em;border-radius:.125rem}.prose ul,.prose ol{padding-left:var(--nt-space-4)}.prose ul{list-style:disc}.prose ol{list-style:decimal}.prose li{margin-top:var(--prose-para-space)}.prose li>ul,.prose li>ol{margin-top:var(--prose-para-space)}.prose dt{font-weight:600}.prose dd{margin-left:var(--nt-space-3);color:var(--prose-muted)}.prose hr{border:0;border-top:var(--prose-border-width) solid var(--prose-hr);margin:var(--prose-gap-y) 0}.prose code{background:rgb(from var(--nt-dark) r g b/.06);padding:.125em .375em;border-radius:var(--prose-code-radius);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:.875em}.prose pre{background:rgb(from var(--nt-dark) r g b/.06);padding:var(--nt-space-4);border-radius:var(--prose-border-radius);overflow:auto}.prose pre code{background:transparent;padding:0}.prose blockquote{padding:var(--nt-space-3) var(--nt-space-4);margin:var(--nt-space-4) 0;border-left:.25rem solid var(--nt-primary-emphasis);color:var(--prose-muted);font-size:1.125em}.prose figure{margin:0}.prose figcaption,.prose .figure-caption{color:var(--prose-muted);font-size:var(--nt-font-size-small);margin-top:.375rem;text-align:center}.prose .lead{font-size:calc(var(--nt-fs-2));color:var(--nt-text)}.prose .muted,.prose .text-muted{color:var(--prose-muted)}
+h1,.h1{margin-top:0;margin-bottom:var(--typography-heading-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));color:var(--nt-header, var(--nt-text, currentColor));font-family:var(--nt-font-family-header, inherit);font-weight:var(--nt-font-weight-header, 500);line-height:var(--nt-line-height-header, 1.2);font-size:var(--nt-fs-h1, calc(1.375rem + 1.5vw) )}h2,.h2{margin-top:0;margin-bottom:var(--typography-heading-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));color:var(--nt-header, var(--nt-text, currentColor));font-family:var(--nt-font-family-header, inherit);font-weight:var(--nt-font-weight-header, 500);line-height:var(--nt-line-height-header, 1.2);font-size:var(--nt-fs-h2, calc(1.325rem + .9vw) )}h3,.h3{margin-top:0;margin-bottom:var(--typography-heading-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));color:var(--nt-header, var(--nt-text, currentColor));font-family:var(--nt-font-family-header, inherit);font-weight:var(--nt-font-weight-header, 500);line-height:var(--nt-line-height-header, 1.2);font-size:var(--nt-fs-h3, calc(1.3rem + .6vw) )}h4,.h4{margin-top:0;margin-bottom:var(--typography-heading-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));color:var(--nt-header, var(--nt-text, currentColor));font-family:var(--nt-font-family-header, inherit);font-weight:var(--nt-font-weight-header, 500);line-height:var(--nt-line-height-header, 1.2);font-size:var(--nt-fs-h4, calc(1.275rem + .3vw) )}h5,.h5{margin-top:0;margin-bottom:var(--typography-heading-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));color:var(--nt-header, var(--nt-text, currentColor));font-family:var(--nt-font-family-header, inherit);font-weight:var(--nt-font-weight-header, 500);line-height:var(--nt-line-height-header, 1.2);font-size:var(--nt-fs-h5, 1.25rem)}h6,.h6{margin-top:0;margin-bottom:var(--typography-heading-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));color:var(--nt-header, var(--nt-text, currentColor));font-family:var(--nt-font-family-header, inherit);font-weight:var(--nt-font-weight-header, 500);line-height:var(--nt-line-height-header, 1.2);font-size:var(--nt-fs-h6, 1rem)}p{margin-top:0;margin-bottom:var(--typography-paragraph-margin-bottom, var(--nt-spacing-text, 1rem));color:var(--nt-text, currentColor);font-family:var(--nt-font-family-base, inherit);font-weight:var(--nt-font-weight-base, 400);line-height:var(--nt-line-height-base, 1.5)}b,strong{color:inherit;font-weight:var(--nt-font-weight-bold, 700)}em{font-style:italic}small,.small{font-size:var(--nt-font-size-small, .875em)}a{color:var(--nt-link, currentColor);text-decoration:underline;text-decoration-color:currentColor;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}a:hover{color:var(--nt-link-hover, var(--nt-link, currentColor))}a:focus-visible{outline:var(--typography-focus-ring-width, 1px) dashed var(--nt-focus, currentColor);outline-offset:var(--typography-focus-ring-offset, 2px)}mark{padding:var(--typography-mark-padding, .1875em);color:var(--typography-mark-color, var(--nt-warning-emphasis, var(--nt-text, currentColor)));background-color:var(--typography-mark-bg, var(--nt-warning-subtle, #fff3cd))}ul{margin-top:0;margin-bottom:var(--typography-list-margin-bottom, var(--nt-spacing-text, 1rem));list-style:disc}ol{margin-top:0;margin-bottom:var(--typography-list-margin-bottom, var(--nt-spacing-text, 1rem));padding-left:var(--typography-list-padding-left, var(--nt-space-6, 2rem));list-style:decimal}dl{margin-top:0;margin-bottom:var(--typography-list-margin-bottom, var(--nt-spacing-text, 1rem))}dt{font-weight:var(--nt-font-weight-bold, 700)}dd{margin-bottom:var(--typography-definition-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));margin-left:0;color:var(--nt-text-muted, currentColor)}hr{margin:var(--typography-hr-margin-y, var(--nt-spacing-text, 1rem)) 0;color:inherit;border:0;border-top:var(--nt-border-width, 1px) solid;opacity:var(--typography-hr-opacity, .25)}code{padding:var(--typography-code-padding-y, .125em) var(--typography-code-padding-x, .375em);color:var(--typography-code-color, var(--nt-text, inherit));background:var(--typography-code-bg, color-mix(in oklch, currentColor 8%, transparent));border-radius:var(--nt-border-radius-sm, var(--nt-border-radius, .25rem));font-family:var(--typography-font-family-monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace);font-size:var(--typography-code-font-size, .875em)}pre{display:block;margin-top:0;margin-bottom:var(--typography-pre-margin-bottom, var(--nt-spacing-text, 1rem));padding:var(--typography-pre-padding, var(--nt-space-4, 1rem));overflow:auto;color:var(--nt-text, currentColor);background:var(--typography-pre-bg, color-mix(in oklch, currentColor 8%, transparent));border-radius:var(--nt-border-radius, .375rem);font-family:var(--typography-font-family-monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace);font-size:var(--typography-code-font-size, .875em)}pre code{padding:0;color:inherit;background:transparent;border-radius:0;font-size:inherit}blockquote{margin:0 0 var(--typography-blockquote-margin-bottom, var(--nt-spacing-text, 1rem));padding:var(--typography-blockquote-padding-y, .75rem) var(--typography-blockquote-padding-x, 1rem);color:var(--nt-text-muted, currentColor);border-left:var(--typography-blockquote-border-width, .25rem) solid var(--nt-primary-emphasis, var(--nt-primary, currentColor));font-size:var(--typography-blockquote-font-size, 1.125em)}figure{margin:0 0 var(--typography-figure-margin-bottom, var(--nt-spacing-text, 1rem))}figcaption,.figure-caption{margin-top:var(--typography-figure-caption-margin-top, var(--nt-space-2, .5rem));color:var(--nt-text-muted, currentColor);font-size:var(--nt-font-size-small, .875em);text-align:center}.lead{margin-top:0;margin-bottom:var(--typography-lead-margin-bottom, var(--nt-spacing-text, 1rem));color:var(--nt-text, currentColor);font-size:var(--typography-lead-font-size, var(--nt-fs-1, 1.25rem));font-weight:var(--typography-lead-font-weight, 300);line-height:var(--nt-line-height-base, 1.5)}.muted,.text-muted,.text-body-secondary{color:var(--nt-text-muted, currentColor)!important}

package/index.scss

@@ -0,0 +1,9 @@
+// @nextrap/style-typography — public Sass API only; importing emits no CSS.
+//
+// @use '@nextrap/style-typography' as type;
+// .theme { @include type.style-typography(); }
+//
+// For ready-to-use root-level typography use `@nextrap/style-typography/default`.
+
+@forward './src/typography';
+@forward './src/style-typography' show style-typography;

package/package.json

@@ -1,8 +1,20 @@
 {
-    "name": "@nextrap/style-typography",
-    "version": "1.0.5",
-    "main": "./index.js",
-    "dependencies": {},
-    "type": "module",
-    "types": "./index.d.ts"
+  "name": "@nextrap/style-typography",
+  "version": "2.0.0",
+  "main": "./index.js",
+  "exports": {
+    ".": "./index.scss",
+    "./default": "./default.scss"
+  },
+  "repository": {
+    "directory": "nextrap-base/style-typography",
+    "type": "git",
+    "url": "https://github.com/nextrap/nextrap-monorepo"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@nextrap/style-base": "^2.0.0"
+  },
+  "type": "module",
+  "types": "./index.d.ts"
 }

package/src/_style-typography.scss

@@ -0,0 +1,35 @@
+@use './typography' as t;
+
+// Materialize the complete typography API in the current Sass scope.
+// Typography intentionally includes native text-element selectors because its
+// default purpose is to establish a coherent document text rhythm. It never
+// styles page/section/content layout containers.
+@mixin style-typography() {
+  h1, .h1 { @include t.h1(); }
+  h2, .h2 { @include t.h2(); }
+  h3, .h3 { @include t.h3(); }
+  h4, .h4 { @include t.h4(); }
+  h5, .h5 { @include t.h5(); }
+  h6, .h6 { @include t.h6(); }
+
+  p { @include t.p(); }
+  b, strong { @include t.strong(); }
+  em { @include t.em(); }
+  small, .small { @include t.small(); }
+  a { @include t.link(); }
+  mark { @include t.mark(); }
+  ul { @include t.ul(); }
+  ol { @include t.ol(); }
+  dl { @include t.dl(); }
+  dt { @include t.dt(); }
+  dd { @include t.dd(); }
+  hr { @include t.hr(); }
+  code { @include t.code(); }
+  pre { @include t.pre(); }
+  blockquote { @include t.blockquote(); }
+  figure { @include t.figure(); }
+  figcaption, .figure-caption { @include t.figure-caption(); }
+  .lead { @include t.lead(); }
+  .muted, .text-muted { @include t.text-muted(); }
+  .text-body-secondary { @include t.text-body-secondary(); }
+}

package/src/_typography.scss

@@ -0,0 +1,214 @@
+// Typography mixin API — each mixin styles the current selector.
+//
+// Typography owns the rhythm and visual treatment of individual text elements.
+// It deliberately does NOT add spacing/padding to content wrappers, sections,
+// pages, or other layout containers. Layout spacing belongs to the consuming
+// layout/theme layer.
+
+@mixin heading() {
+  margin-top: 0;
+  margin-bottom: var(--typography-heading-margin-bottom, calc(var(--nt-spacing-text, 1rem) * 0.5));
+  color: var(--nt-header, var(--nt-text, currentColor));
+  font-family: var(--nt-font-family-header, inherit);
+  font-weight: var(--nt-font-weight-header, 500);
+  line-height: var(--nt-line-height-header, 1.2);
+}
+
+@mixin h1() {
+  @include heading();
+  font-size: var(--nt-fs-h1, calc(1.375rem + 1.5vw));
+}
+
+@mixin h2() {
+  @include heading();
+  font-size: var(--nt-fs-h2, calc(1.325rem + 0.9vw));
+}
+
+@mixin h3() {
+  @include heading();
+  font-size: var(--nt-fs-h3, calc(1.3rem + 0.6vw));
+}
+
+@mixin h4() {
+  @include heading();
+  font-size: var(--nt-fs-h4, calc(1.275rem + 0.3vw));
+}
+
+@mixin h5() {
+  @include heading();
+  font-size: var(--nt-fs-h5, 1.25rem);
+}
+
+@mixin h6() {
+  @include heading();
+  font-size: var(--nt-fs-h6, 1rem);
+}
+
+@mixin p() {
+  margin-top: 0;
+  margin-bottom: var(--typography-paragraph-margin-bottom, var(--nt-spacing-text, 1rem));
+  color: var(--nt-text, currentColor);
+  font-family: var(--nt-font-family-base, inherit);
+  font-weight: var(--nt-font-weight-base, 400);
+  line-height: var(--nt-line-height-base, 1.5);
+}
+
+@mixin strong() {
+  color: inherit;
+  font-weight: var(--nt-font-weight-bold, 700);
+}
+
+@mixin em() {
+  font-style: italic;
+}
+
+@mixin small() {
+  font-size: var(--nt-font-size-small, 0.875em);
+}
+
+@mixin text-body-secondary() {
+  color: var(--nt-text-muted, currentColor) !important;
+}
+
+@mixin link() {
+  color: var(--nt-link, currentColor);
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+
+  &:hover {
+    color: var(--nt-link-hover, var(--nt-link, currentColor));
+  }
+
+  &:focus-visible {
+    outline: var(--typography-focus-ring-width, 1px) dashed var(--nt-focus, currentColor);
+    outline-offset: var(--typography-focus-ring-offset, 2px);
+  }
+}
+
+@mixin mark() {
+  padding: var(--typography-mark-padding, 0.1875em);
+  color: var(--typography-mark-color, var(--nt-warning-emphasis, var(--nt-text, currentColor)));
+  background-color: var(--typography-mark-bg, var(--nt-warning-subtle, #fff3cd));
+}
+
+@mixin ul() {
+  margin-top: 0;
+  margin-bottom: var(--typography-list-margin-bottom, var(--nt-spacing-text, 1rem));
+  list-style: disc;
+}
+
+@mixin ol() {
+  margin-top: 0;
+  margin-bottom: var(--typography-list-margin-bottom, var(--nt-spacing-text, 1rem));
+  padding-left: var(--typography-list-padding-left, var(--nt-space-6, 2rem));
+  list-style: decimal;
+}
+
+@mixin dl() {
+  margin-top: 0;
+  margin-bottom: var(--typography-list-margin-bottom, var(--nt-spacing-text, 1rem));
+}
+
+@mixin dt() {
+  font-weight: var(--nt-font-weight-bold, 700);
+}
+
+@mixin dd() {
+  margin-bottom: var(--typography-definition-margin-bottom, calc(var(--nt-spacing-text, 1rem) * 0.5));
+  margin-left: 0;
+  color: var(--nt-text-muted, currentColor);
+}
+
+@mixin hr() {
+  margin: var(--typography-hr-margin-y, var(--nt-spacing-text, 1rem)) 0;
+  color: inherit;
+  border: 0;
+  border-top: var(--nt-border-width, 1px) solid;
+  opacity: var(--typography-hr-opacity, 0.25);
+}
+
+@mixin code() {
+  padding: var(--typography-code-padding-y, 0.125em) var(--typography-code-padding-x, 0.375em);
+  color: var(--typography-code-color, var(--nt-text, inherit));
+  background: var(--typography-code-bg, color-mix(in oklch, currentColor 8%, transparent));
+  border-radius: var(--nt-border-radius-sm, var(--nt-border-radius, 0.25rem));
+  font-family: var(
+    --typography-font-family-monospace,
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    'Liberation Mono',
+    monospace
+  );
+  font-size: var(--typography-code-font-size, 0.875em);
+}
+
+@mixin pre() {
+  display: block;
+  margin-top: 0;
+  margin-bottom: var(--typography-pre-margin-bottom, var(--nt-spacing-text, 1rem));
+  padding: var(--typography-pre-padding, var(--nt-space-4, 1rem));
+  overflow: auto;
+  color: var(--nt-text, currentColor);
+  background: var(--typography-pre-bg, color-mix(in oklch, currentColor 8%, transparent));
+  border-radius: var(--nt-border-radius, 0.375rem);
+  font-family: var(
+    --typography-font-family-monospace,
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    'Liberation Mono',
+    monospace
+  );
+  font-size: var(--typography-code-font-size, 0.875em);
+
+  code {
+    padding: 0;
+    color: inherit;
+    background: transparent;
+    border-radius: 0;
+    font-size: inherit;
+  }
+}
+
+@mixin blockquote() {
+  margin: 0 0 var(--typography-blockquote-margin-bottom, var(--nt-spacing-text, 1rem));
+  padding: var(--typography-blockquote-padding-y, 0.75rem) var(--typography-blockquote-padding-x, 1rem);
+  color: var(--nt-text-muted, currentColor);
+  border-left: var(--typography-blockquote-border-width, 0.25rem) solid
+    var(--nt-primary-emphasis, var(--nt-primary, currentColor));
+  font-size: var(--typography-blockquote-font-size, 1.125em);
+}
+
+@mixin figure() {
+  margin: 0 0 var(--typography-figure-margin-bottom, var(--nt-spacing-text, 1rem));
+}
+
+@mixin figure-caption() {
+  margin-top: var(--typography-figure-caption-margin-top, var(--nt-space-2, 0.5rem));
+  color: var(--nt-text-muted, currentColor);
+  font-size: var(--nt-font-size-small, 0.875em);
+  text-align: center;
+}
+
+@mixin lead() {
+  margin-top: 0;
+  margin-bottom: var(--typography-lead-margin-bottom, var(--nt-spacing-text, 1rem));
+  color: var(--nt-text, currentColor);
+  font-size: var(--typography-lead-font-size, var(--nt-fs-1, 1.25rem));
+  font-weight: var(--typography-lead-font-weight, 300);
+  line-height: var(--nt-line-height-base, 1.5);
+}
+
+@mixin text-muted() {
+  color: var(--nt-text-muted, currentColor) !important;
+}