@new-ui/typography 0.2.0 → 3.0.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 (8) hide show
  1. package/README.md +12 -6
  2. package/dist/index.css +72 -57
  3. package/dist/index.css.map +1 -1
  4. package/dist/index.min.css +2 -0
  5. package/dist/index.min.css.map +1 -0
  6. package/package.json +29 -15
  7. package/src/_components.scss +3 -1
  8. package/src/_utilities.scss +1 -3
package/README.md CHANGED
@@ -2,27 +2,33 @@
2
2
 
3
3
  ## Install
4
4
 
5
- Install New UI Typography from your terminal via npm.
5
+ Install New UI Typography from your terminal with npm:
6
6
 
7
7
  ```
8
8
  npm i @new-ui/typography
9
9
  ```
10
10
 
11
- To get started quickly, you can use the CDN files.
11
+ You can also load the minified build from a CDN in your HTML `<head>`:
12
12
 
13
13
  ```html
14
- <!-- Place this at the html head -->
15
14
  <link
16
15
  rel="stylesheet"
17
- href="https://cdn.jsdelivr.net/npm/@new-ui/typography@latest/dist/index.css"
16
+ href="https://cdn.jsdelivr.net/npm/@new-ui/typography@latest/dist/index.min.css"
18
17
  />
19
18
  ```
20
19
 
21
20
  ## Usage
22
21
 
22
+ Import the compiled CSS in a React app or bundler:
23
+
24
+ ```js
25
+ import '@new-ui/typography/css';
26
+ ```
27
+
28
+ For SCSS projects, load the package with `@use`:
29
+
23
30
  ```scss
24
- // Place this at the top of your SCSS/CSS file
25
- @use '@new-ui/typography';
31
+ @use '@new-ui/typography/scss';
26
32
  ```
27
33
 
28
34
  ## Guides
package/dist/index.css CHANGED
@@ -1,11 +1,8 @@
1
1
  :root {
2
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;
3
+ --old-style: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", p052, serif;
4
+ --monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro", menlo, consolas, monospace;
5
+ --handwritten: "Segoe Print", "Bradley Hand", chilanka, tscu_comic, casual, cursive;
9
6
  --mobile-heading-01: 2rem;
10
7
  --mobile-heading-02: 1.75rem;
11
8
  --mobile-heading-03: 1.5rem;
@@ -13,11 +10,11 @@
13
10
  --mobile-heading-05: 1.125rem;
14
11
  --mobile-heading-06: 1rem;
15
12
  --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;
13
+ --mobile-body: .875rem;
14
+ --mobile-body-sm: .75rem;
15
+ --mobile-caption: .75rem;
16
+ --mobile-helper-text: .75rem;
17
+ --mobile-code: .875rem;
21
18
  --lh-mobile-heading-01: 2.5rem;
22
19
  --lh-mobile-heading-02: 2.25rem;
23
20
  --lh-mobile-heading-03: 1.875rem;
@@ -30,9 +27,9 @@
30
27
  --lh-mobile-caption: 1rem;
31
28
  --lh-mobile-helper-text: 1rem;
32
29
  --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;
30
+ --mobile-tracking-heading-01: -.05rem;
31
+ --mobile-tracking-heading-02: -.025rem;
32
+ --mobile-tracking-heading-03: -.025rem;
36
33
  --desktop-heading-01: 3.375rem;
37
34
  --desktop-heading-02: 2.625rem;
38
35
  --desktop-heading-03: 2rem;
@@ -41,10 +38,10 @@
41
38
  --desktop-heading-06: 1.125rem;
42
39
  --desktop-body-xl: 1.125rem;
43
40
  --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;
41
+ --desktop-body-sm: .875rem;
42
+ --desktop-caption: .75rem;
43
+ --desktop-helper-text: .75rem;
44
+ --desktop-code: .875rem;
48
45
  --lh-desktop-heading-01: 4rem;
49
46
  --lh-desktop-heading-02: 3.125rem;
50
47
  --lh-desktop-heading-03: 2.5rem;
@@ -57,202 +54,220 @@
57
54
  --lh-desktop-caption: 1rem;
58
55
  --lh-desktop-helper-text: 1rem;
59
56
  --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;
57
+ --desktop-tracking-heading-01: -.075rem;
58
+ --desktop-tracking-heading-02: -.05rem;
59
+ --desktop-tracking-heading-03: -.025rem;
63
60
  }
