@marioschmidt/design-system-components 1.0.79 → 1.1.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-84bc6959.entry.js} +2 -2
  4. package/dist/bds/p-ChFDVObC.js +3 -0
  5. package/dist/bds/p-ChFDVObC.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-D8A-8VrK.js +1398 -0
  9. package/dist/cjs/index-D8A-8VrK.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-ChFDVObC.js +1391 -0
  16. package/dist/esm/index-ChFDVObC.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-30a9c996.entry.js → p-84bc6959.entry.js} +2 -2
  21. package/dist/www/build/p-ChFDVObC.js +3 -0
  22. package/dist/www/build/p-ChFDVObC.js.map +1 -0
  23. package/dist/www/build/p-bbf896ac.css +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/accordion.css +4 -10
  27. package/dist/www/css/advertorial/components/article.css +17 -51
  28. package/dist/www/css/advertorial/components/audioplayer.css +2 -2
  29. package/dist/www/css/advertorial/components/avatar.css +3 -37
  30. package/dist/www/css/advertorial/components/badge.css +2 -10
  31. package/dist/www/css/advertorial/components/breadcrumb.css +6 -24
  32. package/dist/www/css/advertorial/components/breakingnews.css +2 -18
  33. package/dist/www/css/advertorial/components/button.css +7 -11
  34. package/dist/www/css/advertorial/components/card.css +2 -2
  35. package/dist/www/css/advertorial/components/carousel.css +2 -2
  36. package/dist/www/css/advertorial/components/chip.css +2 -2
  37. package/dist/www/css/advertorial/components/datepicker.css +4 -4
  38. package/dist/www/css/advertorial/components/drawers.css +2 -2
  39. package/dist/www/css/advertorial/components/dropdown.css +2 -2
  40. package/dist/www/css/advertorial/components/footer.css +6 -30
  41. package/dist/www/css/advertorial/components/icon.css +2 -2
  42. package/dist/www/css/advertorial/components/iconbutton.css +53 -0
  43. package/dist/www/css/advertorial/components/infoelement.css +2 -2
  44. package/dist/www/css/advertorial/components/inputfield.css +13 -8
  45. package/dist/www/css/advertorial/components/liveticker.css +2 -10
  46. package/dist/www/css/advertorial/components/mediaplayer.css +4 -20
  47. package/dist/www/css/advertorial/components/menu.css +6 -33
  48. package/dist/www/css/advertorial/components/newsticker.css +2 -18
  49. package/dist/www/css/advertorial/components/pagination.css +3 -3
  50. package/dist/www/css/advertorial/components/paywall.css +3 -12
  51. package/dist/www/css/advertorial/components/quote.css +2 -2
  52. package/dist/www/css/advertorial/components/radiobutton.css +2 -2
  53. package/dist/www/css/advertorial/components/search.css +2 -2
  54. package/dist/www/css/advertorial/components/sectiontitle.css +2 -2
  55. package/dist/www/css/advertorial/components/separator.css +2 -2
  56. package/dist/www/css/advertorial/components/skeletons.css +2 -2
  57. package/dist/www/css/advertorial/components/slider.css +2 -2
  58. package/dist/www/css/advertorial/components/specialnavi.css +2 -2
  59. package/dist/www/css/advertorial/components/spinner.css +2 -2
  60. package/dist/www/css/advertorial/components/tab.css +2 -18
  61. package/dist/www/css/advertorial/components/table.css +2 -2
  62. package/dist/www/css/advertorial/components/teaser.css +2 -42
  63. package/dist/www/css/advertorial/components/toggleswitch.css +2 -2
  64. package/dist/www/css/advertorial/components/video.css +2 -2
  65. package/dist/www/css/advertorial/theme.css +2 -2
  66. package/dist/www/css/advertorial/tokens.css +197 -336
  67. package/dist/www/css/bild/components/_dsysdoc.css +2 -6
  68. package/dist/www/css/bild/components/_dsysdocs.css +10 -3
  69. package/dist/www/css/bild/components/accordion.css +4 -10
  70. package/dist/www/css/bild/components/alert.css +2 -8
  71. package/dist/www/css/bild/components/article.css +17 -51
  72. package/dist/www/css/bild/components/audioplayer.css +2 -2
  73. package/dist/www/css/bild/components/avatar.css +12 -51
  74. package/dist/www/css/bild/components/badge.css +2 -10
  75. package/dist/www/css/bild/components/breadcrumb.css +14 -50
  76. package/dist/www/css/bild/components/breakingnews.css +11 -27
  77. package/dist/www/css/bild/components/button.css +37 -58
  78. package/dist/www/css/bild/components/card.css +4 -4
  79. package/dist/www/css/bild/components/carousel.css +2 -2
  80. package/dist/www/css/bild/components/chip.css +16 -22
  81. package/dist/www/css/bild/components/datepicker.css +4 -4
  82. package/dist/www/css/bild/components/drawers.css +2 -2
  83. package/dist/www/css/bild/components/dropdown.css +6 -6
  84. package/dist/www/css/bild/components/empties.css +6 -6
  85. package/dist/www/css/bild/components/footer.css +6 -30
  86. package/dist/www/css/bild/components/gallery.css +2 -2
  87. package/dist/www/css/bild/components/icon.css +2 -2
  88. package/dist/www/css/bild/components/iconbutton.css +53 -0
  89. package/dist/www/css/bild/components/infoelement.css +2 -2
  90. package/dist/www/css/bild/components/inputfield.css +16 -33
  91. package/dist/www/css/bild/components/kicker.css +6 -6
  92. package/dist/www/css/bild/components/liveticker.css +2 -10
  93. package/dist/www/css/bild/components/mediaplayer.css +26 -40
  94. package/dist/www/css/bild/components/menu.css +18 -46
  95. package/dist/www/css/bild/components/menuitem.css +8 -29
  96. package/dist/www/css/bild/components/newsticker.css +4 -20
  97. package/dist/www/css/bild/components/pagination.css +9 -10
  98. package/dist/www/css/bild/components/partnerlinks.css +12 -20
  99. package/dist/www/css/bild/components/paywall.css +3 -12
  100. package/dist/www/css/bild/components/quote.css +2 -2
  101. package/dist/www/css/bild/components/radiobutton.css +2 -2
  102. package/dist/www/css/bild/components/search.css +2 -2
  103. package/dist/www/css/bild/components/sectiontitle.css +2 -2
  104. package/dist/www/css/bild/components/selection.css +6 -23
  105. package/dist/www/css/bild/components/separator.css +2 -2
  106. package/dist/www/css/bild/components/skeletons.css +2 -2
  107. package/dist/www/css/bild/components/slider.css +4 -4
  108. package/dist/www/css/bild/components/specialnavi.css +2 -2
  109. package/dist/www/css/bild/components/spinner.css +2 -2
  110. package/dist/www/css/bild/components/subheader.css +3 -3
  111. package/dist/www/css/bild/components/tab.css +2 -24
  112. package/dist/www/css/bild/components/table.css +2 -2
  113. package/dist/www/css/bild/components/teaser.css +6 -46
  114. package/dist/www/css/bild/components/toggleswitch.css +2 -2
  115. package/dist/www/css/bild/components/video.css +2 -2
  116. package/dist/www/css/bild/theme.css +321 -209
  117. package/dist/www/css/bild/tokens.css +197 -336
  118. package/dist/www/css/bundles/advertorial.css +381 -697
  119. package/dist/www/css/bundles/bild.css +842 -1282
  120. package/dist/www/css/bundles/sportbild.css +849 -1302
  121. package/dist/www/css/shared/colorprimitive.css +91 -47
  122. package/dist/www/css/shared/fontprimitive.css +4 -2
  123. package/dist/www/css/shared/primitives.css +94 -47
  124. package/dist/www/css/shared/sizeprimitive.css +3 -2
  125. package/dist/www/css/shared/spaceprimitive.css +2 -2
  126. package/dist/www/css/sportbild/components/_dsysdoc.css +2 -6
  127. package/dist/www/css/sportbild/components/_dsysdocs.css +10 -3
  128. package/dist/www/css/sportbild/components/accordion.css +4 -10
  129. package/dist/www/css/sportbild/components/alert.css +2 -8
  130. package/dist/www/css/sportbild/components/article.css +17 -52
  131. package/dist/www/css/sportbild/components/audioplayer.css +2 -2
  132. package/dist/www/css/sportbild/components/avatar.css +12 -51
  133. package/dist/www/css/sportbild/components/badge.css +2 -10
  134. package/dist/www/css/sportbild/components/breadcrumb.css +14 -50
  135. package/dist/www/css/sportbild/components/breakingnews.css +6 -22
  136. package/dist/www/css/sportbild/components/button.css +37 -58
  137. package/dist/www/css/sportbild/components/card.css +4 -4
  138. package/dist/www/css/sportbild/components/carousel.css +2 -2
  139. package/dist/www/css/sportbild/components/chip.css +16 -22
  140. package/dist/www/css/sportbild/components/datepicker.css +4 -4
  141. package/dist/www/css/sportbild/components/drawers.css +2 -2
  142. package/dist/www/css/sportbild/components/dropdown.css +6 -6
  143. package/dist/www/css/sportbild/components/empties.css +6 -6
  144. package/dist/www/css/sportbild/components/footer.css +6 -30
  145. package/dist/www/css/sportbild/components/gallery.css +2 -2
  146. package/dist/www/css/sportbild/components/icon.css +2 -2
  147. package/dist/www/css/sportbild/components/iconbutton.css +53 -0
  148. package/dist/www/css/sportbild/components/infoelement.css +2 -2
  149. package/dist/www/css/sportbild/components/inputfield.css +16 -33
  150. package/dist/www/css/sportbild/components/kicker.css +6 -6
  151. package/dist/www/css/sportbild/components/liveticker.css +2 -10
  152. package/dist/www/css/sportbild/components/mediaplayer.css +26 -40
  153. package/dist/www/css/sportbild/components/menu.css +23 -53
  154. package/dist/www/css/sportbild/components/menuitem.css +8 -29
  155. package/dist/www/css/sportbild/components/newsticker.css +4 -21
  156. package/dist/www/css/sportbild/components/pagination.css +9 -10
  157. package/dist/www/css/sportbild/components/partnerlinks.css +12 -20
  158. package/dist/www/css/sportbild/components/paywall.css +3 -12
  159. package/dist/www/css/sportbild/components/quote.css +2 -2
  160. package/dist/www/css/sportbild/components/radiobutton.css +2 -2
  161. package/dist/www/css/sportbild/components/search.css +2 -2
  162. package/dist/www/css/sportbild/components/sectiontitle.css +2 -2
  163. package/dist/www/css/sportbild/components/selection.css +6 -23
  164. package/dist/www/css/sportbild/components/separator.css +2 -2
  165. package/dist/www/css/sportbild/components/skeletons.css +2 -2
  166. package/dist/www/css/sportbild/components/slider.css +4 -4
  167. package/dist/www/css/sportbild/components/specialnavi.css +2 -2
  168. package/dist/www/css/sportbild/components/spinner.css +2 -2
  169. package/dist/www/css/sportbild/components/subheader.css +3 -3
  170. package/dist/www/css/sportbild/components/tab.css +3 -25
  171. package/dist/www/css/sportbild/components/table.css +2 -2
  172. package/dist/www/css/sportbild/components/teaser.css +6 -51
  173. package/dist/www/css/sportbild/components/toggleswitch.css +2 -2
  174. package/dist/www/css/sportbild/components/video.css +2 -2
  175. package/dist/www/css/sportbild/theme.css +321 -209
  176. package/dist/www/css/sportbild/tokens.css +203 -346
  177. package/dist/www/index.html +1 -1
  178. package/package.json +1 -1
  179. package/dist/bds/p-V1LdMos7.js +0 -3
  180. package/dist/bds/p-V1LdMos7.js.map +0 -1
  181. package/dist/cjs/index-CrklIrqc.js +0 -1398
  182. package/dist/cjs/index-CrklIrqc.js.map +0 -1
  183. package/dist/esm/index-V1LdMos7.js +0 -1391
  184. package/dist/esm/index-V1LdMos7.js.map +0 -1
  185. package/dist/www/build/p-44d36d19.css +0 -1
  186. package/dist/www/build/p-V1LdMos7.js +0 -3
  187. package/dist/www/build/p-V1LdMos7.js.map +0 -1
  188. package/dist/www/css/bild/components/foldout.css +0 -34
  189. package/dist/www/css/bild/components/hey.css +0 -45
  190. package/dist/www/css/bild/components/socialsharebutton.css +0 -43
  191. package/dist/www/css/bild/components/textlink.css +0 -36
  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-84bc6959.entry.js.map} +0 -0
  197. /package/dist/www/build/{p-30a9c996.entry.js.map → p-84bc6959.entry.js.map} +0 -0
