typographics 2.4.7 → 3.0.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 +27 -30
- package/dist/index.css +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -36,26 +36,23 @@ The following CSS Custom Properties control the behavior of the system.
|
|
|
36
36
|
|
|
37
37
|
### Core scale
|
|
38
38
|
|
|
39
|
-
| Variable |
|
|
40
|
-
|
|
41
|
-
| `--t-base-font-family` | `"
|
|
42
|
-
| `--t-font-size-min-scale` |
|
|
43
|
-
| `--t-font-size-max-scale` |
|
|
44
|
-
| `--t-font-scale-min-width` |
|
|
45
|
-
| `--t-font-scale-max-width` |
|
|
46
|
-
| `--t-line-height-body` |
|
|
47
|
-
| `--t-line-height-heading` |
|
|
39
|
+
| Variable | Default | Description |
|
|
40
|
+
|:--------------------------------|:-----------------------------------------------------------------------------------:|:-----------------------------------------------------|
|
|
41
|
+
| `--t-base-font-family` | `system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif` | 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.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
|
+
>
|
|
51
|
+
> Viewport units: The root scaling uses `100vw` by default and switches to `100lvw` in supporting browsers for more stable mobile behavior.
|
|
50
52
|
|
|
51
|
-
###
|
|
53
|
+
### Spacing
|
|
52
54
|
|
|
53
|
-
|
|
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
|
-
**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.
|
|
55
|
+
**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, keeping a consistent vertical rhythm without additional spacing variables.
|
|
59
56
|
|
|
60
57
|
### Lists
|
|
61
58
|
|
|
@@ -66,25 +63,25 @@ Utilities `ul.list-*` / `ol.list-*` apply consistent padding and rhythm:
|
|
|
66
63
|
|
|
67
64
|
A custom property is available if you need to control container padding directly:
|
|
68
65
|
|
|
69
|
-
| Variable | Default
|
|
70
|
-
|
|
71
|
-
| `--t-list-padding-left` |
|
|
66
|
+
| Variable | Default | Description |
|
|
67
|
+
|:------------------------|:--------:|:---------------------------------------------------|
|
|
68
|
+
| `--t-list-padding-left` | `2.5rem` | Base padding if you build your own list wrappers. |
|
|
72
69
|
|
|
73
70
|
### Inline code
|
|
74
71
|
|
|
75
72
|
These properties customize inline code fragments (`code:not(pre code)`):
|
|
76
73
|
|
|
77
|
-
| Variable
|
|
78
|
-
|
|
79
|
-
| `--t-monospace-font-family`
|
|
80
|
-
| `--t-code-inline-font-size`
|
|
81
|
-
| `--t-code-inline-line-height`
|
|
82
|
-
| `--t-code-inline-bg`
|
|
83
|
-
| `--t-code-inline-color`
|
|
84
|
-
| `--t-code-inline-border-radius
|
|
85
|
-
| `--t-code-inline-padding`
|
|
86
|
-
| `--t-code-inline-margin`
|
|
87
|
-
| `--t-code-inline-border-color`
|
|
74
|
+
| Variable | Default | Description |
|
|
75
|
+
|:---------------------------------|:-----------------------------------------------------------------------------:|:-------------------------------------------|
|
|
76
|
+
| `--t-monospace-font-family` | `ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace` | Monospace stack for code. |
|
|
77
|
+
| `--t-code-inline-font-size` | `1em` | Font-size relative to surrounding text. |
|
|
78
|
+
| `--t-code-inline-line-height` | `1` | Line-height for inline code. |
|
|
79
|
+
| `--t-code-inline-bg` | `rgb(0 0 0 / 5%)` | Background color. |
|
|
80
|
+
| `--t-code-inline-color` | `#24292f` | Text color. |
|
|
81
|
+
| `--t-code-inline-border-radius` | `0.3em` | Corner radius. |
|
|
82
|
+
| `--t-code-inline-padding` | `0.25em 0.4em` | Internal padding. |
|
|
83
|
+
| `--t-code-inline-margin` | `0 0.25em` | External margin. |
|
|
84
|
+
| `--t-code-inline-border-color` | `rgb(0 0 0 / 10%)` | Outline color used by the subtle 1px ring. |
|
|
88
85
|
|
|
89
86
|
### Code block
|
|
90
87
|
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--t-
|
|
1
|
+
:root{--t-internal-min-w: calc(var(--t-font-scale-min-width, 600) * 1px);--t-internal-max-w: calc(var(--t-font-scale-max-width, 1440) * 1px);--t-internal-min: calc(var(--t-font-size-min-scale, .75) * 1rem);--t-internal-max: calc(var(--t-font-size-max-scale, 1) * 1rem);--t-internal-slope: calc( (var(--t-internal-max) - var(--t-internal-min)) * (100vw - var(--t-internal-min-w)) / (var(--t-internal-max-w) - var(--t-internal-min-w)) );--t-font-size-clamp: clamp( var(--t-internal-min), calc(var(--t-internal-min) + var(--t-internal-slope)), var(--t-internal-max) )}@supports (width: 1lvw){:root{--t-internal-slope: calc( (var(--t-internal-max) - var(--t-internal-min)) * (100lvw - var(--t-internal-min-w)) / (var(--t-internal-max-w) - var(--t-internal-min-w)) );--t-font-size-clamp: clamp( var(--t-internal-min), calc(var(--t-internal-min) + var(--t-internal-slope)), var(--t-internal-max) )}}html{font-size:100%;box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}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}a{text-decoration-skip-ink:auto}ul,ol{padding-inline-start: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:var(--t-heading-measure, 50ch);text-wrap:balance}.display-large:last-of-type:not(:only-of-type){margin-block-end:0}.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:var(--t-heading-measure, 50ch);text-wrap:balance}.display-medium:last-of-type:not(:only-of-type){margin-block-end:0}.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:var(--t-heading-measure, 50ch);text-wrap:balance}.display-small:last-of-type:not(:only-of-type){margin-block-end:0}.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:var(--t-heading-measure, 50ch);text-wrap:balance}.headline-large:last-of-type:not(:only-of-type){margin-block-end:0}.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:var(--t-heading-measure, 50ch);text-wrap:balance}.headline-medium:last-of-type:not(:only-of-type){margin-block-end:0}.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:var(--t-heading-measure, 50ch);text-wrap:balance}.headline-small:last-of-type:not(:only-of-type){margin-block-end:0}.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:var(--t-heading-measure, 50ch);text-wrap:balance}.title-large:last-of-type:not(:only-of-type){margin-block-end:0}.title-medium{font-size:2em;line-height:var(--t-line-height-heading, 1.3);margin-top:1.25lh;margin-bottom:.5lh;max-inline-size:var(--t-heading-measure, 50ch);text-wrap:balance}.title-medium:last-of-type:not(:only-of-type){margin-block-end:0}.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:var(--t-heading-measure, 50ch);text-wrap:balance}.title-small:last-of-type:not(:only-of-type){margin-block-end:0}.label-large{font-size:1em;line-height:1.3;font-weight:600;margin-bottom:.75lh}.label-large:last-of-type:not(:only-of-type){margin-block-end:0}.label-medium{font-size:.9em;line-height:1.35;font-weight:600;margin-bottom:.75lh}.label-medium:last-of-type:not(:only-of-type){margin-block-end:0}.label-small{font-size:.85em;line-height:1.2;font-weight:600;margin-bottom:.75lh}.label-small:last-of-type:not(:only-of-type){margin-block-end:0}.body-large{font-size:1.125em;line-height:1.5;font-weight:400;margin-bottom:.75lh}.body-large:last-of-type:not(:only-of-type){margin-block-end:0}.body-medium{font-size:1em;line-height:1.45;font-weight:400;margin-bottom:.75lh}.body-medium:last-of-type:not(:only-of-type){margin-block-end:0}.body-small{font-size:.875em;line-height:1.35;font-weight:400;margin-bottom:.75lh}.body-small:last-of-type:not(:only-of-type){margin-block-end:0}ul.list-large,ol.list-large{font-size:1em;line-height:1.5;padding-inline-start:var(--t-list-padding-left, 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:.9em;line-height:1.45;padding-inline-start:var(--t-list-padding-left, 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:.85em;line-height:1.35;padding-inline-start:var(--t-list-padding-left, 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 .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.4rem);line-height:var(--t-code-block-line-height, 1.6);background:var(--t-code-block-bg, #f5f5f5);color:var(--t-code-block-color, #24292f);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%}pre code{display:inline-block;padding:var(--t-code-block-padding, 1.2rem 2rem)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "typographics",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.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",
|
|
@@ -25,10 +25,10 @@
|
|
|
25
25
|
"dist/"
|
|
26
26
|
],
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"stylelint": "16.
|
|
29
|
-
"stylelint-config-standard-scss": "
|
|
30
|
-
"sass": "1.
|
|
31
|
-
"vite": "7.1.
|
|
28
|
+
"stylelint": "16.25.0",
|
|
29
|
+
"stylelint-config-standard-scss": "16.0.0",
|
|
30
|
+
"sass": "1.93.2",
|
|
31
|
+
"vite": "7.1.11"
|
|
32
32
|
},
|
|
33
33
|
"keywords": [
|
|
34
34
|
"typography",
|