@sbb-esta/lyne-elements 3.7.0 → 3.9.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 (414) hide show
  1. package/alert/alert/alert.component.d.ts +2 -0
  2. package/alert/alert/alert.component.d.ts.map +1 -1
  3. package/alert/alert/alert.component.js +44 -39
  4. package/autocomplete/autocomplete-base-element.js +20 -20
  5. package/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.js +14 -14
  6. package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js +1 -1
  7. package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js +9 -9
  8. package/badge.css +2 -2
  9. package/breadcrumb/breadcrumb/breadcrumb.component.js +12 -12
  10. package/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +15 -15
  11. package/button/common.js +1 -1
  12. package/button/mini-button/mini-button.component.js +7 -7
  13. package/button/mini-button-group/mini-button-group.component.js +21 -21
  14. package/button.js +1 -1
  15. package/calendar/calendar.component.js +36 -36
  16. package/card/card/card.component.js +10 -10
  17. package/card/card-badge/card-badge.component.js +15 -15
  18. package/carousel/carousel/carousel.component.d.ts +1 -0
  19. package/carousel/carousel/carousel.component.d.ts.map +1 -1
  20. package/carousel/carousel/carousel.component.js +37 -33
  21. package/carousel/carousel-list/carousel-list.component.d.ts +2 -2
  22. package/carousel/carousel-list/carousel-list.component.d.ts.map +1 -1
  23. package/carousel/carousel-list/carousel-list.component.js +32 -29
  24. package/checkbox/common.js +1 -1
  25. package/checkbox-common-gjHkSAmN.js +5 -0
  26. package/checkbox.js +1 -1
  27. package/chip/chip/chip.component.js +23 -23
  28. package/chip-label/chip-label.component.js +22 -22
  29. package/clock/clock.component.js +29 -29
  30. package/container/container/container.component.js +21 -21
  31. package/container/sticky-bar/sticky-bar.component.js +13 -13
  32. package/core/base-elements/open-close-base-element.d.ts +2 -0
  33. package/core/base-elements/open-close-base-element.d.ts.map +1 -1
  34. package/core/base-elements/open-close-base-element.js +4 -0
  35. package/core/config/config.d.ts +6 -0
  36. package/core/config/config.d.ts.map +1 -1
  37. package/core/controllers/escapable-overlay-controller.js +3 -3
  38. package/core/controllers/inert-controller.d.ts +8 -1
  39. package/core/controllers/inert-controller.d.ts.map +1 -1
  40. package/core/controllers/inert-controller.js +25 -13
  41. package/core/controllers/media-matchers-controller.d.ts +29 -0
  42. package/core/controllers/media-matchers-controller.d.ts.map +1 -1
  43. package/core/controllers/media-matchers-controller.js +73 -23
  44. package/core/controllers.js +16 -14
  45. package/core/dom/contains-pierce-shadow-dom.d.ts +3 -0
  46. package/core/dom/contains-pierce-shadow-dom.d.ts.map +1 -0
  47. package/core/dom/contains-pierce-shadow-dom.js +12 -0
  48. package/core/dom/queue-dom-content-loaded.d.ts +5 -0
  49. package/core/dom/queue-dom-content-loaded.d.ts.map +1 -0
  50. package/core/dom/queue-dom-content-loaded.js +7 -0
  51. package/core/dom/set-or-remove-attribute.d.ts +14 -0
  52. package/core/dom/set-or-remove-attribute.d.ts.map +1 -1
  53. package/core/dom/set-or-remove-attribute.js +11 -3
  54. package/core/dom.d.ts +2 -0
  55. package/core/dom.d.ts.map +1 -1
  56. package/core/dom.js +28 -22
  57. package/core/images.d.ts +4 -0
  58. package/core/images.d.ts.map +1 -1
  59. package/core/images.js +12 -12
  60. package/core/mixins.js +10 -10
  61. package/core/overlay/overlay-outside-pointer-event-listener.d.ts +26 -0
  62. package/core/overlay/overlay-outside-pointer-event-listener.d.ts.map +1 -0
  63. package/core/overlay/overlay-outside-pointer-event-listener.js +37 -0
  64. package/core/overlay/position.d.ts +20 -0
  65. package/core/overlay/position.d.ts.map +1 -1
  66. package/core/overlay/position.js +34 -23
  67. package/core/overlay.d.ts +1 -0
  68. package/core/overlay.d.ts.map +1 -1
  69. package/core/overlay.js +15 -11
  70. package/core/styles/core.scss +46 -12
  71. package/core/styles/mixins/badge.scss +2 -2
  72. package/core/styles/mixins/buttons.scss +14 -14
  73. package/core/styles/mixins/card.scss +9 -6
  74. package/core/styles/mixins/chip.scss +8 -8
  75. package/core/styles/mixins/image.scss +3 -0
  76. package/core/styles/mixins/link.scss +12 -7
  77. package/core/styles/mixins/lists.scss +6 -4
  78. package/core/styles/mixins/overlay.scss +6 -3
  79. package/core/styles/mixins/panel.scss +3 -3
  80. package/core/styles/mixins/pearl-chain-bullet.scss +9 -5
  81. package/core/styles/mixins/scrollbar.scss +12 -6
  82. package/core/styles/mixins/shadows.scss +32 -64
  83. package/core/styles/mixins/table.scss +13 -10
  84. package/core/styles/mixins/timetable-form.scss +3 -3
  85. package/core/styles/mixins/typo.scss +4 -4
  86. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss +49 -1
  87. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss +203 -5
  88. package/core/styles/off-brand-theme.scss +3 -0
  89. package/core/styles/safety-theme.scss +3 -0
  90. package/core/styles/standard-theme.scss +3 -14
  91. package/core/styles/theme.scss +18 -0
  92. package/core.css +259 -21
  93. package/custom-elements.json +2117 -366
  94. package/date-input/date-input.component.js +1 -1
  95. package/datepicker/datepicker-next-day/datepicker-next-day.component.js +4 -4
  96. package/datepicker/datepicker-previous-day/datepicker-previous-day.component.js +6 -6
  97. package/datepicker/datepicker-toggle/datepicker-toggle.component.js +7 -7
  98. package/development/alert/alert/alert.component.d.ts +2 -0
  99. package/development/alert/alert/alert.component.d.ts.map +1 -1
  100. package/development/alert/alert/alert.component.js +22 -8
  101. package/development/autocomplete/autocomplete-base-element.js +23 -11
  102. package/development/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.js +15 -14
  103. package/development/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js +5 -4
  104. package/development/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js +19 -11
  105. package/development/breadcrumb/breadcrumb/breadcrumb.component.js +4 -1
  106. package/development/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +16 -8
  107. package/development/button/common.js +1 -1
  108. package/development/button/mini-button/mini-button.component.js +15 -14
  109. package/development/button/mini-button-group/mini-button-group.component.js +4 -4
  110. package/development/button.js +1 -1
  111. package/development/calendar/calendar.component.js +21 -11
  112. package/development/card/card/card.component.js +11 -6
  113. package/development/card/card-badge/card-badge.component.js +10 -9
  114. package/development/carousel/carousel/carousel.component.d.ts +1 -0
  115. package/development/carousel/carousel/carousel.component.d.ts.map +1 -1
  116. package/development/carousel/carousel/carousel.component.js +14 -4
  117. package/development/carousel/carousel-list/carousel-list.component.d.ts +2 -2
  118. package/development/carousel/carousel-list/carousel-list.component.d.ts.map +1 -1
  119. package/development/carousel/carousel-list/carousel-list.component.js +29 -21
  120. package/development/checkbox/common.js +1 -1
  121. package/development/{checkbox-common-aMPOsPVA.js → checkbox-common-Dy_ofVhp.js} +4 -3
  122. package/development/checkbox.js +1 -1
  123. package/development/chip/chip/chip.component.js +15 -14
  124. package/development/chip-label/chip-label.component.js +12 -15
  125. package/development/clock/clock.component.js +11 -3
  126. package/development/container/container/container.component.js +6 -6
  127. package/development/container/sticky-bar/sticky-bar.component.js +6 -6
  128. package/development/core/base-elements/open-close-base-element.d.ts +2 -0
  129. package/development/core/base-elements/open-close-base-element.d.ts.map +1 -1
  130. package/development/core/base-elements/open-close-base-element.js +5 -1
  131. package/development/core/config/config.d.ts +6 -0
  132. package/development/core/config/config.d.ts.map +1 -1
  133. package/development/core/config/config.js +1 -1
  134. package/development/core/controllers/escapable-overlay-controller.js +2 -2
  135. package/development/core/controllers/inert-controller.d.ts +8 -1
  136. package/development/core/controllers/inert-controller.d.ts.map +1 -1
  137. package/development/core/controllers/inert-controller.js +49 -30
  138. package/development/core/controllers/media-matchers-controller.d.ts +29 -0
  139. package/development/core/controllers/media-matchers-controller.d.ts.map +1 -1
  140. package/development/core/controllers/media-matchers-controller.js +74 -1
  141. package/development/core/controllers.js +3 -1
  142. package/development/core/dom/contains-pierce-shadow-dom.d.ts +3 -0
  143. package/development/core/dom/contains-pierce-shadow-dom.d.ts.map +1 -0
  144. package/development/core/dom/contains-pierce-shadow-dom.js +14 -0
  145. package/development/core/dom/queue-dom-content-loaded.d.ts +5 -0
  146. package/development/core/dom/queue-dom-content-loaded.d.ts.map +1 -0
  147. package/development/core/dom/queue-dom-content-loaded.js +12 -0
  148. package/development/core/dom/set-or-remove-attribute.d.ts +14 -0
  149. package/development/core/dom/set-or-remove-attribute.d.ts.map +1 -1
  150. package/development/core/dom/set-or-remove-attribute.js +9 -1
  151. package/development/core/dom.d.ts +2 -0
  152. package/development/core/dom.d.ts.map +1 -1
  153. package/development/core/dom.js +8 -2
  154. package/development/core/images.d.ts +4 -0
  155. package/development/core/images.d.ts.map +1 -1
  156. package/development/core/images.js +11 -11
  157. package/development/core/mixins.js +7 -6
  158. package/development/core/overlay/overlay-outside-pointer-event-listener.d.ts +26 -0
  159. package/development/core/overlay/overlay-outside-pointer-event-listener.d.ts.map +1 -0
  160. package/development/core/overlay/overlay-outside-pointer-event-listener.js +61 -0
  161. package/development/core/overlay/position.d.ts +20 -0
  162. package/development/core/overlay/position.d.ts.map +1 -1
  163. package/development/core/overlay/position.js +41 -1
  164. package/development/core/overlay.d.ts +1 -0
  165. package/development/core/overlay.d.ts.map +1 -1
  166. package/development/core/overlay.js +6 -2
  167. package/development/date-input/date-input.component.js +2 -2
  168. package/development/datepicker/datepicker-next-day/datepicker-next-day.component.js +15 -14
  169. package/development/datepicker/datepicker-previous-day/datepicker-previous-day.component.js +15 -14
  170. package/development/datepicker/datepicker-toggle/datepicker-toggle.component.js +15 -14
  171. package/development/dialog/dialog/dialog.component.d.ts +1 -0
  172. package/development/dialog/dialog/dialog.component.d.ts.map +1 -1
  173. package/development/dialog/dialog/dialog.component.js +28 -14
  174. package/development/dialog/dialog-actions/dialog-actions.component.js +1 -1
  175. package/development/dialog/dialog-title/dialog-title.component.js +1 -1
  176. package/development/divider/divider.component.js +2 -2
  177. package/development/expansion-panel/expansion-panel/expansion-panel.component.js +6 -6
  178. package/development/expansion-panel/expansion-panel-header/expansion-panel-header.component.js +6 -2
  179. package/development/file-selector/common.js +1 -1
  180. package/development/{file-selector-common-CRnQigIZ.js → file-selector-common-CRNAWFM_.js} +8 -5
  181. package/development/file-selector.js +1 -1
  182. package/development/flip-card/flip-card/flip-card.component.js +8 -3
  183. package/development/footer/footer.component.js +5 -4
  184. package/development/form-error/form-error.component.js +2 -2
  185. package/development/form-field/form-field/form-field.component.js +36 -22
  186. package/development/form-field/form-field-clear/form-field-clear.component.js +15 -14
  187. package/development/header/common/header-action-common.js +4 -4
  188. package/development/header/header/header.component.js +2 -2
  189. package/development/header/header-environment/header-environment.component.js +1 -1
  190. package/development/{icon-sidebar-button-common-CA_8TnFu.js → icon-sidebar-button-common-BGrKtvyM.js} +3 -2
  191. package/development/journey-header/journey-header.component.js +1 -1
  192. package/development/lead-container/lead-container.component.js +4 -2
  193. package/development/link/common/block-link-common.js +17 -5
  194. package/development/link/common/inline-link-common.js +9 -3
  195. package/development/link-list/link-list-anchor/link-list-anchor.component.js +11 -9
  196. package/development/loading-indicator/loading-indicator.component.js +1 -1
  197. package/development/loading-indicator-circle/loading-indicator-circle.component.js +2 -2
  198. package/development/logo/logo.component.js +3 -2
  199. package/development/map-container/map-container.component.js +14 -6
  200. package/development/menu/common/menu-action-common.d.ts.map +1 -1
  201. package/development/menu/common/menu-action-common.js +23 -5
  202. package/development/menu/menu/menu.component.d.ts +23 -10
  203. package/development/menu/menu/menu.component.d.ts.map +1 -1
  204. package/development/menu/menu/menu.component.js +237 -72
  205. package/development/message/message.component.js +3 -1
  206. package/development/navigation/common/navigation-action-common.js +4 -4
  207. package/development/navigation/navigation/navigation.component.js +21 -19
  208. package/development/navigation/navigation-list/navigation-list.component.js +1 -1
  209. package/development/navigation/navigation-marker/navigation-marker.component.js +1 -1
  210. package/development/navigation/navigation-section/navigation-section.component.js +3 -3
  211. package/development/notification/notification.component.js +38 -18
  212. package/development/option/optgroup/optgroup-base-element.js +3 -2
  213. package/development/option/option/option.component.js +16 -12
  214. package/development/option/option-hint/option-hint.component.js +3 -2
  215. package/development/overlay/overlay.component.d.ts.map +1 -1
  216. package/development/overlay/overlay.component.js +28 -22
  217. package/development/paginator/compact-paginator/compact-paginator.component.js +3 -2
  218. package/development/paginator/paginator/paginator.component.js +18 -17
  219. package/development/popover/popover/popover.component.js +8 -6
  220. package/development/popover/popover-trigger/popover-trigger.component.js +20 -17
  221. package/development/radio-button/common.js +1 -1
  222. package/development/radio-button/radio-button/radio-button.component.js +3 -3
  223. package/development/radio-button/radio-button-panel/radio-button-panel.component.js +3 -3
  224. package/development/{radio-button-common-454JtP9b.js → radio-button-common-CgM3kQSW.js} +9 -8
  225. package/development/radio-button.js +1 -1
  226. package/development/sbb-tokens-CVLcOi-S.js +1 -1
  227. package/development/select/select.component.js +31 -13
  228. package/development/selection-action-panel/selection-action-panel.component.js +9 -5
  229. package/development/selection-expansion-panel/selection-expansion-panel.component.js +10 -6
  230. package/development/sidebar/common.js +1 -1
  231. package/development/sidebar/icon-sidebar/icon-sidebar.component.js +2 -2
  232. package/development/sidebar/sidebar/sidebar.component.js +14 -6
  233. package/development/sidebar.js +1 -1
  234. package/development/signet/signet.component.js +2 -2
  235. package/development/skiplink-list/skiplink-list.component.d.ts +3 -1
  236. package/development/skiplink-list/skiplink-list.component.d.ts.map +1 -1
  237. package/development/skiplink-list/skiplink-list.component.js +26 -9
  238. package/development/slider/slider.component.js +15 -9
  239. package/development/status/status.component.js +7 -7
  240. package/development/stepper/step/step.component.js +1 -3
  241. package/development/stepper/step-label/step-label.component.js +7 -6
  242. package/development/stepper/stepper/stepper.component.js +5 -5
  243. package/development/tabs/tab/tab.component.d.ts +10 -4
  244. package/development/tabs/tab/tab.component.d.ts.map +1 -1
  245. package/development/tabs/tab/tab.component.js +15 -16
  246. package/development/tabs/tab-group/tab-group.component.d.ts +15 -14
  247. package/development/tabs/tab-group/tab-group.component.d.ts.map +1 -1
  248. package/development/tabs/tab-group/tab-group.component.js +46 -175
  249. package/development/tabs/tab-label/tab-label.component.d.ts +21 -2
  250. package/development/tabs/tab-label/tab-label.component.d.ts.map +1 -1
  251. package/development/tabs/tab-label/tab-label.component.js +97 -19
  252. package/development/tag/tag/tag.component.js +15 -9
  253. package/development/teaser/teaser.component.js +3 -2
  254. package/development/teaser-hero/teaser-hero.component.js +3 -3
  255. package/development/teaser-product/common.js +1 -1
  256. package/development/{teaser-product-common-D6fa6x3w.js → teaser-product-common-DvlBRkE_.js} +14 -6
  257. package/development/teaser-product.js +1 -1
  258. package/development/time-input/time-input.component.js +2 -2
  259. package/development/timetable-form/timetable-form/timetable-form.component.js +1 -1
  260. package/development/timetable-form/timetable-form-details/timetable-form-details.component.js +1 -1
  261. package/development/timetable-form/timetable-form-field/timetable-form-field.component.js +3 -3
  262. package/development/timetable-occupancy/timetable-occupancy.component.js +2 -2
  263. package/development/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts +1 -0
  264. package/development/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts.map +1 -1
  265. package/development/timetable-occupancy-icon/timetable-occupancy-icon.component.js +4 -3
  266. package/development/title/title-base.js +2 -5
  267. package/development/title/title.component.js +1 -1
  268. package/development/toast/toast.component.d.ts +3 -1
  269. package/development/toast/toast.component.d.ts.map +1 -1
  270. package/development/toast/toast.component.js +31 -15
  271. package/development/toggle/toggle/toggle.component.js +8 -4
  272. package/development/toggle/toggle-option/toggle-option.component.js +5 -3
  273. package/development/toggle-check/toggle-check.component.js +13 -14
  274. package/development/tooltip/tooltip.component.d.ts +89 -0
  275. package/development/tooltip/tooltip.component.d.ts.map +1 -0
  276. package/development/tooltip/tooltip.component.js +473 -0
  277. package/development/tooltip.d.ts +5 -0
  278. package/development/tooltip.d.ts.map +1 -0
  279. package/development/tooltip.js +5 -0
  280. package/development/train/train-blocked-passage/train-blocked-passage.component.js +1 -1
  281. package/development/train/train-formation/train-formation.component.js +16 -4
  282. package/development/train/train-wagon/train-wagon.component.js +3 -12
  283. package/development/{transparent-button-COe-YB_U.js → transparent-button-DdSaBp_-.js} +141 -86
  284. package/development/visual-checkbox/visual-checkbox.component.js +12 -12
  285. package/dialog/dialog/dialog.component.d.ts +1 -0
  286. package/dialog/dialog/dialog.component.d.ts.map +1 -1
  287. package/dialog/dialog/dialog.component.js +37 -36
  288. package/dialog/dialog-actions/dialog-actions.component.js +6 -6
  289. package/dialog/dialog-title/dialog-title.component.js +4 -4
  290. package/divider/divider.component.js +16 -16
  291. package/expansion-panel/expansion-panel/expansion-panel.component.js +1 -1
  292. package/expansion-panel/expansion-panel-header/expansion-panel-header.component.js +3 -3
  293. package/file-selector/common.js +1 -1
  294. package/file-selector-common-D88J9PEh.js +5 -0
  295. package/file-selector.js +1 -1
  296. package/flip-card/flip-card/flip-card.component.js +14 -14
  297. package/footer/footer.component.js +18 -18
  298. package/form-error/form-error.component.js +4 -4
  299. package/form-field/form-field/form-field.component.js +1 -1
  300. package/form-field/form-field-clear/form-field-clear.component.js +9 -9
  301. package/header/common/header-action-common.js +1 -1
  302. package/header/header/header.component.js +19 -19
  303. package/header/header-environment/header-environment.component.js +1 -1
  304. package/icon-sidebar-button-common-BeRXvifI.js +7 -0
  305. package/index.d.ts +2 -0
  306. package/index.js +2 -0
  307. package/journey-header/journey-header.component.js +1 -1
  308. package/lead-container/lead-container.component.js +5 -5
  309. package/link/common/block-link-common.js +23 -23
  310. package/link/common/inline-link-common.js +7 -7
  311. package/link-list/link-list-anchor/link-list-anchor.component.js +11 -11
  312. package/lists.css +5 -3
  313. package/loading-indicator/loading-indicator.component.js +1 -1
  314. package/loading-indicator-circle/loading-indicator-circle.component.js +13 -13
  315. package/logo/logo.component.js +9 -9
  316. package/map-container/map-container.component.js +15 -15
  317. package/menu/common/menu-action-common.d.ts.map +1 -1
  318. package/menu/common/menu-action-common.js +15 -12
  319. package/menu/menu/menu.component.d.ts +23 -10
  320. package/menu/menu/menu.component.d.ts.map +1 -1
  321. package/menu/menu/menu.component.js +156 -85
  322. package/message/message.component.js +9 -9
  323. package/navigation/common/navigation-action-common.js +6 -6
  324. package/navigation/navigation/navigation.component.js +19 -19
  325. package/navigation/navigation-list/navigation-list.component.js +1 -1
  326. package/navigation/navigation-marker/navigation-marker.component.js +1 -1
  327. package/navigation/navigation-section/navigation-section.component.js +1 -1
  328. package/notification/notification.component.js +8 -8
  329. package/off-brand-theme.css +3023 -0
  330. package/option/optgroup/optgroup-base-element.js +1 -1
  331. package/option/option/option.component.js +3 -3
  332. package/option/option-hint/option-hint.component.js +8 -8
  333. package/overlay/overlay.component.d.ts.map +1 -1
  334. package/overlay/overlay.component.js +47 -48
  335. package/package.json +14 -1
  336. package/paginator/compact-paginator/compact-paginator.component.js +4 -4
  337. package/paginator/paginator/paginator.component.js +10 -10
  338. package/popover/popover/popover.component.js +9 -9
  339. package/popover/popover-trigger/popover-trigger.component.js +5 -5
  340. package/radio-button/common.js +1 -1
  341. package/radio-button/radio-button/radio-button.component.js +13 -13
  342. package/radio-button/radio-button-panel/radio-button-panel.component.js +2 -2
  343. package/radio-button-common-Nm9ULjVb.js +5 -0
  344. package/radio-button.js +1 -1
  345. package/safety-theme.css +3023 -0
  346. package/scrollbar.css +52 -20
  347. package/select/select.component.js +45 -45
  348. package/selection-action-panel/selection-action-panel.component.js +6 -6
  349. package/selection-expansion-panel/selection-expansion-panel.component.js +11 -11
  350. package/sidebar/common.js +1 -1
  351. package/sidebar/icon-sidebar/icon-sidebar.component.js +12 -12
  352. package/sidebar/sidebar/sidebar.component.js +29 -29
  353. package/sidebar.js +1 -1
  354. package/signet/signet.component.js +1 -1
  355. package/skiplink-list/skiplink-list.component.d.ts +3 -1
  356. package/skiplink-list/skiplink-list.component.d.ts.map +1 -1
  357. package/skiplink-list/skiplink-list.component.js +37 -30
  358. package/slider/slider.component.js +16 -16
  359. package/standard-theme.css +340 -58
  360. package/status/status.component.js +13 -13
  361. package/stepper/step/step.component.js +5 -5
  362. package/stepper/step-label/step-label.component.js +1 -1
  363. package/stepper/stepper/stepper.component.js +7 -7
  364. package/table.css +15 -9
  365. package/tabs/tab/tab.component.d.ts +10 -4
  366. package/tabs/tab/tab.component.d.ts.map +1 -1
  367. package/tabs/tab/tab.component.js +22 -24
  368. package/tabs/tab-group/tab-group.component.d.ts +15 -14
  369. package/tabs/tab-group/tab-group.component.d.ts.map +1 -1
  370. package/tabs/tab-group/tab-group.component.js +68 -122
  371. package/tabs/tab-label/tab-label.component.d.ts +21 -2
  372. package/tabs/tab-label/tab-label.component.d.ts.map +1 -1
  373. package/tabs/tab-label/tab-label.component.js +88 -46
  374. package/tag/tag/tag.component.js +14 -14
  375. package/teaser/teaser.component.js +1 -1
  376. package/teaser-hero/teaser-hero.component.js +12 -12
  377. package/teaser-product/common.js +1 -1
  378. package/teaser-product-common-DIra6aVg.js +5 -0
  379. package/teaser-product.js +1 -1
  380. package/time-input/time-input.component.js +1 -1
  381. package/timetable-form/timetable-form/timetable-form.component.js +6 -6
  382. package/timetable-form/timetable-form-details/timetable-form-details.component.js +4 -4
  383. package/timetable-form/timetable-form-field/timetable-form-field.component.js +5 -5
  384. package/timetable-form.css +3 -3
  385. package/timetable-occupancy/timetable-occupancy.component.js +7 -7
  386. package/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts +1 -0
  387. package/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts.map +1 -1
  388. package/timetable-occupancy-icon/timetable-occupancy-icon.component.js +23 -23
  389. package/title/title-base.js +1 -1
  390. package/title/title.component.js +1 -1
  391. package/toast/toast.component.d.ts +3 -1
  392. package/toast/toast.component.d.ts.map +1 -1
  393. package/toast/toast.component.js +67 -59
  394. package/toggle/toggle/toggle.component.js +1 -1
  395. package/toggle/toggle-option/toggle-option.component.js +5 -5
  396. package/toggle-check/toggle-check.component.js +16 -16
  397. package/tooltip/tooltip.component.d.ts +89 -0
  398. package/tooltip/tooltip.component.d.ts.map +1 -0
  399. package/tooltip/tooltip.component.js +220 -0
  400. package/tooltip.d.ts +5 -0
  401. package/tooltip.d.ts.map +1 -0
  402. package/tooltip.js +4 -0
  403. package/train/train-blocked-passage/train-blocked-passage.component.js +1 -1
  404. package/train/train-formation/train-formation.component.js +16 -16
  405. package/train/train-wagon/train-wagon.component.js +1 -1
  406. package/transparent-button-Bg9fU_iZ.js +9 -0
  407. package/typography.css +1 -0
  408. package/visual-checkbox/visual-checkbox.component.js +14 -14
  409. package/checkbox-common-CDzcyq8p.js +0 -5
  410. package/file-selector-common-OHK9hu3a.js +0 -5
  411. package/icon-sidebar-button-common-CM-ueEhH.js +0 -7
  412. package/radio-button-common-CUppr5FI.js +0 -5
  413. package/teaser-product-common-C8oSkIxy.js +0 -5
  414. package/transparent-button-xudJxob_.js +0 -9
