typographics 0.0.2 → 0.0.3
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/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +4 -4
- package/src/index.scss +5 -6
package/dist/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
:root{--min-fs:.75;--max-fs:1;--min-vw:80;--max-vw:120;--min-fs-rem:calc(var(--min-fs)*1rem);--max-fs-rem:calc(var(--max-fs)*1rem);--min-vw-rem:calc(var(--min-vw)*1rem);--slope:calc((var(--max-fs) - var(--min-fs))*(100vw - var(--min-vw-rem))/(var(--max-vw) - var(--min-vw)));--font-size-clamp:clamp(var(--min-fs-rem),calc(var(--min-fs-rem) + var(--slope)),var(--max-fs-rem));--
|
|
1
|
+
:root{--min-fs:.75;--max-fs:1;--min-vw:80;--max-vw:120;--min-fs-rem:calc(var(--min-fs)*1rem);--max-fs-rem:calc(var(--max-fs)*1rem);--min-vw-rem:calc(var(--min-vw)*1rem);--slope:calc((var(--max-fs) - var(--min-fs))*(100vw - var(--min-vw-rem))/(var(--max-vw) - var(--min-vw)));--font-size-clamp:clamp(var(--min-fs-rem),calc(var(--min-fs-rem) + var(--slope)),var(--max-fs-rem));--default-line-height:1.5;--heading-line-height:1.3em}html{font-feature-settings:"kern" 1,"liga" 0;text-rendering:optimizelegibility;-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:auto;box-sizing:border-box;font-size:10px}body{font-family:var(--font-family-default,"Noto Sans Display",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-size:var(--font-size-clamp);line-height:var(--default-line-height);font-weight:400}*,:before,:after{box-sizing:inherit}a{text-decoration-skip-ink:auto}.display-large{font-size:5.7em;font-weight:400;line-height:var(--heading-line-height);margin-top:calc(var(--heading-line-height)/2*2.5);margin-bottom:calc(var(--heading-line-height)/2*1);text-wrap:balance;max-inline-size:50ch;margin-left:-.08em}.display-medium{font-size:4.5em;font-weight:400;line-height:var(--heading-line-height);margin-top:calc(var(--heading-line-height)/2*2.5);margin-bottom:calc(var(--heading-line-height)/2*1);text-wrap:balance;max-inline-size:50ch;margin-left:-.07em}.display-small{font-size:3.6em;font-weight:400;line-height:var(--heading-line-height);margin-top:calc(var(--heading-line-height)/2*2.5);margin-bottom:calc(var(--heading-line-height)/2*1);text-wrap:balance;max-inline-size:50ch;margin-left:-.07em}.headline-large{font-size:3.2em;font-weight:400;line-height:var(--heading-line-height);margin-top:calc(var(--heading-line-height)/2*2.5);margin-bottom:calc(var(--heading-line-height)/2*1);text-wrap:balance;max-inline-size:50ch;margin-left:-.06em}.headline-medium{font-size:2.8em;font-weight:400;line-height:var(--heading-line-height);margin-top:calc(var(--heading-line-height)/2*2.5);margin-bottom:calc(var(--heading-line-height)/2*1);text-wrap:balance;max-inline-size:50ch;margin-left:-.06em}.headline-small{font-size:2.4em;font-weight:400;line-height:var(--heading-line-height);margin-top:calc(var(--heading-line-height)/2*2.5);margin-bottom:calc(var(--heading-line-height)/2*1);text-wrap:balance;max-inline-size:50ch;margin-left:-.05em}.title-large{font-size:2.2em;font-weight:400;line-height:var(--heading-line-height);margin-top:calc(var(--heading-line-height)/2*2.5);margin-bottom:calc(var(--heading-line-height)/2*1);text-wrap:balance;max-inline-size:50ch;margin-left:-.04em}.title-medium{font-size:1.6rem;font-weight:400;line-height:var(--heading-line-height);margin-top:calc(var(--heading-line-height)/2*2.5);margin-bottom:calc(var(--heading-line-height)/2*1);text-wrap:balance;max-inline-size:50ch;margin-left:-.03em;font-weight:600}.title-small{font-size:1.4rem;font-weight:400;line-height:var(--heading-line-height);margin-top:calc(var(--heading-line-height)/2*2.5);margin-bottom:calc(var(--heading-line-height)/2*1);text-wrap:balance;max-inline-size:50ch;font-weight:600}.label-large{text-wrap:balance;margin-bottom:1rem;font-size:1.4rem;font-weight:600;line-height:2rem}.label-medium{text-wrap:balance;margin-bottom:.8rem;font-size:1.2rem;font-weight:600;line-height:1.6rem}.label-small{text-wrap:balance;margin-bottom:.8rem;font-size:1.1rem;font-weight:600;line-height:1.6rem}.body-large{text-wrap:balance;margin-bottom:1.2rem;font-size:1.6rem;line-height:2.4rem}.body-medium{text-wrap:balance;margin-bottom:1rem;font-size:1.4rem;line-height:2rem}.body-small{text-wrap:balance;margin-bottom:.8rem;font-size:1.2rem;line-height:1.6rem}ul,ol{padding-left:0;font-size:1.4rem;line-height:2rem;list-style-position:outside}
|
|
2
2
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACAA,
|
|
1
|
+
{"mappings":"ACAA,6aAmCA,yOAWA,6OAOA,oCAMA,gCAKE,qPAKA,sPAKA,qPAOA,sPAKA,uPAKA,sPAOA,mPAKA,qQAMA,iPAOA,oGAKA,wGAKA,uGAOA,uFAIA,oFAIA,sFAKF","sources":["index.css","src/index.scss"],"sourcesContent":[":root {\n --min-fs: .75;\n --max-fs: 1;\n --min-vw: 80;\n --max-vw: 120;\n --min-fs-rem: calc(var(--min-fs) * 1rem);\n --max-fs-rem: calc(var(--max-fs) * 1rem);\n --min-vw-rem: calc(var(--min-vw) * 1rem);\n --slope: calc((var(--max-fs) - var(--min-fs)) * (100vw - var(--min-vw-rem)) / (var(--max-vw) - var(--min-vw)));\n --font-size-clamp: clamp(var(--min-fs-rem), calc(var(--min-fs-rem) + var(--slope)), var(--max-fs-rem));\n --default-line-height: 1.5;\n --heading-line-height: 1.3em;\n}\n\nhtml {\n font-feature-settings: \"kern\" 1, \"liga\" 0;\n text-rendering: optimizelegibility;\n -webkit-text-size-adjust: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-kerning: auto;\n box-sizing: border-box;\n font-size: 10px;\n}\n\nbody {\n font-family: var(--font-family-default, \"Noto Sans Display\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-size: var(--font-size-clamp);\n line-height: var(--default-line-height);\n font-weight: 400;\n}\n\n*, :before, :after {\n box-sizing: inherit;\n}\n\na {\n text-decoration-skip-ink: auto;\n}\n\n.display-large {\n font-size: 5.7em;\n font-weight: 400;\n line-height: var(--heading-line-height);\n margin-top: calc(var(--heading-line-height) / 2 * 2.5);\n margin-bottom: calc(var(--heading-line-height) / 2 * 1);\n text-wrap: balance;\n max-inline-size: 50ch;\n margin-left: -.08em;\n}\n\n.display-medium {\n font-size: 4.5em;\n font-weight: 400;\n line-height: var(--heading-line-height);\n margin-top: calc(var(--heading-line-height) / 2 * 2.5);\n margin-bottom: calc(var(--heading-line-height) / 2 * 1);\n text-wrap: balance;\n max-inline-size: 50ch;\n margin-left: -.07em;\n}\n\n.display-small {\n font-size: 3.6em;\n font-weight: 400;\n line-height: var(--heading-line-height);\n margin-top: calc(var(--heading-line-height) / 2 * 2.5);\n margin-bottom: calc(var(--heading-line-height) / 2 * 1);\n text-wrap: balance;\n max-inline-size: 50ch;\n margin-left: -.07em;\n}\n\n.headline-large {\n font-size: 3.2em;\n font-weight: 400;\n line-height: var(--heading-line-height);\n margin-top: calc(var(--heading-line-height) / 2 * 2.5);\n margin-bottom: calc(var(--heading-line-height) / 2 * 1);\n text-wrap: balance;\n max-inline-size: 50ch;\n margin-left: -.06em;\n}\n\n.headline-medium {\n font-size: 2.8em;\n font-weight: 400;\n line-height: var(--heading-line-height);\n margin-top: calc(var(--heading-line-height) / 2 * 2.5);\n margin-bottom: calc(var(--heading-line-height) / 2 * 1);\n text-wrap: balance;\n max-inline-size: 50ch;\n margin-left: -.06em;\n}\n\n.headline-small {\n font-size: 2.4em;\n font-weight: 400;\n line-height: var(--heading-line-height);\n margin-top: calc(var(--heading-line-height) / 2 * 2.5);\n margin-bottom: calc(var(--heading-line-height) / 2 * 1);\n text-wrap: balance;\n max-inline-size: 50ch;\n margin-left: -.05em;\n}\n\n.title-large {\n font-size: 2.2em;\n font-weight: 400;\n line-height: var(--heading-line-height);\n margin-top: calc(var(--heading-line-height) / 2 * 2.5);\n margin-bottom: calc(var(--heading-line-height) / 2 * 1);\n text-wrap: balance;\n max-inline-size: 50ch;\n margin-left: -.04em;\n}\n\n.title-medium {\n font-size: 1.6rem;\n font-weight: 400;\n line-height: var(--heading-line-height);\n margin-top: calc(var(--heading-line-height) / 2 * 2.5);\n margin-bottom: calc(var(--heading-line-height) / 2 * 1);\n text-wrap: balance;\n max-inline-size: 50ch;\n margin-left: -.03em;\n font-weight: 600;\n}\n\n.title-small {\n font-size: 1.4rem;\n font-weight: 400;\n line-height: var(--heading-line-height);\n margin-top: calc(var(--heading-line-height) / 2 * 2.5);\n margin-bottom: calc(var(--heading-line-height) / 2 * 1);\n text-wrap: balance;\n max-inline-size: 50ch;\n font-weight: 600;\n}\n\n.label-large {\n text-wrap: balance;\n margin-bottom: 1rem;\n font-size: 1.4rem;\n font-weight: 600;\n line-height: 2rem;\n}\n\n.label-medium {\n text-wrap: balance;\n margin-bottom: .8rem;\n font-size: 1.2rem;\n font-weight: 600;\n line-height: 1.6rem;\n}\n\n.label-small {\n text-wrap: balance;\n margin-bottom: .8rem;\n font-size: 1.1rem;\n font-weight: 600;\n line-height: 1.6rem;\n}\n\n.body-large {\n text-wrap: balance;\n margin-bottom: 1.2rem;\n font-size: 1.6rem;\n line-height: 2.4rem;\n}\n\n.body-medium {\n text-wrap: balance;\n margin-bottom: 1rem;\n font-size: 1.4rem;\n line-height: 2rem;\n}\n\n.body-small {\n text-wrap: balance;\n margin-bottom: .8rem;\n font-size: 1.2rem;\n line-height: 1.6rem;\n}\n\nul, ol {\n padding-left: 0;\n font-size: 1.4rem;\n line-height: 2rem;\n list-style-position: outside;\n}\n\n/*# sourceMappingURL=index.css.map */\n",":root {\r\n --min-fs: .75;\r\n --max-fs: 1;\r\n --min-vw: 80;\r\n --max-vw: 120;\r\n\r\n --min-fs-rem: calc(var(--min-fs) * 1rem);\r\n --max-fs-rem: calc(var(--max-fs) * 1rem);\r\n --min-vw-rem: calc(var(--min-vw) * 1rem);\r\n\r\n --slope: calc((var(--max-fs) - var(--min-fs)) * (100vw - var(--min-vw-rem)) / (var(--max-vw) - var(--min-vw)));\r\n\r\n --font-size-clamp: clamp(var(--min-fs-rem), calc(var(--min-fs-rem) + var(--slope)), var(--max-fs-rem));\r\n\r\n --default-line-height: 1.5;\r\n --heading-line-height: 1.3em;\r\n}\r\n\r\n@mixin typography-heading($heading-font-size) {\r\n font-size: $heading-font-size;\r\n font-weight: 400;\r\n line-height: var(--heading-line-height);\r\n margin-top: calc(var(--heading-line-height) / 2 * 2.5);\r\n margin-bottom: calc(var(--heading-line-height) / 2 * 1);\r\n max-inline-size: 50ch;\r\n text-wrap: balance;\r\n}\r\n\r\n@mixin typography-paragraph($paragraph-font-size, $paragraph-line-height) {\r\n font-size: $paragraph-font-size;\r\n line-height: $paragraph-line-height;\r\n margin-bottom: calc(#{$paragraph-line-height} / 2);\r\n text-wrap: balance;\r\n}\r\n\r\nhtml {\r\n font-size: 10px;\r\n font-feature-settings: \"kern\" 1, \"liga\" 0;\r\n text-rendering: optimizeLegibility;\r\n -webkit-text-size-adjust: none;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n font-kerning: auto;\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: var(--font-family-default, \"Noto Sans Display\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\r\n font-size: var(--font-size-clamp);\r\n line-height: var(--default-line-height);\r\n font-weight: 400;\r\n}\r\n\r\n*,\r\n*:before,\r\n*:after {\r\n box-sizing: inherit;\r\n}\r\n\r\na {\r\n text-decoration-skip-ink: auto;\r\n}\r\n\r\n.display {\r\n &-large {\r\n @include typography-heading(5.7em);\r\n margin-left: -.08em;\r\n }\r\n\r\n &-medium {\r\n @include typography-heading(4.5em);\r\n margin-left: -.07em;\r\n }\r\n\r\n &-small {\r\n @include typography-heading(3.6em);\r\n margin-left: -.07em;\r\n }\r\n}\r\n\r\n.headline {\r\n &-large {\r\n @include typography-heading(3.2em);\r\n margin-left: -.06em;\r\n }\r\n\r\n &-medium {\r\n @include typography-heading(2.8em);\r\n margin-left: -.06em;\r\n }\r\n\r\n &-small {\r\n @include typography-heading(2.4em);\r\n margin-left: -.05em;\r\n }\r\n}\r\n\r\n.title {\r\n &-large {\r\n @include typography-heading(2.2em);\r\n margin-left: -.04em;\r\n }\r\n\r\n &-medium {\r\n @include typography-heading(1.6rem);\r\n font-weight: 600;\r\n margin-left: -.03em;\r\n }\r\n\r\n &-small {\r\n @include typography-heading(1.4rem);\r\n font-weight: 600;\r\n }\r\n}\r\n\r\n.label {\r\n &-large {\r\n @include typography-paragraph(1.4rem, 2rem);\r\n font-weight: 600;\r\n }\r\n\r\n &-medium {\r\n @include typography-paragraph(1.2rem, 1.6rem);\r\n font-weight: 600;\r\n }\r\n\r\n &-small {\r\n @include typography-paragraph(1.1rem, 1.6rem);\r\n font-weight: 600;\r\n }\r\n}\r\n\r\n.body {\r\n &-large {\r\n @include typography-paragraph(1.6rem, 2.4rem);\r\n }\r\n\r\n &-medium {\r\n @include typography-paragraph(1.4rem, 2rem);\r\n }\r\n\r\n &-small {\r\n @include typography-paragraph(1.2rem, 1.6rem);\r\n }\r\n}\r\n\r\nul,\r\nol {\r\n padding-left: 0;\r\n list-style-position: outside;\r\n font-size: 1.4rem;\r\n line-height: 2rem;\r\n}\r\n"],"names":[],"version":3,"file":"index.css.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "typographics",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "A starting point for good typography on the web",
|
|
5
5
|
"author": "ux-ui.pro",
|
|
6
6
|
"license": "MIT",
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
"clean": "rm -rf dist .parcel-cache"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@parcel/transformer-sass": "~2.
|
|
27
|
-
"parcel": "~2.
|
|
28
|
-
"sass": "^1.
|
|
26
|
+
"@parcel/transformer-sass": "~2.10.3",
|
|
27
|
+
"parcel": "~2.10.3",
|
|
28
|
+
"sass": "^1.69.5"
|
|
29
29
|
},
|
|
30
30
|
"keywords": []
|
|
31
31
|
}
|
package/src/index.scss
CHANGED
|
@@ -11,8 +11,6 @@
|
|
|
11
11
|
--slope: calc((var(--max-fs) - var(--min-fs)) * (100vw - var(--min-vw-rem)) / (var(--max-vw) - var(--min-vw)));
|
|
12
12
|
|
|
13
13
|
--font-size-clamp: clamp(var(--min-fs-rem), calc(var(--min-fs-rem) + var(--slope)), var(--max-fs-rem));
|
|
14
|
-
--font-family-default: "Noto Sans Display", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
15
|
-
--font-family-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
|
16
14
|
|
|
17
15
|
--default-line-height: 1.5;
|
|
18
16
|
--heading-line-height: 1.3em;
|
|
@@ -20,18 +18,19 @@
|
|
|
20
18
|
|
|
21
19
|
@mixin typography-heading($heading-font-size) {
|
|
22
20
|
font-size: $heading-font-size;
|
|
21
|
+
font-weight: 400;
|
|
23
22
|
line-height: var(--heading-line-height);
|
|
24
23
|
margin-top: calc(var(--heading-line-height) / 2 * 2.5);
|
|
25
24
|
margin-bottom: calc(var(--heading-line-height) / 2 * 1);
|
|
26
|
-
max-
|
|
27
|
-
|
|
25
|
+
max-inline-size: 50ch;
|
|
26
|
+
text-wrap: balance;
|
|
28
27
|
}
|
|
29
28
|
|
|
30
29
|
@mixin typography-paragraph($paragraph-font-size, $paragraph-line-height) {
|
|
31
30
|
font-size: $paragraph-font-size;
|
|
32
31
|
line-height: $paragraph-line-height;
|
|
33
32
|
margin-bottom: calc(#{$paragraph-line-height} / 2);
|
|
34
|
-
|
|
33
|
+
text-wrap: balance;
|
|
35
34
|
}
|
|
36
35
|
|
|
37
36
|
html {
|
|
@@ -46,7 +45,7 @@ html {
|
|
|
46
45
|
}
|
|
47
46
|
|
|
48
47
|
body {
|
|
49
|
-
font-family: var(--font-family-default);
|
|
48
|
+
font-family: var(--font-family-default, "Noto Sans Display", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
|
50
49
|
font-size: var(--font-size-clamp);
|
|
51
50
|
line-height: var(--default-line-height);
|
|
52
51
|
font-weight: 400;
|