typographics 3.0.1 → 3.2.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.
Files changed (3) hide show
  1. package/README.md +51 -0
  2. package/dist/index.css +1 -1
  3. package/package.json +4 -3
package/README.md CHANGED
@@ -50,6 +50,57 @@ The following CSS Custom Properties control the behavior of the system.
50
50
  >
51
51
  > Viewport units: The root scaling uses `100vw` by default and switches to `100lvw` in supporting browsers for more stable mobile behavior.
52
52
 
53
+ ### Typography scaling (global/local)
54
+
55
+ These variables allow you to tweak overall typography sizes (e.g. “everything 10% smaller”) **without copying internal `calc()` formulas**. They can be set globally on `:root` or locally on any container.
56
+
57
+ | Variable | Default | Description |
58
+ |:----------------------|:-------:|:----------------------------------------------------|
59
+ | `--t-body-scale` | `1` | Multiplier for body/paragraph/list/font-size rules. |
60
+ | `--t-heading-scale` | `1` | Multiplier for heading font-size rules. |
61
+
62
+ **Examples**
63
+
64
+ Global scale:
65
+
66
+ ```css
67
+ :root {
68
+ --t-body-scale: 0.9;
69
+ --t-heading-scale: 0.9;
70
+ }
71
+ ```
72
+
73
+ Local scale:
74
+
75
+ ```css
76
+ .article { --t-body-scale: 0.95; }
77
+ .hero { --t-heading-scale: 0.9; }
78
+ ```
79
+
80
+ ### Per-style heading endpoints (optional)
81
+
82
+ By default, heading styles (`.display-*`, `.headline-*`, `.title-*`) are computed by multiplying the global fluid heading clamp by a style coefficient (e.g. `--t-headline-medium`).
83
+
84
+ If you need a specific heading style to be exactly a certain size at the **start** and **end** of the fluid range, you can override its endpoints with two custom properties:
85
+
86
+ - `--t-<key>-min`: font-size at `--t-font-scale-min-width`
87
+ - `--t-<key>-max`: font-size at `--t-font-scale-max-width`
88
+
89
+ Example for `.headline-medium`:
90
+
91
+ ```css
92
+ .headline-medium {
93
+ --t-headline-medium-min: 28px;
94
+ --t-headline-medium-max: 34px;
95
+ }
96
+ ```
97
+
98
+ Available keys:
99
+
100
+ - `display-large`, `display-medium`, `display-small`
101
+ - `headline-large`, `headline-medium`, `headline-small`
102
+ - `title-large`, `title-medium`, `title-small`
103
+
53
104
  ### Spacing
54
105
 
