@marioschmidt/design-system-tokens 1.0.19 → 1.0.21

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 (294) hide show
  1. package/dist/android/res/values/brands/advertorial/density/density-compact.xml +8 -8
  2. package/dist/android/res/values/brands/advertorial/density/density-default.xml +8 -8
  3. package/dist/android/res/values/brands/advertorial/density/density-spacious.xml +8 -8
  4. package/dist/android/res/values/brands/advertorial/overrides/brandtokenmapping.xml +271 -271
  5. package/dist/android/res/values/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.xml +460 -460
  6. package/dist/android/res/values/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.xml +460 -460
  7. package/dist/android/res/values/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.xml +460 -460
  8. package/dist/android/res/values/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.xml +460 -460
  9. package/dist/android/res/values/brands/bild/density/density-compact.xml +8 -8
  10. package/dist/android/res/values/brands/bild/density/density-default.xml +8 -8
  11. package/dist/android/res/values/brands/bild/density/density-spacious.xml +8 -8
  12. package/dist/android/res/values/brands/bild/overrides/brandcolormapping.xml +68 -68
  13. package/dist/android/res/values/brands/bild/overrides/brandtokenmapping.xml +271 -271
  14. package/dist/android/res/values/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.xml +460 -460
  15. package/dist/android/res/values/brands/bild/semantic/breakpoints/breakpoint-md-600px.xml +460 -460
  16. package/dist/android/res/values/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.xml +460 -460
  17. package/dist/android/res/values/brands/bild/semantic/breakpoints/breakpoint-xs-320px.xml +460 -460
  18. package/dist/android/res/values/brands/bild/semantic/color/colormode-dark.xml +213 -213
  19. package/dist/android/res/values/brands/bild/semantic/color/colormode-light.xml +213 -213
  20. package/dist/android/res/values/brands/sportbild/density/density-compact.xml +8 -8
  21. package/dist/android/res/values/brands/sportbild/density/density-default.xml +8 -8
  22. package/dist/android/res/values/brands/sportbild/density/density-spacious.xml +8 -8
  23. package/dist/android/res/values/brands/sportbild/overrides/brandcolormapping.xml +68 -68
  24. package/dist/android/res/values/brands/sportbild/overrides/brandtokenmapping.xml +271 -271
  25. package/dist/android/res/values/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.xml +460 -460
  26. package/dist/android/res/values/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.xml +460 -460
  27. package/dist/android/res/values/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.xml +460 -460
  28. package/dist/android/res/values/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.xml +460 -460
  29. package/dist/android/res/values/brands/sportbild/semantic/color/colormode-dark.xml +213 -213
  30. package/dist/android/res/values/brands/sportbild/semantic/color/colormode-light.xml +213 -213
  31. package/dist/android/res/values/shared/colorprimitive.xml +76 -94
  32. package/dist/android/res/values/shared/fontprimitive.xml +43 -43
  33. package/dist/android/res/values/shared/sizeprimitive.xml +49 -49
  34. package/dist/android/res/values/shared/spaceprimitive.xml +25 -25
  35. package/dist/css/brands/advertorial/density/density-compact.css +34 -9
  36. package/dist/css/brands/advertorial/density/density-default.css +34 -9
  37. package/dist/css/brands/advertorial/density/density-spacious.css +34 -9
  38. package/dist/css/brands/advertorial/overrides/brandtokenmapping.css +765 -271
  39. package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.css +1325 -470
  40. package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.css +1325 -470
  41. package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.css +1325 -470
  42. package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.css +1325 -470
  43. package/dist/css/brands/advertorial/semantic/effects/effects-dark.css +1 -1
  44. package/dist/css/brands/advertorial/semantic/effects/effects-light.css +1 -1
  45. package/dist/css/brands/advertorial/semantic/typography/typography-lg.css +1 -1
  46. package/dist/css/brands/advertorial/semantic/typography/typography-md.css +1 -1
  47. package/dist/css/brands/advertorial/semantic/typography/typography-sm.css +1 -1
  48. package/dist/css/brands/advertorial/semantic/typography/typography-xs.css +1 -1
  49. package/dist/css/brands/bild/density/density-compact.css +34 -9
  50. package/dist/css/brands/bild/density/density-default.css +34 -9
  51. package/dist/css/brands/bild/density/density-spacious.css +34 -9
  52. package/dist/css/brands/bild/overrides/brandcolormapping.css +253 -69
  53. package/dist/css/brands/bild/overrides/brandtokenmapping.css +765 -271
  54. package/dist/css/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.css +1325 -470
  55. package/dist/css/brands/bild/semantic/breakpoints/breakpoint-md-600px.css +1325 -470
  56. package/dist/css/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.css +1325 -470
  57. package/dist/css/brands/bild/semantic/breakpoints/breakpoint-xs-320px.css +1325 -470
  58. package/dist/css/brands/bild/semantic/color/colormode-dark.css +560 -308
  59. package/dist/css/brands/bild/semantic/color/colormode-light.css +560 -308
  60. package/dist/css/brands/bild/semantic/effects/effects-dark.css +1 -1
  61. package/dist/css/brands/bild/semantic/effects/effects-light.css +1 -1
  62. package/dist/css/brands/bild/semantic/typography/typography-lg.css +1 -1
  63. package/dist/css/brands/bild/semantic/typography/typography-md.css +1 -1
  64. package/dist/css/brands/bild/semantic/typography/typography-sm.css +1 -1
  65. package/dist/css/brands/bild/semantic/typography/typography-xs.css +1 -1
  66. package/dist/css/brands/sportbild/density/density-compact.css +34 -9
  67. package/dist/css/brands/sportbild/density/density-default.css +34 -9
  68. package/dist/css/brands/sportbild/density/density-spacious.css +34 -9
  69. package/dist/css/brands/sportbild/overrides/brandcolormapping.css +253 -69
  70. package/dist/css/brands/sportbild/overrides/brandtokenmapping.css +765 -271
  71. package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.css +1325 -470
  72. package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.css +1325 -470
  73. package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.css +1325 -470
  74. package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.css +1325 -470
  75. package/dist/css/brands/sportbild/semantic/color/colormode-dark.css +560 -308
  76. package/dist/css/brands/sportbild/semantic/color/colormode-light.css +560 -308
  77. package/dist/css/brands/sportbild/semantic/effects/effects-dark.css +1 -1
  78. package/dist/css/brands/sportbild/semantic/effects/effects-light.css +1 -1
  79. package/dist/css/brands/sportbild/semantic/typography/typography-lg.css +1 -1
  80. package/dist/css/brands/sportbild/semantic/typography/typography-md.css +1 -1
  81. package/dist/css/brands/sportbild/semantic/typography/typography-sm.css +1 -1
  82. package/dist/css/brands/sportbild/semantic/typography/typography-xs.css +1 -1
  83. package/dist/css/shared/colorprimitive.css +189 -95
  84. package/dist/css/shared/fontprimitive.css +91 -25
  85. package/dist/css/shared/sizeprimitive.css +8 -1
  86. package/dist/css/shared/spaceprimitive.css +8 -1
  87. package/dist/flutter/brands/advertorial/density/density-compact.dart +22 -9
  88. package/dist/flutter/brands/advertorial/density/density-default.dart +22 -9
  89. package/dist/flutter/brands/advertorial/density/density-spacious.dart +22 -9
  90. package/dist/flutter/brands/advertorial/overrides/brandtokenmapping.dart +516 -272
  91. package/dist/flutter/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.dart +898 -485
  92. package/dist/flutter/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.dart +898 -485
  93. package/dist/flutter/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.dart +898 -485
  94. package/dist/flutter/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.dart +898 -485
  95. package/dist/flutter/brands/bild/density/density-compact.dart +22 -9
  96. package/dist/flutter/brands/bild/density/density-default.dart +22 -9
  97. package/dist/flutter/brands/bild/density/density-spacious.dart +22 -9
  98. package/dist/flutter/brands/bild/overrides/brandcolormapping.dart +151 -69
  99. package/dist/flutter/brands/bild/overrides/brandtokenmapping.dart +516 -272
  100. package/dist/flutter/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.dart +898 -485
  101. package/dist/flutter/brands/bild/semantic/breakpoints/breakpoint-md-600px.dart +898 -485
  102. package/dist/flutter/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.dart +898 -485
  103. package/dist/flutter/brands/bild/semantic/breakpoints/breakpoint-xs-320px.dart +898 -485
  104. package/dist/flutter/brands/bild/semantic/color/colormode-dark.dart +466 -422
  105. package/dist/flutter/brands/bild/semantic/color/colormode-light.dart +466 -422
  106. package/dist/flutter/brands/sportbild/density/density-compact.dart +22 -9
  107. package/dist/flutter/brands/sportbild/density/density-default.dart +22 -9
  108. package/dist/flutter/brands/sportbild/density/density-spacious.dart +22 -9
  109. package/dist/flutter/brands/sportbild/overrides/brandcolormapping.dart +151 -69
  110. package/dist/flutter/brands/sportbild/overrides/brandtokenmapping.dart +516 -272
  111. package/dist/flutter/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.dart +898 -485
  112. package/dist/flutter/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.dart +898 -485
  113. package/dist/flutter/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.dart +898 -485
  114. package/dist/flutter/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.dart +898 -485
  115. package/dist/flutter/brands/sportbild/semantic/color/colormode-dark.dart +466 -422
  116. package/dist/flutter/brands/sportbild/semantic/color/colormode-light.dart +466 -422
  117. package/dist/flutter/shared/colorprimitive.dart +155 -95
  118. package/dist/flutter/shared/fontprimitive.dart +80 -40
  119. package/dist/flutter/shared/sizeprimitive.dart +55 -50
  120. package/dist/flutter/shared/spaceprimitive.dart +31 -26
  121. package/dist/ios/brands/advertorial/density/DensityCompact.swift +22 -9
  122. package/dist/ios/brands/advertorial/density/DensityDefault.swift +22 -9
  123. package/dist/ios/brands/advertorial/density/DensitySpacious.swift +22 -9
  124. package/dist/ios/brands/advertorial/overrides/Brandtokenmapping.swift +516 -272
  125. package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointLg1024pxRegular.swift +898 -485
  126. package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointMd600px.swift +898 -485
  127. package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointSm390pxCompact.swift +898 -485
  128. package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointXs320px.swift +898 -485
  129. package/dist/ios/brands/bild/density/DensityCompact.swift +22 -9
  130. package/dist/ios/brands/bild/density/DensityDefault.swift +22 -9
  131. package/dist/ios/brands/bild/density/DensitySpacious.swift +22 -9
  132. package/dist/ios/brands/bild/overrides/Brandcolormapping.swift +151 -69
  133. package/dist/ios/brands/bild/overrides/Brandtokenmapping.swift +516 -272
  134. package/dist/ios/brands/bild/semantic/breakpoints/BreakpointLg1024pxRegular.swift +898 -485
  135. package/dist/ios/brands/bild/semantic/breakpoints/BreakpointMd600px.swift +898 -485
  136. package/dist/ios/brands/bild/semantic/breakpoints/BreakpointSm390pxCompact.swift +898 -485
  137. package/dist/ios/brands/bild/semantic/breakpoints/BreakpointXs320px.swift +898 -485
  138. package/dist/ios/brands/bild/semantic/color/ColormodeDark.swift +466 -422
  139. package/dist/ios/brands/bild/semantic/color/ColormodeLight.swift +466 -422
  140. package/dist/ios/brands/sportbild/density/DensityCompact.swift +22 -9
  141. package/dist/ios/brands/sportbild/density/DensityDefault.swift +22 -9
  142. package/dist/ios/brands/sportbild/density/DensitySpacious.swift +22 -9
  143. package/dist/ios/brands/sportbild/overrides/Brandcolormapping.swift +151 -69
  144. package/dist/ios/brands/sportbild/overrides/Brandtokenmapping.swift +516 -272
  145. package/dist/ios/brands/sportbild/semantic/breakpoints/BreakpointLg1024pxRegular.swift +898 -485
  146. package/dist/ios/brands/sportbild/semantic/breakpoints/BreakpointMd600px.swift +898 -485
  147. package/dist/ios/brands/sportbild/semantic/breakpoints/BreakpointSm390pxCompact.swift +898 -485
  148. package/dist/ios/brands/sportbild/semantic/breakpoints/BreakpointXs320px.swift +898 -485
  149. package/dist/ios/brands/sportbild/semantic/color/ColormodeDark.swift +466 -422
  150. package/dist/ios/brands/sportbild/semantic/color/ColormodeLight.swift +466 -422
  151. package/dist/ios/shared/Colorprimitive.swift +155 -95
  152. package/dist/ios/shared/Fontprimitive.swift +84 -44
  153. package/dist/ios/shared/Sizeprimitive.swift +55 -50
  154. package/dist/ios/shared/Spaceprimitive.swift +31 -26
  155. package/dist/js/brands/advertorial/density/density-compact.js +24 -9
  156. package/dist/js/brands/advertorial/density/density-default.js +24 -9
  157. package/dist/js/brands/advertorial/density/density-spacious.js +24 -9
  158. package/dist/js/brands/advertorial/overrides/brandtokenmapping.js +518 -329
  159. package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.js +900 -491
  160. package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.js +900 -495
  161. package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.js +900 -493
  162. package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.js +900 -493
  163. package/dist/js/brands/advertorial/semantic/effects/effects-dark.js +53 -216
  164. package/dist/js/brands/advertorial/semantic/effects/effects-light.js +53 -216
  165. package/dist/js/brands/advertorial/semantic/typography/typography-lg.js +456 -1132
  166. package/dist/js/brands/advertorial/semantic/typography/typography-md.js +456 -1132
  167. package/dist/js/brands/advertorial/semantic/typography/typography-sm.js +456 -1132
  168. package/dist/js/brands/advertorial/semantic/typography/typography-xs.js +456 -1132
  169. package/dist/js/brands/bild/density/density-compact.js +24 -9
  170. package/dist/js/brands/bild/density/density-default.js +24 -9
  171. package/dist/js/brands/bild/density/density-spacious.js +24 -9
  172. package/dist/js/brands/bild/overrides/brandcolormapping.js +153 -73
  173. package/dist/js/brands/bild/overrides/brandtokenmapping.js +518 -298
  174. package/dist/js/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.js +900 -479
  175. package/dist/js/brands/bild/semantic/breakpoints/breakpoint-md-600px.js +900 -482
  176. package/dist/js/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.js +900 -485
  177. package/dist/js/brands/bild/semantic/breakpoints/breakpoint-xs-320px.js +900 -485
  178. package/dist/js/brands/bild/semantic/color/colormode-dark.js +468 -227
  179. package/dist/js/brands/bild/semantic/color/colormode-light.js +468 -227
  180. package/dist/js/brands/bild/semantic/effects/effects-dark.js +53 -216
  181. package/dist/js/brands/bild/semantic/effects/effects-light.js +53 -216
  182. package/dist/js/brands/bild/semantic/typography/typography-lg.js +456 -1132
  183. package/dist/js/brands/bild/semantic/typography/typography-md.js +456 -1132
  184. package/dist/js/brands/bild/semantic/typography/typography-sm.js +456 -1132
  185. package/dist/js/brands/bild/semantic/typography/typography-xs.js +456 -1132
  186. package/dist/js/brands/sportbild/density/density-compact.js +24 -9
  187. package/dist/js/brands/sportbild/density/density-default.js +24 -9
  188. package/dist/js/brands/sportbild/density/density-spacious.js +24 -9
  189. package/dist/js/brands/sportbild/overrides/brandcolormapping.js +153 -73
  190. package/dist/js/brands/sportbild/overrides/brandtokenmapping.js +518 -329
  191. package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.js +900 -494
  192. package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.js +900 -494
  193. package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.js +900 -494
  194. package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.js +900 -494
  195. package/dist/js/brands/sportbild/semantic/color/colormode-dark.js +468 -227
  196. package/dist/js/brands/sportbild/semantic/color/colormode-light.js +468 -227
  197. package/dist/js/brands/sportbild/semantic/effects/effects-dark.js +53 -216
  198. package/dist/js/brands/sportbild/semantic/effects/effects-light.js +53 -216
  199. package/dist/js/brands/sportbild/semantic/typography/typography-lg.js +456 -1132
  200. package/dist/js/brands/sportbild/semantic/typography/typography-md.js +456 -1132
  201. package/dist/js/brands/sportbild/semantic/typography/typography-sm.js +456 -1132
  202. package/dist/js/brands/sportbild/semantic/typography/typography-xs.js +456 -1132
  203. package/dist/js/shared/colorprimitive.js +157 -95
  204. package/dist/js/shared/fontprimitive.js +86 -44
  205. package/dist/js/shared/sizeprimitive.js +57 -50
  206. package/dist/js/shared/spaceprimitive.js +33 -26
  207. package/dist/json/brands/advertorial/density/density-compact.json +16 -48
  208. package/dist/json/brands/advertorial/density/density-default.json +16 -48
  209. package/dist/json/brands/advertorial/density/density-spacious.json +16 -48
  210. package/dist/json/brands/advertorial/overrides/brandtokenmapping.json +542 -2054
  211. package/dist/json/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.json +922 -3087
  212. package/dist/json/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.json +922 -3087
  213. package/dist/json/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.json +922 -3087
  214. package/dist/json/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.json +922 -3087
  215. package/dist/json/brands/bild/density/density-compact.json +16 -48
  216. package/dist/json/brands/bild/density/density-default.json +16 -48
  217. package/dist/json/brands/bild/density/density-spacious.json +16 -48
  218. package/dist/json/brands/bild/overrides/brandcolormapping.json +192 -471
  219. package/dist/json/brands/bild/overrides/brandtokenmapping.json +542 -2054
  220. package/dist/json/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.json +922 -3087
  221. package/dist/json/brands/bild/semantic/breakpoints/breakpoint-md-600px.json +922 -3087
  222. package/dist/json/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.json +922 -3087
  223. package/dist/json/brands/bild/semantic/breakpoints/breakpoint-xs-320px.json +922 -3087
  224. package/dist/json/brands/bild/semantic/color/colormode-dark.json +606 -1485
  225. package/dist/json/brands/bild/semantic/color/colormode-light.json +596 -1475
  226. package/dist/json/brands/sportbild/density/density-compact.json +16 -48
  227. package/dist/json/brands/sportbild/density/density-default.json +16 -48
  228. package/dist/json/brands/sportbild/density/density-spacious.json +16 -48
  229. package/dist/json/brands/sportbild/overrides/brandcolormapping.json +186 -465
  230. package/dist/json/brands/sportbild/overrides/brandtokenmapping.json +542 -2054
  231. package/dist/json/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.json +922 -3087
  232. package/dist/json/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.json +922 -3087
  233. package/dist/json/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.json +922 -3087
  234. package/dist/json/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.json +922 -3087
  235. package/dist/json/brands/sportbild/semantic/color/colormode-dark.json +606 -1485
  236. package/dist/json/brands/sportbild/semantic/color/colormode-light.json +596 -1475
  237. package/dist/json/shared/colorprimitive.json +210 -1206
  238. package/dist/json/shared/fontprimitive.json +86 -222
  239. package/dist/json/shared/sizeprimitive.json +98 -196
  240. package/dist/json/shared/spaceprimitive.json +50 -100
  241. package/dist/manifest.json +1 -1
  242. package/dist/scss/brands/advertorial/density/density-compact.scss +25 -9
  243. package/dist/scss/brands/advertorial/density/density-default.scss +25 -9
  244. package/dist/scss/brands/advertorial/density/density-spacious.scss +25 -9
  245. package/dist/scss/brands/advertorial/overrides/brandtokenmapping.scss +519 -272
  246. package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.scss +898 -470
  247. package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.scss +898 -470
  248. package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.scss +898 -470
  249. package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.scss +898 -470
  250. package/dist/scss/brands/advertorial/semantic/effects/effects-dark.scss +55 -15
  251. package/dist/scss/brands/advertorial/semantic/effects/effects-light.scss +55 -15
  252. package/dist/scss/brands/advertorial/semantic/typography/typography-lg.scss +456 -124
  253. package/dist/scss/brands/advertorial/semantic/typography/typography-md.scss +456 -124
  254. package/dist/scss/brands/advertorial/semantic/typography/typography-sm.scss +456 -124
  255. package/dist/scss/brands/advertorial/semantic/typography/typography-xs.scss +456 -124
  256. package/dist/scss/brands/bild/density/density-compact.scss +25 -9
  257. package/dist/scss/brands/bild/density/density-default.scss +25 -9
  258. package/dist/scss/brands/bild/density/density-spacious.scss +25 -9
  259. package/dist/scss/brands/bild/overrides/brandcolormapping.scss +155 -70
  260. package/dist/scss/brands/bild/overrides/brandtokenmapping.scss +519 -272
  261. package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.scss +898 -470
  262. package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-md-600px.scss +898 -470
  263. package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.scss +898 -470
  264. package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-xs-320px.scss +898 -470
  265. package/dist/scss/brands/bild/semantic/color/colormode-dark.scss +451 -300
  266. package/dist/scss/brands/bild/semantic/color/colormode-light.scss +451 -300
  267. package/dist/scss/brands/bild/semantic/effects/effects-dark.scss +55 -15
  268. package/dist/scss/brands/bild/semantic/effects/effects-light.scss +55 -15
  269. package/dist/scss/brands/bild/semantic/typography/typography-lg.scss +456 -124
  270. package/dist/scss/brands/bild/semantic/typography/typography-md.scss +456 -124
  271. package/dist/scss/brands/bild/semantic/typography/typography-sm.scss +456 -124
  272. package/dist/scss/brands/bild/semantic/typography/typography-xs.scss +456 -124
  273. package/dist/scss/brands/sportbild/density/density-compact.scss +25 -9
  274. package/dist/scss/brands/sportbild/density/density-default.scss +25 -9
  275. package/dist/scss/brands/sportbild/density/density-spacious.scss +25 -9
  276. package/dist/scss/brands/sportbild/overrides/brandcolormapping.scss +155 -70
  277. package/dist/scss/brands/sportbild/overrides/brandtokenmapping.scss +519 -272
  278. package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.scss +898 -470
  279. package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.scss +898 -470
  280. package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.scss +898 -470
  281. package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.scss +898 -470
  282. package/dist/scss/brands/sportbild/semantic/color/colormode-dark.scss +451 -300
  283. package/dist/scss/brands/sportbild/semantic/color/colormode-light.scss +451 -300
  284. package/dist/scss/brands/sportbild/semantic/effects/effects-dark.scss +55 -15
  285. package/dist/scss/brands/sportbild/semantic/effects/effects-light.scss +55 -15
  286. package/dist/scss/brands/sportbild/semantic/typography/typography-lg.scss +456 -124
  287. package/dist/scss/brands/sportbild/semantic/typography/typography-md.scss +456 -124
  288. package/dist/scss/brands/sportbild/semantic/typography/typography-sm.scss +456 -124
  289. package/dist/scss/brands/sportbild/semantic/typography/typography-xs.scss +456 -124
  290. package/dist/scss/shared/colorprimitive.scss +159 -96
  291. package/dist/scss/shared/fontprimitive.scss +68 -25
  292. package/dist/scss/shared/sizeprimitive.scss +9 -1
  293. package/dist/scss/shared/spaceprimitive.scss +9 -1
  294. package/package.json +1 -1