@@ -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.1.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Sportbild | 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
@@ -23,91 +23,56 @@
23
23
  font-style: italic;
24
24
  }
25
25
 
26
- [data-content-brand="sportbild"] .article-image-caption,
27
- :host([data-content-brand="sportbild"]) .article-image-caption {
28
- font-family: var(--body-font-family);
29
- font-weight: var(--font-weight-bold, 700);
30
- font-size: var(--article-image-caption-font-size);
31
- line-height: var(--article-image-caption-line-height);
32
- }
33
-
34
- [data-content-brand="sportbild"] .article-headline,
35
- :host([data-content-brand="sportbild"]) .article-headline {
36
- font-family: var(--headline-font-family);
37
- font-weight: 900;
38
- font-size: var(--headline-2-font-size);
39
- line-height: var(--headline-2-font-size);
40
- font-style: italic;
41
- }
42
-
43
- [data-content-brand="sportbild"] .article-meta-source,
44
- :host([data-content-brand="sportbild"]) .article-meta-source {
45
- font-family: var(--footnote-font-family);
46
- font-weight: var(--footnote-font-weight-book);
47
- font-size: 13px;
48
- line-height: 17px;
49
- }
50
-
51
- [data-content-brand="sportbild"] .article-time-stamp,
52
- :host([data-content-brand="sportbild"]) .article-time-stamp {
53
- font-family: var(--font-family-antenna-cond, AntennaCond);
54
- font-weight: var(--font-weight-black, 800);
55
- font-size: 12px;
56
- }
57
-
58
26
  /* === BREAKPOINT TOKENS === */
