@marioschmidt/design-system-tokens 1.0.23 → 1.0.24

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 (216) hide show
  1. package/dist/android/brands/advertorial/sizeclass-compact/typography_styles.xml +430 -430
  2. package/dist/android/brands/advertorial/sizeclass-regular/typography_styles.xml +431 -431
  3. package/dist/android/brands/bild/sizeclass-compact/typography_styles.xml +436 -436
  4. package/dist/android/brands/bild/sizeclass-regular/typography_styles.xml +434 -434
  5. package/dist/android/brands/sportbild/sizeclass-compact/typography_styles.xml +442 -442
  6. package/dist/android/brands/sportbild/sizeclass-regular/typography_styles.xml +442 -442
  7. package/dist/css/brands/advertorial/density/density-compact.css +1 -1
  8. package/dist/css/brands/advertorial/density/density-default.css +1 -1
  9. package/dist/css/brands/advertorial/density/density-spacious.css +1 -1
  10. package/dist/css/brands/advertorial/overrides/brandtokenmapping.css +494 -494
  11. package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.css +773 -773
  12. package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.css +773 -773
  13. package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.css +773 -773
  14. package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.css +773 -773
  15. package/dist/css/brands/advertorial/semantic/effects/effects-dark.css +23 -23
  16. package/dist/css/brands/advertorial/semantic/effects/effects-light.css +23 -23
  17. package/dist/css/brands/advertorial/semantic/typography/typography-lg.css +626 -626
  18. package/dist/css/brands/advertorial/semantic/typography/typography-md.css +627 -627
  19. package/dist/css/brands/advertorial/semantic/typography/typography-sm.css +624 -624
  20. package/dist/css/brands/advertorial/semantic/typography/typography-xs.css +624 -624
  21. package/dist/css/brands/bild/density/density-compact.css +1 -1
  22. package/dist/css/brands/bild/density/density-default.css +1 -1
  23. package/dist/css/brands/bild/density/density-spacious.css +1 -1
  24. package/dist/css/brands/bild/overrides/brandcolormapping.css +140 -140
  25. package/dist/css/brands/bild/overrides/brandtokenmapping.css +494 -494
  26. package/dist/css/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.css +773 -773
  27. package/dist/css/brands/bild/semantic/breakpoints/breakpoint-md-600px.css +773 -773
  28. package/dist/css/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.css +773 -773
  29. package/dist/css/brands/bild/semantic/breakpoints/breakpoint-xs-320px.css +773 -773
  30. package/dist/css/brands/bild/semantic/color/colormode-dark.css +385 -385
  31. package/dist/css/brands/bild/semantic/color/colormode-light.css +385 -385
  32. package/dist/css/brands/bild/semantic/effects/effects-dark.css +23 -23
  33. package/dist/css/brands/bild/semantic/effects/effects-light.css +23 -23
  34. package/dist/css/brands/bild/semantic/typography/typography-lg.css +637 -637
  35. package/dist/css/brands/bild/semantic/typography/typography-md.css +632 -632
  36. package/dist/css/brands/bild/semantic/typography/typography-sm.css +632 -632
  37. package/dist/css/brands/bild/semantic/typography/typography-xs.css +633 -633
  38. package/dist/css/brands/sportbild/density/density-compact.css +1 -1
  39. package/dist/css/brands/sportbild/density/density-default.css +1 -1
  40. package/dist/css/brands/sportbild/density/density-spacious.css +1 -1
  41. package/dist/css/brands/sportbild/overrides/brandcolormapping.css +140 -140
  42. package/dist/css/brands/sportbild/overrides/brandtokenmapping.css +494 -494
  43. package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.css +773 -773
  44. package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.css +773 -773
  45. package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.css +773 -773
  46. package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.css +773 -773
  47. package/dist/css/brands/sportbild/semantic/color/colormode-dark.css +385 -385
  48. package/dist/css/brands/sportbild/semantic/color/colormode-light.css +385 -385
  49. package/dist/css/brands/sportbild/semantic/effects/effects-dark.css +23 -23
  50. package/dist/css/brands/sportbild/semantic/effects/effects-light.css +23 -23
  51. package/dist/css/brands/sportbild/semantic/typography/typography-lg.css +632 -632
  52. package/dist/css/brands/sportbild/semantic/typography/typography-md.css +631 -631
  53. package/dist/css/brands/sportbild/semantic/typography/typography-sm.css +631 -631
  54. package/dist/css/brands/sportbild/semantic/typography/typography-xs.css +631 -631
  55. package/dist/css/shared/colorprimitive.css +97 -97
  56. package/dist/css/shared/fontprimitive.css +22 -22
  57. package/dist/css/shared/sizeprimitive.css +1 -1
  58. package/dist/css/shared/spaceprimitive.css +1 -1
  59. package/dist/flutter/brands/advertorial/overrides/brandtokenmapping.dart +291 -291
  60. package/dist/flutter/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.dart +635 -635
  61. package/dist/flutter/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.dart +635 -635
  62. package/dist/flutter/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.dart +635 -635
  63. package/dist/flutter/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.dart +635 -635
  64. package/dist/flutter/brands/bild/overrides/brandcolormapping.dart +91 -91
  65. package/dist/flutter/brands/bild/overrides/brandtokenmapping.dart +291 -291
  66. package/dist/flutter/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.dart +635 -635
  67. package/dist/flutter/brands/bild/semantic/breakpoints/breakpoint-md-600px.dart +635 -635
  68. package/dist/flutter/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.dart +635 -635
  69. package/dist/flutter/brands/bild/semantic/breakpoints/breakpoint-xs-320px.dart +635 -635
  70. package/dist/flutter/brands/bild/semantic/color/colormode-dark.dart +389 -389
  71. package/dist/flutter/brands/bild/semantic/color/colormode-light.dart +389 -389
  72. package/dist/flutter/brands/sportbild/overrides/brandcolormapping.dart +91 -91
  73. package/dist/flutter/brands/sportbild/overrides/brandtokenmapping.dart +291 -291
  74. package/dist/flutter/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.dart +635 -635
  75. package/dist/flutter/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.dart +635 -635
  76. package/dist/flutter/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.dart +635 -635
  77. package/dist/flutter/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.dart +635 -635
  78. package/dist/flutter/brands/sportbild/semantic/color/colormode-dark.dart +389 -389
  79. package/dist/flutter/brands/sportbild/semantic/color/colormode-light.dart +389 -389
  80. package/dist/flutter/shared/colorprimitive.dart +82 -82
  81. package/dist/flutter/shared/fontprimitive.dart +21 -21
  82. package/dist/ios/brands/advertorial/overrides/Brandtokenmapping.swift +291 -291
  83. package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointLg1024pxRegular.swift +635 -635
  84. package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointMd600px.swift +635 -635
  85. package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointSm390pxCompact.swift +635 -635
  86. package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointXs320px.swift +635 -635
  87. package/dist/ios/brands/advertorial/sizeclass-compact/Typography.swift +200 -200
  88. package/dist/ios/brands/advertorial/sizeclass-regular/Typography.swift +200 -200
  89. package/dist/ios/brands/bild/overrides/Brandcolormapping.swift +91 -91
  90. package/dist/ios/brands/bild/overrides/Brandtokenmapping.swift +291 -291
  91. package/dist/ios/brands/bild/semantic/breakpoints/BreakpointLg1024pxRegular.swift +635 -635
  92. package/dist/ios/brands/bild/semantic/breakpoints/BreakpointMd600px.swift +635 -635
  93. package/dist/ios/brands/bild/semantic/breakpoints/BreakpointSm390pxCompact.swift +635 -635
  94. package/dist/ios/brands/bild/semantic/breakpoints/BreakpointXs320px.swift +635 -635
  95. package/dist/ios/brands/bild/semantic/color/ColormodeDark.swift +389 -389
  96. package/dist/ios/brands/bild/semantic/color/ColormodeLight.swift +389 -389
  97. package/dist/ios/brands/bild/sizeclass-compact/Typography.swift +200 -200
  98. package/dist/ios/brands/bild/sizeclass-regular/Typography.swift +200 -200
  99. package/dist/ios/brands/sportbild/overrides/Brandcolormapping.swift +91 -91
  100. package/dist/ios/brands/sportbild/overrides/Brandtokenmapping.swift +291 -291
  101. package/dist/ios/brands/sportbild/semantic/breakpoints/BreakpointLg1024pxRegular.swift +635 -635
  102. package/dist/ios/brands/sportbild/semantic/breakpoints/BreakpointMd600px.swift +635 -635
  103. package/dist/ios/brands/sportbild/semantic/breakpoints/BreakpointSm390pxCompact.swift +635 -635
  104. package/dist/ios/brands/sportbild/semantic/breakpoints/BreakpointXs320px.swift +635 -635
  105. package/dist/ios/brands/sportbild/semantic/color/ColormodeDark.swift +389 -389
  106. package/dist/ios/brands/sportbild/semantic/color/ColormodeLight.swift +389 -389
  107. package/dist/ios/brands/sportbild/sizeclass-compact/Typography.swift +200 -200
  108. package/dist/ios/brands/sportbild/sizeclass-regular/Typography.swift +200 -200
  109. package/dist/ios/shared/Colorprimitive.swift +82 -82
  110. package/dist/ios/shared/Fontprimitive.swift +21 -21
  111. package/dist/js/brands/advertorial/density/density-compact.js +1 -1
  112. package/dist/js/brands/advertorial/density/density-default.js +1 -1
  113. package/dist/js/brands/advertorial/density/density-spacious.js +1 -1
  114. package/dist/js/brands/advertorial/overrides/brandtokenmapping.js +292 -292
  115. package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.js +636 -636
  116. package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.js +636 -636
  117. package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.js +636 -636
  118. package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.js +636 -636
  119. package/dist/js/brands/advertorial/semantic/effects/effects-dark.js +13 -13
  120. package/dist/js/brands/advertorial/semantic/effects/effects-light.js +13 -13
  121. package/dist/js/brands/advertorial/semantic/typography/typography-lg.js +210 -210
  122. package/dist/js/brands/advertorial/semantic/typography/typography-md.js +210 -210
  123. package/dist/js/brands/advertorial/semantic/typography/typography-sm.js +210 -210
  124. package/dist/js/brands/advertorial/semantic/typography/typography-xs.js +210 -210
  125. package/dist/js/brands/bild/density/density-compact.js +1 -1
  126. package/dist/js/brands/bild/density/density-default.js +1 -1
  127. package/dist/js/brands/bild/density/density-spacious.js +1 -1
  128. package/dist/js/brands/bild/overrides/brandcolormapping.js +92 -92
  129. package/dist/js/brands/bild/overrides/brandtokenmapping.js +292 -292
  130. package/dist/js/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.js +636 -636
  131. package/dist/js/brands/bild/semantic/breakpoints/breakpoint-md-600px.js +636 -636
  132. package/dist/js/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.js +636 -636
  133. package/dist/js/brands/bild/semantic/breakpoints/breakpoint-xs-320px.js +636 -636
  134. package/dist/js/brands/bild/semantic/color/colormode-dark.js +390 -390
  135. package/dist/js/brands/bild/semantic/color/colormode-light.js +390 -390
  136. package/dist/js/brands/bild/semantic/effects/effects-dark.js +13 -13
  137. package/dist/js/brands/bild/semantic/effects/effects-light.js +13 -13
  138. package/dist/js/brands/bild/semantic/typography/typography-lg.js +210 -210
  139. package/dist/js/brands/bild/semantic/typography/typography-md.js +210 -210
  140. package/dist/js/brands/bild/semantic/typography/typography-sm.js +210 -210
  141. package/dist/js/brands/bild/semantic/typography/typography-xs.js +210 -210
  142. package/dist/js/brands/sportbild/density/density-compact.js +1 -1
  143. package/dist/js/brands/sportbild/density/density-default.js +1 -1
  144. package/dist/js/brands/sportbild/density/density-spacious.js +1 -1
  145. package/dist/js/brands/sportbild/overrides/brandcolormapping.js +92 -92
  146. package/dist/js/brands/sportbild/overrides/brandtokenmapping.js +292 -292
  147. package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.js +636 -636
  148. package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.js +636 -636
  149. package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.js +636 -636
  150. package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.js +636 -636
  151. package/dist/js/brands/sportbild/semantic/color/colormode-dark.js +390 -390
  152. package/dist/js/brands/sportbild/semantic/color/colormode-light.js +390 -390
  153. package/dist/js/brands/sportbild/semantic/effects/effects-dark.js +13 -13
  154. package/dist/js/brands/sportbild/semantic/effects/effects-light.js +13 -13
  155. package/dist/js/brands/sportbild/semantic/typography/typography-lg.js +210 -210
  156. package/dist/js/brands/sportbild/semantic/typography/typography-md.js +210 -210
  157. package/dist/js/brands/sportbild/semantic/typography/typography-sm.js +210 -210
  158. package/dist/js/brands/sportbild/semantic/typography/typography-xs.js +210 -210
  159. package/dist/js/shared/colorprimitive.js +83 -83
  160. package/dist/js/shared/fontprimitive.js +22 -22
  161. package/dist/js/shared/sizeprimitive.js +1 -1
  162. package/dist/js/shared/spaceprimitive.js +1 -1
  163. package/dist/manifest.json +1 -1
  164. package/dist/scss/brands/advertorial/density/density-compact.scss +1 -1
  165. package/dist/scss/brands/advertorial/density/density-default.scss +1 -1
  166. package/dist/scss/brands/advertorial/density/density-spacious.scss +1 -1
  167. package/dist/scss/brands/advertorial/overrides/brandtokenmapping.scss +292 -292
  168. package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.scss +636 -636
  169. package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.scss +636 -636
  170. package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.scss +636 -636
  171. package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.scss +636 -636
  172. package/dist/scss/brands/advertorial/semantic/effects/effects-dark.scss +13 -13
  173. package/dist/scss/brands/advertorial/semantic/effects/effects-light.scss +13 -13
  174. package/dist/scss/brands/advertorial/semantic/typography/typography-lg.scss +210 -210
  175. package/dist/scss/brands/advertorial/semantic/typography/typography-md.scss +210 -210
  176. package/dist/scss/brands/advertorial/semantic/typography/typography-sm.scss +210 -210
  177. package/dist/scss/brands/advertorial/semantic/typography/typography-xs.scss +210 -210
  178. package/dist/scss/brands/bild/density/density-compact.scss +1 -1
  179. package/dist/scss/brands/bild/density/density-default.scss +1 -1
  180. package/dist/scss/brands/bild/density/density-spacious.scss +1 -1
  181. package/dist/scss/brands/bild/overrides/brandcolormapping.scss +92 -92
  182. package/dist/scss/brands/bild/overrides/brandtokenmapping.scss +292 -292
  183. package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.scss +636 -636
  184. package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-md-600px.scss +636 -636
  185. package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.scss +636 -636
  186. package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-xs-320px.scss +636 -636
  187. package/dist/scss/brands/bild/semantic/color/colormode-dark.scss +390 -390
  188. package/dist/scss/brands/bild/semantic/color/colormode-light.scss +390 -390
  189. package/dist/scss/brands/bild/semantic/effects/effects-dark.scss +13 -13
  190. package/dist/scss/brands/bild/semantic/effects/effects-light.scss +13 -13
  191. package/dist/scss/brands/bild/semantic/typography/typography-lg.scss +210 -210
  192. package/dist/scss/brands/bild/semantic/typography/typography-md.scss +210 -210
  193. package/dist/scss/brands/bild/semantic/typography/typography-sm.scss +210 -210
  194. package/dist/scss/brands/bild/semantic/typography/typography-xs.scss +210 -210
  195. package/dist/scss/brands/sportbild/density/density-compact.scss +1 -1
  196. package/dist/scss/brands/sportbild/density/density-default.scss +1 -1
  197. package/dist/scss/brands/sportbild/density/density-spacious.scss +1 -1
  198. package/dist/scss/brands/sportbild/overrides/brandcolormapping.scss +92 -92
  199. package/dist/scss/brands/sportbild/overrides/brandtokenmapping.scss +292 -292
  200. package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.scss +636 -636
  201. package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.scss +636 -636
  202. package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.scss +636 -636
  203. package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.scss +636 -636
  204. package/dist/scss/brands/sportbild/semantic/color/colormode-dark.scss +390 -390
  205. package/dist/scss/brands/sportbild/semantic/color/colormode-light.scss +390 -390
  206. package/dist/scss/brands/sportbild/semantic/effects/effects-dark.scss +13 -13
  207. package/dist/scss/brands/sportbild/semantic/effects/effects-light.scss +13 -13
  208. package/dist/scss/brands/sportbild/semantic/typography/typography-lg.scss +210 -210
  209. package/dist/scss/brands/sportbild/semantic/typography/typography-md.scss +210 -210
  210. package/dist/scss/brands/sportbild/semantic/typography/typography-sm.scss +210 -210
  211. package/dist/scss/brands/sportbild/semantic/typography/typography-xs.scss +210 -210
  212. package/dist/scss/shared/colorprimitive.scss +83 -83
  213. package/dist/scss/shared/fontprimitive.scss +22 -22
  214. package/dist/scss/shared/sizeprimitive.scss +1 -1
  215. package/dist/scss/shared/spaceprimitive.scss +1 -1
  216. package/package.json +1 -1