@@ -4,470 +4,470 @@
4
4
  Do not edit directly, this file was auto-generated.
5
5
  -->
6
6
  <resources>
7
- <dimen name="component_article_aricle_mobile1_col_grid_image_margin_space">1152.00dp</dimen>
8
- <dimen name="component_article_article_top_margin_space">256.00dp</dimen><!-- 8 | 8 | 12 | 16 - This space variable is used at the top edge of the article main content bounding box. -->
9
- <dimen name="component_article_article_kicker_font_size">480.00dp</dimen><!-- This variable is used to control the font size of kickers in the heading section of article pages. 18 - 18 - 22 - 30 -->
10
- <dimen name="component_article_article_headline_font_size">1600.00dp</dimen><!-- 40 - 40 - 72 - 100 - This variable uses the semantic variables headline2 for XS&SM, headline1 for MD&LG -->
11
- <dimen name="component_article_article_gallery_a_teaser_width">4800.00dp</dimen><!-- same as standard teaser width size variable -->
12
- <dimen name="component_article_article_image_caption_font_size">288.00dp</dimen><!-- CSS --article-figure-meta-font-size 16-16-18-18 -->
13
- <dimen name="component_article_article_image_source_font_size">288.00dp</dimen><!-- NMT CSS --article-figure-meta-font-size -->
14
- <dimen name="component_article_article_image_caption_line_height">396.00dp</dimen><!-- this component level variable references the branding variables -->
15
- <dimen name="component_article_article_image_source_line_height">368.00dp</dimen>
16
- <dimen name="component_article_article_content_stack_space">512.00dp</dimen><!-- 16 - 16 - 24 - 32 - This variable creates the vertical spacing between different article body elements such as avatars, media players, corssheadings, paragraphs, field sets, images, tables, quotes, videos, social embeds, etc. -->
17
- <dimen name="component_article_article_headings_stack_space">256.00dp</dimen><!-- 12 | 12 | 12 | 16 - This spacing variable is used for the space between article page heading kickers, headlines and subheadlines. XS&SM need review; correct value might be 8 -->
18
- <dimen name="component_article_article_image_landscape_inline_space">256.00dp</dimen>
19
- <string name="component_article_article_meta_font_family">Gotham</string><!-- This variable is used on the font size of article day&time stamp that usually shows up along with the article author avatars. On app versions this variable is used for the avatar names. This variable references variables from the branding collection. -->
20
- <dimen name="component_article_article_meta_font_size">256.00dp</dimen><!-- This variable is used on the font size of article day&time stamp that usually shows up along with the article author avatars. On app versions this variable is used for the avatar names. 12 - 12 - 14 - 16 -->
21
- <dimen name="component_article_article_content_inline_space">2592.00dp</dimen><!-- 16 | 16 | 72 | 162 - This variable is used for making the left and right spacings around article content blocks. Current css has the article-body class assigned to a div and article body contains these horizontal padding values. -->
22
- <dimen name="component_article_article_headings_inline_space">256.00dp</dimen><!-- 16 | 16 | 72 | 16 - This variable is used for the left and right space within the article page headings container which holds the article page kicker, headline and subheadline. -->
23
- <dimen name="component_article_article_image_portait_inline_space">2592.00dp</dimen>
24
- <dimen name="component_article_article_image_container_stack_space">256.00dp</dimen>
25
- <dimen name="component_article_article_infobox_inline_space">512.00dp</dimen>
26
- <dimen name="component_article_article_infobox_stack_space">512.00dp</dimen>
27
- <dimen name="component_d_sys_docs_bild_design_frame_space">1024.00dp</dimen><!-- Variable used in spacing parameters of bild.design webpage mockups. move to bild.design group maybe -->
28
- <dimen name="component_d_sys_docs_ds_main_container_space">1088.00dp</dimen><!-- This variable is used on documentation pages. This is an alternative variable to the main container max width variable. 0 - 0 - 68 - 68 -->
29
- <dimen name="component_d_sys_docs_d_sys_docs_width_size">23040.00dp</dimen>
30
- <dimen name="component_d_sys_docs_main_content_stage_size">16384.00dp</dimen><!-- This variable is used as a max width size for content blocks. For mobile devices this var references the DSysDocsWidthSize var 320 - 750 - 962 - 1024 -->
31
- <dimen name="component_d_sys_docs_foundations_banner_height_size">2240.00dp</dimen><!-- This variable is used on documentation pages that have an artistic banner at the top of the page that is related to the foundation topic on the page. 80 - 80 -80 - 140 -->
32
- <dimen name="component_d_sys_docs_ds_caption_stack_space0_5x">128.00dp</dimen><!-- This variable is used in documentation pages that have small caption or lables along with a UI component documented. 4 - 4 - 6 - 8 -->
33
- <dimen name="component_d_sys_docs_ds_caption_stack_space1x">256.00dp</dimen>
34
- <dimen name="component_d_sys_docs_1column_mobile">10496.00dp</dimen><!-- This variable is used only for this design system's component tests. -->
35
- <dimen name="component_d_sys_docs_thin_banner_vertical_height_size">2976.00dp</dimen><!-- This variable is currently used on a thin gallery that appears on desktop websites with petbook and other "books" content. Its height changes to a large height on mobile sites. 558 - 558 - 558 - 186 -->
36
- <string name="component_d_sys_docs_specs_font_family">Gotham</string><!-- This variable is used only for texts and labels that form part of this design system's documentation. -->
37
- <dimen name="component_d_sys_docs_doc_header_height_size">2880.00dp</dimen><!-- This variable is used on documentation headers that contain info about platfroms and component names. 144 - 144 - 160 - 180 -->
38
- <dimen name="component_menu_menu_item_space">128.00dp</dimen>
39
- <dimen name="component_menu_menu_item_font_size">240.00dp</dimen><!-- This variable is used on the menu link lane and on the mobile side menu drawer. -->
40
- <dimen name="component_menu_menu_item_util_font_size">192.00dp</dimen>
41
- <dimen name="component_menu_menu_item_util_stack_space">160.00dp</dimen>
42
- <dimen name="component_menu_menu_link_lane_height_size">768.00dp</dimen>
43
- <dimen name="component_menu_menu_utillink_item_height_size">768.00dp</dimen>
44
- <dimen name="component_menu_menu_link_item_inline_space">64.00dp</dimen>
45
- <dimen name="component_menu_menu_logo_default_size">2368.00dp</dimen>
46
- <dimen name="component_menu_menu_logo_scrolled_size">896.00dp</dimen>
47
- <dimen name="component_menu_menu_special_navi_item_height_size">896.00dp</dimen>
48
- <dimen name="component_menu_sub_nav_bar_height_size">672.00dp</dimen>
49
- <dimen name="component_menu_menu_utility_links_container_height_size">1600.00dp</dimen>
50
- <dimen name="component_menu_menu_top_stack_space">192.00dp</dimen>
51
- <dimen name="component_menu_menu_left_inline_space">256.00dp</dimen>
52
- <dimen name="component_menu_menu_utility_links_gap_space">512.00dp</dimen>
53
- <dimen name="component_menu_menu_right_inline_space">256.00dp</dimen>
54
- <dimen name="component_menu_menu_bottom_stack_space">0.00dp</dimen>
55
- <dimen name="component_menu_menu_utility_links_divider_height_size">768.00dp</dimen>
56
- <color name="component_menu_menu_shadow_visibility">#00000000</color><!-- This color type variables are only in this semantic collection for making subtle shadow effects change visibility across device sizes. Shadow alpha: 10 - 10 - 10 - 0 -->
57
- <color name="component_menu_hey_input_shadow_visibility">#1a000000</color><!-- This color type variables are only in this semantic collection for making subtle shadow effects change visibility across device sizes. Shadow alpha: 0 - 0 - 0 - 10 -->
58
- <dimen name="component_menu_app_topbar_title_font_size">224.00dp</dimen>
59
- <dimen name="component_menu_app_topbar_stage_title_height">272.00dp</dimen>
60
- <dimen name="component_menu_i_o_sapp_top_bar_height_size">768.00dp</dimen>
61
- <dimen name="component_menu_i_o_sapp_top_bar_left_inline_space">304.00dp</dimen>
62
- <dimen name="component_menu_i_o_sapp_top_bar_right_inline_space">304.00dp</dimen>
63
- <dimen name="component_teaser_teaser_title_inline_left_space">0.00dp</dimen>
64
- <dimen name="component_teaser_teaser_title_stack_space">96.00dp</dimen>
65
- <dimen name="component_teaser_m_q_teaser_m_q_teaser_headline_font_size">640.00dp</dimen><!-- XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 // LG-headline3FontSize:40 -->
66
- <string name="component_teaser_m_q_teaser_m_q_teaser_headline_font_weight">700</string>
67
- <dimen name="component_teaser_m_q_teaser_m_q_teaser_headline_line_height">640.00dp</dimen>
68
- <dimen name="component_teaser_m_q_teaser_mq_teaser_title_inline_space">128.00dp</dimen>
69
- <dimen name="component_teaser_a_teaser_a_teaser_kicker_font_size">384.00dp</dimen><!-- 16 - 16 - 22 - 24 This variable references the semantic variables kicker3fontsize and kicker2fontsize. At the 600px breakpoint smaller devices use the kicker3 variable -->
70
- <dimen name="component_teaser_a_teaser_a_teaser_headline_font_size">1024.00dp</dimen><!-- This variable references the semantic variables headline3 (XS&SM) and headline2 (MD&LG). 28 - 28 - 48 - 64 -->
71
- <dimen name="component_teaser_a_teaser_a_teaser_kicker_line_height">384.00dp</dimen>
72
- <dimen name="component_teaser_a_teaser_a_teaser_headline_line_height">1024.00dp</dimen>
73
- <dimen name="component_teaser_a_teaser_a_teaser_title_inline_space">192.00dp</dimen>
74
- <dimen name="component_teaser_teaser_title_gap_space">64.00dp</dimen>
75
- <dimen name="component_teaser_std_teaser_std_teaser_image_title_gap_space">96.00dp</dimen>
76
- <dimen name="component_teaser_std_teaser_std_teaser_badges_margin_space">128.00dp</dimen><!-- This variable is used for creating space around the outside of a subscription badge or video icon badge. -->
77
- <dimen name="component_teaser_std_teaser_std_teaser_kicker_headline_stack_space">32.00dp</dimen><!-- 2 | 2 | 2 | 2 - This variable is used on the standard teaser vertical spacing between the kicker and the headline. It references the semantic variable stackSpaceConst3XS -->
78
- <dimen name="component_teaser_teaser_kicker_bg_inline_space">96.00dp</dimen>
79
- <dimen name="component_teaser_teaser_kicker_bg_stack_space">32.00dp</dimen>
80
- <dimen name="component_teaser_q_teaser_quad_headline_font_size">1600.00dp</dimen><!-- This component level variable is used on the quad teaser headline. It references the semantic level variable headline1. 48 - 48 - 72 - 100 -->
81
- <dimen name="component_teaser_q_teaser_quad_kicker_font_size">384.00dp</dimen>
82
- <dimen name="component_teaser_q_teaser_quad_headline_line_height">1600.00dp</dimen>
83
- <dimen name="component_teaser_q_teaser_q_teaser_title_inline_space">192.00dp</dimen>
84
- <dimen name="component_teaser_teaser_badges_margin_space">128.00dp</dimen><!-- This variable is used for creating space around the outside of a subscription badge or video icon badge. -->
85
- <dimen name="component_teaser_teaser_badges_height_size_lg">640.00dp</dimen><!-- This token is for controling the height of badges that are inside of teasers. 32 - 32 - 32 - 40 -->
86
- <dimen name="component_teaser_teaser_title_bottom_stack_space">256.00dp</dimen>
87
- <dimen name="component_teaser_teaser_badges_height_size_sm">512.00dp</dimen>
88
- <dimen name="component_teaser_bild_play_bild_play_teaser_width_size">3088.00dp</dimen>
89
- <dimen name="component_teaser_teaser_layout_grid_space">256.00dp</dimen>
90
- <dimen name="component_teaser_super_a_super_a_teaser_title_inline_space">256.00dp</dimen><!-- 16 - 16 - 16 - 16 -->
91
- <dimen name="component_teaser_b_teaser_b_teaser_title_inline_space">128.00dp</dimen>
92
- <dimen name="component_table_table_column_width_size1x">2240.00dp</dimen>
93
- <dimen name="component_table_table_column_width_size2x">3520.00dp</dimen>
94
- <dimen name="component_table_table_column_width_size0_5x">1152.00dp</dimen>
95
- <dimen name="component_table_table_column_width_size1_5x">2880.00dp</dimen>
96
- <dimen name="component_table_table_column_width_size2_5x">3840.00dp</dimen>
97
- <dimen name="component_table_table_column_width_size0_75x">1600.00dp</dimen>
98
- <dimen name="component_table_table_column_width_size3x">4480.00dp</dimen>
99
- <dimen name="component_table_table_item_max_width_size">3584.00dp</dimen>
100
- <dimen name="component_separators_separator_thickness_size">32.00dp</dimen>
101
- <dimen name="component_avatar_avatar_label_font_size">288.00dp</dimen><!-- This variable is used on avatar names in article pages. Bild: 16 - 16 - 16 - 18; SpoBi&Ads: 13 - 13 - 13 - 15 -->
102
- <dimen name="component_avatar_avatar_article_size">768.00dp</dimen><!-- This variable is used for setting the size of avatar images in article pages. It references the sizeConstMD variable from the "generic" semantic collection. Its value is 48 across devices. -->
103
- <dimen name="component_avatar_avatar_author_page_size">2080.00dp</dimen><!-- 96 - 96 - 130 - 130 This variable is used for controlling the size of the avatar image on author pages. -->
104
- <string name="component_avatar_avatar_font_family">Gotham XNarrow</string><!-- This variable is used in avatar text styles. It receives values from the Brand Tokens Collection. Bild: GothamXNarrow; SpoBi: Inter; Ads: LucidaGrande -->
105
- <dimen name="component_avatar_avatar_label_line_height">368.00dp</dimen><!-- This variable is used for controlling the line height of avatar texts. Its values influence the stacking space between avatar texts. 21 - 21 - 21 - 23 -->
106
- <dimen name="component_avatar_avatar_lane_gap_space">384.00dp</dimen><!-- This variable is used for setting the inline space between multiple avatars that are horizontally placed in a lane when an article has multiple authors. 16 - 16 - 24 - 24 -->
107
- <string name="component_avatar_app_avatar_font_family">Gotham</string><!-- This variable is used for setting the font of avatars on iOS and Android platforms. This is subject to review. -->
108
- <dimen name="component_button_button_label_font_size">240.00dp</dimen>
109
- <dimen name="component_button_button_inline_space">256.00dp</dimen>
110
- <dimen name="component_button_partner_link_button_label_font_size">288.00dp</dimen><!-- Use this variable for controlling the font size of partner buttons. 16 - 16 - 16 - 18 -->
111
- <dimen name="component_button_partner_link_button_label_height_size">768.00dp</dimen>
112
- <dimen name="component_button_button_border_width_size">32.00dp</dimen>
113
- <dimen name="component_button_button_content_min_height_size">384.00dp</dimen><!-- This fixed height variable ensures that the button maintains a consistent height, even when the icon is not active. -->
114
- <dimen name="component_button_partner_link_button_inline_space">128.00dp</dimen>
115
- <dimen name="component_button_button_label_line_height">240.00dp</dimen>
116
- <dimen name="component_button_button_content_gap_space">96.00dp</dimen>
117
- <dimen name="component_button_button_stack_space">96.00dp</dimen>
118
- <dimen name="component_button_button_border_radius">128.00dp</dimen>
119
- <dimen name="component_newsticker_news_ticker_time_font_size">288.00dp</dimen><!-- similar to kicker3 values - 16 - 16 - 16 - 18 -->
120
- <string name="component_newsticker_news_ticker_time_font_weight">700</string>
121
- <string name="component_newsticker_news_ticker_time_font_family">Gotham XNarrow</string>
122
- <dimen name="component_newsticker_news_ticker_time_line_height">374.40dp</dimen><!-- Figma currently does not allow for percentages in Line Height variables. The values in this token are the result of multiplying the font size by the line height variable defined on the Bild home css -> newsTickerTime line height: 1.3. Line height for this component does not change across devices. -->
123
- <dimen name="component_newsticker_news_ticker_content_stack_space">64.00dp</dimen>
124
- <dimen name="component_newsticker_news_ticker_kicker_inner_stack_space">32.00dp</dimen>
125
- <dimen name="component_newsticker_news_ticker_titles_inline_space">480.00dp</dimen>
126
- <dimen name="component_newsticker_news_ticker_badges_inline_space">256.00dp</dimen>
127
- <dimen name="component_newsticker_news_ticker_time_kicker_stack_space">96.00dp</dimen>
128
- <dimen name="component_newsticker_news_ticker_entries_stack_space">352.00dp</dimen>
129
- <dimen name="component_newsticker_news_ticker_kicker_inner_inline_space">64.00dp</dimen>
130
- <dimen name="component_newsticker_news_ticker_skeleton_bottom_space">0.00dp</dimen>
131
- <dimen name="component_newsticker_news_ticker_red_dot_size">256.00dp</dimen>
132
- <dimen name="component_newsticker_news_ticker_entries_left_inline_space">352.00dp</dimen>
133
- <dimen name="component_newsticker_news_ticker_line_inline_space">128.00dp</dimen>
134
- <dimen name="component_newsticker_news_ticker_app_card_height_size">2400.00dp</dimen>
135
- <dimen name="component_newsticker_news_ticker_app_card_width_size">4800.00dp</dimen>
136
- <string name="component_liveticker_live_tickerheadline_font_weight">600</string>
137
- <dimen name="component_liveticker_live_ticker_headlines_font_size">512.00dp</dimen><!-- This variable is used for the font size of live ticker headlines. 22 - 22 - 32 - 32 -->
138
- <string name="component_liveticker_time_stamp_font_family">Gotham XNarrow</string>
139
- <dimen name="component_liveticker_live_ticker_time_stamp_font_size">256.00dp</dimen><!-- This variable is used for the live ticker time stamp font size. 14 - 14 - 16 - 16 -->
140
- <dimen name="component_liveticker_live_ticker_time_headline_stack_space">64.00dp</dimen>
141
- <dimen name="component_liveticker_live_ticker_slider_item_width_max_size">8592.00dp</dimen>
142
- <dimen name="component_liveticker_live_ticker_app_card_height_size">2048.00dp</dimen>
143
- <dimen name="component_liveticker_live_ticker_app_card_width_size">4800.00dp</dimen>
144
- <dimen name="component_video_video_time_badge_corner_size">32.00dp</dimen><!-- This variable is used on video player badges that display a red play icon on top of a white square next to a time stamp. This variable references the borderRadiusXS. Constant value of 2 across device sizes. -->
145
- <dimen name="component_video_video_time_badge_font_size">288.00dp</dimen><!-- 16 - 16 - 18 - 18 -- This variable is used to control the videoTimeBadge text style's font size parameter. The typography style that uses this variable is the videoTimeBadge style. The badge that uses this variable appears on the upper right corner of horizontal videos. -->
146
- <dimen name="component_video_video_time_badge_size">640.00dp</dimen><!-- 24 - 24 - 32 - 40 - This variable is used on horizontal video badges that contain a red play icon on top of a white square next to a timestamp. -->
147
- <dimen name="component_video_video_red_play_icon_width_size">224.00dp</dimen>
148
- <dimen name="component_video_video_red_play_icon_height_size">288.00dp</dimen><!-- This variable is used for changing the red play icon inside the white square. -->
149
- <dimen name="component_video_video_badge_time_line_height">380.80dp</dimen>
150
- <dimen name="component_video_video_skeleton_container_height">7424.00dp</dimen>
151
- <dimen name="component_video_video_frame_inline_space">256.00dp</dimen>
152
- <dimen name="component_video_vertical_video_mock_headline_font_size">512.00dp</dimen>
153
- <dimen name="component_video_video_ad_badge_font_size">256.00dp</dimen><!-- 14 - 14 - 16 - 16 -- This variable is used in the videoAdBadge font size parameter. -->
154
- <dimen name="component_pagination_gallery_pagination_item_height_size">64.00dp</dimen>
155
- <dimen name="component_pagination_gallery_pagination_container_web_inline_space">192.00dp</dimen><!-- 8 - 8 - 12 - 12 - this component level variable references the inlineSpaceConst semantic variables; SM for smaller devices, MD for larger devices -->
156
- <dimen name="component_pagination_gallery_pagination_container_stack_space">256.00dp</dimen><!-- 12 - 12 - 16 - 16 - this component level variable references the semantic -->
157
- <dimen name="component_pagination_gallery_pagination_container_app_inline_space">192.00dp</dimen>
158
- <dimen name="component_pagination_scroll_bar_thickness_size">128.00dp</dimen>
159
- <dimen name="component_dropdown_drop_down_border_radius">64.00dp</dimen>
160
- <dimen name="component_dropdown_drop_down_item_stack_space">128.00dp</dimen>
161
- <dimen name="component_dropdown_drop_down_item_inline_space">256.00dp</dimen>
162
- <dimen name="component_inputfield_input_field_stack_space">96.00dp</dimen>
163
- <dimen name="component_inputfield_input_field_inline_space">256.00dp</dimen>
164
- <dimen name="component_inputfield_input_field_mini_label_inline_space">64.00dp</dimen>
165
- <dimen name="component_inputfield_input_field_font_size">256.00dp</dimen><!-- This variable controls texts inside of input fields such as dropdowns, date input and other text inputs that appear in forms for example. compact 15 - default 17 - spacious 19 -->
166
- <dimen name="component_inputfield_input_field_i_message_inline_space">256.00dp</dimen>
167
- <dimen name="component_inputfield_input_field_height_size">576.00dp</dimen>
168
- <dimen name="component_inputfield_hey_input_container_inline_space">256.00dp</dimen>
169
- <dimen name="component_inputfield_input_field_message_gap_space">64.00dp</dimen>
170
- <string name="component_inputfield_input_field_font_family">Gotham XNarrow</string>
171
- <dimen name="component_breadcrumb_breadcrumb_font_size">192.00dp</dimen><!-- 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices. -->
172
- <string name="component_breadcrumb_breadcrumb_font_family">Gotham XNarrow</string>
173
- <dimen name="component_breadcrumb_breadcrumb_arrow_left_inline_space1">48.00dp</dimen>
174
- <dimen name="component_breadcrumb_breadcrumb_arrow_right_inline_space2">80.00dp</dimen>
175
- <dimen name="component_breadcrumb_breadcrumb_inline_space">0.00dp</dimen>
176
- <dimen name="component_breadcrumb_breadcrumb_line_height">192.00dp</dimen><!-- 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices. -->
177
- <string name="component_breadcrumb_breadcrumb_font_weight">700</string>
178
- <dimen name="component_breadcrumb_breadcrumb_stack_space">256.00dp</dimen>
179
- <dimen name="component_icon_icon_size">384.00dp</dimen>
180
- <dimen name="component_icon_icon_size_embedd_media">640.00dp</dimen>
181
- <dimen name="component_badge_badges_inner_stack_space">32.00dp</dimen><!-- This space variable is used for creating the top and bottom space between a badge's text label and the surface that the text label is on top of. -->
182
- <dimen name="component_badge_badges_inner_inline_space">64.00dp</dimen><!-- This space variable is used for creating the left and right space between a badge's text label and the badge background surface that the text label is on top of. -->
183
- <dimen name="component_badge_ad_label_badge_height_size">480.00dp</dimen><!-- 30 - 30 - 30 - 30 - This variable is used on the Advert rectangular badge that is found above an ad containers. -->
184
- <dimen name="component_section_title_section_title_inner_stack_bottom_space">192.00dp</dimen>
185
- <dimen name="component_section_title_section_title_height_size">640.00dp</dimen>
186
- <dimen name="component_section_title_section_title_arrow_inline_space">80.00dp</dimen><!-- This variable is used on large title headings that are h2 elements in html and indicate a new section in the user interface. This space changes when a user hovers over the large title. -->
187
- <dimen name="component_section_title_section_title_arrow_inline_space_active">128.00dp</dimen><!-- This variable is used for increasing the space between the text and the arrow at the end of the large title text. On mobile devices there is no hover state so this variables values are the same as the default state values. -->
188
- <dimen name="component_audio_player_audio_player_font_size">288.00dp</dimen><!-- This variable is used in the text style dedicated to audio player labels for elapsed time, reproduction speed and short functionality description text. 16 - 16 - 16 - 18 -->
189
- <dimen name="component_special_navi_special_navi_inline_space">512.00dp</dimen>
190
- <dimen name="component_chips_chips_font_size">288.00dp</dimen><!-- This variable is used on the chips font size parameter of the chips text style. The font size changes only for the change between larger device widths and any device smaller than the largest. 16 - 16 -16 - 18 -->
191
- <dimen name="component_chips_chips_inline_space">192.00dp</dimen>
192
- <dimen name="component_chips_chips_stack_space">128.00dp</dimen>
193
- <dimen name="component_search_search_result_badge_height_size">288.00dp</dimen>
194
- <dimen name="component_radio_buttons_radio_selector_size">320.00dp</dimen>
195
- <dimen name="component_radio_buttons_radio_selector_dot_active_size">192.00dp</dimen>
196
- <dimen name="component_skeletons_headlines_skeleton_image_placeholder_max_width">2560.00dp</dimen>
197
- <dimen name="component_skeletons_article_skeleton_image_inline_space">768.00dp</dimen>
198
- <dimen name="component_skeletons_article_skeleton_text_inline_space">768.00dp</dimen>
199
- <dimen name="component_skeletons_article_text_skeleton_height_size">11520.00dp</dimen>
200
- <dimen name="component_spinners_video_spinner_size">1280.00dp</dimen>
201
- <dimen name="component_spinners_video_spinner_stroke_size">64.00dp</dimen>
202
- <dimen name="component_spinners_video_spinner_size0_5x">640.00dp</dimen>
203
- <dimen name="component_breaking_news_breaking_news_container_height_size">896.00dp</dimen>
204
- <dimen name="component_breaking_news_breaking_news_badge_upper_title_font_size">272.00dp</dimen>
205
- <dimen name="component_breaking_news_breaking_news_badge_lower_title_font_size">480.00dp</dimen>
206
- <dimen name="component_breaking_news_breaking_news_badge_upper_title_line_height">192.00dp</dimen>
207
- <dimen name="component_breaking_news_breaking_news_badge_lower_title_line_height">336.00dp</dimen>
208
- <dimen name="component_breaking_news_breaking_news_badge_titels_stack_space">64.00dp</dimen>
209
- <dimen name="component_breaking_news_breaking_news_scrolling_text_font_size">336.00dp</dimen>
210
- <dimen name="component_breaking_news_breaking_news_scrolling_text_line_height">384.00dp</dimen>
211
- <dimen name="component_breaking_news_breaking_news_badge_inline_space">416.00dp</dimen>
212
- <dimen name="component_info_element_info_element_teaser_badge_height_size">384.00dp</dimen>
213
- <dimen name="component_info_element_info_element_teaser_image_height_size">2128.00dp</dimen>
214
- <dimen name="component_info_element_info_element_teaser_image_width_size">3776.00dp</dimen>
215
- <dimen name="component_info_element_info_element_teaser_badge_margin_space">128.00dp</dimen>
216
- <dimen name="component_mediaplayer_podcast_play_button_size">768.00dp</dimen>
217
- <dimen name="component_mediaplayer_vid_player_bottom_bar_gap_space">256.00dp</dimen>
218
- <dimen name="component_mediaplayer_audio_player_header_stack_space">896.00dp</dimen>
219
- <string name="component_mediaplayer_video_time_badge_font_family">Gotham XNarrow</string>
220
- <dimen name="component_mediaplayer_vid_player_control_button_size">672.00dp</dimen>
221
- <dimen name="component_mediaplayer_vid_player_control_button_icon_size_hover">448.00dp</dimen>
222
- <dimen name="component_mediaplayer_vid_player_timecode_font_size">288.00dp</dimen>
223
- <dimen name="component_mediaplayer_vid_player_timecode_container_min_width_size">928.00dp</dimen>
224
- <dimen name="component_mediaplayer_vid_player_progress_bar_container_height_size">672.00dp</dimen>
225
- <dimen name="component_mediaplayer_vid_player_unmute_button_width_size">3520.00dp</dimen>
226
- <dimen name="component_tabs_tab_label_font_size">256.00dp</dimen><!-- Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data. -->
227
- <dimen name="component_tabs_ios_tabbar_height_size">784.00dp</dimen>
228
- <dimen name="component_tabs_android_tabbar_height_size">1184.00dp</dimen>
229
- <dimen name="component_tabs_tab_label_font_size_line">256.00dp</dimen><!-- Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data. -->
230
- <dimen name="component_tabs_apps_tabs_label_font_size">256.00dp</dimen><!-- Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data. -->
231
- <dimen name="component_tabs_apps_tabs_label_line_height">374.40dp</dimen><!-- Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data. -->
232
- <dimen name="component_tabs_top_bar_tab_item_height_size">704.00dp</dimen>
233
- <dimen name="component_drawers_mobile_menu_drawer_stack_space">320.00dp</dimen>
234
- <dimen name="component_drawers_mobile_menu_drawer_left_inline_space">320.00dp</dimen>
235
- <dimen name="component_drawers_mobile_menu_drawer_right_inline_space">256.00dp</dimen>
236
- <dimen name="component_drawers_mobile_menu_drawer_max_width_size">6400.00dp</dimen>
237
- <dimen name="component_quotes_quote_container_inline_space">448.00dp</dimen>
238
- <dimen name="component_quotes_quote_container_stack_space">512.00dp</dimen>
239
- <dimen name="component_quotes_quote_quotation_marks_font_size">576.00dp</dimen>
240
- <dimen name="component_quotes_quote_content_gap_space">768.00dp</dimen>
241
- <dimen name="component_carousel_gallery_teaser_title_bottom_space">576.00dp</dimen><!-- This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination. -->
242
- <dimen name="component_carousel_gallery_teaser_app_gap_space">128.00dp</dimen><!-- This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination. -->
243
- <dimen name="component_carousel_app_epaper_carousel_item_focus_width">3840.00dp</dimen>
244
- <dimen name="component_carousel_app_epaper_carousel_item_default_width">2752.00dp</dimen>
245
- <dimen name="component_carousel_app_epaper_carouse_beilage_item_width">2752.00dp</dimen>
246
- <dimen name="component_carousel_standard_teaser_gallery_teaser_width_web">4800.00dp</dimen>
247
- <dimen name="component_carousel_standard_teaser_gallery_teaser_width_app">7424.00dp</dimen>
248
- <dimen name="component_sliders_slider_progress_bar_idle_height_size">64.00dp</dimen>
249
- <dimen name="component_sliders_slider_progress_bar_hover_height_size">128.00dp</dimen>
250
- <dimen name="component_sliders_slider_progress_inactive_height_size">32.00dp</dimen>
251
- <dimen name="component_sliders_vid_player_progress_bar_height_size">192.00dp</dimen>
252
- <dimen name="component_footer_footer_font_size">176.00dp</dimen><!-- This variable is used on footer links that commonly show up at the bottom of pages. The font size parameter remains constant at 11 px across device sizes. -->
253
- <dimen name="component_footer_footer_line_height">224.00dp</dimen>
254
- <string name="component_footer_footer_font_family">Gotham XNarrow</string>
255
- <dimen name="component_footer_footer_font_size_user_offer_pages">288.00dp</dimen>
256
- <dimen name="component_footer_footer_line_height_user_offer_pages">416.00dp</dimen>
257
- <string name="component_accordion_accordion_label_font_family">Gotham XNarrow</string><!-- This variable exists specifically for changing the accordion font family across brands. It is subject to review. Bild: GothamXNarrow, SpoBi: Inter, Ads: LucindaGrande -->
258
- <dimen name="component_paywall_paywall_container_gap_space">-768.00dp</dimen>
259
- <dimen name="component_paywall_paywall_header_bottom_stack_space">1280.00dp</dimen>
260
- <dimen name="component_paywall_paywall_card_max_width_size">5536.00dp</dimen>
261
- <dimen name="component_paywall_paywall_card_price_tag_font_size">1024.00dp</dimen><!-- This variable is used on the paywall card price tag. 64 constant -->
262
- <dimen name="component_paywall_paywall_card_price_tag_line_height">1024.00dp</dimen>
263
- <dimen name="component_paywall_paywall_card_price_note_line_height">640.00dp</dimen>
264
- <dimen name="component_paywall_paywall_card_price_note_font_size">640.00dp</dimen><!-- This variable is used on the paywall card text under the price tag. 40 - 40 - 40 - 40 -->
265
- <dimen name="component_toggle_switch_app_toggle_item_label_font_size">288.00dp</dimen><!-- This variable is used on labels in list items with toggle switches found in app preferences. 14 - 14 - 16 - 18 -->
266
- <dimen name="component_toggle_switch_app_toggle_item_label_line_height">291.20dp</dimen><!-- This variable is used on labels in list items with toggle switches found in app preferences. 14.1 - 14.1 - 16.2 - 18.2 -->
267
- <dimen name="component_cards_search_result_card_image_width_size">4160.00dp</dimen>
268
- <dimen name="component_cards_search_result_card_image_height_size_stacked">3024.00dp</dimen>
269
- <dimen name="component_cards_newsticker_image_card_width_size">3296.00dp</dimen>
270
- <dimen name="component_datepicker_datepicker_item_day_width_size">704.00dp</dimen>
271
- <dimen name="component_datepicker_datepicker_item_height_size">704.00dp</dimen>
272
- <dimen name="component_datepicker_datepicker_item_year_width_size">1232.00dp</dimen>
273
- <dimen name="semantic_layout_grid_responsive_grid_space_resp_lg">512.00dp</dimen><!-- 24-24-32-32 – use for side paddings and gutters in responsive layouts -->
274
- <dimen name="semantic_layout_grid_responsive_grid_space_resp_xl">1024.00dp</dimen><!-- 48-48-64-64 – use for side paddings and gutters in responsive layouts -->
275
- <dimen name="semantic_layout_grid_responsive_grid_space_resp_base">256.00dp</dimen><!-- 12-12-12-16 – use for side paddings and gutters in responsive layouts -->
276
- <dimen name="semantic_layout_grid_responsive_grid_space_resp_sm">128.00dp</dimen><!-- 6-6-6-8 – use for side paddings and gutters in responsive layouts -->
277
- <dimen name="semantic_layout_grid_responsive_page_inline_space">256.00dp</dimen><!-- 0-0-0-16 – This token is used on the main homepages content container, ensuring full-width layout (no horizontal padding) on mobile and tablet breakpoints. -->
278
- <dimen name="semantic_layout_grid_constant_grid_space_const_lg">256.00dp</dimen><!-- 16-16-16-16 – use for fixed side paddings and gutters -->
279
- <dimen name="semantic_layout_grid_constant_grid_space_const_sm">192.00dp</dimen><!-- 12-12-12-12 – use for fixed side paddings and gutters -->
280
- <dimen name="semantic_layout_grid_layout_guide_layout_guide_grid_colums">192.00dp</dimen><!-- Used to set the column count in Figma Layout guide Grids -->
281
- <dimen name="semantic_layout_section_section_space_base">768.00dp</dimen><!-- 36-36-48-48 – Use for vertical spacing between sections in a layout. -->
282
- <dimen name="semantic_layout_section_section_space_lg">1536.00dp</dimen><!-- 72-72-96-96 – Use for vertical spacing between sections in a layout -->
283
- <dimen name="semantic_layout_section_paragraph_end_space">512.00dp</dimen><!-- 16-16-32-32 – Use for spacing after paragraphs in text content -->
284
- <dimen name="semantic_layout_section_section_space_sm">576.00dp</dimen><!-- 24-24-36-36 – Use for vertical spacing between subsections in a layout -->
285
- <dimen name="semantic_layout_breakpoints_breakpoint_min_width_size">16384.00dp</dimen><!-- 320 - 390 - 600 - 1024 – Defines the minimum width of the main frame for different breakpoints.
7
+ <dimen name="aricle-mobile1-col-grid-image-margin-space">72px</dimen>
8
+ <dimen name="article-top-margin-space">16px</dimen><!-- 8 | 8 | 12 | 16 - This space variable is used at the top edge of the article main content bounding box. -->
9
+ <dimen name="article-kicker-font-size">30px</dimen><!-- This variable is used to control the font size of kickers in the heading section of article pages. 18 - 18 - 22 - 30 -->
10
+ <dimen name="article-headline-font-size">100px</dimen><!-- 40 - 40 - 72 - 100 - This variable uses the semantic variables headline2 for XS&SM, headline1 for MD&LG -->
11
+ <dimen name="article-gallery-ateaser-width">300px</dimen><!-- same as standard teaser width size variable -->
12
+ <dimen name="article-image-caption-font-size">18px</dimen><!-- CSS --article-figure-meta-font-size 16-16-18-18 -->
13
+ <dimen name="article-image-source-font-size">18px</dimen><!-- NMT CSS --article-figure-meta-font-size -->
14
+ <dimen name="article-image-caption-line-height">24.75px</dimen><!-- this component level variable references the branding variables -->
15
+ <dimen name="article-image-source-line-height">23px</dimen>
16
+ <dimen name="article-content-stack-space">32px</dimen><!-- 16 - 16 - 24 - 32 - This variable creates the vertical spacing between different article body elements such as avatars, media players, corssheadings, paragraphs, field sets, images, tables, quotes, videos, social embeds, etc. -->
17
+ <dimen name="article-headings-stack-space">16px</dimen><!-- 12 | 12 | 12 | 16 - This spacing variable is used for the space between article page heading kickers, headlines and subheadlines. XS&SM need review; correct value might be 8 -->
18
+ <dimen name="article-image-landscape-inline-space">16px</dimen>
19
+ <string name="article-meta-font-family">Gotham</string><!-- This variable is used on the font size of article day&time stamp that usually shows up along with the article author avatars. On app versions this variable is used for the avatar names. This variable references variables from the branding collection. -->
20
+ <dimen name="article-meta-font-size">16px</dimen><!-- This variable is used on the font size of article day&time stamp that usually shows up along with the article author avatars. On app versions this variable is used for the avatar names. 12 - 12 - 14 - 16 -->
21
+ <dimen name="article-content-inline-space">162px</dimen><!-- 16 | 16 | 72 | 162 - This variable is used for making the left and right spacings around article content blocks. Current css has the article-body class assigned to a div and article body contains these horizontal padding values. -->
22
+ <dimen name="article-headings-inline-space">16px</dimen><!-- 16 | 16 | 72 | 16 - This variable is used for the left and right space within the article page headings container which holds the article page kicker, headline and subheadline. -->
23
+ <dimen name="article-image-portait-inline-space">162px</dimen>
24
+ <dimen name="article-image-container-stack-space">16px</dimen>
25
+ <dimen name="article-infobox-inline-space">32px</dimen>
26
+ <dimen name="article-infobox-stack-space">32px</dimen>
27
+ <dimen name="bild-design-frame-space">64px</dimen><!-- Variable used in spacing parameters of bild.design webpage mockups. move to bild.design group maybe -->
28
+ <dimen name="ds-main-container-space">68px</dimen><!-- This variable is used on documentation pages. This is an alternative variable to the main container max width variable. 0 - 0 - 68 - 68 -->
29
+ <dimen name="dsys-docs-width-size">1440px</dimen>
30
+ <dimen name="main-content-stage-size">1024px</dimen><!-- This variable is used as a max width size for content blocks. For mobile devices this var references the DSysDocsWidthSize var 320 - 750 - 962 - 1024 -->
31
+ <dimen name="foundations-banner-height-size">140px</dimen><!-- This variable is used on documentation pages that have an artistic banner at the top of the page that is related to the foundation topic on the page. 80 - 80 -80 - 140 -->
32
+ <dimen name="ds-caption-stack-space0-5x">8px</dimen><!-- This variable is used in documentation pages that have small caption or lables along with a UI component documented. 4 - 4 - 6 - 8 -->
33
+ <dimen name="ds-caption-stack-space1x">16px</dimen>
34
+ <dimen name="1column-mobile">656px</dimen><!-- This variable is used only for this design system's component tests. -->
35
+ <dimen name="thin-banner-vertical-height-size">186px</dimen><!-- This variable is currently used on a thin gallery that appears on desktop websites with petbook and other "books" content. Its height changes to a large height on mobile sites. 558 - 558 - 558 - 186 -->
36
+ <string name="specs-font-family">Gotham</string><!-- This variable is used only for texts and labels that form part of this design system's documentation. -->
37
+ <dimen name="doc-header-height-size">180px</dimen><!-- This variable is used on documentation headers that contain info about platfroms and component names. 144 - 144 - 160 - 180 -->
38
+ <dimen name="menu-item-space">8px</dimen>
39
+ <dimen name="menu-item-font-size">15px</dimen><!-- This variable is used on the menu link lane and on the mobile side menu drawer. -->
40
+ <dimen name="menu-item-util-font-size">12px</dimen>
41
+ <dimen name="menu-item-util-stack-space">10px</dimen>
42
+ <dimen name="menu-link-lane-height-size">48px</dimen>
43
+ <dimen name="menu-utillink-item-height-size">48px</dimen>
44
+ <dimen name="menu-link-item-inline-space">4px</dimen>
45
+ <dimen name="menu-logo-default-size">148px</dimen>
46
+ <dimen name="menu-logo-scrolled-size">56px</dimen>
47
+ <dimen name="menu-special-navi-item-height-size">56px</dimen>
48
+ <dimen name="sub-nav-bar-height-size">42px</dimen>
49
+ <dimen name="menu-utility-links-container-height-size">100px</dimen>
50
+ <dimen name="menu-top-stack-space">12px</dimen>
51
+ <dimen name="menu-left-inline-space">16px</dimen>
52
+ <dimen name="menu-utility-links-gap-space">32px</dimen>
53
+ <dimen name="menu-right-inline-space">16px</dimen>
54
+ <dimen name="menu-bottom-stack-space">0px</dimen>
55
+ <dimen name="menu-utility-links-divider-height-size">48px</dimen>
56
+ <color name="menu-shadow-visibility">#00000000</color><!-- This color type variables are only in this semantic collection for making subtle shadow effects change visibility across device sizes. Shadow alpha: 10 - 10 - 10 - 0 -->
57
+ <color name="hey-input-shadow-visibility">#0000001a</color><!-- This color type variables are only in this semantic collection for making subtle shadow effects change visibility across device sizes. Shadow alpha: 0 - 0 - 0 - 10 -->
58
+ <dimen name="app-topbar-title-font-size">14px</dimen>
59
+ <dimen name="app-topbar-stage-title-height">17px</dimen>
60
+ <dimen name="i-osapp-top-bar-height-size">48px</dimen>
61
+ <dimen name="i-osapp-top-bar-left-inline-space">19px</dimen>
62
+ <dimen name="i-osapp-top-bar-right-inline-space">19px</dimen>
63
+ <dimen name="teaser-title-inline-left-space">0px</dimen>
64
+ <dimen name="teaser-title-stack-space">6px</dimen>
65
+ <dimen name="m-qteaser-headline-font-size">40px</dimen><!-- XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 // LG-headline3FontSize:40 -->
66
+ <string name="m-qteaser-headline-font-weight">700</string>
67
+ <dimen name="m-qteaser-headline-line-height">40px</dimen>
68
+ <dimen name="mq-teaser-title-inline-space">8px</dimen>
69
+ <dimen name="a-teaser-kicker-font-size">24px</dimen><!-- 16 - 16 - 22 - 24 This variable references the semantic variables kicker3fontsize and kicker2fontsize. At the 600px breakpoint smaller devices use the kicker3 variable -->
70
+ <dimen name="a-teaser-headline-font-size">64px</dimen><!-- This variable references the semantic variables headline3 (XS&SM) and headline2 (MD&LG). 28 - 28 - 48 - 64 -->
71
+ <dimen name="a-teaser-kicker-line-height">24px</dimen>
72
+ <dimen name="a-teaser-headline-line-height">64px</dimen>
73
+ <dimen name="a-teaser-title-inline-space">12px</dimen>
74
+ <dimen name="teaser-title-gap-space">4px</dimen>
75
+ <dimen name="std-teaser-image-title-gap-space">6px</dimen>
76
+ <dimen name="std-teaser-badges-margin-space">8px</dimen><!-- This variable is used for creating space around the outside of a subscription badge or video icon badge. -->
77
+ <dimen name="std-teaser-kicker-headline-stack-space">2px</dimen><!-- 2 | 2 | 2 | 2 - This variable is used on the standard teaser vertical spacing between the kicker and the headline. It references the semantic variable stackSpaceConst3XS -->
78
+ <dimen name="teaser-kicker-bg-inline-space">6px</dimen>
79
+ <dimen name="teaser-kicker-bg-stack-space">2px</dimen>
80
+ <dimen name="quad-headline-font-size">100px</dimen><!-- This component level variable is used on the quad teaser headline. It references the semantic level variable headline1. 48 - 48 - 72 - 100 -->
81
+ <dimen name="quad-kicker-font-size">24px</dimen>
82
+ <dimen name="quad-headline-line-height">100px</dimen>
83
+ <dimen name="q-teaser-title-inline-space">12px</dimen>
84
+ <dimen name="teaser-badges-margin-space">8px</dimen><!-- This variable is used for creating space around the outside of a subscription badge or video icon badge. -->
85
+ <dimen name="teaser-badges-height-size-lg">40px</dimen><!-- This token is for controling the height of badges that are inside of teasers. 32 - 32 - 32 - 40 -->
86
+ <dimen name="teaser-title-bottom-stack-space">16px</dimen>
87
+ <dimen name="teaser-badges-height-size-sm">32px</dimen>
88
+ <dimen name="bild-play-teaser-width-size">193px</dimen>
89
+ <dimen name="teaser-layout-grid-space">16px</dimen>
90
+ <dimen name="super-ateaser-title-inline-space">16px</dimen><!-- 16 - 16 - 16 - 16 -->
91
+ <dimen name="b-teaser-title-inline-space">8px</dimen>
92
+ <dimen name="table-column-width-size1x">140px</dimen>
93
+ <dimen name="table-column-width-size2x">220px</dimen>
94
+ <dimen name="table-column-width-size0-5x">72px</dimen>
95
+ <dimen name="table-column-width-size1-5x">180px</dimen>
96
+ <dimen name="table-column-width-size2-5x">240px</dimen>
97
+ <dimen name="table-column-width-size0-75x">100px</dimen>
98
+ <dimen name="table-column-width-size3x">280px</dimen>
99
+ <dimen name="table-item-max-width-size">224px</dimen>
100
+ <dimen name="separator-thickness-size">2px</dimen>
101
+ <dimen name="avatar-label-font-size">18px</dimen><!-- This variable is used on avatar names in article pages. Bild: 16 - 16 - 16 - 18; SpoBi&Ads: 13 - 13 - 13 - 15 -->
102
+ <dimen name="avatar-article-size">48px</dimen><!-- This variable is used for setting the size of avatar images in article pages. It references the sizeConstMD variable from the "generic" semantic collection. Its value is 48 across devices. -->
103
+ <dimen name="avatar-author-page-size">130px</dimen><!-- 96 - 96 - 130 - 130 This variable is used for controlling the size of the avatar image on author pages. -->
104
+ <string name="avatar-font-family">Gotham XNarrow</string><!-- This variable is used in avatar text styles. It receives values from the Brand Tokens Collection. Bild: GothamXNarrow; SpoBi: Inter; Ads: LucidaGrande -->
105
+ <dimen name="avatar-label-line-height">23px</dimen><!-- This variable is used for controlling the line height of avatar texts. Its values influence the stacking space between avatar texts. 21 - 21 - 21 - 23 -->
106
+ <dimen name="avatar-lane-gap-space">24px</dimen><!-- This variable is used for setting the inline space between multiple avatars that are horizontally placed in a lane when an article has multiple authors. 16 - 16 - 24 - 24 -->
107
+ <string name="app-avatar-font-family">Gotham</string><!-- This variable is used for setting the font of avatars on iOS and Android platforms. This is subject to review. -->
108
+ <dimen name="button-label-font-size">15px</dimen>
109
+ <dimen name="button-inline-space">16px</dimen>
110
+ <dimen name="partner-link-button-label-font-size">18px</dimen><!-- Use this variable for controlling the font size of partner buttons. 16 - 16 - 16 - 18 -->
111
+ <dimen name="partner-link-button-label-height-size">48px</dimen>
112
+ <dimen name="button-border-width-size">2px</dimen>
113
+ <dimen name="button-content-min-height-size">24px</dimen><!-- This fixed height variable ensures that the button maintains a consistent height, even when the icon is not active. -->
114
+ <dimen name="partner-link-button-inline-space">8px</dimen>
115
+ <dimen name="button-label-line-height">15px</dimen>
116
+ <dimen name="button-content-gap-space">6px</dimen>
117
+ <dimen name="button-stack-space">6px</dimen>
118
+ <dimen name="button-border-radius">8px</dimen>
119
+ <dimen name="news-ticker-time-font-size">18px</dimen><!-- similar to kicker3 values - 16 - 16 - 16 - 18 -->
120
+ <string name="news-ticker-time-font-weight">700</string>
121
+ <string name="news-ticker-time-font-family">Gotham XNarrow</string>
122
+ <dimen name="news-ticker-time-line-height">23.399999618530273px</dimen><!-- Figma currently does not allow for percentages in Line Height variables. The values in this token are the result of multiplying the font size by the line height variable defined on the Bild home css -> newsTickerTime line height: 1.3. Line height for this component does not change across devices. -->
123
+ <dimen name="news-ticker-content-stack-space">4px</dimen>
124
+ <dimen name="news-ticker-kicker-inner-stack-space">2px</dimen>
125
+ <dimen name="news-ticker-titles-inline-space">30px</dimen>
126
+ <dimen name="news-ticker-badges-inline-space">16px</dimen>
127
+ <dimen name="news-ticker-time-kicker-stack-space">6px</dimen>
128
+ <dimen name="news-ticker-entries-stack-space">22px</dimen>
129
+ <dimen name="news-ticker-kicker-inner-inline-space">4px</dimen>
130
+ <dimen name="news-ticker-skeleton-bottom-space">0px</dimen>
131
+ <dimen name="news-ticker-red-dot-size">16px</dimen>
132
+ <dimen name="news-ticker-entries-left-inline-space">22px</dimen>
133
+ <dimen name="news-ticker-line-inline-space">8px</dimen>
134
+ <dimen name="news-ticker-app-card-height-size">150px</dimen>
135
+ <dimen name="news-ticker-app-card-width-size">300px</dimen>
136
+ <string name="live-tickerheadline-font-weight">600</string>
137
+ <dimen name="live-ticker-headlines-font-size">32px</dimen><!-- This variable is used for the font size of live ticker headlines. 22 - 22 - 32 - 32 -->
138
+ <string name="time-stamp-font-family">Gotham XNarrow</string>
139
+ <dimen name="live-ticker-time-stamp-font-size">16px</dimen><!-- This variable is used for the live ticker time stamp font size. 14 - 14 - 16 - 16 -->
140
+ <dimen name="live-ticker-time-headline-stack-space">4px</dimen>
141
+ <dimen name="live-ticker-slider-item-width-max-size">537px</dimen>
142
+ <dimen name="live-ticker-app-card-height-size">128px</dimen>
143
+ <dimen name="live-ticker-app-card-width-size">300px</dimen>
144
+ <dimen name="video-time-badge-corner-size">2px</dimen><!-- This variable is used on video player badges that display a red play icon on top of a white square next to a time stamp. This variable references the borderRadiusXS. Constant value of 2 across device sizes. -->
145
+ <dimen name="video-time-badge-font-size">18px</dimen><!-- 16 - 16 - 18 - 18 -- This variable is used to control the videoTimeBadge text style's font size parameter. The typography style that uses this variable is the videoTimeBadge style. The badge that uses this variable appears on the upper right corner of horizontal videos. -->
146
+ <dimen name="video-time-badge-size">40px</dimen><!-- 24 - 24 - 32 - 40 - This variable is used on horizontal video badges that contain a red play icon on top of a white square next to a timestamp. -->
147
+ <dimen name="video-red-play-icon-width-size">14px</dimen>
148
+ <dimen name="video-red-play-icon-height-size">18px</dimen><!-- This variable is used for changing the red play icon inside the white square. -->
149
+ <dimen name="video-badge-time-line-height">23.799999237060547px</dimen>
150
+ <dimen name="video-skeleton-container-height">464px</dimen>
151
+ <dimen name="video-frame-inline-space">16px</dimen>
152
+ <dimen name="vertical-video-mock-headline-font-size">32px</dimen>
153
+ <dimen name="video-ad-badge-font-size">16px</dimen><!-- 14 - 14 - 16 - 16 -- This variable is used in the videoAdBadge font size parameter. -->
154
+ <dimen name="gallery-pagination-item-height-size">4px</dimen>
155
+ <dimen name="gallery-pagination-container-web-inline-space">12px</dimen><!-- 8 - 8 - 12 - 12 - this component level variable references the inlineSpaceConst semantic variables; SM for smaller devices, MD for larger devices -->
156
+ <dimen name="gallery-pagination-container-stack-space">16px</dimen><!-- 12 - 12 - 16 - 16 - this component level variable references the semantic -->
157
+ <dimen name="gallery-pagination-container-app-inline-space">12px</dimen>
158
+ <dimen name="scroll-bar-thickness-size">8px</dimen>
159
+ <dimen name="drop-down-border-radius">4px</dimen>
160
+ <dimen name="drop-down-item-stack-space">8px</dimen>
161
+ <dimen name="drop-down-item-inline-space">16px</dimen>
162
+ <dimen name="input-field-stack-space">6px</dimen>
163
+ <dimen name="input-field-inline-space">16px</dimen>
164
+ <dimen name="input-field-mini-label-inline-space">4px</dimen>
165
+ <dimen name="input-field-font-size">16px</dimen><!-- This variable controls texts inside of input fields such as dropdowns, date input and other text inputs that appear in forms for example. compact 15 - default 17 - spacious 19 -->
166
+ <dimen name="input-field-imessage-inline-space">16px</dimen>
167
+ <dimen name="input-field-height-size">36px</dimen>
168
+ <dimen name="hey-input-container-inline-space">16px</dimen>
169
+ <dimen name="input-field-message-gap-space">4px</dimen>
170
+ <string name="input-field-font-family">Gotham XNarrow</string>
171
+ <dimen name="breadcrumb-font-size">12px</dimen><!-- 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices. -->
172
+ <string name="breadcrumb-font-family">Gotham XNarrow</string>
173
+ <dimen name="breadcrumb-arrow-left-inline-space1">3px</dimen>
174
+ <dimen name="breadcrumb-arrow-right-inline-space2">5px</dimen>
175
+ <dimen name="breadcrumb-inline-space">0px</dimen>
176
+ <dimen name="breadcrumb-line-height">12px</dimen><!-- 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices. -->
177
+ <string name="breadcrumb-font-weight">700</string>
178
+ <dimen name="breadcrumb-stack-space">16px</dimen>
179
+ <dimen name="icon-size">24px</dimen>
180
+ <dimen name="icon-size-embedd-media">40px</dimen>
181
+ <dimen name="badges-inner-stack-space">2px</dimen><!-- This space variable is used for creating the top and bottom space between a badge's text label and the surface that the text label is on top of. -->
182
+ <dimen name="badges-inner-inline-space">4px</dimen><!-- This space variable is used for creating the left and right space between a badge's text label and the badge background surface that the text label is on top of. -->
183
+ <dimen name="ad-label-badge-height-size">30px</dimen><!-- 30 - 30 - 30 - 30 - This variable is used on the Advert rectangular badge that is found above an ad containers. -->
184
+ <dimen name="section-title-inner-stack-bottom-space">12px</dimen>
185
+ <dimen name="section-title-height-size">40px</dimen>
186
+ <dimen name="section-title-arrow-inline-space">5px</dimen><!-- This variable is used on large title headings that are h2 elements in html and indicate a new section in the user interface. This space changes when a user hovers over the large title. -->
187
+ <dimen name="section-title-arrow-inline-space-active">8px</dimen><!-- This variable is used for increasing the space between the text and the arrow at the end of the large title text. On mobile devices there is no hover state so this variables values are the same as the default state values. -->
188
+ <dimen name="audio-player-font-size">18px</dimen><!-- This variable is used in the text style dedicated to audio player labels for elapsed time, reproduction speed and short functionality description text. 16 - 16 - 16 - 18 -->
189
+ <dimen name="special-navi-inline-space">32px</dimen>
190
+ <dimen name="chips-font-size">18px</dimen><!-- This variable is used on the chips font size parameter of the chips text style. The font size changes only for the change between larger device widths and any device smaller than the largest. 16 - 16 -16 - 18 -->
191
+ <dimen name="chips-inline-space">12px</dimen>
192
+ <dimen name="chips-stack-space">8px</dimen>
193
+ <dimen name="search-result-badge-height-size">18px</dimen>
194
+ <dimen name="radio-selector-size">20px</dimen>
195
+ <dimen name="radio-selector-dot-active-size">12px</dimen>
196
+ <dimen name="headlines-skeleton-image-placeholder-max-width">160px</dimen>
197
+ <dimen name="article-skeleton-image-inline-space">48px</dimen>
198
+ <dimen name="article-skeleton-text-inline-space">48px</dimen>
199
+ <dimen name="article-text-skeleton-height-size">720px</dimen>
200
+ <dimen name="video-spinner-size">80px</dimen>
201
+ <dimen name="video-spinner-stroke-size">4px</dimen>
202
+ <dimen name="video-spinner-size0-5x">40px</dimen>
203
+ <dimen name="breaking-news-container-height-size">56px</dimen>
204
+ <dimen name="breaking-news-badge-upper-title-font-size">17px</dimen>
205
+ <dimen name="breaking-news-badge-lower-title-font-size">30px</dimen>
206
+ <dimen name="breaking-news-badge-upper-title-line-height">12px</dimen>
207
+ <dimen name="breaking-news-badge-lower-title-line-height">21px</dimen>
208
+ <dimen name="breaking-news-badge-titels-stack-space">4px</dimen>
209
+ <dimen name="breaking-news-scrolling-text-font-size">21px</dimen>
210
+ <dimen name="breaking-news-scrolling-text-line-height">24px</dimen>
211
+ <dimen name="breaking-news-badge-inline-space">26px</dimen>
212
+ <dimen name="info-element-teaser-badge-height-size">24px</dimen>
213
+ <dimen name="info-element-teaser-image-height-size">133px</dimen>
214
+ <dimen name="info-element-teaser-image-width-size">236px</dimen>
215
+ <dimen name="info-element-teaser-badge-margin-space">8px</dimen>
216
+ <dimen name="podcast-play-button-size">48px</dimen>
217
+ <dimen name="vid-player-bottom-bar-gap-space">16px</dimen>
218
+ <dimen name="audio-player-header-stack-space">56px</dimen>
219
+ <string name="video-time-badge-font-family">Gotham XNarrow</string>
220
+ <dimen name="vid-player-control-button-size">42px</dimen>
221
+ <dimen name="vid-player-control-button-icon-size-hover">28px</dimen>
222
+ <dimen name="vid-player-timecode-font-size">18px</dimen>
223
+ <dimen name="vid-player-timecode-container-min-width-size">58px</dimen>
224
+ <dimen name="vid-player-progress-bar-container-height-size">42px</dimen>
225
+ <dimen name="vid-player-unmute-button-width-size">220px</dimen>
226
+ <dimen name="tab-label-font-size">16px</dimen><!-- Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data. -->
227
+ <dimen name="ios-tabbar-height-size">49px</dimen>
228
+ <dimen name="android-tabbar-height-size">74px</dimen>
229
+ <dimen name="tab-label-font-size-line">16px</dimen><!-- Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data. -->
230
+ <dimen name="apps-tabs-label-font-size">16px</dimen><!-- Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data. -->
231
+ <dimen name="apps-tabs-label-line-height">23.399999618530273px</dimen><!-- Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data. -->
232
+ <dimen name="top-bar-tab-item-height-size">44px</dimen>
233
+ <dimen name="mobile-menu-drawer-stack-space">20px</dimen>
234
+ <dimen name="mobile-menu-drawer-left-inline-space">20px</dimen>
235
+ <dimen name="mobile-menu-drawer-right-inline-space">16px</dimen>
236
+ <dimen name="mobile-menu-drawer-max-width-size">400px</dimen>
237
+ <dimen name="quote-container-inline-space">28px</dimen>
238
+ <dimen name="quote-container-stack-space">32px</dimen>
239
+ <dimen name="quote-quotation-marks-font-size">36px</dimen>
240
+ <dimen name="quote-content-gap-space">48px</dimen>
241
+ <dimen name="gallery-teaser-title-bottom-space">36px</dimen><!-- This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination. -->
242
+ <dimen name="gallery-teaser-app-gap-space">8px</dimen><!-- This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination. -->
243
+ <dimen name="app-epaper-carousel-item-focus-width">240px</dimen>
244
+ <dimen name="app-epaper-carousel-item-default-width">172px</dimen>
245
+ <dimen name="app-epaper-carouse-beilage-item-width">172px</dimen>
246
+ <dimen name="standard-teaser-gallery-teaser-width-web">300px</dimen>
247
+ <dimen name="standard-teaser-gallery-teaser-width-app">464px</dimen>
248
+ <dimen name="slider-progress-bar-idle-height-size">4px</dimen>
249
+ <dimen name="slider-progress-bar-hover-height-size">8px</dimen>
250
+ <dimen name="slider-progress-inactive-height-size">2px</dimen>
251
+ <dimen name="vid-player-progress-bar-height-size">12px</dimen>
252
+ <dimen name="footer-font-size">11px</dimen><!-- This variable is used on footer links that commonly show up at the bottom of pages. The font size parameter remains constant at 11 px across device sizes. -->
253
+ <dimen name="footer-line-height">14px</dimen>
254
+ <string name="footer-font-family">Gotham XNarrow</string>
255
+ <dimen name="footer-font-size-user-offer-pages">18px</dimen>
256
+ <dimen name="footer-line-height-user-offer-pages">26px</dimen>
257
+ <string name="accordion-label-font-family">Gotham XNarrow</string><!-- This variable exists specifically for changing the accordion font family across brands. It is subject to review. Bild: GothamXNarrow, SpoBi: Inter, Ads: LucindaGrande -->
258
+ <dimen name="paywall-container-gap-space">-48px</dimen>
259
+ <dimen name="paywall-header-bottom-stack-space">80px</dimen>
260
+ <dimen name="paywall-card-max-width-size">346px</dimen>
261
+ <dimen name="paywall-card-price-tag-font-size">64px</dimen><!-- This variable is used on the paywall card price tag. 64 constant -->
262
+ <dimen name="paywall-card-price-tag-line-height">64px</dimen>
263
+ <dimen name="paywall-card-price-note-line-height">40px</dimen>
264
+ <dimen name="paywall-card-price-note-font-size">40px</dimen><!-- This variable is used on the paywall card text under the price tag. 40 - 40 - 40 - 40 -->
265
+ <dimen name="app-toggle-item-label-font-size">18px</dimen><!-- This variable is used on labels in list items with toggle switches found in app preferences. 14 - 14 - 16 - 18 -->
266
+ <dimen name="app-toggle-item-label-line-height">18.200000762939453px</dimen><!-- This variable is used on labels in list items with toggle switches found in app preferences. 14.1 - 14.1 - 16.2 - 18.2 -->
267
+ <dimen name="search-result-card-image-width-size">260px</dimen>
268
+ <dimen name="search-result-card-image-height-size-stacked">189px</dimen>
269
+ <dimen name="newsticker-image-card-width-size">206px</dimen>
270
+ <dimen name="datepicker-item-day-width-size">44px</dimen>
271
+ <dimen name="datepicker-item-height-size">44px</dimen>
272
+ <dimen name="datepicker-item-year-width-size">77px</dimen>
273
+ <dimen name="grid-space-resp-lg">32px</dimen><!-- 24-24-32-32 – use for side paddings and gutters in responsive layouts -->
274
+ <dimen name="grid-space-resp-xl">64px</dimen><!-- 48-48-64-64 – use for side paddings and gutters in responsive layouts -->
275
+ <dimen name="grid-space-resp-base">16px</dimen><!-- 12-12-12-16 – use for side paddings and gutters in responsive layouts -->
276
+ <dimen name="grid-space-resp-sm">8px</dimen><!-- 6-6-6-8 – use for side paddings and gutters in responsive layouts -->
277
+ <dimen name="page-inline-space">16px</dimen><!-- 0-0-0-16 – This token is used on the main homepages content container, ensuring full-width layout (no horizontal padding) on mobile and tablet breakpoints. -->
278
+ <dimen name="grid-space-const-lg">16px</dimen><!-- 16-16-16-16 – use for fixed side paddings and gutters -->
279
+ <dimen name="grid-space-const-sm">12px</dimen><!-- 12-12-12-12 – use for fixed side paddings and gutters -->
280
+ <dimen name="layout-guide-grid-colums">12px</dimen><!-- Used to set the column count in Figma Layout guide Grids -->
281
+ <dimen name="section-space-base">48px</dimen><!-- 36-36-48-48 – Use for vertical spacing between sections in a layout. -->
282
+ <dimen name="section-space-lg">96px</dimen><!-- 72-72-96-96 – Use for vertical spacing between sections in a layout -->
283
+ <dimen name="paragraph-end-space">32px</dimen><!-- 16-16-32-32 – Use for spacing after paragraphs in text content -->
284
+ <dimen name="section-space-sm">36px</dimen><!-- 24-24-36-36 – Use for vertical spacing between subsections in a layout -->
285
+ <dimen name="breakpoint-min-width-size">1024px</dimen><!-- 320 - 390 - 600 - 1024 – Defines the minimum width of the main frame for different breakpoints.
286
286
  Apply this token to the main frame of page layouts to simulate realistic minimum widths across responsive viewports. -->