61
+
64
62
  .nu-u-fw-bold {
65
63
  font-weight: 700;
66
64
  }
65
+
67
66
  .nu-u-fw-semi-bold {
68
67
  font-weight: 500;
69
68
  }
69
+
70
70
  .nu-u-fw-normal {
71
71
  font-weight: 400;
72
72
  }
73
+
73
74
  .nu-u-text--uppercase {
74
75
  text-transform: uppercase;
75
76
  }
77
+
76
78
  .nu-u-text--lowercase {
77
79
  text-transform: lowercase;
78
80
  }
81
+
79
82
  .nu-u-text--capitalize {
80
83
  text-transform: capitalize;
81
84
  }
85
+
82
86
  .nu-u-text--underline {
83
87
  text-decoration: underline;
84
88
  }
89
+
85
90
  .nu-u-text--left {
86
91
  text-align: left;
87
92
  }
93
+
88
94
  .nu-u-text--right {
89
95
  text-align: right;
90
96
  }
97
+
91
98
  .nu-u-text--center {
92
99
  text-align: center;
93
100
  }
101
+
94
102
  .nu-u-text--justify {
95
103
  text-align: justify;
96
104
  }
105
+
97
106
  .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;
107
+ font-family: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;
106
108
  }
109
+
107
110
  .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;
111
+ font-family: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;
116
112
  }
113
+
117
114
  .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;
115
+ font-family: var(--monospace-code);
126
116
  }
117
+
127
118
  .nu-c-h1 {
128
119
  font-weight: 700;
129
120
  font-size: var(--desktop-heading-01);
130
121
  line-height: var(--lh-desktop-heading-01);
131
122
  letter-spacing: var(--desktop-tracking-heading-01);
132
123
  }