@@ -1,99 +1,13 @@
1
1
  /**
2
2
  * brandcolormapping.js
3
- * Generiert am: 2025-11-24T21:07:28.858Z
3
+ * Generiert am: 2025-11-24T21:40:50.061Z
4
4
  * Nicht manuell bearbeiten!
5
5
  */
6
6
 
7
- // ============================================
8
- // COMPONENT
9
- // ============================================
10
-
11
- export const chipColorActive = "#DD0000";
12
-
13
- // Component - Avatar
14
- /** 09-2025 css --article-author-name-color // Bild: 015; SpoBi: 045 */
15
- export const avatarLabelColor = "#232629";
16
- /** 09-2025 css --article-author-name-color // Bild: 100; SpoBi: 093 */
17
- export const avatarLabelColorDark = "#FFFFFF";
18
- /** This variable is used for decorating the avatar text's underline color. Bild: 046; SpoBi: 029 */
19
- export const avatarLabelColorHover = "#DD0000";
20
-
21
- // Component - BreakingNews
22
- /** This variable is used on the text for headlines in the horizontally animated breaking news strip. Bild: 100 ; SpoBi: 015 */
23
- export const breakingNewsTextContentColor = "#FFFFFF";
24
- /** This variable is used on the breaking news strip that has horizontally animated headlines. Bild: 015 ; SpoBi: 081 */
25
- export const breakingNewsSurfaceColor = "#232629";
26
- /** This variable is used for the background color of the "Breaking News" title. Bild: 067 ; SpoBi: 016 */
27
- export const breakingNewsTitleSurfaceColor = "#FD8227";
28
- /** This variable is used for the color of the "breaking" word in the "breaking news" horizontally animated headlines strip. Bild: 010 ; SpoBi: 081 */
29
- export const breakingNewsTopTitleTextColor = "#1C1C1C";
30
- /** This variable is for the background color of the horizontally animated strip with headlines for breaking news on dark mode. Bild: 093 ; SpoBi: 081 */
31
- export const breakingNewsSurfaceColorDark = "#E9ECEF";
32
- /** This variable is used on the text for headlines in the horizontally animated breaking news strip on dark mode. Bild&SpoBi: 015 */
33
- export const breakingNewsTextContentColorDark = "#232629";
34
- /** This variable is used for the color of the "News" word in the breaking news horizontal animated headlines strip. Bild: 010 ; SpoBi: 100 */
35
- export const breakingNewsBottomTitleTextColor = "#1C1C1C";
36
-
37
- // Component - Button - PrimaryBrand
38
- /** Bild: 046 ; SpoBi: 029 */
39
- export const primaryBrandButtonPrimaryBgColorIdle = "#DD0000";
40
- /** This variable controls the primary button idle color for two brands in dark mode. Bild: 046 ; SpoBi: 038 */
41
- export const primaryBrandButtonPrimaryBgColorIdleDark = "#DD0000";
42
- /** Bild: 035 ; SpoBi: 016 */
43
- export const primaryBrandButtonPrimaryBgColorHover = "#AF0002";
44
- /** This variable stores colors for the hover state of primary buttons for two brands in dark mode. Bild: 035 ; SpoBi: 029 */
45
- export const primaryBrandButtonPrimaryBgColorHoverDark = "#AF0002";
46
-
47
- // Component - Button - PrimaryNeutral
48
- /** Bild & SpoBi: Tone 015 */
49
- export const primaryNeutralButtonPrimaryBgColorIdle = "#232629";
50
- /** Bild & SpoBi: Tone 035 */
51
- export const primaryNeutralButtonPrimaryBgColorHover = "#4B525A";
52
- /** Bild & SpoBi: Tone 100 */
53
- export const primaryNeutralButtonPrimaryBgColorIdleDark = "#FFFFFF";
54
- /** Bild: 093 ; SpoBi: 081 */
55
- export const primaryNeutralButtonPrimaryBgColorHoverDark = "#E9ECEF";
56
-
57
- // Component - Menu
58
- /** This variable is used for making possible the default color difference between the Bild and SportBild link lanes inside the menu component. */
59
- export const menuLinkLaneSurfaceColor = "#FFFFFF";
60
- /** This variable is used for making possible the default color difference between the Bild and SportBild link lane labels inside the menu component. */
61
- export const menuLinkLaneLabelColor = "#4B525A";
62
- export const menuLinkLaneLabelColorDark = "#8C9196";
63
- /** This variable is used for making possible the default color difference between the Bild and SportBild link lanes inside the menu component on Dark mode. */
64
- export const menuLinkLaneSurfaceColorDark = "#232629";
65
- export const menuLinkColorBorderActive = "#DD0000";
66
- export const menuLinkColorBorderActiveDark = "#FFFFFF";
67
- /** This variable is used for making possible the active color difference between the Bild and SportBild link lane labels inside the menu component. */
68
- export const menuLinkLaneLabelColorActive = "#232629";
69
- export const appTopBarSurfaceColor = "#FFFFFF";
70
- export const appTopBarBgColorDark = "#343C41";
71
- export const appBottomTabBarBgColor = "#FFFFFF";
72
- export const appBottomTabBarBgDark = "#343C41";
73
- export const appTopBarIconColor = "#4B525A";
74
- export const appTopBarIconColorDark = "#8C9196";
75
- export const appTopBarTextColor = "#232629";
76
- export const appTopBarTextColorDark = "#E9ECEF";
77
- export const appTobBarTabNavBottomBorder = "#E9ECEF";
78
- export const appTobBarTabNavBottomBorderDark = "#4B525A";
79
- export const appTobBarTabNavBottomBorderActive = "#DD0000";
80
- export const appTobBarTabNavBottomBorderActiveDark = "#FFFFFF";
81
-
82
- // Component - Teaser
83
- export const teaserTitleBackgroundGradientStart = "rgba(0, 0, 0, 0.699999988079071)";
84
- export const teaserTitleBackgroundGradientStop = "rgba(0, 0, 0, 0)";
85
-
86
-
87
7
  // ============================================
