@marioschmidt/design-system-components 1.0.79 → 1.2.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 (197) hide show
  1. package/dist/bds/bds.css +1 -1
  2. package/dist/bds/bds.esm.js +1 -1
  3. package/dist/bds/{p-30a9c996.entry.js → p-67bc59c5.entry.js} +2 -2
  4. package/dist/bds/p-Wtf1fKUK.js +3 -0
  5. package/dist/bds/p-Wtf1fKUK.js.map +1 -0
  6. package/dist/cjs/bds.cjs.js +1 -1
  7. package/dist/cjs/ds-button_2.cjs.entry.js +1 -1
  8. package/dist/cjs/index-B0IsCEmC.js +1398 -0
  9. package/dist/cjs/index-B0IsCEmC.js.map +1 -0
  10. package/dist/cjs/loader.cjs.js +1 -1
  11. package/dist/components/index.js +1 -1
  12. package/dist/components/index.js.map +1 -1
  13. package/dist/esm/bds.js +2 -2
  14. package/dist/esm/ds-button_2.entry.js +1 -1
  15. package/dist/esm/index-Wtf1fKUK.js +1391 -0
  16. package/dist/esm/index-Wtf1fKUK.js.map +1 -0
  17. package/dist/esm/loader.js +2 -2
  18. package/dist/www/build/bds.css +1 -1
  19. package/dist/www/build/bds.esm.js +1 -1
  20. package/dist/www/build/p-444f99b6.css +1 -0
  21. package/dist/www/build/{p-30a9c996.entry.js → p-67bc59c5.entry.js} +2 -2
  22. package/dist/www/build/p-Wtf1fKUK.js +3 -0
  23. package/dist/www/build/p-Wtf1fKUK.js.map +1 -0
  24. package/dist/www/css/README.md +74 -1
  25. package/dist/www/css/advertorial/components/_dsysdocs.css +10 -3
  26. package/dist/www/css/advertorial/components/article.css +17 -51
  27. package/dist/www/css/advertorial/components/audioplayer.css +2 -2
  28. package/dist/www/css/advertorial/components/avatar.css +3 -37
  29. package/dist/www/css/advertorial/components/badge.css +3 -11
  30. package/dist/www/css/advertorial/components/breadcrumb.css +6 -24
  31. package/dist/www/css/advertorial/components/breakingnews.css +2 -18
  32. package/dist/www/css/advertorial/components/button.css +7 -11
  33. package/dist/www/css/advertorial/components/card.css +2 -2
  34. package/dist/www/css/advertorial/components/carousel.css +2 -2
  35. package/dist/www/css/advertorial/components/chip.css +2 -2
  36. package/dist/www/css/advertorial/components/datepicker.css +4 -4
  37. package/dist/www/css/advertorial/components/drawers.css +2 -2
  38. package/dist/www/css/advertorial/components/dropdown.css +2 -2
  39. package/dist/www/css/advertorial/components/footer.css +6 -30
  40. package/dist/www/css/advertorial/components/icon.css +2 -2
  41. package/dist/www/css/advertorial/components/iconbutton.css +53 -0
  42. package/dist/www/css/advertorial/components/infoelement.css +2 -2
  43. package/dist/www/css/advertorial/components/inputfield.css +13 -8
  44. package/dist/www/css/advertorial/components/liveticker.css +2 -10
  45. package/dist/www/css/advertorial/components/mediaplayer.css +4 -20
  46. package/dist/www/css/advertorial/components/menu.css +6 -33
  47. package/dist/www/css/advertorial/components/newsticker.css +2 -18
  48. package/dist/www/css/advertorial/components/pagination.css +3 -3
  49. package/dist/www/css/advertorial/components/paywall.css +3 -12
  50. package/dist/www/css/advertorial/components/quote.css +2 -2
  51. package/dist/www/css/advertorial/components/radiobutton.css +2 -2
  52. package/dist/www/css/advertorial/components/search.css +2 -2
  53. package/dist/www/css/advertorial/components/sectiontitle.css +2 -2
  54. package/dist/www/css/advertorial/components/separator.css +2 -2
  55. package/dist/www/css/advertorial/components/skeletons.css +2 -2
  56. package/dist/www/css/advertorial/components/slider.css +2 -2
  57. package/dist/www/css/advertorial/components/specialnavi.css +2 -2
  58. package/dist/www/css/advertorial/components/spinner.css +2 -2
  59. package/dist/www/css/advertorial/components/tab.css +2 -18
  60. package/dist/www/css/advertorial/components/table.css +2 -2
  61. package/dist/www/css/advertorial/components/teaser.css +2 -42
  62. package/dist/www/css/advertorial/components/toggleswitch.css +2 -2
  63. package/dist/www/css/advertorial/components/video.css +2 -2
  64. package/dist/www/css/advertorial/theme.css +2 -2
  65. package/dist/www/css/advertorial/tokens.css +197 -336
  66. package/dist/www/css/bild/components/_dsysdoc.css +2 -6
  67. package/dist/www/css/bild/components/_dsysdocs.css +10 -3
  68. package/dist/www/css/bild/components/alert.css +2 -8
  69. package/dist/www/css/bild/components/article.css +17 -51
  70. package/dist/www/css/bild/components/audioplayer.css +2 -2
  71. package/dist/www/css/bild/components/avatar.css +12 -51
  72. package/dist/www/css/bild/components/badge.css +3 -11
  73. package/dist/www/css/bild/components/breadcrumb.css +14 -50
  74. package/dist/www/css/bild/components/breakingnews.css +11 -27
  75. package/dist/www/css/bild/components/button.css +37 -58
  76. package/dist/www/css/bild/components/card.css +4 -4
  77. package/dist/www/css/bild/components/carousel.css +2 -2
  78. package/dist/www/css/bild/components/chip.css +16 -22
  79. package/dist/www/css/bild/components/datepicker.css +4 -4
  80. package/dist/www/css/bild/components/drawers.css +2 -2
  81. package/dist/www/css/bild/components/dropdown.css +6 -6
  82. package/dist/www/css/bild/components/empties.css +6 -6
  83. package/dist/www/css/bild/components/footer.css +6 -30
  84. package/dist/www/css/bild/components/gallery.css +2 -2
  85. package/dist/www/css/bild/components/icon.css +2 -2
  86. package/dist/www/css/bild/components/iconbutton.css +53 -0
  87. package/dist/www/css/bild/components/infoelement.css +2 -2
  88. package/dist/www/css/bild/components/inputfield.css +16 -33
  89. package/dist/www/css/bild/components/kicker.css +6 -6
  90. package/dist/www/css/bild/components/liveticker.css +2 -10
  91. package/dist/www/css/bild/components/mediaplayer.css +26 -40
  92. package/dist/www/css/bild/components/menu.css +18 -46
  93. package/dist/www/css/bild/components/menuitem.css +8 -29
  94. package/dist/www/css/bild/components/newsticker.css +4 -20
  95. package/dist/www/css/bild/components/pagination.css +9 -10
  96. package/dist/www/css/bild/components/partnerlinks.css +12 -20
  97. package/dist/www/css/bild/components/paywall.css +3 -12
  98. package/dist/www/css/bild/components/quote.css +2 -2
  99. package/dist/www/css/bild/components/radiobutton.css +2 -2
  100. package/dist/www/css/bild/components/search.css +2 -2
  101. package/dist/www/css/bild/components/sectiontitle.css +2 -2
  102. package/dist/www/css/bild/components/selection.css +6 -23
  103. package/dist/www/css/bild/components/separator.css +2 -2
  104. package/dist/www/css/bild/components/skeletons.css +2 -2
  105. package/dist/www/css/bild/components/slider.css +4 -4
  106. package/dist/www/css/bild/components/specialnavi.css +2 -2
  107. package/dist/www/css/bild/components/spinner.css +2 -2
  108. package/dist/www/css/bild/components/subheader.css +3 -3
  109. package/dist/www/css/bild/components/tab.css +2 -24
  110. package/dist/www/css/bild/components/table.css +2 -2
  111. package/dist/www/css/bild/components/teaser.css +6 -46
  112. package/dist/www/css/bild/components/toggleswitch.css +2 -2
  113. package/dist/www/css/bild/components/video.css +2 -2
  114. package/dist/www/css/bild/theme.css +319 -209
  115. package/dist/www/css/bild/tokens.css +197 -336
  116. package/dist/www/css/bundles/advertorial.css +380 -706
  117. package/dist/www/css/bundles/bild.css +839 -1291
  118. package/dist/www/css/bundles/sportbild.css +846 -1311
  119. package/dist/www/css/shared/colorprimitive.css +91 -47
  120. package/dist/www/css/shared/fontprimitive.css +4 -2
  121. package/dist/www/css/shared/primitives.css +94 -47
  122. package/dist/www/css/shared/sizeprimitive.css +3 -2
  123. package/dist/www/css/shared/spaceprimitive.css +2 -2
  124. package/dist/www/css/sportbild/components/_dsysdoc.css +2 -6
  125. package/dist/www/css/sportbild/components/_dsysdocs.css +10 -3
  126. package/dist/www/css/sportbild/components/alert.css +2 -8
  127. package/dist/www/css/sportbild/components/article.css +17 -52
  128. package/dist/www/css/sportbild/components/audioplayer.css +2 -2
  129. package/dist/www/css/sportbild/components/avatar.css +12 -51
  130. package/dist/www/css/sportbild/components/badge.css +3 -11
  131. package/dist/www/css/sportbild/components/breadcrumb.css +14 -50
  132. package/dist/www/css/sportbild/components/breakingnews.css +6 -22
  133. package/dist/www/css/sportbild/components/button.css +37 -58
  134. package/dist/www/css/sportbild/components/card.css +4 -4
  135. package/dist/www/css/sportbild/components/carousel.css +2 -2
  136. package/dist/www/css/sportbild/components/chip.css +16 -22
  137. package/dist/www/css/sportbild/components/datepicker.css +4 -4
  138. package/dist/www/css/sportbild/components/drawers.css +2 -2
  139. package/dist/www/css/sportbild/components/dropdown.css +6 -6
  140. package/dist/www/css/sportbild/components/empties.css +6 -6
  141. package/dist/www/css/sportbild/components/footer.css +6 -30
  142. package/dist/www/css/sportbild/components/gallery.css +2 -2
  143. package/dist/www/css/sportbild/components/icon.css +2 -2
  144. package/dist/www/css/sportbild/components/iconbutton.css +53 -0
  145. package/dist/www/css/sportbild/components/infoelement.css +2 -2
  146. package/dist/www/css/sportbild/components/inputfield.css +16 -33
  147. package/dist/www/css/sportbild/components/kicker.css +6 -6
  148. package/dist/www/css/sportbild/components/liveticker.css +2 -10
  149. package/dist/www/css/sportbild/components/mediaplayer.css +26 -40
  150. package/dist/www/css/sportbild/components/menu.css +23 -53
  151. package/dist/www/css/sportbild/components/menuitem.css +8 -29
  152. package/dist/www/css/sportbild/components/newsticker.css +4 -21
  153. package/dist/www/css/sportbild/components/pagination.css +9 -10
  154. package/dist/www/css/sportbild/components/partnerlinks.css +12 -20
  155. package/dist/www/css/sportbild/components/paywall.css +3 -12
  156. package/dist/www/css/sportbild/components/quote.css +2 -2
  157. package/dist/www/css/sportbild/components/radiobutton.css +2 -2
  158. package/dist/www/css/sportbild/components/search.css +2 -2
  159. package/dist/www/css/sportbild/components/sectiontitle.css +2 -2
  160. package/dist/www/css/sportbild/components/selection.css +6 -23
  161. package/dist/www/css/sportbild/components/separator.css +2 -2
  162. package/dist/www/css/sportbild/components/skeletons.css +2 -2
  163. package/dist/www/css/sportbild/components/slider.css +4 -4
  164. package/dist/www/css/sportbild/components/specialnavi.css +2 -2
  165. package/dist/www/css/sportbild/components/spinner.css +2 -2
  166. package/dist/www/css/sportbild/components/subheader.css +3 -3
  167. package/dist/www/css/sportbild/components/tab.css +3 -25
  168. package/dist/www/css/sportbild/components/table.css +2 -2
  169. package/dist/www/css/sportbild/components/teaser.css +6 -51
  170. package/dist/www/css/sportbild/components/toggleswitch.css +2 -2
  171. package/dist/www/css/sportbild/components/video.css +2 -2
  172. package/dist/www/css/sportbild/theme.css +319 -209
  173. package/dist/www/css/sportbild/tokens.css +203 -346
  174. package/dist/www/index.html +1 -1
  175. package/package.json +1 -1
  176. package/dist/bds/p-V1LdMos7.js +0 -3
  177. package/dist/bds/p-V1LdMos7.js.map +0 -1
  178. package/dist/cjs/index-CrklIrqc.js +0 -1398
  179. package/dist/cjs/index-CrklIrqc.js.map +0 -1
  180. package/dist/esm/index-V1LdMos7.js +0 -1391
  181. package/dist/esm/index-V1LdMos7.js.map +0 -1
  182. package/dist/www/build/p-44d36d19.css +0 -1
  183. package/dist/www/build/p-V1LdMos7.js +0 -3
  184. package/dist/www/build/p-V1LdMos7.js.map +0 -1
  185. package/dist/www/css/advertorial/components/accordion.css +0 -29
  186. package/dist/www/css/bild/components/accordion.css +0 -29
  187. package/dist/www/css/bild/components/foldout.css +0 -34
  188. package/dist/www/css/bild/components/hey.css +0 -45
  189. package/dist/www/css/bild/components/socialsharebutton.css +0 -43
  190. package/dist/www/css/bild/components/textlink.css +0 -36
  191. package/dist/www/css/sportbild/components/accordion.css +0 -29
  192. package/dist/www/css/sportbild/components/foldout.css +0 -34
  193. package/dist/www/css/sportbild/components/hey.css +0 -45
  194. package/dist/www/css/sportbild/components/socialsharebutton.css +0 -43
  195. package/dist/www/css/sportbild/components/textlink.css +0 -36
  196. /package/dist/bds/{p-30a9c996.entry.js.map → p-67bc59c5.entry.js.map} +0 -0
  197. /package/dist/www/build/{p-30a9c996.entry.js.map → p-67bc59c5.entry.js.map} +0 -0
