@penskemediacorp/larva-tokens 1.8.0 → 1.11.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 (16) hide show
  1. package/build/variety-vip.custom-properties.css +8 -8
  2. package/build/variety-vip.json +8 -8
  3. package/build/variety-vip.map.scss +8 -8
  4. package/build/variety-vip.raw.json +16 -16
  5. package/build/variety.custom-properties.css +8 -8
  6. package/build/variety.json +8 -8
  7. package/build/variety.map.scss +8 -8
  8. package/build/variety.raw.json +16 -16
  9. package/build/vibe.custom-properties.css +4 -0
  10. package/build/vibe.json +3 -1
  11. package/build/vibe.map.scss +4 -0
  12. package/build/vibe.raw.json +16 -0
  13. package/package.json +2 -2
  14. package/style-guides/variety-vip.html +16 -16
  15. package/style-guides/variety.html +16 -16
  16. package/style-guides/vibe.html +34 -0
package/build/variety-vip.custom-properties.css CHANGED
@@ -75,7 +75,7 @@
75
75
  --primary-l-font-size-mobile: 24px;
76
76
  --body-xxl-font-size-mobile: initial;
77
77
  --basic-s-font-size-desktop-xl: initial;
78
- --secondary-m-font-size-desktop-xl: 14px;
78
+ --secondary-m-font-size-desktop-xl: 18px;
79
79
  --basic-xxs-font-size-desktop-xl: initial;
80
80
  --basic-xs-font-size-mobile: initial;
81
81
  --secondary-l-font-size-desktop-xl: 21px;
@@ -130,7 +130,7 @@
130
130
  --secondary-l-font-size-desktop: 18px;
131
131
  --secondary-regular-m-font-size-mobile: 16px;
132
132
  --accent-xxs-font-size-mobile: 14px;
133
- --secondary-m-font-size-desktop: initial;
133
+ --secondary-m-font-size-desktop: 18px;
134
134
  --basic-s-font-size-desktop: initial;
135
135
  --basic-xxs-font-size-desktop: initial;
136
136
  --accent-s-font-size-mobile: 23px;
@@ -326,7 +326,7 @@
326
326
  --basic-xxs-font-weight-desktop: normal;
327
327
  --accent-xs-font-weight-mobile: 300;
328
328
  --basic-xl-font-weight-desktop-xl: normal;
329
- --secondary-m-font-weight-desktop: 600;
329
+ --secondary-m-font-weight-desktop: bold;
330
330
  --basic-s-font-weight-desktop: normal;
331
331
  --primary-m-font-weight-mobile: normal;
332
332
  --primary-xxl-font-weight-mobile: normal;
@@ -336,7 +336,7 @@
336
336
  --basic-xl-font-weight-desktop: normal;
337
337
  --basic-xxs-font-weight-desktop-xl: normal;
338
338
  --basic-s-font-weight-desktop-xl: normal;
339
- --secondary-m-font-weight-desktop-xl: 600;
339
+ --secondary-m-font-weight-desktop-xl: bold;
340
340
  --secondary-l-font-weight-desktop-xl: bold;
341
341
  --secondary-xxl-font-weight-desktop-xl: normal;
342
342
  --basic-xs-font-weight-mobile: normal;
@@ -371,7 +371,7 @@
371
371
  --basic-xxs-font-weight-mobile: normal;
372
372
  --accent-xs-font-weight-desktop: 300;
373
373
  --basic-s-font-weight-mobile: normal;
374
- --secondary-m-font-weight-mobile: 600;
374
+ --secondary-m-font-weight-mobile: bold;
375
375
  --primary-xl-font-weight-desktop: normal;
376
376
  --body-xxxl-font-weight-desktop: normal;
377
377
  --body-xl-font-weight-desktop: normal;
@@ -392,7 +392,7 @@
392
392
  --primary-xxs-font-weight-desktop: 700;
393
393
  --body-xl-font-weight-desktop-xl: normal;
394
394
  --body-xxxl-font-weight-desktop-xl: normal;
395
- --primary-xl-font-weight-desktop-xl: 700;
395
+ --primary-xl-font-weight-desktop-xl: normal;
396
396
  --accent-xs-font-weight-desktop-xl: 300;
397
397
  --accent-regular-xxs-font-weight-mobile: 400;
398
398
  --accent-l-font-weight-desktop: 300;
@@ -413,7 +413,7 @@
413
413
  --body-m-line-height-desktop: 24px;
414
414
  --primary-m-line-height-desktop: 27px;
415
415
  --basic-s-line-height-desktop-xl: initial;
416
- --secondary-m-line-height-desktop-xl: 17px;
416
+ --secondary-m-line-height-desktop-xl: 21px;
417
417
  --body-xxxl-line-height-desktop: initial;
418
418
  --primary-xl-line-height-desktop: 32px;
419
419
  --body-xl-line-height-desktop: initial;
@@ -472,7 +472,7 @@
472
472
  --accent-xxs-line-height-mobile: 0.4px;
473
473
  --secondary-xxl-line-height-desktop: initial;
474
474
  --secondary-l-line-height-desktop: 21px;
475
- --secondary-m-line-height-desktop: initial;
475
+ --secondary-m-line-height-desktop: 21px;
476
476
  --basic-s-line-height-desktop: initial;
477
477
  --body-xl-line-height-desktop-xl: initial;
478
478
  --primary-xl-line-height-desktop-xl: 36px;
package/build/variety-vip.json CHANGED
@@ -64,7 +64,7 @@
64
64
  "PRIMARY_L_FONT_SIZE_MOBILE": "24px",
65
65
  "BODY_XXL_FONT_SIZE_MOBILE": "initial",
66
66
  "BASIC_S_FONT_SIZE_DESKTOP_XL": "initial",
67
- "SECONDARY_M_FONT_SIZE_DESKTOP_XL": "14px",
67
+ "SECONDARY_M_FONT_SIZE_DESKTOP_XL": "18px",
68
68
  "BASIC_XXS_FONT_SIZE_DESKTOP_XL": "initial",
69
69
  "BASIC_XS_FONT_SIZE_MOBILE": "initial",
70
70
  "SECONDARY_L_FONT_SIZE_DESKTOP_XL": "21px",
@@ -119,7 +119,7 @@
119
119
  "SECONDARY_L_FONT_SIZE_DESKTOP": "18px",
120
120
  "SECONDARY_REGULAR_M_FONT_SIZE_MOBILE": "16px",
121
121
  "ACCENT_XXS_FONT_SIZE_MOBILE": "14px",
122
- "SECONDARY_M_FONT_SIZE_DESKTOP": "initial",
122
+ "SECONDARY_M_FONT_SIZE_DESKTOP": "18px",
123
123
  "BASIC_S_FONT_SIZE_DESKTOP": "initial",
