@nextrap/style-typography 1.0.4 → 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/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.0.5 (2025-09-09)
+
+This was a version bump only for style-typography to align it with other projects, there were no code changes.
+
 ## 1.0.4 (2025-07-24)
 
 This was a version bump only for style-typography to align it with other projects, there were no code changes.

package/README.md

@@ -1,11 +1,30 @@
-# style-typography
+# @nextrap/style-typography
 
-This library was generated with [Nx](https://nx.dev).
+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`.
 
-## Building
+## Sass entry points
 
-Run `nx build style-typography` to build the library.
+The main entry point exports mixins without emitting CSS:
 
-## Running unit tests
+```scss
+@use '@nextrap/style-typography' as type;
 
-Run `nx test style-typography` to execute the unit tests via [Vitest](https://vitest.dev/).
+.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)}
+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.4",
-    "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;
+}