uikit-react-public 0.45.0 → 0.45.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 (18) hide show
  1. package/dist/components/Paragraph/Paragraph.d.ts +1 -1
  2. package/dist/components/Text/Text.d.ts +1 -1
  3. package/dist/components/Text/__tests__/Text.test.d.ts +1 -0
  4. package/dist/index.js +5472 -5378
  5. package/lib/components/Button/Button.tsx +1 -1
  6. package/lib/components/Button/__tests__/__snapshots__/Button.test.tsx.snap +8 -8
  7. package/lib/components/FeedbackDialog/FeedbackDialog.tsx +7 -1
  8. package/lib/components/Input/Input.tsx +1 -0
  9. package/lib/components/Input/__tests__/__snapshots__/Input.test.tsx.snap +4 -4
  10. package/lib/components/Paragraph/Paragraph.tsx +13 -1
  11. package/lib/components/Paragraph/__tests__/Paragraph.test.tsx +24 -0
  12. package/lib/components/Search/__tests__/__snapshots__/Search.test.tsx.snap +2 -2
  13. package/lib/components/Text/Text.tsx +13 -0
  14. package/lib/components/Text/__tests__/Text.test.tsx +41 -0
  15. package/lib/components/Textarea/Textarea.tsx +2 -3
  16. package/lib/components/Textarea/__tests__/__snapshots__/Textarea.test.tsx.snap +4 -4
  17. package/lib/theme/common/themeCommon.ts +305 -327
  18. package/package.json +1 -1
package/lib/theme/common/themeCommon.ts CHANGED
@@ -14,30 +14,52 @@ const darkColourPrimitiveTokens = darkPrimitiveTokens.colour;
14
14
 
15
15
  const { sans, mono } = defaultPrimitiveTokens.font.family; // sans and mono
16
16
 