59
27
 
60
28
  [data-content-brand="sportbild"],
61
29
  :host([data-content-brand="sportbild"]) {
62
30
  --aricle-mobile-1-col-grid-image-margin-space: var(--space-0-x, 0px);
63
31
  --article-top-margin-space: var(--stack-space-resp-sm);
64
- --article-kicker-font-size: var(--kicker-1-font-size);
65
- --article-headline-font-size: var(--headline-2-font-size);
66
- --article-gallery-ateaser-width: 145px;
67
- --article-image-caption-font-size: 13px;
68
- --article-image-source-font-size: 13px;
69
- --article-image-caption-line-height: 16.9px;
70
- --article-image-source-line-height: 17px;
71
32
  --article-content-stack-space: var(--stack-space-resp-lg);
72
33
  --article-headings-stack-space: var(--space-1-p-5-x, 12px);
73
34
  --article-image-landscape-inline-space: var(--space-0-x, 0px);
74
- --article-meta-font-family: var(--font-family-antenna-cond, AntennaCond);
75
- --article-meta-font-size: 12px;
76
35
  --article-content-inline-space: var(--space-2-x, 16px);
77
36
  --article-headings-inline-space: var(--space-2-x, 16px);
78
37
  --article-image-portait-inline-space: var(--space-0-x, 0px);
79
38
  --article-image-container-stack-space: var(--stack-space-resp-sm);
80
39
  --article-infobox-inline-space: var(--inline-space-resp-lg);
81
40
  --article-infobox-stack-space: var(--stack-space-resp-lg);
41
+ --article-kicker-font-size: var(--kicker-1-font-size);
42
+ --article-headline-font-size: var(--headline-2-font-size);
43
+ --article-image-caption-font-size: 13px;
44
+ --article-image-source-font-size: 13px;
45
+ --article-meta-font-size: 12px;
46
+ --article-image-caption-line-height: 16.9px;
47
+ --article-image-source-line-height: 17px;
48
+ --article-meta-font-family: var(--font-family-antenna-cond, AntennaCond);
82
49
  }
