@guardian/stand 0.0.6 → 0.0.8

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 (45) hide show
  1. package/README.md +272 -27
  2. package/dist/fonts/OpenSans.css +327 -0
  3. package/dist/index.cjs +10 -1
  4. package/dist/index.js +5 -1
  5. package/dist/styleD/build/css/css/base/colors.css +3 -3
  6. package/dist/styleD/build/css/css/base/radius.css +12 -0
  7. package/dist/styleD/build/css/css/base/sizing.css +22 -0
  8. package/dist/styleD/build/css/css/base/spacing.css +36 -0
  9. package/dist/styleD/build/css/css/base/typography.css +16 -1
  10. package/dist/styleD/build/css/css/semantic/colors.css +10 -8
  11. package/dist/styleD/build/css/css/semantic/sizing.css +14 -0
  12. package/dist/styleD/build/css/css/semantic/typography.css +83 -76
  13. package/dist/styleD/build/typescript/base/colors.cjs +3 -3
  14. package/dist/styleD/build/typescript/base/colors.js +3 -3
  15. package/dist/styleD/build/typescript/base/radius.cjs +12 -0
  16. package/dist/styleD/build/typescript/base/radius.js +10 -0
  17. package/dist/styleD/build/typescript/base/sizing.cjs +22 -0
  18. package/dist/styleD/build/typescript/base/sizing.js +20 -0
  19. package/dist/styleD/build/typescript/base/spacing.cjs +36 -0
  20. package/dist/styleD/build/typescript/base/spacing.js +34 -0
  21. package/dist/styleD/build/typescript/base/typography.cjs +20 -5
  22. package/dist/styleD/build/typescript/base/typography.js +20 -5
  23. package/dist/styleD/build/typescript/semantic/colors.cjs +14 -12
  24. package/dist/styleD/build/typescript/semantic/colors.js +14 -12
  25. package/dist/styleD/build/typescript/semantic/sizing.cjs +20 -0
  26. package/dist/styleD/build/typescript/semantic/sizing.js +18 -0
  27. package/dist/styleD/build/typescript/semantic/typography.cjs +76 -342
  28. package/dist/styleD/build/typescript/semantic/typography.js +76 -342
  29. package/dist/styleD/utils/semantic/typography.cjs +11 -7
  30. package/dist/styleD/utils/semantic/typography.js +10 -7
  31. package/dist/types/index.d.ts +9 -1
  32. package/dist/types/styleD/build/typescript/base/colors.d.ts +3 -3
  33. package/dist/types/styleD/build/typescript/base/radius.d.ts +12 -0
  34. package/dist/types/styleD/build/typescript/base/sizing.d.ts +22 -0
  35. package/dist/types/styleD/build/typescript/base/spacing.d.ts +36 -0
  36. package/dist/types/styleD/build/typescript/base/typography.d.ts +18 -3
  37. package/dist/types/styleD/build/typescript/semantic/colors.d.ts +11 -9
  38. package/dist/types/styleD/build/typescript/semantic/sizing.d.ts +20 -0
  39. package/dist/types/styleD/build/typescript/semantic/typography.d.ts +38 -304
  40. package/dist/types/styleD/stories/base/Radius.d.ts +1 -0
  41. package/dist/types/styleD/stories/base/Sizing.d.ts +1 -0
  42. package/dist/types/styleD/stories/base/Spacing.d.ts +1 -0
  43. package/dist/types/styleD/stories/semantic/Sizing.d.ts +1 -0
  44. package/dist/types/styleD/utils/semantic/typography.d.ts +4 -10
  45. package/package.json +13 -7
package/dist/styleD/build/typescript/semantic/typography.cjs CHANGED
@@ -2,459 +2,193 @@
2
2
 
