@skyscanner/backpack-web 42.9.0-dev-v24390905836.1 → 42.9.0-dev-v24441922940.1

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 (2) hide show
  1. package/bpk-component-layout/src/theme.js +134 -119
  2. package/package.json +1 -1
package/bpk-component-layout/src/theme.js CHANGED
@@ -18,9 +18,24 @@
18
18
 
19
19
  import { defineConfig } from '@chakra-ui/react';
20
20
 
21
- // Import tokens from Backpack foundations
22
- // Note: Some tokens may not be in TypeScript definitions but exist at runtime
23
- import * as bpkTokens from '@skyscanner/bpk-foundations-web/tokens/base.es6';
21
+ // Import only the tokens we actually use from Backpack foundations
22
+ import {
23
+ // Border sizes
24
+ borderSizeSm, borderSizeLg, borderSizeXl,
25
+ // Border radii
26
+ borderRadiusXs, borderRadiusSm, borderRadiusMd, borderRadiusLg, borderRadiusXl, borderRadiusFull,
27
+ // Box shadows
28
+ boxShadowSm, boxShadowLg, boxShadowXl,
29
+ // Font sizes
30
+ fontSizeXs, fontSizeSm, fontSizeBase, fontSizeLg, fontSizeXl, fontSizeXxl, fontSizeXxxl, fontSizeXxxxl, fontSizeXxxxxl, fontSize6Xl, fontSize7Xl, fontSize8Xl,
31
+ // Line heights
32
+ lineHeightXs, lineHeightSm, lineHeightBase, lineHeightBaseTight, lineHeightLg, lineHeightLgTight, lineHeightXl, lineHeightXlTight, lineHeightXxl, lineHeightXxxl, lineHeightXxxxl, lineHeightXxxxxl, lineHeight6Xl, lineHeight7Xl, lineHeight8Xl,
33
+ // Font weights
34
+ fontWeightLight, fontWeightBook, fontWeightBold, fontWeightBlack,
35
+ // Letter spacing
36
+ letterSpacingTight, letterSpacingHero,
37
+ // Font family
38
+ fontFamilyLarken } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
24
39
  // NOTE:
25
40
  // We intentionally do not use the raw breakpoint *values* from foundations here.
26
41
  // Foundations exports breakpoint values such as `breakpointMobile = "32rem"` which