83
50
 
84
51
  @media (min-width: 600px) {
85
52
  [data-content-brand="sportbild"],
86
53
  :host([data-content-brand="sportbild"]) {
87
54
  --aricle-mobile-1-col-grid-image-margin-space: var(--space-9-x, 72px);
88
- --article-headline-font-size: var(--headline-1-font-size);
89
- --article-gallery-ateaser-width: 260px;
90
55
  --article-image-landscape-inline-space: var(--space-1-p-5-x, 12px);
91
- --article-meta-font-size: 14px;
92
56
  --article-content-inline-space: var(--space-9-x, 72px);
93
57
  --article-headings-inline-space: var(--space-9-x, 72px);
94
58
  --article-image-portait-inline-space: var(--space-9-x, 72px);
59
+ --article-headline-font-size: var(--headline-1-font-size);
60
+ --article-meta-font-size: 14px;
95
61
  }
96
62
  }
97
63
 
98
64
  @media (min-width: 1024px) {
99
65
  [data-content-brand="sportbild"],
100
66
  :host([data-content-brand="sportbild"]) {
101
- --article-gallery-ateaser-width: 300px;
102
- --article-image-caption-font-size: 15px;
103
- --article-image-source-font-size: 15px;
104
- --article-image-caption-line-height: 19.5px;
105
- --article-image-source-line-height: 19px;
106
67
  --article-headings-stack-space: var(--space-2-x, 16px);
107
68
  --article-image-landscape-inline-space: var(--space-2-x, 16px);
108
- --article-meta-font-size: 16px;
109
69
  --article-content-inline-space: 162px;
110
70
  --article-headings-inline-space: var(--space-2-x, 16px);
111
71
  --article-image-portait-inline-space: 162px;
72
+ --article-image-caption-font-size: 15px;
73
+ --article-image-source-font-size: 15px;
74
+ --article-meta-font-size: 16px;
75
+ --article-image-caption-line-height: 19.5px;
76
+ --article-image-source-line-height: 19px;
112
77
  }
113
78
  }
@@ -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.1.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Sportbild | 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.1.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Sportbild | 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
@@ -16,26 +16,14 @@
16
16
 
17
17
  [data-color-brand="sportbild"][data-theme="light"],