3
3
  const semanticTypography = {
4
4
  "title-sm": {
5
- font: {
6
- fontFamily: "GH Guardian Headline",
7
- fontWeight: 700,
8
- fontSize: "18px",
9
- fontStyle: "normal",
10
- lineHeight: 1.15,
11
- letterSpacing: "0px"
12
- },
13
- letterSpacing: "0px",
5
+ font: "normal 700 1.125rem/1.15 GH Guardian Headline",
6
+ letterSpacing: "0rem",
14
7
  fontWidth: 100
15
8
  },
16
9
  "title-md": {
17
- font: {
18
- fontFamily: "GH Guardian Headline",
19
- fontWeight: 700,
20
- fontSize: "20px",
21
- fontStyle: "normal",
22
- lineHeight: 1.15,
23
- letterSpacing: "0px"
24
- },
25
- letterSpacing: "0px",
10
+ font: "normal 700 1.25rem/1.15 GH Guardian Headline",
11
+ letterSpacing: "0rem",
26
12
  fontWidth: 100
27
13
  },
28
14
  "title-lg": {
29
- font: {
30
- fontFamily: "GH Guardian Headline",
31
- fontWeight: 700,
32
- fontSize: "24px",
33
- fontStyle: "normal",
34
- lineHeight: 1.15,
35
- letterSpacing: "0px"
36
- },
37
- letterSpacing: "0px",
15
+ font: "normal 700 1.5rem/1.15 GH Guardian Headline",
16
+ letterSpacing: "0rem",
38
17
  fontWidth: 100
39
18
  },
40
19
  "title-xl": {
41
- font: {
42
- fontFamily: "GH Guardian Headline",
43
- fontWeight: 700,
44
- fontSize: "32px",
45
- fontStyle: "normal",
46
- lineHeight: 1.15,
47
- letterSpacing: "0px"
48
- },
49
- letterSpacing: "0px",
20
+ font: "normal 700 2rem/1.15 GH Guardian Headline",
21
+ letterSpacing: "0rem",
50
22
  fontWidth: 100
51
23
  },
52
24
  "heading-xs": {
53
- font: {
54
- fontFamily: "Open Sans",
55
- fontWeight: 700,
56
- fontSize: "12px",
57
- fontStyle: "normal",
58
- lineHeight: 1.15,
59
- letterSpacing: "0px"
60
- },
61
- letterSpacing: "0px",
25
+ font: "normal 700 0.75rem/1.15 Open Sans",
26
+ letterSpacing: "0rem",
62
27
  fontWidth: 95
63
28
  },
64
29
  "heading-sm": {
65
- font: {
66
- fontFamily: "Open Sans",
67
- fontWeight: 700,
68
- fontSize: "14px",
69
- fontStyle: "normal",
70
- lineHeight: 1.15,
71
- letterSpacing: "-0.2px"
72
- },
73
- letterSpacing: "-0.2px",
30
+ font: "normal 700 0.875rem/1.15 Open Sans",
31
+ letterSpacing: "-0.0125rem",
74
32
  fontWidth: 95
75
33
  },
76
34
  "heading-md": {
77
- font: {
78
- fontFamily: "Open Sans",
79
- fontWeight: 700,
80
- fontSize: "16px",
81
- fontStyle: "normal",
82
- lineHeight: 1.15,
83
- letterSpacing: "-0.5px"
84
- },
85
- letterSpacing: "-0.5px",
35
+ font: "normal 700 1rem/1.15 Open Sans",
36
+ letterSpacing: "-0.03125rem",
86
37
  fontWidth: 95
87
38
  },
88
39
  "heading-lg": {
89
- font: {
90
- fontFamily: "Open Sans",
91
- fontWeight: 700,
92
- fontSize: "18px",
93
- fontStyle: "normal",
94
- lineHeight: 1.15,
95
- letterSpacing: "-0.5px"
96
- },
97
- letterSpacing: "-0.5px",
40
+ font: "normal 700 1.125rem/1.15 Open Sans",
41
+ letterSpacing: "-0.03125rem",
98
42
  fontWidth: 95
99
43
  },
100
44
  "heading-xl": {
101
- font: {
102
- fontFamily: "Open Sans",
103
- fontWeight: 700,
104
- fontSize: "20px",
105
- fontStyle: "normal",
106
- lineHeight: 1.15,
107
- letterSpacing: "-0.5px"
108
- },
109
- letterSpacing: "-0.5px",
45
+ font: "normal 700 1.25rem/1.15 Open Sans",
46
+ letterSpacing: "-0.03125rem",
110
47
  fontWidth: 95
111
48
  },
112
49
  "heading-2xl": {
113
- font: {
114
- fontFamily: "Open Sans",
115
- fontWeight: 700,
116
- fontSize: "24px",
117
- fontStyle: "normal",
118
- lineHeight: 1.15,
119
- letterSpacing: "-1px"
120
- },
121
- letterSpacing: "-1px",
50
+ font: "normal 700 1.5rem/1.15 Open Sans",
51
+ letterSpacing: "-0.0625rem",
122
52
  fontWidth: 95
123
53
  },
124
54
  "heading-compact-xs": {
125
- font: {
126
- fontFamily: "Open Sans",
127
- fontWeight: 700,
128
- fontSize: "12px",
129
- fontStyle: "normal",
130
- lineHeight: 1.15,
131
- letterSpacing: "0px"
132
- },
133
- letterSpacing: "0px",
55
+ font: "normal 700 0.75rem/1.15 Open Sans",
56
+ letterSpacing: "0rem",
134
57
  fontWidth: 88
135
58
  },
136
59
  "heading-compact-sm": {
137
- font: {
138
- fontFamily: "Open Sans",
139
- fontWeight: 700,
140
- fontSize: "14px",
141
- fontStyle: "normal",
142
- lineHeight: 1.15,
143
- letterSpacing: "0px"
144
- },
145
- letterSpacing: "0px",
60
+ font: "normal 700 0.875rem/1.15 Open Sans",
61
+ letterSpacing: "0rem",
146
62
  fontWidth: 88
147
63
  },
148
64
  "heading-compact-md": {
149
- font: {
150
- fontFamily: "Open Sans",
151
- fontWeight: 700,
152
- fontSize: "16px",
153
- fontStyle: "normal",
154
- lineHeight: 1.15,
155
- letterSpacing: "-0.2px"
156
- },
157
- letterSpacing: "-0.2px",
65
+ font: "normal 700 1rem/1.15 Open Sans",
66
+ letterSpacing: "-0.0125rem",
158
67
  fontWidth: 88
159
68
  },
160
69
  "heading-compact-lg": {
161
- font: {
162
- fontFamily: "Open Sans",
163
- fontWeight: 700,
164
- fontSize: "18px",
165
- fontStyle: "normal",
166
- lineHeight: 1.15,
167
- letterSpacing: "-0.2px"
168
- },
169
- letterSpacing: "-0.2px",
70
+ font: "normal 700 1.125rem/1.15 Open Sans",
71
+ letterSpacing: "-0.0125rem",
170
72
  fontWidth: 88
171
73
  },
172
74
  "heading-compact-xl": {
173
- font: {
174
- fontFamily: "Open Sans",
175
- fontWeight: 700,
176
- fontSize: "20px",
177
- fontStyle: "normal",
178
- lineHeight: 1.15,
179
- letterSpacing: "-0.5px"
180
- },
181
- letterSpacing: "-0.5px",
75
+ font: "normal 700 1.25rem/1.15 Open Sans",
76
+ letterSpacing: "-0.03125rem",
182
77
  fontWidth: 88
183
78
  },
184
79
  "heading-compact-2xl": {
185
- font: {
186
- fontFamily: "Open Sans",
187
- fontWeight: 700,
188
- fontSize: "24px",
189
- fontStyle: "normal",
190
- lineHeight: 1.15,
191
- letterSpacing: "-0.5px"
192
- },
193
- letterSpacing: "-0.5px",
80
+ font: "normal 700 1.5rem/1.15 Open Sans",
81
+ letterSpacing: "-0.03125rem",
194
82
  fontWidth: 88
195
83
  },
196
84
  "body-sm": {
197
- font: {
198
- fontFamily: "Open Sans",
199
- fontWeight: 460,
200
- fontSize: "14px",
201
- fontStyle: "normal",
202
- lineHeight: 1.3,
203
- letterSpacing: "0px"
204
- },
205
- letterSpacing: "0px",
85
+ font: "normal 460 0.875rem/1.3 Open Sans",
86
+ letterSpacing: "0rem",
206
87
  fontWidth: 95
207
88
  },
208
89
  "body-md": {
209
- font: {
210
- fontFamily: "Open Sans",
211
- fontWeight: 460,
212
- fontSize: "16px",
213
- fontStyle: "normal",
214
- lineHeight: 1.3,
215
- letterSpacing: "0px"
216
- },
217
- letterSpacing: "0px",
90
+ font: "normal 460 1rem/1.3 Open Sans",
91
+ letterSpacing: "0rem",
218
92
  fontWidth: 95
219
93
  },
220
94
  "body-lg": {
221
- font: {
222
- fontFamily: "Open Sans",
223
- fontWeight: 460,
224
- fontSize: "18px",
225
- fontStyle: "normal",
226
- lineHeight: 1.3,
227
- letterSpacing: "0px"
228
- },
229
- letterSpacing: "0px",
95
+ font: "normal 460 1.125rem/1.3 Open Sans",
96
+ letterSpacing: "0rem",
230
97
  fontWidth: 95
231
98
  },
232
99
  "body-xl": {
233
- font: {
234
- fontFamily: "Open Sans",
235
- fontWeight: 460,
236
- fontSize: "20px",
237
- fontStyle: "normal",
238
- lineHeight: 1.3,
239
- letterSpacing: "0px"
240
- },
241
- letterSpacing: "0px",
100
+ font: "normal 460 1.25rem/1.3 Open Sans",
101
+ letterSpacing: "0rem",
242
102
  fontWidth: 95
243
103
  },
244
104
  "body-italic-sm": {
245
- font: {
246
- fontFamily: "Open Sans",
247
- fontWeight: 460,
248
- fontSize: "14px",
249
- fontStyle: "italic",
250
- lineHeight: 1.3,
251
- letterSpacing: "0px"
252
- },
253
- letterSpacing: "0px",
105
+ font: "italic 460 0.875rem/1.3 Open Sans",
106
+ letterSpacing: "0rem",
254
107
  fontWidth: 95
255
108
  },
256
109
  "body-italic-md": {
257
- font: {
258
- fontFamily: "Open Sans",
259
- fontWeight: 460,
260
- fontSize: "16px",
261
- fontStyle: "italic",
262
- lineHeight: 1.3,
263
- letterSpacing: "0px"
264
- },
265
- letterSpacing: "0px",
110
+ font: "italic 460 1rem/1.3 Open Sans",
111
+ letterSpacing: "0rem",
266
112
  fontWidth: 95
267
113
  },
268
114
  "body-italic-lg": {
269
- font: {
270
- fontFamily: "Open Sans",
271
- fontWeight: 460,
272
- fontSize: "18px",
273
- fontStyle: "italic",
274
- lineHeight: 1.3,
275
- letterSpacing: "0px"
276
- },
277
- letterSpacing: "0px",
115
+ font: "italic 460 1.125rem/1.3 Open Sans",
116
+ letterSpacing: "0rem",
278
117
  fontWidth: 95
279
118
  },
280
119
  "body-italic-xl": {
281
- font: {
282
- fontFamily: "Open Sans",
283
- fontWeight: 460,
284
- fontSize: "20px",
285
- fontStyle: "italic",
286
- lineHeight: 1.3,
287
- letterSpacing: "0px"
288
- },
289
- letterSpacing: "0px",
120
+ font: "italic 460 1.25rem/1.3 Open Sans",
121
+ letterSpacing: "0rem",
290
122
  fontWidth: 95
291
123
  },
292
124
  "body-compact-sm": {
293
- font: {
294
- fontFamily: "Open Sans",
295
- fontWeight: 460,
296
- fontSize: "14px",
297
- fontStyle: "normal",
298
- lineHeight: 1.3,
299
- letterSpacing: "0px"
300
- },
301
- letterSpacing: "0px",
125
+ font: "normal 460 0.875rem/1.3 Open Sans",
126
+ letterSpacing: "0rem",
302
127
  fontWidth: 88
303
128
  },
304
129
  "body-compact-md": {
305
- font: {
306
- fontFamily: "Open Sans",
307
- fontWeight: 460,
308
- fontSize: "16px",
309
- fontStyle: "normal",
310
- lineHeight: 1.3,
311
- letterSpacing: "0px"
312
- },
313
- letterSpacing: "0px",
130
+ font: "normal 460 1rem/1.3 Open Sans",
131
+ letterSpacing: "0rem",
314
132
  fontWidth: 88
315
133
  },
316
134
  "body-compact-lg": {
317
- font: {
318
- fontFamily: "Open Sans",
319
- fontWeight: 460,
320
- fontSize: "18px",
321
- fontStyle: "normal",
322
- lineHeight: 1.3,
323
- letterSpacing: "0px"
324
- },
325
- letterSpacing: "0px",
135
+ font: "normal 460 1.125rem/1.3 Open Sans",
136
+ letterSpacing: "0rem",
326
137
  fontWidth: 88
327
138
  },
328
139
  "body-compact-xl": {
329
- font: {
330
- fontFamily: "Open Sans",
331
- fontWeight: 460,
332
- fontSize: "20px",
333
- fontStyle: "normal",
334
- lineHeight: 1.3,
335
- letterSpacing: "0px"
336
- },
337
- letterSpacing: "0px",
140
+ font: "normal 460 1.25rem/1.3 Open Sans",
141
+ letterSpacing: "0rem",
338
142
  fontWidth: 88
339
143
  },
340
144
  "body-compact-italic-sm": {
341
- font: {
342
- fontFamily: "Open Sans",
343
- fontWeight: 460,
344
- fontSize: "14px",
345
- fontStyle: "italic",
346
- lineHeight: 1.3,
347
- letterSpacing: "0px"
348
- },
349
- letterSpacing: "0px",
145
+ font: "italic 460 0.875rem/1.3 Open Sans",
146
+ letterSpacing: "0rem",
350
147
  fontWidth: 88
351
148
  },
352
149
  "body-compact-italic-md": {
353
- font: {
354
- fontFamily: "Open Sans",
355
- fontWeight: 460,
356
- fontSize: "16px",
357
- fontStyle: "italic",
358
- lineHeight: 1.3,
359
- letterSpacing: "0px"
360
- },
361
- letterSpacing: "0px",
150
+ font: "italic 460 1rem/1.3 Open Sans",
151
+ letterSpacing: "0rem",
362
152
  fontWidth: 88
363
153
  },
364
154
  "body-compact-italic-lg": {
365
- font: {
366
- fontFamily: "Open Sans",
367
- fontWeight: 460,
368
- fontSize: "18px",
369
- fontStyle: "italic",
370
- lineHeight: 1.3,
371
- letterSpacing: "0px"
372
- },
373
- letterSpacing: "0px",
155
+ font: "italic 460 1.125rem/1.3 Open Sans",
156
+ letterSpacing: "0rem",
374
157
  fontWidth: 88
375
158
  },
376
159
  "body-compact-italic-xl": {
377
- font: {
378
- fontFamily: "Open Sans",
379
- fontWeight: 460,
380
- fontSize: "20px",
381
- fontStyle: "italic",
382
- lineHeight: 1.3,
383
- letterSpacing: "0px"
384
- },
385
- letterSpacing: "0px",
160
+ font: "italic 460 1.25rem/1.3 Open Sans",
161
+ letterSpacing: "0rem",
386
162
  fontWidth: 88
387
163
  },
388
164
  "meta-md": {
389
- font: {
390
- fontFamily: "Open Sans",
391
- fontWeight: 460,
392
- fontSize: "12px",
393
- fontStyle: "normal",
394
- lineHeight: 1.3,
395
- letterSpacing: "0px"
396
- },
397
- letterSpacing: "0px",
165
+ font: "normal 460 0.75rem/1.3 Open Sans",
166
+ letterSpacing: "0rem",
398
167
  fontWidth: 95
399
168
  },
400
169
  "meta-compact-md": {
401
- font: {
402
- fontFamily: "Open Sans",
403
- fontWeight: 460,
404
- fontSize: "12px",
405
- fontStyle: "normal",
406
- lineHeight: 1.3,
407
- letterSpacing: "0px"
408
- },
409
- letterSpacing: "0px",
170
+ font: "normal 460 0.75rem/1.3 Open Sans",
171
+ letterSpacing: "0rem",
410
172
  fontWidth: 88
411
173
  },
412
174
  "article-body-md": {
413
- font: {
414
- fontFamily: "GuardianTextEgyptian",
415
- fontWeight: 400,
416
- fontSize: "16px",
417
- fontStyle: "normal",
418
- lineHeight: 1.4,
419
- letterSpacing: "0px"
420
- },
421
- letterSpacing: "0px",
175
+ font: "normal 400 1rem/1.4 GuardianTextEgyptian",
176
+ letterSpacing: "0rem",
422
177
  fontWidth: 100
423
178
  },
424
179
  "article-body-bold-md": {
425
- font: {
426
- fontFamily: "GuardianTextEgyptian",
427
- fontWeight: 700,
428
- fontSize: "16px",
429
- fontStyle: "normal",
430
- lineHeight: 1.4,
431
- letterSpacing: "0px"
432
- },
433
- letterSpacing: "0px",
180
+ font: "normal 700 1rem/1.4 GuardianTextEgyptian",
181
+ letterSpacing: "0rem",
434
182
  fontWidth: 100
435
183
  },
436
184
  "article-body-italic-md": {
437
- font: {
438
- fontFamily: "GuardianTextEgyptian",
439
- fontWeight: 400,
440
- fontSize: "16px",
441
- fontStyle: "italic",
442
- lineHeight: 1.4,
443
- letterSpacing: "0px"
444
- },
445
- letterSpacing: "0px",
185
+ font: "italic 400 1rem/1.4 GuardianTextEgyptian",
186
+ letterSpacing: "0rem",
446
187
  fontWidth: 100
447
188
  },
448
189
  "article-body-bold-italic-md": {
449
- font: {
450
- fontFamily: "GuardianTextEgyptian",
451
- fontWeight: 700,
452
- fontSize: "16px",
453
- fontStyle: "italic",
454
- lineHeight: 1.4,
455
- letterSpacing: "0px"
456
- },
457
- letterSpacing: "0px",
190
+ font: "italic 700 1rem/1.4 GuardianTextEgyptian",
191
+ letterSpacing: "0rem",
458
192
  fontWidth: 100
459
193
  }
460
194
  };