package/core/styles/mixins/shadows.scss CHANGED
@@ -3,13 +3,11 @@
3
3
  var(--sbb-shadow-elevation-level-3-shadow-2-offset-x)
4
4
  var(--sbb-shadow-elevation-level-3-shadow-2-offset-y)
5
5
  var(--sbb-shadow-elevation-level-3-shadow-2-blur)
6
- var(--sbb-shadow-elevation-level-3-shadow-2-spread)
7
- var(--sbb-shadow-elevation-level-3-soft-2-color),
6
+ var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-shadow-color-soft-2),
8
7
  var(--sbb-shadow-elevation-level-3-shadow-1-offset-x)
9
8
  var(--sbb-shadow-elevation-level-3-shadow-1-offset-y)
10
9
  var(--sbb-shadow-elevation-level-3-shadow-1-blur)
11
- var(--sbb-shadow-elevation-level-3-shadow-1-spread)
12
- var(--sbb-shadow-elevation-level-3-soft-1-color);
10
+ var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-shadow-color-soft-1);
13
11
  }
14
12
 
15
13
  @mixin shadow-level-3-soft-negative {
@@ -17,13 +15,11 @@
17
15
  var(--sbb-shadow-elevation-level-3-shadow-2-offset-x)
18
16
  var(--sbb-shadow-elevation-level-3-shadow-2-offset-y)
19
17
  var(--sbb-shadow-elevation-level-3-shadow-2-blur)
20
- var(--sbb-shadow-elevation-level-3-shadow-2-spread)
21
- var(--sbb-shadow-elevation-level-3-soft-negative-2-color),
18
+ var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-shadow-color-soft-2-negative),
22
19
  var(--sbb-shadow-elevation-level-3-shadow-1-offset-x)