287
- <dimen name="semantic_layout_breakpoints_breakpoint_max_width_size">16384.00dp</dimen><!-- 389 - 599 - 1023 - 1024 – Defines the minimum width of the main frame for different breakpoints.
287
+ <dimen name="breakpoint-max-width-size">1024px</dimen><!-- 389 - 599 - 1023 - 1024 – Defines the minimum width of the main frame for different breakpoints.
288
288
  Apply this token to the main frame of page layouts to simulate realistic maximum widths across responsive viewports. -->
289
- <dimen name="semantic_layout_canvas_height_size_web">12288.00dp</dimen><!-- Common viewport height size based on the selected mode.
289
+ <dimen name="canvas-height-size-web">768px</dimen><!-- Common viewport height size based on the selected mode.
290
290
  Apply this token to the main frame of page layouts to simulate realistic vertical space. -->
291
- <dimen name="semantic_layout_content_width_content_max_width_medium">11200.00dp</dimen><!-- Use for content containers that should not fill the full page width on larger viewports. This is commonly used on article body text content and other elements in an article page. -->
292
- <dimen name="semantic_layout_content_width_content_max_width_full">16384.00dp</dimen><!-- Use for content containers that should fill the full width of the page -->
293
- <dimen name="semantic_layout_canvas_width_size_web">16384.00dp</dimen><!-- Common viewport width size based on the selected breakpoint.
291
+ <dimen name="content-max-width-medium">700px</dimen><!-- Use for content containers that should not fill the full page width on larger viewports. This is commonly used on article body text content and other elements in an article page. -->
292
+ <dimen name="content-max-width-full">1024px</dimen><!-- Use for content containers that should fill the full width of the page -->
293
+ <dimen name="canvas-width-size-web">1024px</dimen><!-- Common viewport width size based on the selected breakpoint.
294
294
  Apply this token to the main frame of page layouts. -->
