typographics 0.0.4 → 0.0.5
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/.stylelintrc.json +6 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +10 -7
- package/src/index.scss +16 -10
package/dist/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
:root{--max-fs:1;--min-fs:.75;--max-vw:120;--min-vw:80;--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;
|
|
1
|
+
:root{--max-fs:1;--min-fs:.75;--max-vw:120;--min-vw:80;--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;-moz-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;font-size:10px}body{font-family:var(--font-family-default,"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{-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto}.display-large{font-size:5.7em;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;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;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;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;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;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;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;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;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,6aA8BA,wQAUA,8MAOA,oCAMA,sEAKE,qOAMA,sOAMA,qOAQA,sOAMA,uOAMA,sOAQA,mOAMA,qPAOA,iOAQA,oGAMA,wGAMA,uGAQA,uFAIA,oFAIA,sFAKF","sources":["index.css","src/index.scss"],"sourcesContent":[":root {\n --max-fs: 1;\n --min-fs: .75;\n --max-vw: 120;\n --min-vw: 80;\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 -moz-text-size-adjust: none;\n text-size-adjust: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n box-sizing: border-box;\n font-size: 10px;\n}\n\nbody {\n font-family: var(--font-family-default, \"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 -webkit-text-decoration-skip-ink: auto;\n text-decoration-skip-ink: auto;\n}\n\n.display-large {\n font-size: 5.7em;\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 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 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 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 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 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 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 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 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/*# sourceMappingURL=index.css.map */\n",":root {\r\n --max-fs: 1;\r\n --min-fs: .75;\r\n --max-vw: 120;\r\n --min-vw: 80;\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 --slope: calc((var(--max-fs) - var(--min-fs)) * (100vw - var(--min-vw-rem)) / (var(--max-vw) - var(--min-vw)));\r\n --font-size-clamp: clamp(var(--min-fs-rem), calc(var(--min-fs-rem) + var(--slope)), var(--max-fs-rem));\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 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 text-size-adjust: none;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: var(--font-family-default, \"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\r\n margin-left: -.08em;\r\n }\r\n\r\n &-medium {\r\n @include typography-heading(4.5em);\r\n\r\n margin-left: -.07em;\r\n }\r\n\r\n &-small {\r\n @include typography-heading(3.6em);\r\n\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\r\n margin-left: -.06em;\r\n }\r\n\r\n &-medium {\r\n @include typography-heading(2.8em);\r\n\r\n margin-left: -.06em;\r\n }\r\n\r\n &-small {\r\n @include typography-heading(2.4em);\r\n\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\r\n margin-left: -.04em;\r\n }\r\n\r\n &-medium {\r\n @include typography-heading(1.6rem);\r\n\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\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\r\n font-weight: 600;\r\n }\r\n\r\n &-medium {\r\n @include typography-paragraph(1.2rem, 1.6rem);\r\n\r\n font-weight: 600;\r\n }\r\n\r\n &-small {\r\n @include typography-paragraph(1.1rem, 1.6rem);\r\n\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,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "typographics",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.0.5",
|
|
4
|
+
"description": "",
|
|
5
5
|
"author": "ux-ui.pro",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": {
|
|
@@ -18,15 +18,18 @@
|
|
|
18
18
|
}
|
|
19
19
|
},
|
|
20
20
|
"scripts": {
|
|
21
|
-
"
|
|
22
|
-
"build": "parcel build",
|
|
23
|
-
"
|
|
21
|
+
"clean": "rm -rf dist .parcel-cache",
|
|
22
|
+
"build": "yarn clean && parcel build",
|
|
23
|
+
"lint:scss": "stylelint **/*.scss",
|
|
24
|
+
"lintfix": "yarn lint:scss --fix"
|
|
24
25
|
},
|
|
25
26
|
"browserslist": "> 0.5%, last 2 versions, not dead",
|
|
26
27
|
"devDependencies": {
|
|
27
|
-
"@parcel/transformer-sass": "
|
|
28
|
+
"@parcel/transformer-sass": "2.12.0",
|
|
28
29
|
"parcel": "^2.12.0",
|
|
29
|
-
"
|
|
30
|
+
"stylelint": "^16.6.1",
|
|
31
|
+
"stylelint-config-standard-scss": "^13.1.0",
|
|
32
|
+
"stylelint-selector-bem-pattern": "^4.0.0"
|
|
30
33
|
},
|
|
31
34
|
"keywords": []
|
|
32
35
|
}
|
package/src/index.scss
CHANGED
|
@@ -3,22 +3,17 @@
|
|
|
3
3
|
--min-fs: .75;
|
|
4
4
|
--max-vw: 120;
|
|
5
5
|
--min-vw: 80;
|
|
6
|
-
|
|
7
6
|
--min-fs-rem: calc(var(--min-fs) * 1rem);
|
|
8
7
|
--max-fs-rem: calc(var(--max-fs) * 1rem);
|
|
9
8
|
--min-vw-rem: calc(var(--min-vw) * 1rem);
|
|
10
|
-
|
|
11
9
|
--slope: calc((var(--max-fs) - var(--min-fs)) * (100vw - var(--min-vw-rem)) / (var(--max-vw) - var(--min-vw)));
|
|
12
|
-
|
|
13
10
|
--font-size-clamp: clamp(var(--min-fs-rem), calc(var(--min-fs-rem) + var(--slope)), var(--max-fs-rem));
|
|
14
|
-
|
|
15
11
|
--default-line-height: 1.5;
|
|
16
12
|
--heading-line-height: 1.3em;
|
|
17
13
|
}
|
|
18
14
|
|
|
19
15
|
@mixin typography-heading($heading-font-size) {
|
|
20
16
|
font-size: $heading-font-size;
|
|
21
|
-
font-weight: 400;
|
|
22
17
|
line-height: var(--heading-line-height);
|
|
23
18
|
margin-top: calc(var(--heading-line-height) / 2 * 2.5);
|
|
24
19
|
margin-bottom: calc(var(--heading-line-height) / 2 * 1);
|
|
@@ -36,11 +31,10 @@
|
|
|
36
31
|
html {
|
|
37
32
|
font-size: 10px;
|
|
38
33
|
font-feature-settings: "kern" 1, "liga" 0;
|
|
39
|
-
text-rendering:
|
|
40
|
-
|
|
34
|
+
text-rendering: optimizelegibility;
|
|
35
|
+
text-size-adjust: none;
|
|
41
36
|
-webkit-font-smoothing: antialiased;
|
|
42
37
|
-moz-osx-font-smoothing: grayscale;
|
|
43
|
-
font-kerning: auto;
|
|
44
38
|
box-sizing: border-box;
|
|
45
39
|
}
|
|
46
40
|
|
|
@@ -52,8 +46,8 @@ body {
|
|
|
52
46
|
}
|
|
53
47
|
|
|
54
48
|
*,
|
|
55
|
-
|
|
56
|
-
|
|
49
|
+
*::before,
|
|
50
|
+
*::after {
|
|
57
51
|
box-sizing: inherit;
|
|
58
52
|
}
|
|
59
53
|
|
|
@@ -64,16 +58,19 @@ a {
|
|
|
64
58
|
.display {
|
|
65
59
|
&-large {
|
|
66
60
|
@include typography-heading(5.7em);
|
|
61
|
+
|
|
67
62
|
margin-left: -.08em;
|
|
68
63
|
}
|
|
69
64
|
|
|
70
65
|
&-medium {
|
|
71
66
|
@include typography-heading(4.5em);
|
|
67
|
+
|
|
72
68
|
margin-left: -.07em;
|
|
73
69
|
}
|
|
74
70
|
|
|
75
71
|
&-small {
|
|
76
72
|
@include typography-heading(3.6em);
|
|
73
|
+
|
|
77
74
|
margin-left: -.07em;
|
|
78
75
|
}
|
|
79
76
|
}
|
|
@@ -81,16 +78,19 @@ a {
|
|
|
81
78
|
.headline {
|
|
82
79
|
&-large {
|
|
83
80
|
@include typography-heading(3.2em);
|
|
81
|
+
|
|
84
82
|
margin-left: -.06em;
|
|
85
83
|
}
|
|
86
84
|
|
|
87
85
|
&-medium {
|
|
88
86
|
@include typography-heading(2.8em);
|
|
87
|
+
|
|
89
88
|
margin-left: -.06em;
|
|
90
89
|
}
|
|
91
90
|
|
|
92
91
|
&-small {
|
|
93
92
|
@include typography-heading(2.4em);
|
|
93
|
+
|
|
94
94
|
margin-left: -.05em;
|
|
95
95
|
}
|
|
96
96
|
}
|
|
@@ -98,17 +98,20 @@ a {
|
|
|
98
98
|
.title {
|
|
99
99
|
&-large {
|
|
100
100
|
@include typography-heading(2.2em);
|
|
101
|
+
|
|
101
102
|
margin-left: -.04em;
|
|
102
103
|
}
|
|
103
104
|
|
|
104
105
|
&-medium {
|
|
105
106
|
@include typography-heading(1.6rem);
|
|
107
|
+
|
|
106
108
|
font-weight: 600;
|
|
107
109
|
margin-left: -.03em;
|
|
108
110
|
}
|
|
109
111
|
|
|
110
112
|
&-small {
|
|
111
113
|
@include typography-heading(1.4rem);
|
|
114
|
+
|
|
112
115
|
font-weight: 600;
|
|
113
116
|
}
|
|
114
117
|
}
|
|
@@ -116,16 +119,19 @@ a {
|
|
|
116
119
|
.label {
|
|
117
120
|
&-large {
|
|
118
121
|
@include typography-paragraph(1.4rem, 2rem);
|
|
122
|
+
|
|
119
123
|
font-weight: 600;
|
|
120
124
|
}
|
|
121
125
|
|
|
122
126
|
&-medium {
|
|
123
127
|
@include typography-paragraph(1.2rem, 1.6rem);
|
|
128
|
+
|
|
124
129
|
font-weight: 600;
|
|
125
130
|
}
|
|
126
131
|
|
|
127
132
|
&-small {
|
|
128
133
|
@include typography-paragraph(1.1rem, 1.6rem);
|
|
134
|
+
|
|
129
135
|
font-weight: 600;
|
|
130
136
|
}
|
|
131
137
|
}
|