23
20
  var(--sbb-shadow-elevation-level-3-shadow-1-offset-y)
24
21
  var(--sbb-shadow-elevation-level-3-shadow-1-blur)
25
- var(--sbb-shadow-elevation-level-3-shadow-1-spread)
26
- var(--sbb-shadow-elevation-level-3-soft-negative-1-color);
22
+ var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-shadow-color-soft-1-negative);
27
23
  }
28
24
 
29
25
  @mixin shadow-level-3-hard {
@@ -31,13 +27,11 @@
31
27
  var(--sbb-shadow-elevation-level-3-shadow-2-offset-x)
32
28
  var(--sbb-shadow-elevation-level-3-shadow-2-offset-y)
33
29
  var(--sbb-shadow-elevation-level-3-shadow-2-blur)
34
- var(--sbb-shadow-elevation-level-3-shadow-2-spread)
35
- var(--sbb-shadow-elevation-level-3-hard-2-color),
30
+ var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-shadow-color-hard-2),
36
31
  var(--sbb-shadow-elevation-level-3-shadow-1-offset-x)
37
32
  var(--sbb-shadow-elevation-level-3-shadow-1-offset-y)
38
33
  var(--sbb-shadow-elevation-level-3-shadow-1-blur)
39
- var(--sbb-shadow-elevation-level-3-shadow-1-spread)
40
- var(--sbb-shadow-elevation-level-3-hard-1-color);
34
+ var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-shadow-color-hard-1);
41
35
  }
