typographics 2.3.0-dev.0 → 2.4.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 +37 -43
- package/dist/index.css +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
</div>
|
|
10
10
|
|
|
11
|
-
<p align="center">typographics provides flexible and adaptive
|
|
11
|
+
<p align="center">typographics provides flexible and adaptive typography primitives. It fluidly scales root font size between breakpoints and maintains a consistent vertical rhythm using a baseline grid.</p>
|
|
12
12
|
<p align="center"><a href="https://codepen.io/ux-ui/pen/BavYXRz">Demo</a></p>
|
|
13
13
|
<br>
|
|
14
14
|
|
|
@@ -32,7 +32,7 @@ import 'typographics/dist/index.css';
|
|
|
32
32
|
|
|
33
33
|
## Settings
|
|
34
34
|
|
|
35
|
-
The following CSS Custom Properties control the behavior
|
|
35
|
+
The following CSS Custom Properties control the behavior of the system.
|
|
36
36
|
|
|
37
37
|
### Core scale
|
|
38
38
|
|
|
@@ -44,67 +44,61 @@ The following CSS Custom Properties control the behavior and look of the system.
|
|
|
44
44
|
| `--t-font-scale-min-width` | `600` | Viewport width (px) where scaling starts. |
|
|
45
45
|
| `--t-font-scale-max-width` | `1440` | Viewport width (px) where scaling stops. |
|
|
46
46
|
| `--t-line-height-body` | `1.5` | Default line-height for body text. |
|
|
47
|
-
| `--t-line-height-heading` |
|
|
47
|
+
| `--t-line-height-heading` | `1.3` | Line-height for headings (unitless). |
|
|
48
48
|
|
|
49
49
|
> The library computes `--t-font-size-clamp` from these values to fluidly scale the root font size.
|
|
50
50
|
|
|
51
|
-
### Baseline & spacing
|
|
51
|
+
### Baseline & spacing
|
|
52
52
|
|
|
53
53
|
| Variable | Default | Description |
|
|
54
54
|
|:-----------------------|:-----------------------------:|:-----------------------------------------------|
|
|
55
55
|
| `--t-baseline` | `0.8rem` | Base unit for vertical rhythm (baseline grid). |
|
|
56
56
|
| `--t-half-baseline` | `calc(var(--t-baseline) / 2)` | Half-step used for compact spacing. |
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
**Note on `lh`:** Components use `lh`-relative spacing (e.g., `0.5lh`, `0.75lh`). This ties margins to the element’s computed line-height, preserving rhythm when font sizes or line-heights change.
|
|
59
59
|
|
|
60
|
-
### Lists
|
|
60
|
+
### Lists
|
|
61
61
|
|
|
62
|
-
|
|
63
|
-
|:--------------------------|:-------:|:----------------------------------------------------------------------------------------------------|
|
|
64
|
-
| `--t-list-padding-left` | `0` | Left padding for ordered and unordered lists created via `ul.list-*` / `ol.list-*` utility classes. |
|
|
62
|
+
Utilities `ul.list-*` / `ol.list-*` apply consistent padding and rhythm:
|
|
65
63
|
|
|
66
|
-
|
|
64
|
+
- `padding-inline-start: 2.5rem` (optically balanced bullets/numbers)
|
|
65
|
+
- `li { margin-block: 0.25lh; }` (compact item spacing)
|
|
67
66
|
|
|
68
|
-
|
|
67
|
+
A custom property is available if you need to control container padding directly:
|
|
69
68
|
|
|
70
|
-
| Variable
|
|
71
|
-
|
|
72
|
-
| `--t-
|
|
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. |
|
|
69
|
+
| Variable | Default | Description |
|
|
70
|
+
|:------------------------|:-------:|:----------------------------------------------------------|
|
|
71
|
+
| `--t-list-padding-left` | `0` | Base padding if you build your own list wrappers. |
|
|
81
72
|
|
|
82
|
-
###
|
|
73
|
+
### Inline code
|
|
83
74
|
|
|
84
|
-
These properties customize
|
|
75
|
+
These properties customize inline code fragments (`code:not(pre code)`):
|
|
85
76
|
|
|
86
|
-
| Variable
|
|
87
|
-
|
|
88
|
-
| `--t-
|
|
89
|
-
| `--t-code-
|
|
90
|
-
| `--t-code-
|
|
91
|
-
| `--t-code-
|
|
92
|
-
| `--t-code-
|
|
93
|
-
| `--t-code-
|
|
94
|
-
| `--t-code-
|
|
77
|
+
| Variable | Default | Description |
|
|
78
|
+
|:-------------------------------|:-----------------------------------------------------------------------------:|:-------------------------------------------|
|
|
79
|
+
| `--t-monospace-font-family` | `ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace` | Monospace stack for code. |
|
|
80
|
+
| `--t-code-inline-font-size` | `1em` | Font-size relative to surrounding text. |
|
|
81
|
+
| `--t-code-inline-line-height` | `1` | Line-height for inline code. |
|
|
82
|
+
| `--t-code-inline-bg` | `rgb(0 0 0 / 5%)` | Background color. |
|
|
83
|
+
| `--t-code-inline-color` | `#24292f` | Text color. |
|
|
84
|
+
| `--t-code-inline-border-radius`| `0.3em` | Corner radius. |
|
|
85
|
+
| `--t-code-inline-padding` | `0.25em 0.4em` | Internal padding. |
|
|
86
|
+
| `--t-code-inline-margin` | `0 0.4em` | External margin. |
|
|
87
|
+
| `--t-code-inline-border-color` | `rgb(0 0 0 / 10%)` | Outline color used by the subtle 1px ring. |
|
|
95
88
|
|
|
96
|
-
###
|
|
89
|
+
### Code block
|
|
97
90
|
|
|
98
|
-
|
|
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
|
|
91
|
+
These properties customize fenced code blocks (`pre`):
|
|
104
92
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
-
|
|
93
|
+
| Variable | Default | Description |
|
|
94
|
+
|:-------------------------------|:-------------:|:-----------------------------------|
|
|
95
|
+
| `--t-code-block-font-size` | `1.6rem` | Font-size for code blocks. |
|
|
96
|
+
| `--t-code-block-line-height` | `1.6` | Line-height for code blocks. |
|
|
97
|
+
| `--t-code-block-bg` | `#F5F5F5` | Background color. |
|
|
98
|
+
| `--t-code-block-color` | `#24292f` | Text color. |
|
|
99
|
+
| `--t-code-block-padding` | `1.2rem 2rem` | Internal padding. |
|
|
100
|
+
| `--t-code-block-margin` | `1.3em 0` | External margin (vertical rhythm). |
|
|
101
|
+
| `--t-code-block-border-radius` | `0.6rem` | Corner radius. |
|
|
108
102
|
<br>
|
|
109
103
|
|
|
110
104
|
## 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) );--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.
|
|
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}ul,ol{padding-left:0;list-style-position:outside}ul{list-style-type:disc}ol{list-style-type:decimal}input,button,select,textarea{font:inherit;line-height:inherit}.display-large{font-size:5.7em;line-height:var(--t-line-height-heading, 1.3);margin-top:1.25lh;margin-bottom:.5lh;max-inline-size:50ch;text-wrap:balance}.display-medium{font-size:4.5em;line-height:var(--t-line-height-heading, 1.3);margin-top:1.25lh;margin-bottom:.5lh;max-inline-size:50ch;text-wrap:balance}.display-small{font-size:3.6em;line-height:var(--t-line-height-heading, 1.3);margin-top:1.25lh;margin-bottom:.5lh;max-inline-size:50ch;text-wrap:balance}.headline-large{font-size:3.2em;line-height:var(--t-line-height-heading, 1.3);margin-top:1.25lh;margin-bottom:.5lh;max-inline-size:50ch;text-wrap:balance}.headline-medium{font-size:2.8em;line-height:var(--t-line-height-heading, 1.3);margin-top:1.25lh;margin-bottom:.5lh;max-inline-size:50ch;text-wrap:balance}.headline-small{font-size:2.4em;line-height:var(--t-line-height-heading, 1.3);margin-top:1.25lh;margin-bottom:.5lh;max-inline-size:50ch;text-wrap:balance}.title-large{font-size:2.2em;line-height:var(--t-line-height-heading, 1.3);margin-top:1.25lh;margin-bottom:.5lh;max-inline-size:50ch;text-wrap:balance}.title-medium{font-size:2em;line-height:var(--t-line-height-heading, 1.3);margin-top:1.25lh;margin-bottom:.5lh;max-inline-size:50ch;text-wrap:balance}.title-small{font-size:1.8em;line-height:var(--t-line-height-heading, 1.3);margin-top:1.25lh;margin-bottom:.5lh;max-inline-size:50ch;text-wrap:balance}.label-large{font-size:1.4rem;line-height:1.3;margin-bottom:.75lh;text-wrap:balance;font-weight:600}.label-large:last-of-type{margin-block-end:0}.label-medium{font-size:1.2rem;line-height:1.35;margin-bottom:.75lh;text-wrap:balance;font-weight:600}.label-medium:last-of-type{margin-block-end:0}.label-small{font-size:1.1rem;line-height:1.2;margin-bottom:.75lh;text-wrap:balance;font-weight:600}.label-small:last-of-type{margin-block-end:0}.body-large{font-size:1.6rem;line-height:1.5;margin-bottom:.75lh;text-wrap:balance;font-weight:400}.body-large:last-of-type{margin-block-end:0}.body-medium{font-size:1.4rem;line-height:1.45;margin-bottom:.75lh;text-wrap:balance;font-weight:400}.body-medium:last-of-type{margin-block-end:0}.body-small{font-size:1.2rem;line-height:1.35;margin-bottom:.75lh;text-wrap:balance;font-weight:400}.body-small:last-of-type{margin-block-end:0}ul.list-large,ol.list-large{font-size:1.6rem;line-height:1.5;padding-left:var(--t-list-padding-left, 0);padding-inline-start:2.5rem;margin-block:.75lh .75lh}ul.list-large li,ol.list-large li{margin-block:.25lh}ul.list-medium,ol.list-medium{font-size:1.4rem;line-height:1.45;padding-left:var(--t-list-padding-left, 0);padding-inline-start:2.5rem;margin-block:.5lh .75lh}ul.list-medium li,ol.list-medium li{margin-block:.25lh}ul.list-small,ol.list-small{font-size:1.2rem;line-height:1.35;padding-left:var(--t-list-padding-left, 0);padding-inline-start:2.5rem;margin-block:.5lh .5lh}ul.list-small li,ol.list-small li{margin-block:.25lh}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 .4em);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%}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "typographics",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.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",
|
|
@@ -25,10 +25,10 @@
|
|
|
25
25
|
"dist/"
|
|
26
26
|
],
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"stylelint": "16.23.
|
|
28
|
+
"stylelint": "16.23.1",
|
|
29
29
|
"stylelint-config-standard-scss": "15.0.1",
|
|
30
30
|
"sass": "1.90.0",
|
|
31
|
-
"vite": "7.1.
|
|
31
|
+
"vite": "7.1.3"
|
|
32
32
|
},
|
|
33
33
|
"keywords": [
|
|
34
34
|
"typography",
|