295
- <dimen name="semantic_layout_canvas_width_size_app">19104.00dp</dimen><!-- Common viewport width size based on the selected breakpoint.
295
+ <dimen name="canvas-width-size-app">1194px</dimen><!-- Common viewport width size based on the selected breakpoint.
296
296
  Apply this token to the main frame of page layouts. -->
297
- <dimen name="semantic_layout_canvas_height_size_app">13344.00dp</dimen><!-- Common viewport height size based on the selected mode.
297
+ <dimen name="canvas-height-size-app">834px</dimen><!-- Common viewport height size based on the selected mode.
298
298
  Apply this token to the main frame of page layouts to simulate realistic vertical space. -->
299
- <dimen name="semantic_typography_font_size_title_title1_font_size">448.00dp</dimen><!-- 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) -->
300
- <dimen name="semantic_typography_font_size_title_title2_font_size">320.00dp</dimen><!-- 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) -->
301
- <dimen name="semantic_typography_font_size_display_display1_font_size">1920.00dp</dimen><!-- This variable is used on the font size parameter for the display1 text style. 40 - 40 - 72 - 120 -->
302
- <dimen name="semantic_typography_font_size_display_display2_font_size">1024.00dp</dimen><!-- This variable is used for the font size parameter of the Display2 text style. 36 - 36 - 42 - 64 -->
303
- <dimen name="semantic_typography_font_size_display_display3_font_size">640.00dp</dimen><!-- This variable is used on the display3 font size parameter of the display3 text style. 28 - 28 - 32 - 40 -->
304
- <dimen name="semantic_typography_font_size_headline_headline1_font_size">1600.00dp</dimen><!-- This token is used for the headline1 text style's font size parameter. 48 - 48 - 72 - 100 -->
305
- <dimen name="semantic_typography_font_size_headline_headline2_font_size">1024.00dp</dimen><!-- This token is used on the headline2 text style's font size parameter. 40 - 40 - 48 - 64 -->
306
- <dimen name="semantic_typography_font_size_headline_headline3_font_size">640.00dp</dimen><!-- This token is used on the headline3 text style's font size parameter. 28 - 28 - 36 - 40 -->
307
- <dimen name="semantic_typography_font_size_headline_headline4_font_size">512.00dp</dimen><!-- This token controls the headline4 text style's font size parameter: 22 - 22 - 26 - 32 -->
308
- <dimen name="semantic_typography_font_size_body_body_font_size">336.00dp</dimen><!-- This variable is used on the body text style's font size parameter. It remains constant at 21. -->
309
- <dimen name="semantic_typography_font_size_label_label3_font_size">192.00dp</dimen><!-- This token is used in the label3 text style's font size parameter. Its value remains constant at 12 across device sizes. -->
310
- <dimen name="semantic_typography_font_size_label_label2_font_size">240.00dp</dimen><!-- This variable controls the label2 text style's font size parameter. Its value remains constant at 15. -->
311
- <dimen name="semantic_typography_font_size_label_label1_font_size">272.00dp</dimen><!-- This token is used in the label1 text style font size parameter. Its value remains constant at 17 across device sizes. -->
312
- <dimen name="semantic_typography_font_size_label_label1_font_size_responsive">272.00dp</dimen><!-- 10 - 10 - 15 - 17 Use this label font size when you want your label's font size to change across device sizes. -->
313
- <dimen name="semantic_typography_font_size_label_label4_font_size">128.00dp</dimen><!-- This token is used in the font size parameter of the label4 text style. The value remains constant at 8. -->
314
- <dimen name="semantic_typography_font_size_callout_callout1_font_size">352.00dp</dimen><!-- This token is used for the font size parameter of the callout text style. 18 - 18 - 22 - 22 -->
315
- <dimen name="semantic_typography_font_size_footnote_footnote1_font_size">288.00dp</dimen><!-- This token is used on the footnote text style font size parameter. 16 - 16 - 16 - 18 -->
316
- <dimen name="semantic_typography_font_size_footnote_footnote2_font_size">256.00dp</dimen><!-- This token is used in the font size parameter of the footnote2 text style. 12 - 12 - 12 - 16 -->
317
- <dimen name="semantic_typography_font_size_kicker_kicker1_font_size">480.00dp</dimen><!-- Values come from NMT Figma File 01_Foundation; in online CSS this is kicker0. 18 - 18 - 22 - 30 - This variable does not exist yet in online css. Online css is called kicker0 for smallest font size. -->
318
- <dimen name="semantic_typography_font_size_kicker_kicker2_font_size">384.00dp</dimen><!-- Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. This DS uses 1 to 4 following html convention of h1, h2, h3, etc. 18 - 18 - 22 - 24 -->
319
- <dimen name="semantic_typography_font_size_kicker_kicker3_font_size">320.00dp</dimen><!-- Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 16 - 16 - 18 - 20 -->
320
- <dimen name="semantic_typography_font_size_kicker_kicker4_font_size">256.00dp</dimen><!-- Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 14 - 14 - 16 - 16 -->
321
- <dimen name="semantic_typography_font_size_subheadline_subheadline1_font_size">576.00dp</dimen><!-- This token controls the subheadline1 font size parameter. 24 - 24 - 32 - 36 -->
322
- <dimen name="semantic_typography_font_size_quote_quote_font_size">320.00dp</dimen><!-- 16 - 16 - 18 - 20 -- This variable is used for controlling the font size of the quote text style. -->
323
- <string name="semantic_typography_font_family_body_font_family">Gotham XNarrow</string><!-- This variable references the bodyFontFamily variable from the branding collection. -->
324
- <string name="semantic_typography_font_family_callout_font_family">Gotham</string>
325
- <string name="semantic_typography_font_family_headline_font_family">Gotham Condensed</string>
326
- <string name="semantic_typography_font_family_footnote_font_family">Gotham XNarrow</string>
327
- <string name="semantic_typography_font_family_label_font_family">Gotham XNarrow</string>
328
- <string name="semantic_typography_font_family_kicker_font_family">Gotham XNarrow</string>
329
- <string name="semantic_typography_font_family_subheadline_font_family">Gotham Condensed</string>
330
- <string name="semantic_typography_font_family_title_font_family">Gotham</string>
331
- <string name="semantic_typography_font_family_quote_font_family">Gotham</string>
332
- <string name="semantic_typography_font_family_display_font_family">Gotham</string>
333
- <string name="semantic_typography_font_weight_callout_callout_font_weight">800</string>
334
- <string name="semantic_typography_font_weight_label_label_font_weight_bold">700</string>
335
- <string name="semantic_typography_font_weight_label_label_font_weight_book">400</string>
336
- <string name="semantic_typography_font_weight_body_body_font_weight_book">400</string>
337
- <string name="semantic_typography_font_weight_body_body_font_weight_bold">700</string>
338
- <string name="semantic_typography_font_weight_kicker_kicker_font_weight">700</string>
339
- <string name="semantic_typography_font_weight_kicker_kicker_font_weight_st">700</string>
340
- <string name="semantic_typography_font_weight_subheadline_subheadline_font_weight">700</string>
341
- <string name="semantic_typography_font_weight_headline_headline1_font_weight">700</string>
342
- <string name="semantic_typography_font_weight_headline_headline2_font_weight">700</string>
343
- <string name="semantic_typography_font_weight_headline_headline3_font_weight">700</string>
344
- <string name="semantic_typography_font_weight_headline_headline4_font_weight">600</string>
345
- <string name="semantic_typography_font_weight_headline_headline1_font_weight_st">700</string><!-- This variable is a string type variable for controlling not only headline font weight but also the italic style for Sport Bild headlines. -->
346
- <string name="semantic_typography_font_weight_title_title_font_weight">800</string>
347
- <string name="semantic_typography_font_weight_display_display_font_weight">800</string>
348
- <string name="semantic_typography_font_weight_quote_quote_font_weight">800</string>
349
- <string name="semantic_typography_font_weight_footnote_footnote_font_weight_book">400</string>
350
- <string name="semantic_typography_font_weight_footnote_footnote_font_weight_bold">700</string>
351
- <dimen name="semantic_typography_line_height_body_body_line_height">512.00dp</dimen><!-- Figma's font line height currently does not allow for multipliers as is used on current website css var(--body-line-height) -->
352
- <dimen name="semantic_typography_line_height_kicker_kicker4_line_height">256.00dp</dimen>
353
- <dimen name="semantic_typography_line_height_kicker_kicker3_line_height">320.00dp</dimen>
354
- <dimen name="semantic_typography_line_height_kicker_kicker2_line_height">384.00dp</dimen>
355
- <dimen name="semantic_typography_line_height_kicker_kicker1_line_height">480.00dp</dimen>
356
- <dimen name="semantic_typography_line_height_label_label3_line_height">230.40dp</dimen>
357
- <dimen name="semantic_typography_line_height_label_label1_line_height">272.00dp</dimen><!-- This variable is used in the label1 text style's line height parameter. It references branding variables for brand specific line heights. -->
358
- <dimen name="semantic_typography_line_height_label_label1_responsive_line_height">272.00dp</dimen>
359
- <dimen name="semantic_typography_line_height_label_label2_line_height">256.00dp</dimen>
360
- <dimen name="semantic_typography_line_height_label_label4_line_height">160.00dp</dimen>
361
- <dimen name="semantic_typography_line_height_display_display1_line_height">1920.00dp</dimen>
362
- <dimen name="semantic_typography_line_height_display_display2_line_height">1024.00dp</dimen>
363
- <dimen name="semantic_typography_line_height_display_display3_line_height">640.00dp</dimen>
364
- <dimen name="semantic_typography_line_height_title_title1_line_height">448.00dp</dimen>
365
- <dimen name="semantic_typography_line_height_title_title2_line_height">352.00dp</dimen><!-- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) -->
366
- <dimen name="semantic_typography_line_height_quote_quote_line_height">352.00dp</dimen><!-- This variable is used in the quote text style line height parameter. -->
367
- <dimen name="semantic_typography_line_height_footnote_footnote1_line_height">368.00dp</dimen>
368
- <dimen name="semantic_typography_line_height_footnote_footnote2_line_height">336.00dp</dimen>
369
- <dimen name="semantic_typography_line_height_headline_headline1_line_height">1600.00dp</dimen>
370
- <dimen name="semantic_typography_line_height_headline_headline2_line_height">1024.00dp</dimen>
371
- <dimen name="semantic_typography_line_height_headline_headline3_line_height">640.00dp</dimen>
372
- <dimen name="semantic_typography_line_height_headline_headline4_line_height">480.00dp</dimen>
373
- <dimen name="semantic_typography_line_height_callout_callout_line_height">352.00dp</dimen>
374
- <dimen name="semantic_typography_line_height_subheadline_subheadline1_line_height">576.00dp</dimen>
375
- <dimen name="semantic_typography_letter_spacing_letter_spacing_positive_sm">8.00dp</dimen><!-- 0.5 | 0.5 | 0.5 | 0.5 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. -->
376
- <dimen name="semantic_typography_letter_spacing_letter_spacing_positive_lg">48.00dp</dimen><!-- 2 | 2 | 2 | 3 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. -->
377
- <dimen name="semantic_typography_letter_spacing_letter_spacing_positive_md">16.00dp</dimen><!-- 1 | 1 | 1 | 1 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. -->
378
- <dimen name="semantic_typography_letter_spacing_letter_spacing_none">0.00dp</dimen><!-- 0 | 0 | 0 | 0 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. -->
379
- <dimen name="semantic_typography_letter_spacing_letter_spacing_negative_sm">-4.00dp</dimen><!-- -0.5 | -0.5 | -0.25 | -0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. -->
380
- <dimen name="semantic_typography_letter_spacing_letter_spacing_negative_md">-16.00dp</dimen><!-- -1 | -1 | -1 | -1 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. -->
381
- <dimen name="semantic_typography_letter_spacing_letter_spacing_negative_lg">-48.00dp</dimen><!-- -2 | -2 | -2 | -3 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. -->
382
- <dimen name="semantic_typography_letter_spacing_letter_spacing_negative_xs">-4.00dp</dimen><!-- -0.25 | -0.25 | -0.25 | -0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. This letter spacing was only found in large titles on iOS mobile app large title component. -->
383
- <dimen name="semantic_typography_letter_spacing_letter_spacing_positive_xs">4.00dp</dimen><!-- 0.25 | 0.25 | 0.25 | 0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. -->
384
- <dimen name="semantic_typography_letter_spacing_display_display1_letter_spacing">-32.00dp</dimen><!-- -0.5 | -0.5 | -1 | -2 | This variable is used for the letter spacing parameter of the display1 text style. On smaller devices the value is smaller than on larger devices. On desktop devices the letter spacing is further reduced for making the text style more compact. -->
385
- <dimen name="semantic_typography_letter_spacing_display_display2_letter_spacing">-16.00dp</dimen><!-- -0.5 | -0.5 | -1 | -1 | This variable is used for the letter spacing parameter of the display2 text style. On smaller devices the value is smaller than on larger devices. -->
386
- <dimen name="semantic_typography_letter_spacing_display_display3_letter_spacing">-16.00dp</dimen><!-- -0.5 | -0.5 | -1 | -1 | This variable is used for the letter spacing parameter of the display3 text style. On smaller devices the value is smaller than on larger devices. -->
387
- <dimen name="semantic_border_border_radius_border_radius_xs">32.00dp</dimen><!-- 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges. -->
388
- <dimen name="semantic_border_border_radius_border_radius_md">128.00dp</dimen><!-- 8-8-8-8 – Standard radius for buttons, chips, input fields, and medium-sized interactive elements. -->
389
- <dimen name="semantic_border_border_radius_border_radius_sm">64.00dp</dimen><!-- 4-4-4-4 – use for corner rounding on compact components like checkboxes or small input controls. -->
390
- <dimen name="semantic_border_border_radius_border_radius_xl">384.00dp</dimen><!-- 24-24-24-24 – use for corner rounding on larger cards, overlays, dialogs, and other container components. -->
391
- <dimen name="semantic_border_border_radius_border_radius_lg">256.00dp</dimen><!-- 16-16-16-16 – use for corner rounding on small cards, overlays, and modal surfaces. -->
392
- <dimen name="semantic_border_border_radius_border_radius_none">0.00dp</dimen><!-- 0-0-0-0 – no corner rounding. Used as default for flat layouts, content modules, images, and teaser elements. -->
393
- <dimen name="semantic_border_border_radius_border_radius_full">159984.00dp</dimen><!-- creates fully rounded shapes, typically used for circular elements like avatars. -->
394
- <dimen name="semantic_border_border_width_border_width_thin">16.00dp</dimen><!-- 1-1-1-1 – use for subtle outlines and dividers -->
395
- <dimen name="semantic_border_border_width_border_width_thick">32.00dp</dimen><!-- 2-2-2-2 – use for stronger outlines on form elements (inputs), buttons (outline variants), and interaction states (focus, hover, active) -->
396
- <dimen name="semantic_border_border_width_border_width_hairline">5.28dp</dimen><!-- 0.33 -0.33 -0.33 -0.33 – primarily used in mobile app interfaces. Optimized for high-density displays to create subtle dividers and outlines without visual overload. -->
397
- <string name="semantic_visibility_boolean_visilble_mobile_only">false</string><!-- Use for showing elements on mobile viewport sizes only -->
398
- <string name="semantic_visibility_boolean_visilble_desktop_only">true</string><!-- Use for showing elements on desktop viewport sizes only -->
399
- <string name="semantic_visibility_boolean_visilble_above600px">true</string><!-- Use for showing elements on viewport sizes above 600 px -->
400
- <string name="semantic_visibility_boolean_visilble_below600px">false</string><!-- Use for showing elements on viewport sizes below 600 px -->
401
- <string name="semantic_visibility_boolean_hide_on_mobile">true</string><!-- Use for hiding elements on mobile viewport sizes -->
402
- <string name="semantic_visibility_boolean_visilble_tablet_only">false</string><!-- Use for showing elements on tablet viewport sizes only -->
403
- <string name="semantic_visibility_boolean_hide_on_desktop">false</string><!-- Use for hiding elements on desktop viewport sizes only -->
404
- <string name="semantic_visibility_variant_switch_change_on_lg">lg</string>
405
- <string name="semantic_visibility_variant_switch_change_on_md">md/lg</string><!-- This variable is used for controlling size changes across device sizes on some components such as the vertical newsticker cards and the search results cards. Both have cards that change layouts at different breakpoints. -->
406
- <string name="semantic_visibility_variant_switch_bp_specific_web">lg</string>
407
- <string name="semantic_visibility_variant_switch_bp_specific_app">regular</string>
408
- <dimen name="semantic_space_inline_responsive_inline_space_resp_sm">256.00dp</dimen><!-- 8-8-12-16 – use for horizontal (left/right) padding of UI elements that scales across breakpoints -->
409
- <dimen name="semantic_space_inline_responsive_inline_space_resp_md">384.00dp</dimen><!-- 12-12-16-24 use for horizontal (left/right) padding of UI elements that scales across breakpoints -->
410
- <dimen name="semantic_space_inline_responsive_inline_space_resp_lg">512.00dp</dimen><!-- 16-16-24-32 – use for horizontal (left/right) padding of UI elements that scales across breakpoints -->
411
- <dimen name="semantic_space_inline_responsive_inline_space_resp2_xl">1024.00dp</dimen><!-- 32-32-48-64 – use for horizontal (left/right) padding of UI elements that scales across breakpoints -->
412
- <dimen name="semantic_space_inline_responsive_inline_space_resp_xl">640.00dp</dimen><!-- 24-24-32-40 – use for horizontal (left/right) padding of UI elements that scales across breakpoints -->
413
- <dimen name="semantic_space_inline_constant_inline_space_const_sm">128.00dp</dimen><!-- 8-8-8-8 – Use for fixed horizontal (left/right) padding of UI elements -->
414
- <dimen name="semantic_space_inline_constant_inline_space_const_md">192.00dp</dimen><!-- 12-12-12-12 – Use for fixed horizontal (left/right) padding of UI elements -->
415
- <dimen name="semantic_space_inline_constant_inline_space_const_lg">256.00dp</dimen><!-- 16-16-16-16 – Use for fixed horizontal (left/right) padding of UI elements -->
416
- <dimen name="semantic_space_inline_constant_inline_space_const2_xl">512.00dp</dimen><!-- 32-32-32-32 – Use for fixed horizontal (left/right) padding of UI elements -->
417
- <dimen name="semantic_space_inline_constant_inline_space_const_xl">384.00dp</dimen><!-- 24-24-24-24 – Use for fixed horizontal (left/right) padding of UI elements -->
418
- <dimen name="semantic_space_inline_constant_inline_space_const_xs">96.00dp</dimen><!-- 6-6-6-6 – Use for fixed horizontal (left/right) padding of UI elements -->
419
- <dimen name="semantic_space_inline_constant_inline_space_const3_xs">32.00dp</dimen><!-- 2-2-2-2 – Use for fixed horizontal (left/right) padding of UI elements -->
420
- <dimen name="semantic_space_inline_constant_inline_space_const2_xs">64.00dp</dimen><!-- 4-4-4-4 – Use for fixed horizontal (left/right) padding of UI elements -->
421
- <dimen name="semantic_space_stack_responsive_stack_space_resp_md">384.00dp</dimen><!-- 12-12-16-24 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints -->
422
- <dimen name="semantic_space_stack_responsive_stack_space_resp_lg">512.00dp</dimen><!-- 16-16-24-32 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints -->
423
- <dimen name="semantic_space_stack_responsive_stack_space_resp2_xl">1024.00dp</dimen><!-- 32-32-48-64 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints -->
424
- <dimen name="semantic_space_stack_responsive_stack_space_resp_sm">256.00dp</dimen><!-- 8-8-12-16 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints -->
425
- <dimen name="semantic_space_stack_responsive_stack_space_resp_xl">640.00dp</dimen><!-- 24-24-32-40 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints -->
426
- <dimen name="semantic_space_stack_constant_stack_space_const_sm">128.00dp</dimen><!-- 8-8-8-8 – Use for fixed vertical (top/bottom) padding of UI elements -->
427
- <dimen name="semantic_space_stack_constant_stack_space_const_md">192.00dp</dimen><!-- 12-12-12-12 – Use for fixed vertical (top/bottom) padding of UI elements -->
428
- <dimen name="semantic_space_stack_constant_stack_space_const_lg">256.00dp</dimen><!-- 16-16-16-16 – Use for fixed vertical (top/bottom) padding of UI elements -->
429
- <dimen name="semantic_space_stack_constant_stack_space_const2_xl">512.00dp</dimen><!-- 32-32-32-32 – Use for fixed vertical (top/bottom) padding of UI elements -->
430
- <dimen name="semantic_space_stack_constant_stack_space_const_xl">384.00dp</dimen><!-- 24-24-24-24 – Use for fixed vertical (top/bottom) padding of UI elements -->
431
- <dimen name="semantic_space_stack_constant_stack_space_const_xs">96.00dp</dimen><!-- 6-6-6-6 – Use for fixed vertical (top/bottom) padding of UI elements -->
432
- <dimen name="semantic_space_stack_constant_stack_space_const3_xs">32.00dp</dimen><!-- 2-2-2-2 – Use for fixed vertical (top/bottom) padding of UI elements -->
433
- <dimen name="semantic_space_stack_constant_stack_space_const2_xs">64.00dp</dimen><!-- 4-4-4-4 – Use for fixed vertical (top/bottom) padding of UI elements -->
434
- <dimen name="semantic_space_gap_responsive_gap_space_resp_xs">128.00dp</dimen><!-- 4-4-6-8 – Use for gaps between items inside of UI elements that scale across breakpoints -->
435
- <dimen name="semantic_space_gap_responsive_gap_space_resp_lg">512.00dp</dimen><!-- 16-16-24-32 – Use for gaps between items inside of UI elements that scale across breakpoints -->
436
- <dimen name="semantic_space_gap_responsive_gap_space_resp_xl">768.00dp</dimen><!-- 24-24-32-48 – Use for gaps between items inside of UI elements that scale across breakpoints -->
437
- <dimen name="semantic_space_gap_responsive_gap_space_resp2_xl">1024.00dp</dimen><!-- 32-32-48-64 – Use for gaps between items inside of UI elements that scale across breakpoints -->
438
- <dimen name="semantic_space_gap_responsive_gap_space_resp_md">384.00dp</dimen><!-- 12-12-16-24 – Use for gaps between items inside of UI elements that scale across breakpoints -->
439
- <dimen name="semantic_space_gap_responsive_gap_space_resp_sm">256.00dp</dimen><!-- 8-8-12-16 – Use for gaps between items inside of UI elements that scale across breakpoints -->
440
- <dimen name="semantic_space_gap_responsive_gap_space_resp2_xs">96.00dp</dimen><!-- 2-2-4-6 – Use for gaps between items inside of UI elements that scale across breakpoints -->
441
- <dimen name="semantic_space_gap_responsive_gap_space_resp3_xl">1536.00dp</dimen><!-- 48-48-72-96 – Use for gaps between items inside of UI elements that scale across breakpoints -->
442
- <dimen name="semantic_space_gap_constant_gap_space_const2_xs">32.00dp</dimen><!-- 2-2-2-2 – Use for fixed gaps between items inside of UI elements -->
443
- <dimen name="semantic_space_gap_constant_gap_space_const_xs">64.00dp</dimen><!-- 4-4-4-4 – Use for fixed gaps between items inside of UI elements -->
444
- <dimen name="semantic_space_gap_constant_gap_space_const_sm">128.00dp</dimen><!-- 8-8-8-8 – Use for fixed gaps between items inside of UI elements -->
445
- <dimen name="semantic_space_gap_constant_gap_space_const_md">192.00dp</dimen><!-- 12-12-12-12 – Use for fixed gaps between items inside of UI elements -->
446
- <dimen name="semantic_space_gap_constant_gap_space_const_lg">256.00dp</dimen><!-- 16-16-16-16 – Use for fixed gaps between items inside of UI elements -->
447
- <dimen name="semantic_space_gap_constant_gap_space_const_xl">384.00dp</dimen><!-- 24-24-24-24 – Use for fixed gaps between items inside of UI elements -->
448
- <dimen name="semantic_space_gap_constant_gap_space_const2_xl">512.00dp</dimen><!-- 32-32-32-32 – Use for fixed gaps between items inside of UI elements -->
449
- <dimen name="semantic_space_gap_constant_gap_space_const3_xl">768.00dp</dimen><!-- 48-48-48-48 – Use for fixed gaps between items inside of UI elements -->
450
- <dimen name="semantic_size_constant_size_const3_xs">256.00dp</dimen><!-- 16-16-16-16 – Use for setting fixed height and width of UI elements -->
451
- <dimen name="semantic_size_constant_size_const2_xs">384.00dp</dimen><!-- 24-24-24-24 – Use for setting fixed height and width of UI elements -->
452
- <dimen name="semantic_size_constant_size_const_xs">512.00dp</dimen><!-- 32-32-32-32 – Use for setting fixed height and width of UI elements -->
453
- <dimen name="semantic_size_constant_size_const_sm">640.00dp</dimen><!-- 40-40-40-40 – Use for setting fixed height and width of UI elements -->
454
- <dimen name="semantic_size_constant_size_const_md">768.00dp</dimen><!-- 48-48-48-48 Use for setting fixed height and width of UI elements -->
455
- <dimen name="semantic_size_constant_size_const_lg">896.00dp</dimen><!-- 56-56-56-56 – Use for setting fixed height and width of UI elements -->
456
- <dimen name="semantic_size_constant_size_const_xl">1024.00dp</dimen><!-- 64-64-64-64 – Use for setting fixed height and width of UI elements -->
457
- <dimen name="semantic_size_constant_size_const3_xl">1536.00dp</dimen><!-- 96-96-96-96 – Use for setting fixed height and width of UI elements -->
458
- <dimen name="semantic_size_constant_size_const4_xl">2368.00dp</dimen><!-- 148-148-148-148 – Use for setting fixed height and width of UI elements -->
459
- <dimen name="semantic_size_constant_size_const2_xl">1152.00dp</dimen><!-- 72-72-72-72 – Use for setting fixed height and width of UI elements -->
460
- <dimen name="semantic_size_constant_size_const4_xs">128.00dp</dimen><!-- 8-8-8-8 – Use for setting fixed height and width of UI elements -->
461
- <dimen name="semantic_size_responsive_size_resp3_xs">384.00dp</dimen><!-- 16-16-16-24 – Use for setting height and width of UI elements that scale across breakpoints -->
462
- <dimen name="semantic_size_responsive_size_resp2_xs">512.00dp</dimen><!-- 24-24-32-32 – Use for setting height and width of UI elements that scale across breakpoints -->
463
- <dimen name="semantic_size_responsive_size_resp_xs">768.00dp</dimen><!-- 32-32-40-48 – Use for setting height and width of UI elements that scale across breakpoints -->
464
- <dimen name="semantic_size_responsive_size_resp_sm">896.00dp</dimen><!-- 40-40-48-56 – Use for setting height and width of UI elements that scale across breakpoints -->
465
- <dimen name="semantic_size_responsive_size_resp_md">1152.00dp</dimen><!-- 48-48-64-72 – Use for setting height and width of UI elements that scale across breakpoints -->
466
- <dimen name="semantic_size_responsive_size_resp_lg">1472.00dp</dimen><!-- 56-56-72-92 – Use for setting height and width of UI elements that scale across breakpoints -->
467
- <dimen name="semantic_size_responsive_size_resp_xl">1536.00dp</dimen><!-- 64-64-80-96 – Use for setting height and width of UI elements that scale across breakpoints -->
468
- <dimen name="semantic_size_responsive_size_resp2_xl">1600.00dp</dimen><!-- 72-72-92-100 – Use for setting height and width of UI elements that scale across breakpoints -->
469
- <dimen name="semantic_size_responsive_size_resp3_xl">2368.00dp</dimen><!-- 96-96-120-148 – Use for setting height and width of UI elements that scale across breakpoints -->
470
- <dimen name="semantic_size_responsive_size_resp4_xl">2880.00dp</dimen><!-- 148-148-160-180 – Use for setting height and width of UI elements that scale across breakpoints -->
471
- <dimen name="semantic_size_responsive_size_resp4_xs">256.00dp</dimen><!-- 12-12-14-16 – Use for setting height and width of UI elements that scale across breakpoints -->
472
- <string name="breakpoint_name">lg</string>
299
+ <dimen name="title1-font-size">28px</dimen><!-- 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) -->
300
+ <dimen name="title2-font-size">20px</dimen><!-- 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) -->
301
+ <dimen name="display1-font-size">120px</dimen><!-- This variable is used on the font size parameter for the display1 text style. 40 - 40 - 72 - 120 -->
302
+ <dimen name="display2-font-size">64px</dimen><!-- This variable is used for the font size parameter of the Display2 text style. 36 - 36 - 42 - 64 -->
303
+ <dimen name="display3-font-size">40px</dimen><!-- This variable is used on the display3 font size parameter of the display3 text style. 28 - 28 - 32 - 40 -->
304
+ <dimen name="headline1-font-size">100px</dimen><!-- This token is used for the headline1 text style's font size parameter. 48 - 48 - 72 - 100 -->
305
+ <dimen name="headline2-font-size">64px</dimen><!-- This token is used on the headline2 text style's font size parameter. 40 - 40 - 48 - 64 -->
306
+ <dimen name="headline3-font-size">40px</dimen><!-- This token is used on the headline3 text style's font size parameter. 28 - 28 - 36 - 40 -->
307
+ <dimen name="headline4-font-size">32px</dimen><!-- This token controls the headline4 text style's font size parameter: 22 - 22 - 26 - 32 -->
308
+ <dimen name="body-font-size">21px</dimen><!-- This variable is used on the body text style's font size parameter. It remains constant at 21. -->
309
+ <dimen name="label3-font-size">12px</dimen><!-- This token is used in the label3 text style's font size parameter. Its value remains constant at 12 across device sizes. -->
310
+ <dimen name="label2-font-size">15px</dimen><!-- This variable controls the label2 text style's font size parameter. Its value remains constant at 15. -->
311
+ <dimen name="label1-font-size">17px</dimen><!-- This token is used in the label1 text style font size parameter. Its value remains constant at 17 across device sizes. -->
312
+ <dimen name="label1-font-size-responsive">17px</dimen><!-- 10 - 10 - 15 - 17 Use this label font size when you want your label's font size to change across device sizes. -->
313
+ <dimen name="label4-font-size">8px</dimen><!-- This token is used in the font size parameter of the label4 text style. The value remains constant at 8. -->
314
+ <dimen name="callout1-font-size">22px</dimen><!-- This token is used for the font size parameter of the callout text style. 18 - 18 - 22 - 22 -->
315
+ <dimen name="footnote1-font-size">18px</dimen><!-- This token is used on the footnote text style font size parameter. 16 - 16 - 16 - 18 -->
316
+ <dimen name="footnote2-font-size">16px</dimen><!-- This token is used in the font size parameter of the footnote2 text style. 12 - 12 - 12 - 16 -->
317
+ <dimen name="kicker1-font-size">30px</dimen><!-- Values come from NMT Figma File 01_Foundation; in online CSS this is kicker0. 18 - 18 - 22 - 30 - This variable does not exist yet in online css. Online css is called kicker0 for smallest font size. -->
318
+ <dimen name="kicker2-font-size">24px</dimen><!-- Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. This DS uses 1 to 4 following html convention of h1, h2, h3, etc. 18 - 18 - 22 - 24 -->
319
+ <dimen name="kicker3-font-size">20px</dimen><!-- Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 16 - 16 - 18 - 20 -->
320
+ <dimen name="kicker4-font-size">16px</dimen><!-- Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 14 - 14 - 16 - 16 -->
321
+ <dimen name="subheadline1-font-size">36px</dimen><!-- This token controls the subheadline1 font size parameter. 24 - 24 - 32 - 36 -->
322
+ <dimen name="quote-font-size">20px</dimen><!-- 16 - 16 - 18 - 20 -- This variable is used for controlling the font size of the quote text style. -->
323
+ <string name="body-font-family">Gotham XNarrow</string><!-- This variable references the bodyFontFamily variable from the branding collection. -->
324
+ <string name="callout-font-family">Gotham</string>
325
+ <string name="headline-font-family">Gotham Condensed</string>
326
+ <string name="footnote-font-family">Gotham XNarrow</string>
327
+ <string name="label-font-family">Gotham XNarrow</string>
328
+ <string name="kicker-font-family">Gotham XNarrow</string>
329
+ <string name="subheadline-font-family">Gotham Condensed</string>
330
+ <string name="title-font-family">Gotham</string>
331
+ <string name="quote-font-family">Gotham</string>
332
+ <string name="display-font-family">Gotham</string>
333
+ <string name="callout-font-weight">800</string>
334
+ <string name="label-font-weight-bold">700</string>
335
+ <string name="label-font-weight-book">400</string>
336
+ <string name="body-font-weight-book">400</string>
337
+ <string name="body-font-weight-bold">700</string>
338
+ <string name="kicker-font-weight">700</string>
339
+ <string name="kicker-font-weight-st">700</string>
340
+ <string name="subheadline-font-weight">700</string>
341
+ <string name="headline1-font-weight">700</string>
342
+ <string name="headline2-font-weight">700</string>
343
+ <string name="headline3-font-weight">700</string>
344
+ <string name="headline4-font-weight">600</string>
345
+ <string name="headline1-font-weight-st">700</string><!-- This variable is a string type variable for controlling not only headline font weight but also the italic style for Sport Bild headlines. -->
346
+ <string name="title-font-weight">800</string>
347
+ <string name="display-font-weight">800</string>
348
+ <string name="quote-font-weight">800</string>
349
+ <string name="footnote-font-weight-book">400</string>
350
+ <string name="footnote-font-weight-bold">700</string>
351
+ <dimen name="body-line-height">32px</dimen><!-- Figma's font line height currently does not allow for multipliers as is used on current website css var(--body-line-height) -->
352
+ <dimen name="kicker4-line-height">16px</dimen>
353
+ <dimen name="kicker3-line-height">20px</dimen>
354
+ <dimen name="kicker2-line-height">24px</dimen>
355
+ <dimen name="kicker1-line-height">30px</dimen>
356
+ <dimen name="label3-line-height">14.399999618530273px</dimen>
357
+ <dimen name="label1-line-height">17px</dimen><!-- This variable is used in the label1 text style's line height parameter. It references branding variables for brand specific line heights. -->
358
+ <dimen name="label1-responsive-line-height">17px</dimen>
359
+ <dimen name="label2-line-height">16px</dimen>
360
+ <dimen name="label4-line-height">10px</dimen>
361
+ <dimen name="display1-line-height">120px</dimen>
362
+ <dimen name="display2-line-height">64px</dimen>
363
+ <dimen name="display3-line-height">40px</dimen>
364
+ <dimen name="title1-line-height">28px</dimen>
365
+ <dimen name="title2-line-height">22px</dimen><!-- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) -->
366
+ <dimen name="quote-line-height">22px</dimen><!-- This variable is used in the quote text style line height parameter. -->
367
+ <dimen name="footnote1-line-height">23px</dimen>
368
+ <dimen name="footnote2-line-height">21px</dimen>
369
+ <dimen name="headline1-line-height">100px</dimen>
370
+ <dimen name="headline2-line-height">64px</dimen>
371
+ <dimen name="headline3-line-height">40px</dimen>
372
+ <dimen name="headline4-line-height">30px</dimen>
373
+ <dimen name="callout-line-height">22px</dimen>
374
+ <dimen name="subheadline1-line-height">36px</dimen>
375
+ <dimen name="letter-spacing-positive-sm">0.5px</dimen><!-- 0.5 | 0.5 | 0.5 | 0.5 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. -->
376
+ <dimen name="letter-spacing-positive-lg">3px</dimen><!-- 2 | 2 | 2 | 3 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. -->
377
+ <dimen name="letter-spacing-positive-md">1px</dimen><!-- 1 | 1 | 1 | 1 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. -->
378
+ <dimen name="letter-spacing-none">0px</dimen><!-- 0 | 0 | 0 | 0 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. -->
379
+ <dimen name="letter-spacing-negative-sm">-0.25px</dimen><!-- -0.5 | -0.5 | -0.25 | -0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. -->
380
+ <dimen name="letter-spacing-negative-md">-1px</dimen><!-- -1 | -1 | -1 | -1 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. -->
381
+ <dimen name="letter-spacing-negative-lg">-3px</dimen><!-- -2 | -2 | -2 | -3 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. -->
382
+ <dimen name="letter-spacing-negative-xs">-0.25px</dimen><!-- -0.25 | -0.25 | -0.25 | -0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. This letter spacing was only found in large titles on iOS mobile app large title component. -->
383
+ <dimen name="letter-spacing-positive-xs">0.25px</dimen><!-- 0.25 | 0.25 | 0.25 | 0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. -->
384
+ <dimen name="display1-letter-spacing">-2px</dimen><!-- -0.5 | -0.5 | -1 | -2 | This variable is used for the letter spacing parameter of the display1 text style. On smaller devices the value is smaller than on larger devices. On desktop devices the letter spacing is further reduced for making the text style more compact. -->
385
+ <dimen name="display2-letter-spacing">-1px</dimen><!-- -0.5 | -0.5 | -1 | -1 | This variable is used for the letter spacing parameter of the display2 text style. On smaller devices the value is smaller than on larger devices. -->
386
+ <dimen name="display3-letter-spacing">-1px</dimen><!-- -0.5 | -0.5 | -1 | -1 | This variable is used for the letter spacing parameter of the display3 text style. On smaller devices the value is smaller than on larger devices. -->
387
+ <dimen name="border-radius-xs">2px</dimen><!-- 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges. -->
388
+ <dimen name="border-radius-md">8px</dimen><!-- 8-8-8-8 – Standard radius for buttons, chips, input fields, and medium-sized interactive elements. -->
389
+ <dimen name="border-radius-sm">4px</dimen><!-- 4-4-4-4 – use for corner rounding on compact components like checkboxes or small input controls. -->
390
+ <dimen name="border-radius-xl">24px</dimen><!-- 24-24-24-24 – use for corner rounding on larger cards, overlays, dialogs, and other container components. -->
391
+ <dimen name="border-radius-lg">16px</dimen><!-- 16-16-16-16 – use for corner rounding on small cards, overlays, and modal surfaces. -->
392
+ <dimen name="border-radius-none">0px</dimen><!-- 0-0-0-0 – no corner rounding. Used as default for flat layouts, content modules, images, and teaser elements. -->
393
+ <dimen name="border-radius-full">9999px</dimen><!-- creates fully rounded shapes, typically used for circular elements like avatars. -->
394
+ <dimen name="border-width-thin">1px</dimen><!-- 1-1-1-1 – use for subtle outlines and dividers -->
395
+ <dimen name="border-width-thick">2px</dimen><!-- 2-2-2-2 – use for stronger outlines on form elements (inputs), buttons (outline variants), and interaction states (focus, hover, active) -->
396
+ <dimen name="border-width-hairline">0.33000001311302185px</dimen><!-- 0.33 -0.33 -0.33 -0.33 – primarily used in mobile app interfaces. Optimized for high-density displays to create subtle dividers and outlines without visual overload. -->
397
+ <string name="visilble-mobile-only">false</string><!-- Use for showing elements on mobile viewport sizes only -->
398
+ <string name="visilble-desktop-only">true</string><!-- Use for showing elements on desktop viewport sizes only -->
399
+ <string name="visilble-above600px">true</string><!-- Use for showing elements on viewport sizes above 600 px -->
400
+ <string name="visilble-below600px">false</string><!-- Use for showing elements on viewport sizes below 600 px -->
401
+ <string name="hide-on-mobile">true</string><!-- Use for hiding elements on mobile viewport sizes -->
402
+ <string name="visilble-tablet-only">false</string><!-- Use for showing elements on tablet viewport sizes only -->
403
+ <string name="hide-on-desktop">false</string><!-- Use for hiding elements on desktop viewport sizes only -->
404
+ <string name="change-on-lg">lg</string>
405
+ <string name="change-on-md">md/lg</string><!-- This variable is used for controlling size changes across device sizes on some components such as the vertical newsticker cards and the search results cards. Both have cards that change layouts at different breakpoints. -->
406
+ <string name="bp-specific-web">lg</string>
407
+ <string name="bp-specific-app">regular</string>
408
+ <dimen name="inline-space-resp-sm">16px</dimen><!-- 8-8-12-16 – use for horizontal (left/right) padding of UI elements that scales across breakpoints -->
409
+ <dimen name="inline-space-resp-md">24px</dimen><!-- 12-12-16-24 use for horizontal (left/right) padding of UI elements that scales across breakpoints -->
410
+ <dimen name="inline-space-resp-lg">32px</dimen><!-- 16-16-24-32 – use for horizontal (left/right) padding of UI elements that scales across breakpoints -->
411
+ <dimen name="inline-space-resp2-xl">64px</dimen><!-- 32-32-48-64 – use for horizontal (left/right) padding of UI elements that scales across breakpoints -->
412
+ <dimen name="inline-space-resp-xl">40px</dimen><!-- 24-24-32-40 – use for horizontal (left/right) padding of UI elements that scales across breakpoints -->
413
+ <dimen name="inline-space-const-sm">8px</dimen><!-- 8-8-8-8 – Use for fixed horizontal (left/right) padding of UI elements -->
414
+ <dimen name="inline-space-const-md">12px</dimen><!-- 12-12-12-12 – Use for fixed horizontal (left/right) padding of UI elements -->
415
+ <dimen name="inline-space-const-lg">16px</dimen><!-- 16-16-16-16 – Use for fixed horizontal (left/right) padding of UI elements -->
416
+ <dimen name="inline-space-const2-xl">32px</dimen><!-- 32-32-32-32 – Use for fixed horizontal (left/right) padding of UI elements -->
417
+ <dimen name="inline-space-const-xl">24px</dimen><!-- 24-24-24-24 – Use for fixed horizontal (left/right) padding of UI elements -->
418
+ <dimen name="inline-space-const-xs">6px</dimen><!-- 6-6-6-6 – Use for fixed horizontal (left/right) padding of UI elements -->
419
+ <dimen name="inline-space-const3-xs">2px</dimen><!-- 2-2-2-2 – Use for fixed horizontal (left/right) padding of UI elements -->
420
+ <dimen name="inline-space-const2-xs">4px</dimen><!-- 4-4-4-4 – Use for fixed horizontal (left/right) padding of UI elements -->
421
+ <dimen name="stack-space-resp-md">24px</dimen><!-- 12-12-16-24 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints -->
422
+ <dimen name="stack-space-resp-lg">32px</dimen><!-- 16-16-24-32 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints -->
423
+ <dimen name="stack-space-resp2-xl">64px</dimen><!-- 32-32-48-64 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints -->
424
+ <dimen name="stack-space-resp-sm">16px</dimen><!-- 8-8-12-16 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints -->
425
+ <dimen name="stack-space-resp-xl">40px</dimen><!-- 24-24-32-40 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints -->
426
+ <dimen name="stack-space-const-sm">8px</dimen><!-- 8-8-8-8 – Use for fixed vertical (top/bottom) padding of UI elements -->
427
+ <dimen name="stack-space-const-md">12px</dimen><!-- 12-12-12-12 – Use for fixed vertical (top/bottom) padding of UI elements -->
428
+ <dimen name="stack-space-const-lg">16px</dimen><!-- 16-16-16-16 – Use for fixed vertical (top/bottom) padding of UI elements -->
429
+ <dimen name="stack-space-const2-xl">32px</dimen><!-- 32-32-32-32 – Use for fixed vertical (top/bottom) padding of UI elements -->
430
+ <dimen name="stack-space-const-xl">24px</dimen><!-- 24-24-24-24 – Use for fixed vertical (top/bottom) padding of UI elements -->
431
+ <dimen name="stack-space-const-xs">6px</dimen><!-- 6-6-6-6 – Use for fixed vertical (top/bottom) padding of UI elements -->
432
+ <dimen name="stack-space-const3-xs">2px</dimen><!-- 2-2-2-2 – Use for fixed vertical (top/bottom) padding of UI elements -->
433
+ <dimen name="stack-space-const2-xs">4px</dimen><!-- 4-4-4-4 – Use for fixed vertical (top/bottom) padding of UI elements -->
434
+ <dimen name="gap-space-resp-xs">8px</dimen><!-- 4-4-6-8 – Use for gaps between items inside of UI elements that scale across breakpoints -->
435
+ <dimen name="gap-space-resp-lg">32px</dimen><!-- 16-16-24-32 – Use for gaps between items inside of UI elements that scale across breakpoints -->
436
+ <dimen name="gap-space-resp-xl">48px</dimen><!-- 24-24-32-48 – Use for gaps between items inside of UI elements that scale across breakpoints -->
437
+ <dimen name="gap-space-resp2-xl">64px</dimen><!-- 32-32-48-64 – Use for gaps between items inside of UI elements that scale across breakpoints -->
438
+ <dimen name="gap-space-resp-md">24px</dimen><!-- 12-12-16-24 – Use for gaps between items inside of UI elements that scale across breakpoints -->
439
+ <dimen name="gap-space-resp-sm">16px</dimen><!-- 8-8-12-16 – Use for gaps between items inside of UI elements that scale across breakpoints -->
440
+ <dimen name="gap-space-resp2-xs">6px</dimen><!-- 2-2-4-6 – Use for gaps between items inside of UI elements that scale across breakpoints -->
441
+ <dimen name="gap-space-resp3-xl">96px</dimen><!-- 48-48-72-96 – Use for gaps between items inside of UI elements that scale across breakpoints -->
442
+ <dimen name="gap-space-const2-xs">2px</dimen><!-- 2-2-2-2 – Use for fixed gaps between items inside of UI elements -->
443
+ <dimen name="gap-space-const-xs">4px</dimen><!-- 4-4-4-4 – Use for fixed gaps between items inside of UI elements -->
444
+ <dimen name="gap-space-const-sm">8px</dimen><!-- 8-8-8-8 – Use for fixed gaps between items inside of UI elements -->
445
+ <dimen name="gap-space-const-md">12px</dimen><!-- 12-12-12-12 – Use for fixed gaps between items inside of UI elements -->
446
+ <dimen name="gap-space-const-lg">16px</dimen><!-- 16-16-16-16 – Use for fixed gaps between items inside of UI elements -->
447
+ <dimen name="gap-space-const-xl">24px</dimen><!-- 24-24-24-24 – Use for fixed gaps between items inside of UI elements -->
448
+ <dimen name="gap-space-const2-xl">32px</dimen><!-- 32-32-32-32 – Use for fixed gaps between items inside of UI elements -->
449
+ <dimen name="gap-space-const3-xl">48px</dimen><!-- 48-48-48-48 – Use for fixed gaps between items inside of UI elements -->
450
+ <dimen name="size-const3-xs">16px</dimen><!-- 16-16-16-16 – Use for setting fixed height and width of UI elements -->
451
+ <dimen name="size-const2-xs">24px</dimen><!-- 24-24-24-24 – Use for setting fixed height and width of UI elements -->
452
+ <dimen name="size-const-xs">32px</dimen><!-- 32-32-32-32 – Use for setting fixed height and width of UI elements -->
453
+ <dimen name="size-const-sm">40px</dimen><!-- 40-40-40-40 – Use for setting fixed height and width of UI elements -->
454
+ <dimen name="size-const-md">48px</dimen><!-- 48-48-48-48 Use for setting fixed height and width of UI elements -->
455
+ <dimen name="size-const-lg">56px</dimen><!-- 56-56-56-56 – Use for setting fixed height and width of UI elements -->
456
+ <dimen name="size-const-xl">64px</dimen><!-- 64-64-64-64 – Use for setting fixed height and width of UI elements -->
457
+ <dimen name="size-const3-xl">96px</dimen><!-- 96-96-96-96 – Use for setting fixed height and width of UI elements -->
458
+ <dimen name="size-const4-xl">148px</dimen><!-- 148-148-148-148 – Use for setting fixed height and width of UI elements -->
459
+ <dimen name="size-const2-xl">72px</dimen><!-- 72-72-72-72 – Use for setting fixed height and width of UI elements -->
460
+ <dimen name="size-const4-xs">8px</dimen><!-- 8-8-8-8 – Use for setting fixed height and width of UI elements -->
461
+ <dimen name="size-resp3-xs">24px</dimen><!-- 16-16-16-24 – Use for setting height and width of UI elements that scale across breakpoints -->
462
+ <dimen name="size-resp2-xs">32px</dimen><!-- 24-24-32-32 – Use for setting height and width of UI elements that scale across breakpoints -->
463
+ <dimen name="size-resp-xs">48px</dimen><!-- 32-32-40-48 – Use for setting height and width of UI elements that scale across breakpoints -->
464
+ <dimen name="size-resp-sm">56px</dimen><!-- 40-40-48-56 – Use for setting height and width of UI elements that scale across breakpoints -->
465
+ <dimen name="size-resp-md">72px</dimen><!-- 48-48-64-72 – Use for setting height and width of UI elements that scale across breakpoints -->
466
+ <dimen name="size-resp-lg">92px</dimen><!-- 56-56-72-92 – Use for setting height and width of UI elements that scale across breakpoints -->
467
+ <dimen name="size-resp-xl">96px</dimen><!-- 64-64-80-96 – Use for setting height and width of UI elements that scale across breakpoints -->
468
+ <dimen name="size-resp2-xl">100px</dimen><!-- 72-72-92-100 – Use for setting height and width of UI elements that scale across breakpoints -->
469
+ <dimen name="size-resp3-xl">148px</dimen><!-- 96-96-120-148 – Use for setting height and width of UI elements that scale across breakpoints -->
470
+ <dimen name="size-resp4-xl">180px</dimen><!-- 148-148-160-180 – Use for setting height and width of UI elements that scale across breakpoints -->
471
+ <dimen name="size-resp4-xs">16px</dimen><!-- 12-12-14-16 – Use for setting height and width of UI elements that scale across breakpoints -->
472
+ <string name="breakpoint-name">lg</string>
473
473
  </resources>