@marioschmidt/design-system-tokens 1.0.13 → 1.0.14

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 (204) hide show
  1. package/dist/android/res/values/base/primitive_color_value.xml +12 -12
  2. package/dist/android/res/values/base/primitive_font_value.xml +22 -22
  3. package/dist/android/res/values/base/primitive_size_value.xml +49 -49
  4. package/dist/android/res/values/base/primitive_space_value.xml +25 -25
  5. package/dist/android/res/values/density/density_compact.xml +8 -8
  6. package/dist/android/res/values/density/density_default.xml +8 -8
  7. package/dist/android/res/values/density/density_spacious.xml +8 -8
  8. package/dist/android/res/values/mapping/brand_advertorial.xml +240 -240
  9. package/dist/android/res/values/mapping/brand_bild.xml +240 -240
  10. package/dist/android/res/values/mapping/brand_sportbild.xml +240 -240
  11. package/dist/android/res/values/semantic/advertorial/breakpoints/breakpoint_advertorial_lg.xml +423 -423
  12. package/dist/android/res/values/semantic/advertorial/breakpoints/breakpoint_advertorial_md.xml +423 -423
  13. package/dist/android/res/values/semantic/advertorial/breakpoints/breakpoint_advertorial_sm.xml +423 -423
  14. package/dist/android/res/values/semantic/advertorial/breakpoints/breakpoint_advertorial_xs.xml +423 -423
  15. package/dist/android/res/values/semantic/advertorial/color/color_advertorial_dark.xml +15 -15
  16. package/dist/android/res/values/semantic/advertorial/color/color_advertorial_light.xml +15 -15
  17. package/dist/android/res/values/semantic/bild/breakpoints/breakpoint_bild_lg.xml +423 -423
  18. package/dist/android/res/values/semantic/bild/breakpoints/breakpoint_bild_md.xml +423 -423
  19. package/dist/android/res/values/semantic/bild/breakpoints/breakpoint_bild_sm.xml +423 -423
  20. package/dist/android/res/values/semantic/bild/breakpoints/breakpoint_bild_xs.xml +423 -423
  21. package/dist/android/res/values/semantic/bild/color/color_bild_dark.xml +15 -15
  22. package/dist/android/res/values/semantic/bild/color/color_bild_light.xml +15 -15
  23. package/dist/android/res/values/semantic/sportbild/breakpoints/breakpoint_sportbild_lg.xml +423 -423
  24. package/dist/android/res/values/semantic/sportbild/breakpoints/breakpoint_sportbild_md.xml +423 -423
  25. package/dist/android/res/values/semantic/sportbild/breakpoints/breakpoint_sportbild_sm.xml +423 -423
  26. package/dist/android/res/values/semantic/sportbild/breakpoints/breakpoint_sportbild_xs.xml +423 -423
  27. package/dist/android/res/values/semantic/sportbild/color/color_sportbild_dark.xml +15 -15
  28. package/dist/android/res/values/semantic/sportbild/color/color_sportbild_light.xml +15 -15
  29. package/dist/css/base/primitive-font-value-global.css +11 -11
  30. package/dist/css/base/primitive-font-value.css +11 -11
  31. package/dist/css/base/primitive-size-value-global.css +49 -49
  32. package/dist/css/base/primitive-size-value.css +49 -49
  33. package/dist/css/base/primitive-space-value-global.css +25 -25
  34. package/dist/css/base/primitive-space-value.css +25 -25
  35. package/dist/css/density/density-compact-global.css +2 -2
  36. package/dist/css/density/density-compact.css +2 -2
  37. package/dist/css/density/density-default-global.css +2 -2
  38. package/dist/css/density/density-default.css +2 -2
  39. package/dist/css/density/density-spacious-global.css +2 -2
  40. package/dist/css/density/density-spacious.css +2 -2
  41. package/dist/css/mapping/brand-advertorial-global.css +203 -203
  42. package/dist/css/mapping/brand-advertorial.css +203 -203
  43. package/dist/css/mapping/brand-bild-global.css +203 -203
  44. package/dist/css/mapping/brand-bild.css +203 -203
  45. package/dist/css/mapping/brand-sportbild-global.css +203 -203
  46. package/dist/css/mapping/brand-sportbild.css +203 -203
  47. package/dist/css/semantic/advertorial/breakpoints/breakpoint-advertorial-lg-global.css +97 -97
  48. package/dist/css/semantic/advertorial/breakpoints/breakpoint-advertorial-lg.css +97 -97
  49. package/dist/css/semantic/advertorial/breakpoints/breakpoint-advertorial-md-global.css +94 -94
  50. package/dist/css/semantic/advertorial/breakpoints/breakpoint-advertorial-md.css +94 -94
  51. package/dist/css/semantic/advertorial/breakpoints/breakpoint-advertorial-sm-global.css +95 -95
  52. package/dist/css/semantic/advertorial/breakpoints/breakpoint-advertorial-sm.css +95 -95
  53. package/dist/css/semantic/advertorial/breakpoints/breakpoint-advertorial-xs-global.css +95 -95
  54. package/dist/css/semantic/advertorial/breakpoints/breakpoint-advertorial-xs.css +95 -95
  55. package/dist/css/semantic/bild/breakpoints/breakpoint-bild-lg-global.css +97 -97
  56. package/dist/css/semantic/bild/breakpoints/breakpoint-bild-lg.css +97 -97
  57. package/dist/css/semantic/bild/breakpoints/breakpoint-bild-md-global.css +94 -94
  58. package/dist/css/semantic/bild/breakpoints/breakpoint-bild-md.css +94 -94
  59. package/dist/css/semantic/bild/breakpoints/breakpoint-bild-sm-global.css +95 -95
  60. package/dist/css/semantic/bild/breakpoints/breakpoint-bild-sm.css +95 -95
  61. package/dist/css/semantic/bild/breakpoints/breakpoint-bild-xs-global.css +95 -95
  62. package/dist/css/semantic/bild/breakpoints/breakpoint-bild-xs.css +95 -95
  63. package/dist/css/semantic/sportbild/breakpoints/breakpoint-sportbild-lg-global.css +97 -97
  64. package/dist/css/semantic/sportbild/breakpoints/breakpoint-sportbild-lg.css +97 -97
  65. package/dist/css/semantic/sportbild/breakpoints/breakpoint-sportbild-md-global.css +94 -94
  66. package/dist/css/semantic/sportbild/breakpoints/breakpoint-sportbild-md.css +94 -94
  67. package/dist/css/semantic/sportbild/breakpoints/breakpoint-sportbild-sm-global.css +95 -95
  68. package/dist/css/semantic/sportbild/breakpoints/breakpoint-sportbild-sm.css +95 -95
  69. package/dist/css/semantic/sportbild/breakpoints/breakpoint-sportbild-xs-global.css +95 -95
  70. package/dist/css/semantic/sportbild/breakpoints/breakpoint-sportbild-xs.css +95 -95
  71. package/dist/flutter/base/primitive_color_value.dart +119 -85
  72. package/dist/flutter/base/primitive_font_value.dart +58 -46
  73. package/dist/flutter/base/primitive_size_value.dart +49 -49
  74. package/dist/flutter/base/primitive_space_value.dart +26 -26
  75. package/dist/flutter/density/density_compact.dart +16 -11
  76. package/dist/flutter/density/density_default.dart +16 -11
  77. package/dist/flutter/density/density_spacious.dart +16 -11
  78. package/dist/flutter/mapping/brand_advertorial.dart +398 -274
  79. package/dist/flutter/mapping/brand_bild.dart +398 -274
  80. package/dist/flutter/mapping/brand_color_bild.dart +121 -71
  81. package/dist/flutter/mapping/brand_color_sportbild.dart +121 -71
  82. package/dist/flutter/mapping/brand_sportbild.dart +398 -274
  83. package/dist/flutter/semantic/advertorial/breakpoints/breakpoint_advertorial_lg.dart +689 -487
  84. package/dist/flutter/semantic/advertorial/breakpoints/breakpoint_advertorial_md.dart +689 -487
  85. package/dist/flutter/semantic/advertorial/breakpoints/breakpoint_advertorial_sm.dart +689 -487
  86. package/dist/flutter/semantic/advertorial/breakpoints/breakpoint_advertorial_xs.dart +689 -487
  87. package/dist/flutter/semantic/advertorial/color/color_advertorial_dark.dart +369 -423
  88. package/dist/flutter/semantic/advertorial/color/color_advertorial_light.dart +369 -423
  89. package/dist/flutter/semantic/bild/breakpoints/breakpoint_bild_lg.dart +689 -487
  90. package/dist/flutter/semantic/bild/breakpoints/breakpoint_bild_md.dart +689 -487
  91. package/dist/flutter/semantic/bild/breakpoints/breakpoint_bild_sm.dart +689 -487
  92. package/dist/flutter/semantic/bild/breakpoints/breakpoint_bild_xs.dart +689 -487
  93. package/dist/flutter/semantic/bild/color/color_bild_dark.dart +369 -423
  94. package/dist/flutter/semantic/bild/color/color_bild_light.dart +369 -423
  95. package/dist/flutter/semantic/sportbild/breakpoints/breakpoint_sportbild_lg.dart +689 -487
  96. package/dist/flutter/semantic/sportbild/breakpoints/breakpoint_sportbild_md.dart +689 -487
  97. package/dist/flutter/semantic/sportbild/breakpoints/breakpoint_sportbild_sm.dart +689 -487
  98. package/dist/flutter/semantic/sportbild/breakpoints/breakpoint_sportbild_xs.dart +689 -487
  99. package/dist/flutter/semantic/sportbild/color/color_sportbild_dark.dart +369 -423
  100. package/dist/flutter/semantic/sportbild/color/color_sportbild_light.dart +369 -423
  101. package/dist/ios/base/PrimitiveColorValue.swift +130 -96
  102. package/dist/ios/base/PrimitiveFontValue.swift +57 -45
  103. package/dist/ios/base/PrimitiveSizeValue.swift +51 -51
  104. package/dist/ios/base/PrimitiveSpaceValue.swift +27 -27
  105. package/dist/ios/density/DensityCompact.swift +15 -10
  106. package/dist/ios/density/DensityDefault.swift +15 -10
  107. package/dist/ios/density/DensitySpacious.swift +15 -10
  108. package/dist/ios/mapping/BrandAdvertorial.swift +397 -273
  109. package/dist/ios/mapping/BrandBild.swift +397 -273
  110. package/dist/ios/mapping/BrandColorBild.swift +120 -70
  111. package/dist/ios/mapping/BrandColorSportbild.swift +120 -70
  112. package/dist/ios/mapping/BrandSportbild.swift +397 -273
  113. package/dist/ios/semantic/advertorial/breakpoints/BreakpointAdvertorialLg.swift +688 -486
  114. package/dist/ios/semantic/advertorial/breakpoints/BreakpointAdvertorialMd.swift +688 -486
  115. package/dist/ios/semantic/advertorial/breakpoints/BreakpointAdvertorialSm.swift +688 -486
  116. package/dist/ios/semantic/advertorial/breakpoints/BreakpointAdvertorialXs.swift +688 -486
  117. package/dist/ios/semantic/advertorial/color/ColorAdvertorialDark.swift +368 -422
  118. package/dist/ios/semantic/advertorial/color/ColorAdvertorialLight.swift +368 -422
  119. package/dist/ios/semantic/bild/breakpoints/BreakpointBildLg.swift +688 -486
  120. package/dist/ios/semantic/bild/breakpoints/BreakpointBildMd.swift +688 -486
  121. package/dist/ios/semantic/bild/breakpoints/BreakpointBildSm.swift +688 -486
  122. package/dist/ios/semantic/bild/breakpoints/BreakpointBildXs.swift +688 -486
  123. package/dist/ios/semantic/bild/color/ColorBildDark.swift +368 -422
  124. package/dist/ios/semantic/bild/color/ColorBildLight.swift +368 -422
  125. package/dist/ios/semantic/sportbild/breakpoints/BreakpointSportbildLg.swift +688 -486
  126. package/dist/ios/semantic/sportbild/breakpoints/BreakpointSportbildMd.swift +688 -486
  127. package/dist/ios/semantic/sportbild/breakpoints/BreakpointSportbildSm.swift +688 -486
  128. package/dist/ios/semantic/sportbild/breakpoints/BreakpointSportbildXs.swift +688 -486
  129. package/dist/ios/semantic/sportbild/color/ColorSportbildDark.swift +368 -422
  130. package/dist/ios/semantic/sportbild/color/ColorSportbildLight.swift +368 -422
  131. package/dist/js/base/primitive-color-value.js +34 -34
  132. package/dist/js/base/primitive-font-value.js +12 -12
  133. package/dist/js/base/primitive-size-value.js +49 -49
  134. package/dist/js/base/primitive-space-value.js +25 -25
  135. package/dist/js/density/density-compact.js +5 -5
  136. package/dist/js/density/density-default.js +5 -5
  137. package/dist/js/density/density-spacious.js +5 -5
  138. package/dist/js/mapping/brand-advertorial.js +229 -222
  139. package/dist/js/mapping/brand-bild.js +230 -222
  140. package/dist/js/mapping/brand-color-bild.js +50 -50
  141. package/dist/js/mapping/brand-color-sportbild.js +50 -50
  142. package/dist/js/mapping/brand-sportbild.js +234 -222
  143. package/dist/js/semantic/advertorial/breakpoints/breakpoint-advertorial-lg.js +285 -293
  144. package/dist/js/semantic/advertorial/breakpoints/breakpoint-advertorial-md.js +283 -291
  145. package/dist/js/semantic/advertorial/breakpoints/breakpoint-advertorial-sm.js +285 -292
  146. package/dist/js/semantic/advertorial/breakpoints/breakpoint-advertorial-xs.js +285 -292
  147. package/dist/js/semantic/advertorial/color/color-advertorial-dark.js +50 -154
  148. package/dist/js/semantic/advertorial/color/color-advertorial-light.js +50 -154
  149. package/dist/js/semantic/bild/breakpoints/breakpoint-bild-lg.js +285 -293
  150. package/dist/js/semantic/bild/breakpoints/breakpoint-bild-md.js +283 -291
  151. package/dist/js/semantic/bild/breakpoints/breakpoint-bild-sm.js +285 -292
  152. package/dist/js/semantic/bild/breakpoints/breakpoint-bild-xs.js +285 -292
  153. package/dist/js/semantic/bild/color/color-bild-dark.js +50 -154
  154. package/dist/js/semantic/bild/color/color-bild-light.js +50 -154
  155. package/dist/js/semantic/sportbild/breakpoints/breakpoint-sportbild-lg.js +285 -293
  156. package/dist/js/semantic/sportbild/breakpoints/breakpoint-sportbild-md.js +283 -291
  157. package/dist/js/semantic/sportbild/breakpoints/breakpoint-sportbild-sm.js +285 -292
  158. package/dist/js/semantic/sportbild/breakpoints/breakpoint-sportbild-xs.js +285 -292
  159. package/dist/js/semantic/sportbild/color/color-sportbild-dark.js +50 -154
  160. package/dist/js/semantic/sportbild/color/color-sportbild-light.js +50 -154
  161. package/dist/json/base/primitive-font-value.json +11 -11
  162. package/dist/json/base/primitive-size-value.json +49 -49
  163. package/dist/json/base/primitive-space-value.json +25 -25
  164. package/dist/json/density/density-compact.json +2 -2
  165. package/dist/json/density/density-default.json +2 -2
  166. package/dist/json/density/density-spacious.json +2 -2
  167. package/dist/json/mapping/brand-advertorial.json +203 -203
  168. package/dist/json/mapping/brand-bild.json +203 -203
  169. package/dist/json/mapping/brand-sportbild.json +203 -203
  170. package/dist/json/semantic/advertorial/breakpoints/breakpoint-advertorial-lg.json +97 -97
  171. package/dist/json/semantic/advertorial/breakpoints/breakpoint-advertorial-md.json +94 -94
  172. package/dist/json/semantic/advertorial/breakpoints/breakpoint-advertorial-sm.json +95 -95
  173. package/dist/json/semantic/advertorial/breakpoints/breakpoint-advertorial-xs.json +95 -95
  174. package/dist/json/semantic/bild/breakpoints/breakpoint-bild-lg.json +97 -97
  175. package/dist/json/semantic/bild/breakpoints/breakpoint-bild-md.json +94 -94
  176. package/dist/json/semantic/bild/breakpoints/breakpoint-bild-sm.json +95 -95
  177. package/dist/json/semantic/bild/breakpoints/breakpoint-bild-xs.json +95 -95
  178. package/dist/json/semantic/sportbild/breakpoints/breakpoint-sportbild-lg.json +97 -97
  179. package/dist/json/semantic/sportbild/breakpoints/breakpoint-sportbild-md.json +94 -94
  180. package/dist/json/semantic/sportbild/breakpoints/breakpoint-sportbild-sm.json +95 -95
  181. package/dist/json/semantic/sportbild/breakpoints/breakpoint-sportbild-xs.json +95 -95
  182. package/dist/manifest.json +1 -1
  183. package/dist/scss/base/primitive-font-value.scss +11 -11
  184. package/dist/scss/base/primitive-size-value.scss +49 -49
  185. package/dist/scss/base/primitive-space-value.scss +25 -25
  186. package/dist/scss/density/density-compact.scss +2 -2
  187. package/dist/scss/density/density-default.scss +2 -2
  188. package/dist/scss/density/density-spacious.scss +2 -2
  189. package/dist/scss/mapping/brand-advertorial.scss +203 -203
  190. package/dist/scss/mapping/brand-bild.scss +203 -203
  191. package/dist/scss/mapping/brand-sportbild.scss +203 -203
  192. package/dist/scss/semantic/advertorial/breakpoints/breakpoint-advertorial-lg.scss +97 -97
  193. package/dist/scss/semantic/advertorial/breakpoints/breakpoint-advertorial-md.scss +94 -94
  194. package/dist/scss/semantic/advertorial/breakpoints/breakpoint-advertorial-sm.scss +95 -95
  195. package/dist/scss/semantic/advertorial/breakpoints/breakpoint-advertorial-xs.scss +95 -95
  196. package/dist/scss/semantic/bild/breakpoints/breakpoint-bild-lg.scss +97 -97
  197. package/dist/scss/semantic/bild/breakpoints/breakpoint-bild-md.scss +94 -94
  198. package/dist/scss/semantic/bild/breakpoints/breakpoint-bild-sm.scss +95 -95
  199. package/dist/scss/semantic/bild/breakpoints/breakpoint-bild-xs.scss +95 -95
  200. package/dist/scss/semantic/sportbild/breakpoints/breakpoint-sportbild-lg.scss +97 -97
  201. package/dist/scss/semantic/sportbild/breakpoints/breakpoint-sportbild-md.scss +94 -94
  202. package/dist/scss/semantic/sportbild/breakpoints/breakpoint-sportbild-sm.scss +95 -95
  203. package/dist/scss/semantic/sportbild/breakpoints/breakpoint-sportbild-xs.scss +95 -95
  204. package/package.json +1 -1