88
8
  // GLOBAL
89
9
  // ============================================
90
10
 
91
- // Global - Attention
92
- /** Bild: Tone 046 ; SpoBi: 016 This variable is used on small UI elements such as the background color for kickers. */
93
- export const accentColorPrimary = "#DD0000";
94
- /** Bild: 100 ; SpoBi: 098 */
95
- export const accentColorPrimaryDark = "#FFFFFF";
96
-
97
11
  // Global - Core
98
12
  /** Bild: 046; SpoBi: 016 current css calls this variable main tenant color */
99
13
  export const coreColorPrimary = "#DD0000";
@@ -106,11 +20,11 @@ export const coreColorTertiary = "#232629";
106
20
  /** Bild&SpoBi: 100 */
107
21
  export const coreColorTertiaryDark = "#FFFFFF";
108
22
 
109
- // Global - State
110
- /** Bild: 046 ; SpoBi: 029 */
111
- export const colorPrimaryActive = "#DD0000";
112
- /** Bild: 046 ; SpoBi: 098 */
113
- export const colorPrimaryActiveDark = "#DD0000";
23
+ // Global - Attention
24
+ /** Bild: Tone 046 ; SpoBi: 016 This variable is used on small UI elements such as the background color for kickers. */
25
+ export const accentColorPrimary = "#DD0000";
26
+ /** Bild: 100 ; SpoBi: 098 */
27
+ export const accentColorPrimaryDark = "#FFFFFF";
114
28
 