18
18
  :host([data-color-brand="sportbild"][data-theme="light"]) {
19
- /* ============================================
20
- OTHER
21
- ============================================ */
22
-
23
- --avatar-label-color: var(--color-neutral-45, #666B70);
24
- --avatar-label-color-hover: var(--color-spobi-blue-29, #174482);
25
-
19
+ --avatar-label-color-hover: var(--text-color-hover);
26
20
  }
27
21
 
28
22
  /* === COLOR TOKENS (DARK MODE) === */
29
23
 
30
24
  [data-color-brand="sportbild"][data-theme="dark"],
31
25
  :host([data-color-brand="sportbild"][data-theme="dark"]) {
32
- /* ============================================
33
- OTHER
34
- ============================================ */
35
-
36
- --avatar-label-color: var(--color-neutral-93, #E9ECEF);
37
- --avatar-label-color-hover: var(--color-spobi-blue-29, #174482);
38
-
26
+ --avatar-label-color-hover: var(--icon-color-hover);
39
27
  }
40
28
 
41
29
  /* === TYPOGRAPHY TOKENS === */
@@ -48,40 +36,6 @@
48
36
  text-transform: uppercase;
49
37
  }
50
38
 
51
- [data-content-brand="sportbild"] .avatar-default,
52
- :host([data-content-brand="sportbild"]) .avatar-default {
53
- font-family: var(--font-family-inter, Inter);
54
- font-weight: var(--font-weight-bold, 700);
55
- font-size: 13px;
56
- line-height: 21px;
57
- }
58
-
59
- [data-content-brand="sportbild"] .avatar-hover,
60
- :host([data-content-brand="sportbild"]) .avatar-hover {
61
- font-family: var(--font-family-inter, Inter);
62
- font-weight: var(--label-font-weight-bold);
63
- font-size: 13px;
64
- line-height: 21px;
65
- text-decoration: underline;
66
- }
67
-
68
- [data-content-brand="sportbild"] .avatar-secondary-info,
69
- :host([data-content-brand="sportbild"]) .avatar-secondary-info {
70
- font-family: var(--font-family-inter, Inter);
71
- font-weight: var(--label-font-weight-book);
72
- font-size: 13px;
73
- line-height: 21px;
74
- }
75
-
76
- [data-content-brand="sportbild"] .avatar-secondary-info-hover,
77
- :host([data-content-brand="sportbild"]) .avatar-secondary-info-hover {
78
- font-family: var(--font-family-inter, Inter);
79
- font-weight: var(--label-font-weight-book);
80
- font-size: 13px;
81
- line-height: 21px;
82
- text-decoration: underline;
83
- }
84
-
85
39
  /* === BREAKPOINT TOKENS === */
86
40
 
87
41
  [data-content-brand="sportbild"],
@@ -89,7 +43,7 @@
89
43
  --avatar-label-font-size: 13px;
90
44
  --avatar-article-size: var(--size-const-md);
91
45
  --avatar-author-page-size: var(--size-12-x, 96px);
92
- --avatar-font-family: var(--font-family-inter, Inter);
46
+ --avatar-font-family: var(--body-font-family);
93
47
  --avatar-label-line-height: 21px;
94
48
  --avatar-lane-gap-space: var(--space-2-x, 16px);
95
49
  --app-avatar-font-family: var(--title-font-family);
@@ -110,3 +64,10 @@
110
64
  --avatar-label-line-height: 23px;
111
65
  }
112
66
  }
67
+
68
+ /* === OTHER TOKENS === */
69
+
70
+ [data-color-brand="sportbild"],
71
+ :host([data-color-brand="sportbild"]) {
72
+ --avatar-label-color: var(--text-color-primary);
73
+ }
@@ -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.1.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Sportbild | 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
@@ -22,14 +22,6 @@
22
22
  text-transform: uppercase;
23
23
  }
24
24
 
25
- [data-content-brand="sportbild"] .video-time-badge,
26
- :host([data-content-brand="sportbild"]) .video-time-badge {
27
- font-family: var(--font-family-inter, Inter);
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="sportbild"],
@@ -1,82 +1,38 @@
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.1.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Sportbild | 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
13
13
  */
14
14
 
