@expo/styleguide-native 0.5.0 → 1.0.2

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 (10) hide show
  1. package/dist/index.d.ts +2 -1
  2. package/dist/index.js +3 -1
  3. package/dist/src/icons/BuildIcon.js +1 -1
  4. package/dist/src/icons/InvoicesIcon.js +2 -2
  5. package/dist/src/styles/palette.js +23 -23
  6. package/dist/src/styles/themes.d.ts +0 -2
  7. package/dist/src/styles/themes.js +11 -13
  8. package/dist/src/styles/typography.d.ts +424 -0
  9. package/dist/src/styles/typography.js +338 -0
  10. package/package.json +2 -2
package/dist/index.d.ts CHANGED
@@ -4,5 +4,6 @@ import { lightTheme, darkTheme } from './src/styles/themes';
4
4
  import { iconSize, borderRadius } from './src/styles/sizing';
5
5
  import { spacing } from './src/styles/spacing';
6
6
  import { breakpoints } from './src/styles/breakpoints';
7
+ import { typography } from './src/styles/typography';
7
8
  export * from './src/icons';
8
- export { borderRadius, breakpoints, darkTheme, iconSize, lightTheme, palette, shadows, spacing, };
9
+ export { borderRadius, breakpoints, darkTheme, iconSize, lightTheme, palette, shadows, spacing, typography, };
package/dist/index.js CHANGED
@@ -10,7 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
10
10
  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
11
11
  };
12
12
  Object.defineProperty(exports, "__esModule", { value: true });
13
- exports.spacing = exports.shadows = exports.palette = exports.lightTheme = exports.iconSize = exports.darkTheme = exports.breakpoints = exports.borderRadius = void 0;
13
+ exports.typography = exports.spacing = exports.shadows = exports.palette = exports.lightTheme = exports.iconSize = exports.darkTheme = exports.breakpoints = exports.borderRadius = void 0;
14
14
  const palette_1 = require("./src/styles/palette");
15
15
  Object.defineProperty(exports, "palette", { enumerable: true, get: function () { return palette_1.palette; } });
16
16
  const shadows_1 = require("./src/styles/shadows");
@@ -25,4 +25,6 @@ const spacing_1 = require("./src/styles/spacing");
25
25
  Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return spacing_1.spacing; } });
26
26
  const breakpoints_1 = require("./src/styles/breakpoints");
27
27
  Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return breakpoints_1.breakpoints; } });
28
+ const typography_1 = require("./src/styles/typography");
29
+ Object.defineProperty(exports, "typography", { enumerable: true, get: function () { return typography_1.typography; } });
28
30
  __exportStar(require("./src/icons"), exports);
package/dist/src/icons/BuildIcon.js CHANGED
@@ -24,6 +24,6 @@ const react_native_svg_1 = __importStar(require("react-native-svg"));
24
24
  function BuildIcon(props) {
25
25
  const { size, color, width, height } = props;
26
26
  return (React.createElement(react_native_svg_1.default, Object.assign({ width: size || width || 20, height: size || height || 20, viewBox: "0 0 20 20", fill: "none" }, props),
27
- React.createElement(react_native_svg_1.Path, { d: "M10 18.943V9.098m0 9.845L1.964 14.92V5.08M10 18.943l8.037-4.022V5.08M10 9.098L1.964 5.08M10 9.098l8.037-4.018m-16.073 0L10 1.057l8.037 4.023", stroke: color || "#000", strokeWidth: 1.85 })));
27
+ React.createElement(react_native_svg_1.Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M10 .023l8.962 4.485v10.984L10 19.977l-8.96-4.485V4.508L10 .023zM2.89 6.576v7.773l6.186 3.096V9.67L2.89 6.576zm8.036 3.093v7.776l6.186-3.096V6.576L10.925 9.67zm5.044-4.59L10 8.064 4.031 5.079l5.97-2.987 5.968 2.987z", fill: color || "#000" })));
28
28
  }
29
29
  exports.default = BuildIcon;
package/dist/src/icons/InvoicesIcon.js CHANGED
@@ -24,7 +24,7 @@ const react_native_svg_1 = __importStar(require("react-native-svg"));
24
24
  function InvoicesIcon(props) {
25
25
  const { size, color, width, height } = props;
26
26
  return (React.createElement(react_native_svg_1.default, Object.assign({ width: size || width || 20, height: size || height || 20, viewBox: "0 0 20 20", fill: "none" }, props),
27
- React.createElement(react_native_svg_1.Path, { d: "M10.45 17.75l-.45-.27-.45.27-2.088 1.253-2.57-1.286-.484-.241-.433.324-1.767 1.325H2A1.125 1.125 0 01.875 18V3C.875 1.826 1.826.875 3 .875h14c1.174 0 2.125.951 2.125 2.125v15c0 .621-.504 1.125-1.125 1.125h-.208L16.025 17.8l-.433-.325-.483.242-2.57 1.286-2.089-1.253z", stroke: color || "#000", strokeWidth: 1.75 }),
28
- React.createElement(react_native_svg_1.Path, { d: "M4.444 5.183h11.112M4.444 7.88h11.112M4.444 10.813h9.226", stroke: color || "#000" })));
27
+ React.createElement(react_native_svg_1.Path, { d: "M.875 18.673V3C.875 1.826 1.826.875 3 .875h14c1.174 0 2.125.951 2.125 2.125v15.673l-2.28-.977-.373-.16-.363.181-2.637 1.319-3.127-1.34-.345-.148-.345.148-3.127 1.34-2.637-1.319-.363-.181-.373.16-2.28.977z", stroke: color || "#000", strokeWidth: 1.75 }),
28
+ React.createElement(react_native_svg_1.Path, { d: "M5.265 5.732h9.47M5.265 8.43h9.47m-9.47 2.933h6.123", stroke: color || "#000", strokeWidth: 1.5, strokeLinecap: "round" })));
29
29
  }