42
36
 
43
37
  @mixin shadow-level-3-hard-negative {
@@ -45,13 +39,11 @@
45
39
  var(--sbb-shadow-elevation-level-3-shadow-2-offset-x)
46
40
  var(--sbb-shadow-elevation-level-3-shadow-2-offset-y)
47
41
  var(--sbb-shadow-elevation-level-3-shadow-2-blur)
48
- var(--sbb-shadow-elevation-level-3-shadow-2-spread)
49
- var(--sbb-shadow-elevation-level-3-hard-negative-2-color),
42
+ var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-shadow-color-hard-2-negative),
50
43
  var(--sbb-shadow-elevation-level-3-shadow-1-offset-x)
51
44
  var(--sbb-shadow-elevation-level-3-shadow-1-offset-y)
52
45
  var(--sbb-shadow-elevation-level-3-shadow-1-blur)
53
- var(--sbb-shadow-elevation-level-3-shadow-1-spread)
54
- var(--sbb-shadow-elevation-level-3-hard-negative-1-color);
46
+ var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-shadow-color-hard-1-negative);
55
47
  }
56
48
 
57
49
  @mixin shadow-level-5-soft {
@@ -59,13 +51,11 @@
59
51
  var(--sbb-shadow-elevation-level-5-shadow-2-offset-x)
60
52
  var(--sbb-shadow-elevation-level-5-shadow-2-offset-y)
61
53
  var(--sbb-shadow-elevation-level-5-shadow-2-blur)
62
- var(--sbb-shadow-elevation-level-5-shadow-2-spread)
63
- var(--sbb-shadow-elevation-level-5-soft-2-color),
54
+ var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-color-soft-2),
64
55
  var(--sbb-shadow-elevation-level-5-shadow-1-offset-x)
