@scania/tegel 1.32.2-multibrand-beta.5 → 1.33.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (362) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/tds-accordion-item.cjs.entry.js +1 -1
  3. package/dist/cjs/tds-accordion.cjs.entry.js +1 -1
  4. package/dist/cjs/tds-banner.cjs.entry.js +1 -1
  5. package/dist/cjs/tds-block.cjs.entry.js +3 -7
  6. package/dist/cjs/tds-body-cell.cjs.entry.js +1 -1
  7. package/dist/cjs/tds-breadcrumb.cjs.entry.js +1 -1
  8. package/dist/cjs/tds-button.cjs.entry.js +1 -1
  9. package/dist/cjs/tds-checkbox.cjs.entry.js +1 -1
  10. package/dist/cjs/tds-chip.cjs.entry.js +1 -1
  11. package/dist/cjs/tds-core-header-item_2.cjs.entry.js +1 -1
  12. package/dist/cjs/tds-divider.cjs.entry.js +1 -1
  13. package/dist/cjs/tds-dropdown_2.cjs.entry.js +49 -34
  14. package/dist/cjs/tds-folder-tab.cjs.entry.js +3 -3
  15. package/dist/cjs/tds-folder-tabs.cjs.entry.js +3 -3
  16. package/dist/cjs/tds-footer-group.cjs.entry.js +1 -1
  17. package/dist/cjs/tds-footer-item.cjs.entry.js +1 -1
  18. package/dist/cjs/tds-footer.cjs.entry.js +1 -1
  19. package/dist/cjs/tds-header-brand-symbol.cjs.entry.js +1 -1
  20. package/dist/cjs/tds-header-cell.cjs.entry.js +2 -2
  21. package/dist/cjs/tds-header-dropdown-list-item.cjs.entry.js +1 -1
  22. package/dist/cjs/tds-header-dropdown.cjs.entry.js +1 -1
  23. package/dist/cjs/tds-header-launcher-grid-item.cjs.entry.js +1 -1
  24. package/dist/cjs/tds-header-launcher.cjs.entry.js +1 -1
  25. package/dist/cjs/tds-icon.cjs.entry.js +3 -8
  26. package/dist/cjs/tds-inline-tab.cjs.entry.js +2 -2
  27. package/dist/cjs/tds-inline-tabs.cjs.entry.js +3 -3
  28. package/dist/cjs/tds-message.cjs.entry.js +1 -1
  29. package/dist/cjs/tds-modal.cjs.entry.js +1 -1
  30. package/dist/cjs/tds-navigation-tab.cjs.entry.js +2 -2
  31. package/dist/cjs/tds-navigation-tabs.cjs.entry.js +5 -5
  32. package/dist/cjs/tds-popover-core.cjs.entry.js +1 -1
  33. package/dist/cjs/tds-side-menu-dropdown-list-item.cjs.entry.js +1 -1
  34. package/dist/cjs/tds-side-menu-item.cjs.entry.js +1 -1
  35. package/dist/cjs/tds-side-menu.cjs.entry.js +1 -1
  36. package/dist/cjs/tds-spinner.cjs.entry.js +2 -2
  37. package/dist/cjs/tds-table-body-input-wrapper.cjs.entry.js +2 -2
  38. package/dist/cjs/tds-table-body-row-expandable.cjs.entry.js +8 -8
  39. package/dist/cjs/tds-table-body-row.cjs.entry.js +3 -3
  40. package/dist/cjs/tds-table-body.cjs.entry.js +1 -1
  41. package/dist/cjs/tds-table-footer.cjs.entry.js +4 -4
  42. package/dist/cjs/tds-table-header-input-wrapper.cjs.entry.js +2 -2
  43. package/dist/cjs/tds-table-header.cjs.entry.js +3 -3
  44. package/dist/cjs/tds-table-toolbar.cjs.entry.js +3 -3
  45. package/dist/cjs/tds-table.cjs.entry.js +1 -1
  46. package/dist/cjs/tds-text-field.cjs.entry.js +6 -9
  47. package/dist/cjs/tds-textarea.cjs.entry.js +3 -3
  48. package/dist/cjs/tds-toast.cjs.entry.js +4 -4
  49. package/dist/cjs/tds-toggle.cjs.entry.js +3 -3
  50. package/dist/cjs/tds-tooltip.cjs.entry.js +2 -2
  51. package/dist/cjs/tegel.cjs.js +1 -1
  52. package/dist/collection/assets/logos/scania/scania-logotype.png +0 -0
  53. package/dist/collection/assets/logos/scania/scania-logotype.svg +2355 -0
  54. package/dist/collection/assets/logos/scania/scania-wordmark-white.png +0 -0
  55. package/dist/collection/assets/logos/scania/scania-wordmark.png +0 -0
  56. package/dist/collection/assets/logos/scania/scania-wordmark.svg +17 -0
  57. package/dist/collection/assets/logos/traton/traton-logotype-black.png +0 -0
  58. package/dist/collection/assets/logos/traton/traton-logotype-black.svg +1 -0
  59. package/dist/collection/assets/logos/traton/traton-logotype-blue.png +0 -0
  60. package/dist/collection/assets/logos/traton/traton-logotype-blue.svg +1 -0
  61. package/dist/collection/assets/logos/traton/traton-logotype-white.png +0 -0
  62. package/dist/collection/assets/logos/traton/traton-logotype-white.svg +1 -0
  63. package/dist/collection/components/accordion/accordion-item/accordion-item.css +44 -14
  64. package/dist/collection/components/accordion/accordion.css +11 -1
  65. package/dist/collection/components/banner/banner.css +2 -1
  66. package/dist/collection/components/block/block.css +8 -15
  67. package/dist/collection/components/block/block.js +2 -6
  68. package/dist/collection/components/breadcrumbs/breadcrumb/breadcrumb.css +2 -1
  69. package/dist/collection/components/button/button.css +426 -480
  70. package/dist/collection/components/checkbox/checkbox.css +24 -31
  71. package/dist/collection/components/chip/chip.css +2 -1
  72. package/dist/collection/components/divider/divider.css +2 -2
  73. package/dist/collection/components/dropdown/dropdown-option/dropdown-option.css +12 -19
  74. package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js +27 -4
  75. package/dist/collection/components/dropdown/dropdown.css +116 -128
  76. package/dist/collection/components/dropdown/dropdown.js +61 -31
  77. package/dist/collection/components/footer/footer-group/footer-group.css +2 -1
  78. package/dist/collection/components/footer/footer-item/footer-item.css +6 -3
  79. package/dist/collection/components/footer/footer.css +1 -1
  80. package/dist/collection/components/header/header-brand-symbol/header-brand-symbol.css +1 -1
  81. package/dist/collection/components/header/header-dropdown/header-dropdown.css +3 -3
  82. package/dist/collection/components/header/header-dropdown-list-item/header-dropdown-list-item.css +2 -1
  83. package/dist/collection/components/header/header-item/header-item.css +2 -1
  84. package/dist/collection/components/header/header-launcher/header-launcher.css +3 -3
  85. package/dist/collection/components/header/header-launcher-grid-item/header-launcher-grid-item.css +2 -1
  86. package/dist/collection/components/icon/icon.js +2 -7
  87. package/dist/collection/components/icon/tratonIconsArray.js +1 -4
  88. package/dist/collection/components/message/message.css +32 -19
  89. package/dist/collection/components/modal/modal.css +15 -13
  90. package/dist/collection/components/popover-core/tds-popover-core.css +0 -14601
  91. package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.css +2 -1
  92. package/dist/collection/components/side-menu/side-menu-item/side-menu-item.css +2 -1
  93. package/dist/collection/components/side-menu/side-menu.css +3 -3
  94. package/dist/collection/components/spinner/spinner.css +64 -34
  95. package/dist/collection/components/spinner/spinner.js +2 -3
  96. package/dist/collection/components/table/table/table.css +3 -3
  97. package/dist/collection/components/table/table-body/table-body.css +11 -18
  98. package/dist/collection/components/table/table-body-cell/table-body-cell.css +5 -12
  99. package/dist/collection/components/table/table-body-input-wrapper/table-body-input-wrapper.css +7 -16
  100. package/dist/collection/components/table/table-body-input-wrapper/table-body-input-wrapper.js +1 -1
  101. package/dist/collection/components/table/table-body-row/table-body-row.css +8 -7
  102. package/dist/collection/components/table/table-body-row/table-body-row.js +2 -2
  103. package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.css +11 -10
  104. package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.js +7 -7
  105. package/dist/collection/components/table/table-footer/table-footer.css +16 -41
  106. package/dist/collection/components/table/table-footer/table-footer.js +3 -3
  107. package/dist/collection/components/table/table-header/table-header.css +7 -14
  108. package/dist/collection/components/table/table-header/table-header.js +2 -2
  109. package/dist/collection/components/table/table-header-cell/table-header-cell.css +13 -25
  110. package/dist/collection/components/table/table-header-cell/table-header-cell.js +1 -1
  111. package/dist/collection/components/table/table-header-input-wrapper/table-header-input-wrapper.css +7 -14
  112. package/dist/collection/components/table/table-header-input-wrapper/table-header-input-wrapper.js +1 -1
  113. package/dist/collection/components/table/table-toolbar/table-toolbar.css +11 -22
  114. package/dist/collection/components/table/table-toolbar/table-toolbar.js +2 -2
  115. package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.css +2 -1
  116. package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.js +2 -2
  117. package/dist/collection/components/tabs/folder-tabs/folder-tabs.css +2 -1
  118. package/dist/collection/components/tabs/folder-tabs/folder-tabs.js +2 -2
  119. package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.js +2 -2
  120. package/dist/collection/components/tabs/inline-tabs/inline-tabs.css +2 -1
  121. package/dist/collection/components/tabs/inline-tabs/inline-tabs.js +2 -2
  122. package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.js +2 -2
  123. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +2 -1
  124. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js +4 -4
  125. package/dist/collection/components/text-field/text-field.css +167 -151
  126. package/dist/collection/components/text-field/text-field.js +5 -8
  127. package/dist/collection/components/textarea/textarea.js +3 -3
  128. package/dist/collection/components/toast/toast.css +2 -1
  129. package/dist/collection/components/toast/toast.js +3 -3
  130. package/dist/collection/components/toggle/toggle.css +33 -48
  131. package/dist/collection/components/toggle/toggle.js +2 -2
  132. package/dist/collection/components/tooltip/tooltip.js +2 -2
  133. package/dist/components/{p-858c1df0.js → p-1cd6b2c6.js} +40 -30
  134. package/dist/components/{p-865b81b9.js → p-4b0c6ab5.js} +14 -7
  135. package/dist/components/p-58b92113.js +114 -0
  136. package/dist/components/{p-76dc921a.js → p-6adb1ce3.js} +1 -1
  137. package/dist/components/{p-c46ecd24.js → p-71c3dfe9.js} +1 -1
  138. package/dist/components/{p-c2ae5e79.js → p-877931c5.js} +1 -1
  139. package/dist/components/{p-765162bc.js → p-9cee9d7f.js} +3 -3
  140. package/dist/components/{p-8ffea123.js → p-c715ab56.js} +3 -8
  141. package/dist/components/p-d3866be7.js +2098 -0
  142. package/dist/components/{p-92a7b8b2.js → p-df84759a.js} +1 -1
  143. package/dist/components/{p-49f09bc8.js → p-ea381f94.js} +1 -1
  144. package/dist/components/{p-aeef3de3.js → p-f589b91c.js} +2 -2
  145. package/dist/components/tds-accordion-item.js +2 -2
  146. package/dist/components/tds-accordion.js +1 -1
  147. package/dist/components/tds-banner.js +2 -2
  148. package/dist/components/tds-block.js +3 -7
  149. package/dist/components/tds-body-cell.js +1 -1
  150. package/dist/components/tds-breadcrumb.js +1 -1
  151. package/dist/components/tds-button.js +1 -1
  152. package/dist/components/tds-card.js +1 -1
  153. package/dist/components/tds-checkbox.js +1 -1
  154. package/dist/components/tds-chip.js +1 -1
  155. package/dist/components/tds-datetime.js +1 -1
  156. package/dist/components/tds-divider.js +1 -1
  157. package/dist/components/tds-dropdown-option.js +1 -1
  158. package/dist/components/tds-dropdown.js +1 -1
  159. package/dist/components/tds-folder-tab.js +3 -3
  160. package/dist/components/tds-folder-tabs.js +4 -4
  161. package/dist/components/tds-footer-group.js +2 -2
  162. package/dist/components/tds-footer-item.js +1 -1
  163. package/dist/components/tds-footer.js +1 -1
  164. package/dist/components/tds-header-brand-symbol.js +2 -2
  165. package/dist/components/tds-header-cell.js +3 -3
  166. package/dist/components/tds-header-dropdown-list-item.js +1 -1
  167. package/dist/components/tds-header-dropdown.js +5 -5
  168. package/dist/components/tds-header-hamburger.js +2 -2
  169. package/dist/components/tds-header-item.js +1 -1
  170. package/dist/components/tds-header-launcher-button.js +1 -1
  171. package/dist/components/tds-header-launcher-grid-item.js +1 -1
  172. package/dist/components/tds-header-launcher-list-item.js +1 -1
  173. package/dist/components/tds-header-launcher.js +6 -6
  174. package/dist/components/tds-icon.js +1 -1
  175. package/dist/components/tds-inline-tab.js +2 -2
  176. package/dist/components/tds-inline-tabs.js +4 -4
  177. package/dist/components/tds-message.js +2 -2
  178. package/dist/components/tds-modal.js +2 -2
  179. package/dist/components/tds-navigation-tab.js +2 -2
  180. package/dist/components/tds-navigation-tabs.js +6 -6
  181. package/dist/components/tds-popover-canvas.js +1 -1
  182. package/dist/components/tds-popover-core.js +1 -1
  183. package/dist/components/tds-popover-menu.js +1 -1
  184. package/dist/components/tds-side-menu-close-button.js +1 -1
  185. package/dist/components/tds-side-menu-collapse-button.js +1 -1
  186. package/dist/components/tds-side-menu-dropdown-list-item.js +1 -1
  187. package/dist/components/tds-side-menu-dropdown.js +2 -2
  188. package/dist/components/tds-side-menu-item.js +1 -1
  189. package/dist/components/tds-side-menu.js +1 -1
  190. package/dist/components/tds-slider.js +1 -1
  191. package/dist/components/tds-spinner.js +4 -5
  192. package/dist/components/tds-step.js +1 -1
  193. package/dist/components/tds-table-body-input-wrapper.js +3 -3
  194. package/dist/components/tds-table-body-row-expandable.js +8 -8
  195. package/dist/components/tds-table-body-row.js +4 -4
  196. package/dist/components/tds-table-body.js +1 -1
  197. package/dist/components/tds-table-footer.js +8 -8
  198. package/dist/components/tds-table-header-input-wrapper.js +3 -3
  199. package/dist/components/tds-table-header.js +4 -4
  200. package/dist/components/tds-table-toolbar.js +4 -4
  201. package/dist/components/tds-table.js +1 -1
  202. package/dist/components/tds-text-field.js +7 -10
  203. package/dist/components/tds-textarea.js +6 -6
  204. package/dist/components/tds-toast.js +5 -5
  205. package/dist/components/tds-toggle.js +3 -3
  206. package/dist/components/tds-tooltip.js +1 -1
  207. package/dist/esm/loader.js +1 -1
  208. package/dist/esm/tds-accordion-item.entry.js +1 -1
  209. package/dist/esm/tds-accordion.entry.js +1 -1
  210. package/dist/esm/tds-banner.entry.js +1 -1
  211. package/dist/esm/tds-block.entry.js +3 -7
  212. package/dist/esm/tds-body-cell.entry.js +1 -1
  213. package/dist/esm/tds-breadcrumb.entry.js +1 -1
  214. package/dist/esm/tds-button.entry.js +1 -1
  215. package/dist/esm/tds-checkbox.entry.js +1 -1
  216. package/dist/esm/tds-chip.entry.js +1 -1
  217. package/dist/esm/tds-core-header-item_2.entry.js +1 -1
  218. package/dist/esm/tds-divider.entry.js +1 -1
  219. package/dist/esm/tds-dropdown_2.entry.js +49 -34
  220. package/dist/esm/tds-folder-tab.entry.js +3 -3
  221. package/dist/esm/tds-folder-tabs.entry.js +3 -3
  222. package/dist/esm/tds-footer-group.entry.js +1 -1
  223. package/dist/esm/tds-footer-item.entry.js +1 -1
  224. package/dist/esm/tds-footer.entry.js +1 -1
  225. package/dist/esm/tds-header-brand-symbol.entry.js +1 -1
  226. package/dist/esm/tds-header-cell.entry.js +2 -2
  227. package/dist/esm/tds-header-dropdown-list-item.entry.js +1 -1
  228. package/dist/esm/tds-header-dropdown.entry.js +1 -1
  229. package/dist/esm/tds-header-launcher-grid-item.entry.js +1 -1
  230. package/dist/esm/tds-header-launcher.entry.js +1 -1
  231. package/dist/esm/tds-icon.entry.js +3 -8
  232. package/dist/esm/tds-inline-tab.entry.js +2 -2
  233. package/dist/esm/tds-inline-tabs.entry.js +3 -3
  234. package/dist/esm/tds-message.entry.js +1 -1
  235. package/dist/esm/tds-modal.entry.js +1 -1
  236. package/dist/esm/tds-navigation-tab.entry.js +2 -2
  237. package/dist/esm/tds-navigation-tabs.entry.js +5 -5
  238. package/dist/esm/tds-popover-core.entry.js +1 -1
  239. package/dist/esm/tds-side-menu-dropdown-list-item.entry.js +1 -1
  240. package/dist/esm/tds-side-menu-item.entry.js +1 -1
  241. package/dist/esm/tds-side-menu.entry.js +1 -1
  242. package/dist/esm/tds-spinner.entry.js +3 -3
  243. package/dist/esm/tds-table-body-input-wrapper.entry.js +2 -2
  244. package/dist/esm/tds-table-body-row-expandable.entry.js +8 -8
  245. package/dist/esm/tds-table-body-row.entry.js +3 -3
  246. package/dist/esm/tds-table-body.entry.js +1 -1
  247. package/dist/esm/tds-table-footer.entry.js +4 -4
  248. package/dist/esm/tds-table-header-input-wrapper.entry.js +2 -2
  249. package/dist/esm/tds-table-header.entry.js +3 -3
  250. package/dist/esm/tds-table-toolbar.entry.js +3 -3
  251. package/dist/esm/tds-table.entry.js +1 -1
  252. package/dist/esm/tds-text-field.entry.js +6 -9
  253. package/dist/esm/tds-textarea.entry.js +3 -3
  254. package/dist/esm/tds-toast.entry.js +4 -4
  255. package/dist/esm/tds-toggle.entry.js +3 -3
  256. package/dist/esm/tds-tooltip.entry.js +2 -2
  257. package/dist/esm/tegel.js +1 -1
  258. package/dist/tegel/assets/logos/scania/scania-logotype.png +0 -0
  259. package/dist/tegel/assets/logos/scania/scania-logotype.svg +2355 -0
  260. package/dist/tegel/assets/logos/scania/scania-wordmark-white.png +0 -0
  261. package/dist/tegel/assets/logos/scania/scania-wordmark.png +0 -0
  262. package/dist/tegel/assets/logos/scania/scania-wordmark.svg +17 -0
  263. package/dist/tegel/assets/logos/traton/traton-logotype-black.png +0 -0
  264. package/dist/tegel/assets/logos/traton/traton-logotype-black.svg +1 -0
  265. package/dist/tegel/assets/logos/traton/traton-logotype-blue.png +0 -0
  266. package/dist/tegel/assets/logos/traton/traton-logotype-blue.svg +1 -0
  267. package/dist/tegel/assets/logos/traton/traton-logotype-white.png +0 -0
  268. package/dist/tegel/assets/logos/traton/traton-logotype-white.svg +1 -0
  269. package/dist/tegel/{p-7fd272d1.entry.js → p-08f63e5d.entry.js} +1 -1
  270. package/dist/tegel/p-0cac9ea6.entry.js +1 -0
  271. package/dist/tegel/{p-e7638f10.entry.js → p-0cfe8671.entry.js} +1 -1
  272. package/dist/tegel/{p-ad30ee83.entry.js → p-106e048d.entry.js} +1 -1
  273. package/dist/tegel/p-1c75f8a7.entry.js +1 -0
  274. package/dist/tegel/{p-f12ce132.entry.js → p-2c56421f.entry.js} +1 -1
  275. package/dist/tegel/p-35a88a52.entry.js +1 -0
  276. package/dist/tegel/p-3a92d554.entry.js +1 -0
  277. package/dist/tegel/{p-0ca88c7c.entry.js → p-3ec01fb3.entry.js} +1 -1
  278. package/dist/tegel/p-4274d329.entry.js +1 -0
  279. package/dist/tegel/{p-32540392.entry.js → p-5020a688.entry.js} +1 -1
  280. package/dist/tegel/{p-a2576665.entry.js → p-52adc30c.entry.js} +1 -1
  281. package/dist/tegel/{p-0a0500f0.entry.js → p-5c077bb9.entry.js} +1 -1
  282. package/dist/tegel/p-5dd2aac8.entry.js +1 -0
  283. package/dist/tegel/{p-378fe79c.entry.js → p-614bcd4b.entry.js} +1 -1
  284. package/dist/tegel/p-614cc097.entry.js +1 -0
  285. package/dist/tegel/{p-fdc5c832.entry.js → p-61a1dc59.entry.js} +1 -1
  286. package/dist/tegel/{p-3e6d65ee.entry.js → p-67b4b2cf.entry.js} +1 -1
  287. package/dist/tegel/{p-da60d17b.entry.js → p-6a615ac1.entry.js} +1 -1
  288. package/dist/tegel/p-6d89dcbe.entry.js +1 -0
  289. package/dist/tegel/{p-4d60aa49.entry.js → p-6e57997e.entry.js} +1 -1
  290. package/dist/tegel/{p-0f8930be.entry.js → p-6eed8c31.entry.js} +1 -1
  291. package/dist/tegel/p-7013249b.entry.js +1 -0
  292. package/dist/tegel/p-72006dd7.entry.js +1 -0
  293. package/dist/tegel/p-76faaf70.entry.js +1 -0
  294. package/dist/tegel/{p-9e146138.entry.js → p-8c841698.entry.js} +1 -1
  295. package/dist/tegel/p-942abc1e.entry.js +1 -0
  296. package/dist/tegel/{p-eb134c44.entry.js → p-98106799.entry.js} +1 -1
  297. package/dist/tegel/p-9b2257f3.entry.js +1 -0
  298. package/dist/tegel/{p-94aa8b19.entry.js → p-a0591e58.entry.js} +1 -1
  299. package/dist/tegel/{p-b3446292.entry.js → p-ab103d0c.entry.js} +1 -1
  300. package/dist/tegel/p-aec3e4cf.entry.js +1 -0
  301. package/dist/tegel/{p-97de52aa.entry.js → p-b734b309.entry.js} +1 -1
  302. package/dist/tegel/{p-6631ea34.entry.js → p-bb1d069f.entry.js} +1 -1
  303. package/dist/tegel/{p-364c08ec.entry.js → p-bcd5e06d.entry.js} +1 -1
  304. package/dist/tegel/p-bd935506.entry.js +1 -0
  305. package/dist/tegel/p-bdc913a0.entry.js +1 -0
  306. package/dist/tegel/{p-a1444bc5.entry.js → p-c0b26507.entry.js} +1 -1
  307. package/dist/tegel/p-c6beca5e.entry.js +1 -0
  308. package/dist/tegel/{p-051c9000.entry.js → p-c7b0253c.entry.js} +1 -1
  309. package/dist/tegel/p-cf7af8f2.entry.js +1 -0
  310. package/dist/tegel/{p-2e5d2bec.entry.js → p-d267c18f.entry.js} +1 -1
  311. package/dist/tegel/{p-0fdd14c7.entry.js → p-d9040b7f.entry.js} +1 -1
  312. package/dist/tegel/p-dc375d3e.entry.js +1 -0
  313. package/dist/tegel/p-e3c2b6b4.entry.js +1 -0
  314. package/dist/tegel/p-f2232281.entry.js +1 -0
  315. package/dist/tegel/p-f4b5e80b.entry.js +1 -0
  316. package/dist/tegel/p-f78b6a16.entry.js +1 -0
  317. package/dist/tegel/p-fbffe3aa.entry.js +1 -0
  318. package/dist/tegel/tegel.css +19 -77
  319. package/dist/tegel/tegel.esm.js +1 -1
  320. package/dist/types/components/dropdown/dropdown-option/dropdown-option.d.ts +3 -0
  321. package/dist/types/components/dropdown/dropdown.d.ts +15 -10
  322. package/dist/types/components.d.ts +17 -2
  323. package/dist/types/types/TratonIcons.d.ts +1 -1
  324. package/package.json +2 -8
  325. package/scripts/copy-assets.mjs +32 -30
  326. package/dist/components/p-ab1f729e.js +0 -114
  327. package/dist/components/p-e8834dcb.js +0 -2098
  328. package/dist/tegel/p-0103f442.entry.js +0 -1
  329. package/dist/tegel/p-036e12d4.entry.js +0 -1
  330. package/dist/tegel/p-103f9b0d.entry.js +0 -1
  331. package/dist/tegel/p-211cef64.entry.js +0 -1
  332. package/dist/tegel/p-222944dc.entry.js +0 -1
  333. package/dist/tegel/p-25d21e10.entry.js +0 -1
  334. package/dist/tegel/p-326f0bf4.entry.js +0 -1
  335. package/dist/tegel/p-4948ae4a.entry.js +0 -1
  336. package/dist/tegel/p-4a4b5069.entry.js +0 -1
  337. package/dist/tegel/p-58ec7381.entry.js +0 -1
  338. package/dist/tegel/p-5bc63fd1.entry.js +0 -1
  339. package/dist/tegel/p-62975e6d.entry.js +0 -1
  340. package/dist/tegel/p-7a97ac5e.entry.js +0 -1
  341. package/dist/tegel/p-8bf0f99f.entry.js +0 -1
  342. package/dist/tegel/p-90072813.entry.js +0 -1
  343. package/dist/tegel/p-940d3cba.entry.js +0 -1
  344. package/dist/tegel/p-a2f84e4a.entry.js +0 -1
  345. package/dist/tegel/p-b5a3c528.entry.js +0 -1
  346. package/dist/tegel/p-d1349d6c.entry.js +0 -1
  347. package/dist/tegel/p-d1b356d5.entry.js +0 -1
  348. package/dist/tegel/p-daaf8d8f.entry.js +0 -1
  349. package/dist/tegel/p-dd5245ed.entry.js +0 -1
  350. package/dist/tegel/p-f67a8209.entry.js +0 -1
  351. package/dist/tegel/p-f76d8ab9.entry.js +0 -1
  352. package/dist-styles/core.css +0 -5963
  353. package/dist-styles/scania-variables.css +0 -1328
  354. package/dist-styles/scania.css +0 -7291
  355. package/dist-styles/traton-variables.css +0 -1064
  356. package/dist-styles/traton.css +0 -7027
  357. /package/dist/collection/assets/logos/{scania-symbol.png → scania/scania-symbol.png} +0 -0
  358. /package/dist/collection/assets/logos/{scania-symbol.svg → scania/scania-symbol.svg} +0 -0
  359. /package/dist/collection/assets/logos/{scania-wordmark-white.svg → scania/scania-wordmark-white.svg} +0 -0
  360. /package/dist/tegel/assets/logos/{scania-symbol.png → scania/scania-symbol.png} +0 -0
  361. /package/dist/tegel/assets/logos/{scania-symbol.svg → scania/scania-symbol.svg} +0 -0
  362. /package/dist/tegel/assets/logos/{scania-wordmark-white.svg → scania/scania-wordmark-white.svg} +0 -0
