@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.scss
3
- // Generiert am: 2025-11-24T21:07:28.857Z
3
+ // Generiert am: 2025-11-24T21:40:50.060Z
4
4
  // Nicht manuell bearbeiten!
5
5
  //
6
6
 
7
- // ============================================
8
- // COMPONENT
9
- // ============================================
10
-
11
- $chip-color-active: #DD0000;
12
-
13
- // Component - Avatar
14
- // 09-2025 css --article-author-name-color // Bild: 015; SpoBi: 045
15
- $avatar-label-color: #232629;
16
- // 09-2025 css --article-author-name-color // Bild: 100; SpoBi: 093
17
- $avatar-label-color-dark: #FFFFFF;
18
- // This variable is used for decorating the avatar text's underline color. Bild: 046; SpoBi: 029
19
- $avatar-label-color-hover: #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
- $breaking-news-text-content-color: #FFFFFF;
24
- // This variable is used on the breaking news strip that has horizontally animated headlines. Bild: 015 ; SpoBi: 081
25
- $breaking-news-surface-color: #232629;
26
- // This variable is used for the background color of the "Breaking News" title. Bild: 067 ; SpoBi: 016
27
- $breaking-news-title-surface-color: #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
- $breaking-news-top-title-text-color: #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
- $breaking-news-surface-color-dark: #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
- $breaking-news-text-content-color-dark: #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
- $breaking-news-bottom-title-text-color: #1C1C1C;
36
-
37
- // Component - Button - PrimaryBrand
38
- // Bild: 046 ; SpoBi: 029
39
- $primary-brand-button-primary-bg-color-idle: #DD0000;
40
- // This variable controls the primary button idle color for two brands in dark mode. Bild: 046 ; SpoBi: 038
41
- $primary-brand-button-primary-bg-color-idle-dark: #DD0000;
42
- // Bild: 035 ; SpoBi: 016
43
- $primary-brand-button-primary-bg-color-hover: #AF0002;
44
- // This variable stores colors for the hover state of primary buttons for two brands in dark mode. Bild: 035 ; SpoBi: 029
45
- $primary-brand-button-primary-bg-color-hover-dark: #AF0002;
46
-
47
- // Component - Button - PrimaryNeutral
48
- // Bild & SpoBi: Tone 015
49
- $primary-neutral-button-primary-bg-color-idle: #232629;
50
- // Bild & SpoBi: Tone 035
51
- $primary-neutral-button-primary-bg-color-hover: #4B525A;
52
- // Bild & SpoBi: Tone 100
53
- $primary-neutral-button-primary-bg-color-idle-dark: #FFFFFF;
54
- // Bild: 093 ; SpoBi: 081
55
- $primary-neutral-button-primary-bg-color-hover-dark: #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
- $menu-link-lane-surface-color: #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
- $menu-link-lane-label-color: #4B525A;
62
- $menu-link-lane-label-color-dark: #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
- $menu-link-lane-surface-color-dark: #232629;
65
- $menu-link-color-border-active: #DD0000;
66
- $menu-link-color-border-active-dark: #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
- $menu-link-lane-label-color-active: #232629;
69
- $app-top-bar-surface-color: #FFFFFF;
70
- $app-top-bar-bg-color-dark: #343C41;
71
- $app-bottom-tab-bar-bg-color: #FFFFFF;
72
- $app-bottom-tab-bar-bg-dark: #343C41;
73
- $app-top-bar-icon-color: #4B525A;
74
- $app-top-bar-icon-color-dark: #8C9196;
75
- $app-top-bar-text-color: #232629;
76
- $app-top-bar-text-color-dark: #E9ECEF;
77
- $app-tob-bar-tab-nav-bottom-border: #E9ECEF;
78
- $app-tob-bar-tab-nav-bottom-border-dark: #4B525A;
79
- $app-tob-bar-tab-nav-bottom-border-active: #DD0000;
80
- $app-tob-bar-tab-nav-bottom-border-active-dark: #FFFFFF;
81
-
82
- // Component - Teaser
83
- $teaser-title-background-gradient-start: rgba(0, 0, 0, 0.699999988079071);
84
- $teaser-title-background-gradient-stop: 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
- $accent-color-primary: #DD0000;
94
- // Bild: 100 ; SpoBi: 098
95
- $accent-color-primary-dark: #FFFFFF;
96
-
97
11
  // Global - Core
98
12
  // Bild: 046; SpoBi: 016 current css calls this variable main tenant color
99
13
  $core-color-primary: #DD0000;
@@ -106,11 +20,11 @@ $core-color-tertiary: #232629;
106
20
  // Bild&SpoBi: 100
107
21
  $core-color-tertiary-dark: #FFFFFF;
108
22
 
109
- // Global - State
110
- // Bild: 046 ; SpoBi: 029
111
- $color-primary-active: #DD0000;
112
- // Bild: 046 ; SpoBi: 098
113
- $color-primary-active-dark: #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
+ $accent-color-primary: #DD0000;
26
+ // Bild: 100 ; SpoBi: 098
27
+ $accent-color-primary-dark: #FFFFFF;
114
28
 
