typographics 2.2.0 → 2.3.0-dev.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +80 -16
- package/dist/index.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
<br>
|
|
2
1
|
<p align="center"><strong>typographics</strong></p>
|
|
3
2
|
|
|
4
3
|
<div align="center">
|
|
@@ -9,7 +8,7 @@
|
|
|
9
8
|
|
|
10
9
|
</div>
|
|
11
10
|
|
|
12
|
-
<p align="center">typographics provides flexible and adaptive styles for typography on web pages. This package allows you to automate the resizing of fonts based on screen width, ensuring
|
|
11
|
+
<p align="center">typographics provides flexible and adaptive styles for typography on web pages. This package allows you to automate the resizing of fonts based on screen width and maintain a consistent vertical rhythm, ensuring great readability on any device.</p>
|
|
13
12
|
<p align="center"><a href="https://codepen.io/ux-ui/pen/BavYXRz">Demo</a></p>
|
|
14
13
|
<br>
|
|
15
14
|
|
|
@@ -21,28 +20,93 @@ $ yarn add typographics
|
|
|
21
20
|
<br>
|
|
22
21
|
|
|
23
22
|
➤ **Import**
|
|
23
|
+
|
|
24
24
|
```javascript
|
|
25
25
|
import 'typographics/dist/index.css';
|
|
26
26
|
```
|
|
27
27
|
<sub>or</sub>
|
|
28
|
-
```
|
|
28
|
+
```scss
|
|
29
29
|
@import "typographics/dist/index.css";
|
|
30
30
|
```
|
|
31
31
|
<br>
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
|
40
|
-
|
|
41
|
-
| `--t-font-
|
|
42
|
-
| `--t-
|
|
43
|
-
| `--t-
|
|
33
|
+
## Settings
|
|
34
|
+
|
|
35
|
+
The following CSS Custom Properties control the behavior and look of the system.
|
|
36
|
+
|
|
37
|
+
### Core scale
|
|
38
|
+
|
|
39
|
+
| Variable | Default | Description |
|
|
40
|
+
|:--------------------------------|:---------:|:-----------------------------------------------------|
|
|
41
|
+
| `--t-base-font-family` | `"Inter"` | Base font-family for body text. |
|
|
42
|
+
| `--t-font-size-min-scale` | `0.75` | Minimum root font-size scale (start of fluid range). |
|
|
43
|
+
| `--t-font-size-max-scale` | `1` | Maximum root font-size scale (end of fluid range). |
|
|
44
|
+
| `--t-font-scale-min-width` | `600` | Viewport width (px) where scaling starts. |
|
|
45
|
+
| `--t-font-scale-max-width` | `1440` | Viewport width (px) where scaling stops. |
|
|
46
|
+
| `--t-line-height-body` | `1.5` | Default line-height for body text. |
|
|
47
|
+
| `--t-line-height-heading` | `1.3em` | Line-height for headings. |
|
|
48
|
+
|
|
49
|
+
> The library computes `--t-font-size-clamp` from these values to fluidly scale the root font size.
|
|
50
|
+
|
|
51
|
+
### Baseline & spacing (new)
|
|
52
|
+
|
|
53
|
+
| Variable | Default | Description |
|
|
54
|
+
|:-----------------------|:-----------------------------:|:-----------------------------------------------|
|
|
55
|
+
| `--t-baseline` | `0.8rem` | Base unit for vertical rhythm (baseline grid). |
|
|
56
|
+
| `--t-half-baseline` | `calc(var(--t-baseline) / 2)` | Half-step used for compact spacing. |
|
|
57
|
+
|
|
58
|
+
These variables are used to drive margins for paragraphs, lists, and related components to keep consistent rhythm across sizes.
|
|
59
|
+
|
|
60
|
+
### Lists (new)
|
|
61
|
+
|
|
62
|
+
| Variable | Default | Description |
|
|
63
|
+
|:--------------------------|:-------:|:----------------------------------------------------------------------------------------------------|
|
|
64
|
+
| `--t-list-padding-left` | `0` | Left padding for ordered and unordered lists created via `ul.list-*` / `ol.list-*` utility classes. |
|
|
65
|
+
|
|
66
|
+
### Inline code (new)
|
|
67
|
+
|
|
68
|
+
These properties customize the appearance of inline code fragments (`code:not(pre code)`):
|
|
69
|
+
|
|
70
|
+
| Variable | Default | Description |
|
|
71
|
+
|:---------------------------------|:-----------------------------------------------------------------------------:|:-------------------------------------------|
|
|
72
|
+
| `--t-monospace-font-family` | `ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace` | Monospace stack for code. |
|
|
73
|
+
| `--t-code-inline-font-size` | `1em` | Font-size relative to surrounding text. |
|
|
74
|
+
| `--t-code-inline-line-height` | `1` | Line-height for inline code. |
|
|
75
|
+
| `--t-code-inline-bg` | `rgb(0 0 0 / 5%)` | Background color. |
|
|
76
|
+
| `--t-code-inline-color` | `#24292f` | Text color. |
|
|
77
|
+
| `--t-code-inline-border-radius` | `0.3em` | Corner radius. |
|
|
78
|
+
| `--t-code-inline-padding` | `0.25em 0.4em` | Internal padding. |
|
|
79
|
+
| `--t-code-inline-margin` | `0 0.25em` | External margin. |
|
|
80
|
+
| `--t-code-inline-border-color` | `rgb(0 0 0 / 10%)` | Outline color used by the subtle 1px ring. |
|
|
81
|
+
|
|
82
|
+
### Code block (new)
|
|
83
|
+
|
|
84
|
+
These properties customize the appearance of fenced code blocks (`pre`):
|
|
85
|
+
|
|
86
|
+
| Variable | Default | Description |
|
|
87
|
+
|:---------------------------------|:-------------:|:-----------------------------------|
|
|
88
|
+
| `--t-code-block-font-size` | `1.6rem` | Font-size for code blocks. |
|
|
89
|
+
| `--t-code-block-line-height` | `1.6` | Line-height for code blocks. |
|
|
90
|
+
| `--t-code-block-bg` | `#F5F5F5` | Background color. |
|
|
91
|
+
| `--t-code-block-color` | `#24292f` | Text color. |
|
|
92
|
+
| `--t-code-block-padding` | `1.2rem 2rem` | Internal padding. |
|
|
93
|
+
| `--t-code-block-margin` | `1.3em 0` | External margin (vertical rhythm). |
|
|
94
|
+
| `--t-code-block-border-radius` | `0.6rem` | Corner radius. |
|
|
95
|
+
|
|
96
|
+
### Notes
|
|
97
|
+
|
|
98
|
+
- `body { font-family: var(--t-base-font-family, system-ui, ...); }` now falls back to a robust system stack by default. Override `--t-base-font-family` to enforce a custom face.
|
|
99
|
+
- Inputs, buttons, selects, and textareas inherit the body typography by default: `font: inherit; line-height: inherit;` for consistent UI text.
|
|
100
|
+
- Utility classes are available for headings (`.display-*`, `.headline-*`, `.title-*`), labels (`.label-*`), body copy (`.body-*`), and lists (`ul.list-*/ol.list-*`) tuned to the baseline grid.
|
|
101
|
+
<br>
|
|
102
|
+
|
|
103
|
+
## Usage hints
|
|
104
|
+
|
|
105
|
+
- Tweak `--t-font-size-min-scale`/`--t-font-size-max-scale` to adjust overall density while preserving relationships between components.
|
|
106
|
+
- Set `--t-baseline` to match your design system’s spacing unit (e.g., 4px/8px scale) for seamless integration.
|
|
107
|
+
- Use the inline/code block variables to align code styling with light/dark themes of your site.
|
|
44
108
|
<br>
|
|
45
109
|
|
|
46
|
-
|
|
110
|
+
## License
|
|
47
111
|
|
|
48
|
-
typographics is released under MIT license
|
|
112
|
+
typographics is released under the MIT license.
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--t-font-size-min-scale-rem: calc(var(--t-font-size-min-scale, .75) * 1rem);--t-font-size-max-scale-rem: calc(var(--t-font-size-max-scale, 1) * 1rem);--t-font-scale-min-width-rem: calc((var(--t-font-scale-min-width, 600) / 10) * 1rem);--t-slope: calc((var(--t-font-size-max-scale, 1) - var(--t-font-size-min-scale, .75)) * (100vw - var(--t-font-scale-min-width-rem)) / ((var(--t-font-scale-max-width, 1440) / 10) - (var(--t-font-scale-min-width, 600) / 10)));--t-font-size-clamp: clamp(var(--t-font-size-min-scale-rem), calc(var(--t-font-size-min-scale-rem) + var(--t-slope)), var(--t-font-size-max-scale-rem))}html{font-size:10px;font-feature-settings:"kern" 1,"liga" 0;text-rendering:optimizelegibility;text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}body{font-family:var(--t-base-font-family);font-size:var(--t-font-size-clamp);line-height:var(--t-line-height-body, 1.5);font-weight:400}*,*:before,*:after{box-sizing:inherit}a{text-decoration-skip-ink:auto}.display-large{font-size:5.7em;line-height:var(--t-line-height-heading, 1.3em);margin-top:calc(var(--t-line-height-heading, 1.3em) / 2 * 2.5);margin-bottom:calc(var(--t-line-height-heading, 1.3em) / 2 * 1);max-inline-size:50ch;text-wrap:balance;margin-left:-.08em}.display-medium{font-size:4.5em;line-height:var(--t-line-height-heading, 1.3em);margin-top:calc(var(--t-line-height-heading, 1.3em) / 2 * 2.5);margin-bottom:calc(var(--t-line-height-heading, 1.3em) / 2 * 1);max-inline-size:50ch;text-wrap:balance;margin-left:-.07em}.display-small{font-size:3.6em;line-height:var(--t-line-height-heading, 1.3em);margin-top:calc(var(--t-line-height-heading, 1.3em) / 2 * 2.5);margin-bottom:calc(var(--t-line-height-heading, 1.3em) / 2 * 1);max-inline-size:50ch;text-wrap:balance;margin-left:-.07em}.headline-large{font-size:3.2em;line-height:var(--t-line-height-heading, 1.3em);margin-top:calc(var(--t-line-height-heading, 1.3em) / 2 * 2.5);margin-bottom:calc(var(--t-line-height-heading, 1.3em) / 2 * 1);max-inline-size:50ch;text-wrap:balance;margin-left:-.06em}.headline-medium{font-size:2.8em;line-height:var(--t-line-height-heading, 1.3em);margin-top:calc(var(--t-line-height-heading, 1.3em) / 2 * 2.5);margin-bottom:calc(var(--t-line-height-heading, 1.3em) / 2 * 1);max-inline-size:50ch;text-wrap:balance;margin-left:-.06em}.headline-small{font-size:2.4em;line-height:var(--t-line-height-heading, 1.3em);margin-top:calc(var(--t-line-height-heading, 1.3em) / 2 * 2.5);margin-bottom:calc(var(--t-line-height-heading, 1.3em) / 2 * 1);max-inline-size:50ch;text-wrap:balance;margin-left:-.05em}.title-large{font-size:2.2em;line-height:var(--t-line-height-heading, 1.3em);margin-top:calc(var(--t-line-height-heading, 1.3em) / 2 * 2.5);margin-bottom:calc(var(--t-line-height-heading, 1.3em) / 2 * 1);max-inline-size:50ch;text-wrap:balance;margin-left:-.04em}.title-medium{font-size:1.6rem;line-height:var(--t-line-height-heading, 1.3em);margin-top:calc(var(--t-line-height-heading, 1.3em) / 2 * 2.5);margin-bottom:calc(var(--t-line-height-heading, 1.3em) / 2 * 1);max-inline-size:50ch;text-wrap:balance;font-weight:600;margin-left:-.03em}.title-small{font-size:1.4rem;line-height:var(--t-line-height-heading, 1.3em);margin-top:calc(var(--t-line-height-heading, 1.3em) / 2 * 2.5);margin-bottom:calc(var(--t-line-height-heading, 1.3em) / 2 * 1);max-inline-size:50ch;text-wrap:balance;font-weight:600}.label-large{font-size:1.4rem;line-height:
|
|
1
|
+
:root{--t-font-size-min-scale-rem: calc(var(--t-font-size-min-scale, .75) * 1rem);--t-font-size-max-scale-rem: calc(var(--t-font-size-max-scale, 1) * 1rem);--t-font-scale-min-width-rem: calc((var(--t-font-scale-min-width, 600) / 10) * 1rem);--t-slope: calc( (var(--t-font-size-max-scale, 1) - var(--t-font-size-min-scale, .75)) * (100vw - var(--t-font-scale-min-width-rem)) / ((var(--t-font-scale-max-width, 1440) / 10) - (var(--t-font-scale-min-width, 600) / 10)) );--t-font-size-clamp: clamp( var(--t-font-size-min-scale-rem), calc(var(--t-font-size-min-scale-rem) + var(--t-slope)), var(--t-font-size-max-scale-rem) );--t-baseline: .8rem;--t-half-baseline: calc(var(--t-baseline) / 2)}html{font-size:10px;font-feature-settings:"kern" 1,"liga" 0;text-rendering:optimizelegibility;text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}body{font-family:var(--t-base-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial),sans-serif;font-size:var(--t-font-size-clamp);line-height:var(--t-line-height-body, 1.5);font-weight:400}*,*:before,*:after{box-sizing:inherit}a{text-decoration-skip-ink:auto}.display-large{font-size:5.7em;line-height:var(--t-line-height-heading, 1.3em);margin-top:calc(var(--t-line-height-heading, 1.3em) / 2 * 2.5);margin-bottom:calc(var(--t-line-height-heading, 1.3em) / 2 * 1);max-inline-size:50ch;text-wrap:balance;margin-left:-.08em}.display-medium{font-size:4.5em;line-height:var(--t-line-height-heading, 1.3em);margin-top:calc(var(--t-line-height-heading, 1.3em) / 2 * 2.5);margin-bottom:calc(var(--t-line-height-heading, 1.3em) / 2 * 1);max-inline-size:50ch;text-wrap:balance;margin-left:-.07em}.display-small{font-size:3.6em;line-height:var(--t-line-height-heading, 1.3em);margin-top:calc(var(--t-line-height-heading, 1.3em) / 2 * 2.5);margin-bottom:calc(var(--t-line-height-heading, 1.3em) / 2 * 1);max-inline-size:50ch;text-wrap:balance;margin-left:-.07em}.headline-large{font-size:3.2em;line-height:var(--t-line-height-heading, 1.3em);margin-top:calc(var(--t-line-height-heading, 1.3em) / 2 * 2.5);margin-bottom:calc(var(--t-line-height-heading, 1.3em) / 2 * 1);max-inline-size:50ch;text-wrap:balance;margin-left:-.06em}.headline-medium{font-size:2.8em;line-height:var(--t-line-height-heading, 1.3em);margin-top:calc(var(--t-line-height-heading, 1.3em) / 2 * 2.5);margin-bottom:calc(var(--t-line-height-heading, 1.3em) / 2 * 1);max-inline-size:50ch;text-wrap:balance;margin-left:-.06em}.headline-small{font-size:2.4em;line-height:var(--t-line-height-heading, 1.3em);margin-top:calc(var(--t-line-height-heading, 1.3em) / 2 * 2.5);margin-bottom:calc(var(--t-line-height-heading, 1.3em) / 2 * 1);max-inline-size:50ch;text-wrap:balance;margin-left:-.05em}.title-large{font-size:2.2em;line-height:var(--t-line-height-heading, 1.3em);margin-top:calc(var(--t-line-height-heading, 1.3em) / 2 * 2.5);margin-bottom:calc(var(--t-line-height-heading, 1.3em) / 2 * 1);max-inline-size:50ch;text-wrap:balance;margin-left:-.04em}.title-medium{font-size:1.6rem;line-height:var(--t-line-height-heading, 1.3em);margin-top:calc(var(--t-line-height-heading, 1.3em) / 2 * 2.5);margin-bottom:calc(var(--t-line-height-heading, 1.3em) / 2 * 1);max-inline-size:50ch;text-wrap:balance;font-weight:600;margin-left:-.03em}.title-small{font-size:1.4rem;line-height:var(--t-line-height-heading, 1.3em);margin-top:calc(var(--t-line-height-heading, 1.3em) / 2 * 2.5);margin-bottom:calc(var(--t-line-height-heading, 1.3em) / 2 * 1);max-inline-size:50ch;text-wrap:balance;font-weight:600}.label-large{font-size:1.4rem;line-height:1.6rem;margin-bottom:var(--t-half-baseline);text-wrap:balance;font-weight:600}.label-large:last-of-type{margin-block-end:0}.label-medium{font-size:1.2rem;line-height:1.6rem;margin-bottom:var(--t-half-baseline);text-wrap:balance;font-weight:600}.label-medium:last-of-type{margin-block-end:0}.label-small{font-size:1.2rem;line-height:1.6rem;margin-bottom:var(--t-half-baseline);text-wrap:balance;font-weight:600}.label-small:last-of-type{margin-block-end:0}.body-large{font-size:1.6rem;line-height:2.4rem;margin-bottom:var(--t-half-baseline);text-wrap:balance}.body-large:last-of-type{margin-block-end:0}.body-medium{font-size:1.4rem;line-height:2rem;margin-bottom:var(--t-half-baseline);text-wrap:balance}.body-medium:last-of-type{margin-block-end:0}.body-small{font-size:1.2rem;line-height:1.6rem;margin-bottom:var(--t-half-baseline);text-wrap:balance}.body-small:last-of-type{margin-block-end:0}ul,ol{padding-left:0;list-style-position:outside}ul{list-style-type:disc}ol{list-style-type:decimal}ul.list-large,ol.list-large{font-size:1.6rem;line-height:2.4rem;margin-block:var(--t-half-baseline);padding-left:var(--t-list-padding-left, 0);margin-block:var(--t-baseline) var(--t-baseline)}ul.list-large li,ol.list-large li{margin-block:calc(var(--t-half-baseline) / 2)}ul.list-medium,ol.list-medium{font-size:1.4rem;line-height:2rem;margin-block:var(--t-half-baseline);padding-left:var(--t-list-padding-left, 0);margin-block:var(--t-half-baseline) var(--t-baseline)}ul.list-medium li,ol.list-medium li{margin-block:calc(var(--t-half-baseline) / 2)}ul.list-small,ol.list-small{font-size:1.2rem;line-height:1.6rem;margin-block:var(--t-half-baseline);padding-left:var(--t-list-padding-left, 0);margin-block:var(--t-half-baseline) var(--t-half-baseline)}ul.list-small li,ol.list-small li{margin-block:calc(var(--t-half-baseline) / 2)}code:not(pre code){display:inline-block;font-family:var(--t-monospace-font-family, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono"),monospace;font-size:var(--t-code-inline-font-size, 1em);line-height:var(--t-code-inline-line-height, 1);background:var(--t-code-inline-bg, rgba(0, 0, 0, .05));color:var(--t-code-inline-color, #24292f);border-radius:var(--t-code-inline-border-radius, .3em);padding:var(--t-code-inline-padding, .25em .4em);margin:var(--t-code-inline-margin, 0 .25em);box-shadow:0 0 0 1px var(--t-code-inline-border-color, rgba(0, 0, 0, .1))}pre{font-family:var(--t-monospace-font-family, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono"),monospace;font-size:var(--t-code-block-font-size, 1.6rem);line-height:var(--t-code-block-line-height, 1.6);background:var(--t-code-block-bg, #F5F5F5);color:var(--t-code-block-color, #24292f);padding:var(--t-code-block-padding, 1.2rem 2rem);margin:var(--t-code-block-margin, 1.3em 0);border-radius:var(--t-code-block-border-radius, .6rem);overflow-x:auto;white-space:pre;max-inline-size:100%}input,button,select,textarea{font:inherit;line-height:inherit}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "typographics",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.3.0-dev.0",
|
|
4
4
|
"description": "typographics provides flexible and adaptive styles for typography on web pages. This package allows you to automate the resizing of fonts based on screen width, ensuring good readability on any device.",
|
|
5
5
|
"author": "ux-ui.pro",
|
|
6
6
|
"license": "MIT",
|