@sbb-esta/lyne-elements 3.7.0 → 3.8.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 (376) 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/config/config.d.ts +6 -0
  33. package/core/config/config.d.ts.map +1 -1
  34. package/core/controllers/media-matchers-controller.d.ts +29 -0
  35. package/core/controllers/media-matchers-controller.d.ts.map +1 -1
  36. package/core/controllers/media-matchers-controller.js +73 -23
  37. package/core/controllers.js +16 -14
  38. package/core/dom/contains-pierce-shadow-dom.d.ts +3 -0
  39. package/core/dom/contains-pierce-shadow-dom.d.ts.map +1 -0
  40. package/core/dom/contains-pierce-shadow-dom.js +12 -0
  41. package/core/dom/queue-dom-content-loaded.d.ts +5 -0
  42. package/core/dom/queue-dom-content-loaded.d.ts.map +1 -0
  43. package/core/dom/queue-dom-content-loaded.js +7 -0
  44. package/core/dom/set-or-remove-attribute.d.ts +14 -0
  45. package/core/dom/set-or-remove-attribute.d.ts.map +1 -1
  46. package/core/dom/set-or-remove-attribute.js +11 -3
  47. package/core/dom.d.ts +2 -0
  48. package/core/dom.d.ts.map +1 -1
  49. package/core/dom.js +28 -22
  50. package/core/images.d.ts +4 -0
  51. package/core/images.d.ts.map +1 -1
  52. package/core/images.js +12 -12
  53. package/core/mixins.js +10 -10
  54. package/core/overlay/overlay-outside-pointer-event-listener.d.ts +26 -0
  55. package/core/overlay/overlay-outside-pointer-event-listener.d.ts.map +1 -0
  56. package/core/overlay/overlay-outside-pointer-event-listener.js +37 -0
  57. package/core/overlay.d.ts +1 -0
  58. package/core/overlay.d.ts.map +1 -1
  59. package/core/overlay.js +14 -11
  60. package/core/styles/core.scss +39 -12
  61. package/core/styles/mixins/badge.scss +2 -2
  62. package/core/styles/mixins/buttons.scss +14 -14
  63. package/core/styles/mixins/card.scss +9 -6
  64. package/core/styles/mixins/chip.scss +8 -8
  65. package/core/styles/mixins/image.scss +3 -0
  66. package/core/styles/mixins/link.scss +12 -7
  67. package/core/styles/mixins/lists.scss +6 -4
  68. package/core/styles/mixins/overlay.scss +6 -3
  69. package/core/styles/mixins/panel.scss +3 -3
  70. package/core/styles/mixins/pearl-chain-bullet.scss +9 -5
  71. package/core/styles/mixins/scrollbar.scss +12 -6
  72. package/core/styles/mixins/shadows.scss +32 -64
  73. package/core/styles/mixins/table.scss +13 -10
  74. package/core/styles/mixins/timetable-form.scss +3 -3
  75. package/core/styles/mixins/typo.scss +4 -4
  76. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss +49 -1
  77. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss +203 -5
  78. package/core/styles/off-brand-theme.scss +3 -0
  79. package/core/styles/safety-theme.scss +3 -0
  80. package/core/styles/standard-theme.scss +3 -14
  81. package/core/styles/theme.scss +18 -0
  82. package/core.css +253 -21
  83. package/custom-elements.json +1392 -115
  84. package/date-input/date-input.component.js +1 -1
  85. package/datepicker/datepicker-next-day/datepicker-next-day.component.js +4 -4
  86. package/datepicker/datepicker-previous-day/datepicker-previous-day.component.js +6 -6
  87. package/datepicker/datepicker-toggle/datepicker-toggle.component.js +7 -7
  88. package/development/alert/alert/alert.component.d.ts +2 -0
  89. package/development/alert/alert/alert.component.d.ts.map +1 -1
  90. package/development/alert/alert/alert.component.js +22 -8
  91. package/development/autocomplete/autocomplete-base-element.js +23 -11
  92. package/development/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.js +15 -14
  93. package/development/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js +5 -4
  94. package/development/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js +19 -11
  95. package/development/breadcrumb/breadcrumb/breadcrumb.component.js +4 -1
  96. package/development/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +16 -8
  97. package/development/button/common.js +1 -1
  98. package/development/button/mini-button/mini-button.component.js +15 -14
  99. package/development/button/mini-button-group/mini-button-group.component.js +4 -4
  100. package/development/button.js +1 -1
  101. package/development/calendar/calendar.component.js +21 -11
  102. package/development/card/card/card.component.js +11 -6
  103. package/development/card/card-badge/card-badge.component.js +10 -9
  104. package/development/carousel/carousel/carousel.component.d.ts +1 -0
  105. package/development/carousel/carousel/carousel.component.d.ts.map +1 -1
  106. package/development/carousel/carousel/carousel.component.js +14 -4
  107. package/development/carousel/carousel-list/carousel-list.component.d.ts +2 -2
  108. package/development/carousel/carousel-list/carousel-list.component.d.ts.map +1 -1
  109. package/development/carousel/carousel-list/carousel-list.component.js +29 -21
  110. package/development/checkbox/common.js +1 -1
  111. package/development/{checkbox-common-aMPOsPVA.js → checkbox-common-Dy_ofVhp.js} +4 -3
  112. package/development/checkbox.js +1 -1
  113. package/development/chip/chip/chip.component.js +15 -14
  114. package/development/chip-label/chip-label.component.js +12 -15
  115. package/development/clock/clock.component.js +11 -3
  116. package/development/container/container/container.component.js +6 -6
  117. package/development/container/sticky-bar/sticky-bar.component.js +6 -6
  118. package/development/core/config/config.d.ts +6 -0
  119. package/development/core/config/config.d.ts.map +1 -1
  120. package/development/core/config/config.js +1 -1
  121. package/development/core/controllers/media-matchers-controller.d.ts +29 -0
  122. package/development/core/controllers/media-matchers-controller.d.ts.map +1 -1
  123. package/development/core/controllers/media-matchers-controller.js +74 -1
  124. package/development/core/controllers.js +3 -1
  125. package/development/core/dom/contains-pierce-shadow-dom.d.ts +3 -0
  126. package/development/core/dom/contains-pierce-shadow-dom.d.ts.map +1 -0
  127. package/development/core/dom/contains-pierce-shadow-dom.js +14 -0
  128. package/development/core/dom/queue-dom-content-loaded.d.ts +5 -0
  129. package/development/core/dom/queue-dom-content-loaded.d.ts.map +1 -0
  130. package/development/core/dom/queue-dom-content-loaded.js +12 -0
  131. package/development/core/dom/set-or-remove-attribute.d.ts +14 -0
  132. package/development/core/dom/set-or-remove-attribute.d.ts.map +1 -1
  133. package/development/core/dom/set-or-remove-attribute.js +9 -1
  134. package/development/core/dom.d.ts +2 -0
  135. package/development/core/dom.d.ts.map +1 -1
  136. package/development/core/dom.js +8 -2
  137. package/development/core/images.d.ts +4 -0
  138. package/development/core/images.d.ts.map +1 -1
  139. package/development/core/images.js +11 -11
  140. package/development/core/mixins.js +7 -6
  141. package/development/core/overlay/overlay-outside-pointer-event-listener.d.ts +26 -0
  142. package/development/core/overlay/overlay-outside-pointer-event-listener.d.ts.map +1 -0
  143. package/development/core/overlay/overlay-outside-pointer-event-listener.js +61 -0
  144. package/development/core/overlay.d.ts +1 -0
  145. package/development/core/overlay.d.ts.map +1 -1
  146. package/development/core/overlay.js +4 -1
  147. package/development/date-input/date-input.component.js +2 -2
  148. package/development/datepicker/datepicker-next-day/datepicker-next-day.component.js +15 -14
  149. package/development/datepicker/datepicker-previous-day/datepicker-previous-day.component.js +15 -14
  150. package/development/datepicker/datepicker-toggle/datepicker-toggle.component.js +15 -14
  151. package/development/dialog/dialog/dialog.component.d.ts +1 -0
  152. package/development/dialog/dialog/dialog.component.d.ts.map +1 -1
  153. package/development/dialog/dialog/dialog.component.js +28 -14
  154. package/development/dialog/dialog-actions/dialog-actions.component.js +1 -1
  155. package/development/dialog/dialog-title/dialog-title.component.js +1 -1
  156. package/development/divider/divider.component.js +2 -2
  157. package/development/expansion-panel/expansion-panel/expansion-panel.component.js +6 -6
  158. package/development/expansion-panel/expansion-panel-header/expansion-panel-header.component.js +6 -2
  159. package/development/file-selector/common.js +1 -1
  160. package/development/{file-selector-common-CRnQigIZ.js → file-selector-common-CRNAWFM_.js} +8 -5
  161. package/development/file-selector.js +1 -1
  162. package/development/flip-card/flip-card/flip-card.component.js +8 -3
  163. package/development/footer/footer.component.js +5 -4
  164. package/development/form-error/form-error.component.js +2 -2
  165. package/development/form-field/form-field/form-field.component.js +36 -22
  166. package/development/form-field/form-field-clear/form-field-clear.component.js +15 -14
  167. package/development/header/common/header-action-common.js +4 -4
  168. package/development/header/header/header.component.js +2 -2
  169. package/development/header/header-environment/header-environment.component.js +1 -1
  170. package/development/{icon-sidebar-button-common-CA_8TnFu.js → icon-sidebar-button-common-BGrKtvyM.js} +3 -2
  171. package/development/journey-header/journey-header.component.js +1 -1
  172. package/development/lead-container/lead-container.component.js +4 -2
  173. package/development/link/common/block-link-common.js +17 -5
  174. package/development/link/common/inline-link-common.js +9 -3
  175. package/development/link-list/link-list-anchor/link-list-anchor.component.js +11 -9
  176. package/development/loading-indicator/loading-indicator.component.js +1 -1
  177. package/development/loading-indicator-circle/loading-indicator-circle.component.js +2 -2
  178. package/development/logo/logo.component.js +3 -2
  179. package/development/map-container/map-container.component.js +14 -6
  180. package/development/menu/common/menu-action-common.js +4 -3
  181. package/development/menu/menu/menu.component.d.ts +2 -0
  182. package/development/menu/menu/menu.component.d.ts.map +1 -1
  183. package/development/menu/menu/menu.component.js +36 -13
  184. package/development/message/message.component.js +3 -1
  185. package/development/navigation/common/navigation-action-common.js +4 -4
  186. package/development/navigation/navigation/navigation.component.js +21 -19
  187. package/development/navigation/navigation-list/navigation-list.component.js +1 -1
  188. package/development/navigation/navigation-marker/navigation-marker.component.js +1 -1
  189. package/development/navigation/navigation-section/navigation-section.component.js +3 -3
  190. package/development/notification/notification.component.js +38 -18
  191. package/development/option/optgroup/optgroup-base-element.js +3 -2
  192. package/development/option/option/option.component.js +13 -11
  193. package/development/option/option-hint/option-hint.component.js +3 -2
  194. package/development/overlay/overlay.component.d.ts.map +1 -1
  195. package/development/overlay/overlay.component.js +28 -22
  196. package/development/paginator/compact-paginator/compact-paginator.component.js +3 -2
  197. package/development/paginator/paginator/paginator.component.js +18 -17
  198. package/development/popover/popover/popover.component.js +8 -6
  199. package/development/popover/popover-trigger/popover-trigger.component.js +20 -17
  200. package/development/radio-button/common.js +1 -1
  201. package/development/radio-button/radio-button/radio-button.component.js +3 -3
  202. package/development/radio-button/radio-button-panel/radio-button-panel.component.js +3 -3
  203. package/development/{radio-button-common-454JtP9b.js → radio-button-common-CgM3kQSW.js} +9 -8
  204. package/development/radio-button.js +1 -1
  205. package/development/sbb-tokens-CVLcOi-S.js +1 -1
  206. package/development/select/select.component.js +31 -13
  207. package/development/selection-action-panel/selection-action-panel.component.js +9 -5
  208. package/development/selection-expansion-panel/selection-expansion-panel.component.js +10 -6
  209. package/development/sidebar/common.js +1 -1
  210. package/development/sidebar/icon-sidebar/icon-sidebar.component.js +2 -2
  211. package/development/sidebar/sidebar/sidebar.component.js +14 -6
  212. package/development/sidebar.js +1 -1
  213. package/development/signet/signet.component.js +2 -2
  214. package/development/skiplink-list/skiplink-list.component.d.ts +3 -1
  215. package/development/skiplink-list/skiplink-list.component.d.ts.map +1 -1
  216. package/development/skiplink-list/skiplink-list.component.js +26 -9
  217. package/development/slider/slider.component.js +15 -9
  218. package/development/status/status.component.js +7 -7
  219. package/development/stepper/step/step.component.js +1 -3
  220. package/development/stepper/step-label/step-label.component.js +7 -6
  221. package/development/stepper/stepper/stepper.component.js +5 -5
  222. package/development/tabs/tab-label/tab-label.component.js +7 -14
  223. package/development/tag/tag/tag.component.js +15 -9
  224. package/development/teaser/teaser.component.js +3 -2
  225. package/development/teaser-hero/teaser-hero.component.js +3 -3
  226. package/development/teaser-product/common.js +1 -1
  227. package/development/{teaser-product-common-D6fa6x3w.js → teaser-product-common-DvlBRkE_.js} +14 -6
  228. package/development/teaser-product.js +1 -1
  229. package/development/time-input/time-input.component.js +2 -2
  230. package/development/timetable-form/timetable-form/timetable-form.component.js +1 -1
  231. package/development/timetable-form/timetable-form-details/timetable-form-details.component.js +1 -1
  232. package/development/timetable-form/timetable-form-field/timetable-form-field.component.js +3 -3
  233. package/development/timetable-occupancy/timetable-occupancy.component.js +2 -2
  234. package/development/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts +1 -0
  235. package/development/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts.map +1 -1
  236. package/development/timetable-occupancy-icon/timetable-occupancy-icon.component.js +4 -3
  237. package/development/title/title-base.js +2 -5
  238. package/development/title/title.component.js +1 -1
  239. package/development/toast/toast.component.d.ts +3 -1
  240. package/development/toast/toast.component.d.ts.map +1 -1
  241. package/development/toast/toast.component.js +31 -15
  242. package/development/toggle/toggle/toggle.component.js +8 -4
  243. package/development/toggle/toggle-option/toggle-option.component.js +5 -3
  244. package/development/toggle-check/toggle-check.component.js +13 -14
  245. package/development/tooltip/tooltip.component.d.ts +89 -0
  246. package/development/tooltip/tooltip.component.d.ts.map +1 -0
  247. package/development/tooltip/tooltip.component.js +466 -0
  248. package/development/tooltip.d.ts +5 -0
  249. package/development/tooltip.d.ts.map +1 -0
  250. package/development/tooltip.js +5 -0
  251. package/development/train/train-blocked-passage/train-blocked-passage.component.js +1 -1
  252. package/development/train/train-formation/train-formation.component.js +16 -4
  253. package/development/train/train-wagon/train-wagon.component.js +3 -12
  254. package/development/{transparent-button-COe-YB_U.js → transparent-button-DdSaBp_-.js} +141 -86
  255. package/development/visual-checkbox/visual-checkbox.component.js +12 -12
  256. package/dialog/dialog/dialog.component.d.ts +1 -0
  257. package/dialog/dialog/dialog.component.d.ts.map +1 -1
  258. package/dialog/dialog/dialog.component.js +37 -36
  259. package/dialog/dialog-actions/dialog-actions.component.js +6 -6
  260. package/dialog/dialog-title/dialog-title.component.js +4 -4
  261. package/divider/divider.component.js +16 -16
  262. package/expansion-panel/expansion-panel/expansion-panel.component.js +1 -1
  263. package/expansion-panel/expansion-panel-header/expansion-panel-header.component.js +3 -3
  264. package/file-selector/common.js +1 -1
  265. package/file-selector-common-D88J9PEh.js +5 -0
  266. package/file-selector.js +1 -1
  267. package/flip-card/flip-card/flip-card.component.js +14 -14
  268. package/footer/footer.component.js +18 -18
  269. package/form-error/form-error.component.js +4 -4
  270. package/form-field/form-field/form-field.component.js +1 -1
  271. package/form-field/form-field-clear/form-field-clear.component.js +9 -9
  272. package/header/common/header-action-common.js +1 -1
  273. package/header/header/header.component.js +19 -19
  274. package/header/header-environment/header-environment.component.js +1 -1
  275. package/icon-sidebar-button-common-BeRXvifI.js +7 -0
  276. package/index.d.ts +2 -0
  277. package/index.js +2 -0
  278. package/journey-header/journey-header.component.js +1 -1
  279. package/lead-container/lead-container.component.js +5 -5
  280. package/link/common/block-link-common.js +23 -23
  281. package/link/common/inline-link-common.js +7 -7
  282. package/link-list/link-list-anchor/link-list-anchor.component.js +11 -11
  283. package/lists.css +5 -3
  284. package/loading-indicator/loading-indicator.component.js +1 -1
  285. package/loading-indicator-circle/loading-indicator-circle.component.js +13 -13
  286. package/logo/logo.component.js +9 -9
  287. package/map-container/map-container.component.js +15 -15
  288. package/menu/common/menu-action-common.js +5 -5
  289. package/menu/menu/menu.component.d.ts +2 -0
  290. package/menu/menu/menu.component.d.ts.map +1 -1
  291. package/menu/menu/menu.component.js +45 -38
  292. package/message/message.component.js +9 -9
  293. package/navigation/common/navigation-action-common.js +6 -6
  294. package/navigation/navigation/navigation.component.js +19 -19
  295. package/navigation/navigation-list/navigation-list.component.js +1 -1
  296. package/navigation/navigation-marker/navigation-marker.component.js +1 -1
  297. package/navigation/navigation-section/navigation-section.component.js +1 -1
  298. package/notification/notification.component.js +8 -8
  299. package/off-brand-theme.css +3017 -0
  300. package/option/optgroup/optgroup-base-element.js +1 -1
  301. package/option/option/option.component.js +3 -3
  302. package/option/option-hint/option-hint.component.js +8 -8
  303. package/overlay/overlay.component.d.ts.map +1 -1
  304. package/overlay/overlay.component.js +47 -48
  305. package/package.json +14 -1
  306. package/paginator/compact-paginator/compact-paginator.component.js +4 -4
  307. package/paginator/paginator/paginator.component.js +10 -10
  308. package/popover/popover/popover.component.js +9 -9
  309. package/popover/popover-trigger/popover-trigger.component.js +5 -5
  310. package/radio-button/common.js +1 -1
  311. package/radio-button/radio-button/radio-button.component.js +13 -13
  312. package/radio-button/radio-button-panel/radio-button-panel.component.js +2 -2
  313. package/radio-button-common-Nm9ULjVb.js +5 -0
  314. package/radio-button.js +1 -1
  315. package/safety-theme.css +3017 -0
  316. package/scrollbar.css +52 -20
  317. package/select/select.component.js +45 -45
  318. package/selection-action-panel/selection-action-panel.component.js +6 -6
  319. package/selection-expansion-panel/selection-expansion-panel.component.js +11 -11
  320. package/sidebar/common.js +1 -1
  321. package/sidebar/icon-sidebar/icon-sidebar.component.js +12 -12
  322. package/sidebar/sidebar/sidebar.component.js +29 -29
  323. package/sidebar.js +1 -1
  324. package/signet/signet.component.js +1 -1
  325. package/skiplink-list/skiplink-list.component.d.ts +3 -1
  326. package/skiplink-list/skiplink-list.component.d.ts.map +1 -1
  327. package/skiplink-list/skiplink-list.component.js +37 -30
  328. package/slider/slider.component.js +16 -16
  329. package/standard-theme.css +334 -58
  330. package/status/status.component.js +13 -13
  331. package/stepper/step/step.component.js +5 -5
  332. package/stepper/step-label/step-label.component.js +1 -1
  333. package/stepper/stepper/stepper.component.js +7 -7
  334. package/table.css +15 -9
  335. package/tabs/tab-label/tab-label.component.js +19 -19
  336. package/tag/tag/tag.component.js +14 -14
  337. package/teaser/teaser.component.js +1 -1
  338. package/teaser-hero/teaser-hero.component.js +12 -12
  339. package/teaser-product/common.js +1 -1
  340. package/teaser-product-common-DIra6aVg.js +5 -0
  341. package/teaser-product.js +1 -1
  342. package/time-input/time-input.component.js +1 -1
  343. package/timetable-form/timetable-form/timetable-form.component.js +6 -6
  344. package/timetable-form/timetable-form-details/timetable-form-details.component.js +4 -4
  345. package/timetable-form/timetable-form-field/timetable-form-field.component.js +5 -5
  346. package/timetable-form.css +3 -3
  347. package/timetable-occupancy/timetable-occupancy.component.js +7 -7
  348. package/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts +1 -0
  349. package/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts.map +1 -1
  350. package/timetable-occupancy-icon/timetable-occupancy-icon.component.js +23 -23
  351. package/title/title-base.js +1 -1
  352. package/title/title.component.js +1 -1
  353. package/toast/toast.component.d.ts +3 -1
  354. package/toast/toast.component.d.ts.map +1 -1
  355. package/toast/toast.component.js +67 -59
  356. package/toggle/toggle/toggle.component.js +1 -1
  357. package/toggle/toggle-option/toggle-option.component.js +5 -5
  358. package/toggle-check/toggle-check.component.js +16 -16
  359. package/tooltip/tooltip.component.d.ts +89 -0
  360. package/tooltip/tooltip.component.d.ts.map +1 -0
  361. package/tooltip/tooltip.component.js +215 -0
  362. package/tooltip.d.ts +5 -0
  363. package/tooltip.d.ts.map +1 -0
  364. package/tooltip.js +4 -0
  365. package/train/train-blocked-passage/train-blocked-passage.component.js +1 -1
  366. package/train/train-formation/train-formation.component.js +16 -16
  367. package/train/train-wagon/train-wagon.component.js +1 -1
  368. package/transparent-button-Bg9fU_iZ.js +9 -0
  369. package/typography.css +1 -0
  370. package/visual-checkbox/visual-checkbox.component.js +14 -14
  371. package/checkbox-common-CDzcyq8p.js +0 -5
  372. package/file-selector-common-OHK9hu3a.js +0 -5
  373. package/icon-sidebar-button-common-CM-ueEhH.js +0 -7
  374. package/radio-button-common-CUppr5FI.js +0 -5
  375. package/teaser-product-common-C8oSkIxy.js +0 -5
  376. package/transparent-button-xudJxob_.js +0 -9