15
- /* === COLOR TOKENS (LIGHT MODE) === */
16
-
17
- [data-color-brand="sportbild"][data-theme="light"],
18
- :host([data-color-brand="sportbild"][data-theme="light"]) {
19
- /* ============================================
20
- OTHER
21
- ============================================ */
22
-
23
- --breadcrumb-text-color-idle: var(--color-neutral-35, #4B525A);
24
- --breadcrumb-text-color-hover: var(--color-neutral-15, #232629);
25
-
26
- }
27
-
28
- /* === COLOR TOKENS (DARK MODE) === */
29
-
30
- [data-color-brand="sportbild"][data-theme="dark"],
31
- :host([data-color-brand="sportbild"][data-theme="dark"]) {
32
- /* ============================================
33
- OTHER
34
- ============================================ */
35
-
36
- --breadcrumb-text-color-idle: var(--color-neutral-96, #F2F4F5);
37
- --breadcrumb-text-color-hover: var(--color-neutral-100, #FFFFFF);
38
-
39
- }
40
-
41
15
  /* === TYPOGRAPHY TOKENS === */
42
16
 
43
17
  [data-content-brand="sportbild"] .breadcrumb,
44
18
  :host([data-content-brand="sportbild"]) .breadcrumb {
45
- font-family: var(--font-family-inter, Inter);
46
- font-weight: var(--font-weight-bold, 700);
19
+ font-family: var(--body-font-family);
20
+ font-weight: var(--body-font-weight-bold);
47
21
  font-size: var(--breadcrumb-font-size);
48
22
  line-height: var(--breadcrumb-line-height);
49
23
  }
50
24
 
51
- [data-content-brand="sportbild"] .breadcrumb-link,
52
- :host([data-content-brand="sportbild"]) .breadcrumb-link {
53
- font-family: var(--font-family-inter, Inter);
54
- font-weight: var(--font-weight-book, 400);
55
- font-size: 14px;
56
- line-height: 14px;
57
- text-decoration: underline;
58
- }
59
-
60
- [data-content-brand="sportbild"] .breadcrumb-link-hover,
61
- :host([data-content-brand="sportbild"]) .breadcrumb-link-hover {
62
- font-family: var(--font-family-inter, Inter);
63
- font-weight: var(--body-font-weight-bold);
64
- font-size: 14px;
65
- line-height: 14px;
66
- text-decoration: underline;
67
- }
68
-
69
25
  /* === BREAKPOINT TOKENS === */
70
26
 
71
27
  [data-content-brand="sportbild"],
72
28
  :host([data-content-brand="sportbild"]) {
73
29
  --breadcrumb-font-size: 14px;
74
- --breadcrumb-font-family: var(--font-family-inter, Inter);
30
+ --breadcrumb-font-family: var(--body-font-family);
75
31
  --breadcrumb-arrow-left-inline-space-1: 3px;
76
32
  --breadcrumb-arrow-right-inline-space-2: 5px;
77
33
  --breadcrumb-inline-space: var(--grid-space-resp-base);
78
34
  --breadcrumb-line-height: 14px;
79
- --breadcrumb-font-weight: var(--font-weight-book, 400);
35
+ --breadcrumb-font-weight: var(--body-font-weight-bold);
80
36
  --breadcrumb-stack-space: 14px;
81
37
  }
82
38
 
@@ -89,3 +45,11 @@
89
45
  --breadcrumb-stack-space: 16px;
90
46
  }
91
47
  }
48
+
49
+ /* === OTHER TOKENS === */
50
+
51
+ [data-color-brand="sportbild"],
52
+ :host([data-color-brand="sportbild"]) {
53
+ --breadcrumb-text-color-idle: var(--text-color-idle);
54
+ --breadcrumb-text-color-hover: var(--text-color-hover);
55
+ }
@@ -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.1.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Sportbild | 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
@@ -20,9 +20,9 @@
20
20
  OTHER
21
21
  ============================================ */
22
22
 
23
- --breaking-news-title-surface-color: var(--color-spobi-blue-16, #0A2750);
23
+ --breaking-news-title-surface-color: var(--color-spobi-blue-20, #0C2F61);
24
24
  --breaking-news-surface-color: var(--color-yellow-80, #FFBF00);
25
- --breaking-news-text-content-color: var(--color-neutral-15, #232629);
25
+ --breaking-news-text-content-color: var(--color-neutral-15, #222628);
26
26
  --breaking-news-top-title-text-color: var(--color-yellow-80, #FFBF00);
27
27
  --breaking-news-bottom-title-text-color: var(--color-neutral-100, #FFFFFF);
28
28
 
@@ -36,9 +36,9 @@
36
36
  OTHER
37
37
  ============================================ */
38
38
 
39
- --breaking-news-title-surface-color: var(--color-spobi-blue-16, #0A2750);
39
+ --breaking-news-title-surface-color: var(--color-spobi-blue-20, #0C2F61);
40
40
  --breaking-news-surface-color: var(--color-yellow-80, #FFBF00);
41
- --breaking-news-text-content-color: var(--color-neutral-15, #232629);
41
+ --breaking-news-text-content-color: var(--color-neutral-15, #222628);
42
42
  --breaking-news-top-title-text-color: var(--color-yellow-80, #FFBF00);
43
43
  --breaking-news-bottom-title-text-color: var(--color-neutral-100, #FFFFFF);
44
44
 
@@ -55,22 +55,6 @@
55
55
  text-transform: uppercase;
56
56
  }
57
57
 
58
- [data-content-brand="sportbild"] .breaking-news-upper-title,
59
- :host([data-content-brand="sportbild"]) .breaking-news-upper-title {
60
- font-family: var(--title-font-family);
61
- font-weight: var(--title-font-weight);
62
- font-size: 13px;
63
- line-height: 13px;
64
- }
65
-
66
- [data-content-brand="sportbild"] .breaking-news-lower-title,
67
- :host([data-content-brand="sportbild"]) .breaking-news-lower-title {
68
- font-family: var(--title-font-family);
69
- font-weight: var(--title-font-weight);
70
- font-size: 23px;
71
- line-height: 21px;
72
- }
73
-
74
58
  /* === BREAKPOINT TOKENS === */
75
59
 
76
60
  [data-content-brand="sportbild"],
@@ -1,63 +1,17 @@
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.1.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Sportbild | 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
13
13
  */
14
14
 
15
- /* === COLOR TOKENS (LIGHT MODE) === */
16
-
17
- [data-color-brand="sportbild"][data-theme="light"],
18
- :host([data-color-brand="sportbild"][data-theme="light"]) {
19
- --button-primary-brand-bg-color-idle: var(--color-spobi-blue-29, #174482);
20
- --button-primary-brand-bg-color-hover: var(--color-spobi-blue-16, #0A2750);
21
- --button-primary-label-color: var(--color-neutral-100, #FFFFFF);
22
- --button-primary-success-color-idle: var(--color-green-56, #18995C);
23
- --button-primary-success-color-hover: var(--color-green-40, #006E3E);
24
- --button-primary-neutral-bg-color-idle: var(--color-neutral-15, #232629);
25
- --button-primary-neutral-bg-color-hover: var(--color-neutral-35, #4B525A);
26
- --button-tertiary-label-color: var(--color-neutral-35, #4B525A);
27
- --button-tertiary-border-color-idle: var(--color-neutral-85, #CED4DA);
28
- --button-tertiary-border-color-hover: var(--color-neutral-35, #4B525A);
29
- --button-tertiary-success-bg-color-hover: var(--color-green-93, #CEF4E4);
30
- --button-tertiary-success-border-color: var(--color-green-56, #18995C);
31
- --button-secondary-bg-color-hover: var(--color-neutral-85, #CED4DA);
32
- --button-secondary-label-color: var(--color-neutral-35, #4B525A);
33
- --button-secondary-bg-color-idle: var(--color-neutral-93, #E9ECEF);
34
- --button-live-ticker-load-new-label-color: var(--color-neutral-60, #8C9196);
35
- --button-ghost-bg-color-hover: var(--color-neutral-85, #CED4DA);
36
- }
37
-
38
- /* === COLOR TOKENS (DARK MODE) === */
39
-
40
- [data-color-brand="sportbild"][data-theme="dark"],
41
- :host([data-color-brand="sportbild"][data-theme="dark"]) {
42
- --button-primary-brand-bg-color-idle: var(--color-spobi-blue-38, #315998);
43
- --button-primary-brand-bg-color-hover: var(--color-spobi-blue-29, #174482);
44
- --button-primary-label-color: var(--color-neutral-100, #FFFFFF);
45
- --button-primary-success-color-idle: var(--color-green-56, #18995C);
46
- --button-primary-success-color-hover: var(--color-green-40, #006E3E);
47
- --button-primary-neutral-bg-color-idle: var(--color-neutral-100, #FFFFFF);
48
- --button-primary-neutral-bg-color-hover: var(--color-spobi-blue-81, #BDCADB);
49
- --button-tertiary-label-color: var(--color-neutral-96, #F2F4F5);
50
- --button-tertiary-border-color-idle: var(--color-neutral-35, #4B525A);
51
- --button-tertiary-border-color-hover: var(--color-neutral-100, #FFFFFF);
52
- --button-tertiary-success-bg-color-hover: var(--color-green-56-a-50, rgba(0, 155, 90, 0.5));
53
- --button-tertiary-success-border-color: var(--color-green-56, #18995C);
54
- --button-secondary-bg-color-hover: var(--alpha-neutral-85-a-50, rgba(206, 212, 218, 0.5));
55
- --button-secondary-label-color: var(--color-neutral-93, #E9ECEF);
56
- --button-secondary-bg-color-idle: var(--color-neutral-35, #4B525A);
57
- --button-live-ticker-load-new-label-color: var(--color-neutral-96, #F2F4F5);
58
- --button-ghost-bg-color-hover: var(--alpha-neutral-85-a-50, rgba(206, 212, 218, 0.5));
59
- }
60
-
61
15
  /* === DENSITY TOKENS === */
62
16
 
63
17
  [data-content-brand="sportbild"][data-density="default"],
@@ -70,6 +24,7 @@
70
24
  --density-button-stack-space: var(--space-1-x, 8px);
71
25
  --density-button-label-font-size: 17px;
72
26
  --density-button-inline-space: var(--space-2-p-5-x, 20px);
27
+ --density-button-height-size: var(--size-5-x, 40px);
73
28
 
74
29
  }
75
30
 
@@ -83,6 +38,7 @@
83
38
  --density-button-stack-space: var(--space-0-p-75-x, 6px);
84
39
  --density-button-label-font-size: 15px;
85
40
  --density-button-inline-space: var(--space-2-x, 16px);
41
+ --density-button-height-size: var(--size-4-p-5-x, 36px);
86
42
 
87
43
  }
88
44
 
@@ -96,6 +52,7 @@
96
52
  --density-button-stack-space: var(--space-1-p-5-x, 12px);
97
53
  --density-button-label-font-size: 19px;
98
54
  --density-button-inline-space: var(--space-3-x, 24px);
55
+ --density-button-height-size: var(--size-6-x, 48px);
99
56
 
100
57
  }
101
58
 
@@ -107,19 +64,11 @@
107
64
  font-weight: 700;
108
65
  font-size: var(--button-label-font-size);
109
66
  line-height: var(--button-label-line-height);
110
- letter-spacing: var(--letter-spacing-positive-sm);
67
+ letter-spacing: var(--letter-space-positive-sm);
111
68
  font-style: italic;
112
69
  text-transform: uppercase;
113
70
  }
114
71
 
115
- [data-content-brand="sportbild"] .partner-link-button-label,
116
- :host([data-content-brand="sportbild"]) .partner-link-button-label {
117
- font-family: var(--label-font-family);
118
- font-weight: var(--label-font-weight-book);
119
- font-size: var(--partner-link-button-label-font-size);
120
- line-height: 16px;
121
- }
122
-
123
72
  /* === BREAKPOINT TOKENS === */
124
73
 
125
74
  [data-content-brand="sportbild"],
@@ -136,6 +85,7 @@
136
85
  --button-stack-space: var(--density-button-stack-space);
137
86
  --button-border-radius: var(--border-radius-md);
138
87
  --button-label-font-family: var(--label-font-family);
88
+ --button-height-size: var(--density-button-height-size);
139
89
  }
140
90
 
141
91
  @media (min-width: 1024px) {
@@ -149,5 +99,34 @@
149
99
 
150
100
  [data-color-brand="sportbild"],
151
101
  :host([data-color-brand="sportbild"]) {
152
- --button-live-ticker-load-new-surface-color: var(--surface-color-primary);
102
+ --button-primary-brand-bg-color-idle: var(--bg-color-brand-solid);
103
+ --button-primary-brand-bg-color-hover: var(--bg-color-brand-solid-hover);
104
+ --button-primary-brand-label-color: var(--text-color-primary-on-dark);
105
+ --button-primary-brand-bg-color-active: var(--bg-color-brand-solid-active);
106
+ --button-tertiary-neutral-label-color: var(--text-color-active);
107
+ --button-tertiary-neutral-border-color-idle: var(--border-color-idle);
108
+ --button-tertiary-neutral-border-color-hover: var(--border-color-focus);
109
+ --button-tertiary-neutral-bg-color-hover: var(--bg-color-secondary);
110
+ --button-tertiary-neutral-bg-color-active: var(--bg-color-tertiary);
111
+ --button-secondary-bg-color-hover: var(--bg-color-quaternary);
112
+ --button-secondary-label-color: var(--text-color-active);
113
+ --button-secondary-bg-color-idle: var(--bg-color-tertiary);
114
+ --button-secondary-bg-color-active: var(--bg-color-quaternary);
115
+ --button-primary-success-bg-color-idle: var(--bg-color-success-solid);
116
+ --button-primary-success-bg-color-hover: var(--bg-color-success-solid-hover);
117
+ --button-primary-success-bg-color-active: var(--bg-color-success-solid-active);
118
+ --button-primary-success-label-color: var(--text-color-primary-on-dark);
119
+ --button-tertiary-success-bg-color-hover: var(--bg-color-success-tint-hover);
120
+ --button-tertiary-success-border-color: var(--border-color-success);
121
+ --button-tertiary-success-label-color: var(--text-color-success);
122
+ --button-primary-neutral-bg-color-idle: var(--bg-color-primary-inverse);
123
+ --button-primary-neutral-bg-color-hover: var(--bg-color-tertiary-inverse);
124
+ --button-primary-neutral-label-color: var(--text-color-inverse-high-contrast);
125
+ --button-primary-neutral-bg-color-active: var(--bg-color-quaternary-inverse);
126
+ --button-ghost-bg-color-hover: var(--bg-color-tertiary);
127
+ --button-ghost-label-color: var(--text-color-active);
128
+ --button-ghost-bg-color-active: var(--bg-color-quaternary);
129
+ --button-disabled-label-color: var(--text-color-disabled);
130
+ --button-disabled-bg-color: var(--bg-color-disabled);
131
+ --button-disabled-border-color: var(--border-color-disabled);
153
132
  }
@@ -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.1.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Sportbild | 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
@@ -20,7 +20,7 @@
20
20
  OTHER
21
21
  ============================================ */
22
22
 
23
- --card-surface-bg-color: var(--surface-color-primary);
23
+ --card-surface-bg-color: var(--bg-color-primary);
24
24
 
25
25
  }
26
26
 
@@ -32,7 +32,7 @@
32
32
  OTHER
33
33
  ============================================ */
34
34
 
35
- --card-surface-bg-color: var(--surface-color-secondary);
35
+ --card-surface-bg-color: var(--bg-color-secondary);
36
36
 
37
37
  }
38
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.1.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Sportbild | 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