@@ -16,6 +16,7 @@
16
16
  - [📦 Bundle Options](#-bundle-options)
17
17
  - [🎨 Token Categories](#-token-categories)
18
18
  - [📱 Responsive Tokens](#-responsive-tokens)
19
+ - [🎚️ Density Tokens](#️-density-tokens)
19
20
  - [🧩 Component Tokens](#-component-tokens)
20
21
  - [✍️ Typography & Effects](#️-typography--effects)
21
22
  - [💡 Usage Examples](#-usage-examples)
@@ -136,7 +137,7 @@ dist/css/
136
137
 
137
138
  ├── bild/ # Modular files
138
139
  │ ├── theme.css # Semantic colors + Effects (light/dark)
139
- │ ├── tokens.css # Responsive breakpoints + Typography
140
+ │ ├── tokens.css # Breakpoints + Typography + Density
140
141
  │ └── components/ # Component-specific tokens
141
142
  │ ├── button.css
142
143
  │ ├── article.css
@@ -380,6 +381,78 @@ Tokens only appear in media queries when values change:
380
381
 
381
382
  ---
382
383
 
384
+ ## 🎚️ Density Tokens
385
+
386
+ Density tokens control spacing intensity across three modes: `default`, `dense`, and `spacious`.
387
+
388
+ ### Semantic Density (tokens.css)
389
+
390
+ Semantic density tokens are included in `tokens.css` and define responsive spacing values:
391
+
392
+ ```css
393
+ /* Constant spacing (no breakpoint dependency) */
394
+ [data-content-brand="bild"][data-density="default"] {
395
+ --density-stack-space-const-3-xs: var(--space-0-p-25-x, 2px);
396
+ --density-stack-space-const-sm: var(--space-1-x, 8px);
397
+ --density-stack-space-const-lg: var(--space-2-x, 16px);
398
+ }
399
+
400
+ /* Responsive spacing (breakpoint × density) */
401
+ [data-content-brand="bild"][data-density="default"] {
402
+ --density-xs-stack-space-resp-sm: var(--space-1-x, 8px);
403
+ --density-xs-stack-space-resp-md: var(--space-1-p-5-x, 12px);
404
+ }
405
+
406
+ @media (min-width: 600px) {
407
+ [data-content-brand="bild"][data-density="default"] {
408
+ --density-md-stack-space-resp-sm: var(--space-1-p-5-x, 12px);
409
+ --density-md-stack-space-resp-md: var(--space-2-x, 16px);
410
+ }
411
+ }
412
+ ```
413
+
414
+ ### Alias Chain: Breakpoint → Density → Primitive
415
+
416
+ Responsive breakpoint tokens reference density tokens, which in turn reference primitives:
417
+
418
+ ```css
419
+ /* BreakpointMode → Density → Primitive */
420
+ --stack-space-resp-md: var(--density-xs-stack-space-resp-md);
421
+
422
+ --density-xs-stack-space-resp-md: var(--space-1-p-5-x, 12px);
423
+
424
+ --space-1-p-5-x: 12px;
425
+ ```
426
+
427
+ This three-level chain enables:
428
+ - **Density switching** via `data-density` attribute without recompilation
429
+ - **Breakpoint switching** via native `@media` queries
430
+ - **Fallback values** for robustness
431
+
432
+ ### Component Density Tokens
433
+
434
+ Component-specific density tokens (e.g., Button, InputField) are in component files:
435
+
436
+ ```css
437
+ /* Component density tokens */
438
+ [data-content-brand="bild"][data-density="default"] {
439
+ --density-button-inline-space: var(--space-2-p-5-x, 20px);
440
+ --density-button-stack-space: var(--space-1-x, 8px);
441
+ }
442
+
443
+ [data-content-brand="bild"][data-density="dense"] {
444
+ --density-button-inline-space: var(--space-2-x, 16px);
445
+ --density-button-stack-space: var(--space-0-p-75-x, 6px);
446
+ }
447
+
448
+ [data-content-brand="bild"][data-density="spacious"] {
449
+ --density-button-inline-space: var(--space-3-x, 24px);
450
+ --density-button-stack-space: var(--space-1-p-5-x, 12px);
451
+ }
452
+ ```
453
+
454
+ ---
455
+
383
456
  ## 🧩 Component Tokens
384
457
 
385
458
  ### Structure per Component
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  *
4
- * BILD Design System Tokens v1.0.79
4
+ * BILD Design System Tokens v1.2.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Advertorial | Bundle: _DSysDocs Component Tokens
8
8
  *
9
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
9
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
10
10
  * Proprietary and confidential. All rights reserved.
11
11
  *
12
12
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -21,8 +21,10 @@
21
21
  --dsys-docs-width-size: 320px;
22
22
  --main-content-stage-size: 320px;
23
23
  --foundations-banner-height-size: var(--size-10-x, 80px);
24
+ --doc-label-resp-font-size: 10px;
24
25
  --ds-caption-stack-space-0-p-5-x: var(--space-0-p-5-x, 4px);
25
26
  --ds-caption-stack-space-1-x: var(--space-1-x, 8px);
27
+ --label-1-responsive-line-height: UNRESOLVED_VariableID:18038:10773;
26
28
  --1-column-mobile: 320px;
27
29
  --thin-banner-vertical-height-size: 558px;
28
30
  --specs-font-family: var(--font-family-gotham, Gotham);
@@ -34,6 +36,7 @@
34
36
  :host([data-content-brand="advertorial"]) {
35
37
  --dsys-docs-width-size: 750px;
36
38
  --main-content-stage-size: 750px;
39
+ --label-1-responsive-line-height: UNRESOLVED_VariableID:18038:10774;
37
40
  }
38
41
  }
39
42
 
@@ -44,8 +47,10 @@
44
47
  --ds-main-container-space: var(--space-8-p-5-x, 68px);
45
48
  --dsys-docs-width-size: 962px;
46
49
  --main-content-stage-size: 962px;
50
+ --doc-label-resp-font-size: 15px;
47
51
  --ds-caption-stack-space-0-p-5-x: var(--space-0-p-75-x, 6px);
48
52
  --ds-caption-stack-space-1-x: var(--space-1-p-5-x, 12px);
53
+ --label-1-responsive-line-height: UNRESOLVED_VariableID:18038:10775;
49
54
  --1-column-mobile: 930px;
50
55
  --doc-header-height-size: 160px;
51
56
  }
@@ -55,10 +60,12 @@
55
60
  [data-content-brand="advertorial"],
56
61
  :host([data-content-brand="advertorial"]) {
57
62
  --dsys-docs-width-size: 1440px;
58
- --main-content-stage-size: var(--size-128-x, 1024px);
63
+ --main-content-stage-size: 1024px;
59
64
  --foundations-banner-height-size: var(--size-17-p-5-x, 140px);
65
+ --doc-label-resp-font-size: 17px;
60
66
  --ds-caption-stack-space-0-p-5-x: var(--space-1-x, 8px);
61
67
  --ds-caption-stack-space-1-x: var(--space-2-x, 16px);
68
+ --label-1-responsive-line-height: UNRESOLVED_VariableID:18038:10776;
62
69
  --1-column-mobile: 656px;
63
70
  --thin-banner-vertical-height-size: 186px;
64
71
  --doc-header-height-size: 180px;
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  *
4
- * BILD Design System Tokens v1.0.79
4
+ * BILD Design System Tokens v1.2.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Advertorial | Bundle: Article Component Tokens
8
8
  *
9
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
9
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
10
10
  * Proprietary and confidential. All rights reserved.
11
11
  *
12
12
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -22,90 +22,56 @@
22
22
  line-height: var(--kicker-1-line-height);
23
23
  }
24
24
 
25
- [data-content-brand="advertorial"] .article-image-caption,
26
- :host([data-content-brand="advertorial"]) .article-image-caption {
27
- font-family: var(--body-font-family);
28
- font-weight: var(--font-weight-bold, 700);
29
- font-size: var(--article-image-caption-font-size);
30
- line-height: var(--article-image-caption-line-height);
31
- }
32
-
33
- [data-content-brand="advertorial"] .article-headline,
34
- :host([data-content-brand="advertorial"]) .article-headline {
35
- font-family: var(--headline-font-family);
36
- font-weight: 900;
37
- font-size: var(--headline-2-font-size);
38
- line-height: var(--headline-2-font-size);
39
- }
40
-
41
- [data-content-brand="advertorial"] .article-meta-source,
42
- :host([data-content-brand="advertorial"]) .article-meta-source {
43
- font-family: var(--footnote-font-family);
44
- font-weight: var(--footnote-font-weight-book);
45
- font-size: 13px;
46
- line-height: 19px;
47
- }
48
-
49
- [data-content-brand="advertorial"] .article-time-stamp,
50
- :host([data-content-brand="advertorial"]) .article-time-stamp {
51
- font-family: var(--font-family-lucida-grande, Lucida Grande);
52
- font-weight: var(--font-weight-black, 800);
53
- font-size: 12px;
54
- }
55
-
56
25
  /* === BREAKPOINT TOKENS === */
57
26
 
58
27
  [data-content-brand="advertorial"],
59
28
  :host([data-content-brand="advertorial"]) {
60
29
  --aricle-mobile-1-col-grid-image-margin-space: var(--space-0-x, 0px);
61
30
  --article-top-margin-space: var(--stack-space-resp-sm);
62
- --article-kicker-font-size: var(--kicker-1-font-size);
63
- --article-headline-font-size: var(--headline-2-font-size);
64
- --article-gallery-ateaser-width: 145px;
65
- --article-image-caption-font-size: 13px;
66
- --article-image-source-font-size: 13px;
67
- --article-image-caption-line-height: 19.5px;
68
- --article-image-source-line-height: 19px;
69
31
  --article-content-stack-space: var(--stack-space-resp-lg);
70
32
  --article-headings-stack-space: var(--space-1-p-5-x, 12px);
71
33
  --article-image-landscape-inline-space: var(--space-0-x, 0px);
72
- --article-meta-font-family: var(--font-family-lucida-grande, Lucida Grande);
73
- --article-meta-font-size: 12px;
74
34
  --article-content-inline-space: var(--space-2-x, 16px);
75
35
  --article-headings-inline-space: var(--space-2-x, 16px);
76
36
  --article-image-portait-inline-space: var(--space-0-x, 0px);
77
37
  --article-image-container-stack-space: var(--stack-space-resp-sm);
78
38
  --article-infobox-inline-space: var(--inline-space-resp-lg);
79
39
  --article-infobox-stack-space: var(--stack-space-resp-lg);
40
+ --article-kicker-font-size: var(--kicker-1-font-size);
41
+ --article-headline-font-size: var(--headline-2-font-size);
42
+ --article-image-caption-font-size: 13px;
43
+ --article-image-source-font-size: 13px;
44
+ --article-meta-font-size: 12px;
45
+ --article-image-caption-line-height: 19.5px;
46
+ --article-image-source-line-height: 19px;
47
+ --article-meta-font-family: var(--font-family-lucida-grande, Lucida Grande);
80
48
  }
81
49
 
82
50
  @media (min-width: 600px) {
83
51
  [data-content-brand="advertorial"],
84
52
  :host([data-content-brand="advertorial"]) {
85
53
  --aricle-mobile-1-col-grid-image-margin-space: var(--space-9-x, 72px);
86
- --article-headline-font-size: var(--headline-1-font-size);
87
- --article-gallery-ateaser-width: 260px;
88
54
  --article-image-landscape-inline-space: var(--space-1-p-5-x, 12px);
89
- --article-meta-font-size: 14px;
90
55
  --article-content-inline-space: var(--space-9-x, 72px);
91
56
  --article-headings-inline-space: var(--space-9-x, 72px);
92
57
  --article-image-portait-inline-space: var(--space-9-x, 72px);
58
+ --article-headline-font-size: var(--headline-1-font-size);
59
+ --article-meta-font-size: 14px;
93
60
  }
94
61
  }
95
62
 
96
63
  @media (min-width: 1024px) {
97
64
  [data-content-brand="advertorial"],
98
65
  :host([data-content-brand="advertorial"]) {
99
- --article-gallery-ateaser-width: 300px;
100
- --article-image-caption-font-size: 16px;
101
- --article-image-source-font-size: 16px;
102
- --article-image-caption-line-height: 24px;
103
- --article-image-source-line-height: 24px;
104
66
  --article-headings-stack-space: var(--space-2-x, 16px);
105
67
  --article-image-landscape-inline-space: var(--space-2-x, 16px);
106
- --article-meta-font-size: 16px;
107
68
  --article-content-inline-space: 162px;
108
69
  --article-headings-inline-space: var(--space-2-x, 16px);
109
70
  --article-image-portait-inline-space: 162px;
71
+ --article-image-caption-font-size: 16px;
72
+ --article-image-source-font-size: 16px;
73
+ --article-meta-font-size: 16px;
74
+ --article-image-caption-line-height: 24px;
75
+ --article-image-source-line-height: 24px;
110
76
  }
111
77
  }
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  *
4
- * BILD Design System Tokens v1.0.79
4
+ * BILD Design System Tokens v1.2.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Advertorial | Bundle: AudioPlayer Component Tokens
8
8
  *
9
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
9
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
10
10
  * Proprietary and confidential. All rights reserved.
11
11
  *
12
12
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  *
4
- * BILD Design System Tokens v1.0.79
4
+ * BILD Design System Tokens v1.2.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Advertorial | Bundle: Avatar Component Tokens
8
8
  *
9
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
9
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
10
10
  * Proprietary and confidential. All rights reserved.
11
11
  *
12
12
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -22,40 +22,6 @@
22
22
  text-transform: uppercase;
23
23
  }
24
24
 
25
- [data-content-brand="advertorial"] .avatar-default,
26
- :host([data-content-brand="advertorial"]) .avatar-default {
27
- font-family: var(--font-family-lucida-grande, Lucida Grande);
28
- font-weight: var(--font-weight-bold, 700);
29
- font-size: 13px;
30
- line-height: 21px;
31
- }
32
-
33
- [data-content-brand="advertorial"] .avatar-hover,
34
- :host([data-content-brand="advertorial"]) .avatar-hover {
35
- font-family: var(--font-family-lucida-grande, Lucida Grande);
36
- font-weight: var(--label-font-weight-bold);
37
- font-size: 13px;
38
- line-height: 21px;
39
- text-decoration: underline;
40
- }
41
-
42
- [data-content-brand="advertorial"] .avatar-secondary-info,
43
- :host([data-content-brand="advertorial"]) .avatar-secondary-info {
44
- font-family: var(--font-family-lucida-grande, Lucida Grande);
45
- font-weight: var(--label-font-weight-book);
46
- font-size: 13px;
47
- line-height: 21px;
48
- }
49
-
50
- [data-content-brand="advertorial"] .avatar-secondary-info-hover,
51
- :host([data-content-brand="advertorial"]) .avatar-secondary-info-hover {
52
- font-family: var(--font-family-lucida-grande, Lucida Grande);
53
- font-weight: var(--label-font-weight-book);
54
- font-size: 13px;
55
- line-height: 21px;
56
- text-decoration: underline;
57
- }
58
-
59
25
  /* === BREAKPOINT TOKENS === */
60
26
 
61
27
  [data-content-brand="advertorial"],
@@ -63,7 +29,7 @@
63
29
  --avatar-label-font-size: 13px;
64
30
  --avatar-article-size: var(--size-const-md);
65
31
  --avatar-author-page-size: var(--size-12-x, 96px);
66
- --avatar-font-family: var(--font-family-lucida-grande, Lucida Grande);
32
+ --avatar-font-family: var(--body-font-family);
67
33
  --avatar-label-line-height: 21px;
68
34
  --avatar-lane-gap-space: var(--space-2-x, 16px);
69
35
  --app-avatar-font-family: var(--title-font-family);
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  *
4
- * BILD Design System Tokens v1.0.79
4
+ * BILD Design System Tokens v1.2.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Advertorial | Bundle: Badge Component Tokens
8
8
  *
9
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
9
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
10
10
  * Proprietary and confidential. All rights reserved.
11
11
  *
12
12
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -16,20 +16,12 @@
16
16
 
17
17
  [data-content-brand="advertorial"] .video-ad-badge,
18
18
  :host([data-content-brand="advertorial"]) .video-ad-badge {
19
- font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
19
+ font-family: var(--body-font-family);
20
20
  font-weight: var(--font-weight-book, 400);
21
21
  font-size: 14px;
22
22
  text-transform: uppercase;
23
23
  }
24
24
 
25
- [data-content-brand="advertorial"] .video-time-badge,
26
- :host([data-content-brand="advertorial"]) .video-time-badge {
27
- font-family: var(--font-family-lucida-grande, Lucida Grande);
28
- font-weight: var(--label-font-weight-book);
29
- font-size: 16px;
30
- line-height: 21px;
31
- }
32
-
33
25
  /* === BREAKPOINT TOKENS === */
34
26
 
35
27
  [data-content-brand="advertorial"],
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  *
4
- * BILD Design System Tokens v1.0.79
4
+ * BILD Design System Tokens v1.2.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Advertorial | Bundle: Breadcrumb Component Tokens
8
8
  *
9
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
9
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
10
10
  * Proprietary and confidential. All rights reserved.
11
11
  *
12
12
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -16,41 +16,23 @@
16
16
 
17
17
  [data-content-brand="advertorial"] .breadcrumb,
18
18
  :host([data-content-brand="advertorial"]) .breadcrumb {
19
- font-family: var(--font-family-lucida-grande, Lucida Grande);
20
- font-weight: var(--font-weight-bold, 700);
19
+ font-family: var(--body-font-family);
20
+ font-weight: var(--body-font-weight-bold);
21
21
  font-size: var(--breadcrumb-font-size);
22
22
  line-height: var(--breadcrumb-line-height);
23
23
  }
24
24
 
25
- [data-content-brand="advertorial"] .breadcrumb-link,
26
- :host([data-content-brand="advertorial"]) .breadcrumb-link {
27
- font-family: var(--font-family-lucida-grande, Lucida Grande);
28
- font-weight: var(--font-weight-bold, 700);
29
- font-size: 15px;
30
- line-height: 15px;
31
- text-decoration: underline;
32
- }
33
-
34
- [data-content-brand="advertorial"] .breadcrumb-link-hover,
35
- :host([data-content-brand="advertorial"]) .breadcrumb-link-hover {
36
- font-family: var(--font-family-lucida-grande, Lucida Grande);
37
- font-weight: var(--body-font-weight-bold);
38
- font-size: 15px;
39
- line-height: 15px;
40
- text-decoration: underline;
41
- }
42
-
43
25
  /* === BREAKPOINT TOKENS === */
44
26
 
45
27
  [data-content-brand="advertorial"],
46
28
  :host([data-content-brand="advertorial"]) {
47
29
  --breadcrumb-font-size: 15px;
48
- --breadcrumb-font-family: var(--font-family-lucida-grande, Lucida Grande);
30
+ --breadcrumb-font-family: var(--body-font-family);
49
31
  --breadcrumb-arrow-left-inline-space-1: 3px;
50
32
  --breadcrumb-arrow-right-inline-space-2: 5px;
51
33
  --breadcrumb-inline-space: var(--grid-space-resp-base);
52
34
  --breadcrumb-line-height: 15px;
53
- --breadcrumb-font-weight: var(--font-weight-bold, 700);
35
+ --breadcrumb-font-weight: var(--body-font-weight-bold);
54
36
  --breadcrumb-stack-space: 14px;
55
37
  }
56
38
 
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  *
4
- * BILD Design System Tokens v1.0.79
4
+ * BILD Design System Tokens v1.2.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Advertorial | Bundle: BreakingNews Component Tokens
8
8
  *
9
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
9
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
10
10
  * Proprietary and confidential. All rights reserved.
11
11
  *
12
12
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -23,22 +23,6 @@
23
23
  text-transform: uppercase;
24
24
  }
25
25
 
26
- [data-content-brand="advertorial"] .breaking-news-upper-title,
27
- :host([data-content-brand="advertorial"]) .breaking-news-upper-title {
28
- font-family: var(--title-font-family);
29
- font-weight: var(--title-font-weight);
30
- font-size: 13px;
31
- line-height: 13px;
32
- }
33
-
34
- [data-content-brand="advertorial"] .breaking-news-lower-title,
35
- :host([data-content-brand="advertorial"]) .breaking-news-lower-title {
36
- font-family: var(--title-font-family);
37
- font-weight: var(--title-font-weight);
38
- font-size: 23px;
39
- line-height: 21px;
40
- }
41
-
42
26
  /* === BREAKPOINT TOKENS === */
43
27
 
44
28
  [data-content-brand="advertorial"],
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  *
4
- * BILD Design System Tokens v1.0.79
4
+ * BILD Design System Tokens v1.2.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Advertorial | Bundle: Button Component Tokens
8
8
  *
9
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
9
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
10
10
  * Proprietary and confidential. All rights reserved.
11
11
  *
12
12
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -24,6 +24,7 @@
24
24
  --density-button-stack-space: var(--space-1-x, 8px);
25
25
  --density-button-label-font-size: 17px;
26
26
  --density-button-inline-space: var(--space-2-p-5-x, 20px);
27
+ --density-button-height-size: var(--size-5-x, 40px);
27
28
 
28
29
  }
29
30
 
@@ -37,6 +38,7 @@
37
38
  --density-button-stack-space: var(--space-0-p-75-x, 6px);
38
39
  --density-button-label-font-size: 15px;
39
40
  --density-button-inline-space: var(--space-2-x, 16px);
41
+ --density-button-height-size: var(--size-4-p-5-x, 36px);
40
42
 
41
43
  }
42
44
 
@@ -50,6 +52,7 @@
50
52
  --density-button-stack-space: var(--space-1-p-5-x, 12px);
51
53
  --density-button-label-font-size: 19px;
52
54
  --density-button-inline-space: var(--space-3-x, 24px);
55
+ --density-button-height-size: var(--size-6-x, 48px);
53
56
 
54
57
  }
