@new-ui/typography 0.1.9 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -3
- package/dist/index.css +260 -1
- package/dist/index.css.map +1 -1
- package/package.json +7 -7
- package/src/_components.scss +4 -4
- package/src/_fonts.scss +7 -15
- package/src/_utilities.scss +8 -20
- package/src/_variables.scss +1 -13
- package/src/index.scss +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
# New UI Typography
|
|
2
2
|
|
|
3
3
|
## Install
|
|
4
|
+
|
|
4
5
|
Install New UI Typography from your terminal via npm.
|
|
5
6
|
|
|
6
7
|
```
|
|
@@ -11,16 +12,19 @@ To get started quickly, you can use the CDN files.
|
|
|
11
12
|
|
|
12
13
|
```html
|
|
13
14
|
<!-- Place this at the html head -->
|
|
14
|
-
<link
|
|
15
|
+
<link
|
|
16
|
+
rel="stylesheet"
|
|
17
|
+
href="https://cdn.jsdelivr.net/npm/@new-ui/typography@latest/dist/index.css"
|
|
18
|
+
/>
|
|
15
19
|
```
|
|
16
20
|
|
|
17
21
|
## Usage
|
|
18
22
|
|
|
19
23
|
```scss
|
|
20
24
|
// Place this at the top of your SCSS/CSS file
|
|
21
|
-
@use
|
|
25
|
+
@use '@new-ui/typography';
|
|
22
26
|
```
|
|
23
27
|
|
|
24
28
|
## Guides
|
|
25
|
-
- [Read our typography guide](https://new-ui.com/docs/foundations/typography)
|
|
26
29
|
|
|
30
|
+
- [Read our typography guide](https://new-ui.com/docs/foundations/typography)
|
package/dist/index.css
CHANGED
|
@@ -1,2 +1,261 @@
|
|
|
1
|
-
:root
|
|
1
|
+
:root {
|
|
2
|
+
--system-ui: system-ui, sans-serif;
|
|
3
|
+
--old-style:
|
|
4
|
+
'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', p052, serif;
|
|
5
|
+
--monospace-code:
|
|
6
|
+
ui-monospace, 'Cascadia Code', 'Source Code Pro', menlo, consolas, monospace;
|
|
7
|
+
--handwritten:
|
|
8
|
+
'Segoe Print', 'Bradley Hand', chilanka, tscu_comic, casual, cursive;
|
|
9
|
+
--mobile-heading-01: 2rem;
|
|
10
|
+
--mobile-heading-02: 1.75rem;
|
|
11
|
+
--mobile-heading-03: 1.5rem;
|
|
12
|
+
--mobile-heading-04: 1.25rem;
|
|
13
|
+
--mobile-heading-05: 1.125rem;
|
|
14
|
+
--mobile-heading-06: 1rem;
|
|
15
|
+
--mobile-body-xl: 1rem;
|
|
16
|
+
--mobile-body: 0.875rem;
|
|
17
|
+
--mobile-body-sm: 0.75rem;
|
|
18
|
+
--mobile-caption: 0.75rem;
|
|
19
|
+
--mobile-helper-text: 0.75rem;
|
|
20
|
+
--mobile-code: 0.875rem;
|
|
21
|
+
--lh-mobile-heading-01: 2.5rem;
|
|
22
|
+
--lh-mobile-heading-02: 2.25rem;
|
|
23
|
+
--lh-mobile-heading-03: 1.875rem;
|
|
24
|
+
--lh-mobile-heading-04: 1.75rem;
|
|
25
|
+
--lh-mobile-heading-05: 1.625rem;
|
|
26
|
+
--lh-mobile-heading-06: 1.5rem;
|
|
27
|
+
--lh-mobile-body-xl: 1.5rem;
|
|
28
|
+
--lh-mobile-body: 1.25rem;
|
|
29
|
+
--lh-mobile-body-sm: 1rem;
|
|
30
|
+
--lh-mobile-caption: 1rem;
|
|
31
|
+
--lh-mobile-helper-text: 1rem;
|
|
32
|
+
--lh-mobile-code: 1.25rem;
|
|
33
|
+
--mobile-tracking-heading-01: -0.05rem;
|
|
34
|
+
--mobile-tracking-heading-02: -0.025rem;
|
|
35
|
+
--mobile-tracking-heading-03: -0.025rem;
|
|
36
|
+
--desktop-heading-01: 3.375rem;
|
|
37
|
+
--desktop-heading-02: 2.625rem;
|
|
38
|
+
--desktop-heading-03: 2rem;
|
|
39
|
+
--desktop-heading-04: 1.75rem;
|
|
40
|
+
--desktop-heading-05: 1.25rem;
|
|
41
|
+
--desktop-heading-06: 1.125rem;
|
|
42
|
+
--desktop-body-xl: 1.125rem;
|
|
43
|
+
--desktop-body: 1rem;
|
|
44
|
+
--desktop-body-sm: 0.875rem;
|
|
45
|
+
--desktop-caption: 0.75rem;
|
|
46
|
+
--desktop-helper-text: 0.75rem;
|
|
47
|
+
--desktop-code: 0.875rem;
|
|
48
|
+
--lh-desktop-heading-01: 4rem;
|
|
49
|
+
--lh-desktop-heading-02: 3.125rem;
|
|
50
|
+
--lh-desktop-heading-03: 2.5rem;
|
|
51
|
+
--lh-desktop-heading-04: 2.25rem;
|
|
52
|
+
--lh-desktop-heading-05: 1.75rem;
|
|
53
|
+
--lh-desktop-heading-06: 1.625rem;
|
|
54
|
+
--lh-desktop-body-xl: 1.625rem;
|
|
55
|
+
--lh-desktop-body: 1.5rem;
|
|
56
|
+
--lh-desktop-body-sm: 1.25rem;
|
|
57
|
+
--lh-desktop-caption: 1rem;
|
|
58
|
+
--lh-desktop-helper-text: 1rem;
|
|
59
|
+
--lh-desktop-code: 1.25rem;
|
|
60
|
+
--desktop-tracking-heading-01: -0.075rem;
|
|
61
|
+
--desktop-tracking-heading-02: -0.05rem;
|
|
62
|
+
--desktop-tracking-heading-03: -0.025rem;
|
|
63
|
+
}
|
|
64
|
+
.nu-u-fw-bold {
|
|
65
|
+
font-weight: 700;
|
|
66
|
+
}
|
|
67
|
+
.nu-u-fw-semi-bold {
|
|
68
|
+
font-weight: 500;
|
|
69
|
+
}
|
|
70
|
+
.nu-u-fw-normal {
|
|
71
|
+
font-weight: 400;
|
|
72
|
+
}
|
|
73
|
+
.nu-u-text--uppercase {
|
|
74
|
+
text-transform: uppercase;
|
|
75
|
+
}
|
|
76
|
+
.nu-u-text--lowercase {
|
|
77
|
+
text-transform: lowercase;
|
|
78
|
+
}
|
|
79
|
+
.nu-u-text--capitalize {
|
|
80
|
+
text-transform: capitalize;
|
|
81
|
+
}
|
|
82
|
+
.nu-u-text--underline {
|
|
83
|
+
text-decoration: underline;
|
|
84
|
+
}
|
|
85
|
+
.nu-u-text--left {
|
|
86
|
+
text-align: left;
|
|
87
|
+
}
|
|
88
|
+
.nu-u-text--right {
|
|
89
|
+
text-align: right;
|
|
90
|
+
}
|
|
91
|
+
.nu-u-text--center {
|
|
92
|
+
text-align: center;
|
|
93
|
+
}
|
|
94
|
+
.nu-u-text--justify {
|
|
95
|
+
text-align: justify;
|
|
96
|
+
}
|
|
97
|
+
.nu-u-serif {
|
|
98
|
+
font-family:
|
|
99
|
+
Didot,
|
|
100
|
+
Bodoni MT,
|
|
101
|
+
Noto Serif Display,
|
|
102
|
+
URW Palladio L,
|
|
103
|
+
P052,
|
|
104
|
+
Sylfaen,
|
|
105
|
+
serif;
|
|
106
|
+
}
|
|
107
|
+
.nu-u-sans-serif {
|
|
108
|
+
font-family:
|
|
109
|
+
Inter,
|
|
110
|
+
Roboto,
|
|
111
|
+
Helvetica Neue,
|
|
112
|
+
Arial Nova,
|
|
113
|
+
Nimbus Sans,
|
|
114
|
+
Arial,
|
|
115
|
+
sans-serif;
|
|
116
|
+
}
|
|
117
|
+
.nu-u-code {
|
|
118
|
+
font-family:
|
|
119
|
+
ui-monospace,
|
|
120
|
+
Cascadia Code,
|
|
121
|
+
Source Code Pro,
|
|
122
|
+
Menlo,
|
|
123
|
+
Consolas,
|
|
124
|
+
DejaVu Sans Mono,
|
|
125
|
+
monospace;
|
|
126
|
+
}
|
|
127
|
+
.nu-c-h1 {
|
|
128
|
+
font-weight: 700;
|
|
129
|
+
font-size: var(--desktop-heading-01);
|
|
130
|
+
line-height: var(--lh-desktop-heading-01);
|
|
131
|
+
letter-spacing: var(--desktop-tracking-heading-01);
|
|
132
|
+
}
|
|
133
|
+
@media screen and (width<=37.5rem) {
|
|
134
|
+
.nu-c-h1 {
|
|
135
|
+
font-size: var(--mobile-heading-01);
|
|
136
|
+
line-height: var(--lh-mobile-heading-01);
|
|
137
|
+
letter-spacing: var(--mobile-tracking-heading-01);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
.nu-c-h2 {
|
|
141
|
+
font-weight: 700;
|
|
142
|
+
font-size: var(--desktop-heading-02);
|
|
143
|
+
line-height: var(--lh-desktop-heading-02);
|
|
144
|
+
letter-spacing: var(--desktop-tracking-heading-02);
|
|
145
|
+
}
|
|
146
|
+
@media screen and (width<=37.5rem) {
|
|
147
|
+
.nu-c-h2 {
|
|
148
|
+
font-size: var(--mobile-heading-02);
|
|
149
|
+
line-height: var(--lh-mobile-heading-02);
|
|
150
|
+
letter-spacing: var(--mobile-tracking-heading-02);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
.nu-c-h3 {
|
|
154
|
+
font-weight: 700;
|
|
155
|
+
font-size: var(--desktop-heading-03);
|
|
156
|
+
line-height: var(--lh-desktop-heading-03);
|
|
157
|
+
letter-spacing: var(--desktop-tracking-heading-03);
|
|
158
|
+
}
|
|
159
|
+
@media screen and (width<=37.5rem) {
|
|
160
|
+
.nu-c-h3 {
|
|
161
|
+
font-size: var(--mobile-heading-03);
|
|
162
|
+
line-height: var(--lh-mobile-heading-03);
|
|
163
|
+
letter-spacing: var(--mobile-tracking-heading-03);
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
.nu-c-h4 {
|
|
167
|
+
font-weight: 700;
|
|
168
|
+
font-size: var(--desktop-heading-04);
|
|
169
|
+
line-height: var(--lh-desktop-heading-04);
|
|
170
|
+
}
|
|
171
|
+
@media screen and (width<=37.5rem) {
|
|
172
|
+
.nu-c-h4 {
|
|
173
|
+
font-size: var(--mobile-heading-04);
|
|
174
|
+
line-height: var(--lh-mobile-heading-04);
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
.nu-c-h5 {
|
|
178
|
+
font-weight: 700;
|
|
179
|
+
font-size: var(--desktop-heading-05);
|
|
180
|
+
line-height: var(--lh-desktop-heading-05);
|
|
181
|
+
}
|
|
182
|
+
@media screen and (width<=37.5rem) {
|
|
183
|
+
.nu-c-h5 {
|
|
184
|
+
font-size: var(--mobile-heading-05);
|
|
185
|
+
line-height: var(--lh-mobile-heading-05);
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
.nu-c-h6 {
|
|
189
|
+
font-weight: 500;
|
|
190
|
+
font-size: var(--desktop-heading-06);
|
|
191
|
+
line-height: var(--lh-desktop-heading-06);
|
|
192
|
+
}
|
|
193
|
+
@media screen and (width<=37.5rem) {
|
|
194
|
+
.nu-c-h6 {
|
|
195
|
+
font-size: var(--mobile-heading-06);
|
|
196
|
+
line-height: var(--lh-mobile-heading-06);
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
.nu-c-fs-lead {
|
|
200
|
+
font-size: var(--desktop-body-xl);
|
|
201
|
+
line-height: var(--lh-desktop-body-xl);
|
|
202
|
+
}
|
|
203
|
+
@media screen and (width<=37.5rem) {
|
|
204
|
+
.nu-c-fs-lead {
|
|
205
|
+
font-size: var(--mobile-body-xl);
|
|
206
|
+
line-height: var(--lh-mobile-body-xl);
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
.nu-c-fs-normal {
|
|
210
|
+
font-size: var(--desktop-body);
|
|
211
|
+
line-height: var(--lh-desktop-body);
|
|
212
|
+
}
|
|
213
|
+
@media screen and (width<=37.5rem) {
|
|
214
|
+
.nu-c-fs-normal {
|
|
215
|
+
font-size: var(--mobile-body);
|
|
216
|
+
line-height: var(--lh-mobile-body);
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
.nu-c-fs-small {
|
|
220
|
+
font-size: var(--desktop-body-sm);
|
|
221
|
+
line-height: var(--lh-desktop-body-sm);
|
|
222
|
+
}
|
|
223
|
+
@media screen and (width<=37.5rem) {
|
|
224
|
+
.nu-c-fs-small {
|
|
225
|
+
font-size: var(--mobile-body-sm);
|
|
226
|
+
line-height: var(--lh-mobile-body-sm);
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
.nu-c-caption {
|
|
230
|
+
text-transform: uppercase;
|
|
231
|
+
font-weight: 500;
|
|
232
|
+
font-size: var(--desktop-caption);
|
|
233
|
+
line-height: var(--lh-desktop-caption);
|
|
234
|
+
}
|
|
235
|
+
@media screen and (width<=37.5rem) {
|
|
236
|
+
.nu-c-caption {
|
|
237
|
+
font-size: var(--mobile-caption);
|
|
238
|
+
line-height: var(--lh-mobile-caption);
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
.nu-c-helper-text {
|
|
242
|
+
font-size: var(--desktop-helper-text);
|
|
243
|
+
line-height: var(--lh-desktop-helper-text);
|
|
244
|
+
}
|
|
245
|
+
@media screen and (width<=37.5rem) {
|
|
246
|
+
.nu-c-helper-text {
|
|
247
|
+
font-size: var(--mobile-helper-text);
|
|
248
|
+
line-height: var(--lh-mobile-helper-text);
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
.nu-c-code {
|
|
252
|
+
font-size: var(--desktop-code);
|
|
253
|
+
line-height: var(--desktop-code);
|
|
254
|
+
}
|
|
255
|
+
@media screen and (width<=37.5rem) {
|
|
256
|
+
.nu-c-code {
|
|
257
|
+
font-size: var(--mobile-code);
|
|
258
|
+
line-height: var(--mobile-code);
|
|
259
|
+
}
|
|
260
|
+
}
|
|
2
261
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACAA,wwFCCA,8BAIA,mCAIA,gCAKA,+CAIA,+CAIA,iDAIA,gDAIA,iCAIA,mCAIA,qCAIA,uCAKA,6FAUA,iGAUA,4GChEA,wJAME,mCANF,sIAaA,wJAME,mCANF,sIAaA,wJAME,mCANF,sIAaA,sGAKE,mCALF,qFAWA,sGAKE,mCALF,qFAWA,sGAKE,mCALF,qFAWA,qFAIE,mCAJF,oFAUA,iFAIE,mCAJF,gFAUA,sFAIE,mCAJF,qFAUA,8HAME,mCANF,oFAYA,iGAIE,mCAJF,gGAUA,yEAIE,mCAJF","sources":["index.css","src/_fonts.scss","src/_utilities.scss","src/_components.scss"],"sourcesContent":[":root {\n --system-ui: system-ui, sans-serif;\n --transitional: Charter, \"Bitstream Charter\", \"Sitka Text\", Cambria, serif;\n --old-style: \"Iowan Old Style\", \"Palatino Linotype\", \"URW Palladio L\", P052, serif;\n --humanist: Seravek, \"Gill Sans Nova\", Ubuntu, Calibri, \"DejaVu Sans\", sans-serif;\n --geometric-humanist: Avenir, Montserrat, Corbel, \"URW Gothic\", sans-serif;\n --classical-humanist: Optima, Candara, \"Noto Sans\", sans-serif;\n --neo-grotesque: Inter, Roboto, \"Helvetica Neue\", \"Arial Nova\", \"Nimbus Sans\", Arial, sans-serif;\n --monospace-slab-serif: \"Nimbus Mono PS\", \"Courier New\", monospace;\n --monospace-code: ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;\n --industrial: Bahnschrift, \"DIN Alternate\", \"Franklin Gothic Medium\", \"Nimbus Sans Narrow\", sans-serif-condensed, sans-serif;\n --rounded-sans: ui-rounded, \"Hiragino Maru Gothic ProN\", Quicksand, Comfortaa, Manjari, \"Arial Rounded MT\", \"Arial Rounded MT Bold\", Calibri, sans-serif;\n --slab-serif: Rockwell, \"Rockwell Nova\", \"Roboto Slab\", \"DejaVu Serif\", \"Sitka Small\", serif;\n --antique: Superclarendon, \"Bookman Old Style\", \"URW Bookman\", \"URW Bookman L\", \"Georgia Pro\", Georgia, serif;\n --didone: Didot, \"Bodoni MT\", \"Noto Serif Display\", \"URW Palladio L\", P052, Sylfaen, serif;\n --handwritten: \"Segoe Print\", \"Bradley Hand\", Chilanka, TSCu_Comic, casual, cursive;\n --mobile-heading-01: 2rem;\n --mobile-heading-02: 1.75rem;\n --mobile-heading-03: 1.5rem;\n --mobile-heading-04: 1.25rem;\n --mobile-heading-05: 1.125rem;\n --mobile-heading-06: 1rem;\n --mobile-body-xl: 1rem;\n --mobile-body: .875rem;\n --mobile-body-sm: .75rem;\n --mobile-caption: .75rem;\n --mobile-helper-text: .75rem;\n --mobile-code: .875rem;\n --lh-mobile-heading-01: 2.5rem;\n --lh-mobile-heading-02: 2.25rem;\n --lh-mobile-heading-03: 1.875rem;\n --lh-mobile-heading-04: 1.75rem;\n --lh-mobile-heading-05: 1.625rem;\n --lh-mobile-heading-06: 1.5rem;\n --lh-mobile-body-xl: 1.5rem;\n --lh-mobile-body: 1.25rem;\n --lh-mobile-body-sm: 1rem;\n --lh-mobile-caption: 1rem;\n --lh-mobile-helper-text: 1rem;\n --lh-mobile-code: 1.25rem;\n --mobile-tracking-heading-01: -.05rem;\n --mobile-tracking-heading-02: -.025rem;\n --mobile-tracking-heading-03: -.025rem;\n --desktop-heading-01: 3.375rem;\n --desktop-heading-02: 2.625rem;\n --desktop-heading-03: 2rem;\n --desktop-heading-04: 1.75rem;\n --desktop-heading-05: 1.25rem;\n --desktop-heading-06: 1.125rem;\n --desktop-body-xl: 1.125rem;\n --desktop-body: 1rem;\n --desktop-body-sm: .875rem;\n --desktop-caption: .75rem;\n --desktop-helper-text: .75rem;\n --desktop-code: .875rem;\n --lh-desktop-heading-01: 4rem;\n --lh-desktop-heading-02: 3.125rem;\n --lh-desktop-heading-03: 2.5rem;\n --lh-desktop-heading-04: 2.25rem;\n --lh-desktop-heading-05: 1.75rem;\n --lh-desktop-heading-06: 1.625rem;\n --lh-desktop-body-xl: 1.625rem;\n --lh-desktop-body: 1.5rem;\n --lh-desktop-body-sm: 1.25rem;\n --lh-desktop-caption: 1rem;\n --lh-desktop-helper-text: 1rem;\n --lh-desktop-code: 1.25rem;\n --desktop-tracking-heading-01: -.075rem;\n --desktop-tracking-heading-02: -.05rem;\n --desktop-tracking-heading-03: -.025rem;\n}\n\n.nu-u-fw-bold {\n font-weight: 700;\n}\n\n.nu-u-fw-semi-bold {\n font-weight: 500;\n}\n\n.nu-u-fw-normal {\n font-weight: 400;\n}\n\n.nu-u-text--uppercase {\n text-transform: uppercase;\n}\n\n.nu-u-text--lowercase {\n text-transform: lowercase;\n}\n\n.nu-u-text--capitalize {\n text-transform: capitalize;\n}\n\n.nu-u-text--underline {\n text-decoration: underline;\n}\n\n.nu-u-text--left {\n text-align: left;\n}\n\n.nu-u-text--right {\n text-align: right;\n}\n\n.nu-u-text--center {\n text-align: center;\n}\n\n.nu-u-text--justify {\n text-align: justify;\n}\n\n.nu-u-serif {\n font-family: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;\n}\n\n.nu-u-sans-serif {\n font-family: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;\n}\n\n.nu-u-code {\n font-family: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;\n}\n\n.nu-c-h1 {\n font-weight: 700;\n font-size: var(--desktop-heading-01);\n line-height: var(--lh-desktop-heading-01);\n letter-spacing: var(--desktop-tracking-heading-01);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-h1 {\n font-size: var(--mobile-heading-01);\n line-height: var(--lh-mobile-heading-01);\n letter-spacing: var(--mobile-tracking-heading-01);\n }\n}\n\n.nu-c-h2 {\n font-weight: 700;\n font-size: var(--desktop-heading-02);\n line-height: var(--lh-desktop-heading-02);\n letter-spacing: var(--desktop-tracking-heading-02);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-h2 {\n font-size: var(--mobile-heading-02);\n line-height: var(--lh-mobile-heading-02);\n letter-spacing: var(--mobile-tracking-heading-02);\n }\n}\n\n.nu-c-h3 {\n font-weight: 700;\n font-size: var(--desktop-heading-03);\n line-height: var(--lh-desktop-heading-03);\n letter-spacing: var(--desktop-tracking-heading-03);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-h3 {\n font-size: var(--mobile-heading-03);\n line-height: var(--lh-mobile-heading-03);\n letter-spacing: var(--mobile-tracking-heading-03);\n }\n}\n\n.nu-c-h4 {\n font-weight: 700;\n font-size: var(--desktop-heading-04);\n line-height: var(--lh-desktop-heading-04);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-h4 {\n font-size: var(--mobile-heading-04);\n line-height: var(--lh-mobile-heading-04);\n }\n}\n\n.nu-c-h5 {\n font-weight: 700;\n font-size: var(--desktop-heading-05);\n line-height: var(--lh-desktop-heading-05);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-h5 {\n font-size: var(--mobile-heading-05);\n line-height: var(--lh-mobile-heading-05);\n }\n}\n\n.nu-c-h6 {\n font-weight: 500;\n font-size: var(--desktop-heading-06);\n line-height: var(--lh-desktop-heading-06);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-h6 {\n font-size: var(--mobile-heading-06);\n line-height: var(--lh-mobile-heading-06);\n }\n}\n\n.nu-c-fs-lead {\n font-size: var(--desktop-body-xl);\n line-height: var(--lh-desktop-body-xl);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-fs-lead {\n font-size: var(--mobile-body-xl);\n line-height: var(--lh-mobile-body-xl);\n }\n}\n\n.nu-c-fs-normal {\n font-size: var(--desktop-body);\n line-height: var(--lh-desktop-body);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-fs-normal {\n font-size: var(--mobile-body);\n line-height: var(--lh-mobile-body);\n }\n}\n\n.nu-c-fs-small {\n font-size: var(--desktop-body-sm);\n line-height: var(--lh-desktop-body-sm);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-fs-small {\n font-size: var(--mobile-body-sm);\n line-height: var(--lh-mobile-body-sm);\n }\n}\n\n.nu-c-caption {\n text-transform: uppercase;\n font-weight: 500;\n font-size: var(--desktop-caption);\n line-height: var(--lh-desktop-caption);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-caption {\n font-size: var(--mobile-caption);\n line-height: var(--lh-mobile-caption);\n }\n}\n\n.nu-c-helper-text {\n font-size: var(--desktop-helper-text);\n line-height: var(--lh-desktop-helper-text);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-helper-text {\n font-size: var(--mobile-helper-text);\n line-height: var(--lh-mobile-helper-text);\n }\n}\n\n.nu-c-code {\n font-size: var(--desktop-code);\n line-height: var(--desktop-code);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-code {\n font-size: var(--mobile-code);\n line-height: var(--mobile-code);\n }\n}\n/*# sourceMappingURL=index.css.map */\n",":root {\n /* System Font Stacks */\n --system-ui: system-ui, sans-serif;\n --transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;\n --old-style: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;\n --humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', sans-serif;\n --geometric-humanist: Avenir, Montserrat, Corbel, 'URW Gothic', sans-serif;\n --classical-humanist: Optima, Candara, 'Noto Sans', sans-serif;\n --neo-grotesque: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;\n --monospace-slab-serif: 'Nimbus Mono PS', 'Courier New', monospace;\n --monospace-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;\n --industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;\n --rounded-sans: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, sans-serif;\n --slab-serif: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;\n --antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;\n --didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;\n --handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;\n}","/* Font Weights */\n.nu-u-fw-bold {\n font-weight: 700;\n}\n\n.nu-u-fw-semi-bold {\n font-weight: 500;\n}\n\n.nu-u-fw-normal {\n font-weight: 400;\n}\n\n/* Utilities */\n.nu-u-text--uppercase {\n text-transform: uppercase;\n}\n\n.nu-u-text--lowercase {\n text-transform: lowercase;\n}\n\n.nu-u-text--capitalize {\n text-transform: capitalize;\n}\n\n.nu-u-text--underline {\n text-decoration: underline;\n}\n\n.nu-u-text--left {\n text-align: left;\n}\n\n.nu-u-text--right {\n text-align: right;\n}\n\n.nu-u-text--center {\n text-align: center;\n}\n\n.nu-u-text--justify {\n text-align: justify;\n}\n\n/* Font family */\n.nu-u-serif {\n font-family: Didot,\n 'Bodoni MT',\n 'Noto Serif Display',\n 'URW Palladio L',\n P052,\n Sylfaen,\n serif;\n}\n\n.nu-u-sans-serif {\n font-family: Inter,\n Roboto,\n 'Helvetica Neue',\n 'Arial Nova',\n 'Nimbus Sans',\n Arial,\n sans-serif;\n}\n\n.nu-u-code {\n font-family: ui-monospace,\n 'Cascadia Code',\n 'Source Code Pro',\n Menlo,\n Consolas,\n 'DejaVu Sans Mono',\n monospace;\n}","$mobile-breakpoint: 37.5rem;\n\n/* Components */\n.nu-c-h1 {\n font-weight: 700;\n font-size: var(--desktop-heading-01);\n line-height: var(--lh-desktop-heading-01);\n letter-spacing: var(--desktop-tracking-heading-01);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-01);\n line-height: var(--lh-mobile-heading-01);\n letter-spacing: var(--mobile-tracking-heading-01);\n }\n}\n\n.nu-c-h2 {\n font-weight: 700;\n font-size: var(--desktop-heading-02);\n line-height: var(--lh-desktop-heading-02);\n letter-spacing: var(--desktop-tracking-heading-02);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-02);\n line-height: var(--lh-mobile-heading-02);\n letter-spacing: var(--mobile-tracking-heading-02);\n }\n}\n\n.nu-c-h3 {\n font-weight: 700;\n font-size: var(--desktop-heading-03);\n line-height: var(--lh-desktop-heading-03);\n letter-spacing: var(--desktop-tracking-heading-03);\n \n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-03);\n line-height: var(--lh-mobile-heading-03);\n letter-spacing: var(--mobile-tracking-heading-03);\n }\n}\n\n.nu-c-h4 {\n font-weight: 700;\n font-size: var(--desktop-heading-04);\n line-height: var(--lh-desktop-heading-04);\n \n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-04);\n line-height: var(--lh-mobile-heading-04);\n }\n}\n\n.nu-c-h5 {\n font-weight: 700;\n font-size: var(--desktop-heading-05);\n line-height: var(--lh-desktop-heading-05);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-05);\n line-height: var(--lh-mobile-heading-05);\n }\n}\n\n.nu-c-h6 {\n font-weight: 500;\n font-size: var(--desktop-heading-06);\n line-height: var(--lh-desktop-heading-06);\n \n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-06);\n line-height: var(--lh-mobile-heading-06);\n }\n}\n\n.nu-c-fs-lead {\n font-size: var(--desktop-body-xl);\n line-height: var(--lh-desktop-body-xl);\n \n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-body-xl);\n line-height: var(--lh-mobile-body-xl);\n }\n}\n\n.nu-c-fs-normal {\n font-size: var(--desktop-body);\n line-height: var(--lh-desktop-body);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-body);\n line-height: var(--lh-mobile-body);\n }\n}\n\n.nu-c-fs-small {\n font-size: var(--desktop-body-sm);\n line-height: var(--lh-desktop-body-sm);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-body-sm);\n line-height: var(--lh-mobile-body-sm);\n }\n}\n\n.nu-c-caption {\n font-weight: 500;\n text-transform: uppercase;\n font-size: var(--desktop-caption);\n line-height: var(--lh-desktop-caption);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-caption);\n line-height: var(--lh-mobile-caption);\n }\n}\n\n.nu-c-helper-text {\n font-size: var(--desktop-helper-text);\n line-height: var(--lh-desktop-helper-text);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-helper-text);\n line-height: var(--lh-mobile-helper-text);\n }\n}\n\n.nu-c-code {\n font-size: var(--desktop-code);\n line-height: var(--desktop-code);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-code);\n line-height: var(--mobile-code);\n }\n}\n"],"names":[],"version":3,"file":"index.css.map"}
|
|
1
|
+
{"mappings":"ACAA,+yDCCA,8BAIA,mCAIA,gCAKA,+CAIA,+CAIA,iDAIA,gDAIA,iCAIA,mCAIA,qCAIA,uCAKA,6FAMA,iGAMA,4GCxDA,wJAME,mCANF,sIAaA,wJAME,mCANF,sIAaA,wJAME,mCANF,sIAaA,sGAKE,mCALF,qFAWA,sGAKE,mCALF,qFAWA,sGAKE,mCALF,qFAWA,qFAIE,mCAJF,oFAUA,iFAIE,mCAJF,gFAUA,sFAIE,mCAJF,qFAUA,8HAME,mCANF,oFAYA,iGAIE,mCAJF,gGAUA,yEAIE,mCAJF","sources":["index.css","src/_fonts.scss","src/_utilities.scss","src/_components.scss"],"sourcesContent":[":root {\n --system-ui: system-ui, sans-serif;\n --old-style: \"Iowan Old Style\", \"Palatino Linotype\", \"URW Palladio L\", p052, serif;\n --monospace-code: ui-monospace, \"Cascadia Code\", \"Source Code Pro\", menlo, consolas, monospace;\n --handwritten: \"Segoe Print\", \"Bradley Hand\", chilanka, tscu_comic, casual, cursive;\n --mobile-heading-01: 2rem;\n --mobile-heading-02: 1.75rem;\n --mobile-heading-03: 1.5rem;\n --mobile-heading-04: 1.25rem;\n --mobile-heading-05: 1.125rem;\n --mobile-heading-06: 1rem;\n --mobile-body-xl: 1rem;\n --mobile-body: .875rem;\n --mobile-body-sm: .75rem;\n --mobile-caption: .75rem;\n --mobile-helper-text: .75rem;\n --mobile-code: .875rem;\n --lh-mobile-heading-01: 2.5rem;\n --lh-mobile-heading-02: 2.25rem;\n --lh-mobile-heading-03: 1.875rem;\n --lh-mobile-heading-04: 1.75rem;\n --lh-mobile-heading-05: 1.625rem;\n --lh-mobile-heading-06: 1.5rem;\n --lh-mobile-body-xl: 1.5rem;\n --lh-mobile-body: 1.25rem;\n --lh-mobile-body-sm: 1rem;\n --lh-mobile-caption: 1rem;\n --lh-mobile-helper-text: 1rem;\n --lh-mobile-code: 1.25rem;\n --mobile-tracking-heading-01: -.05rem;\n --mobile-tracking-heading-02: -.025rem;\n --mobile-tracking-heading-03: -.025rem;\n --desktop-heading-01: 3.375rem;\n --desktop-heading-02: 2.625rem;\n --desktop-heading-03: 2rem;\n --desktop-heading-04: 1.75rem;\n --desktop-heading-05: 1.25rem;\n --desktop-heading-06: 1.125rem;\n --desktop-body-xl: 1.125rem;\n --desktop-body: 1rem;\n --desktop-body-sm: .875rem;\n --desktop-caption: .75rem;\n --desktop-helper-text: .75rem;\n --desktop-code: .875rem;\n --lh-desktop-heading-01: 4rem;\n --lh-desktop-heading-02: 3.125rem;\n --lh-desktop-heading-03: 2.5rem;\n --lh-desktop-heading-04: 2.25rem;\n --lh-desktop-heading-05: 1.75rem;\n --lh-desktop-heading-06: 1.625rem;\n --lh-desktop-body-xl: 1.625rem;\n --lh-desktop-body: 1.5rem;\n --lh-desktop-body-sm: 1.25rem;\n --lh-desktop-caption: 1rem;\n --lh-desktop-helper-text: 1rem;\n --lh-desktop-code: 1.25rem;\n --desktop-tracking-heading-01: -.075rem;\n --desktop-tracking-heading-02: -.05rem;\n --desktop-tracking-heading-03: -.025rem;\n}\n\n.nu-u-fw-bold {\n font-weight: 700;\n}\n\n.nu-u-fw-semi-bold {\n font-weight: 500;\n}\n\n.nu-u-fw-normal {\n font-weight: 400;\n}\n\n.nu-u-text--uppercase {\n text-transform: uppercase;\n}\n\n.nu-u-text--lowercase {\n text-transform: lowercase;\n}\n\n.nu-u-text--capitalize {\n text-transform: capitalize;\n}\n\n.nu-u-text--underline {\n text-decoration: underline;\n}\n\n.nu-u-text--left {\n text-align: left;\n}\n\n.nu-u-text--right {\n text-align: right;\n}\n\n.nu-u-text--center {\n text-align: center;\n}\n\n.nu-u-text--justify {\n text-align: justify;\n}\n\n.nu-u-serif {\n font-family: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;\n}\n\n.nu-u-sans-serif {\n font-family: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;\n}\n\n.nu-u-code {\n font-family: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;\n}\n\n.nu-c-h1 {\n font-weight: 700;\n font-size: var(--desktop-heading-01);\n line-height: var(--lh-desktop-heading-01);\n letter-spacing: var(--desktop-tracking-heading-01);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-h1 {\n font-size: var(--mobile-heading-01);\n line-height: var(--lh-mobile-heading-01);\n letter-spacing: var(--mobile-tracking-heading-01);\n }\n}\n\n.nu-c-h2 {\n font-weight: 700;\n font-size: var(--desktop-heading-02);\n line-height: var(--lh-desktop-heading-02);\n letter-spacing: var(--desktop-tracking-heading-02);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-h2 {\n font-size: var(--mobile-heading-02);\n line-height: var(--lh-mobile-heading-02);\n letter-spacing: var(--mobile-tracking-heading-02);\n }\n}\n\n.nu-c-h3 {\n font-weight: 700;\n font-size: var(--desktop-heading-03);\n line-height: var(--lh-desktop-heading-03);\n letter-spacing: var(--desktop-tracking-heading-03);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-h3 {\n font-size: var(--mobile-heading-03);\n line-height: var(--lh-mobile-heading-03);\n letter-spacing: var(--mobile-tracking-heading-03);\n }\n}\n\n.nu-c-h4 {\n font-weight: 700;\n font-size: var(--desktop-heading-04);\n line-height: var(--lh-desktop-heading-04);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-h4 {\n font-size: var(--mobile-heading-04);\n line-height: var(--lh-mobile-heading-04);\n }\n}\n\n.nu-c-h5 {\n font-weight: 700;\n font-size: var(--desktop-heading-05);\n line-height: var(--lh-desktop-heading-05);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-h5 {\n font-size: var(--mobile-heading-05);\n line-height: var(--lh-mobile-heading-05);\n }\n}\n\n.nu-c-h6 {\n font-weight: 500;\n font-size: var(--desktop-heading-06);\n line-height: var(--lh-desktop-heading-06);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-h6 {\n font-size: var(--mobile-heading-06);\n line-height: var(--lh-mobile-heading-06);\n }\n}\n\n.nu-c-fs-lead {\n font-size: var(--desktop-body-xl);\n line-height: var(--lh-desktop-body-xl);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-fs-lead {\n font-size: var(--mobile-body-xl);\n line-height: var(--lh-mobile-body-xl);\n }\n}\n\n.nu-c-fs-normal {\n font-size: var(--desktop-body);\n line-height: var(--lh-desktop-body);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-fs-normal {\n font-size: var(--mobile-body);\n line-height: var(--lh-mobile-body);\n }\n}\n\n.nu-c-fs-small {\n font-size: var(--desktop-body-sm);\n line-height: var(--lh-desktop-body-sm);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-fs-small {\n font-size: var(--mobile-body-sm);\n line-height: var(--lh-mobile-body-sm);\n }\n}\n\n.nu-c-caption {\n text-transform: uppercase;\n font-weight: 500;\n font-size: var(--desktop-caption);\n line-height: var(--lh-desktop-caption);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-caption {\n font-size: var(--mobile-caption);\n line-height: var(--lh-mobile-caption);\n }\n}\n\n.nu-c-helper-text {\n font-size: var(--desktop-helper-text);\n line-height: var(--lh-desktop-helper-text);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-helper-text {\n font-size: var(--mobile-helper-text);\n line-height: var(--lh-mobile-helper-text);\n }\n}\n\n.nu-c-code {\n font-size: var(--desktop-code);\n line-height: var(--desktop-code);\n}\n\n@media screen and (width <= 37.5rem) {\n .nu-c-code {\n font-size: var(--mobile-code);\n line-height: var(--mobile-code);\n }\n}\n/*# sourceMappingURL=index.css.map */\n",":root {\n /* System Font Stacks */\n --system-ui: system-ui, sans-serif;\n --old-style:\n 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', p052, serif;\n --monospace-code:\n ui-monospace, 'Cascadia Code', 'Source Code Pro', menlo, consolas, monospace;\n --handwritten:\n 'Segoe Print', 'Bradley Hand', chilanka, tscu_comic, casual, cursive;\n}\n","/* Font Weights */\n.nu-u-fw-bold {\n font-weight: 700;\n}\n\n.nu-u-fw-semi-bold {\n font-weight: 500;\n}\n\n.nu-u-fw-normal {\n font-weight: 400;\n}\n\n/* Utilities */\n.nu-u-text--uppercase {\n text-transform: uppercase;\n}\n\n.nu-u-text--lowercase {\n text-transform: lowercase;\n}\n\n.nu-u-text--capitalize {\n text-transform: capitalize;\n}\n\n.nu-u-text--underline {\n text-decoration: underline;\n}\n\n.nu-u-text--left {\n text-align: left;\n}\n\n.nu-u-text--right {\n text-align: right;\n}\n\n.nu-u-text--center {\n text-align: center;\n}\n\n.nu-u-text--justify {\n text-align: justify;\n}\n\n/* Font family */\n.nu-u-serif {\n font-family:\n Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', 'P052', Sylfaen,\n serif;\n}\n\n.nu-u-sans-serif {\n font-family:\n Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial,\n sans-serif;\n}\n\n.nu-u-code {\n font-family:\n ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,\n 'DejaVu Sans Mono', monospace;\n}\n","$mobile-breakpoint: 37.5rem;\n\n/* Components */\n.nu-c-h1 {\n font-weight: 700;\n font-size: var(--desktop-heading-01);\n line-height: var(--lh-desktop-heading-01);\n letter-spacing: var(--desktop-tracking-heading-01);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-01);\n line-height: var(--lh-mobile-heading-01);\n letter-spacing: var(--mobile-tracking-heading-01);\n }\n}\n\n.nu-c-h2 {\n font-weight: 700;\n font-size: var(--desktop-heading-02);\n line-height: var(--lh-desktop-heading-02);\n letter-spacing: var(--desktop-tracking-heading-02);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-02);\n line-height: var(--lh-mobile-heading-02);\n letter-spacing: var(--mobile-tracking-heading-02);\n }\n}\n\n.nu-c-h3 {\n font-weight: 700;\n font-size: var(--desktop-heading-03);\n line-height: var(--lh-desktop-heading-03);\n letter-spacing: var(--desktop-tracking-heading-03);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-03);\n line-height: var(--lh-mobile-heading-03);\n letter-spacing: var(--mobile-tracking-heading-03);\n }\n}\n\n.nu-c-h4 {\n font-weight: 700;\n font-size: var(--desktop-heading-04);\n line-height: var(--lh-desktop-heading-04);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-04);\n line-height: var(--lh-mobile-heading-04);\n }\n}\n\n.nu-c-h5 {\n font-weight: 700;\n font-size: var(--desktop-heading-05);\n line-height: var(--lh-desktop-heading-05);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-05);\n line-height: var(--lh-mobile-heading-05);\n }\n}\n\n.nu-c-h6 {\n font-weight: 500;\n font-size: var(--desktop-heading-06);\n line-height: var(--lh-desktop-heading-06);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-heading-06);\n line-height: var(--lh-mobile-heading-06);\n }\n}\n\n.nu-c-fs-lead {\n font-size: var(--desktop-body-xl);\n line-height: var(--lh-desktop-body-xl);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-body-xl);\n line-height: var(--lh-mobile-body-xl);\n }\n}\n\n.nu-c-fs-normal {\n font-size: var(--desktop-body);\n line-height: var(--lh-desktop-body);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-body);\n line-height: var(--lh-mobile-body);\n }\n}\n\n.nu-c-fs-small {\n font-size: var(--desktop-body-sm);\n line-height: var(--lh-desktop-body-sm);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-body-sm);\n line-height: var(--lh-mobile-body-sm);\n }\n}\n\n.nu-c-caption {\n font-weight: 500;\n text-transform: uppercase;\n font-size: var(--desktop-caption);\n line-height: var(--lh-desktop-caption);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-caption);\n line-height: var(--lh-mobile-caption);\n }\n}\n\n.nu-c-helper-text {\n font-size: var(--desktop-helper-text);\n line-height: var(--lh-desktop-helper-text);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-helper-text);\n line-height: var(--lh-mobile-helper-text);\n }\n}\n\n.nu-c-code {\n font-size: var(--desktop-code);\n line-height: var(--desktop-code);\n\n @media screen and (max-width: $mobile-breakpoint) {\n font-size: var(--mobile-code);\n line-height: var(--mobile-code);\n }\n}\n"],"names":[],"version":3,"file":"index.css.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@new-ui/typography",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Modular typographic scale for your apps and websites.",
|
|
5
5
|
"source": "src/index.scss",
|
|
6
6
|
"main": "dist/index.css",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
},
|
|
20
20
|
"repository": {
|
|
21
21
|
"type": "git",
|
|
22
|
-
"url": "git+https://github.com/
|
|
22
|
+
"url": "git+https://github.com/create-new-ui/foundations.git"
|
|
23
23
|
},
|
|
24
24
|
"keywords": [
|
|
25
25
|
"typography",
|
|
@@ -35,13 +35,13 @@
|
|
|
35
35
|
"author": "@planetabhi",
|
|
36
36
|
"license": "MIT",
|
|
37
37
|
"bugs": {
|
|
38
|
-
"url": "https://github.com/
|
|
38
|
+
"url": "https://github.com/create-new-ui/foundations/issues"
|
|
39
39
|
},
|
|
40
|
-
"homepage": "https://github.com/
|
|
40
|
+
"homepage": "https://github.com/create-new-ui/foundations#readme",
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@parcel/transformer-sass": "^2.16.
|
|
43
|
-
"autoprefixer": "^10.4.
|
|
44
|
-
"parcel": "^2.16.
|
|
42
|
+
"@parcel/transformer-sass": "^2.16.3",
|
|
43
|
+
"autoprefixer": "^10.4.23",
|
|
44
|
+
"parcel": "^2.16.3",
|
|
45
45
|
"postcss": "^8.5.6",
|
|
46
46
|
"postcss-scss": "^4.0.9"
|
|
47
47
|
}
|
package/src/_components.scss
CHANGED
|
@@ -32,7 +32,7 @@ $mobile-breakpoint: 37.5rem;
|
|
|
32
32
|
font-size: var(--desktop-heading-03);
|
|
33
33
|
line-height: var(--lh-desktop-heading-03);
|
|
34
34
|
letter-spacing: var(--desktop-tracking-heading-03);
|
|
35
|
-
|
|
35
|
+
|
|
36
36
|
@media screen and (max-width: $mobile-breakpoint) {
|
|
37
37
|
font-size: var(--mobile-heading-03);
|
|
38
38
|
line-height: var(--lh-mobile-heading-03);
|
|
@@ -44,7 +44,7 @@ $mobile-breakpoint: 37.5rem;
|
|
|
44
44
|
font-weight: 700;
|
|
45
45
|
font-size: var(--desktop-heading-04);
|
|
46
46
|
line-height: var(--lh-desktop-heading-04);
|
|
47
|
-
|
|
47
|
+
|
|
48
48
|
@media screen and (max-width: $mobile-breakpoint) {
|
|
49
49
|
font-size: var(--mobile-heading-04);
|
|
50
50
|
line-height: var(--lh-mobile-heading-04);
|
|
@@ -66,7 +66,7 @@ $mobile-breakpoint: 37.5rem;
|
|
|
66
66
|
font-weight: 500;
|
|
67
67
|
font-size: var(--desktop-heading-06);
|
|
68
68
|
line-height: var(--lh-desktop-heading-06);
|
|
69
|
-
|
|
69
|
+
|
|
70
70
|
@media screen and (max-width: $mobile-breakpoint) {
|
|
71
71
|
font-size: var(--mobile-heading-06);
|
|
72
72
|
line-height: var(--lh-mobile-heading-06);
|
|
@@ -76,7 +76,7 @@ $mobile-breakpoint: 37.5rem;
|
|
|
76
76
|
.nu-c-fs-lead {
|
|
77
77
|
font-size: var(--desktop-body-xl);
|
|
78
78
|
line-height: var(--lh-desktop-body-xl);
|
|
79
|
-
|
|
79
|
+
|
|
80
80
|
@media screen and (max-width: $mobile-breakpoint) {
|
|
81
81
|
font-size: var(--mobile-body-xl);
|
|
82
82
|
line-height: var(--lh-mobile-body-xl);
|
package/src/_fonts.scss
CHANGED
|
@@ -1,18 +1,10 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
/* System Font Stacks */
|
|
3
3
|
--system-ui: system-ui, sans-serif;
|
|
4
|
-
--
|
|
5
|
-
|
|
6
|
-
--
|
|
7
|
-
|
|
8
|
-
--
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
--monospace-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
|
12
|
-
--industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
|
|
13
|
-
--rounded-sans: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, sans-serif;
|
|
14
|
-
--slab-serif: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
|
|
15
|
-
--antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
|
|
16
|
-
--didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
|
|
17
|
-
--handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
|
|
18
|
-
}
|
|
4
|
+
--old-style:
|
|
5
|
+
'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', p052, serif;
|
|
6
|
+
--monospace-code:
|
|
7
|
+
ui-monospace, 'Cascadia Code', 'Source Code Pro', menlo, consolas, monospace;
|
|
8
|
+
--handwritten:
|
|
9
|
+
'Segoe Print', 'Bradley Hand', chilanka, tscu_comic, casual, cursive;
|
|
10
|
+
}
|
package/src/_utilities.scss
CHANGED
|
@@ -46,31 +46,19 @@
|
|
|
46
46
|
|
|
47
47
|
/* Font family */
|
|
48
48
|
.nu-u-serif {
|
|
49
|
-
font-family:
|
|
50
|
-
'Bodoni MT',
|
|
51
|
-
'Noto Serif Display',
|
|
52
|
-
'URW Palladio L',
|
|
53
|
-
P052,
|
|
54
|
-
Sylfaen,
|
|
49
|
+
font-family:
|
|
50
|
+
Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', 'P052', Sylfaen,
|
|
55
51
|
serif;
|
|
56
52
|
}
|
|
57
53
|
|
|
58
54
|
.nu-u-sans-serif {
|
|
59
|
-
font-family:
|
|
60
|
-
Roboto,
|
|
61
|
-
'Helvetica Neue',
|
|
62
|
-
'Arial Nova',
|
|
63
|
-
'Nimbus Sans',
|
|
64
|
-
Arial,
|
|
55
|
+
font-family:
|
|
56
|
+
Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial,
|
|
65
57
|
sans-serif;
|
|
66
58
|
}
|
|
67
59
|
|
|
68
60
|
.nu-u-code {
|
|
69
|
-
font-family:
|
|
70
|
-
'Cascadia Code',
|
|
71
|
-
'
|
|
72
|
-
|
|
73
|
-
Consolas,
|
|
74
|
-
'DejaVu Sans Mono',
|
|
75
|
-
monospace;
|
|
76
|
-
}
|
|
61
|
+
font-family:
|
|
62
|
+
ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
|
|
63
|
+
'DejaVu Sans Mono', monospace;
|
|
64
|
+
}
|
package/src/_variables.scss
CHANGED
|
@@ -6,30 +6,24 @@
|
|
|
6
6
|
--mobile-heading-04: 1.25rem;
|
|
7
7
|
--mobile-heading-05: 1.125rem;
|
|
8
8
|
--mobile-heading-06: 1rem;
|
|
9
|
-
|
|
10
9
|
--mobile-body-xl: 1rem;
|
|
11
10
|
--mobile-body: 0.875rem;
|
|
12
11
|
--mobile-body-sm: 0.75rem;
|
|
13
|
-
|
|
14
12
|
--mobile-caption: 0.75rem;
|
|
15
13
|
--mobile-helper-text: 0.75rem;
|
|
16
14
|
--mobile-code: 0.875rem;
|
|
17
|
-
|
|
18
15
|
--lh-mobile-heading-01: 2.5rem;
|
|
19
16
|
--lh-mobile-heading-02: 2.25rem;
|
|
20
17
|
--lh-mobile-heading-03: 1.875rem;
|
|
21
18
|
--lh-mobile-heading-04: 1.75rem;
|
|
22
19
|
--lh-mobile-heading-05: 1.625rem;
|
|
23
20
|
--lh-mobile-heading-06: 1.5rem;
|
|
24
|
-
|
|
25
21
|
--lh-mobile-body-xl: 1.5rem;
|
|
26
22
|
--lh-mobile-body: 1.25rem;
|
|
27
23
|
--lh-mobile-body-sm: 1rem;
|
|
28
|
-
|
|
29
24
|
--lh-mobile-caption: 1rem;
|
|
30
25
|
--lh-mobile-helper-text: 1rem;
|
|
31
26
|
--lh-mobile-code: 1.25rem;
|
|
32
|
-
|
|
33
27
|
--mobile-tracking-heading-01: -0.05rem;
|
|
34
28
|
--mobile-tracking-heading-02: -0.025rem;
|
|
35
29
|
--mobile-tracking-heading-03: -0.025rem;
|
|
@@ -41,31 +35,25 @@
|
|
|
41
35
|
--desktop-heading-04: 1.75rem;
|
|
42
36
|
--desktop-heading-05: 1.25rem;
|
|
43
37
|
--desktop-heading-06: 1.125rem;
|
|
44
|
-
|
|
45
38
|
--desktop-body-xl: 1.125rem;
|
|
46
39
|
--desktop-body: 1rem;
|
|
47
40
|
--desktop-body-sm: 0.875rem;
|
|
48
|
-
|
|
49
41
|
--desktop-caption: 0.75rem;
|
|
50
42
|
--desktop-helper-text: 0.75rem;
|
|
51
43
|
--desktop-code: 0.875rem;
|
|
52
|
-
|
|
53
44
|
--lh-desktop-heading-01: 4rem;
|
|
54
45
|
--lh-desktop-heading-02: 3.125rem;
|
|
55
46
|
--lh-desktop-heading-03: 2.5rem;
|
|
56
47
|
--lh-desktop-heading-04: 2.25rem;
|
|
57
48
|
--lh-desktop-heading-05: 1.75rem;
|
|
58
49
|
--lh-desktop-heading-06: 1.625rem;
|
|
59
|
-
|
|
60
50
|
--lh-desktop-body-xl: 1.625rem;
|
|
61
51
|
--lh-desktop-body: 1.5rem;
|
|
62
52
|
--lh-desktop-body-sm: 1.25rem;
|
|
63
|
-
|
|
64
53
|
--lh-desktop-caption: 1rem;
|
|
65
54
|
--lh-desktop-helper-text: 1rem;
|
|
66
55
|
--lh-desktop-code: 1.25rem;
|
|
67
|
-
|
|
68
56
|
--desktop-tracking-heading-01: -0.075rem;
|
|
69
57
|
--desktop-tracking-heading-02: -0.05rem;
|
|
70
58
|
--desktop-tracking-heading-03: -0.025rem;
|
|
71
|
-
}
|
|
59
|
+
}
|
package/src/index.scss
CHANGED