@@ -8,489 +8,691 @@
8
8
 
9
9
  import UIKit
10
10
 
11
- public class {
12
- public static let breakpointName = xs
13
- public static let componentAccordionAccordionLabelFontFamily = Lucida Grande /** This variable exists specifically for changing the accordion font family across brands. It is subject to review. Bild: GothamXNarrow, SpoBi: Inter, Ads: LucindaGrande */
14
- public static let componentArticleAricleMobile1ColGridImageMarginSpace = 0
15
- public static let componentArticleArticleContentInlineSpace = 16 /** 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. */
16
- public static let componentArticleArticleContentStackSpace = 16 /** 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
- public static let componentArticleArticleGalleryATeaserWidth = 145 /** same as standard teaser width size variable */
18
- public static let componentArticleArticleHeadingsInlineSpace = 16 /** 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. */
19
- public static let componentArticleArticleHeadingsStackSpace = 12 /** 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 */
20
- public static let componentArticleArticleHeadlineFontSize = 30 /** 40 - 40 - 72 - 100 - This variable uses the semantic variables headline2 for XS&SM, headline1 for MD&LG */
21
- public static let componentArticleArticleImageCaptionFontSize = 13 /** CSS --article-figure-meta-font-size 16-16-18-18 */
22
- public static let componentArticleArticleImageCaptionLineHeight = 19.5 /** this component level variable references the branding variables */
23
- public static let componentArticleArticleImageContainerStackSpace = 8
24
- public static let componentArticleArticleImageLandscapeInlineSpace = 0
25
- public static let componentArticleArticleImagePortaitInlineSpace = 0
26
- public static let componentArticleArticleImageSourceFontSize = 13 /** NMT CSS --article-figure-meta-font-size */
27
- public static let componentArticleArticleImageSourceLineHeight = 19
28
- public static let componentArticleArticleInfoboxInlineSpace = 16
29
- public static let componentArticleArticleInfoboxStackSpace = 16
30
- public static let componentArticleArticleKickerFontSize = 16 /** This variable is used to control the font size of kickers in the heading section of article pages. 18 - 18 - 22 - 30 */
31
- public static let componentArticleArticleMetaFontFamily = Lucida Grande /** 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. */
32
- public static let componentArticleArticleMetaFontSize = 12 /** 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 */
33
- public static let componentArticleArticleTopMarginSpace = 8 /** 8 | 8 | 12 | 16 - This space variable is used at the top edge of the article main content bounding box. */
34
- public static let componentAudioPlayerAudioPlayerFontSize = 16 /** 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 */
35
- public static let componentAvatarAppAvatarFontFamily = Lucida Grande /** This variable is used for setting the font of avatars on iOS and Android platforms. This is subject to review. */
36
- public static let componentAvatarAvatarArticleSize = 48 /** 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. */
37
- public static let componentAvatarAvatarAuthorPageSize = 96 /** 96 - 96 - 130 - 130 This variable is used for controlling the size of the avatar image on author pages. */
38
- public static let componentAvatarAvatarFontFamily = Lucida Grande /** This variable is used in avatar text styles. It receives values from the Brand Tokens Collection. Bild: GothamXNarrow; SpoBi: Inter; Ads: LucidaGrande */
39
- public static let componentAvatarAvatarLabelFontSize = 13 /** This variable is used on avatar names in article pages. Bild: 16 - 16 - 16 - 18; SpoBi&Ads: 13 - 13 - 13 - 15 */
40
- public static let componentAvatarAvatarLabelLineHeight = 21 /** 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 */
41
- public static let componentAvatarAvatarLaneGapSpace = 16 /** 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 */
42
- public static let componentBadgeAdLabelBadgeHeightSize = 30 /** 30 - 30 - 30 - 30 - This variable is used on the Advert rectangular badge that is found above an ad containers. */
43
- public static let componentBadgeBadgesInnerInlineSpace = 4 /** 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. */
44
- public static let componentBadgeBadgesInnerStackSpace = 2 /** 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. */
45
- public static let componentBreadcrumbBreadcrumbArrowLeftInlineSpace1 = 3
46
- public static let componentBreadcrumbBreadcrumbArrowRightInlineSpace2 = 5
47
- public static let componentBreadcrumbBreadcrumbFontFamily = Lucida Grande
48
- public static let componentBreadcrumbBreadcrumbFontSize = 15 /** 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices. */
49
- public static let componentBreadcrumbBreadcrumbFontWeight = 700
50
- public static let componentBreadcrumbBreadcrumbInlineSpace = 12
51
- public static let componentBreadcrumbBreadcrumbLineHeight = 15 /** 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices. */
52
- public static let componentBreadcrumbBreadcrumbStackSpace = 14
53
- public static let componentBreakingNewsBreakingNewsBadgeInlineSpace = 6
54
- public static let componentBreakingNewsBreakingNewsBadgeLowerTitleFontSize = 23
55
- public static let componentBreakingNewsBreakingNewsBadgeLowerTitleLineHeight = 21
56
- public static let componentBreakingNewsBreakingNewsBadgeTitelsStackSpace = 0
57
- public static let componentBreakingNewsBreakingNewsBadgeUpperTitleFontSize = 13
58
- public static let componentBreakingNewsBreakingNewsBadgeUpperTitleLineHeight = 13
59
- public static let componentBreakingNewsBreakingNewsContainerHeightSize = 56
60
- public static let componentBreakingNewsBreakingNewsScrollingTextFontSize = 21
61
- public static let componentBreakingNewsBreakingNewsScrollingTextLineHeight = 24
62
- public static let componentButtonButtonBorderRadius = 8
63
- public static let componentButtonButtonBorderWidthSize = 2
64
- public static let componentButtonButtonContentGapSpace = 6
65
- public static let componentButtonButtonContentMinHeightSize = 24 /** This fixed height variable ensures that the button maintains a consistent height, even when the icon is not active. */
66
- public static let componentButtonButtonInlineSpace = 16
67
- public static let componentButtonButtonLabelFontSize = 15
68
- public static let componentButtonButtonLabelLineHeight = 15
69
- public static let componentButtonButtonStackSpace = 6
70
- public static let componentButtonPartnerLinkButtonInlineSpace = 8
71
- public static let componentButtonPartnerLinkButtonLabelFontSize = 16 /** Use this variable for controlling the font size of partner buttons. 16 - 16 - 16 - 18 */
72
- public static let componentButtonPartnerLinkButtonLabelHeightSize = 48
73
- public static let componentCardsNewstickerImageCardWidthSize = 206
74
- public static let componentCardsSearchResultCardImageHeightSizeStacked = 189
75
- public static let componentCardsSearchResultCardImageWidthSize = 216
76
- public static let componentCarouselAppEpaperCarouseBeilageItemWidth = 110
77
- public static let componentCarouselAppEpaperCarouselItemDefaultWidth = 144
78
- public static let componentCarouselAppEpaperCarouselItemFocusWidth = 182
79
- public static let componentCarouselGalleryTeaserAppGapSpace = 0 /** This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination. */
80
- public static let componentCarouselGalleryTeaserTitleBottomSpace = 28 /** This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination. */
81
- public static let componentCarouselStandardTeaserGalleryTeaserWidthApp = 280
82
- public static let componentCarouselStandardTeaserGalleryTeaserWidthWeb = 145
83
- public static let componentChipsChipsFontSize = 16 /** 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 */
84
- public static let componentChipsChipsInlineSpace = 12
85
- public static let componentChipsChipsStackSpace = 8
86
- public static let componentDSysDocs1columnMobile = 320 /** This variable is used only for this design system's component tests. */
87
- public static let componentDSysDocsBildDesignFrameSpace = 12 /** Variable used in spacing parameters of bild.design webpage mockups. move to bild.design group maybe */
88
- public static let componentDSysDocsDSysDocsWidthSize = 320
89
- public static let componentDSysDocsDocHeaderHeightSize = 144 /** This variable is used on documentation headers that contain info about platfroms and component names. 144 - 144 - 160 - 180 */
90
- public static let componentDSysDocsDsCaptionStackSpace05x = 4 /** This variable is used in documentation pages that have small caption or lables along with a UI component documented. 4 - 4 - 6 - 8 */
91
- public static let componentDSysDocsDsCaptionStackSpace1x = 8
92
- public static let componentDSysDocsDsMainContainerSpace = 0 /** This variable is used on documentation pages. This is an alternative variable to the main container max width variable. 0 - 0 - 68 - 68 */
93
- public static let componentDSysDocsFoundationsBannerHeightSize = 80 /** 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 */
94
- public static let componentDSysDocsMainContentStageSize = 320 /** 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 */
95
- public static let componentDSysDocsSpecsFontFamily = Gotham /** This variable is used only for texts and labels that form part of this design system's documentation. */
96
- public static let componentDSysDocsThinBannerVerticalHeightSize = 558 /** 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 */
97
- public static let componentDatepickerDatepickerItemDayWidthSize = 44
98
- public static let componentDatepickerDatepickerItemHeightSize = 44
99
- public static let componentDatepickerDatepickerItemYearWidthSize = 77
100
- public static let componentDrawersMobileMenuDrawerLeftInlineSpace = 20
101
- public static let componentDrawersMobileMenuDrawerMaxWidthSize = 400
102
- public static let componentDrawersMobileMenuDrawerRightInlineSpace = 16
103
- public static let componentDrawersMobileMenuDrawerStackSpace = 20
104
- public static let componentDropdownDropDownBorderRadius = 4
105
- public static let componentDropdownDropDownItemInlineSpace = 12
106
- public static let componentDropdownDropDownItemStackSpace = 8
107
- public static let componentFooterFooterFontFamily = Gotham XNarrow
108
- public static let componentFooterFooterFontSize = 11 /** 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. */
109
- public static let componentFooterFooterFontSizeUserOfferPages = 18
110
- public static let componentFooterFooterLineHeight = 14
111
- public static let componentFooterFooterLineHeightUserOfferPages = 26
112
- public static let componentIconIconSize = 24
113
- public static let componentIconIconSizeEmbeddMedia = 40
114
- public static let componentInfoElementInfoElementTeaserBadgeHeightSize = 16
115
- public static let componentInfoElementInfoElementTeaserBadgeMarginSpace = 4
116
- public static let componentInfoElementInfoElementTeaserImageHeightSize = 80
117
- public static let componentInfoElementInfoElementTeaserImageWidthSize = 80
118
- public static let componentInputfieldHeyInputContainerInlineSpace = 8
119
- public static let componentInputfieldInputFieldFontFamily = Lucida Grande
120
- public static let componentInputfieldInputFieldFontSize = 16 /** 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 */
121
- public static let componentInputfieldInputFieldHeightSize = 36
122
- public static let componentInputfieldInputFieldIMessageInlineSpace = 16
123
- public static let componentInputfieldInputFieldInlineSpace = 16
124
- public static let componentInputfieldInputFieldMessageGapSpace = 4
125
- public static let componentInputfieldInputFieldMiniLabelInlineSpace = 4
126
- public static let componentInputfieldInputFieldStackSpace = 6
127
- public static let componentLivetickerLiveTickerAppCardHeightSize = 96
128
- public static let componentLivetickerLiveTickerAppCardWidthSize = 250
129
- public static let componentLivetickerLiveTickerHeadlinesFontSize = 22 /** This variable is used for the font size of live ticker headlines. 22 - 22 - 32 - 32 */
130
- public static let componentLivetickerLiveTickerSliderItemWidthMaxSize = 257
131
- public static let componentLivetickerLiveTickerTimeHeadlineStackSpace = 4
132
- public static let componentLivetickerLiveTickerTimeStampFontSize = 14 /** This variable is used for the live ticker time stamp font size. 14 - 14 - 16 - 16 */
133
- public static let componentLivetickerLiveTickerheadlineFontWeight = 600
134
- public static let componentLivetickerTimeStampFontFamily = Gotham XNarrow
135
- public static let componentMediaplayerAudioPlayerHeaderStackSpace = 56
136
- public static let componentMediaplayerPodcastPlayButtonSize = 48
137
- public static let componentMediaplayerVidPlayerBottomBarGapSpace = 0
138
- public static let componentMediaplayerVidPlayerControlButtonIconSizeHover = 28
139
- public static let componentMediaplayerVidPlayerControlButtonSize = 42
140
- public static let componentMediaplayerVidPlayerProgressBarContainerHeightSize = 24
141
- public static let componentMediaplayerVidPlayerTimecodeContainerMinWidthSize = 45
142
- public static let componentMediaplayerVidPlayerTimecodeFontSize = 14
143
- public static let componentMediaplayerVidPlayerUnmuteButtonWidthSize = 220
144
- public static let componentMediaplayerVideoTimeBadgeFontFamily = Lucida Grande
145
- public static let componentMenuAppTopbarStageTitleHeight = 14
146
- public static let componentMenuAppTopbarTitleFontSize = 12
147
- public static let componentMenuHeyInputShadowVisibility = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 0) /** 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 */
148
- public static let componentMenuIOSappTopBarHeightSize = 44
149
- public static let componentMenuIOSappTopBarLeftInlineSpace = 12
150
- public static let componentMenuIOSappTopBarRightInlineSpace = 16
151
- public static let componentMenuMenuBottomStackSpace = 8
152
- public static let componentMenuMenuItemFontSize = 15 /** This variable is used on the menu link lane and on the mobile side menu drawer. */
153
- public static let componentMenuMenuItemSpace = 8
154
- public static let componentMenuMenuItemUtilFontSize = 12
155
- public static let componentMenuMenuItemUtilStackSpace = 10
156
- public static let componentMenuMenuLeftInlineSpace = 8
157
- public static let componentMenuMenuLinkItemInlineSpace = 4
158
- public static let componentMenuMenuLinkLaneHeightSize = 48
159
- public static let componentMenuMenuLogoDefaultSize = 56
160
- public static let componentMenuMenuLogoScrolledSize = 56
161
- public static let componentMenuMenuRightInlineSpace = 0
162
- public static let componentMenuMenuShadowVisibility = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 0.1) /** 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 */
163
- public static let componentMenuMenuSpecialNaviItemHeightSize = 48
164
- public static let componentMenuMenuTopStackSpace = 8
165
- public static let componentMenuMenuUtilityLinksContainerHeightSize = 56
166
- public static let componentMenuMenuUtilityLinksDividerHeightSize = 40
167
- public static let componentMenuMenuUtilityLinksGapSpace = 24
168
- public static let componentMenuMenuUtillinkItemHeightSize = 48
169
- public static let componentMenuSubNavBarHeightSize = 42
170
- public static let componentNewstickerNewsTickerAppCardHeightSize = 116
171
- public static let componentNewstickerNewsTickerAppCardWidthSize = 250
172
- public static let componentNewstickerNewsTickerBadgesInlineSpace = 8
173
- public static let componentNewstickerNewsTickerContentStackSpace = 4
174
- public static let componentNewstickerNewsTickerEntriesLeftInlineSpace = 22
175
- public static let componentNewstickerNewsTickerEntriesStackSpace = 22
176
- public static let componentNewstickerNewsTickerKickerInnerInlineSpace = 4
177
- public static let componentNewstickerNewsTickerKickerInnerStackSpace = 2
178
- public static let componentNewstickerNewsTickerLineInlineSpace = 6
179
- public static let componentNewstickerNewsTickerRedDotSize = 12
180
- public static let componentNewstickerNewsTickerSkeletonBottomSpace = 64
181
- public static let componentNewstickerNewsTickerTimeFontFamily = Lucida Grande
182
- public static let componentNewstickerNewsTickerTimeFontSize = 16 /** similar to kicker3 values - 16 - 16 - 16 - 18 */
183
- public static let componentNewstickerNewsTickerTimeFontWeight = 700
184
- public static let componentNewstickerNewsTickerTimeKickerStackSpace = 4
185
- public static let componentNewstickerNewsTickerTimeLineHeight = 20.8 /** 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. */
186
- public static let componentNewstickerNewsTickerTitlesInlineSpace = 18
187
- public static let componentPaginationGalleryPaginationContainerAppInlineSpace = 12
188
- public static let componentPaginationGalleryPaginationContainerStackSpace = 12 /** 12 - 12 - 16 - 16 - this component level variable references the semantic */
189
- public static let componentPaginationGalleryPaginationContainerWebInlineSpace = 8 /** 8 - 8 - 12 - 12 - this component level variable references the inlineSpaceConst semantic variables; SM for smaller devices, MD for larger devices */
190
- public static let componentPaginationGalleryPaginationItemHeightSize = 4
191
- public static let componentPaginationScrollBarThicknessSize = 8
192
- public static let componentPaywallPaywallCardMaxWidthSize = 346
193
- public static let componentPaywallPaywallCardPriceNoteFontSize = 40 /** This variable is used on the paywall card text under the price tag. 40 - 40 - 40 - 40 */
194
- public static let componentPaywallPaywallCardPriceNoteLineHeight = 40
195
- public static let componentPaywallPaywallCardPriceTagFontSize = 64 /** This variable is used on the paywall card price tag. 64 constant */
196
- public static let componentPaywallPaywallCardPriceTagLineHeight = 64
197
- public static let componentPaywallPaywallContainerGapSpace = -48
198
- public static let componentPaywallPaywallHeaderBottomStackSpace = 80
199
- public static let componentQuotesQuoteContainerInlineSpace = 16
200
- public static let componentQuotesQuoteContainerStackSpace = 16
201
- public static let componentQuotesQuoteContentGapSpace = 16
202
- public static let componentQuotesQuoteQuotationMarksFontSize = 28
203
- public static let componentRadioButtonsRadioSelectorDotActiveSize = 12
204
- public static let componentRadioButtonsRadioSelectorSize = 20
205
- public static let componentSearchSearchResultBadgeHeightSize = 18
206
- public static let componentSectionTitleSectionTitleArrowInlineSpace = 5 /** 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. */
207
- public static let componentSectionTitleSectionTitleArrowInlineSpaceActive = 5 /** 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. */
208
- public static let componentSectionTitleSectionTitleHeightSize = 32
209
- public static let componentSectionTitleSectionTitleInnerStackBottomSpace = 12
210
- public static let componentSeparatorsSeparatorThicknessSize = 2
211
- public static let componentSkeletonsArticleSkeletonImageInlineSpace = 12
212
- public static let componentSkeletonsArticleSkeletonTextInlineSpace = 0
213
- public static let componentSkeletonsArticleTextSkeletonHeightSize = 270
214
- public static let componentSkeletonsHeadlinesSkeletonImagePlaceholderMaxWidth = 282
215
- public static let componentSlidersSliderProgressBarHoverHeightSize = 8
216
- public static let componentSlidersSliderProgressBarIdleHeightSize = 4
217
- public static let componentSlidersSliderProgressInactiveHeightSize = 2
218
- public static let componentSlidersVidPlayerProgressBarHeightSize = 12
219
- public static let componentSpecialNaviSpecialNaviInlineSpace = 24
220
- public static let componentSpinnersVideoSpinnerSize = 40
221
- public static let componentSpinnersVideoSpinnerSize05x = 20
222
- public static let componentSpinnersVideoSpinnerStrokeSize = 2
223
- public static let componentTableTableColumnWidthSize05x = 40
224
- public static let componentTableTableColumnWidthSize075x = 56
225
- public static let componentTableTableColumnWidthSize15x = 120
226
- public static let componentTableTableColumnWidthSize1x = 80
227
- public static let componentTableTableColumnWidthSize25x = 180
228
- public static let componentTableTableColumnWidthSize2x = 140
229
- public static let componentTableTableColumnWidthSize3x = 200
230
- public static let componentTableTableItemMaxWidthSize = 224
231
- public static let componentTabsAndroidTabbarHeightSize = 56
232
- public static let componentTabsAppsTabsLabelFontSize = 11 /** 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. */
233
- public static let componentTabsAppsTabsLabelLineHeight = 14.4 /** 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. */
234
- public static let componentTabsIosTabbarHeightSize = 49
235
- public static let componentTabsTabLabelFontSize = 16 /** 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. */
236
- public static let componentTabsTabLabelFontSizeLine = 12 /** 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. */
237
- public static let componentTabsTopBarTabItemHeightSize = 44
238
- public static let componentTeaserATeaserATeaserHeadlineFontSize = 24 /** This variable references the semantic variables headline3 (XS&SM) and headline2 (MD&LG). 28 - 28 - 48 - 64 */
239
- public static let componentTeaserATeaserATeaserHeadlineLineHeight = 24
240
- public static let componentTeaserATeaserATeaserKickerFontSize = 14 /** 16 - 16 - 22 - 24 This variable references the semantic variables kicker3fontsize and kicker2fontsize. At the 600px breakpoint smaller devices use the kicker3 variable */
241
- public static let componentTeaserATeaserATeaserKickerLineHeight = 14
242
- public static let componentTeaserATeaserATeaserTitleInlineSpace = 8
243
- public static let componentTeaserBTeaserBTeaserTitleInlineSpace = 8
244
- public static let componentTeaserBildPlayBildPlayTeaserWidthSize = 145
245
- public static let componentTeaserMQTeaserMQTeaserHeadlineFontSize = 16 /** XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 // LG-headline3FontSize:40 */
246
- public static let componentTeaserMQTeaserMQTeaserHeadlineFontWeight = 600
247
- public static let componentTeaserMQTeaserMQTeaserHeadlineLineHeight = 18.4
248
- public static let componentTeaserMQTeaserMqTeaserTitleInlineSpace = 8
249
- public static let componentTeaserQTeaserQTeaserTitleInlineSpace = 8
250
- public static let componentTeaserQTeaserQuadHeadlineFontSize = 36 /** This component level variable is used on the quad teaser headline. It references the semantic level variable headline1. 48 - 48 - 72 - 100 */
251
- public static let componentTeaserQTeaserQuadHeadlineLineHeight = 37.8
252
- public static let componentTeaserQTeaserQuadKickerFontSize = 16
253
- public static let componentTeaserStdTeaserStdTeaserBadgesMarginSpace = 4 /** This variable is used for creating space around the outside of a subscription badge or video icon badge. */
254
- public static let componentTeaserStdTeaserStdTeaserImageTitleGapSpace = 4
255
- public static let componentTeaserStdTeaserStdTeaserKickerHeadlineStackSpace = 2 /** 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 */
256
- public static let componentTeaserSuperASuperATeaserTitleInlineSpace = 16 /** 16 - 16 - 16 - 16 */
257
- public static let componentTeaserTeaserBadgesHeightSizeLg = 32 /** This token is for controling the height of badges that are inside of teasers. 32 - 32 - 32 - 40 */
258
- public static let componentTeaserTeaserBadgesHeightSizeSm = 24
259
- public static let componentTeaserTeaserBadgesMarginSpace = 8 /** This variable is used for creating space around the outside of a subscription badge or video icon badge. */
260
- public static let componentTeaserTeaserKickerBgInlineSpace = 6
261
- public static let componentTeaserTeaserKickerBgStackSpace = 2
262
- public static let componentTeaserTeaserLayoutGridSpace = 12
263
- public static let componentTeaserTeaserTitleBottomStackSpace = 12
264
- public static let componentTeaserTeaserTitleGapSpace = 4
265
- public static let componentTeaserTeaserTitleInlineLeftSpace = 12
266
- public static let componentTeaserTeaserTitleStackSpace = 4
267
- public static let componentToggleSwitchAppToggleItemLabelFontSize = 14 /** This variable is used on labels in list items with toggle switches found in app preferences. 14 - 14 - 16 - 18 */
268
- public static let componentToggleSwitchAppToggleItemLabelLineHeight = 14.1 /** This variable is used on labels in list items with toggle switches found in app preferences. 14.1 - 14.1 - 16.2 - 18.2 */
269
- public static let componentVideoVerticalVideoMockHeadlineFontSize = 22
270
- public static let componentVideoVideoAdBadgeFontSize = 14 /** 14 - 14 - 16 - 16 -- This variable is used in the videoAdBadge font size parameter. */
271
- public static let componentVideoVideoBadgeTimeLineHeight = 21
272
- public static let componentVideoVideoFrameInlineSpace = 0
273
- public static let componentVideoVideoRedPlayIconHeightSize = 10 /** This variable is used for changing the red play icon inside the white square. */
274
- public static let componentVideoVideoRedPlayIconWidthSize = 8
275
- public static let componentVideoVideoSkeletonContainerHeight = 180
276
- public static let componentVideoVideoTimeBadgeCornerSize = 2 /** 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. */
277
- public static let componentVideoVideoTimeBadgeFontSize = 16 /** 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. */
278
- public static let componentVideoVideoTimeBadgeSize = 24 /** 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. */
279
- public static let semanticBorderBorderRadiusBorderRadiusFull = 9999 /** creates fully rounded shapes, typically used for circular elements like avatars. */
280
- public static let semanticBorderBorderRadiusBorderRadiusLg = 16 /** 16-16-16-16 – use for corner rounding on small cards, overlays, and modal surfaces. */
281
- public static let semanticBorderBorderRadiusBorderRadiusMd = 8 /** 8-8-8-8 – Standard radius for buttons, chips, input fields, and medium-sized interactive elements. */
282
- public static let semanticBorderBorderRadiusBorderRadiusNone = 0 /** 0-0-0-0 – no corner rounding. Used as default for flat layouts, content modules, images, and teaser elements. */
283
- public static let semanticBorderBorderRadiusBorderRadiusSm = 4 /** 4-4-4-4 – use for corner rounding on compact components like checkboxes or small input controls. */
284
- public static let semanticBorderBorderRadiusBorderRadiusXl = 24 /** 24-24-24-24 use for corner rounding on larger cards, overlays, dialogs, and other container components. */
285
- public static let semanticBorderBorderRadiusBorderRadiusXs = 2 /** 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges. */
286
- public static let semanticBorderBorderWidthBorderWidthHairline = 0.33 /** 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. */
287
- public static let semanticBorderBorderWidthBorderWidthThick = 2 /** 2-2-2-2 – use for stronger outlines on form elements (inputs), buttons (outline variants), and interaction states (focus, hover, active) */
288
- public static let semanticBorderBorderWidthBorderWidthThin = 1 /** 1-1-1-1 – use for subtle outlines and dividers */
289
- public static let /**
290
- * 389 - 599 - 1023 - 1024 – Defines the minimum width of the main frame for different breakpoints.
291
- * Apply this token to the main frame of page layouts to simulate realistic maximum widths across responsive viewports.
292
- */
293
- semanticLayoutBreakpointsBreakpointMaxWidthSize = 389
294
- public static let /**
295
- * 320 - 390 - 600 - 1024 – Defines the minimum width of the main frame for different breakpoints.
296
- * Apply this token to the main frame of page layouts to simulate realistic minimum widths across responsive viewports.
297
- */
298
- semanticLayoutBreakpointsBreakpointMinWidthSize = 320
299
- public static let /**
300
- * Common viewport height size based on the selected mode.
301
- * Apply this token to the main frame of page layouts to simulate realistic vertical space.
302
- */
303
- semanticLayoutCanvasHeightSizeApp = 568
304
- public static let /**
305
- * Common viewport height size based on the selected mode.
306
- * Apply this token to the main frame of page layouts to simulate realistic vertical space.
307
- */
308
- semanticLayoutCanvasHeightSizeWeb = 568
309
- public static let /**
310
- * Common viewport width size based on the selected breakpoint.
311
- * Apply this token to the main frame of page layouts.
312
- */
313
- semanticLayoutCanvasWidthSizeApp = 320
314
- public static let /**
315
- * Common viewport width size based on the selected breakpoint.
316
- * Apply this token to the main frame of page layouts.
317
- */
318
- semanticLayoutCanvasWidthSizeWeb = 320
319
- public static let semanticLayoutContentWidthContentMaxWidthFull = 1024 /** Use for content containers that should fill the full width of the page */
320
- public static let semanticLayoutContentWidthContentMaxWidthMedium = 700 /** 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. */
321
- public static let semanticLayoutGridConstantGridSpaceConstLg = 16 /** 16-16-16-16 – use for fixed side paddings and gutters */
322
- public static let semanticLayoutGridConstantGridSpaceConstSm = 12 /** 12-12-12-12 – use for fixed side paddings and gutters */
323
- public static let semanticLayoutGridLayoutGuideLayoutGuideGridColums = 4 /** Used to set the column count in Figma Layout guide Grids */
324
- public static let semanticLayoutGridResponsiveGridSpaceRespBase = 12 /** 12-12-12-16 use for side paddings and gutters in responsive layouts */
325
- public static let semanticLayoutGridResponsiveGridSpaceRespLg = 24 /** 24-24-32-32 – use for side paddings and gutters in responsive layouts */
326
- public static let semanticLayoutGridResponsiveGridSpaceRespSm = 6 /** 6-6-6-8 use for side paddings and gutters in responsive layouts */
327
- public static let semanticLayoutGridResponsiveGridSpaceRespXl = 48 /** 48-48-64-64 – use for side paddings and gutters in responsive layouts */
328
- public static let semanticLayoutGridResponsivePageInlineSpace = 0 /** 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. */
329
- public static let semanticLayoutSectionParagraphEndSpace = 16 /** 16-16-32-32 – Use for spacing after paragraphs in text content */
330
- public static let semanticLayoutSectionSectionSpaceBase = 36 /** 36-36-48-48 Use for vertical spacing between sections in a layout. */
331
- public static let semanticLayoutSectionSectionSpaceLg = 72 /** 72-72-96-96 – Use for vertical spacing between sections in a layout */
332
- public static let semanticLayoutSectionSectionSpaceSm = 24 /** 24-24-36-36 Use for vertical spacing between subsections in a layout */
333
- public static let semanticSizeConstantSizeConst2Xl = 72 /** 72-72-72-72 – Use for setting fixed height and width of UI elements */
334
- public static let semanticSizeConstantSizeConst2Xs = 24 /** 24-24-24-24 Use for setting fixed height and width of UI elements */
335
- public static let semanticSizeConstantSizeConst3Xl = 96 /** 96-96-96-96 – Use for setting fixed height and width of UI elements */
336
- public static let semanticSizeConstantSizeConst3Xs = 16 /** 16-16-16-16 – Use for setting fixed height and width of UI elements */
337
- public static let semanticSizeConstantSizeConst4Xl = 148 /** 148-148-148-148 – Use for setting fixed height and width of UI elements */
338
- public static let semanticSizeConstantSizeConst4Xs = 8 /** 8-8-8-8 – Use for setting fixed height and width of UI elements */
339
- public static let semanticSizeConstantSizeConstLg = 56 /** 56-56-56-56 – Use for setting fixed height and width of UI elements */
340
- public static let semanticSizeConstantSizeConstMd = 48 /** 48-48-48-48 Use for setting fixed height and width of UI elements */
341
- public static let semanticSizeConstantSizeConstSm = 40 /** 40-40-40-40 – Use for setting fixed height and width of UI elements */
342
- public static let semanticSizeConstantSizeConstXl = 64 /** 64-64-64-64 – Use for setting fixed height and width of UI elements */
343
- public static let semanticSizeConstantSizeConstXs = 32 /** 32-32-32-32 – Use for setting fixed height and width of UI elements */
344
- public static let semanticSizeResponsiveSizeResp2Xl = 72 /** 72-72-92-100 – Use for setting height and width of UI elements that scale across breakpoints */
345
- public static let semanticSizeResponsiveSizeResp2Xs = 24 /** 24-24-32-32 – Use for setting height and width of UI elements that scale across breakpoints */
346
- public static let semanticSizeResponsiveSizeResp3Xl = 96 /** 96-96-120-148 – Use for setting height and width of UI elements that scale across breakpoints */
347
- public static let semanticSizeResponsiveSizeResp3Xs = 16 /** 16-16-16-24 – Use for setting height and width of UI elements that scale across breakpoints */
348
- public static let semanticSizeResponsiveSizeResp4Xl = 148 /** 148-148-160-180 – Use for setting height and width of UI elements that scale across breakpoints */
349
- public static let semanticSizeResponsiveSizeResp4Xs = 12 /** 12-12-14-16 – Use for setting height and width of UI elements that scale across breakpoints */
350
- public static let semanticSizeResponsiveSizeRespLg = 56 /** 56-56-72-92 – Use for setting height and width of UI elements that scale across breakpoints */
351
- public static let semanticSizeResponsiveSizeRespMd = 48 /** 48-48-64-72 – Use for setting height and width of UI elements that scale across breakpoints */
352
- public static let semanticSizeResponsiveSizeRespSm = 40 /** 40-40-48-56 – Use for setting height and width of UI elements that scale across breakpoints */
353
- public static let semanticSizeResponsiveSizeRespXl = 64 /** 64-64-80-96 Use for setting height and width of UI elements that scale across breakpoints */
354
- public static let semanticSizeResponsiveSizeRespXs = 32 /** 32-32-40-48 – Use for setting height and width of UI elements that scale across breakpoints */
355
- public static let semanticSpaceGapConstantGapSpaceConst2Xl = 32 /** 32-32-32-32 Use for fixed gaps between items inside of UI elements */
356
- public static let semanticSpaceGapConstantGapSpaceConst2Xs = 2 /** 2-2-2-2 – Use for fixed gaps between items inside of UI elements */
357
- public static let semanticSpaceGapConstantGapSpaceConst3Xl = 48 /** 48-48-48-48 Use for fixed gaps between items inside of UI elements */
358
- public static let semanticSpaceGapConstantGapSpaceConstLg = 16 /** 16-16-16-16 – Use for fixed gaps between items inside of UI elements */
359
- public static let semanticSpaceGapConstantGapSpaceConstMd = 12 /** 12-12-12-12 – Use for fixed gaps between items inside of UI elements */
360
- public static let semanticSpaceGapConstantGapSpaceConstSm = 8 /** 8-8-8-8 – Use for fixed gaps between items inside of UI elements */
361
- public static let semanticSpaceGapConstantGapSpaceConstXl = 24 /** 24-24-24-24 Use for fixed gaps between items inside of UI elements */
362
- public static let semanticSpaceGapConstantGapSpaceConstXs = 4 /** 4-4-4-4 – Use for fixed gaps between items inside of UI elements */
363
- public static let semanticSpaceGapResponsiveGapSpaceResp2Xl = 32 /** 32-32-48-64 Use for gaps between items inside of UI elements that scale across breakpoints */
364
- public static let semanticSpaceGapResponsiveGapSpaceResp2Xs = 2 /** 2-2-4-6 – Use for gaps between items inside of UI elements that scale across breakpoints */
365
- public static let semanticSpaceGapResponsiveGapSpaceResp3Xl = 48 /** 48-48-72-96 Use for gaps between items inside of UI elements that scale across breakpoints */
366
- public static let semanticSpaceGapResponsiveGapSpaceRespLg = 16 /** 16-16-24-32 – Use for gaps between items inside of UI elements that scale across breakpoints */
367
- public static let semanticSpaceGapResponsiveGapSpaceRespMd = 12 /** 12-12-16-24 Use for gaps between items inside of UI elements that scale across breakpoints */
368
- public static let semanticSpaceGapResponsiveGapSpaceRespSm = 8 /** 8-8-12-16 – Use for gaps between items inside of UI elements that scale across breakpoints */
369
- public static let semanticSpaceGapResponsiveGapSpaceRespXl = 24 /** 24-24-32-48 Use for gaps between items inside of UI elements that scale across breakpoints */
370
- public static let semanticSpaceGapResponsiveGapSpaceRespXs = 4 /** 4-4-6-8 – Use for gaps between items inside of UI elements that scale across breakpoints */
371
- public static let semanticSpaceInlineConstantInlineSpaceConst2Xl = 32 /** 32-32-32-32 Use for fixed horizontal (left/right) padding of UI elements */
372
- public static let semanticSpaceInlineConstantInlineSpaceConst2Xs = 4 /** 4-4-4-4 – Use for fixed horizontal (left/right) padding of UI elements */
373
- public static let semanticSpaceInlineConstantInlineSpaceConst3Xs = 2 /** 2-2-2-2 Use for fixed horizontal (left/right) padding of UI elements */
374
- public static let semanticSpaceInlineConstantInlineSpaceConstLg = 16 /** 16-16-16-16 – Use for fixed horizontal (left/right) padding of UI elements */
375
- public static let semanticSpaceInlineConstantInlineSpaceConstMd = 12 /** 12-12-12-12 – Use for fixed horizontal (left/right) padding of UI elements */
376
- public static let semanticSpaceInlineConstantInlineSpaceConstSm = 8 /** 8-8-8-8 – Use for fixed horizontal (left/right) padding of UI elements */
377
- public static let semanticSpaceInlineConstantInlineSpaceConstXl = 24 /** 24-24-24-24 Use for fixed horizontal (left/right) padding of UI elements */
378
- public static let semanticSpaceInlineConstantInlineSpaceConstXs = 6 /** 6-6-6-6 – Use for fixed horizontal (left/right) padding of UI elements */
379
- public static let semanticSpaceInlineResponsiveInlineSpaceResp2Xl = 32 /** 32-32-48-64 use for horizontal (left/right) padding of UI elements that scales across breakpoints */
380
- public static let semanticSpaceInlineResponsiveInlineSpaceRespLg = 16 /** 16-16-24-32 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
381
- public static let semanticSpaceInlineResponsiveInlineSpaceRespMd = 12 /** 12-12-16-24 use for horizontal (left/right) padding of UI elements that scales across breakpoints */
382
- public static let semanticSpaceInlineResponsiveInlineSpaceRespSm = 8 /** 8-8-12-16 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
383
- public static let semanticSpaceInlineResponsiveInlineSpaceRespXl = 24 /** 24-24-32-40 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
384
- public static let semanticSpaceStackConstantStackSpaceConst2Xl = 32 /** 32-32-32-32 – Use for fixed vertical (top/bottom) padding of UI elements */
385
- public static let semanticSpaceStackConstantStackSpaceConst2Xs = 4 /** 4-4-4-4 – Use for fixed vertical (top/bottom) padding of UI elements */
386
- public static let semanticSpaceStackConstantStackSpaceConst3Xs = 2 /** 2-2-2-2 Use for fixed vertical (top/bottom) padding of UI elements */
387
- public static let semanticSpaceStackConstantStackSpaceConstLg = 16 /** 16-16-16-16 – Use for fixed vertical (top/bottom) padding of UI elements */
388
- public static let semanticSpaceStackConstantStackSpaceConstMd = 12 /** 12-12-12-12 Use for fixed vertical (top/bottom) padding of UI elements */
389
- public static let semanticSpaceStackConstantStackSpaceConstSm = 8 /** 8-8-8-8 – Use for fixed vertical (top/bottom) padding of UI elements */
390
- public static let semanticSpaceStackConstantStackSpaceConstXl = 24 /** 24-24-24-24 Use for fixed vertical (top/bottom) padding of UI elements */
391
- public static let semanticSpaceStackConstantStackSpaceConstXs = 6 /** 6-6-6-6 – Use for fixed vertical (top/bottom) padding of UI elements */
392
- public static let semanticSpaceStackResponsiveStackSpaceResp2Xl = 32 /** 32-32-48-64 use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
393
- public static let semanticSpaceStackResponsiveStackSpaceRespLg = 16 /** 16-16-24-32 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
394
- public static let semanticSpaceStackResponsiveStackSpaceRespMd = 12 /** 12-12-16-24 use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
395
- public static let semanticSpaceStackResponsiveStackSpaceRespSm = 8 /** 8-8-12-16 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
396
- public static let semanticSpaceStackResponsiveStackSpaceRespXl = 24 /** 24-24-32-40 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
397
- public static let semanticTypographyFontFamilyBodyFontFamily = Lucida Grande /** This variable references the bodyFontFamily variable from the branding collection. */
398
- public static let semanticTypographyFontFamilyCalloutFontFamily = Lucida Grande
399
- public static let semanticTypographyFontFamilyDisplayFontFamily = Lucida Grande
400
- public static let semanticTypographyFontFamilyFootnoteFontFamily = Lucida Grande
401
- public static let semanticTypographyFontFamilyHeadlineFontFamily = Lucida Grande
402
- public static let semanticTypographyFontFamilyKickerFontFamily = Lucida Grande
403
- public static let semanticTypographyFontFamilyLabelFontFamily = Lucida Grande
404
- public static let semanticTypographyFontFamilyQuoteFontFamily = Lucida Grande
405
- public static let semanticTypographyFontFamilySubheadlineFontFamily = Lucida Grande
406
- public static let semanticTypographyFontFamilyTitleFontFamily = Lucida Grande
407
- public static let semanticTypographyFontSizeBodyBodyFontSize = 17 /** This variable is used on the body text style's font size parameter. It remains constant at 21. */
408
- public static let semanticTypographyFontSizeCalloutCallout1FontSize = 16 /** This token is used for the font size parameter of the callout text style. 18 - 18 - 22 - 22 */
409
- public static let semanticTypographyFontSizeDisplayDisplay1FontSize = 39 /** This variable is used on the font size parameter for the display1 text style. 40 - 40 - 72 - 120 */
410
- public static let semanticTypographyFontSizeDisplayDisplay2FontSize = 35 /** This variable is used for the font size parameter of the Display2 text style. 36 - 36 - 42 - 64 */
411
- public static let semanticTypographyFontSizeDisplayDisplay3FontSize = 27 /** This variable is used on the display3 font size parameter of the display3 text style. 28 - 28 - 32 - 40 */
412
- public static let semanticTypographyFontSizeFootnoteFootnote1FontSize = 13 /** This token is used on the footnote text style font size parameter. 16 - 16 - 16 - 18 */
413
- public static let semanticTypographyFontSizeFootnoteFootnote2FontSize = 10 /** This token is used in the font size parameter of the footnote2 text style. 12 - 12 - 12 - 16 */
414
- public static let semanticTypographyFontSizeHeadlineHeadline1FontSize = 36 /** This token is used for the headline1 text style's font size parameter. 48 - 48 - 72 - 100 */
415
- public static let semanticTypographyFontSizeHeadlineHeadline2FontSize = 30 /** This token is used on the headline2 text style's font size parameter. 40 - 40 - 48 - 64 */
416
- public static let semanticTypographyFontSizeHeadlineHeadline3FontSize = 24 /** This token is used on the headline3 text style's font size parameter. 28 - 28 - 36 - 40 */
417
- public static let semanticTypographyFontSizeHeadlineHeadline4FontSize = 16 /** This token controls the headline4 text style's font size parameter: 22 - 22 - 26 - 32 */
418
- public static let semanticTypographyFontSizeKickerKicker1FontSize = 16 /** 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. */
419
- public static let semanticTypographyFontSizeKickerKicker2FontSize = 16 /** 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 */
420
- public static let semanticTypographyFontSizeKickerKicker3FontSize = 14 /** Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 16 - 16 - 18 - 20 */
421
- public static let semanticTypographyFontSizeKickerKicker4FontSize = 12 /** Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 14 - 14 - 16 - 16 */
422
- public static let semanticTypographyFontSizeLabelLabel1FontSize = 17 /** This token is used in the label1 text style font size parameter. Its value remains constant at 17 across device sizes. */
423
- public static let semanticTypographyFontSizeLabelLabel1FontSizeResponsive = 10 /** 10 - 10 - 15 - 17 Use this label font size when you want your label's font size to change across device sizes. */
424
- public static let semanticTypographyFontSizeLabelLabel2FontSize = 15 /** This variable controls the label2 text style's font size parameter. Its value remains constant at 15. */
425
- public static let semanticTypographyFontSizeLabelLabel3FontSize = 12 /** This token is used in the label3 text style's font size parameter. Its value remains constant at 12 across device sizes. */
426
- public static let semanticTypographyFontSizeLabelLabel4FontSize = 8 /** This token is used in the font size parameter of the label4 text style. The value remains constant at 8. */
427
- public static let semanticTypographyFontSizeQuoteQuoteFontSize = 16 /** 16 - 16 - 18 - 20 -- This variable is used for controlling the font size of the quote text style. */
428
- public static let semanticTypographyFontSizeSubheadlineSubheadline1FontSize = 18 /** This token controls the subheadline1 font size parameter. 24 - 24 - 32 - 36 */
429
- public static let semanticTypographyFontSizeTitleTitle1FontSize = 22 /** 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
430
- public static let semanticTypographyFontSizeTitleTitle2FontSize = 14 /** 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
431
- public static let semanticTypographyFontWeightBodyBodyFontWeightBold = 700
432
- public static let semanticTypographyFontWeightBodyBodyFontWeightBook = 400
433
- public static let semanticTypographyFontWeightCalloutCalloutFontWeight = 800
434
- public static let semanticTypographyFontWeightDisplayDisplayFontWeight = 800
435
- public static let semanticTypographyFontWeightFootnoteFootnoteFontWeightBold = 700
436
- public static let semanticTypographyFontWeightFootnoteFootnoteFontWeightBook = 400
437
- public static let semanticTypographyFontWeightHeadlineHeadline1FontWeight = 700
438
- public static let semanticTypographyFontWeightHeadlineHeadline1FontWeightSt = 700 /** This variable is a string type variable for controlling not only headline font weight but also the italic style for Sport Bild headlines. */
439
- public static let semanticTypographyFontWeightHeadlineHeadline2FontWeight = 700
440
- public static let semanticTypographyFontWeightHeadlineHeadline3FontWeight = 700
441
- public static let semanticTypographyFontWeightHeadlineHeadline4FontWeight = 600
442
- public static let semanticTypographyFontWeightKickerKickerFontWeight = 700
443
- public static let semanticTypographyFontWeightKickerKickerFontWeightSt = 700
444
- public static let semanticTypographyFontWeightLabelLabelFontWeightBold = 700
445
- public static let semanticTypographyFontWeightLabelLabelFontWeightBook = 400
446
- public static let semanticTypographyFontWeightQuoteQuoteFontWeight = 800
447
- public static let semanticTypographyFontWeightSubheadlineSubheadlineFontWeight = 700
448
- public static let semanticTypographyFontWeightTitleTitleFontWeight = 800
449
- public static let semanticTypographyLetterSpacingDisplayDisplay1LetterSpacing = -0.5 /** -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. */
450
- public static let semanticTypographyLetterSpacingDisplayDisplay2LetterSpacing = -0.5 /** -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. */
451
- public static let semanticTypographyLetterSpacingDisplayDisplay3LetterSpacing = -0.5 /** -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. */
452
- public static let semanticTypographyLetterSpacingLetterSpacingNegativeLg = -2 /** -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. */
453
- public static let semanticTypographyLetterSpacingLetterSpacingNegativeMd = -1 /** -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. */
454
- public static let semanticTypographyLetterSpacingLetterSpacingNegativeSm = -0.5 /** -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. */
455
- public static let semanticTypographyLetterSpacingLetterSpacingNegativeXs = -0.25 /** -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. */
456
- public static let semanticTypographyLetterSpacingLetterSpacingNone = 0 /** 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. */
457
- public static let semanticTypographyLetterSpacingLetterSpacingPositiveLg = 2 /** 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. */
458
- public static let semanticTypographyLetterSpacingLetterSpacingPositiveMd = 1 /** 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. */
459
- public static let semanticTypographyLetterSpacingLetterSpacingPositiveSm = 0.5 /** 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. */
460
- public static let semanticTypographyLetterSpacingLetterSpacingPositiveXs = 0.25 /** 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. */
461
- public static let semanticTypographyLineHeightBodyBodyLineHeight = 29.75 /** Figma's font line height currently does not allow for multipliers as is used on current website css var(--body-line-height) */
462
- public static let semanticTypographyLineHeightCalloutCalloutLineHeight = 20.8
463
- public static let semanticTypographyLineHeightDisplayDisplay1LineHeight = 40
464
- public static let semanticTypographyLineHeightDisplayDisplay2LineHeight = 36
465
- public static let semanticTypographyLineHeightDisplayDisplay3LineHeight = 28
466
- public static let semanticTypographyLineHeightFootnoteFootnote1LineHeight = 16.9
467
- public static let semanticTypographyLineHeightFootnoteFootnote2LineHeight = 13
468
- public static let semanticTypographyLineHeightHeadlineHeadline1LineHeight = 37.8
469
- public static let semanticTypographyLineHeightHeadlineHeadline2LineHeight = 33
470
- public static let semanticTypographyLineHeightHeadlineHeadline3LineHeight = 26.4
471
- public static let semanticTypographyLineHeightHeadlineHeadline4LineHeight = 18.4
472
- public static let semanticTypographyLineHeightKickerKicker1LineHeight = 17.6
473
- public static let semanticTypographyLineHeightKickerKicker2LineHeight = 17.6
474
- public static let semanticTypographyLineHeightKickerKicker3LineHeight = 15.4
475
- public static let semanticTypographyLineHeightKickerKicker4LineHeight = 13.2
476
- public static let semanticTypographyLineHeightLabelLabel1LineHeight = 20.4 /** This variable is used in the label1 text style's line height parameter. It references branding variables for brand specific line heights. */
477
- public static let semanticTypographyLineHeightLabelLabel1ResponsiveLineHeight = 10
478
- public static let semanticTypographyLineHeightLabelLabel2LineHeight = 16
479
- public static let semanticTypographyLineHeightLabelLabel3LineHeight = 14.4
480
- public static let semanticTypographyLineHeightLabelLabel4LineHeight = 10
481
- public static let semanticTypographyLineHeightQuoteQuoteLineHeight = 20.8 /** This variable is used in the quote text style line height parameter. */
482
- public static let semanticTypographyLineHeightSubheadlineSubheadline1LineHeight = 23.4
483
- public static let semanticTypographyLineHeightTitleTitle1LineHeight = 26.4
484
- public static let semanticTypographyLineHeightTitleTitle2LineHeight = 16.8 /** html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
485
- public static let semanticVisibilityBooleanHideOnDesktop = true /** Use for hiding elements on desktop viewport sizes only */
486
- public static let semanticVisibilityBooleanHideOnMobile = false /** Use for hiding elements on mobile viewport sizes */
487
- public static let semanticVisibilityBooleanVisilbleAbove600px = false /** Use for showing elements on viewport sizes above 600 px */
488
- public static let semanticVisibilityBooleanVisilbleBelow600px = true /** Use for showing elements on viewport sizes below 600 px */
489
- public static let semanticVisibilityBooleanVisilbleDesktopOnly = false /** Use for showing elements on desktop viewport sizes only */
490
- public static let semanticVisibilityBooleanVisilbleMobileOnly = true /** Use for showing elements on mobile viewport sizes only */
491
- public static let semanticVisibilityBooleanVisilbleTabletOnly = false /** Use for showing elements on tablet viewport sizes only */
492
- public static let semanticVisibilityVariantSwitchBpSpecificApp = compact
493
- public static let semanticVisibilityVariantSwitchBpSpecificWeb = xs/sm
494
- public static let semanticVisibilityVariantSwitchChangeOnLg = xs/sm/md
495
- public static let semanticVisibilityVariantSwitchChangeOnMd = xs/sm /** 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. */
496
- }
11
+ public class BreakpointAdvertorialXs {
12
+ /** 0-0-0-0 no corner rounding. Used as default for flat layouts, content modules, images, and teaser elements. */
13
+ public static let SemanticBorderBorderRadiusBorderRadiusNone = 0
14
+ /** 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges. */
15
+ public static let SemanticBorderBorderRadiusBorderRadiusXS = 2
16
+ /** 4-4-4-4 use for corner rounding on compact components like checkboxes or small input controls. */
17
+ public static let SemanticBorderBorderRadiusBorderRadiusSM = 4
18
+ /** 8-8-8-8 Standard radius for buttons, chips, input fields, and medium-sized interactive elements. */
19
+ public static let SemanticBorderBorderRadiusBorderRadiusMD = 8
20
+ /** 16-16-16-16 use for corner rounding on small cards, overlays, and modal surfaces. */
21
+ public static let SemanticBorderBorderRadiusBorderRadiusLG = 16
22
+ /** 24-24-24-24 use for corner rounding on larger cards, overlays, dialogs, and other container components. */
23
+ public static let SemanticBorderBorderRadiusBorderRadiusXL = 24
24
+ /** creates fully rounded shapes, typically used for circular elements like avatars. */
25
+ public static let SemanticBorderBorderRadiusBorderRadiusFull = 9999
26
+ /** 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. */
27
+ public static let SemanticBorderBorderWidthBorderWidthHairline = 0.33
28
+ /** 1-1-1-1 use for subtle outlines and dividers */
29
+ public static let SemanticBorderBorderWidthBorderWidthThin = 1
30
+ /** 2-2-2-2 use for stronger outlines on form elements (inputs), buttons (outline variants), and interaction states (focus, hover, active) */
31
+ public static let SemanticBorderBorderWidthBorderWidthThick = 2
32
+ /** Common viewport width size based on the selected breakpoint.
33
+ Apply this token to the main frame of page layouts. */
34
+ public static let SemanticLayoutCanvasWidthSizeWeb = 320
35
+ /** Common viewport height size based on the selected mode.
36
+ Apply this token to the main frame of page layouts to simulate realistic vertical space. */
37
+ public static let SemanticLayoutCanvasHeightSizeWeb = 568
38
+ /** Common viewport width size based on the selected breakpoint.
39
+ Apply this token to the main frame of page layouts. */
40
+ public static let SemanticLayoutCanvasWidthSizeApp = 320
41
+ /** Common viewport height size based on the selected mode.
42
+ Apply this token to the main frame of page layouts to simulate realistic vertical space. */
43
+ public static let SemanticLayoutCanvasHeightSizeApp = 568
44
+ /** 320 - 390 - 600 - 1024 Defines the minimum width of the main frame for different breakpoints.
45
+ Apply this token to the main frame of page layouts to simulate realistic minimum widths across responsive viewports. */
46
+ public static let SemanticLayoutBreakpointsBreakpointMinWidthSize = 320
47
+ /** 389 - 599 - 1023 - 1024 – Defines the minimum width of the main frame for different breakpoints.
48
+ Apply this token to the main frame of page layouts to simulate realistic maximum widths across responsive viewports. */
49
+ public static let SemanticLayoutBreakpointsBreakpointMaxWidthSize = 389
50
+ /** 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. */
51
+ public static let SemanticLayoutContentWidthContentMaxWidthMedium = 700
52
+ /** Use for content containers that should fill the full width of the page */
53
+ public static let SemanticLayoutContentWidthContentMaxWidthFull = 1024
54
+ /** 6-6-6-8 use for side paddings and gutters in responsive layouts */
55
+ public static let SemanticLayoutGridResponsiveGridSpaceRespSM = 6
56
+ /** 12-12-12-16 use for side paddings and gutters in responsive layouts */
57
+ public static let SemanticLayoutGridResponsiveGridSpaceRespBase = 12
58
+ /** 24-24-32-32 use for side paddings and gutters in responsive layouts */
59
+ public static let SemanticLayoutGridResponsiveGridSpaceRespLG = 24
60
+ /** 48-48-64-64 use for side paddings and gutters in responsive layouts */
61
+ public static let SemanticLayoutGridResponsiveGridSpaceRespXL = 48
62
+ /** 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. */
63
+ public static let SemanticLayoutGridResponsivePageInlineSpace = 0
64
+ /** 12-12-12-12 – use for fixed side paddings and gutters */
65
+ public static let SemanticLayoutGridConstantGridSpaceConstSM = 12
66
+ /** 16-16-16-16 use for fixed side paddings and gutters */
67
+ public static let SemanticLayoutGridConstantGridSpaceConstLG = 16
68
+ /** Used to set the column count in Figma Layout guide Grids */
69
+ public static let SemanticLayoutGridLayoutGuideLayoutGuideGridColums = 4
70
+ /** 24-24-36-36 Use for vertical spacing between subsections in a layout */
71
+ public static let SemanticLayoutSectionSectionSpaceSM = 24
72
+ /** 36-36-48-48 Use for vertical spacing between sections in a layout. */
73
+ public static let SemanticLayoutSectionSectionSpaceBase = 36
74
+ /** 72-72-96-96 Use for vertical spacing between sections in a layout */
75
+ public static let SemanticLayoutSectionSectionSpaceLG = 72
76
+ /** 16-16-32-32 – Use for spacing after paragraphs in text content */
77
+ public static let SemanticLayoutSectionParagraphEndSpace = 16
78
+ /** 2-2-4-6 Use for gaps between items inside of UI elements that scale across breakpoints */
79
+ public static let SemanticSpaceGapResponsiveGapSpaceResp2XS = 2
80
+ /** 4-4-6-8 Use for gaps between items inside of UI elements that scale across breakpoints */
81
+ public static let SemanticSpaceGapResponsiveGapSpaceRespXS = 4
82
+ /** 8-8-12-16 Use for gaps between items inside of UI elements that scale across breakpoints */
83
+ public static let SemanticSpaceGapResponsiveGapSpaceRespSM = 8
84
+ /** 12-12-16-24 Use for gaps between items inside of UI elements that scale across breakpoints */
85
+ public static let SemanticSpaceGapResponsiveGapSpaceRespMD = 12
86
+ /** 16-16-24-32 Use for gaps between items inside of UI elements that scale across breakpoints */
87
+ public static let SemanticSpaceGapResponsiveGapSpaceRespLG = 16
88
+ /** 24-24-32-48 Use for gaps between items inside of UI elements that scale across breakpoints */
89
+ public static let SemanticSpaceGapResponsiveGapSpaceRespXL = 24
90
+ /** 32-32-48-64 Use for gaps between items inside of UI elements that scale across breakpoints */
91
+ public static let SemanticSpaceGapResponsiveGapSpaceResp2XL = 32
92
+ /** 48-48-72-96 Use for gaps between items inside of UI elements that scale across breakpoints */
93
+ public static let SemanticSpaceGapResponsiveGapSpaceResp3XL = 48
94
+ /** 2-2-2-2 Use for fixed gaps between items inside of UI elements */
95
+ public static let SemanticSpaceGapConstantGapSpaceConst2XS = 2
96
+ /** 4-4-4-4 Use for fixed gaps between items inside of UI elements */
97
+ public static let SemanticSpaceGapConstantGapSpaceConstXS = 4
98
+ /** 8-8-8-8 Use for fixed gaps between items inside of UI elements */
99
+ public static let SemanticSpaceGapConstantGapSpaceConstSM = 8
100
+ /** 12-12-12-12 – Use for fixed gaps between items inside of UI elements */
101
+ public static let SemanticSpaceGapConstantGapSpaceConstMD = 12
102
+ /** 16-16-16-16 – Use for fixed gaps between items inside of UI elements */
103
+ public static let SemanticSpaceGapConstantGapSpaceConstLG = 16
104
+ /** 24-24-24-24 Use for fixed gaps between items inside of UI elements */
105
+ public static let SemanticSpaceGapConstantGapSpaceConstXL = 24
106
+ /** 32-32-32-32 Use for fixed gaps between items inside of UI elements */
107
+ public static let SemanticSpaceGapConstantGapSpaceConst2XL = 32
108
+ /** 48-48-48-48 Use for fixed gaps between items inside of UI elements */
109
+ public static let SemanticSpaceGapConstantGapSpaceConst3XL = 48
110
+ /** 8-8-12-16 use for horizontal (left/right) padding of UI elements that scales across breakpoints */
111
+ public static let SemanticSpaceInlineResponsiveInlineSpaceRespSM = 8
112
+ /** 12-12-16-24 use for horizontal (left/right) padding of UI elements that scales across breakpoints */
113
+ public static let SemanticSpaceInlineResponsiveInlineSpaceRespMD = 12
114
+ /** 16-16-24-32 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
115
+ public static let SemanticSpaceInlineResponsiveInlineSpaceRespLG = 16
116
+ /** 24-24-32-40 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
117
+ public static let SemanticSpaceInlineResponsiveInlineSpaceRespXL = 24
118
+ /** 32-32-48-64 use for horizontal (left/right) padding of UI elements that scales across breakpoints */
119
+ public static let SemanticSpaceInlineResponsiveInlineSpaceResp2XL = 32
120
+ /** 2-2-2-2 Use for fixed horizontal (left/right) padding of UI elements */
121
+ public static let SemanticSpaceInlineConstantInlineSpaceConst3XS = 2
122
+ /** 4-4-4-4 Use for fixed horizontal (left/right) padding of UI elements */
123
+ public static let SemanticSpaceInlineConstantInlineSpaceConst2XS = 4
124
+ /** 6-6-6-6 Use for fixed horizontal (left/right) padding of UI elements */
125
+ public static let SemanticSpaceInlineConstantInlineSpaceConstXS = 6
126
+ /** 8-8-8-8 Use for fixed horizontal (left/right) padding of UI elements */
127
+ public static let SemanticSpaceInlineConstantInlineSpaceConstSM = 8
128
+ /** 12-12-12-12 Use for fixed horizontal (left/right) padding of UI elements */
129
+ public static let SemanticSpaceInlineConstantInlineSpaceConstMD = 12
130
+ /** 16-16-16-16 Use for fixed horizontal (left/right) padding of UI elements */
131
+ public static let SemanticSpaceInlineConstantInlineSpaceConstLG = 16
132
+ /** 24-24-24-24 Use for fixed horizontal (left/right) padding of UI elements */
133
+ public static let SemanticSpaceInlineConstantInlineSpaceConstXL = 24
134
+ /** 32-32-32-32 Use for fixed horizontal (left/right) padding of UI elements */
135
+ public static let SemanticSpaceInlineConstantInlineSpaceConst2XL = 32
136
+ /** 8-8-12-16 use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
137
+ public static let SemanticSpaceStackResponsiveStackSpaceRespSM = 8
138
+ /** 12-12-16-24 use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
139
+ public static let SemanticSpaceStackResponsiveStackSpaceRespMD = 12
140
+ /** 16-16-24-32 use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
141
+ public static let SemanticSpaceStackResponsiveStackSpaceRespLG = 16
142
+ /** 24-24-32-40 use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
143
+ public static let SemanticSpaceStackResponsiveStackSpaceRespXL = 24
144
+ /** 32-32-48-64 use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
145
+ public static let SemanticSpaceStackResponsiveStackSpaceResp2XL = 32
146
+ /** 2-2-2-2 Use for fixed vertical (top/bottom) padding of UI elements */
147
+ public static let SemanticSpaceStackConstantStackSpaceConst3XS = 2
148
+ /** 4-4-4-4 Use for fixed vertical (top/bottom) padding of UI elements */
149
+ public static let SemanticSpaceStackConstantStackSpaceConst2XS = 4
150
+ /** 6-6-6-6 Use for fixed vertical (top/bottom) padding of UI elements */
151
+ public static let SemanticSpaceStackConstantStackSpaceConstXS = 6
152
+ /** 8-8-8-8 Use for fixed vertical (top/bottom) padding of UI elements */
153
+ public static let SemanticSpaceStackConstantStackSpaceConstSM = 8
154
+ /** 12-12-12-12 Use for fixed vertical (top/bottom) padding of UI elements */
155
+ public static let SemanticSpaceStackConstantStackSpaceConstMD = 12
156
+ /** 16-16-16-16 Use for fixed vertical (top/bottom) padding of UI elements */
157
+ public static let SemanticSpaceStackConstantStackSpaceConstLG = 16
158
+ /** 24-24-24-24 Use for fixed vertical (top/bottom) padding of UI elements */
159
+ public static let SemanticSpaceStackConstantStackSpaceConstXL = 24
160
+ /** 32-32-32-32 Use for fixed vertical (top/bottom) padding of UI elements */
161
+ public static let SemanticSpaceStackConstantStackSpaceConst2XL = 32
162
+ /** 12-12-14-16 Use for setting height and width of UI elements that scale across breakpoints */
163
+ public static let SemanticSizeResponsiveSizeResp4XS = 12
164
+ /** 16-16-16-24 Use for setting height and width of UI elements that scale across breakpoints */
165
+ public static let SemanticSizeResponsiveSizeResp3XS = 16
166
+ /** 24-24-32-32 Use for setting height and width of UI elements that scale across breakpoints */
167
+ public static let SemanticSizeResponsiveSizeResp2XS = 24
168
+ /** 32-32-40-48 Use for setting height and width of UI elements that scale across breakpoints */
169
+ public static let SemanticSizeResponsiveSizeRespXS = 32
170
+ /** 40-40-48-56 – Use for setting height and width of UI elements that scale across breakpoints */
171
+ public static let SemanticSizeResponsiveSizeRespSM = 40
172
+ /** 48-48-64-72 Use for setting height and width of UI elements that scale across breakpoints */
173
+ public static let SemanticSizeResponsiveSizeRespMD = 48
174
+ /** 56-56-72-92 Use for setting height and width of UI elements that scale across breakpoints */
175
+ public static let SemanticSizeResponsiveSizeRespLG = 56
176
+ /** 64-64-80-96 Use for setting height and width of UI elements that scale across breakpoints */
177
+ public static let SemanticSizeResponsiveSizeRespXL = 64
178
+ /** 72-72-92-100 – Use for setting height and width of UI elements that scale across breakpoints */
179
+ public static let SemanticSizeResponsiveSizeResp2XL = 72
180
+ /** 96-96-120-148 Use for setting height and width of UI elements that scale across breakpoints */
181
+ public static let SemanticSizeResponsiveSizeResp3XL = 96
182
+ /** 148-148-160-180 Use for setting height and width of UI elements that scale across breakpoints */
183
+ public static let SemanticSizeResponsiveSizeResp4XL = 148
184
+ /** 8-8-8-8 Use for setting fixed height and width of UI elements */
185
+ public static let SemanticSizeConstantSizeConst4XS = 8
186
+ /** 16-16-16-16 Use for setting fixed height and width of UI elements */
187
+ public static let SemanticSizeConstantSizeConst3XS = 16
188
+ /** 24-24-24-24 Use for setting fixed height and width of UI elements */
189
+ public static let SemanticSizeConstantSizeConst2XS = 24
190
+ /** 32-32-32-32 Use for setting fixed height and width of UI elements */
191
+ public static let SemanticSizeConstantSizeConstXS = 32
192
+ /** 40-40-40-40 Use for setting fixed height and width of UI elements */
193
+ public static let SemanticSizeConstantSizeConstSM = 40
194
+ /** 48-48-48-48 Use for setting fixed height and width of UI elements */
195
+ public static let SemanticSizeConstantSizeConstMD = 48
196
+ /** 56-56-56-56 Use for setting fixed height and width of UI elements */
197
+ public static let SemanticSizeConstantSizeConstLG = 56
198
+ /** 64-64-64-64 Use for setting fixed height and width of UI elements */
199
+ public static let SemanticSizeConstantSizeConstXL = 64
200
+ /** 72-72-72-72 – Use for setting fixed height and width of UI elements */
201
+ public static let SemanticSizeConstantSizeConst2XL = 72
202
+ /** 96-96-96-96 Use for setting fixed height and width of UI elements */
203
+ public static let SemanticSizeConstantSizeConst3XL = 96
204
+ /** 148-148-148-148 – Use for setting fixed height and width of UI elements */
205
+ public static let SemanticSizeConstantSizeConst4XL = 148
206
+ /** This variable references the bodyFontFamily variable from the branding collection. */
207
+ public static let SemanticTypographyFontFamilyBodyFontFamily = "Lucida Grande"
208
+ public static let SemanticTypographyFontFamilyCalloutFontFamily = "Lucida Grande"
209
+ public static let SemanticTypographyFontFamilyDisplayFontFamily = "Lucida Grande"
210
+ public static let SemanticTypographyFontFamilyFootnoteFontFamily = "Lucida Grande"
211
+ public static let SemanticTypographyFontFamilyHeadlineFontFamily = "Lucida Grande"
212
+ public static let SemanticTypographyFontFamilyKickerFontFamily = "Lucida Grande"
213
+ public static let SemanticTypographyFontFamilyLabelFontFamily = "Lucida Grande"
214
+ public static let SemanticTypographyFontFamilySubheadlineFontFamily = "Lucida Grande"
215
+ public static let SemanticTypographyFontFamilyTitleFontFamily = "Lucida Grande"
216
+ public static let SemanticTypographyFontFamilyQuoteFontFamily = "Lucida Grande"
217
+ /** This variable is used on the body text style's font size parameter. It remains constant at 21. */
218
+ public static let SemanticTypographyFontSizeBodyBodyFontSize = 17
219
+ /** This token is used for the font size parameter of the callout text style. 18 - 18 - 22 - 22 */
220
+ public static let SemanticTypographyFontSizeCalloutCallout1FontSize = 16
221
+ /** This variable is used on the font size parameter for the display1 text style. 40 - 40 - 72 - 120 */
222
+ public static let SemanticTypographyFontSizeDisplayDisplay1FontSize = 39
223
+ /** This variable is used for the font size parameter of the Display2 text style. 36 - 36 - 42 - 64 */
224
+ public static let SemanticTypographyFontSizeDisplayDisplay2FontSize = 35
225
+ /** This variable is used on the display3 font size parameter of the display3 text style. 28 - 28 - 32 - 40 */
226
+ public static let SemanticTypographyFontSizeDisplayDisplay3FontSize = 27
227
+ /** This token is used on the footnote text style font size parameter. 16 - 16 - 16 - 18 */
228
+ public static let SemanticTypographyFontSizeFootnoteFootnote1FontSize = 13
229
+ /** This token is used in the font size parameter of the footnote2 text style. 12 - 12 - 12 - 16 */
230
+ public static let SemanticTypographyFontSizeFootnoteFootnote2FontSize = 10
231
+ /** This token is used for the headline1 text style's font size parameter. 48 - 48 - 72 - 100 */
232
+ public static let SemanticTypographyFontSizeHeadlineHeadline1FontSize = 36
233
+ /** This token is used on the headline2 text style's font size parameter. 40 - 40 - 48 - 64 */
234
+ public static let SemanticTypographyFontSizeHeadlineHeadline2FontSize = 30
235
+ /** This token is used on the headline3 text style's font size parameter. 28 - 28 - 36 - 40 */
236
+ public static let SemanticTypographyFontSizeHeadlineHeadline3FontSize = 24
237
+ /** This token controls the headline4 text style's font size parameter: 22 - 22 - 26 - 32 */
238
+ public static let SemanticTypographyFontSizeHeadlineHeadline4FontSize = 16
239
+ /** 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. */
240
+ public static let SemanticTypographyFontSizeKickerKicker1FontSize = 16
241
+ /** 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 */
242
+ public static let SemanticTypographyFontSizeKickerKicker2FontSize = 16
243
+ /** Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 16 - 16 - 18 - 20 */
244
+ public static let SemanticTypographyFontSizeKickerKicker3FontSize = 14
245
+ /** Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 14 - 14 - 16 - 16 */
246
+ public static let SemanticTypographyFontSizeKickerKicker4FontSize = 12
247
+ /** This token is used in the label1 text style font size parameter. Its value remains constant at 17 across device sizes. */
248
+ public static let SemanticTypographyFontSizeLabelLabel1FontSize = 17
249
+ /** 10 - 10 - 15 - 17 Use this label font size when you want your label's font size to change across device sizes. */
250
+ public static let SemanticTypographyFontSizeLabelLabel1FontSizeResponsive = 10
251
+ /** This variable controls the label2 text style's font size parameter. Its value remains constant at 15. */
252
+ public static let SemanticTypographyFontSizeLabelLabel2FontSize = 15
253
+ /** This token is used in the label3 text style's font size parameter. Its value remains constant at 12 across device sizes. */
254
+ public static let SemanticTypographyFontSizeLabelLabel3FontSize = 12
255
+ /** This token is used in the font size parameter of the label4 text style. The value remains constant at 8. */
256
+ public static let SemanticTypographyFontSizeLabelLabel4FontSize = 8
257
+ /** This token controls the subheadline1 font size parameter. 24 - 24 - 32 - 36 */
258
+ public static let SemanticTypographyFontSizeSubheadlineSubheadline1FontSize = 18
259
+ /** 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
260
+ public static let SemanticTypographyFontSizeTitleTitle1FontSize = 22
261
+ /** 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
262
+ public static let SemanticTypographyFontSizeTitleTitle2FontSize = 14
263
+ /** 16 - 16 - 18 - 20 -- This variable is used for controlling the font size of the quote text style. */
264
+ public static let SemanticTypographyFontSizeQuoteQuoteFontSize = 16
265
+ public static let SemanticTypographyFontWeightBodyBodyFontWeightBook = 400
266
+ public static let SemanticTypographyFontWeightBodyBodyFontWeightBold = 700
267
+ public static let SemanticTypographyFontWeightCalloutCalloutFontWeight = 800
268
+ public static let SemanticTypographyFontWeightDisplayDisplayFontWeight = 800
269
+ public static let SemanticTypographyFontWeightFootnoteFootnoteFontWeightBold = 700
270
+ public static let SemanticTypographyFontWeightFootnoteFootnoteFontWeightBook = 400
271
+ public static let SemanticTypographyFontWeightHeadlineHeadline1FontWeight = 700
272
+ /** This variable is a string type variable for controlling not only headline font weight but also the italic style for Sport Bild headlines. */
273
+ public static let SemanticTypographyFontWeightHeadlineHeadline1FontWeightST = "700"
274
+ public static let SemanticTypographyFontWeightHeadlineHeadline2FontWeight = 700
275
+ public static let SemanticTypographyFontWeightHeadlineHeadline3FontWeight = 700
276
+ public static let SemanticTypographyFontWeightHeadlineHeadline4FontWeight = 600
277
+ public static let SemanticTypographyFontWeightKickerKickerFontWeight = 700
278
+ public static let SemanticTypographyFontWeightKickerKickerFontWeightST = "700"
279
+ public static let SemanticTypographyFontWeightLabelLabelFontWeightBook = 400
280
+ public static let SemanticTypographyFontWeightLabelLabelFontWeightBold = 700
281
+ public static let SemanticTypographyFontWeightSubheadlineSubheadlineFontWeight = 700
282
+ public static let SemanticTypographyFontWeightTitleTitleFontWeight = 800
283
+ public static let SemanticTypographyFontWeightQuoteQuoteFontWeight = 800
284
+ /** Figma's font line height currently does not allow for multipliers as is used on current website css var(--body-line-height) */
285
+ public static let SemanticTypographyLineHeightBodyBodyLineHeight = 29.75
286
+ public static let SemanticTypographyLineHeightCalloutCalloutLineHeight = 20.8
287
+ public static let SemanticTypographyLineHeightDisplayDisplay1LineHeight = 40
288
+ public static let SemanticTypographyLineHeightDisplayDisplay2LineHeight = 36
289
+ public static let SemanticTypographyLineHeightDisplayDisplay3LineHeight = 28
290
+ public static let SemanticTypographyLineHeightFootnoteFootnote1LineHeight = 16.9
291
+ public static let SemanticTypographyLineHeightFootnoteFootnote2LineHeight = 13
292
+ public static let SemanticTypographyLineHeightHeadlineHeadline1LineHeight = 37.8
293
+ public static let SemanticTypographyLineHeightHeadlineHeadline2LineHeight = 33
294
+ public static let SemanticTypographyLineHeightHeadlineHeadline3LineHeight = 26.4
295
+ public static let SemanticTypographyLineHeightHeadlineHeadline4LineHeight = 18.4
296
+ public static let SemanticTypographyLineHeightKickerKicker1LineHeight = 17.6
297
+ public static let SemanticTypographyLineHeightKickerKicker2LineHeight = 17.6
298
+ public static let SemanticTypographyLineHeightKickerKicker3LineHeight = 15.4
299
+ public static let SemanticTypographyLineHeightKickerKicker4LineHeight = 13.2
300
+ /** This variable is used in the label1 text style's line height parameter. It references branding variables for brand specific line heights. */
301
+ public static let SemanticTypographyLineHeightLabelLabel1LineHeight = 20.4
302
+ public static let SemanticTypographyLineHeightLabelLabel1ResponsiveLineHeight = 10
303
+ public static let SemanticTypographyLineHeightLabelLabel2LineHeight = 16
304
+ public static let SemanticTypographyLineHeightLabelLabel3LineHeight = 14.4
305
+ public static let SemanticTypographyLineHeightLabelLabel4LineHeight = 10
306
+ public static let SemanticTypographyLineHeightSubheadlineSubheadline1LineHeight = 23.4
307
+ public static let SemanticTypographyLineHeightTitleTitle1LineHeight = 26.4
308
+ /** html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
309
+ public static let SemanticTypographyLineHeightTitleTitle2LineHeight = 16.8
310
+ /** This variable is used in the quote text style line height parameter. */
311
+ public static let SemanticTypographyLineHeightQuoteQuoteLineHeight = 20.8
312
+ /** 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. */
313
+ public static let SemanticTypographyLetterSpacingLetterSpacingPositiveLG = 2
314
+ /** 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. */
315
+ public static let SemanticTypographyLetterSpacingLetterSpacingPositiveMD = 1
316
+ /** 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. */
317
+ public static let SemanticTypographyLetterSpacingLetterSpacingPositiveSM = 0.5
318
+ /** 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. */
319
+ public static let SemanticTypographyLetterSpacingLetterSpacingPositiveXS = 0.25
320
+ /** 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. */
321
+ public static let SemanticTypographyLetterSpacingLetterSpacingNone = 0
322
+ /** -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. */
323
+ public static let SemanticTypographyLetterSpacingLetterSpacingNegativeXS = -0.25
324
+ /** -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. */
325
+ public static let SemanticTypographyLetterSpacingLetterSpacingNegativeSM = -0.5
326
+ /** -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. */
327
+ public static let SemanticTypographyLetterSpacingLetterSpacingNegativeMD = -1
328
+ /** -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. */
329
+ public static let SemanticTypographyLetterSpacingLetterSpacingNegativeLG = -2
330
+ /** -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. */
331
+ public static let SemanticTypographyLetterSpacingDisplayDisplay1LetterSpacing = -0.5
332
+ /** -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. */
333
+ public static let SemanticTypographyLetterSpacingDisplayDisplay2LetterSpacing = -0.5
334
+ /** -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. */
335
+ public static let SemanticTypographyLetterSpacingDisplayDisplay3LetterSpacing = -0.5
336
+ /** Use for showing elements on desktop viewport sizes only */
337
+ public static let SemanticVisibilityBooleanVisilbleDesktopOnly = false
338
+ /** Use for showing elements on tablet viewport sizes only */
339
+ public static let SemanticVisibilityBooleanVisilbleTabletOnly = false
340
+ /** Use for showing elements on mobile viewport sizes only */
341
+ public static let SemanticVisibilityBooleanVisilbleMobileOnly = true
342
+ /** Use for showing elements on viewport sizes above 600 px */
343
+ public static let SemanticVisibilityBooleanVisilbleAbove600px = false
344
+ /** Use for showing elements on viewport sizes below 600 px */
345
+ public static let SemanticVisibilityBooleanVisilbleBelow600px = true
346
+ /** Use for hiding elements on desktop viewport sizes only */
347
+ public static let SemanticVisibilityBooleanHideOnDesktop = true
348
+ /** Use for hiding elements on mobile viewport sizes */
349
+ public static let SemanticVisibilityBooleanHideOnMobile = false
350
+ public static let SemanticVisibilityVariantSwitchBpSpecificWeb = "xs/sm"
351
+ public static let SemanticVisibilityVariantSwitchBpSpecificApp = "compact"
352
+ public static let SemanticVisibilityVariantSwitchChangeOnLG = "xs/sm/md"
353
+ /** 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. */
354
+ public static let SemanticVisibilityVariantSwitchChangeOnMD = "xs/sm"
355
+ /** This variable exists specifically for changing the accordion font family across brands. It is subject to review. Bild: GothamXNarrow, SpoBi: Inter, Ads: LucindaGrande */
356
+ public static let ComponentAccordionAccordionLabelFontFamily = "Lucida Grande"
357
+ /** 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. */
358
+ public static let ComponentAvatarAvatarArticleSize = 48
359
+ /** 96 - 96 - 130 - 130 This variable is used for controlling the size of the avatar image on author pages. */
360
+ public static let ComponentAvatarAvatarAuthorPageSize = 96
361
+ /** This variable is used on avatar names in article pages. Bild: 16 - 16 - 16 - 18; SpoBi&Ads: 13 - 13 - 13 - 15 */
362
+ public static let ComponentAvatarAvatarLabelFontSize = 13
363
+ /** 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 */
364
+ public static let ComponentAvatarAvatarLabelLineHeight = 21
365
+ /** This variable is used in avatar text styles. It receives values from the Brand Tokens Collection. Bild: GothamXNarrow; SpoBi: Inter; Ads: LucidaGrande */
366
+ public static let ComponentAvatarAvatarFontFamily = "Lucida Grande"
367
+ /** 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 */
368
+ public static let ComponentAvatarAvatarLaneGapSpace = 16
369
+ /** This variable is used for setting the font of avatars on iOS and Android platforms. This is subject to review. */
370
+ public static let ComponentAvatarAppAvatarFontFamily = "Lucida Grande"
371
+ /** This variable is used to control the font size of kickers in the heading section of article pages. 18 - 18 - 22 - 30 */
372
+ public static let ComponentArticleArticleKickerFontSize = 16
373
+ /** 40 - 40 - 72 - 100 - This variable uses the semantic variables headline2 for XS&SM, headline1 for MD&LG */
374
+ public static let ComponentArticleArticleHeadlineFontSize = 30
375
+ /** CSS --article-figure-meta-font-size 16-16-18-18 */
376
+ public static let ComponentArticleArticleImageCaptionFontSize = 13
377
+ /** this component level variable references the branding variables */
378
+ public static let ComponentArticleArticleImageCaptionLineHeight = 19.5
379
+ /** 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 */
380
+ public static let ComponentArticleArticleMetaFontSize = 12
381
+ /** 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. */
382
+ public static let ComponentArticleArticleMetaFontFamily = "Lucida Grande"
383
+ /** 8 | 8 | 12 | 16 - This space variable is used at the top edge of the article main content bounding box. */
384
+ public static let ComponentArticleArticleTopMarginSpace = 8
385
+ public static let ComponentArticleAricleMobile1ColGridImageMarginSpace = 0
386
+ /** 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 */
387
+ public static let ComponentArticleArticleHeadingsStackSpace = 12
388
+ /** 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. */
389
+ public static let ComponentArticleArticleHeadingsInlineSpace = 16
390
+ /** 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. */
391
+ public static let ComponentArticleArticleContentStackSpace = 16
392
+ /** 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. */
393
+ public static let ComponentArticleArticleContentInlineSpace = 16
394
+ /** same as standard teaser width size variable */
395
+ public static let ComponentArticleArticleGalleryATeaserWidth = 145
396
+ /** NMT CSS --article-figure-meta-font-size */
397
+ public static let ComponentArticleArticleImageSourceFontSize = 13
398
+ public static let ComponentArticleArticleImageSourceLineHeight = 19
399
+ public static let ComponentArticleArticleImageContainerStackSpace = 8
400
+ public static let ComponentArticleArticleImageLandscapeInlineSpace = 0
401
+ public static let ComponentArticleArticleImagePortaitInlineSpace = 0
402
+ public static let ComponentArticleArticleInfoboxInlineSpace = 16
403
+ public static let ComponentArticleArticleInfoboxStackSpace = 16
404
+ /** 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 */
405
+ public static let ComponentAudioPlayerAudioPlayerFontSize = 16
406
+ /** 30 - 30 - 30 - 30 - This variable is used on the Advert rectangular badge that is found above an ad containers. */
407
+ public static let ComponentBadgeAdLabelBadgeHeightSize = 30
408
+ /** 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. */
409
+ public static let ComponentBadgeBadgesInnerStackSpace = 2
410
+ /** 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. */
411
+ public static let ComponentBadgeBadgesInnerInlineSpace = 4
412
+ public static let ComponentBreadcrumbBreadcrumbFontFamily = "Lucida Grande"
413
+ /** 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices. */
414
+ public static let ComponentBreadcrumbBreadcrumbFontSize = 15
415
+ /** 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices. */
416
+ public static let ComponentBreadcrumbBreadcrumbLineHeight = 15
417
+ public static let ComponentBreadcrumbBreadcrumb&ArrowLeftInlineSpace1 = 3
418
+ public static let ComponentBreadcrumbBreadcrumb&ArrowRightInlineSpace2 = 5
419
+ public static let ComponentBreadcrumbBreadcrumbInlineSpace = 12
420
+ public static let ComponentBreadcrumbBreadcrumbFontWeight = 700
421
+ public static let ComponentBreadcrumbBreadcrumbStackSpace = 14
422
+ public static let ComponentBreakingNewsBreakingNewsContainerHeightSize = 56
423
+ public static let ComponentBreakingNewsBreakingNewsBadgeInlineSpace = 6
424
+ public static let ComponentBreakingNewsBreakingNewsBadgeTitelsStackSpace = 0
425
+ public static let ComponentBreakingNewsBreakingNewsBadgeUpperTitleFontSize = 13
426
+ public static let ComponentBreakingNewsBreakingNewsBadgeUpperTitleLineHeight = 13
427
+ public static let ComponentBreakingNewsBreakingNewsBadgeLowerTitleFontSize = 23
428
+ public static let ComponentBreakingNewsBreakingNewsBadgeLowerTitleLineHeight = 21
429
+ public static let ComponentBreakingNewsBreakingNewsScrollingTextFontSize = 21
430
+ public static let ComponentBreakingNewsBreakingNewsScrollingTextLineHeight = 24
431
+ public static let ComponentButtonButtonLabelFontSize = 15
432
+ public static let ComponentButtonButtonLabelLineHeight = 15
433
+ public static let ComponentButtonButtonContentGapSpace = 6
434
+ public static let ComponentButtonButtonInlineSpace = 16
435
+ public static let ComponentButtonButtonStackSpace = 6
436
+ public static let ComponentButtonButtonBorderWidthSize = 2
437
+ /** This fixed height variable ensures that the button maintains a consistent height, even when the icon is not active. */
438
+ public static let ComponentButtonButtonContentMinHeightSize = 24
439
+ /** Use this variable for controlling the font size of partner buttons. 16 - 16 - 16 - 18 */
440
+ public static let ComponentButtonPartnerLinkButtonLabelFontSize = 16
441
+ public static let ComponentButtonPartnerLinkButtonInlineSpace = 8
442
+ public static let ComponentButtonPartnerLinkButtonLabelHeightSize = 48
443
+ public static let ComponentButtonButtonBorderRadius = 8
444
+ public static let ComponentCardsSearchResultCardImageWidthSize = 216
445
+ public static let ComponentCardsSearchResultCardImageHeightSizeStacked = 189
446
+ public static let ComponentCardsNewstickerImageCardWidthSize = 206
447
+ /** This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination. */
448
+ public static let ComponentCarouselGalleryTeaserTitleBottomSpace = 28
449
+ /** This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination. */
450
+ public static let ComponentCarouselGalleryTeaserAppGapSpace = 0
451
+ public static let ComponentCarouselAppEpaperCarouselItemDefaultWidth = 144
452
+ public static let ComponentCarouselAppEpaperCarouselItemFocusWidth = 182
453
+ public static let ComponentCarouselAppEpaperCarouseBeilageItemWidth = 110
454
+ public static let ComponentCarouselStandardTeaserGalleryTeaserWidthWeb = 145
455
+ public static let ComponentCarouselStandardTeaserGalleryTeaserWidthApp = 280
456
+ /** 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 */
457
+ public static let ComponentChipsChipsFontSize = 16
458
+ public static let ComponentChipsChipsInlineSpace = 12
459
+ public static let ComponentChipsChipsStackSpace = 8
460
+ public static let ComponentDatepickerDatepickerItemDayWidthSize = 44
461
+ public static let ComponentDatepickerDatepickerItemYearWidthSize = 77
462
+ public static let ComponentDatepickerDatepickerItemHeightSize = 44
463
+ public static let ComponentDrawersMobileMenuDrawerStackSpace = 20
464
+ public static let ComponentDrawersMobileMenuDrawerLeftInlineSpace = 20
465
+ public static let ComponentDrawersMobileMenuDrawerRightInlineSpace = 16
466
+ public static let ComponentDrawersMobileMenuDrawerMaxWidthSize = 400
467
+ public static let ComponentDropdownDropDownItemStackSpace = 8
468
+ public static let ComponentDropdownDropDownItemInlineSpace = 12
469
+ public static let ComponentDropdownDropDownBorderRadius = 4
470
+ public static let ComponentFooterFooterFontFamily = "Gotham XNarrow"
471
+ /** 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. */
472
+ public static let ComponentFooterFooterFontSize = 11
473
+ public static let ComponentFooterFooterLineHeight = 14
474
+ public static let ComponentFooterFooterFontSizeUserOfferPages = 18
475
+ public static let ComponentFooterFooterLineHeightUserOfferPages = 26
476
+ public static let ComponentIconIconSize = 24
477
+ public static let ComponentIconIconSizeEmbeddMedia = 40
478
+ public static let ComponentInfoElementInfoElementTeaserBadgeMarginSpace = 4
479
+ public static let ComponentInfoElementInfoElementTeaserImageHeightSize = 80
480
+ public static let ComponentInfoElementInfoElementTeaserImageWidthSize = 80
481
+ public static let ComponentInfoElementInfoElementTeaserBadgeHeightSize = 16
482
+ /** 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 */
483
+ public static let ComponentInputfieldInputFieldFontSize = 16
484
+ public static let ComponentInputfieldInputFieldFontFamily = "Lucida Grande"
485
+ public static let ComponentInputfieldInputFieldInlineSpace = 16
486
+ public static let ComponentInputfieldInputFieldStackSpace = 6
487
+ public static let ComponentInputfieldInputFieldMessageGapSpace = 4
488
+ public static let ComponentInputfieldInputFieldIMessageInlineSpace = 16
489
+ public static let ComponentInputfieldInputFieldMiniLabelInlineSpace = 4
490
+ public static let ComponentInputfieldInputFieldHeightSize = 36
491
+ public static let ComponentInputfieldHeyInputContainerInlineSpace = 8
492
+ public static let ComponentLivetickerLiveTickerAppCardHeightSize = 96
493
+ public static let ComponentLivetickerLiveTickerAppCardWidthSize = 250
494
+ public static let ComponentLivetickerTimeStampFontFamily = "Gotham XNarrow"
495
+ public static let ComponentLivetickerLiveTickerheadlineFontWeight = 600
496
+ /** This variable is used for the font size of live ticker headlines. 22 - 22 - 32 - 32 */
497
+ public static let ComponentLivetickerLiveTickerHeadlinesFontSize = 22
498
+ /** This variable is used for the live ticker time stamp font size. 14 - 14 - 16 - 16 */
499
+ public static let ComponentLivetickerLiveTickerTimeStampFontSize = 14
500
+ public static let ComponentLivetickerLiveTickerTime&HeadlineStackSpace = 4
501
+ public static let ComponentLivetickerLiveTickerSliderItemWidthMaxSize = 257
502
+ public static let ComponentMediaplayerAudioPlayerHeaderStackSpace = 56
503
+ public static let ComponentMediaplayerPodcastPlayButtonSize = 48
504
+ public static let ComponentMediaplayerVidPlayerBottomBarGapSpace = 0
505
+ public static let ComponentMediaplayerVideoTimeBadgeFontFamily = "Lucida Grande"
506
+ public static let ComponentMediaplayerVidPlayerControlButtonSize = 42
507
+ public static let ComponentMediaplayerVidPlayerControlButtonIconSizeHover = 28
508
+ public static let ComponentMediaplayerVidPlayerTimecodeFontSize = 14
509
+ public static let ComponentMediaplayerVidPlayerTimecodeContainerMinWidthSize = 45
510
+ public static let ComponentMediaplayerVidPlayerProgressBarContainerHeightSize = 24
511
+ public static let ComponentMediaplayerVidPlayerUnmuteButtonWidthSize = 220
512
+ public static let ComponentMenuMenuLinkLaneHeightSize = 48
513
+ public static let ComponentMenuMenuLogoDefaultSize = 56
514
+ public static let ComponentMenuMenuLogoScrolledSize = 56
515
+ public static let ComponentMenuMenuUtillinkItemHeightSize = 48
516
+ public static let ComponentMenuMenuItemUtilFontSize = 12
517
+ /** This variable is used on the menu link lane and on the mobile side menu drawer. */
518
+ public static let ComponentMenuMenuItemFontSize = 15
519
+ public static let ComponentMenuMenuSpecialNaviItemHeightSize = 48
520
+ public static let ComponentMenuMenuItemSpace = 8
521
+ public static let ComponentMenuMenuLinkItemInlineSpace = 4
522
+ public static let ComponentMenuMenuItemUtilStackSpace = 10
523
+ public static let ComponentMenuSubNavBarHeightSize = 42
524
+ public static let ComponentMenuMenuUtilityLinksContainerHeightSize = 56
525
+ public static let ComponentMenuMenuTopStackSpace = 8
526
+ public static let ComponentMenuMenuBottomStackSpace = 8
527
+ public static let ComponentMenuMenuLeftInlineSpace = 8
528
+ public static let ComponentMenuMenuRightInlineSpace = 0
529
+ public static let ComponentMenuMenuUtilityLinksGapSpace = 24
530
+ public static let ComponentMenuMenuUtilityLinksDividerHeightSize = 40
531
+ /** 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 */
532
+ public static let ComponentMenuMenuShadowVisibility = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 0.100)
533
+ /** 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 */
534
+ public static let ComponentMenuHeyInputShadowVisibility = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 0.000)
535
+ public static let ComponentMenuIOSappTopBarHeightSize = 44
536
+ public static let ComponentMenuIOSappTopBarLeftInlineSpace = 12
537
+ public static let ComponentMenuIOSappTopBarRightInlineSpace = 16
538
+ public static let ComponentMenuAppTopbarTitleFontSize = 12
539
+ public static let ComponentMenuAppTopbarStageTitleHeight = 14
540
+ public static let ComponentNewstickerNewsTickerAppCardHeightSize = 116
541
+ public static let ComponentNewstickerNewsTickerAppCardWidthSize = 250
542
+ public static let ComponentNewstickerNewsTickerTimeFontFamily = "Lucida Grande"
543
+ public static let ComponentNewstickerNewsTickerTimeFontWeight = 700
544
+ /** similar to kicker3 values - 16 - 16 - 16 - 18 */
545
+ public static let ComponentNewstickerNewsTickerTimeFontSize = 16
546
+ /** 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. */
547
+ public static let ComponentNewstickerNewsTickerTimeLineHeight = 20.8
548
+ public static let ComponentNewstickerNewsTickerBadgesInlineSpace = 8
549
+ public static let ComponentNewstickerNewsTickerEntriesStackSpace = 22
550
+ public static let ComponentNewstickerNewsTickerEntriesLeftInlineSpace = 22
551
+ public static let ComponentNewstickerNewsTickerContentStackSpace = 4
552
+ public static let ComponentNewstickerNewsTickerKickerInnerInlineSpace = 4
553
+ public static let ComponentNewstickerNewsTickerKickerInnerStackSpace = 2
554
+ public static let ComponentNewstickerNewsTickerTime&KickerStackSpace = 4
555
+ public static let ComponentNewstickerNewsTickerTitlesInlineSpace = 18
556
+ public static let ComponentNewstickerNewsTickerSkeletonBottomSpace = 64
557
+ public static let ComponentNewstickerNewsTickerRedDotSize = 12
558
+ public static let ComponentNewstickerNewsTickerLineInlineSpace = 6
559
+ public static let ComponentPaginationGalleryPaginationItemHeightSize = 4
560
+ /** 8 - 8 - 12 - 12 - this component level variable references the inlineSpaceConst semantic variables; SM for smaller devices, MD for larger devices */
561
+ public static let ComponentPaginationGalleryPaginationContainerWebInlineSpace = 8
562
+ public static let ComponentPaginationGalleryPaginationContainerAppInlineSpace = 12
563
+ /** 12 - 12 - 16 - 16 - this component level variable references the semantic */
564
+ public static let ComponentPaginationGalleryPaginationContainerStackSpace = 12
565
+ public static let ComponentPaginationScrollBarThicknessSize = 8
566
+ public static let ComponentPaywallPaywallCardMaxWidthSize = 346
567
+ /** This variable is used on the paywall card price tag. 64 constant */
568
+ public static let ComponentPaywallPaywallCardPriceTagFontSize = 64
569
+ public static let ComponentPaywallPaywallCardPriceTagLineHeight = 64
570
+ /** This variable is used on the paywall card text under the price tag. 40 - 40 - 40 - 40 */
571
+ public static let ComponentPaywallPaywallCardPriceNoteFontSize = 40
572
+ public static let ComponentPaywallPaywallCardPriceNoteLineHeight = 40
573
+ public static let ComponentPaywallPaywallContainerGapSpace = -48
574
+ public static let ComponentPaywallPaywallHeaderBottomStackSpace = 80
575
+ public static let ComponentQuotesQuoteContainerInlineSpace = 16
576
+ public static let ComponentQuotesQuoteContentGapSpace = 16
577
+ public static let ComponentQuotesQuoteContainerStackSpace = 16
578
+ public static let ComponentQuotesQuoteQuotationMarksFontSize = 28
579
+ public static let ComponentRadioButtonsRadioSelectorSize = 20
580
+ public static let ComponentRadioButtonsRadioSelectorDotActiveSize = 12
581
+ public static let ComponentSearchSearchResultBadgeHeightSize = 18
582
+ public static let ComponentSectionTitleSectionTitleInnerStackBottomSpace = 12
583
+ /** 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. */
584
+ public static let ComponentSectionTitleSectionTitle&ArrowInlineSpace = 5
585
+ /** 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. */
586
+ public static let ComponentSectionTitleSectionTitle&ArrowInlineSpaceActive = 5
587
+ public static let ComponentSectionTitleSectionTitleHeightSize = 32
588
+ public static let ComponentSeparatorsSeparatorThicknessSize = 2
589
+ public static let ComponentSkeletonsHeadlinesSkeletonImagePlaceholderMaxWidth = 282
590
+ public static let ComponentSkeletonsArticleSkeletonImageInlineSpace = 12
591
+ public static let ComponentSkeletonsArticleSkeletonTextInlineSpace = 0
592
+ public static let ComponentSkeletonsArticleTextSkeletonHeightSize = 270
593
+ public static let ComponentSpecialNaviSpecialNaviInlineSpace = 24
594
+ public static let ComponentSlidersSliderProgressBarIdleHeightSize = 4
595
+ public static let ComponentSlidersSliderProgressBarHoverHeightSize = 8
596
+ public static let ComponentSlidersSliderProgressInactiveHeightSize = 2
597
+ public static let ComponentSlidersVidPlayerProgressBarHeightSize = 12
598
+ public static let ComponentSpinnersVideoSpinnerSize = 40
599
+ public static let ComponentSpinnersVideoSpinnerSize0_5x = 20
600
+ public static let ComponentSpinnersVideoSpinnerStrokeSize = 2
601
+ /** 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. */
602
+ public static let ComponentTabsTabLabelFontSize = 16
603
+ /** 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. */
604
+ public static let ComponentTabsTabLabelFontSizeLine = 12
605
+ public static let ComponentTabsIosTabbarHeightSize = 49
606
+ public static let ComponentTabsAndroidTabbarHeightSize = 56
607
+ /** 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. */
608
+ public static let ComponentTabsAppsTabsLabelFontSize = 11
609
+ /** 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. */
610
+ public static let ComponentTabsAppsTabsLabelLineHeight = 14.4
611
+ public static let ComponentTabsTopBarTabItemHeightSize = 44
612
+ public static let ComponentTableTableColumnWidthSize0_5x = 40
613
+ public static let ComponentTableTableColumnWidthSize0_75x = 56
614
+ public static let ComponentTableTableColumnWidthSize1x = 80
615
+ public static let ComponentTableTableColumnWidthSize1_5x = 120
616
+ public static let ComponentTableTableColumnWidthSize2x = 140
617
+ public static let ComponentTableTableColumnWidthSize2_5x = 180
618
+ public static let ComponentTableTableColumnWidthSize3x = 200
619
+ public static let ComponentTableTableItemMaxWidthSize = 224
620
+ /** 16 - 16 - 22 - 24 This variable references the semantic variables kicker3fontsize and kicker2fontsize. At the 600px breakpoint smaller devices use the kicker3 variable */
621
+ public static let ComponentTeaserATeaserATeaserKickerFontSize = 14
622
+ public static let ComponentTeaserATeaserATeaserKickerLineHeight = 14
623
+ /** This variable references the semantic variables headline3 (XS&SM) and headline2 (MD&LG). 28 - 28 - 48 - 64 */
624
+ public static let ComponentTeaserATeaserATeaserHeadlineFontSize = 24
625
+ public static let ComponentTeaserATeaserATeaserHeadlineLineHeight = 24
626
+ public static let ComponentTeaserATeaserATeaserTitleInlineSpace = 8
627
+ public static let ComponentTeaserBTeaserBTeaserTitleInlineSpace = 8
628
+ public static let ComponentTeaserBildPlayBildPlayTeaserWidthSize = 145
629
+ /** XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 // LG-headline3FontSize:40 */
630
+ public static let ComponentTeaserMQTeaserMQTeaserHeadlineFontSize = 16
631
+ public static let ComponentTeaserMQTeaserMQTeaserHeadlineLineHeight = 18.4
632
+ public static let ComponentTeaserMQTeaserMQTeaserHeadlineFontWeight = 600
633
+ public static let ComponentTeaserMQTeaserMqTeaserTitleInlineSpace = 8
634
+ /** This token is for controling the height of badges that are inside of teasers. 32 - 32 - 32 - 40 */
635
+ public static let ComponentTeaserTeaserBadgesHeightSizeLG = 32
636
+ public static let ComponentTeaserTeaserBadgesHeightSizeSM = 24
637
+ /** This variable is used for creating space around the outside of a subscription badge or video icon badge. */
638
+ public static let ComponentTeaserTeaserBadgesMarginSpace = 8
639
+ public static let ComponentTeaserTeaserKickerBgInlineSpace = 6
640
+ public static let ComponentTeaserTeaserKickerBgStackSpace = 2
641
+ public static let ComponentTeaserQTeaserQuadKickerFontSize = 16
642
+ /** This component level variable is used on the quad teaser headline. It references the semantic level variable headline1. 48 - 48 - 72 - 100 */
643
+ public static let ComponentTeaserQTeaserQuadHeadlineFontSize = 36
644
+ public static let ComponentTeaserQTeaserQuadHeadlineLineHeight = 37.8
645
+ public static let ComponentTeaserQTeaserQTeaserTitleInlineSpace = 8
646
+ public static let ComponentTeaserTeaserLayoutGridSpace = 12
647
+ /** This variable is used for creating space around the outside of a subscription badge or video icon badge. */
648
+ public static let ComponentTeaserStdTeaserStdTeaserBadgesMarginSpace = 4
649
+ public static let ComponentTeaserStdTeaserStdTeaserImageTitleGapSpace = 4
650
+ /** 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 */
651
+ public static let ComponentTeaserStdTeaserStdTeaserKickerHeadlineStackSpace = 2
652
+ /** 16 - 16 - 16 - 16 */
653
+ public static let ComponentTeaserSuperASuperATeaserTitleInlineSpace = 16
654
+ public static let ComponentTeaserTeaserTitleInlineLeftSpace = 12
655
+ public static let ComponentTeaserTeaserTitleStackSpace = 4
656
+ public static let ComponentTeaserTeaserTitleGapSpace = 4
657
+ public static let ComponentTeaserTeaserTitleBottomStackSpace = 12
658
+ /** This variable is used on labels in list items with toggle switches found in app preferences. 14 - 14 - 16 - 18 */
659
+ public static let ComponentToggleSwitchAppToggleItemLabelFontSize = 14
660
+ /** This variable is used on labels in list items with toggle switches found in app preferences. 14.1 - 14.1 - 16.2 - 18.2 */
661
+ public static let ComponentToggleSwitchAppToggleItemLabelLineHeight = 14.1
662
+ public static let ComponentVideoVideoBadgeTimeLineHeight = 21
663
+ /** 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. */
664
+ public static let ComponentVideoVideoTimeBadgeFontSize = 16
665
+ public static let ComponentVideoVerticalVideoMockHeadlineFontSize = 22
666
+ public static let ComponentVideoVideoFrameInlineSpace = 0
667
+ /** This variable is used for changing the red play icon inside the white square. */
668
+ public static let ComponentVideoVideoRedPlayIconHeightSize = 10
669
+ public static let ComponentVideoVideoRedPlayIconWidthSize = 8
670
+ public static let ComponentVideoVideoSkeletonContainerHeight = 180
671
+ /** 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. */
672
+ public static let ComponentVideoVideoTimeBadgeSize = 24
673
+ /** 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. */
674
+ public static let ComponentVideoVideoTimeBadgeCornerSize = 2
675
+ /** 14 - 14 - 16 - 16 -- This variable is used in the videoAdBadge font size parameter. */
676
+ public static let ComponentVideoVideoAdBadgeFontSize = 14
677
+ /** This variable is used only for texts and labels that form part of this design system's documentation. */
678
+ public static let Component_DSysDocsSpecsFontFamily = "Gotham"
679
+ /** This variable is used only for this design system's component tests. */
680
+ public static let Component_DSysDocs1columnMobile = 320
681
+ public static let Component_DSysDocsDSysDocsWidthSize = 320
682
+ /** This variable is used in documentation pages that have small caption or lables along with a UI component documented. 4 - 4 - 6 - 8 */
683
+ public static let Component_DSysDocsDsCaptionStackSpace0_5x = 4
684
+ public static let Component_DSysDocsDsCaptionStackSpace1x = 8
685
+ /** This variable is used on documentation pages. This is an alternative variable to the main container max width variable. 0 - 0 - 68 - 68 */
686
+ public static let Component_DSysDocsDsMainContainerSpace = 0
687
+ /** 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 */
688
+ public static let Component_DSysDocsFoundationsBannerHeightSize = 80
689
+ /** 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 */
690
+ public static let Component_DSysDocsMainContentStageSize = 320
691
+ /** 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 */
692
+ public static let Component_DSysDocsThinBannerVerticalHeightSize = 558
693
+ /** Variable used in spacing parameters of bild.design webpage mockups. move to bild.design group maybe */
694
+ public static let Component_DSysDocsBildDesignFrameSpace = 12
695
+ /** This variable is used on documentation headers that contain info about platfroms and component names. 144 - 144 - 160 - 180 */
696
+ public static let Component_DSysDocsDocHeaderHeightSize = 144
697
+ public static let BreakpointName = "xs"
698
+ }