65
56
  var(--sbb-shadow-elevation-level-5-shadow-1-offset-y)
66
57
  var(--sbb-shadow-elevation-level-5-shadow-1-blur)
67
- var(--sbb-shadow-elevation-level-5-shadow-1-spread)
68
- var(--sbb-shadow-elevation-level-5-soft-1-color);
58
+ var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-color-soft-1);
69
59
  }
70
60
 
71
61
  @mixin shadow-level-5-soft-negative {
@@ -73,13 +63,11 @@
73
63
  var(--sbb-shadow-elevation-level-5-shadow-2-offset-x)
74
64
  var(--sbb-shadow-elevation-level-5-shadow-2-offset-y)
75
65
  var(--sbb-shadow-elevation-level-5-shadow-2-blur)
76
- var(--sbb-shadow-elevation-level-5-shadow-2-spread)
77
- var(--sbb-shadow-elevation-level-5-soft-negative-2-color),
66
+ var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-color-soft-2-negative),
78
67
  var(--sbb-shadow-elevation-level-5-shadow-1-offset-x)
79
68
  var(--sbb-shadow-elevation-level-5-shadow-1-offset-y)
80
69
  var(--sbb-shadow-elevation-level-5-shadow-1-blur)
81
- var(--sbb-shadow-elevation-level-5-shadow-1-spread)
82
- var(--sbb-shadow-elevation-level-5-soft-negative-1-color);
70
+ var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-color-soft-1-negative);
83
71
  }
84
72
 
85
73
  @mixin shadow-level-5-hard {
@@ -87,13 +75,11 @@
87
75
  var(--sbb-shadow-elevation-level-5-shadow-2-offset-x)
88
76
  var(--sbb-shadow-elevation-level-5-shadow-2-offset-y)
89
77
  var(--sbb-shadow-elevation-level-5-shadow-2-blur)
90
- var(--sbb-shadow-elevation-level-5-shadow-2-spread)
91
- var(--sbb-shadow-elevation-level-5-hard-2-color),
78
+ var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-color-hard-2),
92
79
  var(--sbb-shadow-elevation-level-5-shadow-1-offset-x)
93
80
  var(--sbb-shadow-elevation-level-5-shadow-1-offset-y)
94
81
  var(--sbb-shadow-elevation-level-5-shadow-1-blur)
95
- var(--sbb-shadow-elevation-level-5-shadow-1-spread)
96
- var(--sbb-shadow-elevation-level-5-hard-1-color);
82
+ var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-color-hard-1);
97
83
  }
98
84
 