package/core/styles/mixins/link.scss CHANGED
@@ -4,9 +4,12 @@
4
4
  @use '../core/functions';
5
5
 
6
6
  @mixin link-common-variables {
7
- --sbb-link-color-hover: var(--sbb-color-red125);
8
- --sbb-link-color-active: var(--sbb-color-red150);
9
- --sbb-link-text-decoration-color: color-mix(in srgb, currentcolor 80%, white);
7
+ --sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-graphite));
8
+ --sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-metal));
9
+ --sbb-link-text-decoration-color: light-dark(
10
+ color-mix(in srgb, currentcolor 80%, white),
11
+ color-mix(in srgb, currentcolor 80%, black)
12
+ );
10
13
  --sbb-link-text-decoration-color-hover: currentcolor;
11
14
  }
12
15
 
@@ -19,20 +22,22 @@
19
22
  @mixin block-link-variables {
20
23
  @include link-common-variables;
21
24
 
22
- --sbb-link-color-normal: var(--sbb-color-granite);
25
+ --sbb-link-color-normal: light-dark(var(--sbb-color-granite), var(--sbb-color-white));
26
+ --sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-cloud));
27
+ --sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-silver));
23
28
  }
24
29
 
25
30
  @mixin block-link-variables--negative {
26
31
  @include link-common-variables--negative;
27
32
 
28
- --sbb-link-color-normal: var(--sbb-color-white);
29
- --sbb-link-color-hover: var(--sbb-color-cloud);
33
+ --sbb-link-color-normal: var(--sbb-color-1-negative);
34
+ --sbb-link-color-hover: var(--sbb-color-4-negative);
30
35
  --sbb-link-color-active: var(--sbb-color-silver);
31
36
  }