30
30
  exports.default = InvoicesIcon;
package/dist/src/styles/palette.js CHANGED
@@ -16,17 +16,17 @@ exports.palette = {
16
16
  900: '#05264c',
17
17
  },
18
18
  gray: {
19
- '000': '#fdfdfe',
20
- 100: '#f8f8fa',
21
- 200: '#f0f1f2',
22
- 300: '#e1e4e8',
23
- 400: '#d1d5da',
24
- 500: '#9b9fa3',
25
- 600: '#6c737c',
26
- 700: '#596068',
27
- 800: '#464d55',
28
- 900: '#30363c',
29
- 1000: '#25292e',
19
+ '000': '#FDFDFE',
20
+ 100: '#F8F9FA',
21
+ 200: '#F0F1F2',
22
+ 300: '#E1E4E8',
23
+ 400: '#D1D5DA',
24
+ 500: '#9B9EA3',
25
+ 600: '#6C737C',
26
+ 700: '#595F68',
27
+ 800: '#464C55',
28
+ 900: '#30353C',
29
+ 1000: '#25292E',
30
30
  },
31
31
  green: {
32
32
  '000': '#f0fff4',
@@ -129,17 +129,17 @@ exports.palette = {
129
129
  900: '#cae8ff',
130
130
  },
131
131
  gray: {
132
- '000': '#0d1117',
133
- 100: '#161b22',
134
- 200: '#21262d',
135
- 300: '#30363d',
136
- 400: '#484f58',
137
- 500: '#6e7681',
138
- 600: '#8b949e',
139
- 700: '#b1bac4',
140
- 800: '#c9d1d9',
141
- 900: '#f0f6fc',
142
- 1000: '#fdfdfe',
132
+ '000': '#0B0F13',
133
+ 100: '#14191F',
134
+ 200: '#1C2026',
135
+ 300: '#262A31',
136
+ 400: '#32373E',
137
+ 500: '#49505A',
138
+ 600: '#737B87',
139
+ 700: '#9BA4B0',
140
+ 800: '#BCC3CD',
141
+ 900: '#E0E4EB',
142
+ 1000: '#F0F2F5',
143
143
  },
144
144
  green: {
145
145
  '000': '#1a2b20',
@@ -226,6 +226,6 @@ exports.palette = {
226
226
  900: '#fae296',
227
227
  },
228
228
  white: '#fff',
229
- black: '#0d1117',
229
+ black: '#0B0F13',
230
230
  },
231
231
  };