99
85
  @mixin shadow-level-5-hard-negative {
@@ -101,13 +87,11 @@
101
87
  var(--sbb-shadow-elevation-level-5-shadow-2-offset-x)
102
88
  var(--sbb-shadow-elevation-level-5-shadow-2-offset-y)
103
89
  var(--sbb-shadow-elevation-level-5-shadow-2-blur)
104
- var(--sbb-shadow-elevation-level-5-shadow-2-spread)
105
- var(--sbb-shadow-elevation-level-5-hard-negative-2-color),
90
+ var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-color-hard-2-negative),
106
91
  var(--sbb-shadow-elevation-level-5-shadow-1-offset-x)
107
92
  var(--sbb-shadow-elevation-level-5-shadow-1-offset-y)
108
93
  var(--sbb-shadow-elevation-level-5-shadow-1-blur)
109
- var(--sbb-shadow-elevation-level-5-shadow-1-spread)
110
- var(--sbb-shadow-elevation-level-5-hard-negative-1-color);
94
+ var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-color-hard-1-negative);
111
95
  }
112
96
 
113
97
  @mixin shadow-level-9-soft {
@@ -115,13 +99,11 @@
115
99
  var(--sbb-shadow-elevation-level-9-shadow-2-offset-x)
116
100
  var(--sbb-shadow-elevation-level-9-shadow-2-offset-y)
117
101
  var(--sbb-shadow-elevation-level-9-shadow-2-blur)
118
- var(--sbb-shadow-elevation-level-9-shadow-2-spread)
119
- var(--sbb-shadow-elevation-level-9-soft-2-color),
102
+ var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-color-soft-2),
120
103
  var(--sbb-shadow-elevation-level-9-shadow-1-offset-x)
121
104
  var(--sbb-shadow-elevation-level-9-shadow-1-offset-y)
122
105
  var(--sbb-shadow-elevation-level-9-shadow-1-blur)
123
- var(--sbb-shadow-elevation-level-9-shadow-1-spread)
124
- var(--sbb-shadow-elevation-level-9-soft-1-color);
106
+ var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-color-soft-1);
125
107
  }
126
108
 
127
109
  @mixin shadow-level-9-soft-negative {
@@ -129,13 +111,11 @@
129
111
  var(--sbb-shadow-elevation-level-9-shadow-2-offset-x)
130
112
  var(--sbb-shadow-elevation-level-9-shadow-2-offset-y)
131
113
  var(--sbb-shadow-elevation-level-9-shadow-2-blur)
132
- var(--sbb-shadow-elevation-level-9-shadow-2-spread)
133
- var(--sbb-shadow-elevation-level-9-soft-negative-2-color),
114
+ var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-color-soft-2-negative),
134
115
  var(--sbb-shadow-elevation-level-9-shadow-1-offset-x)
135
116
  var(--sbb-shadow-elevation-level-9-shadow-1-offset-y)
136
117
  var(--sbb-shadow-elevation-level-9-shadow-1-blur)
137
- var(--sbb-shadow-elevation-level-9-shadow-1-spread)
138
- var(--sbb-shadow-elevation-level-9-soft-negative-1-color);
118
+ var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-color-soft-1-negative);
139
119
  }
140
120
 
141
121
  @mixin shadow-level-9-hard {
@@ -143,13 +123,11 @@
143
123
  var(--sbb-shadow-elevation-level-9-shadow-2-offset-x)
144
124
  var(--sbb-shadow-elevation-level-9-shadow-2-offset-y)
145
125
  var(--sbb-shadow-elevation-level-9-shadow-2-blur)
146
- var(--sbb-shadow-elevation-level-9-shadow-2-spread)
147
- var(--sbb-shadow-elevation-level-9-hard-2-color),
126
+ var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-color-hard-2),
148
127
  var(--sbb-shadow-elevation-level-9-shadow-1-offset-x)
149
128
  var(--sbb-shadow-elevation-level-9-shadow-1-offset-y)
150
129
  var(--sbb-shadow-elevation-level-9-shadow-1-blur)
151
- var(--sbb-shadow-elevation-level-9-shadow-1-spread)
152
- var(--sbb-shadow-elevation-level-9-hard-1-color);
130
+ var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-color-hard-1);
153
131
  }
154
132
 
155
133
  @mixin shadow-level-9-hard-negative {
@@ -157,13 +135,11 @@
157
135
  var(--sbb-shadow-elevation-level-9-shadow-2-offset-x)
158
136
  var(--sbb-shadow-elevation-level-9-shadow-2-offset-y)
159
137
  var(--sbb-shadow-elevation-level-9-shadow-2-blur)
160
- var(--sbb-shadow-elevation-level-9-shadow-2-spread)
161
- var(--sbb-shadow-elevation-level-9-hard-negative-2-color),
138
+ var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-color-hard-2-negative),
162
139
  var(--sbb-shadow-elevation-level-9-shadow-1-offset-x)
163
140
  var(--sbb-shadow-elevation-level-9-shadow-1-offset-y)
164
141
  var(--sbb-shadow-elevation-level-9-shadow-1-blur)
165
- var(--sbb-shadow-elevation-level-9-shadow-1-spread)
166
- var(--sbb-shadow-elevation-level-9-hard-negative-1-color);
142
+ var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-color-hard-1-negative);
167
143
  }
168
144
 
169
145
  @mixin shadow-level-11-soft {
@@ -171,13 +147,11 @@
171
147
  var(--sbb-shadow-elevation-level-11-shadow-2-offset-x)
172
148
  var(--sbb-shadow-elevation-level-11-shadow-2-offset-y)
173
149
  var(--sbb-shadow-elevation-level-11-shadow-2-blur)
174
- var(--sbb-shadow-elevation-level-11-shadow-2-spread)
175
- var(--sbb-shadow-elevation-level-11-soft-2-color),
150
+ var(--sbb-shadow-elevation-level-11-shadow-2-spread) var(--sbb-shadow-color-soft-2),
176
151
  var(--sbb-shadow-elevation-level-11-shadow-1-offset-x)
177
152
  var(--sbb-shadow-elevation-level-11-shadow-1-offset-y)
178
153
  var(--sbb-shadow-elevation-level-11-shadow-1-blur)
179
- var(--sbb-shadow-elevation-level-11-shadow-1-spread)
180
- var(--sbb-shadow-elevation-level-11-soft-1-color);
154
+ var(--sbb-shadow-elevation-level-11-shadow-1-spread) var(--sbb-shadow-color-soft-1);
181
155
  }
182
156
 