32
37
 
33
38
  // To display a current active page, e.g. if the CSS class sbb-active is set
34
39
  @mixin block-link-variables--active {
35
- --sbb-link-color-normal: var(--sbb-color-black);
40
+ --sbb-link-color-normal: light-dark(var(--sbb-color-black), var(--sbb-color-cement));
36
41
  --sbb-link-text-decoration-line: underline;
37
42
  --sbb-link-text-decoration-color: currentcolor;
38
43
  }
package/core/styles/mixins/lists.scss CHANGED
@@ -159,6 +159,7 @@
159
159
  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
160
160
  --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
161
161
  --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
162
+ --sbb-step-list-color: var(--sbb-color-2);
162
163
 
163
164
  // Additional space from overall li padding to the text because text
164
165
  // has to be centered to marker number.
@@ -174,7 +175,7 @@
174
175
  margin: 0;
175
176
  padding: 0;
176
177
  counter-reset: steps;
177
- color: var(--sbb-color-iron);
178
+ color: var(--sbb-step-list-color);
178
179
 
179
180
  &:where(.sbb-text-s) {
180
181
  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
@@ -194,7 +195,7 @@
194
195
  > li {
195
196
  position: relative;
196
197
  counter-increment: steps;
197
- background-color: var(--sbb-color-milk);
198
+ background-color: var(--sbb-background-color-3);
198
199
  padding-block: calc(
199
200
  var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset)
200
201
  )
@@ -218,8 +219,9 @@
218
219
  width: var(--sbb-step-list-dimensions);
219
220
  margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset));