package/dist-styles/traton-variables.css DELETED
@@ -1,1064 +0,0 @@
1
- /* Spacing */
2
- :root,
3
- .traton {
4
- /* Radius tokens */
5
- --radius-narrow: var(--unit-4);
6
- --radius-soft: var(--unit-8);
7
- --radius-rounded: var(--unit-32);
8
- --radius-circle: 500px;
9
- /* Radius for-surface tokens */
10
- --radius-surface-clickable: var(--radius-full);
11
- --radius-surface-field: var(--unit-2);
12
- /* Radius for-area tokens */
13
- --radius-area-large: var(--unit-8);
14
- --radius-area-small: var(--unit-4);
15
- /* Space tokens */
16
- --space-tiny: var(--unit-4);
17
- --space-small: var(--unit-16);
18
- --space-medium: var(--unit-24);
19
- --space-large: var(--unit-48);
20
- --space-huge: var(--unit-80);
21
- }
22
-
23
- /* Typography */
24
- /* === TRATON Type Display === */
25
- @font-face {
26
- font-family: "TRATON Type Display";
27
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-medium.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-medium.woff") format("woff");
28
- font-weight: 500;
29
- font-style: normal;
30
- font-display: swap;
31
- }
32
- @font-face {
33
- font-family: "TRATON Type Display";
34
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-bold.woff") format("woff");
35
- font-weight: 700;
36
- font-style: normal;
37
- font-display: swap;
38
- }
39
- /* === TRATON Type Text === */
40
- @font-face {
41
- font-family: "TRATON Type Text";
42
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-regular.woff") format("woff");
43
- font-weight: 400;
44
- font-style: normal;
45
- font-display: swap;
46
- }
47
- @font-face {
48
- font-family: "TRATON Type Text";
49
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-italic.woff") format("woff");
50
- font-weight: 400;
51
- font-style: italic;
52
- font-display: swap;
53
- }
54
- @font-face {
55
- font-family: "TRATON Type Text";
56
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium.woff") format("woff");
57
- font-weight: 500;
58
- font-style: normal;
59
- font-display: swap;
60
- }
61
- @font-face {
62
- font-family: "TRATON Type Text";
63
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium-italic.woff") format("woff");
64
- font-weight: 500;
65
- font-style: italic;
66
- font-display: swap;
67
- }
68
- @font-face {
69
- font-family: "TRATON Type Text";
70
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold.woff") format("woff");
71
- font-weight: 600;
72
- font-style: normal;
73
- font-display: swap;
74
- }
75
- @font-face {
76
- font-family: "TRATON Type Text";
77
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold-italic.woff") format("woff");
78
- font-weight: 600;
79
- font-style: italic;
80
- font-display: swap;
81
- }
82
- @font-face {
83
- font-family: "TRATON Type Text";
84
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold.woff") format("woff");
85
- font-weight: 700;
86
- font-style: normal;
87
- font-display: swap;
88
- }
89
- @font-face {
90
- font-family: "TRATON Type Text";
91
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold-italic.woff") format("woff");
92
- font-weight: 700;
93
- font-style: italic;
94
- font-display: swap;
95
- }
96
- .traton {
97
- /* Font size tokens */
98
- --super-type-01-font-size: 216px;
99
- --super-type-02-font-size: 156px;
100
- --super-type-03-font-size: 112px;
101
- --expressive-headline-01-font-size: 80px;
102
- --expressive-headline-02-font-size: 56px;
103
- --headline-01-font-size: 40px;
104
- --headline-02-font-size: 32px;
105
- --headline-03-font-size: 24px;
106
- --headline-04-font-size: 20px;
107
- --headline-05-font-size: 16px;
108
- --headline-06-font-size: 14px;
109
- --headline-07-font-size: 14px;
110
- --paragraph-01-font-size: 24px;
111
- --paragraph-02-font-size: 20px;
112
- --body-01-font-size: 16px;
113
- --body-02-font-size: 14px;
114
- --body-link-01-font-size: 16px;
115
- --body-link-02-font-size: 14px;
116
- --detail-01-font-size: 16px;
117
- --detail-02-font-size: 14px;
118
- --detail-03-font-size: 14px;
119
- --detail-04-font-size: 12px;
120
- --detail-05-font-size: 12px;
121
- --detail-06-font-size: 10px;
122
- --detail-07-font-size: 10px;
123
- /* Typography Line Height Tokens */
124
- --super-type-01-line-height: 227px;
125
- --super-type-02-line-height: 164px;
126
- --super-type-03-line-height: 106px;
127
- --expressive-headline-01-line-height: 84px;
128
- --expressive-headline-02-line-height: 59px;
129
- --headline-01-line-height: 42px;
130
- --headline-02-line-height: 40px;
131
- --headline-03-line-height: 30px;
132
- --headline-04-line-height: 25px;
133
- --headline-05-line-height: 22px;
134
- --headline-06-line-height: 20px;
135
- --headline-07-line-height: 18px;
136
- --paragraph-01-line-height: 30px;
137
- --paragraph-02-line-height: 25px;
138
- --body-01-line-height: 22px;
139
- --body-02-line-height: 20px;
140
- --body-link-01-line-height: 22px;
141
- --body-link-02-line-height: 20px;
142
- --detail-01-line-height: 22px;
143
- --detail-02-line-height: 16px;
144
- --detail-03-line-height: 20px;
145
- --detail-04-line-height: 17px;
146
- --detail-05-line-height: 17px;
147
- --detail-06-line-height: 14px;
148
- --detail-07-line-height: 14px;
149
- /* Typography Font Family Tokens */
150
- --super-type-01-font-family: "TRATON Type Display", verdana;
151
- --super-type-02-font-family: "TRATON Type Display", verdana;
152
- --super-type-03-font-family: "TRATON Type Display", verdana;
153
- --expressive-headline-01-font-family: "TRATON Type Display", verdana;
154
- --expressive-headline-02-font-family: "TRATON Type Display", verdana;
155
- --headline-01-font-family: "TRATON Type Display", verdana;
156
- --headline-02-font-family: "TRATON Type Display", verdana;
157
- --headline-03-font-family: "TRATON Type Display", verdana;
158
- --headline-04-font-family: "TRATON Type Display", verdana;
159
- --headline-05-font-family: "TRATON Type Text", verdana;
160
- --headline-06-font-family: "TRATON Type Text", verdana;
161
- --headline-07-font-family: "TRATON Type Text", verdana;
162
- --paragraph-01-font-family: "TRATON Type Display", verdana;
163
- --paragraph-02-font-family: "TRATON Type Display", verdana;
164
- --body-01-font-family: "TRATON Type Text", verdana;
165
- --body-02-font-family: "TRATON Type Text", verdana;
166
- --body-link-01-font-family: "TRATON Type Text", verdana;
167
- --body-link-02-font-family: "TRATON Type Text", verdana;
168
- --detail-01-font-family: "TRATON Type Text", verdana;
169
- --detail-02-font-family: "TRATON Type Text", verdana;
170
- --detail-03-font-family: "TRATON Type Text", verdana;
171
- --detail-04-font-family: "TRATON Type Text", verdana;
172
- --detail-05-font-family: "TRATON Type Text", verdana;
173
- --detail-06-font-family: "TRATON Type Text", verdana;
174
- --detail-07-font-family: "TRATON Type Text", verdana;
175
- /* Typography Font Weight Tokens */
176
- --super-type-01-font-weight: normal;
177
- --super-type-02-font-weight: normal;
178
- --super-type-03-font-weight: normal;
179
- --expressive-headline-01-font-weight: normal;
180
- --expressive-headline-02-font-weight: normal;
181
- --headline-01-font-weight: normal;
182
- --headline-02-font-weight: normal;
183
- --headline-03-font-weight: normal;
184
- --headline-04-font-weight: normal;
185
- --headline-05-font-weight: 600;
186
- --headline-06-font-weight: 600;
187
- --headline-07-font-weight: 600;
188
- --paragraph-01-font-weight: normal;
189
- --paragraph-02-font-weight: normal;
190
- --body-01-font-weight: normal;
191
- --body-02-font-weight: normal;
192
- --body-link-01-font-weight: normal;
193
- --body-link-02-font-weight: normal;
194
- --detail-01-font-weight: normal;
195
- --detail-02-font-weight: normal;
196
- --detail-03-font-weight: normal;
197
- --detail-04-font-weight: 600;
198
- --detail-05-font-weight: normal;
199
- --detail-06-font-weight: 600;
200
- --detail-07-font-weight: normal;
201
- /* Typography Letter-Spacing (Kerning) Tokens */
202
- --super-type-01-letter-spacing: 1.08px;
203
- --super-type-02-letter-spacing: 0.78px;
204
- --super-type-03-letter-spacing: 0.56px;
205
- --expressive-headline-01-letter-spacing: 0.4px;
206
- --expressive-headline-02-letter-spacing: 0.28px;
207
- --headline-01-letter-spacing: 0;
208
- --headline-02-letter-spacing: 0;
209
- --headline-03-letter-spacing: 0;
210
- --headline-04-letter-spacing: 0;
211
- --headline-05-letter-spacing: 0;
212
- --headline-06-letter-spacing: 0;
213
- --headline-07-letter-spacing: 0;
214
- --paragraph-01-letter-spacing: 0;
215
- --paragraph-02-letter-spacing: 0;
216
- --body-01-letter-spacing: 0;
217
- --body-02-letter-spacing: 0;
218
- --body-link-01-letter-spacing: 0;
219
- --body-link-02-letter-spacing: 0;
220
- --detail-01-letter-spacing: 0;
221
- --detail-02-letter-spacing: 0;
222
- --detail-03-letter-spacing: 0;
223
- --detail-04-letter-spacing: 0.48px;
224
- --detail-05-letter-spacing: 0;
225
- --detail-06-letter-spacing: 0.4px;
226
- --detail-07-letter-spacing: 0;
227
- /* Text transform tokens */
228
- --super-type-01-text-transform: uppercase;
229
- --super-type-02-text-transform: uppercase;
230
- --super-type-03-text-transform: uppercase;
231
- --expressive-headline-01-text-transform: uppercase;
232
- --expressive-headline-02-text-transform: uppercase;
233
- --headline-01-text-transform: none;
234
- --headline-02-text-transform: none;
235
- --headline-03-text-transform: none;
236
- --headline-04-text-transform: none;
237
- --headline-05-text-transform: none;
238
- --headline-06-text-transform: none;
239
- --headline-07-text-transform: none;
240
- --paragraph-01-text-transform: none;
241
- --paragraph-02-text-transform: none;
242
- --body-01-text-transform: none;
243
- --body-02-text-transform: none;
244
- --body-link-01-text-transform: none;
245
- --body-link-02-text-transform: none;
246
- --detail-01-text-transform: none;
247
- --detail-02-text-transform: none;
248
- --detail-03-text-transform: none;
249
- --detail-04-text-transform: uppercase;
250
- --detail-05-text-transform: none;
251
- --detail-06-text-transform: uppercase;
252
- --detail-07-text-transform: none;
253
- }
254
-
255
- /* Traton primitive tokens */
256
- /**
257
- * Do not edit directly, this file was auto-generated.
258
- */
259
- :root {
260
- --traton-color-yellow-50: #fff6db;
261
- --traton-color-yellow-100: #ffe9aa;
262
- --traton-color-yellow-150: #ffdc7a;
263
- --traton-color-yellow-200: #ffd04a;
264
- --traton-color-yellow-300: #ffc00d;
265
- --traton-color-yellow-400: #e5ad0c;
266
- --traton-color-yellow-500: #bf900a;
267
- --traton-color-yellow-600: #997308;
268
- --traton-color-yellow-700: #735606;
269
- --traton-color-yellow-800: #594305;
270
- --traton-color-yellow-850: #433204;
271
- --traton-color-yellow-900: #302403;
272
- --traton-color-yellow-950: #241b00;
273
- --traton-color-yellow-1000: #1a1300;
274
- --traton-color-blue-50: #f8fcfc;
275
- --traton-color-blue-100: #e9f5f6;
276
- --traton-color-blue-150: #d9edf0;
277
- --traton-color-blue-200: #b3dce1;
278
- --traton-color-blue-300: #8ccad2;
279
- --traton-color-blue-400: #66b8c4;
280
- --traton-color-blue-500: #2d9ead;
281
- --traton-color-blue-600: #008294;
282
- --traton-color-blue-700: #006371;
283
- --traton-color-blue-800: #004852;
284
- --traton-color-blue-850: #003137;
285
- --traton-color-blue-900: #002429;
286
- --traton-color-blue-950: #001d21;
287
- --traton-color-blue-1000: #001214;
288
- --traton-color-grey-50: #fcfbf7;
289
- --traton-color-grey-100: #f6f3e9;
290
- --traton-color-grey-150: #ebe7dd;
291
- --traton-color-grey-200: #d6d4c9;
292
- --traton-color-grey-300: #c2bfb6;
293
- --traton-color-grey-400: #a6a49c;
294
- --traton-color-grey-500: #8c8a84;
295
- --traton-color-grey-600: #73716c;
296
- --traton-color-grey-700: #595854;
297
- --traton-color-grey-800: #454441;
298
- --traton-color-grey-850: #333230;
299
- --traton-color-grey-900: #252423;
300
- --traton-color-grey-950: #1a1a19;
301
- --traton-color-grey-1000: #100f0f;
302
- --traton-color-base-warm-white: #fcfbf7;
303
- --traton-color-base-neutral-white: #fff;
304
- --traton-color-base-neutral-black: #000;
305
- --traton-color-transparent-200: rgba(26, 26, 25, 0.15);
306
- --traton-color-transparent-400: rgba(26, 26, 25, 0.36);
307
- --traton-color-transparent-500: rgba(26, 26, 25, 0.5);
308
- --traton-color-transparent-600: rgba(26, 26, 25, 0.62);
309
- --traton-color-transparent-700: rgba(26, 26, 25, 0.76);
310
- --traton-color-transparent-950: #001d21;
311
- --traton-color-transparent-inverse-200: rgba(217, 237, 240, 0.33);
312
- --traton-color-transparent-inverse-400: rgba(217, 237, 240, 0.49);
313
- --traton-color-transparent-inverse-500: rgba(217, 237, 240, 0.63);
314
- --traton-color-transparent-inverse-600: rgba(217, 237, 240, 0.75);
315
- --traton-color-transparent-inverse-700: rgba(217, 237, 240, 0.87);
316
- --traton-color-transparent-inverse-950: #fff;
317
- --traton-color-transparent-scrim-light: rgba(0, 0, 0, 0.4);
318
- --traton-color-transparent-scrim-dark: rgba(0, 0, 0, 0.6);
319
- --traton-color-transparent-invisible-light: rgba(255, 255, 255, 0);
320
- --traton-color-transparent-invisible-dark: rgba(0, 0, 0, 0);
321
- --traton-color-red-50: #ffe0e0;
322
- --traton-color-red-100: #f7baba;
323
- --traton-color-red-150: #f28686;
324
- --traton-color-red-200: #ec5655;
325
- --traton-color-red-300: #d83b3a;
326
- --traton-color-red-400: #bc302f;
327
- --traton-color-red-500: #a02f2e;
328
- --traton-color-red-600: #852929;
329
- --traton-color-red-700: #6d2323;
330
- --traton-color-red-800: #551b1b;
331
- --traton-color-red-850: #411616;
332
- --traton-color-red-900: #311111;
333
- --traton-color-red-950: #240d0d;
334
- --traton-color-red-1000: #140808;
335
- --traton-color-green-50: #d1fad1;
336
- --traton-color-green-100: #adebb1;
337
- --traton-color-green-150: #81d585;
338
- --traton-color-green-200: #5abf5c;
339
- --traton-color-green-300: #3ba63f;
340
- --traton-color-green-400: #38943c;
341
- --traton-color-green-500: #318035;
342
- --traton-color-green-600: #2b6c2e;
343
- --traton-color-green-700: #235727;
344
- --traton-color-green-800: #1d441f;
345
- --traton-color-green-850: #153217;
346
- --traton-color-green-900: #102311;
347
- --traton-color-green-950: #0d1b0e;
348
- --traton-color-green-1000: #080c08;
349
- --traton-font-family-default: traton type text;
350
- --traton-font-family-display: traton type display;
351
- --traton-font-weight-semi-bold: 600;
352
- --traton-font-weight-medium: 500;
353
- --traton-font-weight-regular: 400;
354
- --traton-unit-0: 0;
355
- --traton-unit-1: 1px;
356
- --traton-unit-2: 2px;
357
- --traton-unit-4: 4px;
358
- --traton-unit-8: 8px;
359
- --traton-unit-12: 12px;
360
- --traton-unit-16: 16px;
361
- --traton-unit-20: 20px;
362
- --traton-unit-24: 24px;
363
- --traton-unit-32: 32px;
364
- --traton-unit-40: 40px;
365
- --traton-unit-48: 48px;
366
- --traton-unit-56: 56px;
367
- --traton-unit-64: 64px;
368
- --traton-unit-80: 80px;
369
- --traton-unit-96: 96px;
370
- --traton-unit-120: 120px;
371
- --traton-unit-9999: 9999px;
372
- }
373
-
374
- /* Traton color tokens */
375
- /**
376
- * Do not edit directly, this file was auto-generated.
377
- */
378
- .traton .tds-mode-light {
379
- --color-background-base: var(--traton-color-grey-50);
380
- --color-background-accent-primary-default: var(--traton-color-blue-800);
381
- --color-background-accent-primary-disabled: var(--traton-color-blue-100);
382
- --color-background-accent-primary-hover: var(--traton-color-blue-850);
383
- --color-background-accent-primary-pressed: var(--traton-color-blue-900);
384
- --color-background-accent-primary-focus: var(--traton-color-blue-850);
385
- --color-background-accent-primary-inverse-default: var(--traton-color-grey-300);
386
- --color-background-accent-primary-inverse-hover: var(--traton-color-grey-200);
387
- --color-background-accent-primary-inverse-pressed: var(--traton-color-grey-400);
388
- --color-background-accent-primary-inverse-focus: var(--traton-color-grey-100);
389
- --color-background-accent-primary-inverse-disabled: var(--traton-color-grey-900);
390
- --color-background-accent-danger-default: var(--traton-color-red-300);
391
- --color-background-accent-danger-hover: var(--traton-color-red-400);
392
- --color-background-accent-danger-pressed: var(--traton-color-red-600);
393
- --color-background-accent-danger-focus: var(--traton-color-red-400);
394
- --color-background-accent-danger-disabled: var(--traton-color-red-50);
395
- --color-background-layer-01: var(--traton-color-grey-100);
396
- --color-background-layer-02: var(--traton-color-grey-50);
397
- --color-background-layer-03: var(--traton-color-grey-100);
398
- --color-background-overlay: var(--traton-color-transparent-scrim-light);
399
- --color-background-inverse-base: var(--traton-color-grey-1000);
400
- --color-background-inverse-layer-01: var(--traton-color-grey-950);
401
- --color-background-inverse-layer-02: var(--traton-color-grey-900);
402
- --color-background-inverse-layer-03: var(--traton-color-grey-850);
403
- --color-background-inverse-top: var(--traton-color-grey-900);
404
- --color-background-inverse-overlay: var(--traton-color-transparent-scrim-light);
405
- --color-background-surface-100: var(--traton-color-grey-150);
406
- --color-background-surface-200: var(--traton-color-grey-200);
407
- --color-background-surface-300: var(--traton-color-grey-300);
408
- --color-background-surface-400: var(--traton-color-grey-400);
409
- --color-background-surface-500: var(--traton-color-grey-500);
410
- --color-background-surface-600: var(--traton-color-grey-600);
411
- --color-background-surface-700: var(--traton-color-grey-700);
412
- --color-background-surface-800: var(--traton-color-grey-800);
413
- --color-background-surface-900: var(--traton-color-grey-900);
414
- --color-background-surface-1000: var(--traton-color-grey-950);
415
- --color-background-top: var(--traton-color-grey-50);
416
- --color-system-warning-default: var(--traton-color-yellow-300);
417
- --color-system-warning-discrete: var(--traton-color-yellow-100);
418
- --color-system-warning-strong: var(--traton-color-yellow-800);
419
- --color-system-warning-defined: var(--traton-color-yellow-600);
420
- --color-system-warning-subtle: var(--traton-color-yellow-200);
421
- --color-system-success-default: var(--traton-color-green-300);
422
- --color-system-success-discrete: var(--traton-color-green-50);
423
- --color-system-success-strong: var(--traton-color-green-850);
424
- --color-system-success-defined: var(--traton-color-green-500);
425
- --color-system-success-subtle: var(--traton-color-green-200);
426
- --color-system-info-default: var(--traton-color-blue-500);
427
- --color-system-info-discrete: var(--traton-color-blue-150);
428
- --color-system-info-strong: var(--traton-color-blue-800);
429
- --color-system-info-defined: var(--traton-color-blue-800);
430
- --color-system-info-subtle: var(--traton-color-blue-400);
431
- --color-system-danger-default: var(--traton-color-red-300);
432
- --color-system-danger-discrete: var(--traton-color-red-50);
433
- --color-system-danger-strong: var(--traton-color-red-850);
434
- --color-system-danger-defined: var(--traton-color-red-500);
435
- --color-system-danger-subtle: var(--traton-color-red-200);
436
- --color-foreground-text-accent-default: var(--traton-color-blue-700);
437
- --color-foreground-text-accent-brand: var(--traton-color-blue-950);
438
- --color-foreground-text-accent-brand-inverse: var(--traton-color-blue-700);
439
- --color-foreground-text-accent-visited: var(--traton-color-blue-950);
440
- --color-foreground-text-strong: var(--traton-color-transparent-950);
441
- --color-foreground-text-defined: var(--traton-color-transparent-700);
442
- --color-foreground-text-subtle: var(--traton-color-transparent-500);
443
- --color-foreground-text-inverse-strong: var(--traton-color-transparent-inverse-950);
444
- --color-foreground-text-inverse-soft: var(--traton-color-transparent-inverse-600);
445
- --color-foreground-text-inverse-subtle: var(--traton-color-transparent-inverse-500);
446
- --color-foreground-text-inverse-defined: var(--traton-color-transparent-inverse-700);
447
- --color-foreground-text-inverse-disabled: var(--traton-color-transparent-inverse-400);
448
- --color-foreground-text-inverse-brand: var(--traton-color-base-neutral-white);
449
- --color-foreground-text-brand: var(--traton-color-blue-950);
450
- --color-foreground-text-disabled: var(--traton-color-transparent-400);
451
- --color-foreground-text-soft: var(--traton-color-transparent-600);
452
- --color-foreground-border-inverse-strong: var(--traton-color-transparent-inverse-950);
453
- --color-foreground-border-inverse-soft: var(--traton-color-transparent-inverse-600);
454
- --color-foreground-border-inverse-subtle: var(--traton-color-transparent-inverse-500);
455
- --color-foreground-border-inverse-discrete: var(--traton-color-transparent-inverse-200);
456
- --color-foreground-border-inverse-defined: var(--traton-color-transparent-inverse-700);
457
- --color-foreground-border-inverse-disabled: var(--traton-color-transparent-inverse-400);
458
- --color-foreground-border-strong: var(--traton-color-transparent-950);
459
- --color-foreground-border-soft: var(--traton-color-transparent-600);
460
- --color-foreground-border-subtle: var(--traton-color-transparent-500);
461
- --color-foreground-border-discrete: var(--traton-color-transparent-200);
462
- --color-foreground-border-accent-link: var(--traton-color-yellow-300);
463
- --color-foreground-border-accent-focus: var(--traton-color-blue-500);
464
- --color-foreground-border-defined: var(--traton-color-transparent-700);
465
- --color-foreground-border-disabled: var(--traton-color-transparent-400);
466
- --color-foreground-icon-strong: var(--traton-color-transparent-950);
467
- --color-foreground-icon-defined: var(--traton-color-transparent-700);
468
- --color-foreground-icon-soft: var(--traton-color-transparent-600);
469
- --color-foreground-icon-subtle: var(--traton-color-transparent-500);
470
- --color-foreground-icon-disabled: var(--traton-color-transparent-400);
471
- --color-foreground-icon-discrete: var(--traton-color-transparent-200);
472
- --color-foreground-icon-inverse-strong: var(--traton-color-transparent-inverse-950);
473
- --color-foreground-icon-inverse-defined: var(--traton-color-transparent-inverse-700);
474
- --color-foreground-icon-inverse-soft: var(--traton-color-transparent-inverse-600);
475
- --color-foreground-icon-inverse-subtle: var(--traton-color-transparent-inverse-500);
476
- --color-foreground-icon-inverse-disabled: var(--traton-color-transparent-inverse-400);
477
- --color-foreground-icon-inverse-discrete: var(--traton-color-transparent-inverse-200);
478
- --color-foreground-icon-accent-default: var(--traton-color-blue-700);
479
- --color-foreground-icon-accent-visited: var(--traton-color-blue-950);
480
- --color-foreground-icon-accent-brand: var(--traton-color-blue-950);
481
- --color-foreground-icon-accent-brand-inverse: var(--traton-color-blue-700);
482
- --color-brand-neutral-white: var(--traton-color-base-neutral-white);
483
- --color-brand-neutral-black: var(--traton-color-base-neutral-black);
484
- --color-brand-primary-50: var(--traton-color-blue-50);
485
- --color-brand-primary-100: var(--traton-color-blue-100);
486
- --color-brand-primary-200: var(--traton-color-blue-200);
487
- --color-brand-primary-300: var(--traton-color-blue-300);
488
- --color-brand-primary-400: var(--traton-color-blue-400);
489
- --color-brand-primary-500: var(--traton-color-blue-500);
490
- --color-brand-primary-600: var(--traton-color-blue-600);
491
- --color-brand-primary-700: var(--traton-color-blue-700);
492
- --color-brand-primary-800: var(--traton-color-blue-800);
493
- --color-brand-primary-900: var(--traton-color-blue-900);
494
- --color-brand-secondary-50: var(--traton-color-yellow-50);
495
- --color-brand-secondary-100: var(--traton-color-yellow-100);
496
- --color-brand-secondary-200: var(--traton-color-yellow-200);
497
- --color-brand-secondary-300: var(--traton-color-yellow-300);
498
- --color-brand-secondary-400: var(--traton-color-yellow-400);
499
- --color-brand-secondary-500: var(--traton-color-yellow-500);
500
- --color-brand-secondary-600: var(--traton-color-yellow-600);
501
- --color-brand-secondary-700: var(--traton-color-yellow-700);
502
- --color-brand-secondary-800: var(--traton-color-yellow-800);
503
- --color-brand-secondary-900: var(--traton-color-yellow-900);
504
- }
505
-
506
- /**
507
- * Do not edit directly, this file was auto-generated.
508
- */
509
- .traton .tds-mode-dark {
510
- --color-background-base: var(--traton-color-blue-1000);
511
- --color-background-accent-primary-default: var(--traton-color-grey-300);
512
- --color-background-accent-primary-disabled: var(--traton-color-grey-900);
513
- --color-background-accent-primary-hover: var(--traton-color-grey-200);
514
- --color-background-accent-primary-pressed: var(--traton-color-grey-400);
515
- --color-background-accent-primary-focus: var(--traton-color-grey-100);
516
- --color-background-accent-primary-inverse-default: var(--traton-color-blue-800);
517
- --color-background-accent-primary-inverse-hover: var(--traton-color-blue-850);
518
- --color-background-accent-primary-inverse-pressed: var(--traton-color-blue-900);
519
- --color-background-accent-primary-inverse-focus: var(--traton-color-blue-850);
520
- --color-background-accent-primary-inverse-disabled: var(--traton-color-blue-100);
521
- --color-background-accent-danger-default: var(--traton-color-red-300);
522
- --color-background-accent-danger-hover: var(--traton-color-red-400);
523
- --color-background-accent-danger-pressed: var(--traton-color-red-600);
524
- --color-background-accent-danger-focus: var(--traton-color-red-400);
525
- --color-background-accent-danger-disabled: var(--traton-color-red-900);
526
- --color-background-layer-01: var(--traton-color-blue-950);
527
- --color-background-layer-02: var(--traton-color-blue-900);
528
- --color-background-layer-03: var(--traton-color-blue-850);
529
- --color-background-overlay: var(--traton-color-transparent-scrim-dark);
530
- --color-background-inverse-base: var(--traton-color-blue-50);
531
- --color-background-inverse-layer-01: var(--traton-color-blue-100);
532
- --color-background-inverse-layer-02: var(--traton-color-blue-150);
533
- --color-background-inverse-layer-03: var(--traton-color-blue-200);
534
- --color-background-inverse-top: var(--traton-color-blue-50);
535
- --color-background-inverse-overlay: var(--traton-color-transparent-scrim-dark);
536
- --color-background-surface-100: var(--traton-color-blue-900);
537
- --color-background-surface-200: var(--traton-color-blue-850);
538
- --color-background-surface-300: var(--traton-color-blue-800);
539
- --color-background-surface-400: var(--traton-color-blue-700);
540
- --color-background-surface-500: var(--traton-color-blue-600);
541
- --color-background-surface-600: var(--traton-color-blue-500);
542
- --color-background-surface-700: var(--traton-color-blue-400);
543
- --color-background-surface-800: var(--traton-color-blue-300);
544
- --color-background-surface-900: var(--traton-color-blue-200);
545
- --color-background-surface-1000: var(--traton-color-blue-150);
546
- --color-background-top: var(--traton-color-blue-900);
547
- --color-system-warning-default: var(--traton-color-yellow-300);
548
- --color-system-warning-discrete: var(--traton-color-yellow-800);
549
- --color-system-warning-strong: var(--traton-color-yellow-100);
550
- --color-system-warning-defined: var(--traton-color-yellow-200);
551
- --color-system-warning-subtle: var(--traton-color-yellow-400);
552
- --color-system-success-default: var(--traton-color-green-300);
553
- --color-system-success-discrete: var(--traton-color-green-850);
554
- --color-system-success-strong: var(--traton-color-green-50);
555
- --color-system-success-defined: var(--traton-color-green-200);
556
- --color-system-success-subtle: var(--traton-color-green-400);
557
- --color-system-info-default: var(--traton-color-blue-500);
558
- --color-system-info-discrete: var(--traton-color-blue-850);
559
- --color-system-info-strong: var(--traton-color-blue-100);
560
- --color-system-info-defined: var(--traton-color-blue-100);
561
- --color-system-info-subtle: var(--traton-color-blue-600);
562
- --color-system-danger-default: var(--traton-color-red-300);
563
- --color-system-danger-discrete: var(--traton-color-red-850);
564
- --color-system-danger-strong: var(--traton-color-red-50);
565
- --color-system-danger-defined: var(--traton-color-red-100);
566
- --color-system-danger-subtle: var(--traton-color-red-500);
567
- --color-foreground-text-accent-default: var(--traton-color-blue-400);
568
- --color-foreground-text-accent-brand: var(--traton-color-blue-50);
569
- --color-foreground-text-accent-brand-inverse: var(--traton-color-blue-500);
570
- --color-foreground-text-accent-visited: var(--traton-color-blue-150);
571
- --color-foreground-text-strong: var(--traton-color-transparent-inverse-950);
572
- --color-foreground-text-defined: var(--traton-color-transparent-inverse-700);
573
- --color-foreground-text-subtle: var(--traton-color-transparent-inverse-500);
574
- --color-foreground-text-inverse-strong: var(--traton-color-transparent-950);
575
- --color-foreground-text-inverse-soft: var(--traton-color-transparent-600);
576
- --color-foreground-text-inverse-subtle: var(--traton-color-transparent-500);
577
- --color-foreground-text-inverse-defined: var(--traton-color-transparent-700);
578
- --color-foreground-text-inverse-disabled: var(--traton-color-transparent-400);
579
- --color-foreground-text-inverse-brand: var(--traton-color-transparent-950);
580
- --color-foreground-text-brand: var(--traton-color-base-neutral-white);
581
- --color-foreground-text-disabled: var(--traton-color-transparent-inverse-400);
582
- --color-foreground-text-soft: var(--traton-color-transparent-inverse-600);
583
- --color-foreground-border-inverse-strong: var(--traton-color-transparent-950);
584
- --color-foreground-border-inverse-soft: var(--traton-color-transparent-600);
585
- --color-foreground-border-inverse-subtle: var(--traton-color-transparent-500);
586
- --color-foreground-border-inverse-discrete: var(--traton-color-transparent-200);
587
- --color-foreground-border-inverse-defined: var(--traton-color-transparent-700);
588
- --color-foreground-border-inverse-disabled: var(--traton-color-transparent-400);
589
- --color-foreground-border-strong: var(--traton-color-transparent-inverse-950);
590
- --color-foreground-border-soft: var(--traton-color-transparent-inverse-600);
591
- --color-foreground-border-subtle: var(--traton-color-transparent-inverse-500);
592
- --color-foreground-border-discrete: var(--traton-color-transparent-inverse-200);
593
- --color-foreground-border-accent-link: var(--traton-color-yellow-300);
594
- --color-foreground-border-accent-focus: var(--traton-color-yellow-400);
595
- --color-foreground-border-defined: var(--traton-color-transparent-inverse-700);
596
- --color-foreground-border-disabled: var(--traton-color-transparent-inverse-400);
597
- --color-foreground-icon-strong: var(--traton-color-transparent-inverse-950);
598
- --color-foreground-icon-defined: var(--traton-color-transparent-inverse-700);
599
- --color-foreground-icon-soft: var(--traton-color-transparent-inverse-600);
600
- --color-foreground-icon-subtle: var(--traton-color-transparent-inverse-500);
601
- --color-foreground-icon-disabled: var(--traton-color-transparent-inverse-400);
602
- --color-foreground-icon-discrete: var(--traton-color-transparent-inverse-200);
603
- --color-foreground-icon-inverse-strong: var(--traton-color-transparent-950);
604
- --color-foreground-icon-inverse-defined: var(--traton-color-transparent-700);
605
- --color-foreground-icon-inverse-soft: var(--traton-color-transparent-600);
606
- --color-foreground-icon-inverse-subtle: var(--traton-color-transparent-500);
607
- --color-foreground-icon-inverse-disabled: var(--traton-color-transparent-400);
608
- --color-foreground-icon-inverse-discrete: var(--traton-color-transparent-200);
609
- --color-foreground-icon-accent-default: var(--traton-color-blue-400);
610
- --color-foreground-icon-accent-visited: var(--traton-color-blue-150);
611
- --color-foreground-icon-accent-brand: var(--traton-color-blue-50);
612
- --color-foreground-icon-accent-brand-inverse: var(--traton-color-blue-500);
613
- --color-brand-neutral-white: var(--traton-color-base-neutral-white);
614
- --color-brand-neutral-black: var(--traton-color-base-neutral-black);
615
- --color-brand-primary-50: var(--traton-color-blue-50);
616
- --color-brand-primary-100: var(--traton-color-blue-100);
617
- --color-brand-primary-200: var(--traton-color-blue-200);
618
- --color-brand-primary-300: var(--traton-color-blue-300);
619
- --color-brand-primary-400: var(--traton-color-blue-400);
620
- --color-brand-primary-500: var(--traton-color-blue-500);
621
- --color-brand-primary-600: var(--traton-color-blue-600);
622
- --color-brand-primary-700: var(--traton-color-blue-700);
623
- --color-brand-primary-800: var(--traton-color-blue-800);
624
- --color-brand-primary-900: var(--traton-color-blue-900);
625
- --color-brand-secondary-50: var(--traton-color-yellow-50);
626
- --color-brand-secondary-100: var(--traton-color-yellow-100);
627
- --color-brand-secondary-200: var(--traton-color-yellow-200);
628
- --color-brand-secondary-300: var(--traton-color-yellow-300);
629
- --color-brand-secondary-400: var(--traton-color-yellow-400);
630
- --color-brand-secondary-500: var(--traton-color-yellow-500);
631
- --color-brand-secondary-600: var(--traton-color-yellow-600);
632
- --color-brand-secondary-700: var(--traton-color-yellow-700);
633
- --color-brand-secondary-800: var(--traton-color-yellow-800);
634
- --color-brand-secondary-900: var(--traton-color-yellow-900);
635
- }
636
-
637
- /* Traton dimension tokens */
638
- /**
639
- * Do not edit directly, this file was auto-generated.
640
- */
641
- .traton {
642
- --dimension-space-tiny: var(--traton-unit-4);
643
- --dimension-space-small: var(--traton-unit-16);
644
- --dimension-space-medium: var(--traton-unit-24);
645
- --dimension-space-large: var(--traton-unit-48);
646
- --dimension-space-huge: var(--traton-unit-80);
647
- --dimension-radius-for-surface-clickable: var(--traton-unit-9999);
648
- --dimension-radius-for-surface-field: var(--traton-unit-2);
649
- --dimension-radius-for-surface-inverse: var(--traton-unit-2);
650
- --dimension-radius-narrow: var(--traton-unit-4);
651
- --dimension-radius-soft: var(--traton-unit-8);
652
- --dimension-radius-rounded: var(--traton-unit-32);
653
- --dimension-radius-circle: var(--traton-unit-9999);
654
- --dimension-radius-for-area-large: var(--traton-unit-8);
655
- --dimension-radius-for-area-small: var(--traton-unit-4);
656
- --dimension-radius-focus-width: var(--traton-unit-4);
657
- }
658
-
659
- /* Traton typography tokens */
660
- /**
661
- * Do not edit directly, this file was auto-generated.
662
- */
663
- .traton {
664
- --text-display-01-text-transform: uppercase;
665
- --text-display-01-letter-spacing: 1.08px;
666
- --text-display-01-font-size: 216px;
667
- --text-display-01-line-height: 227px;
668
- --text-display-02-text-transform: uppercase;
669
- --text-display-02-font-size: 156px;
670
- --text-display-02-line-height: 164px;
671
- --text-display-02-letter-spacing: 0.78px;
672
- --text-display-03-text-transform: uppercase;
673
- --text-display-03-font-size: 112px;
674
- --text-display-03-line-height: 118px;
675
- --text-display-03-letter-spacing: 0.56px;
676
- --text-display-04-text-transform: uppercase;
677
- --text-display-04-font-size: 80px;
678
- --text-display-04-line-height: 84px;
679
- --text-display-04-letter-spacing: 0.4px;
680
- --text-display-05-text-transform: uppercase;
681
- --text-display-05-font-size: 56px;
682
- --text-display-05-line-height: 59px;
683
- --text-display-05-letter-spacing: 0.28px;
684
- --text-headline-01-text-transform: none;
685
- --text-headline-01-font-size: 40px;
686
- --text-headline-01-line-height: 42px;
687
- --text-headline-01-letter-spacing: 0;
688
- --text-headline-02-text-transform: none;
689
- --text-headline-02-font-size: 32px;
690
- --text-headline-02-line-height: 40px;
691
- --text-headline-02-letter-spacing: 0;
692
- --text-headline-03-text-transform: none;
693
- --text-headline-03-font-size: 24px;
694
- --text-headline-03-line-height: 30px;
695
- --text-headline-03-letter-spacing: 0;
696
- --text-headline-04-text-transform: none;
697
- --text-headline-04-font-size: 20px;
698
- --text-headline-04-line-height: 25px;
699
- --text-headline-04-letter-spacing: 0;
700
- --text-headline-05-text-transform: none;
701
- --text-headline-05-font-size: 16px;
702
- --text-headline-05-line-height: 22px;
703
- --text-headline-05-letter-spacing: 0;
704
- --text-headline-06-text-transform: none;
705
- --text-headline-06-font-size: 14px;
706
- --text-headline-06-line-height: 20px;
707
- --text-headline-06-letter-spacing: 0;
708
- --text-paragraph-01-text-transform: none;
709
- --text-paragraph-01-font-size: 24px;
710
- --text-paragraph-01-line-height: 30px;
711
- --text-paragraph-01-letter-spacing: 0;
712
- --text-paragraph-02-text-transform: none;
713
- --text-paragraph-02-font-size: 20px;
714
- --text-paragraph-02-line-height: 25px;
715
- --text-paragraph-02-letter-spacing: 0;
716
- --text-body-01-text-transform: none;
717
- --text-body-01-font-size: 16px;
718
- --text-body-01-line-height: 22px;
719
- --text-body-01-letter-spacing: 0;
720
- --text-body-02-text-transform: none;
721
- --text-body-02-font-size: 14px;
722
- --text-body-02-line-height: 20px;
723
- --text-body-02-letter-spacing: 0;
724
- --text-component-text-01-text-transform: none;
725
- --text-component-text-01-font-size: 14px;
726
- --text-component-text-01-line-height: 16px;
727
- --text-component-text-01-letter-spacing: 0;
728
- --text-component-text-02-text-transform: none;
729
- --text-component-text-02-font-size: 14px;
730
- --text-component-text-02-line-height: 20px;
731
- --text-component-text-02-letter-spacing: 0;
732
- --text-component-label-01-text-transform: none;
733
- --text-component-label-01-font-size: 12px;
734
- --text-component-label-01-line-height: 17px;
735
- --text-component-label-01-letter-spacing: 0;
736
- --text-component-label-02-transform: none;
737
- --text-component-label-02-font-size: 10px;
738
- --text-component-label-02-line-height: 14px;
739
- --text-component-label-02-letter-spacing: 0;
740
- --text-component-title-01-text-transform: none;
741
- --text-component-title-01-text-transform-2: none;
742
- --text-component-title-01-font-size: 14px;
743
- --text-component-title-01-line-height: 18px;
744
- --text-component-title-01-letter-spacing: 0;
745
- --text-component-title-01-letter-spacing-2: 0;
746
- --text-component-title-01-font-size-2: 14px;
747
- --text-component-title-01-line-height-2: 18px;
748
- --text-component-title-02-text-transform: none;
749
- --text-component-title-02-font-size: 10px;
750
- --text-component-title-02-line-height: 14px;
751
- --text-component-title-02-letter-spacing: 0.4px;
752
- --text-link-01-text-transform: none;
753
- --text-link-01-font-size: 16px;
754
- --text-link-01-line-height: 22px;
755
- --text-link-01-letter-spacing: 0;
756
- --text-link-02-text-transform: none;
757
- --text-link-02-font-size: 14px;
758
- --text-link-02-line-height: 20px;
759
- --text-link-02-letter-spacing: 0;
760
- --text-display-01-font-family: var(--traton-font-family-display);
761
- --text-display-01-font-weight: var(--traton-font-weight-medium);
762
- --text-display-02-font-family: var(--traton-font-family-display);
763
- --text-display-02-font-weight: var(--traton-font-weight-medium);
764
- --text-display-03-font-family: var(--traton-font-family-display);
765
- --text-display-03-font-weight: var(--traton-font-weight-medium);
766
- --text-display-04-font-family: var(--traton-font-family-display);
767
- --text-display-04-font-weight: var(--traton-font-weight-medium);
768
- --text-display-05-font-family: var(--traton-font-family-display);
769
- --text-display-05-font-weight: var(--traton-font-weight-medium);
770
- --text-headline-01-font-family: var(--traton-font-family-display);
771
- --text-headline-01-font-weight: var(--traton-font-weight-medium);
772
- --text-headline-02-font-family: var(--traton-font-family-display);
773
- --text-headline-02-font-weight: var(--traton-font-weight-medium);
774
- --text-headline-03-font-family: var(--traton-font-family-display);
775
- --text-headline-03-font-weight: var(--traton-font-weight-medium);
776
- --text-headline-04-font-family: var(--traton-font-family-display);
777
- --text-headline-04-font-weight: var(--traton-font-weight-medium);
778
- --text-headline-05-font-family: var(--traton-font-family-default);
779
- --text-headline-05-font-weight: var(--traton-font-weight-semi-bold);
780
- --text-headline-06-font-family: var(--traton-font-family-default);
781
- --text-headline-06-font-weight: var(--traton-font-weight-semi-bold);
782
- --text-paragraph-01-font-family: var(--traton-font-family-display);
783
- --text-paragraph-01-font-weight: var(--traton-font-weight-medium);
784
- --text-paragraph-02-font-family: var(--traton-font-family-display);
785
- --text-paragraph-02-font-weight: var(--traton-font-weight-medium);
786
- --text-body-01-font-family: var(--traton-font-family-default);
787
- --text-body-01-font-weight: var(--traton-font-weight-regular);
788
- --text-body-02-font-family: var(--traton-font-family-default);
789
- --text-body-02-font-weight: var(--traton-font-weight-regular);
790
- --text-component-text-01-font-family: var(--traton-font-family-default);
791
- --text-component-text-01-font-weight: var(--traton-font-weight-regular);
792
- --text-component-text-02-font-family: var(--traton-font-family-default);
793
- --text-component-text-02-font-weight: var(--traton-font-weight-regular);
794
- --text-component-label-01-font-family: var(--traton-font-family-default);
795
- --text-component-label-01-font-weight: var(--traton-font-weight-medium);
796
- --text-component-label-02-font-family: var(--traton-font-family-default);
797
- --text-component-label-02-font-weight: var(--traton-font-weight-medium);
798
- --text-component-title-01-font-family: var(--traton-font-family-default);
799
- --text-component-title-01-font-family-2: var(--traton-font-family-default);
800
- --text-component-title-01-font-weight: var(--traton-font-weight-semi-bold);
801
- --text-component-title-01-font-weight-2: var(--traton-font-weight-semi-bold);
802
- --text-component-title-02-font-family: var(--traton-font-family-default);
803
- --text-component-title-02-font-weight: var(--traton-font-weight-semi-bold);
804
- --text-link-01-font-family: var(--traton-font-family-default);
805
- --text-link-01-font-weight: var(--traton-font-weight-regular);
806
- --text-link-02-font-family: var(--traton-font-family-default);
807
- --text-link-02-font-weight: var(--traton-font-weight-regular);
808
- }
809
-
810
- /* Traton specific imports */
811
- .traton {
812
- /* Font size tokens */
813
- --super-type-01-font-size: 216px;
814
- --super-type-02-font-size: 156px;
815
- --super-type-03-font-size: 112px;
816
- --expressive-headline-01-font-size: 80px;
817
- --expressive-headline-02-font-size: 56px;
818
- --headline-01-font-size: 40px;
819
- --headline-02-font-size: 32px;
820
- --headline-03-font-size: 24px;
821
- --headline-04-font-size: 20px;
822
- --headline-05-font-size: 16px;
823
- --headline-06-font-size: 14px;
824
- --headline-07-font-size: 14px;
825
- --paragraph-01-font-size: 24px;
826
- --paragraph-02-font-size: 20px;
827
- --body-01-font-size: 16px;
828
- --body-02-font-size: 14px;
829
- --body-link-01-font-size: 16px;
830
- --body-link-02-font-size: 14px;
831
- --detail-01-font-size: 16px;
832
- --detail-02-font-size: 14px;
833
- --detail-03-font-size: 14px;
834
- --detail-04-font-size: 12px;
835
- --detail-05-font-size: 12px;
836
- --detail-06-font-size: 10px;
837
- --detail-07-font-size: 10px;
838
- /* Typography Line Height Tokens */
839
- --super-type-01-line-height: 227px;
840
- --super-type-02-line-height: 164px;
841
- --super-type-03-line-height: 106px;
842
- --expressive-headline-01-line-height: 84px;
843
- --expressive-headline-02-line-height: 59px;
844
- --headline-01-line-height: 42px;
845
- --headline-02-line-height: 40px;
846
- --headline-03-line-height: 30px;
847
- --headline-04-line-height: 25px;
848
- --headline-05-line-height: 22px;
849
- --headline-06-line-height: 20px;
850
- --headline-07-line-height: 18px;
851
- --paragraph-01-line-height: 30px;
852
- --paragraph-02-line-height: 25px;
853
- --body-01-line-height: 22px;
854
- --body-02-line-height: 20px;
855
- --body-link-01-line-height: 22px;
856
- --body-link-02-line-height: 20px;
857
- --detail-01-line-height: 22px;
858
- --detail-02-line-height: 16px;
859
- --detail-03-line-height: 20px;
860
- --detail-04-line-height: 17px;
861
- --detail-05-line-height: 17px;
862
- --detail-06-line-height: 14px;
863
- --detail-07-line-height: 14px;
864
- /* Typography Font Family Tokens */
865
- --super-type-01-font-family: "TRATON Type Display", verdana;
866
- --super-type-02-font-family: "TRATON Type Display", verdana;
867
- --super-type-03-font-family: "TRATON Type Display", verdana;
868
- --expressive-headline-01-font-family: "TRATON Type Display", verdana;
869
- --expressive-headline-02-font-family: "TRATON Type Display", verdana;
870
- --headline-01-font-family: "TRATON Type Display", verdana;
871
- --headline-02-font-family: "TRATON Type Display", verdana;
872
- --headline-03-font-family: "TRATON Type Display", verdana;
873
- --headline-04-font-family: "TRATON Type Display", verdana;
874
- --headline-05-font-family: "TRATON Type Text", verdana;
875
- --headline-06-font-family: "TRATON Type Text", verdana;
876
- --headline-07-font-family: "TRATON Type Text", verdana;
877
- --paragraph-01-font-family: "TRATON Type Display", verdana;
878
- --paragraph-02-font-family: "TRATON Type Display", verdana;
879
- --body-01-font-family: "TRATON Type Text", verdana;
880
- --body-02-font-family: "TRATON Type Text", verdana;
881
- --body-link-01-font-family: "TRATON Type Text", verdana;
882
- --body-link-02-font-family: "TRATON Type Text", verdana;
883
- --detail-01-font-family: "TRATON Type Text", verdana;
884
- --detail-02-font-family: "TRATON Type Text", verdana;
885
- --detail-03-font-family: "TRATON Type Text", verdana;
886
- --detail-04-font-family: "TRATON Type Text", verdana;
887
- --detail-05-font-family: "TRATON Type Text", verdana;
888
- --detail-06-font-family: "TRATON Type Text", verdana;
889
- --detail-07-font-family: "TRATON Type Text", verdana;
890
- /* Typography Font Weight Tokens */
891
- --super-type-01-font-weight: normal;
892
- --super-type-02-font-weight: normal;
893
- --super-type-03-font-weight: normal;
894
- --expressive-headline-01-font-weight: normal;
895
- --expressive-headline-02-font-weight: normal;
896
- --headline-01-font-weight: normal;
897
- --headline-02-font-weight: normal;
898
- --headline-03-font-weight: normal;
899
- --headline-04-font-weight: normal;
900
- --headline-05-font-weight: 600;
901
- --headline-06-font-weight: 600;
902
- --headline-07-font-weight: 600;
903
- --paragraph-01-font-weight: normal;
904
- --paragraph-02-font-weight: normal;
905
- --body-01-font-weight: normal;
906
- --body-02-font-weight: normal;
907
- --body-link-01-font-weight: normal;
908
- --body-link-02-font-weight: normal;
909
- --detail-01-font-weight: normal;
910
- --detail-02-font-weight: normal;
911
- --detail-03-font-weight: normal;
912
- --detail-04-font-weight: 600;
913
- --detail-05-font-weight: normal;
914
- --detail-06-font-weight: 600;
915
- --detail-07-font-weight: normal;
916
- /* Typography Letter-Spacing (Kerning) Tokens */
917
- --super-type-01-letter-spacing: 1.08px;
918
- --super-type-02-letter-spacing: 0.78px;
919
- --super-type-03-letter-spacing: 0.56px;
920
- --expressive-headline-01-letter-spacing: 0.4px;
921
- --expressive-headline-02-letter-spacing: 0.28px;
922
- --headline-01-letter-spacing: 0;
923
- --headline-02-letter-spacing: 0;
924
- --headline-03-letter-spacing: 0;
925
- --headline-04-letter-spacing: 0;
926
- --headline-05-letter-spacing: 0;
927
- --headline-06-letter-spacing: 0;
928
- --headline-07-letter-spacing: 0;
929
- --paragraph-01-letter-spacing: 0;
930
- --paragraph-02-letter-spacing: 0;
931
- --body-01-letter-spacing: 0;
932
- --body-02-letter-spacing: 0;
933
- --body-link-01-letter-spacing: 0;
934
- --body-link-02-letter-spacing: 0;
935
- --detail-01-letter-spacing: 0;
936
- --detail-02-letter-spacing: 0;
937
- --detail-03-letter-spacing: 0;
938
- --detail-04-letter-spacing: 0.48px;
939
- --detail-05-letter-spacing: 0;
940
- --detail-06-letter-spacing: 0.4px;
941
- --detail-07-letter-spacing: 0;
942
- /* Text transform tokens */
943
- --super-type-01-text-transform: uppercase;
944
- --super-type-02-text-transform: uppercase;
945
- --super-type-03-text-transform: uppercase;
946
- --expressive-headline-01-text-transform: uppercase;
947
- --expressive-headline-02-text-transform: uppercase;
948
- --headline-01-text-transform: none;
949
- --headline-02-text-transform: none;
950
- --headline-03-text-transform: none;
951
- --headline-04-text-transform: none;
952
- --headline-05-text-transform: none;
953
- --headline-06-text-transform: none;
954
- --headline-07-text-transform: none;
955
- --paragraph-01-text-transform: none;
956
- --paragraph-02-text-transform: none;
957
- --body-01-text-transform: none;
958
- --body-02-text-transform: none;
959
- --body-link-01-text-transform: none;
960
- --body-link-02-text-transform: none;
961
- --detail-01-text-transform: none;
962
- --detail-02-text-transform: none;
963
- --detail-03-text-transform: none;
964
- --detail-04-text-transform: uppercase;
965
- --detail-05-text-transform: none;
966
- --detail-06-text-transform: uppercase;
967
- --detail-07-text-transform: none;
968
- }
969
-
970
- :root,
971
- .traton {
972
- /* Radius tokens */
973
- --radius-narrow: var(--unit-4);
974
- --radius-soft: var(--unit-8);
975
- --radius-rounded: var(--unit-32);
976
- --radius-circle: 500px;
977
- /* Radius for-surface tokens */
978
- --radius-surface-clickable: var(--radius-full);
979
- --radius-surface-field: var(--unit-2);
980
- /* Radius for-area tokens */
981
- --radius-area-large: var(--unit-8);
982
- --radius-area-small: var(--unit-4);
983
- /* Space tokens */
984
- --space-tiny: var(--unit-4);
985
- --space-small: var(--unit-16);
986
- --space-medium: var(--unit-24);
987
- --space-large: var(--unit-48);
988
- --space-huge: var(--unit-80);
989
- }
990
-
991
- /* === TRATON Type Display === */
992
- @font-face {
993
- font-family: "TRATON Type Display";
994
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-medium.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-medium.woff") format("woff");
995
- font-weight: 500;
996
- font-style: normal;
997
- font-display: swap;
998
- }
999
- @font-face {
1000
- font-family: "TRATON Type Display";
1001
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-bold.woff") format("woff");
1002
- font-weight: 700;
1003
- font-style: normal;
1004
- font-display: swap;
1005
- }
1006
- /* === TRATON Type Text === */
1007
- @font-face {
1008
- font-family: "TRATON Type Text";
1009
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-regular.woff") format("woff");
1010
- font-weight: 400;
1011
- font-style: normal;
1012
- font-display: swap;
1013
- }
1014
- @font-face {
1015
- font-family: "TRATON Type Text";
1016
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-italic.woff") format("woff");
1017
- font-weight: 400;
1018
- font-style: italic;
1019
- font-display: swap;
1020
- }
1021
- @font-face {
1022
- font-family: "TRATON Type Text";
1023
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium.woff") format("woff");
1024
- font-weight: 500;
1025
- font-style: normal;
1026
- font-display: swap;
1027
- }
1028
- @font-face {
1029
- font-family: "TRATON Type Text";
1030
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium-italic.woff") format("woff");
1031
- font-weight: 500;
1032
- font-style: italic;
1033
- font-display: swap;
1034
- }
1035
- @font-face {
1036
- font-family: "TRATON Type Text";
1037
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold.woff") format("woff");
1038
- font-weight: 600;
1039
- font-style: normal;
1040
- font-display: swap;
1041
- }
1042
- @font-face {
1043
- font-family: "TRATON Type Text";
1044
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold-italic.woff") format("woff");
1045
- font-weight: 600;
1046
- font-style: italic;
1047
- font-display: swap;
1048
- }
1049
- @font-face {
1050
- font-family: "TRATON Type Text";
1051
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold.woff") format("woff");
1052
- font-weight: 700;
1053
- font-style: normal;
1054
- font-display: swap;
1055
- }
1056
- @font-face {
1057
- font-family: "TRATON Type Text";
1058
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold-italic.woff") format("woff");
1059
- font-weight: 700;
1060
- font-style: italic;
1061
- font-display: swap;
1062
- }
1063
- /* Traton primitive icon tokens */
1064
- /* Traton icon tokens */