183
157
  @mixin shadow-level-11-soft-negative {
@@ -185,13 +159,11 @@
185
159
  var(--sbb-shadow-elevation-level-11-shadow-2-offset-x)
186
160
  var(--sbb-shadow-elevation-level-11-shadow-2-offset-y)
187
161
  var(--sbb-shadow-elevation-level-11-shadow-2-blur)
188
- var(--sbb-shadow-elevation-level-11-shadow-2-spread)
189
- var(--sbb-shadow-elevation-level-11-soft-negative-2-color),
162
+ var(--sbb-shadow-elevation-level-11-shadow-2-spread) var(--sbb-shadow-color-soft-2-negative),
190
163
  var(--sbb-shadow-elevation-level-11-shadow-1-offset-x)
191
164
  var(--sbb-shadow-elevation-level-11-shadow-1-offset-y)
192
165
  var(--sbb-shadow-elevation-level-11-shadow-1-blur)
193
- var(--sbb-shadow-elevation-level-11-shadow-1-spread)
194
- var(--sbb-shadow-elevation-level-11-soft-negative-1-color);
166
+ var(--sbb-shadow-elevation-level-11-shadow-1-spread) var(--sbb-shadow-color-soft-1-negative);
195
167
  }
196
168
 
197
169
  @mixin shadow-level-11-hard {
@@ -199,13 +171,11 @@
199
171
  var(--sbb-shadow-elevation-level-11-shadow-2-offset-x)
200
172
  var(--sbb-shadow-elevation-level-11-shadow-2-offset-y)
201
173
  var(--sbb-shadow-elevation-level-11-shadow-2-blur)
202
- var(--sbb-shadow-elevation-level-11-shadow-2-spread)
203
- var(--sbb-shadow-elevation-level-11-hard-2-color),
174
+ var(--sbb-shadow-elevation-level-11-shadow-2-spread) var(--sbb-shadow-color-hard-2),
204
175
  var(--sbb-shadow-elevation-level-11-shadow-1-offset-x)
205
176
  var(--sbb-shadow-elevation-level-11-shadow-1-offset-y)
206
177
  var(--sbb-shadow-elevation-level-11-shadow-1-blur)
207
- var(--sbb-shadow-elevation-level-11-shadow-1-spread)
208
- var(--sbb-shadow-elevation-level-11-hard-1-color);
178
+ var(--sbb-shadow-elevation-level-11-shadow-1-spread) var(--sbb-shadow-color-hard-1);
209
179
  }
210
180
 
211
181
  @mixin shadow-level-11-hard-negative {
@@ -213,11 +183,9 @@
213
183
  var(--sbb-shadow-elevation-level-11-shadow-2-offset-x)
214
184
  var(--sbb-shadow-elevation-level-11-shadow-2-offset-y)
215
185
  var(--sbb-shadow-elevation-level-11-shadow-2-blur)
216
- var(--sbb-shadow-elevation-level-11-shadow-2-spread)
217
- var(--sbb-shadow-elevation-level-11-hard-negative-2-color),
186
+ var(--sbb-shadow-elevation-level-11-shadow-2-spread) var(--sbb-shadow-color-hard-2-negative),
218
187
  var(--sbb-shadow-elevation-level-11-shadow-1-offset-x)
219
188
  var(--sbb-shadow-elevation-level-11-shadow-1-offset-y)
220
189
  var(--sbb-shadow-elevation-level-11-shadow-1-blur)
221
- var(--sbb-shadow-elevation-level-11-shadow-1-spread)
222
- var(--sbb-shadow-elevation-level-11-hard-negative-1-color);
190
+ var(--sbb-shadow-elevation-level-11-shadow-1-spread) var(--sbb-shadow-color-hard-1-negative);
223
191
  }
package/core/styles/mixins/table.scss CHANGED
@@ -10,11 +10,11 @@
10
10
 
11
11
  & {
12
12
  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
13
- --sbb-table-border-color: var(--sbb-color-cloud);
14
- --sbb-table-background-color: var(--sbb-color-white);
15
- --sbb-table-row-striped-color: var(--sbb-color-milk);
16
- --sbb-table-color: inherit;
17
- --sbb-table-caption-color: var(--sbb-color-granite);
13
+ --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
14
+ --sbb-table-background-color: var(--sbb-background-color-1);
15
+ --sbb-table-row-striped-color: var(--sbb-background-color-3);
16
+ --sbb-table-color: var(--sbb-color-1);
17
+ --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
18
18
  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
19
19
  --sbb-table-sticky-shadow-width: 3rem;
20
20
  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
@@ -93,8 +93,11 @@
93
93
  @mixin table-caption {
94
94
  @include typo.text-xs--regular;
95
95
 
96
+ // Workaround for storybook. It crashes if 'light-dark' is used as a 'var' fallback
97
+ --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
98
+
96
99
  // Defaults are needed for cases where the caption is used outside a table
97
- color: var(--sbb-table-caption-color, var(--sbb-color-granite));
100
+ color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
98
101
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
99
102
  text-align: left;
100
103
  }
@@ -121,9 +124,9 @@
121
124
 
122
125
  @mixin table--negative {
123
126
  --sbb-table-border-color: var(--sbb-color-anthracite);
124
- --sbb-table-background-color: var(--sbb-color-midnight);
125
- --sbb-table-color: var(--sbb-color-white);
126
- --sbb-table-row-striped-color: var(--sbb-color-charcoal);
127
+ --sbb-table-background-color: var(--sbb-background-color-1-negative);
128
+ --sbb-table-color: var(--sbb-color-1-negative);
129
+ --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
127
130
  --sbb-table-caption-color: var(--sbb-color-cement);
128
131
  }
129
132
 
@@ -157,7 +160,7 @@
157
160
  }
158
161
 
159
162
  @mixin table--theme-iron {
160
- --sbb-table-cell-color: var(--sbb-color-iron);
163
+ --sbb-table-cell-color: var(--sbb-color-4);
161
164
 
162
165
  tbody > tr > td {
163
166
  color: var(--sbb-table-cell-color);
package/core/styles/mixins/timetable-form.scss CHANGED
@@ -13,8 +13,8 @@
13
13
  padding-inline: var(--sbb-spacing-fixed-5x);
14
14
  background: linear-gradient(
15
15
  to bottom,
16
- var(--sbb-color-red) 0 #{functions.px-to-rem-build(178)},
17
- var(--sbb-color-milk) #{functions.px-to-rem-build(178)} 100%
16
+ var(--sbb-color-primary) 0 #{functions.px-to-rem-build(178)},
17
+ var(--sbb-background-color-3) #{functions.px-to-rem-build(178)} 100%
18
18
  );
19
19
 
20
20
  @include mediaqueries.mq($to: large) {
@@ -52,7 +52,7 @@
52
52
  &::after {
53
53
  content: '';
54
54
  position: absolute;
55
- border-block-end: var(--sbb-border-width-1x) solid var(--sbb-color-cloud);
55
+ border-block-end: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);
56
56
  inset-inline: var(--sbb-form-field-padding-inline);
57
57
  inset-block-end: 0;
58
58
  }
package/core/styles/mixins/typo.scss CHANGED
@@ -116,7 +116,7 @@
116
116
  }
117
117
 
118
118
  @mixin title--negative {
119
- --sbb-title-text-color-normal: var(--sbb-color-milk);
119
+ --sbb-title-text-color-normal: var(--sbb-color-3-negative);
120
120
  }
121
121
 
122
122
  // @deprecated, non-standard values, title rules combined with title level mixins are the alternative
@@ -214,8 +214,8 @@
214
214
  }