220
221
  inset-inline-start: var(--sbb-step-list-padding-inline);
221
- color: var(--sbb-color-charcoal);
222
- border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
222
+ color: var(--sbb-step-list-color);
223
+ border: var(--sbb-border-width-1x) solid
224
+ light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));
223
225
  border-radius: 50%;
224
226
  }
225
227
 
package/core/styles/mixins/overlay.scss CHANGED
@@ -25,19 +25,22 @@
25
25
  --sbb-options-panel-gap-fix-top: calc(
26
26
  var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius)
27
27
  );
28
- --sbb-options-panel-background-color: var(--sbb-color-white);
28
+ --sbb-options-panel-background-color: var(--sbb-background-color-1);
29
29
  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
30
30
  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
31
31
 
32
32
  // As the overlays have always a white background, we have to fix the focus outline color
33
33
  // to default color for cases where the overlays are used in a negative context.
34
- --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);
34
+ --sbb-focus-outline-color: light-dark(
35
+ var(--sbb-focus-outline-color-default),
36
+ var(--sbb-focus-outline-color-dark)
37
+ );
35
38
  }
36
39
 
37
40
  @mixin options-panel-overlay-negative-variables {
38
41
  @include scrollbar.scrollbar-variables--color-negative;
39
42
 
40
- --sbb-options-panel-background-color: var(--sbb-color-midnight);
43
+ --sbb-options-panel-background-color: var(--sbb-background-color-1-negative);
41
44
 
42
45
  // As the overlays have always a white background, we have to fix the focus outline color
43
46
  // to default color for cases where the overlays are used in a negative context.
package/core/styles/mixins/panel.scss CHANGED
@@ -13,9 +13,9 @@
13
13
  --sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));