55
58
 
@@ -61,18 +64,10 @@
61
64
  font-weight: 700;
62
65
  font-size: var(--button-label-font-size);
63
66
  line-height: var(--button-label-line-height);
64
- letter-spacing: var(--letter-spacing-positive-sm);
67
+ letter-spacing: var(--letter-space-positive-sm);
65
68
  text-transform: uppercase;
66
69
  }
67
70
 
68
- [data-content-brand="advertorial"] .partner-link-button-label,
69
- :host([data-content-brand="advertorial"]) .partner-link-button-label {
70
- font-family: var(--label-font-family);
71
- font-weight: var(--label-font-weight-book);
72
- font-size: var(--partner-link-button-label-font-size);
73
- line-height: 16px;
74
- }
75
-
76
71
  /* === BREAKPOINT TOKENS === */
77
72
 
78
73
  [data-content-brand="advertorial"],
@@ -89,6 +84,7 @@
89
84
  --button-stack-space: var(--density-button-stack-space);
90
85
  --button-border-radius: var(--border-radius-md);
91
86
  --button-label-font-family: var(--label-font-family);
87
+ --button-height-size: var(--density-button-height-size);
92
88
  }
93
89
 
94
90
  @media (min-width: 1024px) {
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  *
4
- * BILD Design System Tokens v1.0.79
4
+ * BILD Design System Tokens v1.2.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Advertorial | Bundle: Card Component Tokens
8
8
  *
9
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
9
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
10
10
  * Proprietary and confidential. All rights reserved.
11
11
  *
12
12
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  *
4
- * BILD Design System Tokens v1.0.79
4
+ * BILD Design System Tokens v1.2.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Advertorial | Bundle: Carousel Component Tokens
8
8
  *
9
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
9
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
10
10
  * Proprietary and confidential. All rights reserved.
11
11
  *
12
12
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  *
4
- * BILD Design System Tokens v1.0.79
4
+ * BILD Design System Tokens v1.2.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Advertorial | Bundle: Chip Component Tokens
8
8
  *
9
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
9
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
10
10
  * Proprietary and confidential. All rights reserved.
11
11
  *
12
12
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  *
4
- * BILD Design System Tokens v1.0.79
4
+ * BILD Design System Tokens v1.2.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Advertorial | Bundle: Datepicker Component Tokens
8
8
  *
9
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
9
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
10
10
  * Proprietary and confidential. All rights reserved.
11
11
  *
12
12
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -16,7 +16,7 @@
16
16
 
17
17
  [data-content-brand="advertorial"],
18
18
  :host([data-content-brand="advertorial"]) {
19
- --datepicker-item-day-width-size: 44px;
20
- --datepicker-item-height-size: 44px;
19
+ --datepicker-item-day-width-size: var(--size-5-p-5-x, 44px);
20
+ --datepicker-item-height-size: var(--size-5-p-5-x, 44px);
21
21
  --datepicker-item-year-width-size: 77px;
22
22
  }
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  *
4
- * BILD Design System Tokens v1.0.79
4
+ * BILD Design System Tokens v1.2.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Advertorial | Bundle: Drawers Component Tokens
8
8
  *
9
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
9
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
10
10
  * Proprietary and confidential. All rights reserved.
11
11
  *
12
12
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  *
4
- * BILD Design System Tokens v1.0.79
4
+ * BILD Design System Tokens v1.2.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Advertorial | Bundle: Dropdown Component Tokens
8
8
  *
9
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
9
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
10
10
  * Proprietary and confidential. All rights reserved.
11
11
  *
12
12
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md