124
124
  "BASIC_XXS_FONT_SIZE_DESKTOP": "initial",
125
125
  "ACCENT_S_FONT_SIZE_MOBILE": "23px",
@@ -315,7 +315,7 @@
315
315
  "BASIC_XXS_FONT_WEIGHT_DESKTOP": "normal",
316
316
  "ACCENT_XS_FONT_WEIGHT_MOBILE": "300",
317
317
  "BASIC_XL_FONT_WEIGHT_DESKTOP_XL": "normal",
318
- "SECONDARY_M_FONT_WEIGHT_DESKTOP": "600",
318
+ "SECONDARY_M_FONT_WEIGHT_DESKTOP": "bold",
319
319
  "BASIC_S_FONT_WEIGHT_DESKTOP": "normal",
320
320
  "PRIMARY_M_FONT_WEIGHT_MOBILE": "normal",
321
321
  "PRIMARY_XXL_FONT_WEIGHT_MOBILE": "normal",
@@ -325,7 +325,7 @@
325
325
  "BASIC_XL_FONT_WEIGHT_DESKTOP": "normal",
326
326
  "BASIC_XXS_FONT_WEIGHT_DESKTOP_XL": "normal",
327
327
  "BASIC_S_FONT_WEIGHT_DESKTOP_XL": "normal",
328
- "SECONDARY_M_FONT_WEIGHT_DESKTOP_XL": "600",
328
+ "SECONDARY_M_FONT_WEIGHT_DESKTOP_XL": "bold",
329
329
  "SECONDARY_L_FONT_WEIGHT_DESKTOP_XL": "bold",
330
330
  "SECONDARY_XXL_FONT_WEIGHT_DESKTOP_XL": "normal",
331
331
  "BASIC_XS_FONT_WEIGHT_MOBILE": "normal",
@@ -360,7 +360,7 @@
360
360
  "BASIC_XXS_FONT_WEIGHT_MOBILE": "normal",
361
361
  "ACCENT_XS_FONT_WEIGHT_DESKTOP": "300",
362
362
  "BASIC_S_FONT_WEIGHT_MOBILE": "normal",
363
- "SECONDARY_M_FONT_WEIGHT_MOBILE": "600",
363
+ "SECONDARY_M_FONT_WEIGHT_MOBILE": "bold",
364
364
  "PRIMARY_XL_FONT_WEIGHT_DESKTOP": "normal",
365
365
  "BODY_XXXL_FONT_WEIGHT_DESKTOP": "normal",
366
366
  "BODY_XL_FONT_WEIGHT_DESKTOP": "normal",
@@ -381,7 +381,7 @@
381
381
  "PRIMARY_XXS_FONT_WEIGHT_DESKTOP": "700",
382
382
  "BODY_XL_FONT_WEIGHT_DESKTOP_XL": "normal",
383
383
  "BODY_XXXL_FONT_WEIGHT_DESKTOP_XL": "normal",
384
- "PRIMARY_XL_FONT_WEIGHT_DESKTOP_XL": "700",
384
+ "PRIMARY_XL_FONT_WEIGHT_DESKTOP_XL": "normal",
385
385
  "ACCENT_XS_FONT_WEIGHT_DESKTOP_XL": "300",
386
386
  "ACCENT_REGULAR_XXS_FONT_WEIGHT_MOBILE": "400",
387
387
  "ACCENT_L_FONT_WEIGHT_DESKTOP": "300",
@@ -402,7 +402,7 @@
402
402
  "BODY_M_LINE_HEIGHT_DESKTOP": "24px",
403
403
  "PRIMARY_M_LINE_HEIGHT_DESKTOP": "27px",
404
404
  "BASIC_S_LINE_HEIGHT_DESKTOP_XL": "initial",
405
- "SECONDARY_M_LINE_HEIGHT_DESKTOP_XL": "17px",
405
+ "SECONDARY_M_LINE_HEIGHT_DESKTOP_XL": "21px",
406
406
  "BODY_XXXL_LINE_HEIGHT_DESKTOP": "initial",
407
407
  "PRIMARY_XL_LINE_HEIGHT_DESKTOP": "32px",
408
408
  "BODY_XL_LINE_HEIGHT_DESKTOP": "initial",
@@ -461,7 +461,7 @@
461
461
  "ACCENT_XXS_LINE_HEIGHT_MOBILE": "0.4px",
462
462
  "SECONDARY_XXL_LINE_HEIGHT_DESKTOP": "initial",
463
463
  "SECONDARY_L_LINE_HEIGHT_DESKTOP": "21px",
464
- "SECONDARY_M_LINE_HEIGHT_DESKTOP": "initial",
464
+ "SECONDARY_M_LINE_HEIGHT_DESKTOP": "21px",
465
465
  "BASIC_S_LINE_HEIGHT_DESKTOP": "initial",
466
466
  "BODY_XL_LINE_HEIGHT_DESKTOP_XL": "initial",
467
467
  "PRIMARY_XL_LINE_HEIGHT_DESKTOP_XL": "36px",