55
106
  **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.
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- @layer reset,tokens,typography,components,utilities;@layer tokens{:root{--t-font-scale-min-width: 600;--t-font-scale-max-width: 1440;--t-scale-min-w: calc(var(--t-font-scale-min-width) * 1px);--t-scale-max-w: calc(var(--t-font-scale-max-width) * 1px);--t-body-font-size-min-scale: .875;--t-body-font-size-max-scale: 1.125;--t-body-font-size-min: calc(var(--t-body-font-size-min-scale) * 1rem);--t-body-font-size-max: calc(var(--t-body-font-size-max-scale) * 1rem);--t-body-font-size-slope: calc( (var(--t-body-font-size-max) - var(--t-body-font-size-min)) * (100vw - var(--t-scale-min-w)) / (var(--t-scale-max-w) - var(--t-scale-min-w)) );--t-body-font-size-clamp: clamp( var(--t-body-font-size-min), calc(var(--t-body-font-size-min) + var(--t-body-font-size-slope)), var(--t-body-font-size-max) );--t-heading-font-size-min-scale: 1;--t-heading-font-size-max-scale: 1.25;--t-heading-font-size-min: calc(var(--t-heading-font-size-min-scale) * 1rem);--t-heading-font-size-max: calc(var(--t-heading-font-size-max-scale) * 1rem);--t-heading-font-size-slope: calc( (var(--t-heading-font-size-max) - var(--t-heading-font-size-min)) * (100vw - var(--t-scale-min-w)) / (var(--t-scale-max-w) - var(--t-scale-min-w)) );--t-heading-font-size-clamp: clamp( var(--t-heading-font-size-min), calc(var(--t-heading-font-size-min) + var(--t-heading-font-size-slope)), var(--t-heading-font-size-max) );--t-display-large: 5.7;--t-display-medium: 4.5;--t-display-small: 3.6;--t-headline-large: 3.2;--t-headline-medium: 2.8;--t-headline-small: 2.4;--t-title-large: 2.2;--t-title-medium: 2;--t-title-small: 1.8;--t-code-inline-bg: rgb(0 0 0 / 5%);--t-code-inline-color: #24292f;--t-code-block-bg: #f5f5f5;--t-code-block-color: #24292f;-webkit-hyphens:auto;hyphens:auto}@supports (width: 1lvw){:root{--t-body-font-size-slope: calc( (var(--t-body-font-size-max) - var(--t-body-font-size-min)) * (100lvw - var(--t-scale-min-w)) / (var(--t-scale-max-w) - var(--t-scale-min-w)) );--t-heading-font-size-slope: calc( (var(--t-heading-font-size-max) - var(--t-heading-font-size-min)) * (100lvw - var(--t-scale-min-w)) / (var(--t-scale-max-w) - var(--t-scale-min-w)) );--t-body-font-size-clamp: clamp( var(--t-body-font-size-min), calc(var(--t-body-font-size-min) + var(--t-body-font-size-slope)), var(--t-body-font-size-max) );--t-heading-font-size-clamp: clamp( var(--t-heading-font-size-min), calc(var(--t-heading-font-size-min) + var(--t-heading-font-size-slope)), var(--t-heading-font-size-max) )}}}@layer reset{html{font-size:100%;text-size-adjust:100%;box-sizing:border-box}@supports (text-wrap: pretty){:root{text-wrap:pretty}}*,*:before,*:after{box-sizing:inherit}a{text-decoration-skip-ink:auto}ul,ol{list-style-position:outside}ul{list-style-type:disc}ol{list-style-type:decimal}input,button,select,textarea{font:inherit;line-height:inherit}}@layer typography{body{font-family:var(--t-base-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--t-body-font-size-clamp);line-height:var(--t-line-height-body, 1.5);font-weight:400;font-optical-sizing:auto;font-kerning:normal;font-variant-ligatures:common-ligatures contextual;font-variant-numeric:proportional-nums;font-synthesis-weight:none;font-synthesis-style:none}.display-large{font-size:calc(var(--t-heading-font-size-clamp) * var(--t-display-large));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:calc(var(--t-heading-font-size-clamp) * var(--t-display-medium));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:calc(var(--t-heading-font-size-clamp) * var(--t-display-small));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:calc(var(--t-heading-font-size-clamp) * var(--t-headline-large));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:calc(var(--t-heading-font-size-clamp) * var(--t-headline-medium));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:calc(var(--t-heading-font-size-clamp) * var(--t-headline-small));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:calc(var(--t-heading-font-size-clamp) * var(--t-title-large));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:calc(var(--t-heading-font-size-clamp) * var(--t-title-medium));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:calc(var(--t-heading-font-size-clamp) * var(--t-title-small));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:calc(var(--t-body-font-size-clamp) * 1);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:calc(var(--t-body-font-size-clamp) * .9);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:calc(var(--t-body-font-size-clamp) * .85);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:calc(var(--t-body-font-size-clamp) * 1);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:calc(var(--t-body-font-size-clamp) * .9);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:calc(var(--t-body-font-size-clamp) * .85);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:calc(var(--t-body-font-size-clamp) * 1);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:calc(var(--t-body-font-size-clamp) * .9);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:calc(var(--t-body-font-size-clamp) * .85);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))}code{overflow-wrap:anywhere}pre,code{tab-size:2;font-variant-ligatures:none;font-variant-numeric:tabular-nums slashed-zero}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)}:where(h1,.display-large){font-size:calc(var(--t-heading-font-size-clamp) * var(--t-display-large));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}:where(h1,.display-large):last-of-type:not(:only-of-type){margin-block-end:0}:where(h2,.headline-large){font-size:calc(var(--t-heading-font-size-clamp) * var(--t-headline-large));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}:where(h2,.headline-large):last-of-type:not(:only-of-type){margin-block-end:0}:where(h3,.headline-medium){font-size:calc(var(--t-heading-font-size-clamp) * var(--t-headline-medium));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}:where(h3,.headline-medium):last-of-type:not(:only-of-type){margin-block-end:0}:where(h4,.headline-small){font-size:calc(var(--t-heading-font-size-clamp) * var(--t-headline-small));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}:where(h4,.headline-small):last-of-type:not(:only-of-type){margin-block-end:0}:where(h5,.title-medium){font-size:calc(var(--t-heading-font-size-clamp) * var(--t-title-medium));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}:where(h5,.title-medium):last-of-type:not(:only-of-type){margin-block-end:0}:where(h6,.title-small){font-size:calc(var(--t-heading-font-size-clamp) * var(--t-title-small));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}:where(h6,.title-small):last-of-type:not(:only-of-type){margin-block-end:0}@supports (hanging-punctuation: first){h1,h2,h3{hanging-punctuation:first allow-end}}:where(p,.body-medium){font-size:calc(var(--t-body-font-size-clamp) * 1);line-height:1.45;font-weight:400;margin-bottom:.75lh}:where(p,.body-medium):last-of-type:not(:only-of-type){margin-block-end:0}:where(p,.body-medium){-webkit-hyphens:auto;hyphens:auto}.label-large,.label-medium,.label-small{font-variant-numeric:tabular-nums slashed-zero}}
1
+ @layer reset{html{-moz-text-size-adjust:100%;text-size-adjust:100%;box-sizing:border-box;font-size:100%}@supports (text-wrap:pretty){:root{text-wrap:pretty}}*,:before,:after{box-sizing:inherit}a{text-decoration-skip-ink:auto}ul,ol{list-style-position:outside}ul{list-style-type:disc}ol{list-style-type:decimal}input,button,select,textarea{font:inherit;line-height:inherit}}@layer tokens{:root{--t-body-scale:1;--t-heading-scale:1;--t-font-scale-min-width:600;--t-font-scale-max-width:1440;--t-scale-min-w:calc(var(--t-font-scale-min-width)*1px);--t-scale-max-w:calc(var(--t-font-scale-max-width)*1px);--t-fluid-vw:100vw;--t-body-font-size-min-scale:.875;--t-body-font-size-max-scale:1.125;--t-body-font-size-min:calc(var(--t-body-font-size-min-scale)*1rem);--t-body-font-size-max:calc(var(--t-body-font-size-max-scale)*1rem);--t-body-font-size-slope:calc((var(--t-body-font-size-max) - var(--t-body-font-size-min))*(var(--t-fluid-vw) - var(--t-scale-min-w))/(var(--t-scale-max-w) - var(--t-scale-min-w)));--t-body-font-size-clamp:clamp(var(--t-body-font-size-min),calc(var(--t-body-font-size-min) + var(--t-body-font-size-slope)),var(--t-body-font-size-max));--t-heading-font-size-min-scale:1;--t-heading-font-size-max-scale:1.25;--t-heading-font-size-min:calc(var(--t-heading-font-size-min-scale)*1rem);--t-heading-font-size-max:calc(var(--t-heading-font-size-max-scale)*1rem);--t-heading-font-size-slope:calc((var(--t-heading-font-size-max) - var(--t-heading-font-size-min))*(var(--t-fluid-vw) - var(--t-scale-min-w))/(var(--t-scale-max-w) - var(--t-scale-min-w)));--t-heading-font-size-clamp:clamp(var(--t-heading-font-size-min),calc(var(--t-heading-font-size-min) + var(--t-heading-font-size-slope)),var(--t-heading-font-size-max));--t-display-large:5.7;--t-display-medium:4.5;--t-display-small:3.6;--t-headline-large:3.2;--t-headline-medium:2.8;--t-headline-small:2.4;--t-title-large:2.2;--t-title-medium:2;--t-title-small:1.8;--t-code-inline-bg:#0000000d;--t-code-inline-color:#24292f;--t-code-block-bg:#f5f5f5;--t-code-block-color:#24292f;-webkit-hyphens:auto;hyphens:auto}@supports (width:1lvw){:root{--t-fluid-vw:100lvw}}}@layer typography{body{font-family:var(--t-base-font-family,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);font-size:calc(var(--t-body-font-size-clamp)*var(--t-body-scale,1));line-height:var(--t-line-height-body,1.5);font-optical-sizing:auto;font-kerning:normal;font-variant-ligatures:common-ligatures contextual;font-variant-numeric:proportional-nums;font-synthesis-weight:none;font-synthesis-style:none;font-weight:400}.display-large{--t-heading-resolved-min:var(--t-display-large-min,calc(var(--t-heading-font-size-min)*var(--t-heading-scale,1)*var(--t-display-large)));--t-heading-resolved-max:var(--t-display-large-max,calc(var(--t-heading-font-size-max)*var(--t-heading-scale,1)*var(--t-display-large)));font-size:clamp(var(--t-heading-resolved-min),var(--t-heading-resolved-min) + (var(--t-heading-resolved-max) - var(--t-heading-resolved-min))*(var(--t-fluid-vw) - var(--t-scale-min-w))/(var(--t-scale-max-w) - var(--t-scale-min-w)),var(--t-heading-resolved-max));line-height:var(--t-line-height-heading,1.3);max-inline-size:var(--t-heading-measure,50ch);text-wrap:balance;margin-top:1.25lh;margin-bottom:.5lh}.display-large:last-of-type:not(:only-of-type){margin-block-end:0}.display-medium{--t-heading-resolved-min:var(--t-display-medium-min,calc(var(--t-heading-font-size-min)*var(--t-heading-scale,1)*var(--t-display-medium)));--t-heading-resolved-max:var(--t-display-medium-max,calc(var(--t-heading-font-size-max)*var(--t-heading-scale,1)*var(--t-display-medium)));font-size:clamp(var(--t-heading-resolved-min),var(--t-heading-resolved-min) + (var(--t-heading-resolved-max) - var(--t-heading-resolved-min))*(var(--t-fluid-vw) - var(--t-scale-min-w))/(var(--t-scale-max-w) - var(--t-scale-min-w)),var(--t-heading-resolved-max));line-height:var(--t-line-height-heading,1.3);max-inline-size:var(--t-heading-measure,50ch);text-wrap:balance;margin-top:1.25lh;margin-bottom:.5lh}.display-medium:last-of-type:not(:only-of-type){margin-block-end:0}.display-small{--t-heading-resolved-min:var(--t-display-small-min,calc(var(--t-heading-font-size-min)*var(--t-heading-scale,1)*var(--t-display-small)));--t-heading-resolved-max:var(--t-display-small-max,calc(var(--t-heading-font-size-max)*var(--t-heading-scale,1)*var(--t-display-small)));font-size:clamp(var(--t-heading-resolved-min),var(--t-heading-resolved-min) + (var(--t-heading-resolved-max) - var(--t-heading-resolved-min))*(var(--t-fluid-vw) - var(--t-scale-min-w))/(var(--t-scale-max-w) - var(--t-scale-min-w)),var(--t-heading-resolved-max));line-height:var(--t-line-height-heading,1.3);max-inline-size:var(--t-heading-measure,50ch);text-wrap:balance;margin-top:1.25lh;margin-bottom:.5lh}.display-small:last-of-type:not(:only-of-type){margin-block-end:0}.headline-large{--t-heading-resolved-min:var(--t-headline-large-min,calc(var(--t-heading-font-size-min)*var(--t-heading-scale,1)*var(--t-headline-large)));--t-heading-resolved-max:var(--t-headline-large-max,calc(var(--t-heading-font-size-max)*var(--t-heading-scale,1)*var(--t-headline-large)));font-size:clamp(var(--t-heading-resolved-min),var(--t-heading-resolved-min) + (var(--t-heading-resolved-max) - var(--t-heading-resolved-min))*(var(--t-fluid-vw) - var(--t-scale-min-w))/(var(--t-scale-max-w) - var(--t-scale-min-w)),var(--t-heading-resolved-max));line-height:var(--t-line-height-heading,1.3);max-inline-size:var(--t-heading-measure,50ch);text-wrap:balance;margin-top:1.25lh;margin-bottom:.5lh}.headline-large:last-of-type:not(:only-of-type){margin-block-end:0}.headline-medium{--t-heading-resolved-min:var(--t-headline-medium-min,calc(var(--t-heading-font-size-min)*var(--t-heading-scale,1)*var(--t-headline-medium)));--t-heading-resolved-max:var(--t-headline-medium-max,calc(var(--t-heading-font-size-max)*var(--t-heading-scale,1)*var(--t-headline-medium)));font-size:clamp(var(--t-heading-resolved-min),var(--t-heading-resolved-min) + (var(--t-heading-resolved-max) - var(--t-heading-resolved-min))*(var(--t-fluid-vw) - var(--t-scale-min-w))/(var(--t-scale-max-w) - var(--t-scale-min-w)),var(--t-heading-resolved-max));line-height:var(--t-line-height-heading,1.3);max-inline-size:var(--t-heading-measure,50ch);text-wrap:balance;margin-top:1.25lh;margin-bottom:.5lh}.headline-medium:last-of-type:not(:only-of-type){margin-block-end:0}.headline-small{--t-heading-resolved-min:var(--t-headline-small-min,calc(var(--t-heading-font-size-min)*var(--t-heading-scale,1)*var(--t-headline-small)));--t-heading-resolved-max:var(--t-headline-small-max,calc(var(--t-heading-font-size-max)*var(--t-heading-scale,1)*var(--t-headline-small)));font-size:clamp(var(--t-heading-resolved-min),var(--t-heading-resolved-min) + (var(--t-heading-resolved-max) - var(--t-heading-resolved-min))*(var(--t-fluid-vw) - var(--t-scale-min-w))/(var(--t-scale-max-w) - var(--t-scale-min-w)),var(--t-heading-resolved-max));line-height:var(--t-line-height-heading,1.3);max-inline-size:var(--t-heading-measure,50ch);text-wrap:balance;margin-top:1.25lh;margin-bottom:.5lh}.headline-small:last-of-type:not(:only-of-type){margin-block-end:0}.title-large{--t-heading-resolved-min:var(--t-title-large-min,calc(var(--t-heading-font-size-min)*var(--t-heading-scale,1)*var(--t-title-large)));--t-heading-resolved-max:var(--t-title-large-max,calc(var(--t-heading-font-size-max)*var(--t-heading-scale,1)*var(--t-title-large)));font-size:clamp(var(--t-heading-resolved-min),var(--t-heading-resolved-min) + (var(--t-heading-resolved-max) - var(--t-heading-resolved-min))*(var(--t-fluid-vw) - var(--t-scale-min-w))/(var(--t-scale-max-w) - var(--t-scale-min-w)),var(--t-heading-resolved-max));line-height:var(--t-line-height-heading,1.3);max-inline-size:var(--t-heading-measure,50ch);text-wrap:balance;margin-top:1.25lh;margin-bottom:.5lh}.title-large:last-of-type:not(:only-of-type){margin-block-end:0}.title-medium{--t-heading-resolved-min:var(--t-title-medium-min,calc(var(--t-heading-font-size-min)*var(--t-heading-scale,1)*var(--t-title-medium)));--t-heading-resolved-max:var(--t-title-medium-max,calc(var(--t-heading-font-size-max)*var(--t-heading-scale,1)*var(--t-title-medium)));font-size:clamp(var(--t-heading-resolved-min),var(--t-heading-resolved-min) + (var(--t-heading-resolved-max) - var(--t-heading-resolved-min))*(var(--t-fluid-vw) - var(--t-scale-min-w))/(var(--t-scale-max-w) - var(--t-scale-min-w)),var(--t-heading-resolved-max));line-height:var(--t-line-height-heading,1.3);max-inline-size:var(--t-heading-measure,50ch);text-wrap:balance;margin-top:1.25lh;margin-bottom:.5lh}.title-medium:last-of-type:not(:only-of-type){margin-block-end:0}.title-small{--t-heading-resolved-min:var(--t-title-small-min,calc(var(--t-heading-font-size-min)*var(--t-heading-scale,1)*var(--t-title-small)));--t-heading-resolved-max:var(--t-title-small-max,calc(var(--t-heading-font-size-max)*var(--t-heading-scale,1)*var(--t-title-small)));font-size:clamp(var(--t-heading-resolved-min),var(--t-heading-resolved-min) + (var(--t-heading-resolved-max) - var(--t-heading-resolved-min))*(var(--t-fluid-vw) - var(--t-scale-min-w))/(var(--t-scale-max-w) - var(--t-scale-min-w)),var(--t-heading-resolved-max));line-height:var(--t-line-height-heading,1.3);max-inline-size:var(--t-heading-measure,50ch);text-wrap:balance;margin-top:1.25lh;margin-bottom:.5lh}.title-small:last-of-type:not(:only-of-type){margin-block-end:0}.label-large{font-size:calc(var(--t-body-font-size-clamp)*var(--t-body-scale,1)*1);margin-bottom:.75lh;font-weight:600;line-height:1.3}.label-large:last-of-type:not(:only-of-type){margin-block-end:0}.label-medium{font-size:calc(var(--t-body-font-size-clamp)*var(--t-body-scale,1)*.9);margin-bottom:.75lh;font-weight:600;line-height:1.35}.label-medium:last-of-type:not(:only-of-type){margin-block-end:0}.label-small{font-size:calc(var(--t-body-font-size-clamp)*var(--t-body-scale,1)*.85);margin-bottom:.75lh;font-weight:600;line-height:1.2}.label-small:last-of-type:not(:only-of-type){margin-block-end:0}.body-large{font-size:calc(var(--t-body-font-size-clamp)*var(--t-body-scale,1)*1);margin-bottom:.75lh;font-weight:400;line-height:1.5}.body-large:last-of-type:not(:only-of-type){margin-block-end:0}.body-medium{font-size:calc(var(--t-body-font-size-clamp)*var(--t-body-scale,1)*.9);margin-bottom:.75lh;font-weight:400;line-height:1.45}.body-medium:last-of-type:not(:only-of-type){margin-block-end:0}.body-small{font-size:calc(var(--t-body-font-size-clamp)*var(--t-body-scale,1)*.85);margin-bottom:.75lh;font-weight:400;line-height:1.35}.body-small:last-of-type:not(:only-of-type){margin-block-end:0}ul.list-large,ol.list-large{font-size:calc(var(--t-body-font-size-clamp)*var(--t-body-scale,1)*1);margin-block:.75lh;padding-inline-start:var(--t-list-padding-left,2.5rem);line-height:1.5}ul.list-large li,ol.list-large li{margin-block:.25lh}ul.list-medium,ol.list-medium{font-size:calc(var(--t-body-font-size-clamp)*var(--t-body-scale,1)*.9);margin-block:.5lh .75lh;padding-inline-start:var(--t-list-padding-left,2.5rem);line-height:1.45}ul.list-medium li,ol.list-medium li{margin-block:.25lh}ul.list-small,ol.list-small{font-size:calc(var(--t-body-font-size-clamp)*var(--t-body-scale,1)*.85);margin-block:.5lh;padding-inline-start:var(--t-list-padding-left,2.5rem);line-height:1.35}ul.list-small li,ol.list-small li{margin-block:.25lh}code:not(pre code){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,#0000000d);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,#0000001a);display:inline-block}code{overflow-wrap:anywhere}pre,code{tab-size:2;font-variant-ligatures:none;font-variant-numeric:tabular-nums slashed-zero}pre{font-family:var(--t-monospace-font-family,ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono"),monospace;font-size:calc(var(--t-code-block-font-size,1.4rem)*var(--t-body-scale,1));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);white-space:pre;max-inline-size:100%;overflow-x:auto}pre code{padding:var(--t-code-block-padding,1.2rem 2rem);display:inline-block}:where(h1,.display-large){--t-heading-resolved-min:var(--t-display-large-min,calc(var(--t-heading-font-size-min)*var(--t-heading-scale,1)*var(--t-display-large)));--t-heading-resolved-max:var(--t-display-large-max,calc(var(--t-heading-font-size-max)*var(--t-heading-scale,1)*var(--t-display-large)));font-size:clamp(var(--t-heading-resolved-min),var(--t-heading-resolved-min) + (var(--t-heading-resolved-max) - var(--t-heading-resolved-min))*(var(--t-fluid-vw) - var(--t-scale-min-w))/(var(--t-scale-max-w) - var(--t-scale-min-w)),var(--t-heading-resolved-max));line-height:var(--t-line-height-heading,1.3);max-inline-size:var(--t-heading-measure,50ch);text-wrap:balance;margin-top:1.25lh;margin-bottom:.5lh}:where(h1,.display-large):last-of-type:not(:only-of-type){margin-block-end:0}:where(h2,.headline-large){--t-heading-resolved-min:var(--t-headline-large-min,calc(var(--t-heading-font-size-min)*var(--t-heading-scale,1)*var(--t-headline-large)));--t-heading-resolved-max:var(--t-headline-large-max,calc(var(--t-heading-font-size-max)*var(--t-heading-scale,1)*var(--t-headline-large)));font-size:clamp(var(--t-heading-resolved-min),var(--t-heading-resolved-min) + (var(--t-heading-resolved-max) - var(--t-heading-resolved-min))*(var(--t-fluid-vw) - var(--t-scale-min-w))/(var(--t-scale-max-w) - var(--t-scale-min-w)),var(--t-heading-resolved-max));line-height:var(--t-line-height-heading,1.3);max-inline-size:var(--t-heading-measure,50ch);text-wrap:balance;margin-top:1.25lh;margin-bottom:.5lh}:where(h2,.headline-large):last-of-type:not(:only-of-type){margin-block-end:0}:where(h3,.headline-medium){--t-heading-resolved-min:var(--t-headline-medium-min,calc(var(--t-heading-font-size-min)*var(--t-heading-scale,1)*var(--t-headline-medium)));--t-heading-resolved-max:var(--t-headline-medium-max,calc(var(--t-heading-font-size-max)*var(--t-heading-scale,1)*var(--t-headline-medium)));font-size:clamp(var(--t-heading-resolved-min),var(--t-heading-resolved-min) + (var(--t-heading-resolved-max) - var(--t-heading-resolved-min))*(var(--t-fluid-vw) - var(--t-scale-min-w))/(var(--t-scale-max-w) - var(--t-scale-min-w)),var(--t-heading-resolved-max));line-height:var(--t-line-height-heading,1.3);max-inline-size:var(--t-heading-measure,50ch);text-wrap:balance;margin-top:1.25lh;margin-bottom:.5lh}:where(h3,.headline-medium):last-of-type:not(:only-of-type){margin-block-end:0}:where(h4,.headline-small){--t-heading-resolved-min:var(--t-headline-small-min,calc(var(--t-heading-font-size-min)*var(--t-heading-scale,1)*var(--t-headline-small)));--t-heading-resolved-max:var(--t-headline-small-max,calc(var(--t-heading-font-size-max)*var(--t-heading-scale,1)*var(--t-headline-small)));font-size:clamp(var(--t-heading-resolved-min),var(--t-heading-resolved-min) + (var(--t-heading-resolved-max) - var(--t-heading-resolved-min))*(var(--t-fluid-vw) - var(--t-scale-min-w))/(var(--t-scale-max-w) - var(--t-scale-min-w)),var(--t-heading-resolved-max));line-height:var(--t-line-height-heading,1.3);max-inline-size:var(--t-heading-measure,50ch);text-wrap:balance;margin-top:1.25lh;margin-bottom:.5lh}:where(h4,.headline-small):last-of-type:not(:only-of-type){margin-block-end:0}:where(h5,.title-medium){--t-heading-resolved-min:var(--t-title-medium-min,calc(var(--t-heading-font-size-min)*var(--t-heading-scale,1)*var(--t-title-medium)));--t-heading-resolved-max:var(--t-title-medium-max,calc(var(--t-heading-font-size-max)*var(--t-heading-scale,1)*var(--t-title-medium)));font-size:clamp(var(--t-heading-resolved-min),var(--t-heading-resolved-min) + (var(--t-heading-resolved-max) - var(--t-heading-resolved-min))*(var(--t-fluid-vw) - var(--t-scale-min-w))/(var(--t-scale-max-w) - var(--t-scale-min-w)),var(--t-heading-resolved-max));line-height:var(--t-line-height-heading,1.3);max-inline-size:var(--t-heading-measure,50ch);text-wrap:balance;margin-top:1.25lh;margin-bottom:.5lh}:where(h5,.title-medium):last-of-type:not(:only-of-type){margin-block-end:0}:where(h6,.title-small){--t-heading-resolved-min:var(--t-title-small-min,calc(var(--t-heading-font-size-min)*var(--t-heading-scale,1)*var(--t-title-small)));--t-heading-resolved-max:var(--t-title-small-max,calc(var(--t-heading-font-size-max)*var(--t-heading-scale,1)*var(--t-title-small)));font-size:clamp(var(--t-heading-resolved-min),var(--t-heading-resolved-min) + (var(--t-heading-resolved-max) - var(--t-heading-resolved-min))*(var(--t-fluid-vw) - var(--t-scale-min-w))/(var(--t-scale-max-w) - var(--t-scale-min-w)),var(--t-heading-resolved-max));line-height:var(--t-line-height-heading,1.3);max-inline-size:var(--t-heading-measure,50ch);text-wrap:balance;margin-top:1.25lh;margin-bottom:.5lh}:where(h6,.title-small):last-of-type:not(:only-of-type){margin-block-end:0}@supports (hanging-punctuation:first){h1,h2,h3{hanging-punctuation:first allow-end}}:where(p,.body-medium){font-size:calc(var(--t-body-font-size-clamp)*var(--t-body-scale,1)*1);margin-bottom:.75lh;font-weight:400;line-height:1.45}:where(p,.body-medium):last-of-type:not(:only-of-type){margin-block-end:0}:where(p,.body-medium){-webkit-hyphens:auto;hyphens:auto}.label-large,.label-medium,.label-small{font-variant-numeric:tabular-nums slashed-zero}}@layer components,utilities;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "typographics",
3
- "version": "3.0.1",
3
+ "version": "3.2.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",
@@ -32,10 +32,11 @@
32
32
  "not dead"
33
33
  ],
34
34
  "devDependencies": {
35
+ "lightningcss": "1.30.2",
36
+ "sass": "1.97.0",
35
37
  "stylelint": "16.25.0",
36
38
  "stylelint-config-standard-scss": "16.0.0",
37
- "sass": "1.93.3",
38
- "vite": "7.1.12"
39
+ "vite": "7.3.0"
39
40
  },
40
41
  "keywords": [
41
42
  "typography",