14
14
  --sbb-panel-line-height: var(--sbb-typo-line-height-titles);
15
15
  --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
16
- --sbb-panel-color: var(--sbb-color-white);
17
- --sbb-panel-background-color: var(--sbb-color-red-alpha-90);
18
- --sbb-panel-background-color-hover: var(--sbb-color-red);
16
+ --sbb-panel-color: var(--sbb-color-1-negative);
17
+ --sbb-panel-background-color: color-mix(in srgb, var(--sbb-color-primary) 90%, transparent);
18
+ --sbb-panel-background-color-hover: var(--sbb-color-primary);
19
19
  --sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
20
20
  --sbb-panel-gap: var(--sbb-spacing-responsive-xs);
21
21
  --sbb-panel-animation-duration: var(
package/core/styles/mixins/pearl-chain-bullet.scss CHANGED
@@ -8,10 +8,13 @@
8
8
  @mixin pearl-chain-bullet-variables {
9
9
  --sbb-pearl-chain-bullet-size-start-end: #{functions.px-to-rem-build(10)};
10
10
  --sbb-pearl-chain-bullet-size-stop: #{functions.px-to-rem-build(8)};
11
- --sbb-pearl-chain-bullet-color: var(--sbb-color-charcoal);
12
- --sbb-pearl-chain-bullet-color-past: var(--sbb-color-metal);
13
- --sbb-pearl-chain-bullet-color-irrelevant: var(--sbb-color-metal);
14
- --sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-red);
11
+ --sbb-pearl-chain-bullet-color: var(--sbb-background-color-3-inverted);
12
+ --sbb-pearl-chain-bullet-color-past: light-dark(var(--sbb-color-metal), var(--sbb-color-granite));
13
+ --sbb-pearl-chain-bullet-color-irrelevant: light-dark(
14
+ var(--sbb-color-metal),
15
+ var(--sbb-color-granite)
16
+ );
17
+ --sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-primary);
15
18
  --sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);