package/build/variety-vip.map.scss CHANGED
@@ -75,7 +75,7 @@ $variety-vip-map: (
75
75
  'primary-l-font-size-mobile': (24px),
76
76
  'body-xxl-font-size-mobile': (initial),
77
77
  'basic-s-font-size-desktop-xl': (initial),
78
- 'secondary-m-font-size-desktop-xl': (14px),
78
+ 'secondary-m-font-size-desktop-xl': (18px),
79
79
  'basic-xxs-font-size-desktop-xl': (initial),
80
80
  'basic-xs-font-size-mobile': (initial),
81
81
  'secondary-l-font-size-desktop-xl': (21px),
@@ -130,7 +130,7 @@ $variety-vip-map: (
130
130
  'secondary-l-font-size-desktop': (18px),
131
131
  'secondary-regular-m-font-size-mobile': (16px),
132
132
  'accent-xxs-font-size-mobile': (14px),
133
- 'secondary-m-font-size-desktop': (initial),
133
+ 'secondary-m-font-size-desktop': (18px),
134
134
  'basic-s-font-size-desktop': (initial),
135
135
  'basic-xxs-font-size-desktop': (initial),
136
136
  'accent-s-font-size-mobile': (23px),
@@ -326,7 +326,7 @@ $variety-vip-map: (
326
326
  'basic-xxs-font-weight-desktop': (normal),
327
327
  'accent-xs-font-weight-mobile': (300),
328
328
  'basic-xl-font-weight-desktop-xl': (normal),
329
- 'secondary-m-font-weight-desktop': (600),
329
+ 'secondary-m-font-weight-desktop': (bold),
330
330
  'basic-s-font-weight-desktop': (normal),
331
331
  'primary-m-font-weight-mobile': (normal),
332
332
  'primary-xxl-font-weight-mobile': (normal),
@@ -336,7 +336,7 @@ $variety-vip-map: (
336
336
  'basic-xl-font-weight-desktop': (normal),
337
337
  'basic-xxs-font-weight-desktop-xl': (normal),
338
338
  'basic-s-font-weight-desktop-xl': (normal),
339
- 'secondary-m-font-weight-desktop-xl': (600),
339
+ 'secondary-m-font-weight-desktop-xl': (bold),
340
340
  'secondary-l-font-weight-desktop-xl': (bold),
341
341
  'secondary-xxl-font-weight-desktop-xl': (normal),
342
342
  'basic-xs-font-weight-mobile': (normal),
@@ -371,7 +371,7 @@ $variety-vip-map: (
371
371
  'basic-xxs-font-weight-mobile': (normal),
372
372
  'accent-xs-font-weight-desktop': (300),
373
373
  'basic-s-font-weight-mobile': (normal),
374
- 'secondary-m-font-weight-mobile': (600),
374
+ 'secondary-m-font-weight-mobile': (bold),
375
375
  'primary-xl-font-weight-desktop': (normal),
376
376
  'body-xxxl-font-weight-desktop': (normal),
377
377
  'body-xl-font-weight-desktop': (normal),
@@ -392,7 +392,7 @@ $variety-vip-map: (
392
392
  'primary-xxs-font-weight-desktop': (700),
393
393
  'body-xl-font-weight-desktop-xl': (normal),
394
394
  'body-xxxl-font-weight-desktop-xl': (normal),
395
- 'primary-xl-font-weight-desktop-xl': (700),
395
+ 'primary-xl-font-weight-desktop-xl': (normal),
396
396
  'accent-xs-font-weight-desktop-xl': (300),
397
397
  'accent-regular-xxs-font-weight-mobile': (400),
398
398
  'accent-l-font-weight-desktop': (300),
@@ -413,7 +413,7 @@ $variety-vip-map: (
413
413
  'body-m-line-height-desktop': (24px),
414
414
  'primary-m-line-height-desktop': (27px),
415
415
  'basic-s-line-height-desktop-xl': (initial),
416
- 'secondary-m-line-height-desktop-xl': (17px),
416
+ 'secondary-m-line-height-desktop-xl': (21px),
417
417
  'body-xxxl-line-height-desktop': (initial),
418
418
  'primary-xl-line-height-desktop': (32px),
419
419
  'body-xl-line-height-desktop': (initial),
@@ -472,7 +472,7 @@ $variety-vip-map: (
472
472
  'accent-xxs-line-height-mobile': (0.4px),
473
473
  'secondary-xxl-line-height-desktop': (initial),
474
474
  'secondary-l-line-height-desktop': (21px),
475
- 'secondary-m-line-height-desktop': (initial),
475
+ 'secondary-m-line-height-desktop': (21px),
476
476
  'basic-s-line-height-desktop': (initial),
477
477
  'body-xl-line-height-desktop-xl': (initial),
478
478
  'primary-xl-line-height-desktop-xl': (36px),
package/build/variety-vip.raw.json CHANGED
@@ -698,8 +698,8 @@
698
698
  "status": "alpha",
699
699
  "category": "font-size",
700
700
  "type": "number",
701
- "value": "14px",
702
- "originalValue": "14px",
701
+ "value": "18px",
702
+ "originalValue": "18px",
703
703
  "name": "SECONDARY_M_FONT_SIZE_DESKTOP_XL"
704
704
  },
705
705
  "BASIC_XXS_FONT_SIZE_DESKTOP_XL": {
@@ -1143,8 +1143,8 @@
1143
1143
  "status": "alpha",
1144
1144
  "category": "font-size",
1145
1145
  "type": "number",
1146
- "value": "initial",
1147
- "originalValue": "initial",
1146
+ "value": "18px",
1147
+ "originalValue": "18px",
1148
1148
  "name": "SECONDARY_M_FONT_SIZE_DESKTOP"
1149
1149
  },
1150
1150
  "BASIC_S_FONT_SIZE_DESKTOP": {
@@ -2619,8 +2619,8 @@
2619
2619
  "status": "alpha",
2620
2620
  "category": "font-weight",
2621
2621
  "type": "number",
2622
- "value": "600",
2623
- "originalValue": "600",
2622
+ "value": "bold",
2623
+ "originalValue": "bold",
2624
2624
  "name": "SECONDARY_M_FONT_WEIGHT_DESKTOP"
2625
2625
  },
2626
2626
  "BASIC_S_FONT_WEIGHT_DESKTOP": {
@@ -2695,8 +2695,8 @@
2695
2695
  "status": "alpha",
2696
2696
  "category": "font-weight",
2697
2697
  "type": "number",
2698
- "value": "600",
2699
- "originalValue": "600",
2698
+ "value": "bold",
2699
+ "originalValue": "bold",
2700
2700
  "name": "SECONDARY_M_FONT_WEIGHT_DESKTOP_XL"
2701
2701
  },
2702
2702
  "SECONDARY_L_FONT_WEIGHT_DESKTOP_XL": {
@@ -2968,8 +2968,8 @@
2968
2968
  "status": "alpha",
2969
2969
  "category": "font-weight",
2970
2970
  "type": "number",
2971
- "value": "600",
2972
- "originalValue": "600",
2971
+ "value": "bold",
2972
+ "originalValue": "bold",
2973
2973
  "name": "SECONDARY_M_FONT_WEIGHT_MOBILE"
2974
2974
  },
2975
2975
  "PRIMARY_XL_FONT_WEIGHT_DESKTOP": {
@@ -3133,8 +3133,8 @@
3133
3133
  "status": "alpha",
3134
3134
  "category": "font-weight",
3135
3135
  "type": "number",
3136
- "value": "700",
3137
- "originalValue": "700",
3136
+ "value": "normal",
3137
+ "originalValue": "normal",
3138
3138
  "name": "PRIMARY_XL_FONT_WEIGHT_DESKTOP_XL"
3139
3139
  },
3140
3140
  "ACCENT_XS_FONT_WEIGHT_DESKTOP_XL": {
@@ -3304,8 +3304,8 @@
3304
3304
  "status": "alpha",
3305
3305
  "category": "line-height",
3306
3306
  "type": "number",
3307
- "value": "17px",
3308
- "originalValue": "17px",
3307
+ "value": "21px",
3308
+ "originalValue": "21px",
3309
3309
  "name": "SECONDARY_M_LINE_HEIGHT_DESKTOP_XL"
3310
3310
  },
3311
3311
  "BODY_XXXL_LINE_HEIGHT_DESKTOP": {
@@ -3781,8 +3781,8 @@
3781
3781
  "status": "alpha",
3782
3782
  "category": "line-height",
3783
3783
  "type": "number",
3784
- "value": "initial",
3785
- "originalValue": "initial",
3784
+ "value": "21px",
3785
+ "originalValue": "21px",
3786
3786
  "name": "SECONDARY_M_LINE_HEIGHT_DESKTOP"
3787
3787
  },
3788
3788
  "BASIC_S_LINE_HEIGHT_DESKTOP": {
package/build/variety.custom-properties.css CHANGED
@@ -77,7 +77,7 @@
77
77
  --primary-l-font-size-mobile: 24px;
78
78
  --body-xxl-font-size-mobile: initial;
79
79
  --basic-s-font-size-desktop-xl: initial;
80
- --secondary-m-font-size-desktop-xl: 14px;
80
+ --secondary-m-font-size-desktop-xl: 18px;
81
81
  --basic-xxs-font-size-desktop-xl: initial;
82
82
  --basic-xs-font-size-mobile: initial;
83
83
  --secondary-l-font-size-desktop-xl: 21px;
@@ -132,7 +132,7 @@
132
132
  --secondary-l-font-size-desktop: 18px;
133
133
  --secondary-regular-m-font-size-mobile: 16px;
134
134
  --accent-xxs-font-size-mobile: 14px;
135
- --secondary-m-font-size-desktop: initial;
135
+ --secondary-m-font-size-desktop: 18px;
136
136
  --basic-s-font-size-desktop: initial;
137
137
  --basic-xxs-font-size-desktop: initial;
138
138
  --accent-s-font-size-mobile: 23px;
@@ -328,7 +328,7 @@
328
328
  --basic-xxs-font-weight-desktop: normal;
329
329
  --accent-xs-font-weight-mobile: 300;
330
330
  --basic-xl-font-weight-desktop-xl: normal;
331
- --secondary-m-font-weight-desktop: 600;
331
+ --secondary-m-font-weight-desktop: bold;
332
332
  --basic-s-font-weight-desktop: normal;
333
333
  --primary-m-font-weight-mobile: normal;
334
334
  --primary-xxl-font-weight-mobile: normal;
@@ -338,7 +338,7 @@
338
338
  --basic-xl-font-weight-desktop: normal;
339
339
  --basic-xxs-font-weight-desktop-xl: normal;
340
340
  --basic-s-font-weight-desktop-xl: normal;
341
- --secondary-m-font-weight-desktop-xl: 600;
341
+ --secondary-m-font-weight-desktop-xl: bold;
342
342
  --secondary-l-font-weight-desktop-xl: bold;
343
343
  --secondary-xxl-font-weight-desktop-xl: normal;
344
344
  --basic-xs-font-weight-mobile: normal;
@@ -373,7 +373,7 @@
373
373
  --basic-xxs-font-weight-mobile: normal;
374
374
  --accent-xs-font-weight-desktop: 300;
375
375
  --basic-s-font-weight-mobile: normal;
376
- --secondary-m-font-weight-mobile: 600;
376
+ --secondary-m-font-weight-mobile: bold;
377
377
  --primary-xl-font-weight-desktop: normal;
378
378
  --body-xxxl-font-weight-desktop: normal;
379
379
  --body-xl-font-weight-desktop: normal;
@@ -394,7 +394,7 @@
394
394
  --primary-xxs-font-weight-desktop: 700;
395
395
  --body-xl-font-weight-desktop-xl: normal;
396
396
  --body-xxxl-font-weight-desktop-xl: normal;
397
- --primary-xl-font-weight-desktop-xl: 700;
397
+ --primary-xl-font-weight-desktop-xl: normal;
398
398
  --accent-xs-font-weight-desktop-xl: 300;
399
399
  --accent-regular-xxs-font-weight-mobile: 400;
400
400
  --accent-l-font-weight-desktop: 300;
@@ -415,7 +415,7 @@
415
415
  --body-m-line-height-desktop: 24px;
416
416
  --primary-m-line-height-desktop: 27px;
417
417
  --basic-s-line-height-desktop-xl: initial;
418
- --secondary-m-line-height-desktop-xl: 17px;
418
+ --secondary-m-line-height-desktop-xl: 21px;
419
419
  --body-xxxl-line-height-desktop: initial;
420
420
  --primary-xl-line-height-desktop: 32px;
421
421
  --body-xl-line-height-desktop: initial;
@@ -474,7 +474,7 @@
474
474
  --accent-xxs-line-height-mobile: 0.4px;
475
475
  --secondary-xxl-line-height-desktop: initial;
476
476
  --secondary-l-line-height-desktop: 21px;
477
- --secondary-m-line-height-desktop: initial;
477
+ --secondary-m-line-height-desktop: 21px;
478
478
  --basic-s-line-height-desktop: initial;
479
479
  --body-xl-line-height-desktop-xl: initial;
480
480
  --primary-xl-line-height-desktop-xl: 36px;
package/build/variety.json CHANGED
@@ -64,7 +64,7 @@
64
64
  "PRIMARY_L_FONT_SIZE_MOBILE": "24px",
65
65
  "BODY_XXL_FONT_SIZE_MOBILE": "initial",
66
66
  "BASIC_S_FONT_SIZE_DESKTOP_XL": "initial",
67
- "SECONDARY_M_FONT_SIZE_DESKTOP_XL": "14px",
67
+ "SECONDARY_M_FONT_SIZE_DESKTOP_XL": "18px",
68
68
  "BASIC_XXS_FONT_SIZE_DESKTOP_XL": "initial",
69
69
  "BASIC_XS_FONT_SIZE_MOBILE": "initial",
70
70
  "SECONDARY_L_FONT_SIZE_DESKTOP_XL": "21px",
@@ -119,7 +119,7 @@
119
119
  "SECONDARY_L_FONT_SIZE_DESKTOP": "18px",
120
120
  "SECONDARY_REGULAR_M_FONT_SIZE_MOBILE": "16px",
121
121
  "ACCENT_XXS_FONT_SIZE_MOBILE": "14px",
122
- "SECONDARY_M_FONT_SIZE_DESKTOP": "initial",
122
+ "SECONDARY_M_FONT_SIZE_DESKTOP": "18px",
123
123
  "BASIC_S_FONT_SIZE_DESKTOP": "initial",
124
124
  "BASIC_XXS_FONT_SIZE_DESKTOP": "initial",
125
125
  "ACCENT_S_FONT_SIZE_MOBILE": "23px",
@@ -315,7 +315,7 @@
315
315
  "BASIC_XXS_FONT_WEIGHT_DESKTOP": "normal",
316
316
  "ACCENT_XS_FONT_WEIGHT_MOBILE": "300",
317
317
  "BASIC_XL_FONT_WEIGHT_DESKTOP_XL": "normal",
318
- "SECONDARY_M_FONT_WEIGHT_DESKTOP": "600",
318
+ "SECONDARY_M_FONT_WEIGHT_DESKTOP": "bold",
319
319
  "BASIC_S_FONT_WEIGHT_DESKTOP": "normal",
320
320
  "PRIMARY_M_FONT_WEIGHT_MOBILE": "normal",
321
321
  "PRIMARY_XXL_FONT_WEIGHT_MOBILE": "normal",
@@ -325,7 +325,7 @@
325
325
  "BASIC_XL_FONT_WEIGHT_DESKTOP": "normal",
326
326
  "BASIC_XXS_FONT_WEIGHT_DESKTOP_XL": "normal",
327
327
  "BASIC_S_FONT_WEIGHT_DESKTOP_XL": "normal",
328
- "SECONDARY_M_FONT_WEIGHT_DESKTOP_XL": "600",
328
+ "SECONDARY_M_FONT_WEIGHT_DESKTOP_XL": "bold",
329
329
  "SECONDARY_L_FONT_WEIGHT_DESKTOP_XL": "bold",
330
330
  "SECONDARY_XXL_FONT_WEIGHT_DESKTOP_XL": "normal",
331
331
  "BASIC_XS_FONT_WEIGHT_MOBILE": "normal",
@@ -360,7 +360,7 @@
360
360
  "BASIC_XXS_FONT_WEIGHT_MOBILE": "normal",
361
361
  "ACCENT_XS_FONT_WEIGHT_DESKTOP": "300",
362
362
  "BASIC_S_FONT_WEIGHT_MOBILE": "normal",
363
- "SECONDARY_M_FONT_WEIGHT_MOBILE": "600",
363
+ "SECONDARY_M_FONT_WEIGHT_MOBILE": "bold",
364
364
  "PRIMARY_XL_FONT_WEIGHT_DESKTOP": "normal",
365
365
  "BODY_XXXL_FONT_WEIGHT_DESKTOP": "normal",
366
366
  "BODY_XL_FONT_WEIGHT_DESKTOP": "normal",
@@ -381,7 +381,7 @@
381
381
  "PRIMARY_XXS_FONT_WEIGHT_DESKTOP": "700",
382
382
  "BODY_XL_FONT_WEIGHT_DESKTOP_XL": "normal",
383
383
  "BODY_XXXL_FONT_WEIGHT_DESKTOP_XL": "normal",
384
- "PRIMARY_XL_FONT_WEIGHT_DESKTOP_XL": "700",
384
+ "PRIMARY_XL_FONT_WEIGHT_DESKTOP_XL": "normal",
385
385
  "ACCENT_XS_FONT_WEIGHT_DESKTOP_XL": "300",
386
386
  "ACCENT_REGULAR_XXS_FONT_WEIGHT_MOBILE": "400",
387
387
  "ACCENT_L_FONT_WEIGHT_DESKTOP": "300",
@@ -402,7 +402,7 @@
402
402
  "BODY_M_LINE_HEIGHT_DESKTOP": "24px",
403
403
  "PRIMARY_M_LINE_HEIGHT_DESKTOP": "27px",
404
404
  "BASIC_S_LINE_HEIGHT_DESKTOP_XL": "initial",
405
- "SECONDARY_M_LINE_HEIGHT_DESKTOP_XL": "17px",
405
+ "SECONDARY_M_LINE_HEIGHT_DESKTOP_XL": "21px",
406
406
  "BODY_XXXL_LINE_HEIGHT_DESKTOP": "initial",
407
407
  "PRIMARY_XL_LINE_HEIGHT_DESKTOP": "32px",
408
408
  "BODY_XL_LINE_HEIGHT_DESKTOP": "initial",
@@ -461,7 +461,7 @@
461
461
  "ACCENT_XXS_LINE_HEIGHT_MOBILE": "0.4px",
462
462
  "SECONDARY_XXL_LINE_HEIGHT_DESKTOP": "initial",
463
463
  "SECONDARY_L_LINE_HEIGHT_DESKTOP": "21px",
464
- "SECONDARY_M_LINE_HEIGHT_DESKTOP": "initial",
464
+ "SECONDARY_M_LINE_HEIGHT_DESKTOP": "21px",
465
465
  "BASIC_S_LINE_HEIGHT_DESKTOP": "initial",
466
466
  "BODY_XL_LINE_HEIGHT_DESKTOP_XL": "initial",
467
467
  "PRIMARY_XL_LINE_HEIGHT_DESKTOP_XL": "36px",
package/build/variety.map.scss CHANGED
@@ -77,7 +77,7 @@ $variety-map: (
77
77
  'primary-l-font-size-mobile': (24px),
78
78
  'body-xxl-font-size-mobile': (initial),
79
79
  'basic-s-font-size-desktop-xl': (initial),
80
- 'secondary-m-font-size-desktop-xl': (14px),
80
+ 'secondary-m-font-size-desktop-xl': (18px),
81
81
  'basic-xxs-font-size-desktop-xl': (initial),
82
82
  'basic-xs-font-size-mobile': (initial),
83
83
  'secondary-l-font-size-desktop-xl': (21px),
@@ -132,7 +132,7 @@ $variety-map: (
132
132
  'secondary-l-font-size-desktop': (18px),
133
133
  'secondary-regular-m-font-size-mobile': (16px),
134
134
  'accent-xxs-font-size-mobile': (14px),
135
- 'secondary-m-font-size-desktop': (initial),
135
+ 'secondary-m-font-size-desktop': (18px),
136
136
  'basic-s-font-size-desktop': (initial),
137
137
  'basic-xxs-font-size-desktop': (initial),
138
138
  'accent-s-font-size-mobile': (23px),
@@ -328,7 +328,7 @@ $variety-map: (
328
328
  'basic-xxs-font-weight-desktop': (normal),
329
329
  'accent-xs-font-weight-mobile': (300),
330
330
  'basic-xl-font-weight-desktop-xl': (normal),
331
- 'secondary-m-font-weight-desktop': (600),
331
+ 'secondary-m-font-weight-desktop': (bold),
332
332
  'basic-s-font-weight-desktop': (normal),
333
333
  'primary-m-font-weight-mobile': (normal),
334
334
  'primary-xxl-font-weight-mobile': (normal),
@@ -338,7 +338,7 @@ $variety-map: (
338
338
  'basic-xl-font-weight-desktop': (normal),
339
339
  'basic-xxs-font-weight-desktop-xl': (normal),
340
340
  'basic-s-font-weight-desktop-xl': (normal),
341
- 'secondary-m-font-weight-desktop-xl': (600),
341
+ 'secondary-m-font-weight-desktop-xl': (bold),
342
342
  'secondary-l-font-weight-desktop-xl': (bold),
343
343
  'secondary-xxl-font-weight-desktop-xl': (normal),
344
344
  'basic-xs-font-weight-mobile': (normal),
@@ -373,7 +373,7 @@ $variety-map: (
373
373
  'basic-xxs-font-weight-mobile': (normal),
374
374
  'accent-xs-font-weight-desktop': (300),
375
375
  'basic-s-font-weight-mobile': (normal),
376
- 'secondary-m-font-weight-mobile': (600),
376
+ 'secondary-m-font-weight-mobile': (bold),
377
377
  'primary-xl-font-weight-desktop': (normal),
378
378
  'body-xxxl-font-weight-desktop': (normal),
379
379
  'body-xl-font-weight-desktop': (normal),
@@ -394,7 +394,7 @@ $variety-map: (
394
394
  'primary-xxs-font-weight-desktop': (700),
395
395
  'body-xl-font-weight-desktop-xl': (normal),
396
396
  'body-xxxl-font-weight-desktop-xl': (normal),
397
- 'primary-xl-font-weight-desktop-xl': (700),
397
+ 'primary-xl-font-weight-desktop-xl': (normal),
398
398
  'accent-xs-font-weight-desktop-xl': (300),
399
399
  'accent-regular-xxs-font-weight-mobile': (400),
400
400
  'accent-l-font-weight-desktop': (300),
@@ -415,7 +415,7 @@ $variety-map: (
415
415
  'body-m-line-height-desktop': (24px),
416
416
  'primary-m-line-height-desktop': (27px),
417
417
  'basic-s-line-height-desktop-xl': (initial),
418
- 'secondary-m-line-height-desktop-xl': (17px),
418
+ 'secondary-m-line-height-desktop-xl': (21px),
419
419
  'body-xxxl-line-height-desktop': (initial),
420
420
  'primary-xl-line-height-desktop': (32px),
421
421
  'body-xl-line-height-desktop': (initial),
@@ -474,7 +474,7 @@ $variety-map: (
474
474
  'accent-xxs-line-height-mobile': (0.4px),
475
475
  'secondary-xxl-line-height-desktop': (initial),
476
476
  'secondary-l-line-height-desktop': (21px),
477
- 'secondary-m-line-height-desktop': (initial),
477
+ 'secondary-m-line-height-desktop': (21px),
478
478
  'basic-s-line-height-desktop': (initial),
479
479
  'body-xl-line-height-desktop-xl': (initial),
480
480
  'primary-xl-line-height-desktop-xl': (36px),
package/build/variety.raw.json CHANGED
@@ -700,8 +700,8 @@
700
700
  "status": "alpha",
701
701
  "category": "font-size",
702
702
  "type": "number",
703
- "value": "14px",
704
- "originalValue": "14px",
703
+ "value": "18px",
704
+ "originalValue": "18px",
705
705
  "name": "SECONDARY_M_FONT_SIZE_DESKTOP_XL"
706
706
  },
707
707
  "BASIC_XXS_FONT_SIZE_DESKTOP_XL": {
@@ -1145,8 +1145,8 @@
1145
1145
  "status": "alpha",
1146
1146
  "category": "font-size",
1147
1147
  "type": "number",
1148
- "value": "initial",
1149
- "originalValue": "initial",
1148
+ "value": "18px",
1149
+ "originalValue": "18px",
1150
1150
  "name": "SECONDARY_M_FONT_SIZE_DESKTOP"
1151
1151
  },
1152
1152
  "BASIC_S_FONT_SIZE_DESKTOP": {
@@ -2621,8 +2621,8 @@
2621
2621
  "status": "alpha",
2622
2622
  "category": "font-weight",
2623
2623
  "type": "number",
2624
- "value": "600",
2625
- "originalValue": "600",
2624
+ "value": "bold",
2625
+ "originalValue": "bold",
2626
2626
  "name": "SECONDARY_M_FONT_WEIGHT_DESKTOP"
2627
2627
  },
2628
2628
  "BASIC_S_FONT_WEIGHT_DESKTOP": {
@@ -2697,8 +2697,8 @@
2697
2697
  "status": "alpha",
2698
2698
  "category": "font-weight",
2699
2699
  "type": "number",
2700
- "value": "600",
2701
- "originalValue": "600",
2700
+ "value": "bold",
2701
+ "originalValue": "bold",
2702
2702
  "name": "SECONDARY_M_FONT_WEIGHT_DESKTOP_XL"
2703
2703
  },
2704
2704
  "SECONDARY_L_FONT_WEIGHT_DESKTOP_XL": {
@@ -2970,8 +2970,8 @@
2970
2970
  "status": "alpha",
2971
2971
  "category": "font-weight",
2972
2972
  "type": "number",
2973
- "value": "600",
2974
- "originalValue": "600",
2973
+ "value": "bold",
2974
+ "originalValue": "bold",
2975
2975
  "name": "SECONDARY_M_FONT_WEIGHT_MOBILE"
2976
2976
  },
2977
2977
  "PRIMARY_XL_FONT_WEIGHT_DESKTOP": {
@@ -3135,8 +3135,8 @@
3135
3135
  "status": "alpha",
3136
3136
  "category": "font-weight",
3137
3137
  "type": "number",
3138
- "value": "700",
3139
- "originalValue": "700",
3138
+ "value": "normal",
3139
+ "originalValue": "normal",
3140
3140
  "name": "PRIMARY_XL_FONT_WEIGHT_DESKTOP_XL"
3141
3141
  },
3142
3142
  "ACCENT_XS_FONT_WEIGHT_DESKTOP_XL": {
@@ -3306,8 +3306,8 @@
3306
3306
  "status": "alpha",
3307
3307
  "category": "line-height",
3308
3308
  "type": "number",
3309
- "value": "17px",
3310
- "originalValue": "17px",
3309
+ "value": "21px",
3310
+ "originalValue": "21px",
3311
3311
  "name": "SECONDARY_M_LINE_HEIGHT_DESKTOP_XL"
3312
3312
  },
3313
3313
  "BODY_XXXL_LINE_HEIGHT_DESKTOP": {
@@ -3783,8 +3783,8 @@
3783
3783
  "status": "alpha",
3784
3784
  "category": "line-height",
3785
3785
  "type": "number",
3786
- "value": "initial",
3787
- "originalValue": "initial",
3786
+ "value": "21px",
3787
+ "originalValue": "21px",
3788
3788
  "name": "SECONDARY_M_LINE_HEIGHT_DESKTOP"
3789
3789
  },
3790
3790
  "BASIC_S_LINE_HEIGHT_DESKTOP": {
package/build/vibe.custom-properties.css CHANGED
@@ -73,5 +73,9 @@
73
73
  --background-color-brand-accent: rgb(16, 16, 16);
74
74
  --border-color-brand-accent: rgb(16, 16, 16);
75
75
  --color-grey-lightest: rgb(239, 239, 239);
76
+ /* The fallback for the accent font */
77
+ --font-family-accent: Helvetica, sans-serif;
76
78
  --color-brand-accent: rgb(16, 16, 16);
79
+ /* The accent webfont, loaded async */
80
+ --font-family-accent-fancy: 'Brunel Deck', Helvetica, sans-serif;
77
81
  }
package/build/vibe.json CHANGED
@@ -59,5 +59,7 @@
59
59
  "BACKGROUND_COLOR_BRAND_ACCENT": "rgb(16, 16, 16)",
60
60
  "BORDER_COLOR_BRAND_ACCENT": "rgb(16, 16, 16)",
61
61
  "COLOR_GREY_LIGHTEST": "rgb(239, 239, 239)",
62
- "COLOR_BRAND_ACCENT": "rgb(16, 16, 16)"
62
+ "FONT_FAMILY_ACCENT": "Helvetica, sans-serif",
63
+ "COLOR_BRAND_ACCENT": "rgb(16, 16, 16)",
64
+ "FONT_FAMILY_ACCENT_FANCY": "'Brunel Deck', Helvetica, sans-serif"
63
65
  }
package/build/vibe.map.scss CHANGED
@@ -73,5 +73,9 @@ $vibe-map: (
73
73
  'background-color-brand-accent': (rgb(16, 16, 16)),
74
74
  'border-color-brand-accent': (rgb(16, 16, 16)),
75
75
  'color-grey-lightest': (rgb(239, 239, 239)),
76
+ /* The fallback for the accent font */
77
+ 'font-family-accent': (Helvetica, sans-serif),
76
78
  'color-brand-accent': (rgb(16, 16, 16)),
79
+ /* The accent webfont, loaded async */
80
+ 'font-family-accent-fancy': ('Brunel Deck', Helvetica, sans-serif),
77
81
  );
package/build/vibe.raw.json CHANGED
@@ -657,12 +657,28 @@
657
657
  "originalValue": "{!GREY_94}",
658
658
  "name": "COLOR_GREY_LIGHTEST"
659
659
  },
660
+ "FONT_FAMILY_ACCENT": {
661
+ "value": "Helvetica, sans-serif",
662
+ "type": "font-family",
663
+ "category": "font-family",
664
+ "comment": "The fallback for the accent font",
665
+ "originalValue": "Helvetica, sans-serif",
666
+ "name": "FONT_FAMILY_ACCENT"
667
+ },
660
668
  "COLOR_BRAND_ACCENT": {
661
669
  "value": "rgb(16, 16, 16)",
662
670
  "type": "color",
663
671
  "category": "text-color",
664
672
  "originalValue": "{!BLACK_6}",
665
673
  "name": "COLOR_BRAND_ACCENT"
674
+ },
675
+ "FONT_FAMILY_ACCENT_FANCY": {
676
+ "value": "'Brunel Deck', Helvetica, sans-serif",
677
+ "type": "font-family",
678
+ "category": "font-family",
679
+ "comment": "The accent webfont, loaded async",
680
+ "originalValue": "'Brunel Deck', Helvetica, sans-serif",
681
+ "name": "FONT_FAMILY_ACCENT_FANCY"
666
682
  }
667
683
  }
668
684
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@penskemediacorp/larva-tokens",
3
- "version": "1.8.0",
3
+ "version": "1.11.0",
4
4
  "description": "Design tokens",
5
5
  "author": "laras126 <laras126@gmail.com>",
6
6
  "homepage": "https://github.com/penske-media-corp/pmc-larva#readme",
@@ -31,5 +31,5 @@
31
31
  "gulp": "^4.0.2",
32
32
  "plugin-error": "^1.0.1"
33
33
  },
34
- "gitHead": "eb52d8dbd10586e9436505dd0cd0720078ef5b77"
34
+ "gitHead": "404c13201d3eadae789daab9d759ca7824b360bb"
35
35
  }
package/style-guides/variety-vip.html CHANGED
@@ -851,11 +851,11 @@
851
851
  <code>secondary-m-font-weight-desktop</code>
852
852
  </th>
853
853
  <td>
854
- <code>600</code>
854
+ <code>bold</code>
855
855
  </td>
856
856
 
857
857
  <td>
858
- <div style="font-weight: 600;">
858
+ <div style="font-weight: bold;">
859
859
  The quick brown fox jumps over the lazy dog.
860
860
  </div>
861
861
  </td>
@@ -1021,11 +1021,11 @@
1021
1021
  <code>secondary-m-font-weight-desktop-xl</code>
1022
1022
  </th>
1023
1023
  <td>
1024
- <code>600</code>
1024
+ <code>bold</code>
1025
1025
  </td>
1026
1026
 
1027
1027
  <td>
1028
- <div style="font-weight: 600;">
1028
+ <div style="font-weight: bold;">
1029
1029
  The quick brown fox jumps over the lazy dog.
1030
1030
  </div>
1031
1031
  </td>
@@ -1616,11 +1616,11 @@
1616
1616
  <code>secondary-m-font-weight-mobile</code>
1617
1617
  </th>
1618
1618
  <td>
1619
- <code>600</code>
1619
+ <code>bold</code>
1620
1620
  </td>
1621
1621
 
1622
1622
  <td>
1623
- <div style="font-weight: 600;">
1623
+ <div style="font-weight: bold;">
1624
1624
  The quick brown fox jumps over the lazy dog.
1625
1625
  </div>
1626
1626
  </td>
@@ -1973,11 +1973,11 @@
1973
1973
  <code>primary-xl-font-weight-desktop-xl</code>
1974
1974
  </th>
1975
1975
  <td>
1976
- <code>700</code>
1976
+ <code>normal</code>
1977
1977
  </td>
1978
1978
 
1979
1979
  <td>
1980
- <div style="font-weight: 700;">
1980
+ <div style="font-weight: normal;">
1981
1981
  The quick brown fox jumps over the lazy dog.
1982
1982
  </div>
1983
1983
  </td>
@@ -2416,11 +2416,11 @@
2416
2416
  <code>secondary-m-font-size-desktop-xl</code>
2417
2417
  </th>
2418
2418
  <td>
2419
- <code>14px</code>
2419
+ <code>18px</code>
2420
2420
  </td>
2421
2421
 
2422
2422
  <td>
2423
- <div style="font-size: 14px;">
2423
+ <div style="font-size: 18px;">
2424
2424
  The quick brown fox jumps over the lazy dog.
2425
2425
  </div>
2426
2426
  </td>
@@ -3351,11 +3351,11 @@
3351
3351
  <code>secondary-m-font-size-desktop</code>
3352
3352
  </th>
3353
3353
  <td>
3354
- <code>initial</code>
3354
+ <code>18px</code>
3355
3355
  </td>
3356
3356
 
3357
3357
  <td>
3358
- <div style="font-size: initial;">
3358
+ <div style="font-size: 18px;">
3359
3359
  The quick brown fox jumps over the lazy dog.
3360
3360
  </div>
3361
3361
  </td>
@@ -4388,11 +4388,11 @@
4388
4388
  <code>secondary-m-line-height-desktop-xl</code>
4389
4389
  </th>
4390
4390
  <td>
4391
- <code>17px</code>
4391
+ <code>21px</code>
4392
4392
  </td>
4393
4393
 
4394
4394
  <td>
4395
- <div class="line-height-example" style="line-height: 17px; background-size: 100% 17px;">
4395
+ <div class="line-height-example" style="line-height: 21px; background-size: 100% 21px;">
4396
4396
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
4397
4397
  elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
4398
4398
  id feugiat at, venenatis quis erat.
@@ -5509,11 +5509,11 @@
5509
5509
  <code>secondary-m-line-height-desktop</code>
5510
5510
  </th>
5511
5511
  <td>
5512
- <code>initial</code>
5512
+ <code>21px</code>
5513
5513
  </td>
5514
5514
 
5515
5515
  <td>
5516
- <div class="line-height-example" style="line-height: initial; background-size: 100% initial;">
5516
+ <div class="line-height-example" style="line-height: 21px; background-size: 100% 21px;">
5517
5517
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
5518
5518
  elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
5519
5519
  id feugiat at, venenatis quis erat.
package/style-guides/variety.html CHANGED
@@ -851,11 +851,11 @@
851
851
  <code>secondary-m-font-weight-desktop</code>
852
852
  </th>
853
853
  <td>
854
- <code>600</code>
854
+ <code>bold</code>
855
855
  </td>
856
856
 
857
857
  <td>
858
- <div style="font-weight: 600;">
858
+ <div style="font-weight: bold;">
859
859
  The quick brown fox jumps over the lazy dog.
860
860
  </div>
861
861
  </td>
@@ -1021,11 +1021,11 @@
1021
1021
  <code>secondary-m-font-weight-desktop-xl</code>
1022
1022
  </th>
1023
1023
  <td>
1024
- <code>600</code>
1024
+ <code>bold</code>
1025
1025
  </td>
1026
1026
 
1027
1027
  <td>
1028
- <div style="font-weight: 600;">
1028
+ <div style="font-weight: bold;">
1029
1029
  The quick brown fox jumps over the lazy dog.
1030
1030
  </div>
1031
1031
  </td>
@@ -1616,11 +1616,11 @@
1616
1616
  <code>secondary-m-font-weight-mobile</code>
1617
1617
  </th>
1618
1618
  <td>
1619
- <code>600</code>
1619
+ <code>bold</code>
1620
1620
  </td>
1621
1621
 
1622
1622
  <td>
1623
- <div style="font-weight: 600;">
1623
+ <div style="font-weight: bold;">
1624
1624
  The quick brown fox jumps over the lazy dog.
1625
1625
  </div>
1626
1626
  </td>
@@ -1973,11 +1973,11 @@
1973
1973
  <code>primary-xl-font-weight-desktop-xl</code>
1974
1974
  </th>
1975
1975
  <td>
1976
- <code>700</code>
1976
+ <code>normal</code>
1977
1977
  </td>
1978
1978
 
1979
1979
  <td>
1980
- <div style="font-weight: 700;">
1980
+ <div style="font-weight: normal;">
1981
1981
  The quick brown fox jumps over the lazy dog.
1982
1982
  </div>
1983
1983
  </td>
@@ -2416,11 +2416,11 @@
2416
2416
  <code>secondary-m-font-size-desktop-xl</code>
2417
2417
  </th>
2418
2418
  <td>
2419
- <code>14px</code>
2419
+ <code>18px</code>
2420
2420
  </td>
2421
2421
 
2422
2422
  <td>
2423
- <div style="font-size: 14px;">
2423
+ <div style="font-size: 18px;">
2424
2424
  The quick brown fox jumps over the lazy dog.
2425
2425
  </div>
2426
2426
  </td>
@@ -3351,11 +3351,11 @@
3351
3351
  <code>secondary-m-font-size-desktop</code>
3352
3352
  </th>
3353
3353
  <td>
3354
- <code>initial</code>
3354
+ <code>18px</code>
3355
3355
  </td>
3356
3356
 
3357
3357
  <td>
3358
- <div style="font-size: initial;">
3358
+ <div style="font-size: 18px;">
3359
3359
  The quick brown fox jumps over the lazy dog.
3360
3360
  </div>
3361
3361
  </td>
@@ -4388,11 +4388,11 @@
4388
4388
  <code>secondary-m-line-height-desktop-xl</code>
4389
4389
  </th>
4390
4390
  <td>
4391
- <code>17px</code>
4391
+ <code>21px</code>
4392
4392
  </td>
4393
4393
 
4394
4394
  <td>
4395
- <div class="line-height-example" style="line-height: 17px; background-size: 100% 17px;">
4395
+ <div class="line-height-example" style="line-height: 21px; background-size: 100% 21px;">
4396
4396
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
4397
4397
  elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
4398
4398
  id feugiat at, venenatis quis erat.
@@ -5509,11 +5509,11 @@
5509
5509
  <code>secondary-m-line-height-desktop</code>
5510
5510
  </th>
5511
5511
  <td>
5512
- <code>initial</code>
5512
+ <code>21px</code>
5513
5513
  </td>
5514
5514
 
5515
5515
  <td>
5516
- <div class="line-height-example" style="line-height: initial; background-size: 100% initial;">
5516
+ <div class="line-height-example" style="line-height: 21px; background-size: 100% 21px;">
5517
5517
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
5518
5518
  elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
5519
5519
  id feugiat at, venenatis quis erat.
package/style-guides/vibe.html CHANGED
@@ -533,6 +533,40 @@
533
533
 
534
534
  <td></td>
535
535
  </tr>
536
+
537
+ <tr>
538
+ <th scope="row">
539
+ <code>font-family-accent</code>
540
+ </th>
541
+ <td>
542
+ <code>Helvetica, sans-serif</code>
543
+ </td>
544
+
545
+ <td>
546
+ <div style="font-family: Helvetica, sans-serif;">
547
+ The quick brown fox jumps over the lazy dog.
548
+ </div>
549
+ </td>
550
+
551
+ <td>The fallback for the accent font</td>
552
+ </tr>
553
+
554
+ <tr>
555
+ <th scope="row">
556
+ <code>font-family-accent-fancy</code>
557
+ </th>
558
+ <td>
559
+ <code>'Brunel Deck', Helvetica, sans-serif</code>
560
+ </td>
561
+
562
+ <td>
563
+ <div style="font-family: 'Brunel Deck', Helvetica, sans-serif;">
564
+ The quick brown fox jumps over the lazy dog.
565
+ </div>
566
+ </td>
567
+
568
+ <td>The accent webfont, loaded async</td>
569
+ </tr>
536
570
  </tbody>
537
571
  </table>
538
572
  <hr />