133
- @media screen and (width<=37.5rem) {
124
+
125
+ @media screen and (width <= 30rem) {
134
126
  .nu-c-h1 {
135
127
  font-size: var(--mobile-heading-01);
136
128
  line-height: var(--lh-mobile-heading-01);
137
129
  letter-spacing: var(--mobile-tracking-heading-01);
138
130
  }
139
131
  }
132
+
140
133
  .nu-c-h2 {
141
134
  font-weight: 700;
142
135
  font-size: var(--desktop-heading-02);
143
136
  line-height: var(--lh-desktop-heading-02);
144
137
  letter-spacing: var(--desktop-tracking-heading-02);
145
138
  }
146
- @media screen and (width<=37.5rem) {
139
+
140
+ @media screen and (width <= 30rem) {
147
141
  .nu-c-h2 {
148
142
  font-size: var(--mobile-heading-02);
149
143
  line-height: var(--lh-mobile-heading-02);
150
144
  letter-spacing: var(--mobile-tracking-heading-02);
151
145
  }
152
146
  }
147
+
153
148
  .nu-c-h3 {
154
149
  font-weight: 700;
155
150
  font-size: var(--desktop-heading-03);
156
151
  line-height: var(--lh-desktop-heading-03);
157
152
  letter-spacing: var(--desktop-tracking-heading-03);
158
153
  }
159
- @media screen and (width<=37.5rem) {
154
+
155
+ @media screen and (width <= 30rem) {
160
156
  .nu-c-h3 {
161
157
  font-size: var(--mobile-heading-03);
162
158
  line-height: var(--lh-mobile-heading-03);
163
159
  letter-spacing: var(--mobile-tracking-heading-03);
164
160
  }
165
161
  }
162
+
166
163
  .nu-c-h4 {
167
164
  font-weight: 700;
168
165
  font-size: var(--desktop-heading-04);
169
166
  line-height: var(--lh-desktop-heading-04);
170
167
  }
171
- @media screen and (width<=37.5rem) {
168
+
169
+ @media screen and (width <= 30rem) {
172
170
  .nu-c-h4 {
173
171
  font-size: var(--mobile-heading-04);
174
172
  line-height: var(--lh-mobile-heading-04);
175
173
  }
176
174
  }
175
+
177
176
  .nu-c-h5 {
178
177
  font-weight: 700;
179
178
  font-size: var(--desktop-heading-05);
180
179
  line-height: var(--lh-desktop-heading-05);
181
180
  }
182
- @media screen and (width<=37.5rem) {
181
+
182
+ @media screen and (width <= 30rem) {
183
183
  .nu-c-h5 {
184
184
  font-size: var(--mobile-heading-05);
185
185
  line-height: var(--lh-mobile-heading-05);
186
186
  }
187
187
  }
188
+
188
189
  .nu-c-h6 {
189
190
  font-weight: 500;
190
191
  font-size: var(--desktop-heading-06);
191
192
  line-height: var(--lh-desktop-heading-06);
192
193
  }
193
- @media screen and (width<=37.5rem) {
194
+
195
+ @media screen and (width <= 30rem) {
194
196
  .nu-c-h6 {
195
197
  font-size: var(--mobile-heading-06);
196
198
  line-height: var(--lh-mobile-heading-06);
197
199
  }
198
200
  }
201
+
199
202
  .nu-c-fs-lead {
200
203
  font-size: var(--desktop-body-xl);
201
204
  line-height: var(--lh-desktop-body-xl);
202
205
  }
203
- @media screen and (width<=37.5rem) {
206
+
207
+ @media screen and (width <= 30rem) {
204
208
  .nu-c-fs-lead {
205
209
  font-size: var(--mobile-body-xl);
206
210
  line-height: var(--lh-mobile-body-xl);
207
211
  }
208
212
  }
213
+
209
214
  .nu-c-fs-normal {
210
215
  font-size: var(--desktop-body);
211
216
  line-height: var(--lh-desktop-body);
212
217
  }
213
- @media screen and (width<=37.5rem) {
218
+
219
+ @media screen and (width <= 30rem) {
214
220
  .nu-c-fs-normal {
215
221
  font-size: var(--mobile-body);
216
222
  line-height: var(--lh-mobile-body);
217
223
  }
218
224
  }
225
+
219
226
  .nu-c-fs-small {
220
227
  font-size: var(--desktop-body-sm);
221
228
  line-height: var(--lh-desktop-body-sm);
222
229
  }
223
- @media screen and (width<=37.5rem) {
230
+
231
+ @media screen and (width <= 30rem) {
224
232
  .nu-c-fs-small {
225
233
  font-size: var(--mobile-body-sm);
226
234
  line-height: var(--lh-mobile-body-sm);
227
235
  }
228
236
  }
237
+
229
238
  .nu-c-caption {
230
239
  text-transform: uppercase;
231
240
  font-weight: 500;
232
241
  font-size: var(--desktop-caption);
233
242
  line-height: var(--lh-desktop-caption);
234
243
  }
235
- @media screen and (width<=37.5rem) {
244
+
245
+ @media screen and (width <= 30rem) {
236
246
  .nu-c-caption {
237
247
  font-size: var(--mobile-caption);
238
248
  line-height: var(--lh-mobile-caption);
239
249
  }
240
250
  }
251
+
241
252
  .nu-c-helper-text {
242
253
  font-size: var(--desktop-helper-text);
243
254
  line-height: var(--lh-desktop-helper-text);
244
255
  }
245
- @media screen and (width<=37.5rem) {
256
+
257
+ @media screen and (width <= 30rem) {
246
258
  .nu-c-helper-text {
247
259
  font-size: var(--mobile-helper-text);
248
260
  line-height: var(--lh-mobile-helper-text);
249
261
  }
250
262
  }
263
+
251
264
  .nu-c-code {
265
+ font-family: var(--monospace-code);
252
266
  font-size: var(--desktop-code);
253
267
  line-height: var(--desktop-code);
254
268
  }
255
- @media screen and (width<=37.5rem) {
269
+
270
+ @media screen and (width <= 30rem) {
256
271
  .nu-c-code {
257
272
  font-size: var(--mobile-code);
258
273
  line-height: var(--mobile-code);
package/dist/index.css.map CHANGED
@@ -1 +1 @@
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"}
1
+ {"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACCA;;;;AAIA;;;;AAIA;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAKA;;;;AAMA;;;;AAMA;;;;ACvDA;;;;;;;AAME;EANF;;;;;;;AAaA;;;;;;;AAME;EANF;;;;;;;AAaA;;;;;;;AAME;EANF;;;;;;;AAaA;;;;;;AAKE;EALF;;;;;;AAWA;;;;;;AAKE;EALF;;;;;;AAWA;;;;;;AAKE;EALF;;;;;;AAWA;;;;;AAIE;EAJF;;;;;;AAUA;;;;;AAIE;EAJF;;;;;;AAUA;;;;;AAIE;EAJF;;;;;;AAUA;;;;;;;AAME;EANF;;;;;;AAYA;;;;;AAIE;EAJF;;;;;;AAUA;;;;;;AAKE;EALF","sources":["src/_fonts.scss","src/_utilities.scss","src/_components.scss"],"sourcesContent":[":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: var(--monospace-code);\n}\n","// Shared mobile breakpoint for the typographic scale.\n$mobile-breakpoint: 30rem;\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-family: var(--monospace-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/dist/index.min.css ADDED
@@ -0,0 +1,2 @@
1
+ :root{--system-ui:system-ui, sans-serif;--old-style:"Iowan Old Style", "Palatino Linotype", "URW Palladio L", p052, serif;--monospace-code:ui-monospace, "Cascadia Code", "Source Code Pro", menlo, consolas, monospace;--handwritten:"Segoe Print", "Bradley Hand", chilanka, tscu_comic, casual, cursive;--mobile-heading-01:2rem;--mobile-heading-02:1.75rem;--mobile-heading-03:1.5rem;--mobile-heading-04:1.25rem;--mobile-heading-05:1.125rem;--mobile-heading-06:1rem;--mobile-body-xl:1rem;--mobile-body:.875rem;--mobile-body-sm:.75rem;--mobile-caption:.75rem;--mobile-helper-text:.75rem;--mobile-code:.875rem;--lh-mobile-heading-01:2.5rem;--lh-mobile-heading-02:2.25rem;--lh-mobile-heading-03:1.875rem;--lh-mobile-heading-04:1.75rem;--lh-mobile-heading-05:1.625rem;--lh-mobile-heading-06:1.5rem;--lh-mobile-body-xl:1.5rem;--lh-mobile-body:1.25rem;--lh-mobile-body-sm:1rem;--lh-mobile-caption:1rem;--lh-mobile-helper-text:1rem;--lh-mobile-code:1.25rem;--mobile-tracking-heading-01:-.05rem;--mobile-tracking-heading-02:-.025rem;--mobile-tracking-heading-03:-.025rem;--desktop-heading-01:3.375rem;--desktop-heading-02:2.625rem;--desktop-heading-03:2rem;--desktop-heading-04:1.75rem;--desktop-heading-05:1.25rem;--desktop-heading-06:1.125rem;--desktop-body-xl:1.125rem;--desktop-body:1rem;--desktop-body-sm:.875rem;--desktop-caption:.75rem;--desktop-helper-text:.75rem;--desktop-code:.875rem;--lh-desktop-heading-01:4rem;--lh-desktop-heading-02:3.125rem;--lh-desktop-heading-03:2.5rem;--lh-desktop-heading-04:2.25rem;--lh-desktop-heading-05:1.75rem;--lh-desktop-heading-06:1.625rem;--lh-desktop-body-xl:1.625rem;--lh-desktop-body:1.5rem;--lh-desktop-body-sm:1.25rem;--lh-desktop-caption:1rem;--lh-desktop-helper-text:1rem;--lh-desktop-code:1.25rem;--desktop-tracking-heading-01:-.075rem;--desktop-tracking-heading-02:-.05rem;--desktop-tracking-heading-03:-.025rem}.nu-u-fw-bold{font-weight:700}.nu-u-fw-semi-bold{font-weight:500}.nu-u-fw-normal{font-weight:400}.nu-u-text--uppercase{text-transform:uppercase}.nu-u-text--lowercase{text-transform:lowercase}.nu-u-text--capitalize{text-transform:capitalize}.nu-u-text--underline{text-decoration:underline}.nu-u-text--left{text-align:left}.nu-u-text--right{text-align:right}.nu-u-text--center{text-align:center}.nu-u-text--justify{text-align:justify}.nu-u-serif{font-family:Didot,Bodoni MT,Noto Serif Display,URW Palladio L,P052,Sylfaen,serif}.nu-u-sans-serif{font-family:Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif}.nu-u-code{font-family:var(--monospace-code)}.nu-c-h1{font-weight:700;font-size:var(--desktop-heading-01);line-height:var(--lh-desktop-heading-01);letter-spacing:var(--desktop-tracking-heading-01)}@media screen and (width<=30rem){.nu-c-h1{font-size:var(--mobile-heading-01);line-height:var(--lh-mobile-heading-01);letter-spacing:var(--mobile-tracking-heading-01)}}.nu-c-h2{font-weight:700;font-size:var(--desktop-heading-02);line-height:var(--lh-desktop-heading-02);letter-spacing:var(--desktop-tracking-heading-02)}@media screen and (width<=30rem){.nu-c-h2{font-size:var(--mobile-heading-02);line-height:var(--lh-mobile-heading-02);letter-spacing:var(--mobile-tracking-heading-02)}}.nu-c-h3{font-weight:700;font-size:var(--desktop-heading-03);line-height:var(--lh-desktop-heading-03);letter-spacing:var(--desktop-tracking-heading-03)}@media screen and (width<=30rem){.nu-c-h3{font-size:var(--mobile-heading-03);line-height:var(--lh-mobile-heading-03);letter-spacing:var(--mobile-tracking-heading-03)}}.nu-c-h4{font-weight:700;font-size:var(--desktop-heading-04);line-height:var(--lh-desktop-heading-04)}@media screen and (width<=30rem){.nu-c-h4{font-size:var(--mobile-heading-04);line-height:var(--lh-mobile-heading-04)}}.nu-c-h5{font-weight:700;font-size:var(--desktop-heading-05);line-height:var(--lh-desktop-heading-05)}@media screen and (width<=30rem){.nu-c-h5{font-size:var(--mobile-heading-05);line-height:var(--lh-mobile-heading-05)}}.nu-c-h6{font-weight:500;font-size:var(--desktop-heading-06);line-height:var(--lh-desktop-heading-06)}@media screen and (width<=30rem){.nu-c-h6{font-size:var(--mobile-heading-06);line-height:var(--lh-mobile-heading-06)}}.nu-c-fs-lead{font-size:var(--desktop-body-xl);line-height:var(--lh-desktop-body-xl)}@media screen and (width<=30rem){.nu-c-fs-lead{font-size:var(--mobile-body-xl);line-height:var(--lh-mobile-body-xl)}}.nu-c-fs-normal{font-size:var(--desktop-body);line-height:var(--lh-desktop-body)}@media screen and (width<=30rem){.nu-c-fs-normal{font-size:var(--mobile-body);line-height:var(--lh-mobile-body)}}.nu-c-fs-small{font-size:var(--desktop-body-sm);line-height:var(--lh-desktop-body-sm)}@media screen and (width<=30rem){.nu-c-fs-small{font-size:var(--mobile-body-sm);line-height:var(--lh-mobile-body-sm)}}.nu-c-caption{text-transform:uppercase;font-weight:500;font-size:var(--desktop-caption);line-height:var(--lh-desktop-caption)}@media screen and (width<=30rem){.nu-c-caption{font-size:var(--mobile-caption);line-height:var(--lh-mobile-caption)}}.nu-c-helper-text{font-size:var(--desktop-helper-text);line-height:var(--lh-desktop-helper-text)}@media screen and (width<=30rem){.nu-c-helper-text{font-size:var(--mobile-helper-text);line-height:var(--lh-mobile-helper-text)}}.nu-c-code{font-family:var(--monospace-code);font-size:var(--desktop-code);line-height:var(--desktop-code)}@media screen and (width<=30rem){.nu-c-code{font-size:var(--mobile-code);line-height:var(--mobile-code)}}
2
+ /*# sourceMappingURL=index.min.css.map */
package/dist/index.min.css.map ADDED
@@ -0,0 +1 @@
1
+ {"mappings":"ACAA,8zDCCA,8BAIA,mCAIA,gCAKA,+CAIA,+CAIA,iDAIA,gDAIA,iCAIA,mCAIA,qCAIA,uCAKA,6FAMA,iGAMA,6CCvDA,wJAME,iCANF,sIAaA,wJAME,iCANF,sIAaA,wJAME,iCANF,sIAaA,sGAKE,iCALF,qFAWA,sGAKE,iCALF,qFAWA,sGAKE,iCALF,qFAWA,qFAIE,iCAJF,oFAUA,iFAIE,iCAJF,gFAUA,sFAIE,iCAJF,qFAUA,8HAME,iCANF,oFAYA,iGAIE,iCAJF,gGAUA,2GAKE,iCALF","sources":["index.min.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: var(--monospace-code);\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 <= 30rem) {\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 <= 30rem) {\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 <= 30rem) {\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 <= 30rem) {\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 <= 30rem) {\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 <= 30rem) {\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 <= 30rem) {\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 <= 30rem) {\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 <= 30rem) {\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 <= 30rem) {\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 <= 30rem) {\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-family: var(--monospace-code);\n font-size: var(--desktop-code);\n line-height: var(--desktop-code);\n}\n\n@media screen and (width <= 30rem) {\n .nu-c-code {\n font-size: var(--mobile-code);\n line-height: var(--mobile-code);\n }\n}\n/*# sourceMappingURL=index.min.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: var(--monospace-code);\n}\n","// Shared mobile breakpoint for the typographic scale.\n$mobile-breakpoint: 30rem;\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-family: var(--monospace-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.min.css.map"}
package/package.json CHANGED
@@ -1,11 +1,32 @@
1
1
  {
2
2
  "name": "@new-ui/typography",
3
- "version": "0.2.0",
3
+ "version": "3.0.0",
4
4
  "description": "Modular typographic scale for your apps and websites.",
5
5
  "source": "src/index.scss",
6
6
  "main": "dist/index.css",
7
+ "css": "dist/index.css",
8
+ "minified": "dist/index.min.css",
9
+ "style": "./dist/index.css",
10
+ "sass": "./src/index.scss",
11
+ "exports": {
12
+ ".": {
13
+ "sass": "./src/index.scss",
14
+ "style": "./dist/index.css",
15
+ "default": "./dist/index.css"
16
+ },
17
+ "./css": "./dist/index.css",
18
+ "./css/min": "./dist/index.min.css",
19
+ "./scss": "./src/index.scss",
20
+ "./package.json": "./package.json"
21
+ },
7
22
  "targets": {
8
- "main": false
23
+ "main": false,
24
+ "css": {
25
+ "optimize": false
26
+ },
27
+ "minified": {
28
+ "optimize": true
29
+ }
9
30
  },
10
31
  "files": [
11
32
  "dist/",
@@ -14,12 +35,13 @@
14
35
  "LICENSE"
15
36
  ],
16
37
  "scripts": {
17
- "watch": "parcel watch",
18
- "build": "parcel build"
38
+ "watch": "PARCEL_WORKERS=0 parcel watch",
39
+ "build": "PARCEL_WORKERS=0 parcel build",
40
+ "prepublishOnly": "bun run build"
19
41
  },
20
42
  "repository": {
21
43
  "type": "git",
22
- "url": "git+https://github.com/create-new-ui/foundations.git"
44
+ "url": "git+https://github.com/CreateNewUI/foundations.git"
23
45
  },
24
46
  "keywords": [
25
47
  "typography",
@@ -27,7 +49,6 @@
27
49
  "type",
28
50
  "type-styles",
29
51
  "modular",
30
- "type",
31
52
  "tokens",
32
53
  "desktop",
33
54
  "mobile"
@@ -35,14 +56,7 @@
35
56
  "author": "@planetabhi",
36
57
  "license": "MIT",
37
58
  "bugs": {
38
- "url": "https://github.com/create-new-ui/foundations/issues"
59
+ "url": "https://github.com/CreateNewUI/foundations/issues"
39
60
  },
40
- "homepage": "https://github.com/create-new-ui/foundations#readme",
41
- "devDependencies": {
42
- "@parcel/transformer-sass": "^2.16.3",
43
- "autoprefixer": "^10.4.23",
44
- "parcel": "^2.16.3",
45
- "postcss": "^8.5.6",
46
- "postcss-scss": "^4.0.9"
47
- }
61
+ "homepage": "https://github.com/CreateNewUI/foundations#readme"
48
62
  }
package/src/_components.scss CHANGED
@@ -1,4 +1,5 @@
1
- $mobile-breakpoint: 37.5rem;
1
+ // Shared mobile breakpoint for the typographic scale.
2
+ $mobile-breakpoint: 30rem;
2
3
 
3
4
  /* Components */
4
5
  .nu-c-h1 {
@@ -126,6 +127,7 @@ $mobile-breakpoint: 37.5rem;
126
127
  }
127
128
 
128
129
  .nu-c-code {
130
+ font-family: var(--monospace-code);
129
131
  font-size: var(--desktop-code);
130
132
  line-height: var(--desktop-code);
131
133
 
package/src/_utilities.scss CHANGED
@@ -58,7 +58,5 @@
58
58
  }
59
59
 
60
60
  .nu-u-code {
61
- font-family:
62
- ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
63
- 'DejaVu Sans Mono', monospace;
61
+ font-family: var(--monospace-code);
64
62
  }