115
29
  // Global - Surface
116
30
  // Bild: 100 ; SpoBi: 100
@@ -130,6 +44,12 @@ $surface-color-quartenary: #CED4DA;
130
44
  // Bild: 035 ; SpoBi: 035
131
45
  $surface-color-quartenary-dark: #4B525A;
132
46
 
47
+ // Global - State
48
+ // Bild: 046 ; SpoBi: 029
49
+ $color-primary-active: #DD0000;
50
+ // Bild: 046 ; SpoBi: 098
51
+ $color-primary-active-dark: #DD0000;
52
+
133
53
  // Global - Text
134
54
  // Bild & SpoBi: Tone 015
135
55
  $text-color-primary: #232629;
@@ -154,3 +74,83 @@ $kicker-bg-color-on-surface: #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
  $kicker-bg-color-on-surface-dark: #8C9196;
156
76
 
77
+
78
+ // ============================================
79
+ // COMPONENT
80
+ // ============================================
81
+
82
+ // Component - Button - PrimaryNeutral
83
+ // Bild & SpoBi: Tone 015
84
+ $primary-neutral-button-primary-bg-color-idle: #232629;
85
+ // Bild & SpoBi: Tone 035
86
+ $primary-neutral-button-primary-bg-color-hover: #4B525A;
87
+ // Bild & SpoBi: Tone 100
88
+ $primary-neutral-button-primary-bg-color-idle-dark: #FFFFFF;
89
+ // Bild: 093 ; SpoBi: 081
90
+ $primary-neutral-button-primary-bg-color-hover-dark: #E9ECEF;
91
+
92
+ // Component - Button - PrimaryBrand
93
+ // Bild: 046 ; SpoBi: 029
94
+ $primary-brand-button-primary-bg-color-idle: #DD0000;
95
+ // This variable controls the primary button idle color for two brands in dark mode. Bild: 046 ; SpoBi: 038
96
+ $primary-brand-button-primary-bg-color-idle-dark: #DD0000;
97
+ // Bild: 035 ; SpoBi: 016
98
+ $primary-brand-button-primary-bg-color-hover: #AF0002;
99
+ // This variable stores colors for the hover state of primary buttons for two brands in dark mode. Bild: 035 ; SpoBi: 029
100
+ $primary-brand-button-primary-bg-color-hover-dark: #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
+ $breaking-news-text-content-color: #FFFFFF;
105
+ // This variable is used on the breaking news strip that has horizontally animated headlines. Bild: 015 ; SpoBi: 081
106
+ $breaking-news-surface-color: #232629;
107
+ // This variable is used for the background color of the "Breaking News" title. Bild: 067 ; SpoBi: 016
108
+ $breaking-news-title-surface-color: #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
+ $breaking-news-top-title-text-color: #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
+ $breaking-news-surface-color-dark: #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
+ $breaking-news-text-content-color-dark: #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
+ $breaking-news-bottom-title-text-color: #1C1C1C;
117
+
118
+ // Component - Teaser
119
+ $teaser-title-background-gradient-start: rgba(0, 0, 0, 0.699999988079071);
120
+ $teaser-title-background-gradient-stop: 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
+ $menu-link-lane-surface-color: #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
+ $menu-link-lane-label-color: #4B525A;
127
+ $menu-link-lane-label-color-dark: #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
+ $menu-link-lane-surface-color-dark: #232629;
130
+ $menu-link-color-border-active: #DD0000;
131
+ $menu-link-color-border-active-dark: #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
+ $menu-link-lane-label-color-active: #232629;
134
+ $app-top-bar-surface-color: #FFFFFF;
135
+ $app-top-bar-bg-color-dark: #343C41;
136
+ $app-bottom-tab-bar-bg-color: #FFFFFF;
137
+ $app-bottom-tab-bar-bg-dark: #343C41;
138
+ $app-top-bar-icon-color: #4B525A;
139
+ $app-top-bar-icon-color-dark: #8C9196;
140
+ $app-top-bar-text-color: #232629;
141
+ $app-top-bar-text-color-dark: #E9ECEF;
142
+ $app-tob-bar-tab-nav-bottom-border: #E9ECEF;
143
+ $app-tob-bar-tab-nav-bottom-border-dark: #4B525A;
144
+ $app-tob-bar-tab-nav-bottom-border-active: #DD0000;
145
+ $app-tob-bar-tab-nav-bottom-border-active-dark: #FFFFFF;
146
+
147
+ // Component - Avatar
148
+ // 09-2025 css --article-author-name-color // Bild: 015; SpoBi: 045
149
+ $avatar-label-color: #232629;
150
+ // 09-2025 css --article-author-name-color // Bild: 100; SpoBi: 093
151
+ $avatar-label-color-dark: #FFFFFF;
152
+ // This variable is used for decorating the avatar text's underline color. Bild: 046; SpoBi: 029
153
+ $avatar-label-color-hover: #DD0000;
154
+
155
+ $chip-color-active: #DD0000;
156
+