115
29
  // Global - Surface
116
30
  /** Bild: 100 ; SpoBi: 100 */
@@ -130,6 +44,12 @@ export const surfaceColorQuartenary = "#CED4DA";
130
44
  /** Bild: 035 ; SpoBi: 035 */
131
45
  export const surfaceColorQuartenaryDark = "#4B525A";
132
46
 
47
+ // Global - State
48
+ /** Bild: 046 ; SpoBi: 029 */
49
+ export const colorPrimaryActive = "#DD0000";
50
+ /** Bild: 046 ; SpoBi: 098 */
51
+ export const colorPrimaryActiveDark = "#DD0000";
52
+
133
53
  // Global - Text
134
54
  /** Bild & SpoBi: Tone 015 */
135
55
  export const textColorPrimary = "#232629";
@@ -154,3 +74,83 @@ export const kickerBgColorOnSurface = "#DD0000";
154
74
  /** Use this variable for the dark mode color of the background immediately around the kicker text element. Bild: 060 ; SpoBi: 060 */
155
75
  export const kickerBgColorOnSurfaceDark = "#8C9196";
156
76
 
77
+
78
+ // ============================================
79
+ // COMPONENT
80
+ // ============================================
81
+
82
+ // Component - Button - PrimaryNeutral
83
+ /** Bild & SpoBi: Tone 015 */
84
+ export const primaryNeutralButtonPrimaryBgColorIdle = "#232629";
85
+ /** Bild & SpoBi: Tone 035 */
86
+ export const primaryNeutralButtonPrimaryBgColorHover = "#4B525A";
87
+ /** Bild & SpoBi: Tone 100 */
88
+ export const primaryNeutralButtonPrimaryBgColorIdleDark = "#FFFFFF";
89
+ /** Bild: 093 ; SpoBi: 081 */
90
+ export const primaryNeutralButtonPrimaryBgColorHoverDark = "#E9ECEF";
91
+
92
+ // Component - Button - PrimaryBrand
93
+ /** Bild: 046 ; SpoBi: 029 */
94
+ export const primaryBrandButtonPrimaryBgColorIdle = "#DD0000";
95
+ /** This variable controls the primary button idle color for two brands in dark mode. Bild: 046 ; SpoBi: 038 */
96
+ export const primaryBrandButtonPrimaryBgColorIdleDark = "#DD0000";
97
+ /** Bild: 035 ; SpoBi: 016 */
98
+ export const primaryBrandButtonPrimaryBgColorHover = "#AF0002";
99
+ /** This variable stores colors for the hover state of primary buttons for two brands in dark mode. Bild: 035 ; SpoBi: 029 */
100
+ export const primaryBrandButtonPrimaryBgColorHoverDark = "#AF0002";
101
+
102
+ // Component - BreakingNews
103
+ /** This variable is used on the text for headlines in the horizontally animated breaking news strip. Bild: 100 ; SpoBi: 015 */
104
+ export const breakingNewsTextContentColor = "#FFFFFF";
105
+ /** This variable is used on the breaking news strip that has horizontally animated headlines. Bild: 015 ; SpoBi: 081 */
106
+ export const breakingNewsSurfaceColor = "#232629";
107
+ /** This variable is used for the background color of the "Breaking News" title. Bild: 067 ; SpoBi: 016 */
108
+ export const breakingNewsTitleSurfaceColor = "#FD8227";
109
+ /** This variable is used for the color of the "breaking" word in the "breaking news" horizontally animated headlines strip. Bild: 010 ; SpoBi: 081 */
110
+ export const breakingNewsTopTitleTextColor = "#1C1C1C";
111
+ /** This variable is for the background color of the horizontally animated strip with headlines for breaking news on dark mode. Bild: 093 ; SpoBi: 081 */
112
+ export const breakingNewsSurfaceColorDark = "#E9ECEF";
113
+ /** This variable is used on the text for headlines in the horizontally animated breaking news strip on dark mode. Bild&SpoBi: 015 */
114
+ export const breakingNewsTextContentColorDark = "#232629";
115
+ /** This variable is used for the color of the "News" word in the breaking news horizontal animated headlines strip. Bild: 010 ; SpoBi: 100 */
116
+ export const breakingNewsBottomTitleTextColor = "#1C1C1C";
117
+
118
+ // Component - Teaser
119
+ export const teaserTitleBackgroundGradientStart = "rgba(0, 0, 0, 0.699999988079071)";
120
+ export const teaserTitleBackgroundGradientStop = "rgba(0, 0, 0, 0)";
121
+
122
+ // Component - Menu
123
+ /** This variable is used for making possible the default color difference between the Bild and SportBild link lanes inside the menu component. */
124
+ export const menuLinkLaneSurfaceColor = "#FFFFFF";
125
+ /** This variable is used for making possible the default color difference between the Bild and SportBild link lane labels inside the menu component. */
126
+ export const menuLinkLaneLabelColor = "#4B525A";
127
+ export const menuLinkLaneLabelColorDark = "#8C9196";
128
+ /** This variable is used for making possible the default color difference between the Bild and SportBild link lanes inside the menu component on Dark mode. */
129
+ export const menuLinkLaneSurfaceColorDark = "#232629";
130
+ export const menuLinkColorBorderActive = "#DD0000";
131
+ export const menuLinkColorBorderActiveDark = "#FFFFFF";
132
+ /** This variable is used for making possible the active color difference between the Bild and SportBild link lane labels inside the menu component. */
133
+ export const menuLinkLaneLabelColorActive = "#232629";
134
+ export const appTopBarSurfaceColor = "#FFFFFF";
135
+ export const appTopBarBgColorDark = "#343C41";
136
+ export const appBottomTabBarBgColor = "#FFFFFF";
137
+ export const appBottomTabBarBgDark = "#343C41";
138
+ export const appTopBarIconColor = "#4B525A";
139
+ export const appTopBarIconColorDark = "#8C9196";
140
+ export const appTopBarTextColor = "#232629";
141
+ export const appTopBarTextColorDark = "#E9ECEF";
142
+ export const appTobBarTabNavBottomBorder = "#E9ECEF";
143
+ export const appTobBarTabNavBottomBorderDark = "#4B525A";
144
+ export const appTobBarTabNavBottomBorderActive = "#DD0000";
145
+ export const appTobBarTabNavBottomBorderActiveDark = "#FFFFFF";
146
+
147
+ // Component - Avatar
148
+ /** 09-2025 css --article-author-name-color // Bild: 015; SpoBi: 045 */
149
+ export const avatarLabelColor = "#232629";
150
+ /** 09-2025 css --article-author-name-color // Bild: 100; SpoBi: 093 */
151
+ export const avatarLabelColorDark = "#FFFFFF";
152
+ /** This variable is used for decorating the avatar text's underline color. Bild: 046; SpoBi: 029 */
153
+ export const avatarLabelColorHover = "#DD0000";
154
+
155
+ export const chipColorActive = "#DD0000";
156
+