16
19
  --sbb-pearl-chain-bullet-animation-duration: 1920ms;
17
20
  --sbb-pearl-chain-bullet-animation-easing: ease-out;
@@ -119,7 +122,8 @@
119
122
  }
120
123
 
121
124
  50% {
122
- box-shadow: 0 0 0 #{functions.px-to-rem-build(3)} var(--sbb-color-red-alpha-20);
125
+ box-shadow: 0 0 0 #{functions.px-to-rem-build(3)}
126
+ color-mix(in srgb, var(--sbb-color-primary) 20%, transparent);
123
127
  }
124
128
 
125
129
  100% {
package/core/styles/mixins/scrollbar.scss CHANGED
@@ -61,21 +61,27 @@
61
61
  }
62
62
 
63
63
  @mixin scrollbar-variables--color-positive {
64
- --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
65
- --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
64
+ --sbb-scrollbar-color: light-dark(
65
+ color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
66
+ color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
67
+ );
68
+ --sbb-scrollbar-color-hover: light-dark(
69
+ color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
70
+ color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
71
+ );
66
72
  }
67
73
 
68
74
  @mixin scrollbar-variables--color-positive-track-visible {
69
- --sbb-scrollbar-track-color: var(--sbb-color-cloud);
75
+ --sbb-scrollbar-track-color: var(--sbb-background-color-4);
70
76
  }
71
77
 
72
78
  @mixin scrollbar-variables--color-negative {
73
- --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
74
- --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
79
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
80
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
75
81
  }
76
82
 
77
83
  @mixin scrollbar-variables--color-negative-track-visible {
78
- --sbb-scrollbar-track-color: var(--sbb-color-iron);
84
+ --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
79
85
  }
80
86
 
81
87
  @mixin scrollbar-variables--track-invisible {
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