@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: Menu 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,29 +16,27 @@
16
16
 
17
17
  [data-color-brand="sportbild"][data-theme="light"],
18
18
  :host([data-color-brand="sportbild"][data-theme="light"]) {
19
- --menu-scrolled-surface-gradient-color: rgba(255, 255, 255, 0.95);
20
- --menu-link-lane-surface-color: var(--color-spobi-blue-16, #0A2750);
21
- --menu-link-lane-label-color: var(--color-neutral-85, #CED4DA);
22
- --menu-link-lane-label-color-active: var(--color-neutral-100, #FFFFFF);
23
- --app-top-bar-surface-color: var(--color-spobi-blue-16, #0A2750);
24
- --app-top-bar-icon-color: var(--color-neutral-60, #8C9196);
25
- --app-top-bar-text-color-primary: var(--color-neutral-93, #E9ECEF);
26
- --app-tob-bar-tab-nav-bottom-border: var(--color-spobi-blue-29, #174482);
27
- --app-tob-bar-tab-nav-bottom-border-active: var(--color-neutral-85, #CED4DA);
19
+ --menu-scrolled-surface-gradient-color: var(--color-neutral-100-a-95, rgba(255, 255, 255, 0.95));
20
+ --menu-link-lane-surface-color: var(--color-spobi-blue-20, #0C2F61);
21
+ --menu-link-lane-label-color: var(--color-neutral-80, #C4C9CF);
22
+ --menu-link-lane-label-color-hover: var(--color-neutral-100, #FFFFFF);
23
+ --app-top-bar-surface-color: var(--color-spobi-blue-20, #0C2F61);
24
+ --app-top-bar-text-color-primary: var(--color-spobi-blue-90, #D6E1F2);
25
+ --app-tob-bar-tab-nav-bottom-border: var(--color-spobi-blue-30, #174482);
26
+ --app-tob-bar-tab-nav-bottom-border-active: var(--color-neutral-80, #C4C9CF);
28
27
  }
29
28
 
30
29
  /* === COLOR TOKENS (DARK MODE) === */
31
30
 
32
31
  [data-color-brand="sportbild"][data-theme="dark"],
33
32
  :host([data-color-brand="sportbild"][data-theme="dark"]) {
34
- --menu-scrolled-surface-gradient-color: rgba(35, 38, 41, 0.95);
35
- --menu-link-lane-surface-color: var(--color-spobi-blue-16, #0A2750);
36
- --menu-link-lane-label-color: var(--color-neutral-73, #AEB4B9);
37
- --menu-link-lane-label-color-active: var(--color-spobi-blue-98, #F7F9FD);
38
- --app-top-bar-surface-color: var(--color-spobi-blue-16, #0A2750);
39
- --app-top-bar-icon-color: var(--color-neutral-60, #8C9196);
40
- --app-top-bar-text-color-primary: var(--color-neutral-93, #E9ECEF);
41
- --app-tob-bar-tab-nav-bottom-border: var(--color-spobi-blue-29, #174482);
33
+ --menu-scrolled-surface-gradient-color: rgba(34, 38, 40, 0.95);
34
+ --menu-link-lane-surface-color: var(--color-spobi-blue-20, #0C2F61);
35
+ --menu-link-lane-label-color: var(--color-neutral-70, #A6ABB0);
36
+ --menu-link-lane-label-color-hover: var(--color-spobi-blue-95, #EFF1F5);
37
+ --app-top-bar-surface-color: var(--color-spobi-blue-20, #0C2F61);
38
+ --app-top-bar-text-color-primary: var(--color-spobi-blue-90, #D6E1F2);
39
+ --app-tob-bar-tab-nav-bottom-border: var(--color-spobi-blue-30, #174482);
42
40
  --app-tob-bar-tab-nav-bottom-border-active: var(--color-neutral-100, #FFFFFF);
43
41
  }
44
42
 
@@ -52,35 +50,6 @@
52
50
  line-height: 14px;
53
51
  }
54
52
 
55
- [data-content-brand="sportbild"] .app-topbar-tabs-title,
56
- :host([data-content-brand="sportbild"]) .app-topbar-tabs-title {
57
- font-family: var(--title-font-family);
58
- font-weight: var(--title-font-weight);
59
- font-size: 12px;
60
- line-height: 14px;
61
- text-transform: uppercase;
62
- }
63
-
64
- [data-content-brand="sportbild"] .menu-item-label,
65
- :host([data-content-brand="sportbild"]) .menu-item-label {
66
- font-family: var(--label-font-family);
67
- font-weight: 700;
68
- font-size: var(--size-2-p-25-x, 18px);
69
- line-height: var(--size-2-p-25-x, 18px);
70
- font-style: italic;
71
- text-transform: uppercase;
72
- }
73
-
74
- [data-content-brand="sportbild"] .menu-item-util-label,
75
- :host([data-content-brand="sportbild"]) .menu-item-util-label {
76
- font-family: var(--label-font-family);
77
- font-weight: 700;
78
- font-size: var(--size-1-p-5-x, 12px);
79
- line-height: var(--size-1-p-5-x, 12px);
80
- font-style: italic;
81
- text-transform: uppercase;
82
- }
83
-
84
53
  /* === BREAKPOINT TOKENS === */
85
54
 
86
55
  [data-content-brand="sportbild"],
@@ -103,8 +72,8 @@
103
72
  --menu-right-inline-space: var(--space-0-x, 0px);
104
73
  --menu-bottom-stack-space: var(--stack-space-const-sm);
105
74
  --menu-utility-links-divider-height-size: var(--size-const-sm);
106
- --menu-shadow-visibility: var(--alpha-black-10, rgba(0, 0, 0, 0.1));
107
- --hey-input-shadow-visibility: var(--alpha-black-0, rgba(0, 0, 0, 0));
75
+ --menu-shadow-visibility: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
76
+ --hey-input-shadow-visibility: var(--color-neutral-0-a-0, rgba(0, 0, 0, 0));
108
77
  --app-topbar-title-font-size: 12px;
109
78
  --app-topbar-stage-title-height: 14px;
110
79
  --i-osapp-top-bar-height-size: 44px;
@@ -135,8 +104,8 @@
135
104
  --menu-right-inline-space: var(--inline-space-const-lg);
136
105
  --menu-bottom-stack-space: var(--space-0-x, 0px);
137
106
  --menu-utility-links-divider-height-size: var(--size-const-md);
138
- --menu-shadow-visibility: var(--alpha-black-0, rgba(0, 0, 0, 0));
139
- --hey-input-shadow-visibility: var(--alpha-black-10, rgba(0, 0, 0, 0.1));
107
+ --menu-shadow-visibility: var(--color-neutral-0-a-0, rgba(0, 0, 0, 0));
108
+ --hey-input-shadow-visibility: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
140
109
  }
141
110
  }
142
111
 
@@ -144,5 +113,6 @@
144
113
 
145
114
  [data-color-brand="sportbild"],
146
115
  :host([data-color-brand="sportbild"]) {
147
- --menu-surface-color: var(--surface-color-primary);
116
+ --menu-surface-color: var(--bg-color-primary);
117
+ --app-top-bar-icon-color: var(--icon-color-secondary);
148
118
  }
@@ -1,43 +1,22 @@
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: MenuItem 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
- --menu-item-border-color-active: var(--color-spobi-blue-16, #0A2750);
24
- --menu-item-label-color-primary: var(--label-color-secondary);
25
- --menu-item-label-color-primary-active: var(--label-color-primary);
26
- --menu-item-label-color-secondary: var(--color-neutral-100, #FFFFFF);
27
-
28
- }
29
-
30
- /* === COLOR TOKENS (DARK MODE) === */
31
-
32
- [data-color-brand="sportbild"][data-theme="dark"],
33
- :host([data-color-brand="sportbild"][data-theme="dark"]) {
34
- /* ============================================
35
- OTHER
36
- ============================================ */
37
-
38
- --menu-item-border-color-active: var(--color-spobi-blue-98, #F7F9FD);
39
- --menu-item-label-color-primary: var(--label-color-tertiary);
40
- --menu-item-label-color-primary-active: var(--color-neutral-96, #F2F4F5);
41
- --menu-item-label-color-secondary: var(--color-neutral-100, #FFFFFF);
15
+ /* === OTHER TOKENS === */
42
16
 
17
+ [data-color-brand="sportbild"],
18
+ :host([data-color-brand="sportbild"]) {
19
+ --menu-item-border-color-active: var(--border-color-brand-light-only);
20
+ --menu-item-label-color-primary: var(--text-color-idle);
21
+ --menu-item-label-color-primary-active: var(--text-color-active);
43
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.1.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Sportbild | Bundle: NewsTicker 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,23 +22,6 @@
22
22
  line-height: 20.8px;
23
23
  }
24
24
 
25
- [data-content-brand="sportbild"] .news-ticker-kicker,
26
- :host([data-content-brand="sportbild"]) .news-ticker-kicker {
27
- font-family: var(--kicker-font-family);
28
- font-weight: var(--kicker-font-weight);
29
- font-size: var(--kicker-3-font-size);
30
- line-height: var(--kicker-3-line-height);
31
- }
32
-
33
- [data-content-brand="sportbild"] .news-ticker-headline,
34
- :host([data-content-brand="sportbild"]) .news-ticker-headline {
35
- font-family: var(--headline-font-family);
36
- font-weight: 900;
37
- font-size: var(--headline-3-font-size);
38
- line-height: var(--headline-3-line-height);
39
- font-style: italic;
40
- }
41
-
42
25
  /* === BREAKPOINT TOKENS === */
43
26
 
44
27
  [data-content-brand="sportbild"],
@@ -99,6 +82,6 @@
99
82
 
100
83
  [data-color-brand="sportbild"],
101
84
  :host([data-color-brand="sportbild"]) {
102
- --news-ticker-timestamp-color: var(--label-color-tertiary);
103
- --news-ticker-badge-icons-color: var(--label-color-tertiary);
85
+ --news-ticker-timestamp-color: var(--text-color-secondary);
86
+ --news-ticker-badge-icons-color: var(--icon-color-secondary);
104
87
  }
@@ -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: Pagination 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,18 +16,16 @@
16
16
 
17
17
  [data-color-brand="sportbild"][data-theme="light"],
18
18
  :host([data-color-brand="sportbild"][data-theme="light"]) {
19
- --pagination-element-color-default: var(--color-neutral-85, #CED4DA);
20
- --scroll-bar-track-bg-color: var(--alpha-black-10, rgba(0, 0, 0, 0.1));
21
- --scroll-bar-thumb-bg-color: var(--color-neutral-60, #8C9196);
19
+ --pagination-element-color-default: var(--bg-color-quaternary);
20
+ --scroll-bar-track-bg-color: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
22
21
  }
23
22
 
24
23
  /* === COLOR TOKENS (DARK MODE) === */
25
24
 
26
25
  [data-color-brand="sportbild"][data-theme="dark"],
27
26
  :host([data-color-brand="sportbild"][data-theme="dark"]) {
28
- --pagination-element-color-default: var(--color-neutral-60, #8C9196);
29
- --scroll-bar-track-bg-color: var(--alpha-white-10, rgba(255, 255, 255, 0.1));
30
- --scroll-bar-thumb-bg-color: var(--color-neutral-60, #8C9196);
27
+ --pagination-element-color-default: var(--bg-color-quaternary-inverse);
28
+ --scroll-bar-track-bg-color: var(--color-neutral-100-a-10, rgba(255, 255, 255, 0.1));
31
29
  }
32
30
 
33
31
  /* === TYPOGRAPHY TOKENS === */
@@ -50,7 +48,7 @@
50
48
  --gallery-pagination-container-web-inline-space: var(--inline-space-const-sm);
51
49
  --gallery-pagination-container-stack-space: var(--stack-space-const-md);
52
50
  --gallery-pagination-container-app-inline-space: var(--inline-space-const-md);
53
- --scroll-bar-thickness-size: var(--size-1-x, 8px);
51
+ --scroll-bar-thickness-size: var(--size-const-4-xs);
54
52
  }
55
53
 
56
54
  @media (min-width: 600px) {
@@ -65,6 +63,7 @@
65
63
 
66
64
  [data-color-brand="sportbild"],
67
65
  :host([data-color-brand="sportbild"]) {
68
- --pagination-element-color-active: var(--accent-color-primary);
66
+ --pagination-element-color-active: var(--bg-color-brand-light-only);
69
67
  --gallery-pagination-element-active-opacity: var(--layer-opacity-100);
68
+ --scroll-bar-thumb-bg-color: var(--bg-color-quintenary);
70
69
  }
@@ -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: PartnerLinks 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,30 +16,22 @@
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
- --partner-links-border-color-idle: var(--color-neutral-85, #CED4DA);
24
- --partner-links-border-color-active: var(--color-neutral-15, #232629);
25
- --partner-links-bg-color-idle: var(--color-neutral-100, #FFFFFF);
26
- --partner-links-bg-color-active: var(--color-neutral-93, #E9ECEF);
27
- --partner-links-container-border-color: var(--color-neutral-85, #CED4DA);
28
-
19
+ --partner-links-bg-color-idle: var(--bg-color-primary);
20
+ --partner-links-bg-color-active: var(--bg-color-tertiary);
29
21
  }
30
22
 
31
23
  /* === COLOR TOKENS (DARK MODE) === */
32
24
 
33
25
  [data-color-brand="sportbild"][data-theme="dark"],
34
26
  :host([data-color-brand="sportbild"][data-theme="dark"]) {
35
- /* ============================================
36
- OTHER
37
- ============================================ */
27
+ --partner-links-bg-color-idle: var(--bg-color-tertiary);
28
+ --partner-links-bg-color-active: var(--bg-color-quintenary);
29
+ }
38
30
 
39
- --partner-links-border-color-idle: var(--color-neutral-85, #CED4DA);
40
- --partner-links-border-color-active: var(--color-neutral-93, #E9ECEF);
41
- --partner-links-bg-color-idle: var(--color-neutral-25, #343C41);
42
- --partner-links-bg-color-active: var(--color-neutral-60, #8C9196);
43
- --partner-links-container-border-color: var(--color-neutral-35, #4B525A);
31
+ /* === OTHER TOKENS === */
44
32
 
33
+ [data-color-brand="sportbild"],
34
+ :host([data-color-brand="sportbild"]) {
35
+ --partner-links-border-color-idle: var(--border-color-default);
36
+ --partner-links-border-color-active: var(--border-color-extra-strong);
45
37
  }
@@ -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: Paywall 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,16 +20,7 @@
20
20
  font-weight: var(--title-font-weight);
21
21
  font-size: var(--size-8-x, 64px);
22
22
  line-height: var(--size-8-x, 64px);
23
- letter-spacing: var(--display-2-letter-spacing);
24
- }
25
-
26
- [data-content-brand="sportbild"] .paywall-card-note,
27
- :host([data-content-brand="sportbild"]) .paywall-card-note {
28
- font-family: var(--title-font-family);
29
- font-weight: var(--title-font-weight);
30
- font-size: var(--size-5-x, 40px);
31
- line-height: var(--size-5-x, 40px);
32
- letter-spacing: var(--display-3-letter-spacing);
23
+ letter-spacing: var(--display-2-letter-space);
33
24
  }
34
25
 
35
26
  /* === BREAKPOINT TOKENS === */
@@ -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: Quote 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: RadioButton 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: Search 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: SectionTitle 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,37 +1,20 @@
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: Selection 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
- --selection-border-color: var(--color-neutral-35, #4B525A);
24
-
25
- }
26
-
27
- /* === COLOR TOKENS (DARK MODE) === */
28
-
29
- [data-color-brand="sportbild"][data-theme="dark"],
30
- :host([data-color-brand="sportbild"][data-theme="dark"]) {
31
- /* ============================================
32
- OTHER
33
- ============================================ */
34
-
35
- --selection-border-color: var(--color-neutral-60, #8C9196);
15
+ /* === OTHER TOKENS === */
36
16
 
17
+ [data-color-brand="sportbild"],
18
+ :host([data-color-brand="sportbild"]) {
19
+ --selection-border-color: var(--border-color-strong);
37
20
  }
@@ -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: Separator 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: Skeletons 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: Slider 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,14 +16,14 @@
16
16
 
17
17
  [data-color-brand="sportbild"][data-theme="light"],
18
18
  :host([data-color-brand="sportbild"][data-theme="light"]) {
19
- --slider-track-bg-color: var(--alpha-white-35, rgba(255, 255, 255, 0.35));
19
+ --slider-track-bg-color: var(--color-neutral-100-a-35, rgba(255, 255, 255, 0.35));
20
20
  }
21
21
 
22
22
  /* === COLOR TOKENS (DARK MODE) === */
23
23
 
24
24
  [data-color-brand="sportbild"][data-theme="dark"],
25
25
  :host([data-color-brand="sportbild"][data-theme="dark"]) {
26
- --slider-track-bg-color: var(--alpha-white-35, rgba(255, 255, 255, 0.35));
26
+ --slider-track-bg-color: var(--color-neutral-100-a-35, rgba(255, 255, 255, 0.35));
27
27
  }
28
28
 
29
29
  /* === BREAKPOINT TOKENS === */
@@ -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: SpecialNavi 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: Spinner 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: Subheader 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,5 +16,5 @@
16
16
 
17
17
  [data-color-brand="sportbild"],
18
18
  :host([data-color-brand="sportbild"]) {
19
- --subheaders-color: var(--text-color-primary);
19
+ --subheaders-text-color: var(--text-color-primary);
20
20
  }
@@ -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: Tab 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,6 @@
20
20
  OTHER
21
21
  ============================================ */
22
22
 
23
- --tab-bg-color-hover: var(--color-neutral-93, #E9ECEF);
24
- --tab-label-color-active: var(--color-neutral-25, #343C41);
25
- --tab-label-color-default: var(--color-neutral-35, #4B525A);
26
23
  --app-bottom-tab-bar-bg-color: var(--color-neutral-100, #FFFFFF);
27
24
 
28
25
  }
@@ -35,10 +32,7 @@
35
32
  OTHER
36
33
  ============================================ */
37
34
 
38
- --tab-bg-color-hover: var(--color-neutral-25, #343C41);
39
- --tab-label-color-active: var(--color-neutral-96, #F2F4F5);
40
- --tab-label-color-default: var(--color-neutral-100, #FFFFFF);
41
- --app-bottom-tab-bar-bg-color: var(--color-spobi-blue-16, #0A2750);
35
+ --app-bottom-tab-bar-bg-color: var(--color-spobi-blue-20, #0C2F61);
42
36
 
43
37
  }
44
38
 
@@ -52,22 +46,6 @@
52
46
  text-transform: uppercase;
53
47
  }
54
48
 
55
- [data-content-brand="sportbild"] .app-bottom-bar-label-default,
56
- :host([data-content-brand="sportbild"]) .app-bottom-bar-label-default {
57
- font-family: var(--body-font-family);
58
- font-weight: var(--font-weight-book, 400);
59
- font-size: 11px;
60
- line-height: 14.4px;
61
- }
62
-
63
- [data-content-brand="sportbild"] .app-bottom-bar-label-active,
64
- :host([data-content-brand="sportbild"]) .app-bottom-bar-label-active {
65
- font-family: var(--body-font-family);
66
- font-weight: var(--font-weight-bold, 700);
67
- font-size: 11px;
68
- line-height: 14.4px;
69
- }
70
-
71
49
  /* === BREAKPOINT TOKENS === */
72
50
 
73
51
  [data-content-brand="sportbild"],