typographics 3.1.0 → 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 +24 -0
  2. package/dist/index.css +1 -1
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -77,6 +77,30 @@ Local scale:
77
77
  .hero { --t-heading-scale: 0.9; }
78
78
  ```
79
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
+
80
104
  ### Spacing
81
105
 
82
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{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-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:#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-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 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{font-size:calc(var(--t-heading-font-size-clamp)*var(--t-heading-scale,1)*var(--t-display-large));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{font-size:calc(var(--t-heading-font-size-clamp)*var(--t-heading-scale,1)*var(--t-display-medium));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{font-size:calc(var(--t-heading-font-size-clamp)*var(--t-heading-scale,1)*var(--t-display-small));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{font-size:calc(var(--t-heading-font-size-clamp)*var(--t-heading-scale,1)*var(--t-headline-large));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{font-size:calc(var(--t-heading-font-size-clamp)*var(--t-heading-scale,1)*var(--t-headline-medium));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{font-size:calc(var(--t-heading-font-size-clamp)*var(--t-heading-scale,1)*var(--t-headline-small));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{font-size:calc(var(--t-heading-font-size-clamp)*var(--t-heading-scale,1)*var(--t-title-large));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{font-size:calc(var(--t-heading-font-size-clamp)*var(--t-heading-scale,1)*var(--t-title-medium));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{font-size:calc(var(--t-heading-font-size-clamp)*var(--t-heading-scale,1)*var(--t-title-small));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){font-size:calc(var(--t-heading-font-size-clamp)*var(--t-heading-scale,1)*var(--t-display-large));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){font-size:calc(var(--t-heading-font-size-clamp)*var(--t-heading-scale,1)*var(--t-headline-large));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){font-size:calc(var(--t-heading-font-size-clamp)*var(--t-heading-scale,1)*var(--t-headline-medium));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){font-size:calc(var(--t-heading-font-size-clamp)*var(--t-heading-scale,1)*var(--t-headline-small));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){font-size:calc(var(--t-heading-font-size-clamp)*var(--t-heading-scale,1)*var(--t-title-medium));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){font-size:calc(var(--t-heading-font-size-clamp)*var(--t-heading-scale,1)*var(--t-title-small));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;
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.1.0",
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",