@transfermarkt/global-styles 1.65.0 → 1.67.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transfermarkt/global-styles",
3
- "version": "1.65.0",
3
+ "version": "1.67.0",
4
4
  "description": "Shared styles and Global configuration for stylelint rules of the Transfermarkt projects",
5
5
  "author": "Transfermarkt",
6
6
  "license": "MIT",
@@ -232,20 +232,126 @@ $figma-variables: (
232
232
  'secondary-100': 'color-lightblue-100',
233
233
  'secondary-50': 'color-lightblue-50',
234
234
 
235
+ // RESPONSIVE
236
+ // fontsize
237
+ // body
238
+ 'fontsize-body-lg-desktop': 16,
239
+ 'fontsize-body-lg': 18,
240
+ 'fontsize-body-md-desktop': 14,
241
+ 'fontsize-body-md': 16,
242
+ 'fontsize-body-xl-desktop': 20,
243
+ 'fontsize-body-xl': 20,
244
+ 'fontsize-body-sm-desktop': 12,
245
+ 'fontsize-body-sm': 14,
246
+ 'fontsize-body-xs-desktop': 10,
247
+ 'fontsize-body-xs': 12,
248
+
249
+ // headings
250
+ 'fontsize-headings-h6-desktop': 14,
251
+ 'fontsize-headings-h6': 16,
252
+ 'fontsize-headings-h5-desktop': 20,
253
+ 'fontsize-headings-h5': 20,
254
+ 'fontsize-headings-h4-desktop': 24,
255
+ 'fontsize-headings-h4': 24,
256
+ 'fontsize-headings-h3-desktop': 32,
257
+ 'fontsize-headings-h3': 32,
258
+ 'fontsize-headings-h2-desktop': 40,
259
+ 'fontsize-headings-h2': 40,
260
+ 'fontsize-headings-h1-desktop': 48,
261
+ 'fontsize-headings-h1': 48,
262
+
263
+ // line-height
264
+ // body
265
+ 'line-height-body-xs-desktop': 16,
266
+ 'line-height-body-xs': 18,
267
+ 'line-height-body-sm-desktop': 18,
268
+ 'line-height-body-sm': 22,
269
+ 'line-height-body-md-desktop': 22,
270
+ 'line-height-body-md': 24,
271
+ 'line-height-body-xl-desktop': 32,
272
+ 'line-height-body-xl': 32,
273
+ 'line-height-body-lg-desktop': 24,
274
+ 'line-height-body-lg': 28,
275
+
276
+ // headings
277
+ 'line-height-headings-h6-desktop': 22,
278
+ 'line-height-headings-h6': 24,
279
+ 'line-height-headings-h5-desktop': 32,
280
+ 'line-height-headings-h5': 32,
281
+ 'line-height-headings-h4-desktop': 36,
282
+ 'line-height-headings-h4': 36,
283
+ 'line-height-headings-h3-desktop': 40,
284
+ 'line-height-headings-h3': 40,
285
+ 'line-height-headings-h2-desktop': 48,
286
+ 'line-height-headings-h2': 48,
287
+ 'line-height-headings-h1-desktop': 56,
288
+ 'line-height-headings-h1': 56,
289
+
290
+ // paragraph-spacing
291
+ // body
292
+ 'paragraph-spacing-body-xs-desktop': 6,
293
+ 'paragraph-spacing-body-xs': 8,
294
+ 'paragraph-spacing-body-sm-desktop': 8,
295
+ 'paragraph-spacing-body-sm': 10,
296
+ 'paragraph-spacing-body-md-desktop': 10,
297
+ 'paragraph-spacing-body-md': 12,
298
+ 'paragraph-spacing-body-lg-desktop': 12,
299
+ 'paragraph-spacing-body-lg': 12,
300
+ 'paragraph-spacing-body-xl-desktop': 14,
301
+ 'paragraph-spacing-body-xl': 14,
302
+
303
+ // headings
304
+ 'paragraph-spacing-headings-h6-desktop': 10,
305
+ 'paragraph-spacing-headings-h6': 12,
306
+ 'paragraph-spacing-headings-h5-desktop': 14,
307
+ 'paragraph-spacing-headings-h5': 14,
308
+ 'paragraph-spacing-headings-h4-desktop': 16,
309
+ 'paragraph-spacing-headings-h4': 16,
310
+ 'paragraph-spacing-headings-h3-desktop': 20,
311
+ 'paragraph-spacing-headings-h3': 20,
312
+ 'paragraph-spacing-headings-h2-desktop': 24,
313
+ 'paragraph-spacing-headings-h2': 24,
314
+ 'paragraph-spacing-headings-h1-desktop': 28,
315
+ 'paragraph-spacing-headings-h1': 28,
316
+
317
+ // spacing
318
+ 'spacing-none-desktop': 'scale-0',
319
+ 'spacing-none': 'scale-0',
320
+ 'spacing-3xs-desktop': 'scale-50-(2)',
321
+ 'spacing-3xs': 'scale-50-(2)',
322
+ 'spacing-2xs-desktop': 'scale-100-(4)',
323
+ 'spacing-2xs': 'scale-100-(4)',
324
+ 'spacing-xs-desktop': 'scale-200-(8)',
325
+ 'spacing-xs': 'scale-200-(8)',
326
+ 'spacing-sm-desktop': 'scale-250-(10)',
327
+ 'spacing-sm': 'scale-250-(10)',
328
+ 'spacing-md-desktop': 'scale-300-(12)',
329
+ 'spacing-md': 'scale-300-(12)',
330
+ 'spacing-lg-desktop': 'scale-400-(16)',
331
+ 'spacing-lg': 'scale-400-(16)',
332
+ 'spacing-xl-desktop': 'scale-600-(24)',
333
+ 'spacing-xl': 'scale-600-(24)',
334
+ 'spacing-2xl-desktop': 'scale-800-(32)',
335
+ 'spacing-2xl': 'scale-800-(32)',
336
+ 'spacing-3xl-desktop': 'scale-1200-(48)',
337
+ 'spacing-3xl': 'scale-1200-(48)',
338
+ 'spacing-4xl-desktop': 'scale-1600-(64)',
339
+ 'spacing-4xl': 'scale-1600-(64)',
340
+
235
341
  // MAPPED
236
- // _text
342
+ // text
237
343
  'text-heading': 'primary-default',
238
344
  'text-heading-on-blue': 'neutral-white',
239
345
  'text-primary': 'primary-default',
240
346
  'text-primary-on-blue': 'neutral-white',
241
347
  'text-default': 'primary-600',
242
- 'text-default-on-blue': #000,
348
+ 'text-default-on-blue': 'neutral-white',
243
349
  'text-primary-light': 'primary-400',
244
- 'text-primary-light-on-blue': #000,
350
+ 'text-primary-light-on-blue': 'neutral-white-50',
245
351
  'text-primary-lightest': 'primary-200',
246
352
  'text-primary-lightest-on-blue': 'primary-200',
247
353
  'text-primary-disabled': 'primary-150',
248
- 'text-primary-disabled-on-blue': #000,
354
+ 'text-primary-disabled-on-blue': 'neutral-white-30',
249
355
  'text-secondary': 'secondary-default',
250
356
  'text-secondary-on-blue': 'secondary-default',
251
357
  'text-secondary-dark': 'secondary-dark',
@@ -279,7 +385,7 @@ $figma-variables: (
279
385
  'text-warning': #000,
280
386
  'text-warning-on-blue': 'warning-default',
281
387
 
282
- // _surface
388
+ // surface
283
389
  'surface-primary': 'primary-default',
284
390
  'surface-primary-on-blue': 'primary-default',
285
391
  'surface-primary-light': 'primary-400',
@@ -310,12 +416,18 @@ $figma-variables: (
310
416
  'surface-error-lighter-on-blue': #000,
311
417
  'surface-error-disabled': 'error-lighter',
312
418
  'surface-error-disabled-on-blue': #000,
419
+ 'surface-tooltip': 'primary-700',
420
+ 'surface-tooltip-on-blue': 'primary-700',
421
+ 'surface-primary-lighter': 'primary-50',
422
+ 'surface-primary-lighter-on-blue': #000,
423
+ 'surface-subbrand-pots': 'color-pots-gold-default',
424
+ 'surface-subbrand-pots-on-blue': 'color-pots-gold-default',
313
425
 
314
- // _icon
426
+ // icon
315
427
  'icon-primary': 'primary-default',
316
428
  'icon-primary-on-blue': 'neutral-white',
317
429
  'icon-primary-light': 'primary-400',
318
- 'icon-primary-light-on-blue': 'neutral-white',
430
+ 'icon-primary-light-on-blue': 'neutral-white-50',
319
431
  'icon-primary-lightest': 'primary-200',
320
432
  'icon-primary-lightest-on-blue': 'primary-200',
321
433
  'icon-primary-disabled': 'primary-150',
@@ -349,7 +461,7 @@ $figma-variables: (
349
461
  'icon-warning': #000,
350
462
  'icon-warning-on-blue': 'warning-default',
351
463
 
352
- // _border
464
+ // border
353
465
  'border-primary-dark': 'primary-600',
354
466
  'border-primary-dark-on-blue': #000,
355
467
  'border-primary-light': 'primary-400',
@@ -382,110 +494,6 @@ $figma-variables: (
382
494
  'border-error-disabled-on-blue': #000,
383
495
  'border-white-divider': #000,
384
496
  'border-white-divider-on-blue': 'neutral-white-10',
385
-
386
- // RESPONSIVE
387
- // fontsize
388
- // body
389
- 'fontsize-body-lg-desktop': 16,
390
- 'fontsize-body-lg': 18,
391
- 'fontsize-body-md-desktop': 14,
392
- 'fontsize-body-md': 16,
393
- 'fontsize-body-xl-desktop': 20,
394
- 'fontsize-body-xl': 20,
395
- 'fontsize-body-sm-desktop': 12,
396
- 'fontsize-body-sm': 14,
397
- 'fontsize-body-xs-desktop': 10,
398
- 'fontsize-body-xs': 12,
399
-
400
- // headings
401
- 'fontsize-headings-h6-desktop': 14,
402
- 'fontsize-headings-h6': 16,
403
- 'fontsize-headings-h5-desktop': 20,
404
- 'fontsize-headings-h5': 20,
405
- 'fontsize-headings-h4-desktop': 24,
406
- 'fontsize-headings-h4': 24,
407
- 'fontsize-headings-h3-desktop': 32,
408
- 'fontsize-headings-h3': 32,
409
- 'fontsize-headings-h2-desktop': 40,
410
- 'fontsize-headings-h2': 40,
411
- 'fontsize-headings-h1-desktop': 48,
412
- 'fontsize-headings-h1': 48,
413
-
414
- // line-height
415
- // body
416
- 'line-height-body-xs-desktop': 16,
417
- 'line-height-body-xs': 18,
418
- 'line-height-body-sm-desktop': 18,
419
- 'line-height-body-sm': 22,
420
- 'line-height-body-md-desktop': 22,
421
- 'line-height-body-md': 24,
422
- 'line-height-body-xl-desktop': 32,
423
- 'line-height-body-xl': 32,
424
- 'line-height-body-lg-desktop': 24,
425
- 'line-height-body-lg': 28,
426
-
427
- // headings
428
- 'line-height-headings-h6-desktop': 22,
429
- 'line-height-headings-h6': 24,
430
- 'line-height-headings-h5-desktop': 32,
431
- 'line-height-headings-h5': 32,
432
- 'line-height-headings-h4-desktop': 36,
433
- 'line-height-headings-h4': 36,
434
- 'line-height-headings-h3-desktop': 40,
435
- 'line-height-headings-h3': 40,
436
- 'line-height-headings-h2-desktop': 48,
437
- 'line-height-headings-h2': 48,
438
- 'line-height-headings-h1-desktop': 56,
439
- 'line-height-headings-h1': 56,
440
-
441
- // paragraph-spacing
442
- // body
443
- 'paragraph-spacing-body-xs-desktop': 6,
444
- 'paragraph-spacing-body-xs': 8,
445
- 'paragraph-spacing-body-sm-desktop': 8,
446
- 'paragraph-spacing-body-sm': 10,
447
- 'paragraph-spacing-body-md-desktop': 10,
448
- 'paragraph-spacing-body-md': 12,
449
- 'paragraph-spacing-body-lg-desktop': 12,
450
- 'paragraph-spacing-body-lg': 12,
451
- 'paragraph-spacing-body-xl-desktop': 14,
452
- 'paragraph-spacing-body-xl': 14,
453
-
454
- // headings
455
- 'paragraph-spacing-headings-h6-desktop': 10,
456
- 'paragraph-spacing-headings-h6': 12,
457
- 'paragraph-spacing-headings-h5-desktop': 14,
458
- 'paragraph-spacing-headings-h5': 14,
459
- 'paragraph-spacing-headings-h4-desktop': 16,
460
- 'paragraph-spacing-headings-h4': 16,
461
- 'paragraph-spacing-headings-h3-desktop': 20,
462
- 'paragraph-spacing-headings-h3': 20,
463
- 'paragraph-spacing-headings-h2-desktop': 24,
464
- 'paragraph-spacing-headings-h2': 24,
465
- 'paragraph-spacing-headings-h1-desktop': 28,
466
- 'paragraph-spacing-headings-h1': 28,
467
-
468
- // spacing
469
- 'spacing-none-desktop': 'scale-0',
470
- 'spacing-none': 'scale-0',
471
- 'spacing-3xs-desktop': 'scale-50-(2)',
472
- 'spacing-3xs': 'scale-50-(2)',
473
- 'spacing-2xs-desktop': 'scale-100-(4)',
474
- 'spacing-2xs': 'scale-100-(4)',
475
- 'spacing-xs-desktop': 'scale-200-(8)',
476
- 'spacing-xs': 'scale-200-(8)',
477
- 'spacing-sm-desktop': 'scale-250-(10)',
478
- 'spacing-sm': 'scale-250-(10)',
479
- 'spacing-md-desktop': 'scale-300-(12)',
480
- 'spacing-md': 'scale-300-(12)',
481
- 'spacing-lg-desktop': 'scale-400-(16)',
482
- 'spacing-lg': 'scale-400-(16)',
483
- 'spacing-xl-desktop': 'scale-600-(24)',
484
- 'spacing-xl': 'scale-600-(24)',
485
- 'spacing-2xl-desktop': 'scale-800-(32)',
486
- 'spacing-2xl': 'scale-800-(32)',
487
- 'spacing-3xl-desktop': 'scale-1200-(48)',
488
- 'spacing-3xl': 'scale-1200-(48)',
489
- 'spacing-4xl-desktop': 'scale-1600-(64)',
490
- 'spacing-4xl': 'scale-1600-(64)'
497
+ 'border-primary-darker': 'primary-default',
498
+ 'border-primary-darker-on-blue': #000
491
499
  );