@@ -100,9 +115,9 @@ const spacingMap = {
100
115
  * These come directly from @skyscanner/bpk-foundations-web
101
116
  */
102
117
  const borderSizeMap = {
103
- 'bpk-border-size-sm': bpkTokens.borderSizeSm,
104
- 'bpk-border-size-lg': bpkTokens.borderSizeLg,
105
- 'bpk-border-size-xl': bpkTokens.borderSizeXl
118
+ 'bpk-border-size-sm': borderSizeSm,
119
+ 'bpk-border-size-lg': borderSizeLg,
120
+ 'bpk-border-size-xl': borderSizeXl
106
121
  };
107
122
 
108
123
  /**
@@ -111,12 +126,12 @@ const borderSizeMap = {
111
126
  */
112
127
  const borderRadiusMap = {
113
128
  'bpk-border-radius-none': '0',
114
- 'bpk-border-radius-xs': bpkTokens.borderRadiusXs,
115
- 'bpk-border-radius-sm': bpkTokens.borderRadiusSm,
116
- 'bpk-border-radius-md': bpkTokens.borderRadiusMd,
117
- 'bpk-border-radius-lg': bpkTokens.borderRadiusLg,
118
- 'bpk-border-radius-xl': bpkTokens.borderRadiusXl,
119
- 'bpk-border-radius-full': bpkTokens.borderRadiusFull
129
+ 'bpk-border-radius-xs': borderRadiusXs,
130
+ 'bpk-border-radius-sm': borderRadiusSm,
131
+ 'bpk-border-radius-md': borderRadiusMd,
132
+ 'bpk-border-radius-lg': borderRadiusLg,
133
+ 'bpk-border-radius-xl': borderRadiusXl,
134
+ 'bpk-border-radius-full': borderRadiusFull
120
135
  };
121
136
 
122
137
  /**
@@ -124,9 +139,9 @@ const borderRadiusMap = {
124
139
  * These come directly from @skyscanner/bpk-foundations-web
125
140
  */
126
141
  const shadowMap = {
127
- 'bpk-shadow-sm': bpkTokens.boxShadowSm,
128
- 'bpk-shadow-lg': bpkTokens.boxShadowLg,
129
- 'bpk-shadow-xl': bpkTokens.boxShadowXl
142
+ 'bpk-shadow-sm': boxShadowSm,
143
+ 'bpk-shadow-lg': boxShadowLg,
144
+ 'bpk-shadow-xl': boxShadowXl
130
145
  };
131
146
 
132
147
  /**
@@ -218,230 +233,230 @@ export function getShadowValue(token) {
218
233
  const textStylesMap = {
219
234
  xs: {
220
235
  value: {
221
- fontSize: bpkTokens.fontSizeXs,
222
- lineHeight: bpkTokens.lineHeightXs,
223
- fontWeight: bpkTokens.fontWeightBook
236
+ fontSize: fontSizeXs,
237
+ lineHeight: lineHeightXs,
238
+ fontWeight: fontWeightBook
224
239
  }
225
240
  },
226
241
  sm: {
227
242
  value: {
228
- fontSize: bpkTokens.fontSizeSm,
229
- lineHeight: bpkTokens.lineHeightSm,
230
- fontWeight: bpkTokens.fontWeightBook
243
+ fontSize: fontSizeSm,
244
+ lineHeight: lineHeightSm,
245
+ fontWeight: fontWeightBook
231
246
  }
232
247
  },
233
248
  base: {
234
249
  value: {
235
- fontSize: bpkTokens.fontSizeBase,
236
- lineHeight: bpkTokens.lineHeightBase,
237
- fontWeight: bpkTokens.fontWeightBook
250
+ fontSize: fontSizeBase,
251
+ lineHeight: lineHeightBase,
252
+ fontWeight: fontWeightBook
238
253
  }
239
254
  },
240
255
  lg: {
241
256
  value: {
242
- fontSize: bpkTokens.fontSizeLg,
243
- lineHeight: bpkTokens.lineHeightLg,
244
- fontWeight: bpkTokens.fontWeightBook
257
+ fontSize: fontSizeLg,
258
+ lineHeight: lineHeightLg,
259
+ fontWeight: fontWeightBook
245
260
  }
246
261
  },
247
262
  xl: {
248
263
  value: {
249
- fontSize: bpkTokens.fontSizeXl,
250
- lineHeight: bpkTokens.lineHeightXl,
251
- fontWeight: bpkTokens.fontWeightBook
264
+ fontSize: fontSizeXl,
265
+ lineHeight: lineHeightXl,
266
+ fontWeight: fontWeightBook
252
267
  }
253
268
  },
254
269
  xxl: {
255
270
  value: {
256
- fontSize: bpkTokens.fontSizeXxl,
257
- lineHeight: bpkTokens.lineHeightXxl,
258
- fontWeight: bpkTokens.fontWeightBold
271
+ fontSize: fontSizeXxl,
272
+ lineHeight: lineHeightXxl,
273
+ fontWeight: fontWeightBold
259
274
  }
260
275
  },
261
276
  xxxl: {
262
277
  value: {
263
- fontSize: bpkTokens.fontSizeXxxl,
264
- lineHeight: bpkTokens.lineHeightXxxl,
265
- fontWeight: bpkTokens.fontWeightBold
278
+ fontSize: fontSizeXxxl,
279
+ lineHeight: lineHeightXxxl,
280
+ fontWeight: fontWeightBold
266
281
  }
267
282
  },
268
283
  xxxxl: {
269
284
  value: {
270
- fontSize: bpkTokens.fontSizeXxxxl,
271
- lineHeight: bpkTokens.lineHeightXxxxl,
272
- fontWeight: bpkTokens.fontWeightBold,
273
- letterSpacing: bpkTokens.letterSpacingTight
285
+ fontSize: fontSizeXxxxl,
286
+ lineHeight: lineHeightXxxxl,
287
+ fontWeight: fontWeightBold,
288
+ letterSpacing: letterSpacingTight
274
289
  }
275
290
  },
276
291
  xxxxxl: {
277
292
  value: {
278
- fontSize: bpkTokens.fontSizeXxxxxl,
279
- lineHeight: bpkTokens.lineHeightXxxxxl,
280
- fontWeight: bpkTokens.fontWeightBold,
281
- letterSpacing: bpkTokens.letterSpacingTight
293
+ fontSize: fontSizeXxxxxl,
294
+ lineHeight: lineHeightXxxxxl,
295
+ fontWeight: fontWeightBold,
296
+ letterSpacing: letterSpacingTight
282
297
  }
283
298
  },
284
299
  caption: {
285
300
  value: {
286
- fontSize: bpkTokens.fontSizeXs,
287
- lineHeight: bpkTokens.lineHeightXs,
288
- fontWeight: bpkTokens.fontWeightBook
301
+ fontSize: fontSizeXs,
302
+ lineHeight: lineHeightXs,
303
+ fontWeight: fontWeightBook
289
304
  }
290
305
  },
291
306
  footnote: {
292
307
  value: {
293
- fontSize: bpkTokens.fontSizeSm,
294
- lineHeight: bpkTokens.lineHeightSm,
295
- fontWeight: bpkTokens.fontWeightBook
308
+ fontSize: fontSizeSm,
309
+ lineHeight: lineHeightSm,
310
+ fontWeight: fontWeightBook
296
311
  }
297
312
  },
298
313
  'label-1': {
299
314
  value: {
300
- fontSize: bpkTokens.fontSizeBase,
301
- lineHeight: bpkTokens.lineHeightBase,
302
- fontWeight: bpkTokens.fontWeightBold
315
+ fontSize: fontSizeBase,
316
+ lineHeight: lineHeightBase,
317
+ fontWeight: fontWeightBold
303
318
  }
304
319
  },
305
320
  'label-2': {
306
321
  value: {
307
- fontSize: bpkTokens.fontSizeSm,
308
- lineHeight: bpkTokens.lineHeightSm,
309
- fontWeight: bpkTokens.fontWeightBold
322
+ fontSize: fontSizeSm,
323
+ lineHeight: lineHeightSm,
324
+ fontWeight: fontWeightBold
310
325
  }
311
326
  },
312
327
  'label-3': {
313
328
  value: {
314
- fontSize: bpkTokens.fontSizeXs,
315
- lineHeight: bpkTokens.lineHeightXs,
316
- fontWeight: bpkTokens.fontWeightBold
329
+ fontSize: fontSizeXs,
330
+ lineHeight: lineHeightXs,
331
+ fontWeight: fontWeightBold
317
332
  }
318
333
  },
319
334
  'body-default': {
320
335
  value: {
321
- fontSize: bpkTokens.fontSizeBase,
322
- lineHeight: bpkTokens.lineHeightBase,
323
- fontWeight: bpkTokens.fontWeightBook
336
+ fontSize: fontSizeBase,
337
+ lineHeight: lineHeightBase,
338
+ fontWeight: fontWeightBook
324
339
  }
325
340
  },
326
341
  'body-longform': {
327
342
  value: {
328
- fontSize: bpkTokens.fontSizeLg,
329
- lineHeight: bpkTokens.lineHeightLg,
330
- fontWeight: bpkTokens.fontWeightBook
343
+ fontSize: fontSizeLg,
344
+ lineHeight: lineHeightLg,
345
+ fontWeight: fontWeightBook
331
346
  }
332
347
  },
333
348
  subheading: {
334
349
  value: {
335
- fontSize: bpkTokens.fontSizeXl,
336
- lineHeight: bpkTokens.lineHeightXl,
337
- fontWeight: bpkTokens.fontWeightBook
350
+ fontSize: fontSizeXl,
351
+ lineHeight: lineHeightXl,
352
+ fontWeight: fontWeightBook
338
353
  }
339
354
  },
340
355
  'heading-1': {
341
356
  value: {
342
- fontSize: bpkTokens.fontSizeXxxl,
343
- lineHeight: bpkTokens.lineHeightXxxl,
344
- fontWeight: bpkTokens.fontWeightBold
357
+ fontSize: fontSizeXxxl,
358
+ lineHeight: lineHeightXxxl,
359
+ fontWeight: fontWeightBold
345
360
  }
346
361
  },
347
362
  'heading-2': {
348
363
  value: {
349
- fontSize: bpkTokens.fontSizeXxl,
350
- lineHeight: bpkTokens.lineHeightXxl,
351
- fontWeight: bpkTokens.fontWeightBold
364
+ fontSize: fontSizeXxl,
365
+ lineHeight: lineHeightXxl,
366
+ fontWeight: fontWeightBold
352
367
  }
353
368
  },
354
369
  'heading-3': {
355
370
  value: {
356
- fontSize: bpkTokens.fontSizeXl,
357
- lineHeight: bpkTokens.lineHeightXlTight,
358
- fontWeight: bpkTokens.fontWeightBold
371
+ fontSize: fontSizeXl,
372
+ lineHeight: lineHeightXlTight,
373
+ fontWeight: fontWeightBold
359
374
  }
360
375
  },
361
376
  'heading-4': {
362
377
  value: {
363
- fontSize: bpkTokens.fontSizeLg,
364
- lineHeight: bpkTokens.lineHeightLgTight,
365
- fontWeight: bpkTokens.fontWeightBold
378
+ fontSize: fontSizeLg,
379
+ lineHeight: lineHeightLgTight,
380
+ fontWeight: fontWeightBold
366
381
  }
367
382
  },
368
383
  'heading-5': {
369
384
  value: {
370
- fontSize: bpkTokens.fontSizeBase,
371
- lineHeight: bpkTokens.lineHeightBaseTight,
372
- fontWeight: bpkTokens.fontWeightBold
385
+ fontSize: fontSizeBase,
386
+ lineHeight: lineHeightBaseTight,
387
+ fontWeight: fontWeightBold
373
388
  }
374
389
  },
375
390
  'hero-1': {
376
391
  value: {
377
- fontSize: bpkTokens.fontSize8Xl,
378
- lineHeight: bpkTokens.lineHeight8Xl,
379
- fontWeight: bpkTokens.fontWeightBlack,
380
- letterSpacing: bpkTokens.letterSpacingHero
392
+ fontSize: fontSize8Xl,
393
+ lineHeight: lineHeight8Xl,
394
+ fontWeight: fontWeightBlack,
395
+ letterSpacing: letterSpacingHero
381
396
  }
382
397
  },
383
398
  'hero-2': {
384
399
  value: {
385
- fontSize: bpkTokens.fontSize7Xl,
386
- lineHeight: bpkTokens.lineHeight7Xl,
387
- fontWeight: bpkTokens.fontWeightBlack,
388
- letterSpacing: bpkTokens.letterSpacingHero
400
+ fontSize: fontSize7Xl,
401
+ lineHeight: lineHeight7Xl,
402
+ fontWeight: fontWeightBlack,
403
+ letterSpacing: letterSpacingHero
389
404
  }
390
405
  },
391
406
  'hero-3': {
392
407
  value: {
393
- fontSize: bpkTokens.fontSize6Xl,
394
- lineHeight: bpkTokens.lineHeight6Xl,
395
- fontWeight: bpkTokens.fontWeightBlack,
396
- letterSpacing: bpkTokens.letterSpacingHero
408
+ fontSize: fontSize6Xl,
409
+ lineHeight: lineHeight6Xl,
410
+ fontWeight: fontWeightBlack,
411
+ letterSpacing: letterSpacingHero
397
412
  }
398
413
  },
399
414
  'hero-4': {
400
415
  value: {
401
- fontSize: bpkTokens.fontSizeXxxxxl,
402
- lineHeight: bpkTokens.lineHeightXxxxxl,
403
- fontWeight: bpkTokens.fontWeightBlack,
404
- letterSpacing: bpkTokens.letterSpacingHero
416
+ fontSize: fontSizeXxxxxl,
417
+ lineHeight: lineHeightXxxxxl,
418
+ fontWeight: fontWeightBlack,
419
+ letterSpacing: letterSpacingHero
405
420
  }
406
421
  },
407
422
  'hero-5': {
408
423
  value: {
409
- fontSize: bpkTokens.fontSizeXxxxl,
410
- lineHeight: bpkTokens.lineHeightXxxl,
411
- fontWeight: bpkTokens.fontWeightBlack,
412
- letterSpacing: bpkTokens.letterSpacingHero
424
+ fontSize: fontSizeXxxxl,
425
+ lineHeight: lineHeightXxxl,
426
+ fontWeight: fontWeightBlack,
427
+ letterSpacing: letterSpacingHero
413
428
  }
414
429
  },
415
430
  'hero-6': {
416
431
  value: {
417
- fontSize: bpkTokens.fontSizeXxxl,
418
- lineHeight: bpkTokens.lineHeightXxl,
419
- fontWeight: bpkTokens.fontWeightBlack,
420
- letterSpacing: bpkTokens.letterSpacingHero
432
+ fontSize: fontSizeXxxl,
433
+ lineHeight: lineHeightXxl,
434
+ fontWeight: fontWeightBlack,
435
+ letterSpacing: letterSpacingHero
421
436
  }
422
437
  },
423
438
  'editorial-1': {
424
439
  value: {
425
- fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
426
- fontSize: bpkTokens.fontSizeXxxxl,
427
- lineHeight: bpkTokens.lineHeightXxxxl,
428
- fontWeight: bpkTokens.fontWeightLight
440
+ fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
441
+ fontSize: fontSizeXxxxl,
442
+ lineHeight: lineHeightXxxxl,
443
+ fontWeight: fontWeightLight
429
444
  }
430
445
  },
431
446
  'editorial-2': {
432
447
  value: {
433
- fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
434
- fontSize: bpkTokens.fontSizeXxl,
435
- lineHeight: bpkTokens.lineHeightXxl,
436
- fontWeight: bpkTokens.fontWeightLight
448
+ fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
449
+ fontSize: fontSizeXxl,
450
+ lineHeight: lineHeightXxl,
451
+ fontWeight: fontWeightLight
437
452
  }
438
453
  },
439
454
  'editorial-3': {
440
455
  value: {
441
- fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
442
- fontSize: bpkTokens.fontSizeLg,
443
- lineHeight: bpkTokens.lineHeightLg,
444
- fontWeight: bpkTokens.fontWeightBook
456
+ fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
457
+ fontSize: fontSizeLg,
458
+ lineHeight: lineHeightLg,
459
+ fontWeight: fontWeightBook
445
460
  }
446
461
  }
447
462
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "42.9.0-dev-v24390905836.1",
3
+ "version": "42.9.0-dev-v24441922940.1",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",