215
215
 
216
216
  @mixin placeholder {
217
- color: var(--sbb-color-metal);
218
- -webkit-text-fill-color: var(--sbb-color-metal);
217
+ color: var(--sbb-color-5);
218
+ -webkit-text-fill-color: var(--sbb-color-5);
219
219
  opacity: 1;
220
220
  }
221
221
 
@@ -230,7 +230,7 @@
230
230
  @include text-xs--regular;
231
231
 
232
232
  padding: 0;
233
- color: var(--sbb-color-granite);
233
+ color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
234
234
  }
235
235
 
236
236
  %sub-sup {
package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss CHANGED
@@ -97,14 +97,24 @@ $sbb-color-red-alpha-20: rgba(235, 0, 0, 0.2);
97
97
  $sbb-color-red-alpha-60: rgba(235, 0, 0, 0.6);
98
98
  $sbb-color-red-alpha-90: rgba(235, 0, 0, 0.9);
99
99
  $sbb-color-red-mode-dark: #ff3838;
100
+ $sbb-color-red85: #ff3838;
100
101
  $sbb-color-red125: #c60018;
101
102
  $sbb-color-red125-alpha-0: rgba(198, 0, 24, 0);
102
103
  $sbb-color-red125-alpha-20: rgba(198, 0, 24, 0.2);
103
- $sbb-color-red125-alpha-60: rgba(198, 0, 0, 0.6);
104
+ $sbb-color-red125-alpha-60: rgba(198, 0, 24, 0.6);
104
105
  $sbb-color-red150: #a20013;
105
106
  $sbb-color-royal: #06348b;
107
+ $sbb-color-royal85: #4077df;
106
108
  $sbb-color-royal125: #032668;
107
109
  $sbb-color-royal150: #021c4e;
110
+ $sbb-color-royal-light: #06348b;
111
+ $sbb-color-royal-dark: #0053ef;
112
+ $sbb-color-royal85-light: #4077df;
113
+ $sbb-color-royal85-dark: #4077df;
114
+ $sbb-color-royal125-light: #032668;
115
+ $sbb-color-royal125-dark: #245ecb;
116
+ $sbb-color-royal150-light: #021c4e;
117
+ $sbb-color-royal150-dark: #000000;
108
118
  $sbb-color-white: #ffffff;
109
119
  $sbb-color-white-alpha-0: rgba(255, 255, 255, 0);
110
120
  $sbb-color-white-alpha-20: rgba(255, 255, 255, 0.2);
@@ -114,16 +124,38 @@ $sbb-color-white-alpha-60: rgba(255, 255, 255, 0.6);
114
124
  $sbb-color-white-alpha-70: rgba(255, 255, 255, 0.7);
115
125
  $sbb-color-white-alpha-80: rgba(255, 255, 255, 0.8);
116
126
  $sbb-color-sky: #0074bf;
127
+ $sbb-color-sky-light: #0074bf;
128
+ $sbb-color-sky-dark: #128ede;
117
129
  $sbb-color-night: #143a85;
130
+ $sbb-color-night-light: #143a85;
131
+ $sbb-color-night-dark: #6587ca;
118
132
  $sbb-color-violet: #6f2282;
133
+ $sbb-color-violet-light: #6f2282;
134
+ $sbb-color-violet-dark: #b36cc5;
119
135
  $sbb-color-pink: #c7387a;
136
+ $sbb-color-pink-light: #c7387a;
137
+ $sbb-color-pink-dark: #e45295;
120
138
  $sbb-color-autumn: #cf3b00;
139
+ $sbb-color-autumn-light: #cf3b00;
140
+ $sbb-color-autumn-dark: #f05313;
121
141
  $sbb-color-orange: #f27e00;
142
+ $sbb-color-orange-light: #f27e00;
143
+ $sbb-color-orange-dark: #fb8e19;
122
144
  $sbb-color-peach: #fcbb00;
145
+ $sbb-color-peach-light: #fcbb00;
146
+ $sbb-color-peach-dark: #ffc727;
123
147
  $sbb-color-lemon: #ffde15;
148
+ $sbb-color-lemon-light: #ffde15;
149
+ $sbb-color-lemon-dark: #ffe547;
124
150
  $sbb-color-brown: #a05400;
151
+ $sbb-color-brown-light: #a05400;
152
+ $sbb-color-brown-dark: #000000;
125
153
  $sbb-color-green: #008233;
154
+ $sbb-color-green-light: #008233;
155
+ $sbb-color-green-dark: #109d47;
126
156
  $sbb-color-turquoise: #007e84;
157
+ $sbb-color-turquoise-light: #007e84;
158
+ $sbb-color-turquoise-dark: #00a59b;
127
159
  /// Original Value: 3px
128
160
  $sbb-focus-outline-offset: 0.1875rem;
129
161
  $sbb-hover-image-brightness: 1.075;
@@ -164,6 +196,22 @@ $sbb-layout-base-offset-responsive-wide: 4.5rem;
164
196
  $sbb-layout-base-offset-responsive-ultra: 7.5rem;
165
197
  /// Original Value: 1200px
166
198
  $sbb-layout-base-page-max-width: 75rem;
199
+ $sbb-shadow-color-soft-1-light: rgba(141, 141, 141, 0.05);
200
+ $sbb-shadow-color-soft-1-dark: rgba(0, 0, 0, 0.15);
201
+ $sbb-shadow-color-soft-1-negative-light: rgba(0, 0, 0, 0.15);
202
+ $sbb-shadow-color-soft-1-negative-dark: rgba(0, 0, 0, 0.15);
203
+ $sbb-shadow-color-soft-2-light: rgba(141, 141, 141, 0.1);
204
+ $sbb-shadow-color-soft-2-dark: rgba(0, 0, 0, 0.2);
205
+ $sbb-shadow-color-soft-2-negative-light: rgba(0, 0, 0, 0.2);
206
+ $sbb-shadow-color-soft-2-negative-dark: rgba(0, 0, 0, 0.2);
207
+ $sbb-shadow-color-hard-1-light: rgba(141, 141, 141, 0.1);
208
+ $sbb-shadow-color-hard-1-dark: rgba(0, 0, 0, 0.3);
209
+ $sbb-shadow-color-hard-1-negative-light: rgba(0, 0, 0, 0.3);
210
+ $sbb-shadow-color-hard-1-negative-dark: rgba(0, 0, 0, 0.3);
211
+ $sbb-shadow-color-hard-2-light: rgba(141, 141, 141, 0.2);
212
+ $sbb-shadow-color-hard-2-dark: rgba(0, 0, 0, 0.4);
213
+ $sbb-shadow-color-hard-2-negative-light: rgba(0, 0, 0, 0.4);
214
+ $sbb-shadow-color-hard-2-negative-dark: rgba(0, 0, 0, 0.4);
167
215
  /// Original Value: 0px
168
216
  $sbb-shadow-elevation-level-3-shadow-1-offset-x: 0rem;
169
217
  /// Original Value: 2px