17
- const fontFamiliesByRef = {
17
+ const fontFamilyValuesByRef = {
18
18
  '#/font/family/sans': sans.$value.family,
19
19
  '#/font/family/mono': mono.$value.family,
20
20
  };
21
21
 
22
- const fontSettingsByRef = {
22
+ const fontSettingValuesByRef = {
23
23
  '#/font/family/sans': sans.$value.featureSettings,
24
24
  '#/font/family/mono': undefined,
25
25
  };
26
26
 
27
- type FontFamiliesByRef = typeof fontFamiliesByRef;
28
- type FontSettingsByRef = typeof fontSettingsByRef;
29
27
  type FeatureSettings = typeof sans.$value.featureSettings;
30
28
 
31
29
  const featureSettings = (featureSettingsTokenValue?: FeatureSettings) => {
32
30
  if (featureSettingsTokenValue) {
33
- return Object.entries(featureSettingsTokenValue)
34
- .map(([f, v]) => `"${f}" ${v}`)
35
- .join(', ');
31
+ return `"ss01" ${featureSettingsTokenValue.ss01}, "ss02" ${featureSettingsTokenValue.ss02}, "ss03" ${featureSettingsTokenValue.ss03}, "ss04" ${featureSettingsTokenValue.ss04}, "ss07" ${featureSettingsTokenValue.ss07}`;
36
32
  } else {
37
33
  return '';
38
34
  }
39
35
  };
40
36
 
37
+ const getFontFamily = (fontFamilyRef: string) => {
38
+ switch (fontFamilyRef) {
39
+ case '#/font/family/sans':
40
+ return fontFamilyValuesByRef['#/font/family/sans'];
41
+ case '#/font/family/mono':
42
+ return fontFamilyValuesByRef['#/font/family/mono'];
43
+ default:
44
+ throw new Error(
45
+ `Font family token "${fontFamilyRef}" was not found in design-system-foundations primitives.`
46
+ );
47
+ }
48
+ };
49
+
50
+ const getFontSettings = (fontFamilyRef: string) => {
51
+ switch (fontFamilyRef) {
52
+ case '#/font/family/sans':
53
+ return featureSettings(fontSettingValuesByRef['#/font/family/sans']);
54
+ case '#/font/family/mono':
55
+ return featureSettings(fontSettingValuesByRef['#/font/family/mono']);
56
+ default:
57
+ throw new Error(
58
+ `Font family token "${fontFamilyRef}" was not found in design-system-foundations primitives.`
59
+ );
60
+ }
61
+ };
62
+
41
63
  export const lightPrimitiveColour = {
42
64
  grey: lightColourPrimitiveTokens.grey,
43
65
  red: lightColourPrimitiveTokens.red,
@@ -64,472 +86,428 @@ export const typography = {
64
86
  heading: {
65
87
  xxl: {
66
88
  md: {
67
- fontFamily:
68
- fontFamiliesByRef[
69
- defaultThemeTokens.typography['functional-heading'].xxl.$value.md
70
- .fontFamily.$ref as keyof FontFamiliesByRef
71
- ],
72
- fontSettings: featureSettings(
73
- fontSettingsByRef[
74
- defaultThemeTokens.typography['functional-heading'].xxl.$value.md
75
- .fontFamily.$ref as keyof FontSettingsByRef
76
- ]
89
+ fontFamily: getFontFamily(
90
+ defaultThemeTokens.typography['functional-heading'].xxl.$value.md
91
+ .fontFamily.$ref
92
+ ),
93
+ fontSettings: getFontSettings(
94
+ defaultThemeTokens.typography['functional-heading'].xxl.$value.md
95
+ .fontFamily.$ref
77
96
  ),
78
97
  fontSize:
79
- defaultThemeTokens.typography['functional-heading'].xxl.$value.md.fontSize,
98
+ defaultThemeTokens.typography['functional-heading'].xxl.$value.md
99
+ .fontSize,
80
100
  fontWeight:
81
- defaultThemeTokens.typography['functional-heading'].xxl.$value.md.fontWeight,
101
+ defaultThemeTokens.typography['functional-heading'].xxl.$value.md
102
+ .fontWeight,
82
103
  lineHeight:
83
- defaultThemeTokens.typography['functional-heading'].xxl.$value.md.lineHeight,
104
+ defaultThemeTokens.typography['functional-heading'].xxl.$value.md
105
+ .lineHeight,
84
106
  },
85
107
  sm: {
86
- fontFamily:
87
- fontFamiliesByRef[
88
- defaultThemeTokens.typography['functional-heading'].xxl.$value.sm
89
- .fontFamily.$ref as keyof FontFamiliesByRef
90
- ],
91
- fontSettings: featureSettings(
92
- fontSettingsByRef[
93
- defaultThemeTokens.typography['functional-heading'].xxl.$value.sm
94
- .fontFamily.$ref as keyof FontSettingsByRef
95
- ]
108
+ fontFamily: getFontFamily(
109
+ defaultThemeTokens.typography['functional-heading'].xxl.$value.sm
110
+ .fontFamily.$ref
111
+ ),
112
+ fontSettings: getFontSettings(
113
+ defaultThemeTokens.typography['functional-heading'].xxl.$value.sm
114
+ .fontFamily.$ref
96
115
  ),
97
116
  fontSize:
98
- defaultThemeTokens.typography['functional-heading'].xxl.$value.sm.fontSize,
117
+ defaultThemeTokens.typography['functional-heading'].xxl.$value.sm
118
+ .fontSize,
99
119
  fontWeight:
100
- defaultThemeTokens.typography['functional-heading'].xxl.$value.sm.fontWeight,
120
+ defaultThemeTokens.typography['functional-heading'].xxl.$value.sm
121
+ .fontWeight,
101
122
  lineHeight:
102
- defaultThemeTokens.typography['functional-heading'].xxl.$value.sm.lineHeight,
123
+ defaultThemeTokens.typography['functional-heading'].xxl.$value.sm
124
+ .lineHeight,
103
125
  },
104
126
  },
105
127
  xl: {
106
128
  md: {
107
- fontFamily:
108
- fontFamiliesByRef[
109
- defaultThemeTokens.typography['functional-heading'].xl.$value.md.fontFamily
110
- .$ref as keyof FontFamiliesByRef
111
- ],
112
- fontSettings: featureSettings(
113
- fontSettingsByRef[
114
- defaultThemeTokens.typography['functional-heading'].xl.$value.md.fontFamily
115
- .$ref as keyof FontSettingsByRef
116
- ]
129
+ fontFamily: getFontFamily(
130
+ defaultThemeTokens.typography['functional-heading'].xl.$value.md
131
+ .fontFamily.$ref
132
+ ),
133
+ fontSettings: getFontSettings(
134
+ defaultThemeTokens.typography['functional-heading'].xl.$value.md
135
+ .fontFamily.$ref
117
136
  ),
118
137
  fontSize:
119
- defaultThemeTokens.typography['functional-heading'].xl.$value.md.fontSize,
138
+ defaultThemeTokens.typography['functional-heading'].xl.$value.md
139
+ .fontSize,
120
140
  fontWeight:
121
- defaultThemeTokens.typography['functional-heading'].xl.$value.md.fontWeight,
141
+ defaultThemeTokens.typography['functional-heading'].xl.$value.md
142
+ .fontWeight,
122
143
  lineHeight:
123
- defaultThemeTokens.typography['functional-heading'].xl.$value.md.lineHeight,
144
+ defaultThemeTokens.typography['functional-heading'].xl.$value.md
145
+ .lineHeight,
124
146
  },
125
147
  sm: {
126
- fontFamily:
127
- fontFamiliesByRef[
128
- defaultThemeTokens.typography['functional-heading'].xl.$value.sm.fontFamily
129
- .$ref as keyof FontFamiliesByRef
130
- ],
131
- fontSettings: featureSettings(
132
- fontSettingsByRef[
133
- defaultThemeTokens.typography['functional-heading'].xl.$value.sm.fontFamily
134
- .$ref as keyof FontSettingsByRef
135
- ]
148
+ fontFamily: getFontFamily(
149
+ defaultThemeTokens.typography['functional-heading'].xl.$value.sm
150
+ .fontFamily.$ref
151
+ ),
152
+ fontSettings: getFontSettings(
153
+ defaultThemeTokens.typography['functional-heading'].xl.$value.sm
154
+ .fontFamily.$ref
136
155
  ),
137
156
  fontSize:
138
- defaultThemeTokens.typography['functional-heading'].xl.$value.sm.fontSize,
157
+ defaultThemeTokens.typography['functional-heading'].xl.$value.sm
158
+ .fontSize,
139
159
  fontWeight:
140
- defaultThemeTokens.typography['functional-heading'].xl.$value.sm.fontWeight,
160
+ defaultThemeTokens.typography['functional-heading'].xl.$value.sm
161
+ .fontWeight,
141
162
  lineHeight:
142
- defaultThemeTokens.typography['functional-heading'].xl.$value.sm.lineHeight,
163
+ defaultThemeTokens.typography['functional-heading'].xl.$value.sm
164
+ .lineHeight,
143
165
  },
144
166
  },
145
167
  lg: {
146
168
  md: {
147
- fontFamily:
148
- fontFamiliesByRef[
149
- defaultThemeTokens.typography['functional-heading'].lg.$value.md.fontFamily
150
- .$ref as keyof FontFamiliesByRef
151
- ],
152
- fontSettings: featureSettings(
153
- fontSettingsByRef[
154
- defaultThemeTokens.typography['functional-heading'].lg.$value.md.fontFamily
155
- .$ref as keyof FontSettingsByRef
156
- ]
169
+ fontFamily: getFontFamily(
170
+ defaultThemeTokens.typography['functional-heading'].lg.$value.md
171
+ .fontFamily.$ref
172
+ ),
173
+ fontSettings: getFontSettings(
174
+ defaultThemeTokens.typography['functional-heading'].lg.$value.md
175
+ .fontFamily.$ref
157
176
  ),
158
177
  fontSize:
159
- defaultThemeTokens.typography['functional-heading'].lg.$value.md.fontSize,
178
+ defaultThemeTokens.typography['functional-heading'].lg.$value.md
179
+ .fontSize,
160
180
  fontWeight:
161
- defaultThemeTokens.typography['functional-heading'].lg.$value.md.fontWeight,
181
+ defaultThemeTokens.typography['functional-heading'].lg.$value.md
182
+ .fontWeight,
162
183
  lineHeight:
163
- defaultThemeTokens.typography['functional-heading'].lg.$value.md.lineHeight,
184
+ defaultThemeTokens.typography['functional-heading'].lg.$value.md
185
+ .lineHeight,
164
186
  },
165
187
  sm: {
166
- fontFamily:
167
- fontFamiliesByRef[
168
- defaultThemeTokens.typography['functional-heading'].lg.$value.sm.fontFamily
169
- .$ref as keyof FontFamiliesByRef
170
- ],
171
- fontSettings: featureSettings(
172
- fontSettingsByRef[
173
- defaultThemeTokens.typography['functional-heading'].lg.$value.sm.fontFamily
174
- .$ref as keyof FontSettingsByRef
175
- ]
188
+ fontFamily: getFontFamily(
189
+ defaultThemeTokens.typography['functional-heading'].lg.$value.sm
190
+ .fontFamily.$ref
191
+ ),
192
+ fontSettings: getFontSettings(
193
+ defaultThemeTokens.typography['functional-heading'].lg.$value.sm
194
+ .fontFamily.$ref
176
195
  ),
177
196
  fontSize:
178
- defaultThemeTokens.typography['functional-heading'].lg.$value.sm.fontSize,
197
+ defaultThemeTokens.typography['functional-heading'].lg.$value.sm
198
+ .fontSize,
179
199
  fontWeight:
180
- defaultThemeTokens.typography['functional-heading'].lg.$value.sm.fontWeight,
200
+ defaultThemeTokens.typography['functional-heading'].lg.$value.sm
201
+ .fontWeight,
181
202
  lineHeight:
182
- defaultThemeTokens.typography['functional-heading'].lg.$value.sm.lineHeight,
203
+ defaultThemeTokens.typography['functional-heading'].lg.$value.sm
204
+ .lineHeight,
183
205
  },
184
206
  },
185
207
  md: {
186
208
  md: {
187
- fontFamily:
188
- fontFamiliesByRef[
189
- defaultThemeTokens.typography['functional-heading'].md.$value.md.fontFamily
190
- .$ref as keyof FontFamiliesByRef
191
- ],
192
- fontSettings: featureSettings(
193
- fontSettingsByRef[
194
- defaultThemeTokens.typography['functional-heading'].md.$value.md.fontFamily
195
- .$ref as keyof FontSettingsByRef
196
- ]
209
+ fontFamily: getFontFamily(
210
+ defaultThemeTokens.typography['functional-heading'].md.$value.md
211
+ .fontFamily.$ref
212
+ ),
213
+ fontSettings: getFontSettings(
214
+ defaultThemeTokens.typography['functional-heading'].md.$value.md
215
+ .fontFamily.$ref
197
216
  ),
198
217
  fontSize:
199
- defaultThemeTokens.typography['functional-heading'].md.$value.md.fontSize,
218
+ defaultThemeTokens.typography['functional-heading'].md.$value.md
219
+ .fontSize,
200
220
  fontWeight:
201
- defaultThemeTokens.typography['functional-heading'].md.$value.md.fontWeight,
221
+ defaultThemeTokens.typography['functional-heading'].md.$value.md
222
+ .fontWeight,
202
223
  lineHeight:
203
- defaultThemeTokens.typography['functional-heading'].md.$value.md.lineHeight,
224
+ defaultThemeTokens.typography['functional-heading'].md.$value.md
225
+ .lineHeight,
204
226
  },
205
227
  sm: {
206
- fontFamily:
207
- fontFamiliesByRef[
208
- defaultThemeTokens.typography['functional-heading'].md.$value.sm.fontFamily
209
- .$ref as keyof FontFamiliesByRef
210
- ],
211
- fontSettings: featureSettings(
212
- fontSettingsByRef[
213
- defaultThemeTokens.typography['functional-heading'].md.$value.sm.fontFamily
214
- .$ref as keyof FontSettingsByRef
215
- ]
228
+ fontFamily: getFontFamily(
229
+ defaultThemeTokens.typography['functional-heading'].md.$value.sm
230
+ .fontFamily.$ref
231
+ ),
232
+ fontSettings: getFontSettings(
233
+ defaultThemeTokens.typography['functional-heading'].md.$value.sm
234
+ .fontFamily.$ref
216
235
  ),
217
236
  fontSize:
218
- defaultThemeTokens.typography['functional-heading'].md.$value.sm.fontSize,
237
+ defaultThemeTokens.typography['functional-heading'].md.$value.sm
238
+ .fontSize,
219
239
  fontWeight:
220
- defaultThemeTokens.typography['functional-heading'].md.$value.sm.fontWeight,
240
+ defaultThemeTokens.typography['functional-heading'].md.$value.sm
241
+ .fontWeight,
221
242
  lineHeight:
222
- defaultThemeTokens.typography['functional-heading'].md.$value.sm.lineHeight,
243
+ defaultThemeTokens.typography['functional-heading'].md.$value.sm
244
+ .lineHeight,
223
245
  },
224
246
  },
225
247
  sm: {
226
248
  md: {
227
- fontFamily:
228
- fontFamiliesByRef[
229
- defaultThemeTokens.typography['functional-heading'].sm.$value.md.fontFamily
230
- .$ref as keyof FontFamiliesByRef
231
- ],
232
- fontSettings: featureSettings(
233
- fontSettingsByRef[
234
- defaultThemeTokens.typography['functional-heading'].sm.$value.md.fontFamily
235
- .$ref as keyof FontSettingsByRef
236
- ]
249
+ fontFamily: getFontFamily(
250
+ defaultThemeTokens.typography['functional-heading'].sm.$value.md
251
+ .fontFamily.$ref
252
+ ),
253
+ fontSettings: getFontSettings(
254
+ defaultThemeTokens.typography['functional-heading'].sm.$value.md
255
+ .fontFamily.$ref
237
256
  ),
238
257
  fontSize:
239
- defaultThemeTokens.typography['functional-heading'].sm.$value.md.fontSize,
258
+ defaultThemeTokens.typography['functional-heading'].sm.$value.md
259
+ .fontSize,
240
260
  fontWeight:
241
- defaultThemeTokens.typography['functional-heading'].sm.$value.md.fontWeight,
261
+ defaultThemeTokens.typography['functional-heading'].sm.$value.md
262
+ .fontWeight,
242
263
  lineHeight:
243
- defaultThemeTokens.typography['functional-heading'].sm.$value.md.lineHeight,
264
+ defaultThemeTokens.typography['functional-heading'].sm.$value.md
265
+ .lineHeight,
244
266
  },
245
267
  sm: {
246
- fontFamily:
247
- fontFamiliesByRef[
248
- defaultThemeTokens.typography['functional-heading'].sm.$value.sm.fontFamily
249
- .$ref as keyof FontFamiliesByRef
250
- ],
251
- fontSettings: featureSettings(
252
- fontSettingsByRef[
253
- defaultThemeTokens.typography['functional-heading'].sm.$value.sm.fontFamily
254
- .$ref as keyof FontSettingsByRef
255
- ]
268
+ fontFamily: getFontFamily(
269
+ defaultThemeTokens.typography['functional-heading'].sm.$value.sm
270
+ .fontFamily.$ref
271
+ ),
272
+ fontSettings: getFontSettings(
273
+ defaultThemeTokens.typography['functional-heading'].sm.$value.sm
274
+ .fontFamily.$ref
256
275
  ),
257
276
  fontSize:
258
- defaultThemeTokens.typography['functional-heading'].sm.$value.sm.fontSize,
277
+ defaultThemeTokens.typography['functional-heading'].sm.$value.sm
278
+ .fontSize,
259
279
  fontWeight:
260
- defaultThemeTokens.typography['functional-heading'].sm.$value.sm.fontWeight,
280
+ defaultThemeTokens.typography['functional-heading'].sm.$value.sm
281
+ .fontWeight,
261
282
  lineHeight:
262
- defaultThemeTokens.typography['functional-heading'].sm.$value.sm.lineHeight,
283
+ defaultThemeTokens.typography['functional-heading'].sm.$value.sm
284
+ .lineHeight,
263
285
  },
264
286
  },
265
287
  xs: {
266
288
  md: {
267
- fontFamily:
268
- fontFamiliesByRef[
269
- defaultThemeTokens.typography['functional-heading'].xs.$value.md.fontFamily
270
- .$ref as keyof FontFamiliesByRef
271
- ],
272
- fontSettings: featureSettings(
273
- fontSettingsByRef[
274
- defaultThemeTokens.typography['functional-heading'].xs.$value.md.fontFamily
275
- .$ref as keyof FontSettingsByRef
276
- ]
289
+ fontFamily: getFontFamily(
290
+ defaultThemeTokens.typography['functional-heading'].xs.$value.md
291
+ .fontFamily.$ref
292
+ ),
293
+ fontSettings: getFontSettings(
294
+ defaultThemeTokens.typography['functional-heading'].xs.$value.md
295
+ .fontFamily.$ref
277
296
  ),
278
297
  fontSize:
279
- defaultThemeTokens.typography['functional-heading'].xs.$value.md.fontSize,
298
+ defaultThemeTokens.typography['functional-heading'].xs.$value.md
299
+ .fontSize,
280
300
  fontWeight:
281
- defaultThemeTokens.typography['functional-heading'].xs.$value.md.fontWeight,
301
+ defaultThemeTokens.typography['functional-heading'].xs.$value.md
302
+ .fontWeight,
282
303
  lineHeight:
283
- defaultThemeTokens.typography['functional-heading'].xs.$value.md.lineHeight,
304
+ defaultThemeTokens.typography['functional-heading'].xs.$value.md
305
+ .lineHeight,
284
306
  },
285
307
  sm: {
286
- fontFamily:
287
- fontFamiliesByRef[
288
- defaultThemeTokens.typography['functional-heading'].xs.$value.sm.fontFamily
289
- .$ref as keyof FontFamiliesByRef
290
- ],
291
- fontSettings: featureSettings(
292
- fontSettingsByRef[
293
- defaultThemeTokens.typography['functional-heading'].xs.$value.sm.fontFamily
294
- .$ref as keyof FontSettingsByRef
295
- ]
308
+ fontFamily: getFontFamily(
309
+ defaultThemeTokens.typography['functional-heading'].xs.$value.sm
310
+ .fontFamily.$ref
311
+ ),
312
+ fontSettings: getFontSettings(
313
+ defaultThemeTokens.typography['functional-heading'].xs.$value.sm
314
+ .fontFamily.$ref
296
315
  ),
297
316
  fontSize:
298
- defaultThemeTokens.typography['functional-heading'].xs.$value.sm.fontSize,
317
+ defaultThemeTokens.typography['functional-heading'].xs.$value.sm
318
+ .fontSize,
299
319
  fontWeight:
300
- defaultThemeTokens.typography['functional-heading'].xs.$value.sm.fontWeight,
320
+ defaultThemeTokens.typography['functional-heading'].xs.$value.sm
321
+ .fontWeight,
301
322
  lineHeight:
302
- defaultThemeTokens.typography['functional-heading'].xs.$value.sm.lineHeight,
323
+ defaultThemeTokens.typography['functional-heading'].xs.$value.sm
324
+ .lineHeight,
303
325
  },
304
326
  },
305
327
  },
306
328
  body: {
307
329
  lg: {
308
- fontFamily:
309
- fontFamiliesByRef[
310
- defaultThemeTokens.typography.body.lg.$value.fontFamily
311
- .$ref as keyof FontFamiliesByRef
312
- ],
313
- fontSettings: featureSettings(
314
- fontSettingsByRef[
315
- defaultThemeTokens.typography.body.lg.$value.fontFamily
316
- .$ref as keyof FontSettingsByRef
317
- ]
330
+ fontFamily: getFontFamily(
331
+ defaultThemeTokens.typography.body.lg.$value.fontFamily.$ref
332
+ ),
333
+ fontSettings: getFontSettings(
334
+ defaultThemeTokens.typography.body.lg.$value.fontFamily.$ref
318
335
  ),
319
336
  fontSize: defaultThemeTokens.typography.body.lg.$value.fontSize,
320
337
  fontWeight: defaultThemeTokens.typography.body.lg.$value.fontWeight,
321
338
  lineHeight: defaultThemeTokens.typography.body.lg.$value.lineHeight,
322
339
  },
323
340
  lgMedium: {
324
- fontFamily:
325
- fontFamiliesByRef[
326
- defaultThemeTokens.typography.body['lg-medium'].$value.fontFamily
327
- .$ref as keyof FontFamiliesByRef
328
- ],
329
- fontSettings: featureSettings(
330
- fontSettingsByRef[
331
- defaultThemeTokens.typography.body['lg-medium'].$value.fontFamily
332
- .$ref as keyof FontSettingsByRef
333
- ]
341
+ fontFamily: getFontFamily(
342
+ defaultThemeTokens.typography.body['lg-medium'].$value.fontFamily.$ref
343
+ ),
344
+ fontSettings: getFontSettings(
345
+ defaultThemeTokens.typography.body['lg-medium'].$value.fontFamily.$ref
334
346
  ),
335
347
  fontSize: defaultThemeTokens.typography.body['lg-medium'].$value.fontSize,
336
- fontWeight: defaultThemeTokens.typography.body['lg-medium'].$value.fontWeight,
337
- lineHeight: defaultThemeTokens.typography.body['lg-medium'].$value.lineHeight,
348
+ fontWeight:
349
+ defaultThemeTokens.typography.body['lg-medium'].$value.fontWeight,
350
+ lineHeight:
351
+ defaultThemeTokens.typography.body['lg-medium'].$value.lineHeight,
338
352
  },
339
353
  lgSemibold: {
340
- fontFamily:
341
- fontFamiliesByRef[
342
- defaultThemeTokens.typography.body['lg-semibold'].$value.fontFamily
343
- .$ref as keyof FontFamiliesByRef
344
- ],
345
- fontSettings: featureSettings(
346
- fontSettingsByRef[
347
- defaultThemeTokens.typography.body['lg-semibold'].$value.fontFamily
348
- .$ref as keyof FontSettingsByRef
349
- ]
354
+ fontFamily: getFontFamily(
355
+ defaultThemeTokens.typography.body['lg-semibold'].$value.fontFamily.$ref
356
+ ),
357
+ fontSettings: getFontSettings(
358
+ defaultThemeTokens.typography.body['lg-semibold'].$value.fontFamily.$ref
350
359
  ),
351
- fontSize: defaultThemeTokens.typography.body['lg-semibold'].$value.fontSize,
352
- fontWeight: defaultThemeTokens.typography.body['lg-semibold'].$value.fontWeight,
353
- lineHeight: defaultThemeTokens.typography.body['lg-semibold'].$value.lineHeight,
360
+ fontSize:
361
+ defaultThemeTokens.typography.body['lg-semibold'].$value.fontSize,
362
+ fontWeight:
363
+ defaultThemeTokens.typography.body['lg-semibold'].$value.fontWeight,
364
+ lineHeight:
365
+ defaultThemeTokens.typography.body['lg-semibold'].$value.lineHeight,
354
366
  },
355
367
  lgBold: {
356
- fontFamily:
357
- fontFamiliesByRef[
358
- defaultThemeTokens.typography.body['lg-bold'].$value.fontFamily
359
- .$ref as keyof FontFamiliesByRef
360
- ],
361
- fontSettings: featureSettings(
362
- fontSettingsByRef[
363
- defaultThemeTokens.typography.body['lg-bold'].$value.fontFamily
364
- .$ref as keyof FontSettingsByRef
365
- ]
368
+ fontFamily: getFontFamily(
369
+ defaultThemeTokens.typography.body['lg-bold'].$value.fontFamily.$ref
370
+ ),
371
+ fontSettings: getFontSettings(
372
+ defaultThemeTokens.typography.body['lg-bold'].$value.fontFamily.$ref
366
373
  ),
367
374
  fontSize: defaultThemeTokens.typography.body['lg-bold'].$value.fontSize,
368
- fontWeight: defaultThemeTokens.typography.body['lg-bold'].$value.fontWeight,
369
- lineHeight: defaultThemeTokens.typography.body['lg-bold'].$value.lineHeight,
375
+ fontWeight:
376
+ defaultThemeTokens.typography.body['lg-bold'].$value.fontWeight,
377
+ lineHeight:
378
+ defaultThemeTokens.typography.body['lg-bold'].$value.lineHeight,
370
379
  },
371
380
  md: {
372
- fontFamily:
373
- fontFamiliesByRef[
374
- defaultThemeTokens.typography.body['md'].$value.fontFamily
375
- .$ref as keyof FontFamiliesByRef
376
- ],
377
- fontSettings: featureSettings(
378
- fontSettingsByRef[
379
- defaultThemeTokens.typography.body['md'].$value.fontFamily
380
- .$ref as keyof FontSettingsByRef
381
- ]
381
+ fontFamily: getFontFamily(
382
+ defaultThemeTokens.typography.body['md'].$value.fontFamily.$ref
383
+ ),
384
+ fontSettings: getFontSettings(
385
+ defaultThemeTokens.typography.body['md'].$value.fontFamily.$ref
382
386
  ),
383
387
  fontSize: defaultThemeTokens.typography.body['md'].$value.fontSize,
384
388
  fontWeight: defaultThemeTokens.typography.body['md'].$value.fontWeight,
385
389
  lineHeight: defaultThemeTokens.typography.body['md'].$value.lineHeight,
386
390
  },
387
391
  mdMedium: {
388
- fontFamily:
389
- fontFamiliesByRef[
390
- defaultThemeTokens.typography.body['md-medium'].$value.fontFamily
391
- .$ref as keyof FontFamiliesByRef
392
- ],
393
- fontSettings: featureSettings(
394
- fontSettingsByRef[
395
- defaultThemeTokens.typography.body['md-medium'].$value.fontFamily
396
- .$ref as keyof FontSettingsByRef
397
- ]
392
+ fontFamily: getFontFamily(
393
+ defaultThemeTokens.typography.body['md-medium'].$value.fontFamily.$ref
394
+ ),
395
+ fontSettings: getFontSettings(
396
+ defaultThemeTokens.typography.body['md-medium'].$value.fontFamily.$ref
398
397
  ),
399
398
  fontSize: defaultThemeTokens.typography.body['md-medium'].$value.fontSize,
400
- fontWeight: defaultThemeTokens.typography.body['md-medium'].$value.fontWeight,
401
- lineHeight: defaultThemeTokens.typography.body['md-medium'].$value.lineHeight,
399
+ fontWeight:
400
+ defaultThemeTokens.typography.body['md-medium'].$value.fontWeight,
401
+ lineHeight:
402
+ defaultThemeTokens.typography.body['md-medium'].$value.lineHeight,
402
403
  },
403
404
  mdSemibold: {
404
- fontFamily:
405
- fontFamiliesByRef[
406
- defaultThemeTokens.typography.body['md-semibold'].$value.fontFamily
407
- .$ref as keyof FontFamiliesByRef
408
- ],
409
- fontSettings: featureSettings(
410
- fontSettingsByRef[
411
- defaultThemeTokens.typography.body['md-semibold'].$value.fontFamily
412
- .$ref as keyof FontSettingsByRef
413
- ]
405
+ fontFamily: getFontFamily(
406
+ defaultThemeTokens.typography.body['md-semibold'].$value.fontFamily.$ref
407
+ ),
408
+ fontSettings: getFontSettings(
409
+ defaultThemeTokens.typography.body['md-semibold'].$value.fontFamily.$ref
414
410
  ),
415
- fontSize: defaultThemeTokens.typography.body['md-semibold'].$value.fontSize,
416
- fontWeight: defaultThemeTokens.typography.body['md-semibold'].$value.fontWeight,
417
- lineHeight: defaultThemeTokens.typography.body['md-semibold'].$value.lineHeight,
411
+ fontSize:
412
+ defaultThemeTokens.typography.body['md-semibold'].$value.fontSize,
413
+ fontWeight:
414
+ defaultThemeTokens.typography.body['md-semibold'].$value.fontWeight,
415
+ lineHeight:
416
+ defaultThemeTokens.typography.body['md-semibold'].$value.lineHeight,
418
417
  },
419
418
  mdNumeric: {
420
- fontFamily:
421
- fontFamiliesByRef[
422
- defaultThemeTokens.typography.body['md-numeric'].$value.fontFamily
423
- .$ref as keyof FontFamiliesByRef
424
- ],
425
- fontSettings: featureSettings(
426
- fontSettingsByRef[
427
- defaultThemeTokens.typography.body['md-numeric'].$value.fontFamily
428
- .$ref as keyof FontSettingsByRef
429
- ]
419
+ fontFamily: getFontFamily(
420
+ defaultThemeTokens.typography.body['md-numeric'].$value.fontFamily.$ref
421
+ ),
422
+ fontSettings: getFontSettings(
423
+ defaultThemeTokens.typography.body['md-numeric'].$value.fontFamily.$ref
430
424
  ),
431
- fontSize: defaultThemeTokens.typography.body['md-numeric'].$value.fontSize,
432
- fontWeight: defaultThemeTokens.typography.body['md-numeric'].$value.fontWeight,
433
- lineHeight: defaultThemeTokens.typography.body['md-numeric'].$value.lineHeight,
425
+ fontSize:
426
+ defaultThemeTokens.typography.body['md-numeric'].$value.fontSize,
427
+ fontWeight:
428
+ defaultThemeTokens.typography.body['md-numeric'].$value.fontWeight,
429
+ lineHeight:
430
+ defaultThemeTokens.typography.body['md-numeric'].$value.lineHeight,
434
431
  },
435
432
  mdMediumNumeric: {
436
- fontFamily:
437
- fontFamiliesByRef[
438
- defaultThemeTokens.typography.body['md-medium-numeric'].$value.fontFamily
439
- .$ref as keyof FontFamiliesByRef
440
- ],
441
- fontSettings: featureSettings(
442
- fontSettingsByRef[
443
- defaultThemeTokens.typography.body['md-medium-numeric'].$value.fontFamily
444
- .$ref as keyof FontSettingsByRef
445
- ]
433
+ fontFamily: getFontFamily(
434
+ defaultThemeTokens.typography.body['md-medium-numeric'].$value
435
+ .fontFamily.$ref
436
+ ),
437
+ fontSettings: getFontSettings(
438
+ defaultThemeTokens.typography.body['md-medium-numeric'].$value
439
+ .fontFamily.$ref
446
440
  ),
447
441
  fontSize:
448
442
  defaultThemeTokens.typography.body['md-medium-numeric'].$value.fontSize,
449
443
  fontWeight:
450
- defaultThemeTokens.typography.body['md-medium-numeric'].$value.fontWeight,
444
+ defaultThemeTokens.typography.body['md-medium-numeric'].$value
445
+ .fontWeight,
451
446
  lineHeight:
452
- defaultThemeTokens.typography.body['md-medium-numeric'].$value.lineHeight,
447
+ defaultThemeTokens.typography.body['md-medium-numeric'].$value
448
+ .lineHeight,
453
449
  },
454
450
  sm: {
455
- fontFamily:
456
- fontFamiliesByRef[
457
- defaultThemeTokens.typography.body['sm'].$value.fontFamily
458
- .$ref as keyof FontFamiliesByRef
459
- ],
460
- fontSettings: featureSettings(
461
- fontSettingsByRef[
462
- defaultThemeTokens.typography.body['sm'].$value.fontFamily
463
- .$ref as keyof FontSettingsByRef
464
- ]
451
+ fontFamily: getFontFamily(
452
+ defaultThemeTokens.typography.body['sm'].$value.fontFamily.$ref
453
+ ),
454
+ fontSettings: getFontSettings(
455
+ defaultThemeTokens.typography.body['sm'].$value.fontFamily.$ref
465
456
  ),
466
457
  fontSize: defaultThemeTokens.typography.body['sm'].$value.fontSize,
467
458
  fontWeight: defaultThemeTokens.typography.body['sm'].$value.fontWeight,
468
459
  lineHeight: defaultThemeTokens.typography.body['sm'].$value.lineHeight,
469
460
  },
470
461
  smMedium: {
471
- fontFamily:
472
- fontFamiliesByRef[
473
- defaultThemeTokens.typography.body['sm-medium'].$value.fontFamily
474
- .$ref as keyof FontFamiliesByRef
475
- ],
476
- fontSettings: featureSettings(
477
- fontSettingsByRef[
478
- defaultThemeTokens.typography.body['sm-medium'].$value.fontFamily
479
- .$ref as keyof FontSettingsByRef
480
- ]
462
+ fontFamily: getFontFamily(
463
+ defaultThemeTokens.typography.body['sm-medium'].$value.fontFamily.$ref
464
+ ),
465
+ fontSettings: getFontSettings(
466
+ defaultThemeTokens.typography.body['sm-medium'].$value.fontFamily.$ref
481
467
  ),
482
468
  fontSize: defaultThemeTokens.typography.body['sm-medium'].$value.fontSize,
483
- fontWeight: defaultThemeTokens.typography.body['sm-medium'].$value.fontWeight,
484
- lineHeight: defaultThemeTokens.typography.body['sm-medium'].$value.lineHeight,
469
+ fontWeight:
470
+ defaultThemeTokens.typography.body['sm-medium'].$value.fontWeight,
471
+ lineHeight:
472
+ defaultThemeTokens.typography.body['sm-medium'].$value.lineHeight,
485
473
  },
486
474
  smSemibold: {
487
- fontFamily:
488
- fontFamiliesByRef[
489
- defaultThemeTokens.typography.body['sm-semibold'].$value.fontFamily
490
- .$ref as keyof FontFamiliesByRef
491
- ],
492
- fontSettings: featureSettings(
493
- fontSettingsByRef[
494
- defaultThemeTokens.typography.body['sm-semibold'].$value.fontFamily
495
- .$ref as keyof FontSettingsByRef
496
- ]
475
+ fontFamily: getFontFamily(
476
+ defaultThemeTokens.typography.body['sm-semibold'].$value.fontFamily.$ref
477
+ ),
478
+ fontSettings: getFontSettings(
479
+ defaultThemeTokens.typography.body['sm-semibold'].$value.fontFamily.$ref
497
480
  ),
498
- fontSize: defaultThemeTokens.typography.body['sm-semibold'].$value.fontSize,
499
- fontWeight: defaultThemeTokens.typography.body['sm-semibold'].$value.fontWeight,
500
- lineHeight: defaultThemeTokens.typography.body['sm-semibold'].$value.lineHeight,
481
+ fontSize:
482
+ defaultThemeTokens.typography.body['sm-semibold'].$value.fontSize,
483
+ fontWeight:
484
+ defaultThemeTokens.typography.body['sm-semibold'].$value.fontWeight,
485
+ lineHeight:
486
+ defaultThemeTokens.typography.body['sm-semibold'].$value.lineHeight,
501
487
  },
502
488
  xs: {
503
- fontFamily:
504
- fontFamiliesByRef[
505
- defaultThemeTokens.typography.body['xs'].$value.fontFamily
506
- .$ref as keyof FontFamiliesByRef
507
- ],
508
- fontSettings: featureSettings(
509
- fontSettingsByRef[
510
- defaultThemeTokens.typography.body['xs'].$value.fontFamily
511
- .$ref as keyof FontSettingsByRef
512
- ]
489
+ fontFamily: getFontFamily(
490
+ defaultThemeTokens.typography.body['xs'].$value.fontFamily.$ref
491
+ ),
492
+ fontSettings: getFontSettings(
493
+ defaultThemeTokens.typography.body['xs'].$value.fontFamily.$ref
513
494
  ),
514
495
  fontSize: defaultThemeTokens.typography.body['xs'].$value.fontSize,
515
496
  fontWeight: defaultThemeTokens.typography.body['xs'].$value.fontWeight,
516
497
  lineHeight: defaultThemeTokens.typography.body['xs'].$value.lineHeight,
517
498
  },
518
499
  xsMedium: {
519
- fontFamily:
520
- fontFamiliesByRef[
521
- defaultThemeTokens.typography.body['xs-medium'].$value.fontFamily
522
- .$ref as keyof FontFamiliesByRef
523
- ],
524
- fontSettings: featureSettings(
525
- fontSettingsByRef[
526
- defaultThemeTokens.typography.body['xs-medium'].$value.fontFamily
527
- .$ref as keyof FontSettingsByRef
528
- ]
500
+ fontFamily: getFontFamily(
501
+ defaultThemeTokens.typography.body['xs-medium'].$value.fontFamily.$ref
502
+ ),
503
+ fontSettings: getFontSettings(
504
+ defaultThemeTokens.typography.body['xs-medium'].$value.fontFamily.$ref
529
505
  ),
530
506
  fontSize: defaultThemeTokens.typography.body['xs-medium'].$value.fontSize,
531
- fontWeight: defaultThemeTokens.typography.body['xs-medium'].$value.fontWeight,
532
- lineHeight: defaultThemeTokens.typography.body['xs-medium'].$value.lineHeight,
507
+ fontWeight:
508
+ defaultThemeTokens.typography.body['xs-medium'].$value.fontWeight,
509
+ lineHeight:
510
+ defaultThemeTokens.typography.body['xs-medium'].$value.lineHeight,
533
511
  },
534
512
  },
535
513
  };