package/dist/src/styles/themes.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  export declare const lightTheme: {
2
2
  background: {
3
3
  default: string;
4
- canvas: string;
5
4
  screen: string;
6
5
  secondary: string;
7
6
  tertiary: string;
@@ -89,7 +88,6 @@ export declare const lightTheme: {
89
88
  export declare const darkTheme: {
90
89
  background: {
91
90
  default: string;
92
- canvas: string;
93
91
  screen: string;
94
92
  secondary: string;
95
93
  tertiary: string;
package/dist/src/styles/themes.js CHANGED
@@ -5,7 +5,6 @@ const palette_1 = require("./palette");
5
5
  exports.lightTheme = {
6
6
  background: {
7
7
  default: palette_1.palette.light.white,
8
- canvas: palette_1.palette.light.gray['000'],
9
8
  screen: palette_1.palette.light.gray[100],
10
9
  secondary: palette_1.palette.light.gray[100],
11
10
  tertiary: palette_1.palette.light.gray[200],
@@ -28,15 +27,15 @@ exports.lightTheme = {
28
27
  },
29
28
  secondary: {
30
29
  background: palette_1.palette.light.gray[200],
31
- foreground: palette_1.palette.light.black,
30
+ foreground: palette_1.palette.light.gray[1000],
32
31
  },
33
32
  tertiary: {
34
- background: palette_1.palette.light.black,
35
- foreground: palette_1.palette.light.white,
33
+ background: palette_1.palette.light.gray[1000],
34
+ foreground: palette_1.palette.light.gray['000'],
36
35
  },
37
36
  transparent: {
38
37
  background: 'transparent',
39
- foreground: palette_1.palette.light.black,
38
+ foreground: palette_1.palette.light.gray[1000],
40
39
  },
41
40
  ghost: {
42
41
  background: 'transparent',
@@ -92,8 +91,7 @@ exports.lightTheme = {
92
91
  };
93
92
  exports.darkTheme = {
94
93
  background: {
95
- default: palette_1.palette.dark.gray['000'],
96
- canvas: palette_1.palette.dark.gray[100],
94
+ default: palette_1.palette.dark.gray['100'],
97
95
  screen: palette_1.palette.dark.gray['000'],
98
96
  secondary: palette_1.palette.dark.gray[200],
99
97
  tertiary: palette_1.palette.dark.gray[300],
@@ -101,7 +99,7 @@ exports.darkTheme = {
101
99
  error: palette_1.palette.dark.red['000'],
102
100
  warning: palette_1.palette.dark.yellow['000'],
103
101
  success: palette_1.palette.dark.green['000'],
104
- overlay: palette_1.palette.dark.gray[100],
102
+ overlay: palette_1.palette.dark.gray[200],
105
103
  },
106
104
  border: {
107
105
  default: palette_1.palette.dark.gray[400],
@@ -116,11 +114,11 @@ exports.darkTheme = {
116
114
  },
117
115
  secondary: {
118
116
  background: palette_1.palette.dark.gray[300],
119
- foreground: palette_1.palette.dark.white,
117
+ foreground: palette_1.palette.dark.gray[800],
120
118
  },
121
119
  tertiary: {
122
- background: palette_1.palette.dark.gray[900],
123
- foreground: palette_1.palette.dark.black,
120
+ background: palette_1.palette.dark.gray[500],
121
+ foreground: palette_1.palette.dark.gray[1000],
124
122
  },
125
123
  transparent: {
126
124
  background: 'transparent',
@@ -134,7 +132,7 @@ exports.darkTheme = {
134
132
  },
135
133
  icon: {
136
134
  default: palette_1.palette.dark.gray[800],
137
- secondary: palette_1.palette.dark.gray[600],
135
+ secondary: palette_1.palette.dark.gray[700],
138
136
  },
139
137
  link: {
140
138
  default: palette_1.palette.dark.primary[700],
@@ -148,7 +146,7 @@ exports.darkTheme = {
148
146
  },
149
147
  text: {
150
148
  default: palette_1.palette.dark.gray[800],
151
- secondary: palette_1.palette.dark.gray[600],
149
+ secondary: palette_1.palette.dark.gray[700],
152
150
  error: palette_1.palette.dark.red[600],
153
151
  warning: palette_1.palette.dark.yellow[900],
154
152
  success: palette_1.palette.dark.green[600],
package/dist/src/styles/typography.d.ts ADDED
@@ -0,0 +1,424 @@
1
+ export declare const typography: {
2
+ baseFontSize: number;
3
+ headers: {
4
+ xl: {
5
+ large: {
6
+ huge: {
7
+ fontSize: number;
8
+ lineHeight: number;
9
+ letterSpacing: number;
10
+ fontWeight: string;
11
+ };
12
+ h1: {
13
+ fontSize: number;
14
+ lineHeight: number;
15
+ letterSpacing: number;
16
+ fontWeight: string;
17
+ };
18
+ h2: {
19
+ fontSize: number;
20
+ lineHeight: number;
21
+ letterSpacing: number;
22
+ fontWeight: string;
23
+ };
24
+ h3: {
25
+ fontSize: number;
26
+ lineHeight: number;
27
+ letterSpacing: number;
28
+ fontWeight: string;
29
+ };
30
+ h4: {
31
+ fontSize: number;
32
+ lineHeight: number;
33
+ letterSpacing: number;
34
+ fontWeight: string;
35
+ };
36
+ h5: {
37
+ fontSize: number;
38
+ lineHeight: number;
39
+ letterSpacing: number;
40
+ fontWeight: string;
41
+ };
42
+ h6: {
43
+ fontSize: number;
44
+ lineHeight: number;
45
+ letterSpacing: number;
46
+ fontWeight: string;
47
+ };
48
+ };
49
+ medium: {
50
+ huge: {
51
+ fontSize: number;
52
+ lineHeight: number;
53
+ letterSpacing: number;
54
+ fontWeight: string;
55
+ };
56
+ h1: {
57
+ fontSize: number;
58
+ lineHeight: number;
59
+ letterSpacing: number;
60
+ fontWeight: string;
61
+ };
62
+ h2: {
63
+ fontSize: number;
64
+ lineHeight: number;
65
+ letterSpacing: number;
66
+ fontWeight: string;
67
+ };
68
+ h3: {
69
+ fontSize: number;
70
+ lineHeight: number;
71
+ letterSpacing: number;
72
+ fontWeight: string;
73
+ };
74
+ h4: {
75
+ fontSize: number;
76
+ lineHeight: number;
77
+ letterSpacing: number;
78
+ fontWeight: string;
79
+ };
80
+ h5: {
81
+ fontSize: number;
82
+ lineHeight: number;
83
+ letterSpacing: number;
84
+ fontWeight: string;
85
+ };
86
+ h6: {
87
+ fontSize: number;
88
+ lineHeight: number;
89
+ letterSpacing: number;
90
+ fontWeight: string;
91
+ };
92
+ };
93
+ small: {
94
+ huge: {
95
+ fontSize: number;
96
+ lineHeight: number;
97
+ letterSpacing: number;
98
+ fontWeight: string;
99
+ };
100
+ h1: {
101
+ fontSize: number;
102
+ lineHeight: number;
103
+ letterSpacing: number;
104
+ fontWeight: string;
105
+ };
106
+ h2: {
107
+ fontSize: number;
108
+ lineHeight: number;
109
+ letterSpacing: number;
110
+ fontWeight: string;
111
+ };
112
+ h3: {
113
+ fontSize: number;
114
+ lineHeight: number;
115
+ letterSpacing: number;
116
+ fontWeight: string;
117
+ };
118
+ h4: {
119
+ fontSize: number;
120
+ lineHeight: number;
121
+ letterSpacing: number;
122
+ fontWeight: string;
123
+ };
124
+ h5: {
125
+ fontSize: number;
126
+ lineHeight: number;
127
+ letterSpacing: number;
128
+ fontWeight: string;
129
+ };
130
+ h6: {
131
+ fontSize: number;
132
+ lineHeight: number;
133
+ letterSpacing: number;
134
+ fontWeight: string;
135
+ };
136
+ };
137
+ };
138
+ default: {
139
+ large: {
140
+ huge: {
141
+ fontSize: number;
142
+ lineHeight: number;
143
+ letterSpacing: number;
144
+ fontWeight: string;
145
+ };
146
+ h1: {
147
+ fontSize: number;
148
+ lineHeight: number;
149
+ letterSpacing: number;
150
+ fontWeight: string;
151
+ };
152
+ h2: {
153
+ fontSize: number;
154
+ lineHeight: number;
155
+ letterSpacing: number;
156
+ fontWeight: string;
157
+ };
158
+ h3: {
159
+ fontSize: number;
160
+ lineHeight: number;
161
+ letterSpacing: number;
162
+ fontWeight: string;
163
+ };
164
+ h4: {
165
+ fontSize: number;
166
+ lineHeight: number;
167
+ letterSpacing: number;
168
+ fontWeight: string;
169
+ };
170
+ h5: {
171
+ fontSize: number;
172
+ lineHeight: number;
173
+ letterSpacing: number;
174
+ fontWeight: string;
175
+ };
176
+ h6: {
177
+ fontSize: number;
178
+ lineHeight: number;
179
+ fontWeight: string;
180
+ };
181
+ };
182
+ medium: {
183
+ huge: {
184
+ fontSize: number;
185
+ lineHeight: number;
186
+ letterSpacing: number;
187
+ fontWeight: string;
188
+ };
189
+ h1: {
190
+ fontSize: number;
191
+ lineHeight: number;
192
+ letterSpacing: number;
193
+ fontWeight: string;
194
+ };
195
+ h2: {
196
+ fontSize: number;
197
+ lineHeight: number;
198
+ letterSpacing: number;
199
+ fontWeight: string;
200
+ };
201
+ h3: {
202
+ fontSize: number;
203
+ lineHeight: number;
204
+ letterSpacing: number;
205
+ fontWeight: string;
206
+ };
207
+ h4: {
208
+ fontSize: number;
209
+ lineHeight: number;
210
+ letterSpacing: number;
211
+ fontWeight: string;
212
+ };
213
+ h5: {
214
+ fontSize: number;
215
+ lineHeight: number;
216
+ letterSpacing: number;
217
+ fontWeight: string;
218
+ };
219
+ h6: {
220
+ fontSize: number;
221
+ lineHeight: number;
222
+ fontWeight: string;
223
+ };
224
+ };
225
+ small: {
226
+ huge: {
227
+ fontSize: number;
228
+ lineHeight: number;
229
+ letterSpacing: number;
230
+ fontWeight: string;
231
+ };
232
+ h1: {
233
+ fontSize: number;
234
+ lineHeight: number;
235
+ letterSpacing: number;
236
+ fontWeight: string;
237
+ };
238
+ h2: {
239
+ fontSize: number;
240
+ lineHeight: number;
241
+ letterSpacing: number;
242
+ fontWeight: string;
243
+ };
244
+ h3: {
245
+ fontSize: number;
246
+ lineHeight: number;
247
+ letterSpacing: number;
248
+ fontWeight: string;
249
+ };
250
+ h4: {
251
+ fontSize: number;
252
+ lineHeight: number;
253
+ letterSpacing: number;
254
+ fontWeight: string;
255
+ };
256
+ h5: {
257
+ fontSize: number;
258
+ lineHeight: number;
259
+ letterSpacing: number;
260
+ fontWeight: string;
261
+ };
262
+ h6: {
263
+ fontSize: number;
264
+ lineHeight: number;
265
+ fontWeight: string;
266
+ };
267
+ };
268
+ };
269
+ };
270
+ body: {
271
+ headline: {
272
+ fontSize: number;
273
+ lineHeight: number;
274
+ letterSpacing: number;
275
+ fontWeight: string;
276
+ };
277
+ paragraph: {
278
+ fontSize: number;
279
+ lineHeight: number;
280
+ letterSpacing: number;
281
+ fontWeight: string;
282
+ };
283
+ label: {
284
+ fontSize: number;
285
+ lineHeight: number;
286
+ letterSpacing: number;
287
+ fontWeight: string;
288
+ };
289
+ callout: {
290
+ fontSize: number;
291
+ lineHeight: number;
292
+ letterSpacing: number;
293
+ fontWeight: string;
294
+ };
295
+ footnote: {
296
+ fontSize: number;
297
+ lineHeight: number;
298
+ letterSpacing: number;
299
+ fontWeight: string;
300
+ };
301
+ caption: {
302
+ fontSize: number;
303
+ lineHeight: number;
304
+ fontWeight: string;
305
+ };
306
+ code: {
307
+ fontSize: number;
308
+ lineHeight: number;
309
+ letterSpacing: number;
310
+ fontWeight: string;
311
+ };
312
+ };
313
+ fontSizes: {
314
+ 61: {
315
+ fontSize: number;
316
+ lineHeight: number;
317
+ letterSpacing: number;
318
+ };
319
+ 53: {
320
+ fontSize: number;
321
+ lineHeight: number;
322
+ letterSpacing: number;
323
+ };
324
+ 49: {
325
+ fontSize: number;
326
+ lineHeight: number;
327
+ letterSpacing: number;
328
+ };
329
+ 46: {
330
+ fontSize: number;
331
+ lineHeight: number;
332
+ letterSpacing: number;
333
+ };
334
+ 43: {
335
+ fontSize: number;
336
+ lineHeight: number;
337
+ letterSpacing: number;
338
+ };
339
+ 39: {
340
+ fontSize: number;
341
+ lineHeight: number;
342
+ letterSpacing: number;
343
+ };
344
+ 37: {
345
+ fontSize: number;
346
+ lineHeight: number;
347
+ letterSpacing: number;
348
+ };
349
+ 34: {
350
+ fontSize: number;
351
+ lineHeight: number;
352
+ letterSpacing: number;
353
+ };
354
+ 31: {
355
+ fontSize: number;
356
+ lineHeight: number;
357
+ letterSpacing: number;
358
+ };
359
+ 29: {
360
+ fontSize: number;
361
+ lineHeight: number;
362
+ letterSpacing: number;
363
+ };
364
+ 27: {
365
+ fontSize: number;
366
+ lineHeight: number;
367
+ letterSpacing: number;
368
+ };
369
+ 25: {
370
+ fontSize: number;
371
+ lineHeight: number;
372
+ letterSpacing: number;
373
+ };
374
+ 23: {
375
+ fontSize: number;
376
+ lineHeight: number;
377
+ letterSpacing: number;
378
+ };
379
+ 22: {
380
+ fontSize: number;
381
+ lineHeight: number;
382
+ letterSpacing: number;
383
+ };
384
+ 20: {
385
+ fontSize: number;
386
+ lineHeight: number;
387
+ letterSpacing: number;
388
+ };
389
+ 19: {
390
+ fontSize: number;
391
+ lineHeight: number;
392
+ letterSpacing: number;
393
+ };
394
+ 18: {
395
+ fontSize: number;
396
+ lineHeight: number;
397
+ letterSpacing: number;
398
+ };
399
+ 16: {
400
+ fontSize: number;
401
+ lineHeight: number;
402
+ letterSpacing: number;
403
+ };
404
+ 15: {
405
+ fontSize: number;
406
+ lineHeight: number;
407
+ letterSpacing: number;
408
+ };
409
+ 14: {
410
+ fontSize: number;
411
+ lineHeight: number;
412
+ letterSpacing: number;
413
+ };
414
+ 13: {
415
+ fontSize: number;
416
+ lineHeight: number;
417
+ letterSpacing: number;
418
+ };
419
+ 12: {
420
+ fontSize: number;
421
+ lineHeight: number;
422
+ };
423
+ };
424
+ };
package/dist/src/styles/typography.js ADDED
@@ -0,0 +1,338 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.typography = void 0;
4
+ const baseFontSize = 16;
5
+ const fontSizes = {
6
+ 61: {
7
+ fontSize: 61,
8
+ lineHeight: 73,
9
+ letterSpacing: -0.022 * baseFontSize,
10
+ },
11
+ 53: {
12
+ fontSize: 53,
13
+ lineHeight: 64,
14
+ letterSpacing: -0.022 * baseFontSize,
15
+ },
16
+ 49: {
17
+ fontSize: 49,
18
+ lineHeight: 59,
19
+ letterSpacing: -0.022 * baseFontSize,
20
+ },
21
+ 46: {
22
+ fontSize: 46,
23
+ lineHeight: 55,
24
+ letterSpacing: -0.022 * baseFontSize,
25
+ },
26
+ 43: {
27
+ fontSize: 43,
28
+ lineHeight: 52,
29
+ letterSpacing: -0.022 * baseFontSize,
30
+ },
31
+ 39: {
32
+ fontSize: 39,
33
+ lineHeight: 51,
34
+ letterSpacing: -0.022 * baseFontSize,
35
+ },
36
+ 37: {
37
+ fontSize: 37,
38
+ lineHeight: 48,
39
+ letterSpacing: -0.022 * baseFontSize,
40
+ },
41
+ 34: {
42
+ fontSize: 34,
43
+ lineHeight: 44,
44
+ letterSpacing: -0.022 * baseFontSize,
45
+ },
46
+ 31: {
47
+ fontSize: 31,
48
+ lineHeight: 40,
49
+ letterSpacing: -0.021 * baseFontSize,
50
+ },
51
+ 29: {
52
+ fontSize: 29,
53
+ lineHeight: 38,
54
+ letterSpacing: -0.021 * baseFontSize,
55
+ },
56
+ 27: {
57
+ fontSize: 27,
58
+ lineHeight: 36,
59
+ letterSpacing: -0.021 * baseFontSize,
60
+ },
61
+ 25: {
62
+ fontSize: 25,
63
+ lineHeight: 35,
64
+ letterSpacing: -0.021 * baseFontSize,
65
+ },
66
+ 23: {
67
+ fontSize: 23,
68
+ lineHeight: 32,
69
+ letterSpacing: -0.019 * baseFontSize,
70
+ },
71
+ 22: {
72
+ fontSize: 22,
73
+ lineHeight: 31,
74
+ letterSpacing: -0.018 * baseFontSize,
75
+ },
76
+ 20: {
77
+ fontSize: 20,
78
+ lineHeight: 30,
79
+ letterSpacing: -0.017 * baseFontSize,
80
+ },
81
+ 19: {
82
+ fontSize: 19,
83
+ lineHeight: 29,
84
+ letterSpacing: -0.015 * baseFontSize,
85
+ },
86
+ 18: {
87
+ fontSize: 18,
88
+ lineHeight: 28,
89
+ letterSpacing: -0.014 * baseFontSize,
90
+ },
91
+ 16: {
92
+ fontSize: 16,
93
+ lineHeight: 26,
94
+ letterSpacing: -0.011 * baseFontSize,
95
+ },
96
+ 15: {
97
+ fontSize: 15,
98
+ lineHeight: 24,
99
+ letterSpacing: -0.009 * baseFontSize,
100
+ },
101
+ 14: {
102
+ fontSize: 14,
103
+ lineHeight: 22,
104
+ letterSpacing: -0.006 * baseFontSize,
105
+ },
106
+ 13: {
107
+ fontSize: 13,
108
+ lineHeight: 21,
109
+ letterSpacing: -0.003 * baseFontSize,
110
+ },
111
+ 12: {
112
+ fontSize: 12,
113
+ lineHeight: 19,
114
+ },
115
+ };
116
+ const headers = {
117
+ xl: {
118
+ large: {
119
+ huge: {
120
+ fontWeight: '900',
121
+ ...fontSizes[61],
122
+ },
123
+ h1: {
124
+ fontWeight: '600',
125
+ ...fontSizes[49],
126
+ },
127
+ h2: {
128
+ fontWeight: '600',
129
+ ...fontSizes[39],
130
+ },
131
+ h3: {
132
+ fontWeight: '600',
133
+ ...fontSizes[31],
134
+ },
135
+ h4: {
136
+ fontWeight: '600',
137
+ ...fontSizes[25],
138
+ },
139
+ h5: {
140
+ fontWeight: '600',
141
+ ...fontSizes[20],
142
+ },
143
+ h6: {
144
+ fontWeight: '600',
145
+ ...fontSizes[16],
146
+ },
147
+ },
148
+ medium: {
149
+ huge: {
150
+ fontWeight: '900',
151
+ ...fontSizes[53],
152
+ },
153
+ h1: {
154
+ fontWeight: '600',
155
+ ...fontSizes[43],
156
+ },
157
+ h2: {
158
+ fontWeight: '600',
159
+ ...fontSizes[34],
160
+ },
161
+ h3: {
162
+ fontWeight: '600',
163
+ ...fontSizes[27],
164
+ },
165
+ h4: {
166
+ fontWeight: '600',
167
+ ...fontSizes[22],
168
+ },
169
+ h5: {
170
+ fontWeight: '600',
171
+ ...fontSizes[18],
172
+ },
173
+ h6: {
174
+ fontWeight: '600',
175
+ ...fontSizes[16],
176
+ },
177
+ },
178
+ small: {
179
+ huge: {
180
+ fontWeight: '900',
181
+ ...fontSizes[46],
182
+ },
183
+ h1: {
184
+ fontWeight: '600',
185
+ ...fontSizes[37],
186
+ },
187
+ h2: {
188
+ fontWeight: '600',
189
+ ...fontSizes[29],
190
+ },
191
+ h3: {
192
+ fontWeight: '600',
193
+ ...fontSizes[23],
194
+ },
195
+ h4: {
196
+ fontWeight: '600',
197
+ ...fontSizes[19],
198
+ },
199
+ h5: {
200
+ fontWeight: '600',
201
+ ...fontSizes[16],
202
+ },
203
+ h6: {
204
+ fontWeight: '600',
205
+ ...fontSizes[16],
206
+ },
207
+ },
208
+ },
209
+ default: {
210
+ large: {
211
+ huge: {
212
+ fontWeight: '900',
213
+ ...fontSizes[39],
214
+ },
215
+ h1: {
216
+ fontWeight: '600',
217
+ ...fontSizes[31],
218
+ },
219
+ h2: {
220
+ fontWeight: '600',
221
+ ...fontSizes[25],
222
+ },
223
+ h3: {
224
+ fontWeight: '600',
225
+ ...fontSizes[20],
226
+ },
227
+ h4: {
228
+ fontWeight: '600',
229
+ ...fontSizes[16],
230
+ },
231
+ h5: {
232
+ fontWeight: '600',
233
+ ...fontSizes[13],
234
+ },
235
+ h6: {
236
+ fontWeight: '600',
237
+ ...fontSizes[12],
238
+ },
239
+ },
240
+ medium: {
241
+ huge: {
242
+ fontWeight: '900',
243
+ ...fontSizes[34],
244
+ },
245
+ h1: {
246
+ fontWeight: '600',
247
+ ...fontSizes[27],
248
+ },
249
+ h2: {
250
+ fontWeight: '600',
251
+ ...fontSizes[22],
252
+ },
253
+ h3: {
254
+ fontWeight: '600',
255
+ ...fontSizes[18],
256
+ },
257
+ h4: {
258
+ fontWeight: '600',
259
+ ...fontSizes[16],
260
+ },
261
+ h5: {
262
+ fontWeight: '600',
263
+ ...fontSizes[13],
264
+ },
265
+ h6: {
266
+ fontWeight: '600',
267
+ ...fontSizes[12],
268
+ },
269
+ },
270
+ small: {
271
+ huge: {
272
+ fontWeight: '900',
273
+ ...fontSizes[29],
274
+ },
275
+ h1: {
276
+ fontWeight: '600',
277
+ ...fontSizes[23],
278
+ },
279
+ h2: {
280
+ fontWeight: '600',
281
+ ...fontSizes[19],
282
+ },
283
+ h3: {
284
+ fontWeight: '600',
285
+ ...fontSizes[16],
286
+ },
287
+ h4: {
288
+ fontWeight: '600',
289
+ ...fontSizes[16],
290
+ },
291
+ h5: {
292
+ fontWeight: '600',
293
+ ...fontSizes[13],
294
+ },
295
+ h6: {
296
+ fontWeight: '600',
297
+ ...fontSizes[12],
298
+ },
299
+ },
300
+ },
301
+ };
302
+ const baseStyle = {
303
+ fontWeight: '400',
304
+ ...fontSizes[16],
305
+ };
306
+ const body = {
307
+ headline: {
308
+ fontWeight: '500',
309
+ ...fontSizes[16],
310
+ },
311
+ paragraph: baseStyle,
312
+ label: {
313
+ fontWeight: '500',
314
+ ...fontSizes[15],
315
+ },
316
+ callout: {
317
+ fontWeight: '400',
318
+ ...fontSizes[14],
319
+ },
320
+ footnote: {
321
+ fontWeight: '400',
322
+ ...fontSizes[13],
323
+ },
324
+ caption: {
325
+ fontWeight: '400',
326
+ ...fontSizes[12],
327
+ },
328
+ code: {
329
+ fontWeight: '400',
330
+ ...fontSizes[13],
331
+ },
332
+ };
333
+ exports.typography = {
334
+ baseFontSize,
335
+ headers,
336
+ body,
337
+ fontSizes,
338
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@expo/styleguide-native",
3
- "version": "0.5.0",
3
+ "version": "1.0.2",
4
4
  "description": "Foundational styles for Expo interfaces.",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -33,5 +33,5 @@
33
33
  "react": "*",
34
34
  "react-native-svg": "*"
35
35
  },
36
- "gitHead": "8d911a8cabf7f8d707de511dbfab8703dade81c1"
36
+ "gitHead": "a43ff0bf6249689c8dfb4ef8ce7fbd65ab5c24b5"
37
37
  }