@scania/tegel 1.32.0 → 1.32.1

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 (229) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/tds-accordion-item.cjs.entry.js +1 -1
  3. package/dist/cjs/tds-accordion.cjs.entry.js +1 -1
  4. package/dist/cjs/tds-badge.cjs.entry.js +1 -1
  5. package/dist/cjs/tds-banner.cjs.entry.js +1 -1
  6. package/dist/cjs/tds-breadcrumb.cjs.entry.js +1 -1
  7. package/dist/cjs/tds-button.cjs.entry.js +6 -4
  8. package/dist/cjs/tds-checkbox.cjs.entry.js +9 -3
  9. package/dist/cjs/tds-chip.cjs.entry.js +1 -1
  10. package/dist/cjs/tds-core-header-item_2.cjs.entry.js +1 -1
  11. package/dist/cjs/tds-datetime.cjs.entry.js +10 -3
  12. package/dist/cjs/tds-dropdown_2.cjs.entry.js +32 -11
  13. package/dist/cjs/tds-folder-tab.cjs.entry.js +1 -1
  14. package/dist/cjs/tds-folder-tabs.cjs.entry.js +1 -1
  15. package/dist/cjs/tds-footer-group.cjs.entry.js +1 -1
  16. package/dist/cjs/tds-footer-item.cjs.entry.js +1 -1
  17. package/dist/cjs/tds-header-cell.cjs.entry.js +1 -1
  18. package/dist/cjs/tds-header-dropdown-list-item.cjs.entry.js +1 -1
  19. package/dist/cjs/tds-header-launcher-grid-item.cjs.entry.js +1 -1
  20. package/dist/cjs/tds-inline-tabs.cjs.entry.js +1 -1
  21. package/dist/cjs/tds-message.cjs.entry.js +1 -1
  22. package/dist/cjs/tds-modal.cjs.entry.js +1 -1
  23. package/dist/cjs/tds-navigation-tabs.cjs.entry.js +1 -1
  24. package/dist/cjs/tds-popover-core.cjs.entry.js +1 -1
  25. package/dist/cjs/tds-radio-button.cjs.entry.js +8 -2
  26. package/dist/cjs/tds-side-menu-dropdown-list-item.cjs.entry.js +1 -1
  27. package/dist/cjs/tds-side-menu-item.cjs.entry.js +1 -1
  28. package/dist/cjs/tds-spinner.cjs.entry.js +1 -1
  29. package/dist/cjs/tds-step.cjs.entry.js +2 -2
  30. package/dist/cjs/tds-table-body-row-expandable.cjs.entry.js +1 -1
  31. package/dist/cjs/tds-table-footer.cjs.entry.js +1 -1
  32. package/dist/cjs/tds-textarea.cjs.entry.js +10 -3
  33. package/dist/cjs/tds-toast.cjs.entry.js +1 -1
  34. package/dist/cjs/tds-toggle.cjs.entry.js +9 -3
  35. package/dist/cjs/tegel.cjs.js +1 -1
  36. package/dist/collection/components/accordion/accordion-item/accordion-item.css +2 -1
  37. package/dist/collection/components/accordion/accordion.css +2 -1
  38. package/dist/collection/components/badge/badge.css +1 -1
  39. package/dist/collection/components/banner/banner.css +2 -1
  40. package/dist/collection/components/breadcrumbs/breadcrumb/breadcrumb.css +2 -1
  41. package/dist/collection/components/button/button.css +60 -57
  42. package/dist/collection/components/button/button.js +39 -3
  43. package/dist/collection/components/checkbox/checkbox.css +5 -5
  44. package/dist/collection/components/checkbox/checkbox.js +25 -2
  45. package/dist/collection/components/chip/chip.css +4 -3
  46. package/dist/collection/components/datetime/datetime.js +27 -3
  47. package/dist/collection/components/dropdown/dropdown-option/dropdown-option.css +2 -1
  48. package/dist/collection/components/dropdown/dropdown.css +2 -2
  49. package/dist/collection/components/dropdown/dropdown.js +30 -9
  50. package/dist/collection/components/footer/footer-group/footer-group.css +3 -3
  51. package/dist/collection/components/footer/footer-item/footer-item.css +6 -4
  52. package/dist/collection/components/header/header-dropdown-list-item/header-dropdown-list-item.css +2 -1
  53. package/dist/collection/components/header/header-item/header-item.css +2 -1
  54. package/dist/collection/components/header/header-launcher-grid-item/header-launcher-grid-item.css +2 -1
  55. package/dist/collection/components/message/message.css +12 -1
  56. package/dist/collection/components/modal/modal.css +2 -1
  57. package/dist/collection/components/popover-core/tds-popover-core.css +568 -513
  58. package/dist/collection/components/radio-button/radio-button.css +4 -7
  59. package/dist/collection/components/radio-button/radio-button.js +28 -1
  60. package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.css +2 -1
  61. package/dist/collection/components/side-menu/side-menu-item/side-menu-item.css +2 -1
  62. package/dist/collection/components/spinner/spinner.css +3 -3
  63. package/dist/collection/components/stepper/step/step.css +19 -27
  64. package/dist/collection/components/stepper/step/step.js +1 -1
  65. package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.css +2 -1
  66. package/dist/collection/components/table/table-footer/table-footer.css +2 -1
  67. package/dist/collection/components/table/table-header-cell/table-header-cell.css +1 -1
  68. package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.css +2 -1
  69. package/dist/collection/components/tabs/folder-tabs/folder-tabs.css +2 -1
  70. package/dist/collection/components/tabs/inline-tabs/inline-tabs.css +2 -1
  71. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +2 -1
  72. package/dist/collection/components/textarea/textarea.js +31 -3
  73. package/dist/collection/components/toast/toast.css +10 -12
  74. package/dist/collection/components/toggle/toggle.css +18 -3
  75. package/dist/collection/components/toggle/toggle.js +25 -2
  76. package/dist/collection/utils/accessibility.js +30 -0
  77. package/dist/collection/utils/axeHelpers.js +11 -2
  78. package/dist/components/{p-ece91cb9.js → p-037c48f6.js} +1 -1
  79. package/dist/components/p-1492c7fc.js +2098 -0
  80. package/dist/components/{p-6732b15a.js → p-1c6e7dc9.js} +1 -1
  81. package/dist/components/{p-1ef7423a.js → p-58b92113.js} +11 -4
  82. package/dist/components/{p-adbf32b9.js → p-5fad6216.js} +31 -10
  83. package/dist/components/{p-6cdccb27.js → p-76dc921a.js} +1 -1
  84. package/dist/components/{p-7ee8b262.js → p-9d6af0e6.js} +2 -2
  85. package/dist/components/{p-69109003.js → p-aa5d2ee4.js} +1 -1
  86. package/dist/components/{p-84a20410.js → p-c46ecd24.js} +1 -1
  87. package/dist/components/{p-516d8085.js → p-e38cc897.js} +1 -1
  88. package/dist/components/tds-accordion-item.js +1 -1
  89. package/dist/components/tds-accordion.js +1 -1
  90. package/dist/components/tds-badge.js +1 -1
  91. package/dist/components/tds-banner.js +1 -1
  92. package/dist/components/tds-breadcrumb.js +1 -1
  93. package/dist/components/tds-button.js +8 -4
  94. package/dist/components/tds-checkbox.js +1 -1
  95. package/dist/components/tds-chip.js +1 -1
  96. package/dist/components/tds-datetime.js +12 -4
  97. package/dist/components/tds-dropdown-option.js +1 -1
  98. package/dist/components/tds-dropdown.js +1 -1
  99. package/dist/components/tds-folder-tab.js +1 -1
  100. package/dist/components/tds-folder-tabs.js +1 -1
  101. package/dist/components/tds-footer-group.js +1 -1
  102. package/dist/components/tds-footer-item.js +1 -1
  103. package/dist/components/tds-header-brand-symbol.js +1 -1
  104. package/dist/components/tds-header-cell.js +1 -1
  105. package/dist/components/tds-header-dropdown-list-item.js +1 -1
  106. package/dist/components/tds-header-dropdown.js +3 -3
  107. package/dist/components/tds-header-hamburger.js +1 -1
  108. package/dist/components/tds-header-item.js +1 -1
  109. package/dist/components/tds-header-launcher-button.js +1 -1
  110. package/dist/components/tds-header-launcher-grid-item.js +1 -1
  111. package/dist/components/tds-header-launcher-list-item.js +1 -1
  112. package/dist/components/tds-header-launcher.js +4 -4
  113. package/dist/components/tds-inline-tabs.js +1 -1
  114. package/dist/components/tds-message.js +1 -1
  115. package/dist/components/tds-modal.js +1 -1
  116. package/dist/components/tds-navigation-tabs.js +1 -1
  117. package/dist/components/tds-popover-canvas.js +1 -1
  118. package/dist/components/tds-popover-core.js +1 -1
  119. package/dist/components/tds-popover-menu.js +1 -1
  120. package/dist/components/tds-radio-button.js +10 -3
  121. package/dist/components/tds-side-menu-collapse-button.js +1 -1
  122. package/dist/components/tds-side-menu-dropdown-list-item.js +1 -1
  123. package/dist/components/tds-side-menu-dropdown.js +1 -1
  124. package/dist/components/tds-side-menu-item.js +1 -1
  125. package/dist/components/tds-spinner.js +1 -1
  126. package/dist/components/tds-step.js +2 -2
  127. package/dist/components/tds-table-body-row-expandable.js +1 -1
  128. package/dist/components/tds-table-body-row.js +1 -1
  129. package/dist/components/tds-table-footer.js +4 -4
  130. package/dist/components/tds-table-header.js +1 -1
  131. package/dist/components/tds-textarea.js +14 -6
  132. package/dist/components/tds-toast.js +1 -1
  133. package/dist/components/tds-toggle.js +11 -4
  134. package/dist/components/tds-tooltip.js +1 -1
  135. package/dist/esm/loader.js +1 -1
  136. package/dist/esm/tds-accordion-item.entry.js +1 -1
  137. package/dist/esm/tds-accordion.entry.js +1 -1
  138. package/dist/esm/tds-badge.entry.js +1 -1
  139. package/dist/esm/tds-banner.entry.js +1 -1
  140. package/dist/esm/tds-breadcrumb.entry.js +1 -1
  141. package/dist/esm/tds-button.entry.js +6 -4
  142. package/dist/esm/tds-checkbox.entry.js +9 -3
  143. package/dist/esm/tds-chip.entry.js +1 -1
  144. package/dist/esm/tds-core-header-item_2.entry.js +1 -1
  145. package/dist/esm/tds-datetime.entry.js +10 -3
  146. package/dist/esm/tds-dropdown_2.entry.js +32 -11
  147. package/dist/esm/tds-folder-tab.entry.js +1 -1
  148. package/dist/esm/tds-folder-tabs.entry.js +1 -1
  149. package/dist/esm/tds-footer-group.entry.js +1 -1
  150. package/dist/esm/tds-footer-item.entry.js +1 -1
  151. package/dist/esm/tds-header-cell.entry.js +1 -1
  152. package/dist/esm/tds-header-dropdown-list-item.entry.js +1 -1
  153. package/dist/esm/tds-header-launcher-grid-item.entry.js +1 -1
  154. package/dist/esm/tds-inline-tabs.entry.js +1 -1
  155. package/dist/esm/tds-message.entry.js +1 -1
  156. package/dist/esm/tds-modal.entry.js +1 -1
  157. package/dist/esm/tds-navigation-tabs.entry.js +1 -1
  158. package/dist/esm/tds-popover-core.entry.js +1 -1
  159. package/dist/esm/tds-radio-button.entry.js +8 -2
  160. package/dist/esm/tds-side-menu-dropdown-list-item.entry.js +1 -1
  161. package/dist/esm/tds-side-menu-item.entry.js +1 -1
  162. package/dist/esm/tds-spinner.entry.js +1 -1
  163. package/dist/esm/tds-step.entry.js +2 -2
  164. package/dist/esm/tds-table-body-row-expandable.entry.js +1 -1
  165. package/dist/esm/tds-table-footer.entry.js +1 -1
  166. package/dist/esm/tds-textarea.entry.js +10 -3
  167. package/dist/esm/tds-toast.entry.js +1 -1
  168. package/dist/esm/tds-toggle.entry.js +9 -3
  169. package/dist/esm/tegel.js +1 -1
  170. package/dist/tegel/{p-6cdbdb4e.entry.js → p-08cee6a4.entry.js} +1 -1
  171. package/dist/tegel/{p-1336fb6c.entry.js → p-120b5875.entry.js} +1 -1
  172. package/dist/tegel/{p-3e4707fb.entry.js → p-2e5d2bec.entry.js} +1 -1
  173. package/dist/tegel/{p-dfe24bb1.entry.js → p-32540392.entry.js} +1 -1
  174. package/dist/tegel/p-326f0bf4.entry.js +1 -0
  175. package/dist/tegel/{p-1120575b.entry.js → p-364c08ec.entry.js} +1 -1
  176. package/dist/tegel/{p-d4891ce6.entry.js → p-4d60aa49.entry.js} +1 -1
  177. package/dist/tegel/p-50ca8e71.entry.js +1 -0
  178. package/dist/tegel/p-5dd2aac8.entry.js +1 -0
  179. package/dist/tegel/{p-64be21db.entry.js → p-5df726fb.entry.js} +1 -1
  180. package/dist/tegel/{p-78823da3.entry.js → p-6d752168.entry.js} +1 -1
  181. package/dist/tegel/p-6d89dcbe.entry.js +1 -0
  182. package/dist/tegel/{p-9899e52e.entry.js → p-7013249b.entry.js} +1 -1
  183. package/dist/tegel/p-731f7599.entry.js +1 -0
  184. package/dist/tegel/p-84de314b.entry.js +1 -0
  185. package/dist/tegel/{p-e102ca15.entry.js → p-87219f00.entry.js} +1 -1
  186. package/dist/tegel/p-8bf0f99f.entry.js +1 -0
  187. package/dist/tegel/p-9396e9ab.entry.js +1 -0
  188. package/dist/tegel/{p-c5e50096.entry.js → p-97de52aa.entry.js} +1 -1
  189. package/dist/tegel/{p-2e1d2b49.entry.js → p-9ebfde2f.entry.js} +1 -1
  190. package/dist/tegel/{p-2b8e97e1.entry.js → p-a495c4bc.entry.js} +1 -1
  191. package/dist/tegel/p-b58194f9.entry.js +1 -0
  192. package/dist/tegel/{p-d14500a1.entry.js → p-c0778293.entry.js} +1 -1
  193. package/dist/tegel/p-c6beca5e.entry.js +1 -0
  194. package/dist/tegel/p-caa00547.entry.js +1 -0
  195. package/dist/tegel/p-d9040b7f.entry.js +1 -0
  196. package/dist/tegel/{p-10dfd194.entry.js → p-d99df3e7.entry.js} +1 -1
  197. package/dist/tegel/{p-3c51a017.entry.js → p-da60d17b.entry.js} +1 -1
  198. package/dist/tegel/p-e3c2b6b4.entry.js +1 -0
  199. package/dist/tegel/p-f4283f93.entry.js +1 -0
  200. package/dist/tegel/p-f76d8ab9.entry.js +1 -0
  201. package/dist/tegel/{p-46b66490.entry.js → p-fc679bf3.entry.js} +1 -1
  202. package/dist/tegel/{p-4bd0d41c.entry.js → p-fdc5c832.entry.js} +1 -1
  203. package/dist/tegel/tegel.css +6 -6
  204. package/dist/tegel/tegel.esm.js +1 -1
  205. package/dist/types/components/button/button.d.ts +4 -0
  206. package/dist/types/components/checkbox/checkbox.d.ts +2 -0
  207. package/dist/types/components/datetime/datetime.d.ts +2 -0
  208. package/dist/types/components/radio-button/radio-button.d.ts +3 -0
  209. package/dist/types/components/textarea/textarea.d.ts +2 -0
  210. package/dist/types/components/toggle/toggle.d.ts +3 -0
  211. package/dist/types/components.d.ts +36 -0
  212. package/dist/types/utils/accessibility.d.ts +14 -0
  213. package/package.json +1 -1
  214. package/dist/components/p-96e83134.js +0 -2098
  215. package/dist/tegel/p-1297d40e.entry.js +0 -1
  216. package/dist/tegel/p-1978cb0d.entry.js +0 -1
  217. package/dist/tegel/p-212e1fff.entry.js +0 -1
  218. package/dist/tegel/p-30c88c69.entry.js +0 -1
  219. package/dist/tegel/p-503cea9d.entry.js +0 -1
  220. package/dist/tegel/p-5bb01a99.entry.js +0 -1
  221. package/dist/tegel/p-90a97cc2.entry.js +0 -1
  222. package/dist/tegel/p-a9253c3a.entry.js +0 -1
  223. package/dist/tegel/p-ae0fed95.entry.js +0 -1
  224. package/dist/tegel/p-b152840e.entry.js +0 -1
  225. package/dist/tegel/p-b58c7bed.entry.js +0 -1
  226. package/dist/tegel/p-b7848493.entry.js +0 -1
  227. package/dist/tegel/p-bbeb4e1b.entry.js +0 -1
  228. package/dist/tegel/p-cbe217bf.entry.js +0 -1
  229. package/dist/tegel/p-d6d8cb7f.entry.js +0 -1
@@ -158,7 +158,7 @@
158
158
  /* Background - Elevation */
159
159
  --background-elevation-base: var(--scania-neutral-solid-00);
160
160
  --background-elevation-layer-01: var(--scania-neutral-solid-50);
161
- --background-elevation-layer-02: var(--scania-neutral-solid-00);
161
+ --background-elevation-layer-02: var(--tds-grey-00);
162
162
  --background-elevation-layer-03: var(--scania-neutral-solid-50);
163
163
  --background-elevation-top: var(--scania-neutral-solid-00);
164
164
  --background-elevation-scrim: rgb(0 0 0 / 38%);
@@ -180,9 +180,9 @@
180
180
  --background-elements-100: var(--scania-neutral-solid-100);
181
181
  /* Background - Clickable - Primary */
182
182
  --background-clickable-primary-primary: var(--scania-blue-600);
183
- --background-clickable-primary-primary-hover: var(--scania-blue-500);
184
- --background-clickable-primary-pressed: var(--scania-blue-700);
185
- --background-clickable-primary-focus: var(--scania-blue-400);
183
+ --background-clickable-primary-primary-hover: var(--scania-blue-700);
184
+ --background-clickable-primary-pressed: var(--scania-blue-800);
185
+ --background-clickable-primary-focus: var(--scania-blue-700);
186
186
  --background-clickable-primary-disabled: var(--scania-neutral-solid-50);
187
187
  --background-clickable-primary-resting: var(--scania-neutral-solid-100);
188
188
  /* Background - Clickable - Primary-Inverse */
@@ -210,11 +210,12 @@
210
210
  /* System - Warning */
211
211
  --system-warning-strong: var(--scania-extended-yellow-800);
212
212
  --system-warning-default: var(--scania-extended-yellow-100);
213
- --system-warning-subtle: var(--scania-extended-yellow-50);
213
+ --system-warning-subtle: var(--tds-grey-00);
214
214
  /* System - Danger */
215
215
  --system-danger-strong: var(--scania-extended-red-800);
216
216
  --system-danger-default: var(--scania-extended-red-400);
217
- --system-danger-subtle: var(--scania-extended-red-50);
217
+ --system-danger-subtle-03: var(--scania-extended-red-50);
218
+ --system-danger-subtle-02: var(--scania-extended-red-50);
218
219
  }
219
220
 
220
221
  /* Dark mode tokens (applied to .tds-mode-dark and .scania .tds-mode-dark) */
@@ -285,8 +286,8 @@
285
286
  /* Background - Elevation */
286
287
  --background-elevation-base: var(--scania-neutral-solid-1000);
287
288
  --background-elevation-layer-01: var(--scania-neutral-solid-928);
288
- --background-elevation-layer-02: var(--scania-neutral-solid-900);
289
- --background-elevation-layer-03: var(--scania-neutral-solid-846);
289
+ --background-elevation-layer-02: var(--tds-grey-850);
290
+ --background-elevation-layer-03: var(--scania-neutral-solid-900);
290
291
  --background-elevation-top: var(--scania-neutral-solid-846);
291
292
  --background-elevation-scrim: rgb(0 0 0 / 50%);
292
293
  --background-elevation-inverse: var(--scania-neutral-solid-00);
@@ -308,8 +309,8 @@
308
309
  /* Background - Clickable - Primary */
309
310
  --background-clickable-primary-primary: var(--scania-blue-400);
310
311
  --background-clickable-primary-primary-hover: var(--scania-blue-500);
311
- --background-clickable-primary-pressed: var(--scania-blue-300);
312
- --background-clickable-primary-focus: var(--scania-blue-600);
312
+ --background-clickable-primary-pressed: var(--scania-blue-600);
313
+ --background-clickable-primary-focus: var(--scania-blue-500);
313
314
  --background-clickable-primary-disabled: var(--scania-neutral-solid-868);
314
315
  --background-clickable-primary-resting: var(--scania-neutral-solid-800);
315
316
  /* Background - Clickable - Primary-Inverse */
@@ -337,11 +338,12 @@
337
338
  /* System - Warning */
338
339
  --system-warning-strong: var(--scania-extended-yellow-50);
339
340
  --system-warning-default: var(--scania-extended-yellow-100);
340
- --system-warning-subtle: var(--scania-extended-yellow-600);
341
+ --system-warning-subtle: var(--tds-grey-850);
341
342
  /* System - Danger */
342
343
  --system-danger-strong: var(--scania-extended-red-50);
343
344
  --system-danger-default: var(--scania-extended-red-400);
344
- --system-danger-subtle: var(--scania-extended-red-800);
345
+ --system-danger-subtle-03: var(--scania-extended-red-900);
346
+ --system-danger-subtle-02: var(--scania-extended-red-900);
345
347
  }
346
348
 
347
349
  /**
@@ -1904,68 +1906,75 @@ html {
1904
1906
  --tds-white-48: rgba(255, 255, 255, 0.48);
1905
1907
  --tds-white-38: rgba(255, 255, 255, 0.38);
1906
1908
  --tds-white-05: rgba(255, 255, 255, 0.05);
1907
- --tds-grey-958: #0d0f13;
1908
- --tds-grey-900: #1d2229;
1909
- --tds-grey-868: #242a33;
1910
- --tds-grey-846: #2b323d;
1911
- --tds-grey-800: #37414f;
1912
- --tds-grey-700: #56657a;
1913
- --tds-grey-600: #868fa2;
1914
- --tds-grey-500: #b0b7c4;
1915
- --tds-grey-400: #cdd1db;
1916
- --tds-grey-300: #dbdfe6;
1917
- --tds-grey-200: #e7e9ee;
1909
+ --tds-grey-1000: #000000;
1910
+ --tds-grey-958: #0b0c0f;
1911
+ --tds-grey-950: #0b0c0f;
1912
+ --tds-grey-900: #15181d;
1913
+ --tds-grey-850: #1c222b;
1914
+ --tds-grey-800: #242c37;
1915
+ --tds-grey-750: #2d3643;
1916
+ --tds-grey-700: #3a4554;
1917
+ --tds-grey-650: #475467;
1918
+ --tds-grey-600: #4e5e75;
1919
+ --tds-grey-500: #5f728c;
1920
+ --tds-grey-400: #6e829f;
1921
+ --tds-grey-350: #7e90a9;
1922
+ --tds-grey-300: #93a2b7;
1923
+ --tds-grey-250: #b4becd;
1924
+ --tds-grey-200: #d1d7e0;
1925
+ --tds-grey-150: #e0e5eb;
1918
1926
  --tds-grey-100: #edeff3;
1919
- --tds-grey-50: #f9fafb;
1927
+ --tds-grey-50: #f6f7f9;
1928
+ --tds-grey-00: #ffffff;
1920
1929
  --tds-blue-900: #001533;
1921
1930
  --tds-blue-800: #041e42;
1922
1931
  --tds-blue-700: #0f3263;
1923
1932
  --tds-blue-600: #16417f;
1924
1933
  --tds-blue-500: #2058a8;
1925
- --tds-blue-400: #2b70d3;
1934
+ --tds-blue-400: #2a6ecf;
1926
1935
  --tds-blue-300: #4a89f3;
1927
1936
  --tds-blue-200: #87afe8;
1928
1937
  --tds-blue-100: #bacde8;
1929
- --tds-blue-50: #e4e9f1;
1930
- --tds-red-900: #450307;
1931
- --tds-red-800: #6a080f;
1932
- --tds-red-700: #950a16;
1933
- --tds-red-600: #d6001c;
1934
- --tds-red-500: #de2b36;
1935
- --tds-red-400: #f35359;
1936
- --tds-red-300: #f58e90;
1937
- --tds-red-200: #f8b6b7;
1938
- --tds-red-100: #fadbdc;
1939
- --tds-red-50: #fdf4f5;
1940
- --tds-green-900: #112616;
1941
- --tds-green-800: #1c3822;
1942
- --tds-green-700: #2c5234;
1943
- --tds-green-600: #386e44;
1944
- --tds-green-500: #438151;
1945
- --tds-green-400: #539e63;
1946
- --tds-green-300: #89b691;
1947
- --tds-green-200: #a6d1ad;
1948
- --tds-green-100: #caebd0;
1949
- --tds-green-50: #f1f8f2;
1950
- --tds-orange-900: #331103;
1951
- --tds-orange-800: #893b15;
1952
- --tds-orange-700: #c65416;
1953
- --tds-orange-600: #eb6200;
1954
- --tds-orange-500: #fa6e23;
1955
- --tds-orange-400: #f98a67;
1956
- --tds-orange-300: #f9a38d;
1957
- --tds-orange-200: #f9cac0;
1958
- --tds-orange-100: #fbe3df;
1959
- --tds-orange-50: #fdf5f3;
1938
+ --tds-blue-50: #d8dde5;
1939
+ --tds-red-900: #350004;
1940
+ --tds-red-800: #480008;
1941
+ --tds-red-700: #6c0011;
1942
+ --tds-red-600: #8a0012;
1943
+ --tds-red-500: #b20018;
1944
+ --tds-red-400: #d1001b;
1945
+ --tds-red-300: #ea4851;
1946
+ --tds-red-200: #fc8a88;
1947
+ --tds-red-100: #ffb9b8;
1948
+ --tds-red-50: #ffdfe3;
1949
+ --tds-green-900: #001a12;
1950
+ --tds-green-800: #00251b;
1951
+ --tds-green-700: #0a382e;
1952
+ --tds-green-600: #004c3b;
1953
+ --tds-green-500: #00664f;
1954
+ --tds-green-400: #008064;
1955
+ --tds-green-300: #009e7e;
1956
+ --tds-green-200: #65bda5;
1957
+ --tds-green-100: #9bd9c2;
1958
+ --tds-green-50: #d3eee7;
1959
+ --tds-yellow-900: #ffdfe3;
1960
+ --tds-yellow-800: #4d260a;
1961
+ --tds-yellow-700: #6b3b10;
1962
+ --tds-yellow-600: #975717;
1963
+ --tds-yellow-500: #b87c14;
1964
+ --tds-yellow-400: #eaad06;
1965
+ --tds-yellow-300: #f1c21b;
1966
+ --tds-yellow-200: #f4d65d;
1967
+ --tds-yellow-100: #f8e596;
1968
+ --tds-yellow-50: #f9eec3;
1960
1969
  --tds-cta: #0f3263;
1961
1970
  --tds-negative: #ff2340;
1962
1971
  --tds-warning: #f1c21b;
1963
1972
  --tds-positive: #1dab8b;
1964
- --tds-information: #2b70d3;
1973
+ --tds-information: #2a6ecf;
1965
1974
  --tds-black: #000;
1966
1975
  --tds-white: #fff;
1967
1976
  --tds-blue: #041e42;
1968
- --tds-red: #d6001c;
1977
+ --tds-red: #8a0012;
1969
1978
  }
1970
1979
 
1971
1980
  .tds-background-black-100 {
@@ -2004,48 +2013,72 @@ html {
2004
2013
  background-color: rgba(255, 255, 255, 0.05);
2005
2014
  }
2006
2015
 
2016
+ .tds-background-grey-1000 {
2017
+ background-color: #000000;
2018
+ }
2019
+
2007
2020
  .tds-background-grey-958 {
2008
- background-color: #0d0f13;
2021
+ background-color: #0b0c0f;
2009
2022
  }
2010
2023
 
2011
- .tds-background-grey-900 {
2012
- background-color: #1d2229;
2024
+ .tds-background-grey-950 {
2025
+ background-color: #0b0c0f;
2013
2026
  }
2014
2027
 
2015
- .tds-background-grey-868 {
2016
- background-color: #242a33;
2028
+ .tds-background-grey-900 {
2029
+ background-color: #15181d;
2017
2030
  }
2018
2031
 
2019
- .tds-background-grey-846 {
2020
- background-color: #2b323d;
2032
+ .tds-background-grey-850 {
2033
+ background-color: #1c222b;
2021
2034
  }
2022
2035
 
2023
2036
  .tds-background-grey-800 {
2024
- background-color: #37414f;
2037
+ background-color: #242c37;
2038
+ }
2039
+
2040
+ .tds-background-grey-750 {
2041
+ background-color: #2d3643;
2025
2042
  }
2026
2043
 
2027
2044
  .tds-background-grey-700 {
2028
- background-color: #56657a;
2045
+ background-color: #3a4554;
2046
+ }
2047
+
2048
+ .tds-background-grey-650 {
2049
+ background-color: #475467;
2029
2050
  }
2030
2051
 
2031
2052
  .tds-background-grey-600 {
2032
- background-color: #868fa2;
2053
+ background-color: #4e5e75;
2033
2054
  }
2034
2055
 
2035
2056
  .tds-background-grey-500 {
2036
- background-color: #b0b7c4;
2057
+ background-color: #5f728c;
2037
2058
  }
2038
2059
 
2039
2060
  .tds-background-grey-400 {
2040
- background-color: #cdd1db;
2061
+ background-color: #6e829f;
2062
+ }
2063
+
2064
+ .tds-background-grey-350 {
2065
+ background-color: #7e90a9;
2041
2066
  }
2042
2067
 
2043
2068
  .tds-background-grey-300 {
2044
- background-color: #dbdfe6;
2069
+ background-color: #93a2b7;
2070
+ }
2071
+
2072
+ .tds-background-grey-250 {
2073
+ background-color: #b4becd;
2045
2074
  }
2046
2075
 
2047
2076
  .tds-background-grey-200 {
2048
- background-color: #e7e9ee;
2077
+ background-color: #d1d7e0;
2078
+ }
2079
+
2080
+ .tds-background-grey-150 {
2081
+ background-color: #e0e5eb;
2049
2082
  }
2050
2083
 
2051
2084
  .tds-background-grey-100 {
@@ -2053,7 +2086,11 @@ html {
2053
2086
  }
2054
2087
 
2055
2088
  .tds-background-grey-50 {
2056
- background-color: #f9fafb;
2089
+ background-color: #f6f7f9;
2090
+ }
2091
+
2092
+ .tds-background-grey-00 {
2093
+ background-color: #ffffff;
2057
2094
  }
2058
2095
 
2059
2096
  .tds-background-blue-900 {
@@ -2077,7 +2114,7 @@ html {
2077
2114
  }
2078
2115
 
2079
2116
  .tds-background-blue-400 {
2080
- background-color: #2b70d3;
2117
+ background-color: #2a6ecf;
2081
2118
  }
2082
2119
 
2083
2120
  .tds-background-blue-300 {
@@ -2093,127 +2130,127 @@ html {
2093
2130
  }
2094
2131
 
2095
2132
  .tds-background-blue-50 {
2096
- background-color: #e4e9f1;
2133
+ background-color: #d8dde5;
2097
2134
  }
2098
2135
 
2099
2136
  .tds-background-red-900 {
2100
- background-color: #450307;
2137
+ background-color: #350004;
2101
2138
  }
2102
2139
 
2103
2140
  .tds-background-red-800 {
2104
- background-color: #6a080f;
2141
+ background-color: #480008;
2105
2142
  }
2106
2143
 
2107
2144
  .tds-background-red-700 {
2108
- background-color: #950a16;
2145
+ background-color: #6c0011;
2109
2146
  }
2110
2147
 
2111
2148
  .tds-background-red-600 {
2112
- background-color: #d6001c;
2149
+ background-color: #8a0012;
2113
2150
  }
2114
2151
 
2115
2152
  .tds-background-red-500 {
2116
- background-color: #de2b36;
2153
+ background-color: #b20018;
2117
2154
  }
2118
2155
 
2119
2156
  .tds-background-red-400 {
2120
- background-color: #f35359;
2157
+ background-color: #d1001b;
2121
2158
  }
2122
2159
 
2123
2160
  .tds-background-red-300 {
2124
- background-color: #f58e90;
2161
+ background-color: #ea4851;
2125
2162
  }
2126
2163
 
2127
2164
  .tds-background-red-200 {
2128
- background-color: #f8b6b7;
2165
+ background-color: #fc8a88;
2129
2166
  }
2130
2167
 
2131
2168
  .tds-background-red-100 {
2132
- background-color: #fadbdc;
2169
+ background-color: #ffb9b8;
2133
2170
  }
2134
2171
 
2135
2172
  .tds-background-red-50 {
2136
- background-color: #fdf4f5;
2173
+ background-color: #ffdfe3;
2137
2174
  }
2138
2175
 
2139
2176
  .tds-background-green-900 {
2140
- background-color: #112616;
2177
+ background-color: #001a12;
2141
2178
  }
2142
2179
 
2143
2180
  .tds-background-green-800 {
2144
- background-color: #1c3822;
2181
+ background-color: #00251b;
2145
2182
  }
2146
2183
 
2147
2184
  .tds-background-green-700 {
2148
- background-color: #2c5234;
2185
+ background-color: #0a382e;
2149
2186
  }
2150
2187
 
2151
2188
  .tds-background-green-600 {
2152
- background-color: #386e44;
2189
+ background-color: #004c3b;
2153
2190
  }
2154
2191
 
2155
2192
  .tds-background-green-500 {
2156
- background-color: #438151;
2193
+ background-color: #00664f;
2157
2194
  }
2158
2195
 
2159
2196
  .tds-background-green-400 {
2160
- background-color: #539e63;
2197
+ background-color: #008064;
2161
2198
  }
2162
2199
 
2163
2200
  .tds-background-green-300 {
2164
- background-color: #89b691;
2201
+ background-color: #009e7e;
2165
2202
  }
2166
2203
 
2167
2204
  .tds-background-green-200 {
2168
- background-color: #a6d1ad;
2205
+ background-color: #65bda5;
2169
2206
  }
2170
2207
 
2171
2208
  .tds-background-green-100 {
2172
- background-color: #caebd0;
2209
+ background-color: #9bd9c2;
2173
2210
  }
2174
2211
 
2175
2212
  .tds-background-green-50 {
2176
- background-color: #f1f8f2;
2213
+ background-color: #d3eee7;
2177
2214
  }
2178
2215
 
2179
- .tds-background-orange-900 {
2180
- background-color: #331103;
2216
+ .tds-background-yellow-900 {
2217
+ background-color: #ffdfe3;
2181
2218
  }
2182
2219
 
2183
- .tds-background-orange-800 {
2184
- background-color: #893b15;
2220
+ .tds-background-yellow-800 {
2221
+ background-color: #4d260a;
2185
2222
  }
2186
2223
 
2187
- .tds-background-orange-700 {
2188
- background-color: #c65416;
2224
+ .tds-background-yellow-700 {
2225
+ background-color: #6b3b10;
2189
2226
  }
2190
2227
 
2191
- .tds-background-orange-600 {
2192
- background-color: #eb6200;
2228
+ .tds-background-yellow-600 {
2229
+ background-color: #975717;
2193
2230
  }
2194
2231
 
2195
- .tds-background-orange-500 {
2196
- background-color: #fa6e23;
2232
+ .tds-background-yellow-500 {
2233
+ background-color: #b87c14;
2197
2234
  }
2198
2235
 
2199
- .tds-background-orange-400 {
2200
- background-color: #f98a67;
2236
+ .tds-background-yellow-400 {
2237
+ background-color: #eaad06;
2201
2238
  }
2202
2239
 
2203
- .tds-background-orange-300 {
2204
- background-color: #f9a38d;
2240
+ .tds-background-yellow-300 {
2241
+ background-color: #f1c21b;
2205
2242
  }
2206
2243
 
2207
- .tds-background-orange-200 {
2208
- background-color: #f9cac0;
2244
+ .tds-background-yellow-200 {
2245
+ background-color: #f4d65d;
2209
2246
  }
2210
2247
 
2211
- .tds-background-orange-100 {
2212
- background-color: #fbe3df;
2248
+ .tds-background-yellow-100 {
2249
+ background-color: #f8e596;
2213
2250
  }
2214
2251
 
2215
- .tds-background-orange-50 {
2216
- background-color: #fdf5f3;
2252
+ .tds-background-yellow-50 {
2253
+ background-color: #f9eec3;
2217
2254
  }
2218
2255
 
2219
2256
  .tds-background-cta {
@@ -2233,7 +2270,7 @@ html {
2233
2270
  }
2234
2271
 
2235
2272
  .tds-background-information {
2236
- background-color: #2b70d3;
2273
+ background-color: #2a6ecf;
2237
2274
  }
2238
2275
 
2239
2276
  .tds-background-black {
@@ -2249,7 +2286,7 @@ html {
2249
2286
  }
2250
2287
 
2251
2288
  .tds-background-red {
2252
- background-color: #d6001c;
2289
+ background-color: #8a0012;
2253
2290
  }
2254
2291
 
2255
2292
  .tds-text-black-100 {
@@ -2288,48 +2325,72 @@ html {
2288
2325
  color: rgba(255, 255, 255, 0.05);
2289
2326
  }
2290
2327
 
2328
+ .tds-text-grey-1000 {
2329
+ color: #000000;
2330
+ }
2331
+
2291
2332
  .tds-text-grey-958 {
2292
- color: #0d0f13;
2333
+ color: #0b0c0f;
2293
2334
  }
2294
2335
 
2295
- .tds-text-grey-900 {
2296
- color: #1d2229;
2336
+ .tds-text-grey-950 {
2337
+ color: #0b0c0f;
2297
2338
  }
2298
2339
 
2299
- .tds-text-grey-868 {
2300
- color: #242a33;
2340
+ .tds-text-grey-900 {
2341
+ color: #15181d;
2301
2342
  }
2302
2343
 
2303
- .tds-text-grey-846 {
2304
- color: #2b323d;
2344
+ .tds-text-grey-850 {
2345
+ color: #1c222b;
2305
2346
  }
2306
2347
 
2307
2348
  .tds-text-grey-800 {
2308
- color: #37414f;
2349
+ color: #242c37;
2350
+ }
2351
+
2352
+ .tds-text-grey-750 {
2353
+ color: #2d3643;
2309
2354
  }
2310
2355
 
2311
2356
  .tds-text-grey-700 {
2312
- color: #56657a;
2357
+ color: #3a4554;
2358
+ }
2359
+
2360
+ .tds-text-grey-650 {
2361
+ color: #475467;
2313
2362
  }
2314
2363
 
2315
2364
  .tds-text-grey-600 {
2316
- color: #868fa2;
2365
+ color: #4e5e75;
2317
2366
  }
2318
2367
 
2319
2368
  .tds-text-grey-500 {
2320
- color: #b0b7c4;
2369
+ color: #5f728c;
2321
2370
  }
2322
2371
 
2323
2372
  .tds-text-grey-400 {
2324
- color: #cdd1db;
2373
+ color: #6e829f;
2374
+ }
2375
+
2376
+ .tds-text-grey-350 {
2377
+ color: #7e90a9;
2325
2378
  }
2326
2379
 
2327
2380
  .tds-text-grey-300 {
2328
- color: #dbdfe6;
2381
+ color: #93a2b7;
2382
+ }
2383
+
2384
+ .tds-text-grey-250 {
2385
+ color: #b4becd;
2329
2386
  }
2330
2387
 
2331
2388
  .tds-text-grey-200 {
2332
- color: #e7e9ee;
2389
+ color: #d1d7e0;
2390
+ }
2391
+
2392
+ .tds-text-grey-150 {
2393
+ color: #e0e5eb;
2333
2394
  }
2334
2395
 
2335
2396
  .tds-text-grey-100 {
@@ -2337,7 +2398,11 @@ html {
2337
2398
  }
2338
2399
 
2339
2400
  .tds-text-grey-50 {
2340
- color: #f9fafb;
2401
+ color: #f6f7f9;
2402
+ }
2403
+
2404
+ .tds-text-grey-00 {
2405
+ color: #ffffff;
2341
2406
  }
2342
2407
 
2343
2408
  .tds-text-blue-900 {
@@ -2361,7 +2426,7 @@ html {
2361
2426
  }
2362
2427
 
2363
2428
  .tds-text-blue-400 {
2364
- color: #2b70d3;
2429
+ color: #2a6ecf;
2365
2430
  }
2366
2431
 
2367
2432
  .tds-text-blue-300 {
@@ -2377,127 +2442,127 @@ html {
2377
2442
  }
2378
2443
 
2379
2444
  .tds-text-blue-50 {
2380
- color: #e4e9f1;
2445
+ color: #d8dde5;
2381
2446
  }
2382
2447
 
2383
2448
  .tds-text-red-900 {
2384
- color: #450307;
2449
+ color: #350004;
2385
2450
  }
2386
2451
 
2387
2452
  .tds-text-red-800 {
2388
- color: #6a080f;
2453
+ color: #480008;
2389
2454
  }
2390
2455
 
2391
2456
  .tds-text-red-700 {
2392
- color: #950a16;
2457
+ color: #6c0011;
2393
2458
  }
2394
2459
 
2395
2460
  .tds-text-red-600 {
2396
- color: #d6001c;
2461
+ color: #8a0012;
2397
2462
  }
2398
2463
 
2399
2464
  .tds-text-red-500 {
2400
- color: #de2b36;
2465
+ color: #b20018;
2401
2466
  }
2402
2467
 
2403
2468
  .tds-text-red-400 {
2404
- color: #f35359;
2469
+ color: #d1001b;
2405
2470
  }
2406
2471
 
2407
2472
  .tds-text-red-300 {
2408
- color: #f58e90;
2473
+ color: #ea4851;
2409
2474
  }
2410
2475
 
2411
2476
  .tds-text-red-200 {
2412
- color: #f8b6b7;
2477
+ color: #fc8a88;
2413
2478
  }
2414
2479
 
2415
2480
  .tds-text-red-100 {
2416
- color: #fadbdc;
2481
+ color: #ffb9b8;
2417
2482
  }
2418
2483
 
2419
2484
  .tds-text-red-50 {
2420
- color: #fdf4f5;
2485
+ color: #ffdfe3;
2421
2486
  }
2422
2487
 
2423
2488
  .tds-text-green-900 {
2424
- color: #112616;
2489
+ color: #001a12;
2425
2490
  }
2426
2491
 
2427
2492
  .tds-text-green-800 {
2428
- color: #1c3822;
2493
+ color: #00251b;
2429
2494
  }
2430
2495
 
2431
2496
  .tds-text-green-700 {
2432
- color: #2c5234;
2497
+ color: #0a382e;
2433
2498
  }
2434
2499
 
2435
2500
  .tds-text-green-600 {
2436
- color: #386e44;
2501
+ color: #004c3b;
2437
2502
  }
2438
2503
 
2439
2504
  .tds-text-green-500 {
2440
- color: #438151;
2505
+ color: #00664f;
2441
2506
  }
2442
2507
 
2443
2508
  .tds-text-green-400 {
2444
- color: #539e63;
2509
+ color: #008064;
2445
2510
  }
2446
2511
 
2447
2512
  .tds-text-green-300 {
2448
- color: #89b691;
2513
+ color: #009e7e;
2449
2514
  }
2450
2515
 
2451
2516
  .tds-text-green-200 {
2452
- color: #a6d1ad;
2517
+ color: #65bda5;
2453
2518
  }
2454
2519
 
2455
2520
  .tds-text-green-100 {
2456
- color: #caebd0;
2521
+ color: #9bd9c2;
2457
2522
  }
2458
2523
 
2459
2524
  .tds-text-green-50 {
2460
- color: #f1f8f2;
2525
+ color: #d3eee7;
2461
2526
  }
2462
2527
 
2463
- .tds-text-orange-900 {
2464
- color: #331103;
2528
+ .tds-text-yellow-900 {
2529
+ color: #ffdfe3;
2465
2530
  }
2466
2531
 
2467
- .tds-text-orange-800 {
2468
- color: #893b15;
2532
+ .tds-text-yellow-800 {
2533
+ color: #4d260a;
2469
2534
  }
2470
2535
 
2471
- .tds-text-orange-700 {
2472
- color: #c65416;
2536
+ .tds-text-yellow-700 {
2537
+ color: #6b3b10;
2473
2538
  }
2474
2539
 
2475
- .tds-text-orange-600 {
2476
- color: #eb6200;
2540
+ .tds-text-yellow-600 {
2541
+ color: #975717;
2477
2542
  }
2478
2543
 
2479
- .tds-text-orange-500 {
2480
- color: #fa6e23;
2544
+ .tds-text-yellow-500 {
2545
+ color: #b87c14;
2481
2546
  }
2482
2547
 
2483
- .tds-text-orange-400 {
2484
- color: #f98a67;
2548
+ .tds-text-yellow-400 {
2549
+ color: #eaad06;
2485
2550
  }
2486
2551
 
2487
- .tds-text-orange-300 {
2488
- color: #f9a38d;
2552
+ .tds-text-yellow-300 {
2553
+ color: #f1c21b;
2489
2554
  }
2490
2555
 
2491
- .tds-text-orange-200 {
2492
- color: #f9cac0;
2556
+ .tds-text-yellow-200 {
2557
+ color: #f4d65d;
2493
2558
  }
2494
2559
 
2495
- .tds-text-orange-100 {
2496
- color: #fbe3df;
2560
+ .tds-text-yellow-100 {
2561
+ color: #f8e596;
2497
2562
  }
2498
2563
 
2499
- .tds-text-orange-50 {
2500
- color: #fdf5f3;
2564
+ .tds-text-yellow-50 {
2565
+ color: #f9eec3;
2501
2566
  }
2502
2567
 
2503
2568
  .tds-text-cta {
@@ -2517,7 +2582,7 @@ html {
2517
2582
  }
2518
2583
 
2519
2584
  .tds-text-information {
2520
- color: #2b70d3;
2585
+ color: #2a6ecf;
2521
2586
  }
2522
2587
 
2523
2588
  .tds-text-black {
@@ -2533,7 +2598,7 @@ html {
2533
2598
  }
2534
2599
 
2535
2600
  .tds-text-red {
2536
- color: #d6001c;
2601
+ color: #8a0012;
2537
2602
  }
2538
2603
 
2539
2604
  /*
@@ -6530,25 +6595,25 @@ html {
6530
6595
 
6531
6596
  :root,
6532
6597
  .tds-mode-light {
6533
- --tds-banner-text-color: var(--tds-grey-958);
6534
- --tds-banner-x-color: var(--tds-black);
6535
- --tds-banner-background-default: var(--tds-grey-50);
6536
- --tds-banner-prefix-default-color: var(--tds-grey-700);
6537
- --tds-banner-background-info: var(--tds-grey-300);
6598
+ --tds-banner-text-color: var(--tds-grey-950);
6599
+ --tds-banner-x-color: var(--tds-grey-950);
6600
+ --tds-banner-background-default: var(--tds-grey-150);
6601
+ --tds-banner-prefix-default-color: var(--tds-grey-950);
6602
+ --tds-banner-background-info: var(--tds-blue-100);
6538
6603
  --tds-banner-prefix-info-color: var(--tds-blue-400);
6539
- --tds-banner-background-error: var(--tds-red-100);
6540
- --tds-banner-prefix-error-color: var(--tds-red-500);
6604
+ --tds-banner-background-error: var(--tds-red-50);
6605
+ --tds-banner-prefix-error-color: var(--tds-red-400);
6541
6606
  }
6542
6607
 
6543
6608
  .tds-mode-dark {
6544
6609
  --tds-banner-text-color: var(--tds-grey-50);
6545
- --tds-banner-x-color: var(--tds-white);
6546
- --tds-banner-background-default: var(--tds-grey-900);
6547
- --tds-banner-prefix-default-color: var(--tds-grey-400);
6610
+ --tds-banner-x-color: var(--tds-grey-50);
6611
+ --tds-banner-background-default: var(--tds-grey-850);
6612
+ --tds-banner-prefix-default-color: var(--tds-grey-50);
6548
6613
  --tds-banner-background-info: var(--tds-blue-700);
6549
- --tds-banner-prefix-info-color: var(--tds-information);
6614
+ --tds-banner-prefix-info-color: var(--tds-blue-300);
6550
6615
  --tds-banner-background-error: var(--tds-red-900);
6551
- --tds-banner-prefix-error-color: var(--tds-negative);
6616
+ --tds-banner-prefix-error-color: var(--tds-red-300);
6552
6617
  }
6553
6618
 
6554
6619
  :root,
@@ -6577,36 +6642,36 @@ html {
6577
6642
  --tds-block-color: var(--tds-grey-50);
6578
6643
  --tds-block-background: var(--tds-grey-900);
6579
6644
  --tds-block-background-primary: var(--tds-grey-900);
6580
- --tds-block-background-secondary: var(--tds-grey-868);
6645
+ --tds-block-background-secondary: var(--tds-grey-850);
6581
6646
  --tds-block-background-even: var(--tds-grey-900);
6582
6647
  --tds-block-background-odd: var(--tds-grey-868);
6583
6648
  }
6584
6649
  .tds-mode-dark .tds-mode-variant-primary {
6585
6650
  --tds-block-background: var(--tds-grey-900);
6586
6651
  --tds-block-background-even: var(--tds-grey-900);
6587
- --tds-block-background-odd: var(--tds-grey-868);
6652
+ --tds-block-background-odd: var(--tds-grey-850);
6588
6653
  }
6589
6654
  .tds-mode-dark .tds-mode-variant-secondary {
6590
- --tds-block-background: var(--tds-grey-868);
6591
- --tds-block-background-even: var(--tds-grey-868);
6655
+ --tds-block-background: var(--tds-grey-850);
6656
+ --tds-block-background-even: var(--tds-grey-850);
6592
6657
  --tds-block-background-odd: var(--tds-grey-900);
6593
6658
  }
6594
6659
 
6595
6660
  :root,
6596
6661
  .tds-mode-light {
6597
- --tds-breadcrumb-color: var(--tds-grey-900);
6598
- --tds-breadcrumb-color-hover: var(--tds-grey-700);
6599
- --tds-breadcrumb-color-focus: var(--tds-grey-700);
6662
+ --tds-breadcrumb-color: var(--tds-grey-950);
6663
+ --tds-breadcrumb-color-hover: var(--tds-grey-950);
6664
+ --tds-breadcrumb-color-focus: var(--tds-grey-950);
6600
6665
  --tds-breadcrumb-color-current: var(--tds-grey-500);
6601
- --tds-breadcrumb-separator-color: var(--tds-grey-500);
6666
+ --tds-breadcrumb-separator-color: var(--tds-grey-950);
6602
6667
  }
6603
6668
 
6604
6669
  .tds-mode-dark {
6605
- --tds-breadcrumb-color: var(--tds-grey-300);
6606
- --tds-breadcrumb-color-hover: var(--tds-grey-500);
6607
- --tds-breadcrumb-color-focus: var(--tds-grey-500);
6608
- --tds-breadcrumb-color-current: var(--tds-grey-700);
6609
- --tds-breadcrumb-separator-color: var(--tds-grey-700);
6670
+ --tds-breadcrumb-color: var(--tds-white);
6671
+ --tds-breadcrumb-color-hover: var(--tds-white);
6672
+ --tds-breadcrumb-color-focus: var(--tds-white);
6673
+ --tds-breadcrumb-color-current: var(--tds-grey-300);
6674
+ --tds-breadcrumb-separator-color: var(--tds-white);
6610
6675
  }
6611
6676
 
6612
6677
  :root,
@@ -6622,33 +6687,33 @@ html {
6622
6687
  --tds-btn-primary-color-hover: var(--tds-white);
6623
6688
  --tds-btn-primary-color-active: var(--tds-white);
6624
6689
  --tds-btn-primary-color-focus: var(--tds-white);
6625
- --tds-btn-primary-color-disabled: var(--tds-grey-400);
6690
+ --tds-btn-primary-color-disabled: var(--tds-grey-250);
6626
6691
  --tds-btn-primary-border-color: transparent;
6627
6692
  --tds-btn-primary-border-color-hover: transparent;
6628
6693
  --tds-btn-primary-border-color-active: var(--tds-blue-700);
6629
- --tds-btn-primary-border-color-focus: var(--tds-blue-600);
6630
- --tds-btn-primary-outline-color-focus: var(--tds-blue-600);
6694
+ --tds-btn-primary-border-color-focus: var(--tds-blue-700);
6695
+ --tds-btn-primary-outline-color-focus: var(--tds-blue-400);
6631
6696
  --tds-btn-primary-border-color-disabled: transparent;
6632
6697
  /* ICON */
6633
6698
  --tds-btn-icon-primary-fill: var(--tds-grey-50);
6634
6699
  --tds-btn-icon-primary-color: var(--tds-grey-50);
6635
6700
  --tds-btn-secondary-background: transparent;
6636
6701
  --tds-btn-secondary-color: var(--tds-black);
6637
- --tds-btn-secondary-border-color: var(--tds-black-48);
6638
- --tds-btn-secondary-background-hover: var(--tds-blue-500);
6702
+ --tds-btn-secondary-border-color: var(--tds-grey-350);
6703
+ --tds-btn-secondary-background-hover: var(--tds-blue-700);
6639
6704
  --tds-btn-secondary-color-hover: var(--tds-white);
6640
6705
  --tds-btn-secondary-border-color-hover: var(--tds-blue-500);
6641
6706
  --tds-btn-secondary-background-active: transparent;
6642
6707
  --tds-btn-secondary-color-active: var(--tds-black);
6643
- --tds-btn-secondary-border-color-active: var(--tds-black-87);
6644
- --tds-btn-secondary-background-focus: transparent;
6645
- --tds-btn-secondary-color-focus: var(--tds-black);
6646
- --tds-btn-secondary-border-color-focus: var(--tds-blue-400);
6708
+ --tds-btn-secondary-border-color-active: var(--tds-grey-650);
6709
+ --tds-btn-secondary-background-focus: var(--tds-blue-700);
6710
+ --tds-btn-secondary-color-focus: var(--tds-white);
6711
+ --tds-btn-secondary-border-color-focus: var(--tds-white);
6647
6712
  --tds-btn-secondary-outline-color: var(--tds-black-38);
6648
6713
  --tds-btn-secondary-outline-color-focus: var(--tds-blue-400);
6649
6714
  --tds-btn-secondary-background-disabled: transparent;
6650
- --tds-btn-secondary-color-disabled: var(--tds-black-38);
6651
- --tds-btn-secondary-border-color-disabled: var(--tds-black-38);
6715
+ --tds-btn-secondary-color-disabled: var(--tds-grey-250);
6716
+ --tds-btn-secondary-border-color-disabled: var(--tds-grey-250);
6652
6717
  --tds-btn-icon-secondary-color-focus: var(--tds-black);
6653
6718
  --tds-btn-icon-secondary-fill-focus: var(--tds-black);
6654
6719
  --tds-btn-icon-secondary-fill-active: var(--tds-grey-958);
@@ -6661,18 +6726,18 @@ html {
6661
6726
  /* ICON HOVER */
6662
6727
  --tds-btn-icon-secondary-color-active: var(--tds-grey-958);
6663
6728
  --tds-btn-ghost-background: transparent;
6664
- --tds-btn-ghost-color: var(--tds-black);
6729
+ --tds-btn-ghost-color: var(--tds-grey-950);
6665
6730
  --tds-btn-ghost-border-color: transparent;
6666
6731
  --tds-btn-ghost-background-hover: transparent;
6667
- --tds-btn-ghost-color-hover: var(--tds-black);
6668
- --tds-btn-ghost-border-color-hover: var(--tds-black-48);
6732
+ --tds-btn-ghost-color-hover: var(--tds-grey-950);
6733
+ --tds-btn-ghost-border-color-hover: var(--tds-grey-350);
6669
6734
  --tds-btn-ghost-outline-color-hover: var(--tds-black-48);
6670
6735
  --tds-btn-ghost-background-active: transparent;
6671
- --tds-btn-ghost-color-active: var(--tds-black);
6672
- --tds-btn-ghost-border-color-active: var(--tds-black-87);
6736
+ --tds-btn-ghost-color-active: var(--tds-grey-950);
6737
+ --tds-btn-ghost-border-color-active: var(--tds-grey-650);
6673
6738
  --tds-btn-ghost-background-focus: transparent;
6674
- --tds-btn-ghost-color-focus: var(--tds-black);
6675
- --tds-btn-ghost-border-color-focus: var(--tds-blue-400);
6739
+ --tds-btn-ghost-color-focus: var(--tds-grey-950);
6740
+ --tds-btn-ghost-border-color-focus: var(--tds-grey-350);
6676
6741
  --tds-btn-ghost-outline-color-focus: var(--tds-blue-400);
6677
6742
  --tds-btn-ghost-background-disabled: transparent;
6678
6743
  --tds-btn-ghost-color-disabled: var(--tds-black-38);
@@ -6680,20 +6745,20 @@ html {
6680
6745
  /* ICON */
6681
6746
  --tds-btn-icon-ghost-fill: var(--tds-grey-958);
6682
6747
  --tds-btn-icon-ghost-color: var(--tds-grey-958);
6683
- --tds-btn-danger-background: var(--tds-negative);
6748
+ --tds-btn-danger-background: var(--scania-extended-red-400);
6684
6749
  --tds-btn-danger-color: var(--tds-white);
6685
6750
  --tds-btn-danger-border-color: transparent;
6686
- --tds-btn-danger-background-hover: var(--tds-red-600);
6751
+ --tds-btn-danger-background-hover: var(--scania-extended-red-500);
6687
6752
  --tds-btn-danger-color-hover: var(--tds-white);
6688
6753
  --tds-btn-danger-border-color-hover: transparent;
6689
- --tds-btn-danger-background-active: var(--tds-red-700);
6754
+ --tds-btn-danger-background-active: var(--scania-extended-red-600);
6690
6755
  --tds-btn-danger-color-active: var(--tds-white);
6691
6756
  --tds-btn-danger-border-color-active: var(--tds-red-700);
6692
- --tds-btn-danger-background-focus: var(--tds-red-400);
6757
+ --tds-btn-danger-background-focus: var(--scania-extended-red-500);
6693
6758
  --tds-btn-danger-color-focus: var(--tds-white);
6694
- --tds-btn-danger-border-color-focus: var(--tds-red-400);
6695
- --tds-btn-danger-outline-color-focus: var(--tds-red-700);
6696
- --tds-btn-danger-background-disabled-primary: var(--tds-grey-50);
6759
+ --tds-btn-danger-border-color-focus: var(--tds-red-500);
6760
+ --tds-btn-danger-outline-color-focus: var(--tds-blue-400);
6761
+ --tds-btn-danger-background-disabled-primary: var(--scania-neutral-solid-50);
6697
6762
  --tds-btn-danger-background-disabled-secondary: var(--tds-white);
6698
6763
  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
6699
6764
  --tds-btn-danger-color-disabled: var(--tds-black-38);
@@ -6714,36 +6779,38 @@ html {
6714
6779
  }
6715
6780
 
6716
6781
  .tds-mode-dark {
6717
- --tds-btn-primary-background: var(--tds-blue-400);
6718
- --tds-btn-primary-background-hover: var(--tds-blue-500);
6719
- --tds-btn-primary-background-active: var(--tds-blue-300);
6720
- --tds-btn-primary-background-focus: var(--tds-blue-600);
6721
- --tds-btn-primary-border-color-focus: var(--tds-blue-400);
6722
- --tds-btn-primary-outline-color-focus: var(--tds-blue-400);
6782
+ --tds-btn-primary-background: var(--scania-blue-400);
6783
+ --tds-btn-primary-background-hover: var(--scania-blue-500);
6784
+ --tds-btn-primary-background-active: var(--scania-blue-600);
6785
+ --tds-btn-primary-background-focus: var(--scania-blue-500);
6786
+ --tds-btn-primary-border-color-focus: var(--tds-white);
6787
+ --tds-btn-primary-border-color: transparent;
6788
+ --tds-btn-primary-border-color-hover: var(--tds-white);
6789
+ --tds-btn-primary-outline-color-focus: var(--tds-blue-300);
6723
6790
  --tds-btn-primary-background-disabled-primary: var(--tds-grey-900);
6724
- --tds-btn-primary-background-disabled-secondary: var(--tds-grey-868);
6791
+ --tds-btn-primary-background-disabled-secondary: var(--tds-grey-850);
6725
6792
  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
6726
- --tds-btn-primary-color-disabled: var(--tds-white-38);
6793
+ --tds-btn-primary-color-disabled: var(--scania-neutral-transparent-inverse-500);
6727
6794
  /* ICON */
6728
6795
  --tds-btn-icon-primary-fill: var(--tds-grey-50);
6729
6796
  --tds-btn-icon-primary-color: var(--tds-grey-50);
6730
6797
  --tds-btn-secondary-background: transparent;
6731
6798
  --tds-btn-secondary-color: var(--tds-white);
6732
- --tds-btn-secondary-border-color: var(--tds-white-48);
6799
+ --tds-btn-secondary-border-color: var(--scania-neutral-transparent-inverse-400);
6733
6800
  --tds-btn-secondary-background-hover: var(--tds-blue-500);
6734
6801
  --tds-btn-secondary-color-hover: var(--tds-white);
6735
- --tds-btn-secondary-border-color-hover: var(--tds-blue-500);
6736
- --tds-btn-secondary-background-active: transparent;
6802
+ --tds-btn-secondary-border-color-hover: var(--tds-white);
6803
+ --tds-btn-secondary-background-active: var(--scania-blue-600);
6737
6804
  --tds-btn-secondary-color-active: var(--tds-white);
6738
- --tds-btn-secondary-border-color-active: var(--tds-white-87);
6739
- --tds-btn-secondary-background-focus: transparent;
6805
+ --tds-btn-secondary-border-color-active: var(--tds-grey-200);
6806
+ --tds-btn-secondary-background-focus: var(--scania-blue-500);
6740
6807
  --tds-btn-secondary-color-focus: var(--tds-white);
6741
- --tds-btn-secondary-border-color-focus: var(--tds-blue-400);
6742
- --tds-btn-secondary-outline-color-focus: var(--tds-blue-400);
6808
+ --tds-btn-secondary-border-color-focus: var(--tds-white);
6809
+ --tds-btn-secondary-outline-color-focus: var(--tds-blue-300);
6743
6810
  --tds-btn-secondary-outline-color: var(--tds-white);
6744
6811
  --tds-btn-secondary-background-disabled: transparent;
6745
- --tds-btn-secondary-color-disabled: var(--tds-white-38);
6746
- --tds-btn-secondary-border-color-disabled: var(--tds-white-38);
6812
+ --tds-btn-secondary-color-disabled: var(--tds-grey-500);
6813
+ --tds-btn-secondary-border-color-disabled: var(--tds-grey-500);
6747
6814
  --tds-btn-icon-secondary-color-focus: var(--tds-white);
6748
6815
  --tds-btn-icon-secondary-fill-focus: var(--tds-white);
6749
6816
  /* ICON */
@@ -6754,38 +6821,38 @@ html {
6754
6821
  --tds-btn-ghost-border-color: transparent;
6755
6822
  --tds-btn-ghost-background-hover: transparent;
6756
6823
  --tds-btn-ghost-color-hover: var(--tds-white);
6757
- --tds-btn-ghost-border-color-hover: var(--tds-white-48);
6824
+ --tds-btn-ghost-border-color-hover: var(--tds-white);
6758
6825
  --tds-btn-ghost-outline-color-hover: var(--tds-white-48);
6759
6826
  --tds-btn-ghost-background-active: transparent;
6760
6827
  --tds-btn-ghost-color-active: var(--tds-white);
6761
- --tds-btn-ghost-border-color-active: var(--tds-white-87);
6828
+ --tds-btn-ghost-border-color-active: var(--tds-grey-200);
6762
6829
  --tds-btn-ghost-background-focus: transparent;
6763
6830
  --tds-btn-ghost-color-focus: var(--tds-white);
6764
- --tds-btn-ghost-border-color-focus: var(--tds-blue-300);
6831
+ --tds-btn-ghost-border-color-focus: var(--tds-white);
6765
6832
  --tds-btn-ghost-outline-color-focus: var(--tds-blue-300);
6766
6833
  --tds-btn-ghost-background-disabled: transparent;
6767
- --tds-btn-ghost-color-disabled: var(--tds-white-38);
6834
+ --tds-btn-ghost-color-disabled: var(--tds-grey-500);
6768
6835
  --tds-btn-ghost-border-color-disabled: transparent;
6769
6836
  /* ICON */
6770
6837
  --tds-btn-icon-ghost-fill: var(--tds-grey-50);
6771
6838
  --tds-btn-icon-ghost-color: var(--tds-grey-50);
6772
- --tds-btn-danger-background: var(--tds-negative);
6839
+ --tds-btn-danger-background: var(--scania-extended-red-400);
6773
6840
  --tds-btn-danger-color: var(--tds-white);
6774
6841
  --tds-btn-danger-border-color: transparent;
6775
- --tds-btn-danger-background-hover: var(--tds-red-600);
6842
+ --tds-btn-danger-background-hover: var(--scania-extended-red-500);
6776
6843
  --tds-btn-danger-color-hover: var(--tds-white);
6777
6844
  --tds-btn-danger-border-color-hover: transparent;
6778
- --tds-btn-danger-background-active: var(--tds-red-700);
6845
+ --tds-btn-danger-background-active: var(--scania-extended-red-600);
6779
6846
  --tds-btn-danger-color-active: var(--tds-white);
6780
6847
  --tds-btn-danger-border-color-active: transparent;
6781
- --tds-btn-danger-background-focus: var(--tds-red-400);
6848
+ --tds-btn-danger-background-focus: var(--scania-extended-red-500);
6782
6849
  --tds-btn-danger-color-focus: var(--tds-white);
6783
- --tds-btn-danger-border-color-focus: var(--tds-red-400);
6784
- --tds-btn-danger-outline-color-focus: var(--tds-red-700);
6850
+ --tds-btn-danger-border-color-focus: var(--tds-white);
6851
+ --tds-btn-danger-outline-color-focus: var(--tds-blue-300);
6785
6852
  --tds-btn-danger-background-disabled-primary: var(--tds-grey-900);
6786
- --tds-btn-danger-background-disabled-secondary: var(--tds-grey-868);
6853
+ --tds-btn-danger-background-disabled-secondary: var(--tds-grey-850);
6787
6854
  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
6788
- --tds-btn-danger-color-disabled: var(--tds-white-38);
6855
+ --tds-btn-danger-color-disabled: var(--tds-grey-500);
6789
6856
  --tds-btn-danger-border-color-disabled: transparent;
6790
6857
  /* ICON */
6791
6858
  --tds-btn-icon-danger-fill: var(--tds-white);
@@ -6804,15 +6871,15 @@ html {
6804
6871
  .tds-mode-light {
6805
6872
  --tds-card-background: var(--tds-white);
6806
6873
  --tds-card-box-primary: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
6807
- --tds-card-box-secondary: 0 3px 3px rgb(0 0 0 / 10%), 0 -1px 1px rgb(0 0 0 / 5%);
6874
+ --tds-card-box-secondary: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 10%);
6808
6875
  --tds-card-box: var(--tds-card-box-primary);
6809
6876
  --tds-card-box-hover: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 20%);
6810
6877
  --tds-card-box-pressed: 0 -1px 1px rgb(0 0 0 / 5%), 0 1px 3px rgb(0 0 0 / 20%);
6811
- --tds-card-headline: var(--tds-grey-958);
6812
- --tds-card-sub-headline: var(--tds-grey-600);
6813
- --tds-card-body-color: var(--tds-grey-700);
6878
+ --tds-card-headline: var(--tds-grey-950);
6879
+ --tds-card-sub-headline: var(--tds-grey-500);
6880
+ --tds-card-body-color: var(--tds-grey-500);
6814
6881
  --tds-card-divider: var(--tds-grey-300);
6815
- --tds-card-icon-color: var(--tds-grey-300);
6882
+ --tds-card-icon-color: var(--tds-grey-950);
6816
6883
  }
6817
6884
  :root .tds-mode-variant-primary,
6818
6885
  .tds-mode-light .tds-mode-variant-primary {
@@ -6825,18 +6892,18 @@ html {
6825
6892
 
6826
6893
  .tds-mode-dark {
6827
6894
  --tds-card-background-primary: var(--tds-grey-900);
6828
- --tds-card-background-secondary: var(--tds-grey-868);
6895
+ --tds-card-background-secondary: var(--tds-grey-850);
6829
6896
  --tds-card-background: var(--tds-card-background-primary);
6830
- --tds-card-box-primary: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
6897
+ --tds-card-box-primary: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 10%);
6831
6898
  --tds-card-box-secondary: 0 3px 3px rgb(0 0 0 / 10%), 0 -1px 1px rgb(0 0 0 / 5%);
6832
6899
  --tds-card-box: var(--tds-card-box-primary);
6833
6900
  --tds-card-box-hover: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 20%);
6834
6901
  --tds-card-box-pressed: 0 -1px 1px rgb(0 0 0 / 5%), 0 1px 3px rgb(0 0 0 / 20%);
6835
- --tds-card-headline: var(--tds-white);
6836
- --tds-card-sub-headline: var(--tds-grey-400);
6837
- --tds-card-body-color: var(--tds-white);
6902
+ --tds-card-headline: var(--tds-grey-50);
6903
+ --tds-card-sub-headline: var(--tds-grey-300);
6904
+ --tds-card-body-color: var(--tds-grey-300);
6838
6905
  --tds-card-divider: var(--tds-grey-700);
6839
- --tds-card-icon-color: var(--tds-grey-700);
6906
+ --tds-card-icon-color: var(--tds-grey-50);
6840
6907
  }
6841
6908
  .tds-mode-dark .tds-mode-variant-primary {
6842
6909
  --tds-card-box: var(--tds-card-box-primary);
@@ -6849,52 +6916,49 @@ html {
6849
6916
 
6850
6917
  :root,
6851
6918
  .tds-mode-light {
6852
- --tds-checkbox-color: var(--tds-grey-900);
6919
+ --tds-checkbox-color: var(--tds-grey-950);
6853
6920
  --tds-checkbox-interaction-01: var(--tds-blue-800);
6854
6921
  --tds-checkbox-interaction-02: var(--tds-white);
6855
- --tds-checkbox-background-hover: var(--tds-blue-800);
6856
- --tds-checkbox-background-focus: var(--tds-blue-800);
6857
- --tds-checkbox-background-opacity-hover: 0.12;
6858
- --tds-checkbox-background-opacity-focus: 0.24;
6859
- --tds-checkbox-disabled: var(--tds-grey-400);
6922
+ --tds-checkbox-background-hover: var(--tds-grey-350);
6923
+ --tds-checkbox-background-focus: var(--tds-blue-400);
6924
+ --tds-checkbox-disabled: var(--tds-grey-250);
6860
6925
  --tds-checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>");
6861
6926
  --tds-checkbox-background-img-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23ffffff'/></svg>");
6862
- --tds-checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
6863
- --tds-checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23b0b7c4'/></svg>");
6864
- --tds-checkbox-border-color-disabled-after: var(--tds-grey-500);
6865
- --tds-checkbox-color-disabled-after: var(--tds-grey-500);
6927
+ --tds-checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23B4BECD' stroke-linecap='round' stroke-linejoin='round'/></svg>");
6928
+ --tds-checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23B4BECD'/></svg>");
6929
+ --tds-checkbox-border-color-disabled-after: var(--tds-grey-250);
6930
+ --tds-checkbox-color-disabled-after: var(--tds-grey-250);
6866
6931
  }
6867
6932
  :root .tds-mode-dark,
6868
6933
  .tds-mode-light .tds-mode-dark {
6869
- --tds-checkbox-color: var(--tds-white);
6934
+ --tds-checkbox-color: var(--tds-grey-50);
6870
6935
  --tds-checkbox-interaction-01: var(--tds-white);
6871
- --tds-checkbox-interaction-02: var(--tds-grey-958);
6872
- --tds-checkbox-background-hover: var(--tds-grey-600);
6873
- --tds-checkbox-background-focus: var(--tds-grey-600);
6874
- --tds-checkbox-background-opacity-hover: 0.48;
6875
- --tds-checkbox-background-opacity-focus: 0.72;
6876
- --tds-checkbox-disabled: white;
6936
+ --tds-checkbox-interaction-02: var(--tds-grey-950);
6937
+ --tds-checkbox-background-hover: var(--tds-grey-350);
6938
+ --tds-checkbox-background-focus: var(--tds-blue-300);
6939
+ --tds-checkbox-disabled: var(--tds-grey-500);
6877
6940
  --tds-checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
6878
6941
  --tds-checkbox-background-img-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%230D0F13'/></svg>");
6879
- --tds-checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
6880
- --tds-checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%2356657A'/></svg>");
6881
- --tds-checkbox-border-color-disabled-after: var(--tds-grey-700);
6882
- --tds-checkbox-color-disabled-after: var(--tds-grey-700);
6942
+ --tds-checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%235F728C' stroke-linecap='round' stroke-linejoin='round'/></svg>");
6943
+ --tds-checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%235F728C'/></svg>");
6944
+ --tds-checkbox-border-color-disabled-after: var(--tds-grey-500);
6945
+ --tds-checkbox-color-disabled-after: var(--tds-grey-500);
6883
6946
  }
6884
6947
 
6885
6948
  :root,
6886
6949
  .tds-mode-light {
6887
- --tds-chips-color: var(--tds-grey-958);
6950
+ --tds-chips-color: var(--tds-grey-950);
6888
6951
  --tds-chips-color-active: var(--tds-white);
6889
- --tds-chips-background: var(--tds-grey-200);
6890
- --tds-chips-background-active: var(--tds-blue-500);
6891
- --tds-chips-background-disabled: var(--tds-grey-200);
6892
- --tds-chips-text-disabled: var(--tds-grey-500);
6893
- --tds-chips-text-checked-disabled: var(--tds-white-38);
6894
- --tds-chips-background-active-hover: var(--tds-blue-600);
6895
- --tds-chips-background-hover: var(--tds-grey-400);
6896
- --tds-chips-background-focus: var(--tds-grey-50);
6897
- --tds-chips-icon-fill: var(--tds-grey-958);
6952
+ --tds-chips-background: var(--tds-grey-150);
6953
+ --tds-chips-background-active: var(--tds-blue-400);
6954
+ --tds-chips-background-disabled: var(--tds-grey-150);
6955
+ --tds-chips-text-disabled: var(--tds-grey-250);
6956
+ --tds-chips-text-checked-disabled: var(--tds-grey-250);
6957
+ --tds-chips-background-active-disabled: var(--tds-blue-100);
6958
+ --tds-chips-background-active-hover: var(--tds-blue-500);
6959
+ --tds-chips-background-hover: var(--tds-grey-200);
6960
+ --tds-chips-background-focus: var(--tds-grey-200);
6961
+ --tds-chips-icon-fill: var(--tds-grey-950);
6898
6962
  --tds-chips-icon-fill-active: var(--tds-white);
6899
6963
  }
6900
6964
 
@@ -6902,13 +6966,14 @@ html {
6902
6966
  --tds-chips-color: var(--tds-white);
6903
6967
  --tds-chips-color-active: var(--tds-white);
6904
6968
  --tds-chips-background: var(--tds-grey-800);
6905
- --tds-chips-background-disabled: var(--tds-grey-800);
6906
- --tds-chips-text-disabled: var(--tds-white-38);
6907
- --tds-chips-text-checked-disabled: var(--tds-white-38);
6908
- --tds-chips-background-hover: var(--tds-grey-600);
6909
6969
  --tds-chips-background-active: var(--tds-blue-500);
6970
+ --tds-chips-background-disabled: var(--tds-grey-850);
6971
+ --tds-chips-text-disabled: var(--tds-grey-500);
6972
+ --tds-chips-text-checked-disabled: var(--tds-grey-500);
6973
+ --tds-chips-background-active-disabled: var(--tds-blue-700);
6910
6974
  --tds-chips-background-active-hover: var(--tds-blue-300);
6911
- --tds-chips-background-focus: var(--tds-grey-900);
6975
+ --tds-chips-background-hover: var(--tds-grey-750);
6976
+ --tds-chips-background-focus: var(--tds-grey-750);
6912
6977
  --tds-chips-icon-fill: var(--tds-white);
6913
6978
  --tds-chips-icon-fill-active: var(--tds-white);
6914
6979
  }
@@ -6918,13 +6983,13 @@ html {
6918
6983
  /* Table-color */
6919
6984
  --tds-table-color: var(--tds-grey-958);
6920
6985
  /* Table-body-cell */
6921
- --tds-table-body-cell-background-hover: var(--tds-grey-200);
6986
+ --tds-table-body-cell-background-hover: var(--tds-grey-150);
6922
6987
  /* Table-body-row */
6923
6988
  --tds-table-body-row-background: var(--tds-grey-50);
6924
6989
  --tds-table-body-row-background-hover: var(--tds-grey-200);
6925
6990
  --tds-table-zebra-mode-backround: var(--tds-white);
6926
- --tds-table-body-row-background-selected: var(--tds-grey-300);
6927
- --tds-table-body-row-background-selected-hover: var(--tds-grey-400);
6991
+ --tds-table-body-row-background-selected: var(--tds-grey-200);
6992
+ --tds-table-body-row-background-selected-hover: var(--tds-grey-300);
6928
6993
  /* Table input */
6929
6994
  --tds-table-input-background: var(--tds-grey-50);
6930
6995
  --tds-table-input-background-focus: var(--tds-white);
@@ -6942,8 +7007,8 @@ html {
6942
7007
  --tds-table-footer-page-selector-icon-disabled: var(--tds-grey-600);
6943
7008
  --tds-table-footer-btn-hover: var(--tds-grey-300);
6944
7009
  /* Table-header */
6945
- --tds-table-header-background: var(--tds-grey-300);
6946
- --tds-table-header-background-hover: var(--tds-grey-400);
7010
+ --tds-table-header-background: var(--tds-grey-200);
7011
+ --tds-table-header-background-hover: var(--tds-grey-300);
6947
7012
  --tds-table-header-btn-color: var(--tds-grey-958);
6948
7013
  --tds-table-header-btn-background: var(--tds-grey-500);
6949
7014
  --tds-table-header-btn-background-hover: var(--tds-grey-600);
@@ -6976,10 +7041,10 @@ html {
6976
7041
  /* Table-body */
6977
7042
  --tds-table-color: var(--tds-grey-50);
6978
7043
  /* Table-body-cell */
6979
- --tds-table-body-cell-background-hover: var(--tds-grey-846);
7044
+ --tds-table-body-cell-background-hover: var(--tds-grey-800);
6980
7045
  /* Table-body-row */
6981
- --tds-table-body-row-background: var(--tds-grey-868);
6982
- --tds-table-body-row-background-hover: var(--tds-grey-846);
7046
+ --tds-table-body-row-background: var(--tds-grey-850);
7047
+ --tds-table-body-row-background-hover: var(--tds-grey-800);
6983
7048
  --tds-table-zebra-mode-backround: var(--tds-grey-900);
6984
7049
  --tds-table-body-row-background-selected: var(--tds-grey-800);
6985
7050
  --tds-table-body-row-background-selected-hover: var(--tds-grey-700);
@@ -7001,10 +7066,10 @@ html {
7001
7066
  --tds-table-footer-page-selector-icon-disabled: var(--tds-grey-600);
7002
7067
  /* Table-header */
7003
7068
  --tds-table-header-background: var(--tds-grey-800);
7004
- --tds-table-header-background-hover: var(--tds-grey-700);
7069
+ --tds-table-header-background-hover: var(--tds-grey-750);
7005
7070
  --tds-table-header-btn-color: var(--tds-grey-50);
7006
7071
  --tds-table-header-btn-background: var(--tds-grey-600);
7007
- --tds-table-header-btn-background-hover: var(--tds-grey-700);
7072
+ --tds-table-header-btn-background-hover: var(--tds-grey-750);
7008
7073
  --tds-table-header-btn-focus: var(--tds-blue-400);
7009
7074
  /* Table-toolbar */
7010
7075
  --tds-table-toolbar-background: var(--tds-grey-700);
@@ -7016,14 +7081,14 @@ html {
7016
7081
  --tds-table-input-search-icon: var(--tds-grey-600);
7017
7082
  }
7018
7083
  .tds-mode-dark .tds-mode-variant-primary {
7019
- --tds-table-body-row-background: var(--tds-grey-868);
7020
- --tds-table-body-row-background-hover: var(--tds-grey-846);
7084
+ --tds-table-body-row-background: var(--tds-grey-850);
7085
+ --tds-table-body-row-background-hover: var(--tds-grey-800);
7021
7086
  --tds-table-zebra-mode-backround: var(--tds-grey-900);
7022
7087
  }
7023
7088
  .tds-mode-dark .tds-mode-variant-secondary {
7024
7089
  --tds-table-body-row-background: var(--tds-grey-900);
7025
- --tds-table-body-row-background-hover: var(--tds-grey-846);
7026
- --tds-table-zebra-mode-backround: var(--tds-grey-868);
7090
+ --tds-table-body-row-background-hover: var(--tds-grey-850);
7091
+ --tds-table-zebra-mode-backround: var(--tds-grey-850);
7027
7092
  }
7028
7093
 
7029
7094
  :root,
@@ -7045,10 +7110,10 @@ html {
7045
7110
  --tds-datetime-bar: var(--tds-blue-400);
7046
7111
  --tds-datetime-helper: var(--tds-grey-700);
7047
7112
  --tds-datetime-border-bottom-success: var(--tds-grey-800);
7048
- --tds-datetime-border-bottom-error: var(--tds-negative);
7049
- --tds-datetime-helper-error: var(--tds-negative);
7050
- --tds-datetime-bar-error: var(--tds-negative);
7051
- --tds-datetime-icon-error: var(--tds-negative);
7113
+ --tds-datetime-border-bottom-error: var(--tds-red-400);
7114
+ --tds-datetime-helper-error: var(--tds-red-400);
7115
+ --tds-datetime-bar-error: var(--tds-red-400);
7116
+ --tds-datetime-icon-error: var(--tds-red-400);
7052
7117
  --tds-datetime-textcounter: var(--tds-grey-700);
7053
7118
  --tds-datetime-textcounter-divider: var(--tds-grey-500);
7054
7119
  --tds-datetime-ps-color: var(--tds-grey-600);
@@ -7081,10 +7146,10 @@ html {
7081
7146
  --tds-datetime-helper: var(--tds-grey-500);
7082
7147
  --tds-datetime-border-bottom-success: var(--tds-grey-50);
7083
7148
  --tds-datetime-color-success: var(--tds-grey-50);
7084
- --tds-datetime-border-bottom-error: var(--tds-negative);
7085
- --tds-datetime-helper-error: var(--tds-negative);
7086
- --tds-datetime-bar-error: var(--tds-negative);
7087
- --tds-datetime-icon-error: var(--tds-negative);
7149
+ --tds-datetime-border-bottom-error: var(--tds-red-300);
7150
+ --tds-datetime-helper-error: var(--tds-red-300);
7151
+ --tds-datetime-bar-error: var(--tds-red-300);
7152
+ --tds-datetime-icon-error: var(--tds-red-300);
7088
7153
  --tds-datetime-textcounter: var(--tds-grey-700);
7089
7154
  --tds-datetime-textcounter-divider: var(--tds-grey-500);
7090
7155
  --tds-datetime-ps-color: var(--tds-grey-600);
@@ -7098,11 +7163,11 @@ html {
7098
7163
 
7099
7164
  :root,
7100
7165
  .tds-mode-light {
7101
- --tds-divider-background: var(--tds-grey-300);
7166
+ --tds-divider-background: var(--tds-grey-350);
7102
7167
  }
7103
7168
 
7104
7169
  .tds-mode-dark {
7105
- --tds-divider-background: var(--tds-grey-700);
7170
+ --tds-divider-background: var(--tds-grey-500);
7106
7171
  }
7107
7172
 
7108
7173
  .tds-theme-colored {
@@ -7115,19 +7180,20 @@ html {
7115
7180
  --tds-dropdown-border-bottom: var(--tds-grey-600);
7116
7181
  --tds-dropdown-border-bottom-hover: var(--tds-grey-800);
7117
7182
  --tds-dropdown-border-bottom-open: var(--tds-blue-400);
7118
- --tds-dropdown-border-bottom-hover: var(--tds-grey-868);
7119
- --tds-dropdown-value-color: var(--tds-grey-958);
7120
- --tds-dropdown-label-color: var(--tds-grey-958);
7121
- --tds-dropdown-label-inside-color: var(--tds-grey-958);
7183
+ --tds-dropdown-border-bottom-hover: var(--tds-grey-850);
7184
+ --tds-dropdown-value-color: var(--tds-grey-950);
7185
+ --tds-dropdown-label-color: var(--tds-grey-950);
7186
+ --tds-dropdown-label-inside-color: var(--tds-grey-950);
7122
7187
  --tds-dropdown-helper-color: var(--tds-grey-700);
7123
7188
  --tds-dropdown-placeholder-color: var(--tds-grey-500);
7124
7189
  --tds-dropdown-disabled-color: var(--tds-grey-400);
7125
- --tds-dropdown-filter-input-color: var(--tds-grey-958);
7190
+ --tds-dropdown-filter-input-color: var(--tds-grey-950);
7126
7191
  --tds-dropdown-border-radius: var(--tds-spacing-element-4) var(--tds-spacing-element-4) 0 0;
7127
7192
  --tds-dropdown-list-border-radius-down: 0 0 var(--tds-spacing-element-4)
7128
7193
  var(--tds-spacing-element-4);
7129
7194
  --tds-dropdown-list-border-radius-up: var(--tds-spacing-element-4) var(--tds-spacing-element-4) 0
7130
7195
  0;
7196
+ --tds-dropdown-error: var(--tds-red-400);
7131
7197
  }
7132
7198
  :root .tds-mode-variant-primary,
7133
7199
  .tds-mode-light .tds-mode-variant-primary {
@@ -7165,27 +7231,28 @@ html {
7165
7231
  --tds-dropdown-list-border-radius-up: var(--tds-spacing-element-4) var(--tds-spacing-element-4) 0
7166
7232
  0;
7167
7233
  --tds-dropdown-filter-input-color: var(--tds-grey-50);
7234
+ --tds-dropdown-error: var(--tds-red-300);
7168
7235
  }
7169
7236
  .tds-mode-dark .tds-mode-variant-primary {
7170
- --tds-dropdown-bg: var(--tds-grey-868);
7237
+ --tds-dropdown-bg: var(--tds-grey-850);
7171
7238
  }
7172
7239
  .tds-mode-dark .tds-mode-variant-secondary {
7173
7240
  --tds-dropdown-bg: var(--tds-grey-900);
7174
7241
  }
7175
7242
  .tds-mode-dark tds-table-footer {
7176
- --tds-dropdown-bg: var(--tds-grey-868);
7243
+ --tds-dropdown-bg: var(--tds-grey-850);
7177
7244
  --tds-dropdown-list-border-radius-down: var(--tds-spacing-element-4);
7178
7245
  --tds-dropdown-list-border-radius-up: var(--tds-spacing-element-4);
7179
7246
  }
7180
7247
 
7181
7248
  :root,
7182
7249
  .tds-mode-light {
7183
- --tds-dropdown-option-color: var(--tds-grey-868);
7184
- --tds-dropdown-option-color-selected: var(--tds-grey-868);
7250
+ --tds-dropdown-option-color: var(--tds-grey-850);
7251
+ --tds-dropdown-option-color-selected: var(--tds-grey-850);
7185
7252
  --tds-dropdown-option-color-disabled: var(--tds-grey-400);
7186
7253
  --tds-dropdown-option-background: var(--tds-grey-50);
7187
7254
  --tds-dropdown-option-background-hover: var(--tds-grey-100);
7188
- --tds-dropdown-option-background-selected: var(--tds-grey-300);
7255
+ --tds-dropdown-option-background-selected: var(--tds-grey-150);
7189
7256
  --tds-dropdown-option-border: var(--tds-grey-300);
7190
7257
  --tds-dropdown-label-color: var(--tds-grey-958);
7191
7258
  --tds-dropdown-helper-color: var(--tds-grey-700);
@@ -7204,7 +7271,7 @@ html {
7204
7271
  --tds-dropdown-option-color: var(--tds-grey-50);
7205
7272
  --tds-dropdown-option-color-selected: var(--tds-grey-50);
7206
7273
  --tds-dropdown-option-color-disabled: var(--tds-grey-800);
7207
- --tds-dropdown-option-background: var(--tds-grey-868);
7274
+ --tds-dropdown-option-background: var(--tds-grey-850);
7208
7275
  --tds-dropdown-option-background-hover: var(--tds-grey-800);
7209
7276
  --tds-dropdown-option-background-selected: var(--tds-grey-700);
7210
7277
  --tds-dropdown-option-border: var(--tds-grey-800);
@@ -7213,7 +7280,7 @@ html {
7213
7280
  --tds-dropdown-placeholder-color: var(--tds-grey-600);
7214
7281
  }
7215
7282
  .tds-mode-dark .tds-mode-variant-primary {
7216
- --tds-dropdown-option-background: var(--tds-grey-868);
7283
+ --tds-dropdown-option-background: var(--tds-grey-850);
7217
7284
  }
7218
7285
  .tds-mode-dark .tds-mode-variant-secondary {
7219
7286
  --tds-dropdown-option-background: var(--tds-grey-900);
@@ -7224,19 +7291,15 @@ html {
7224
7291
  --tds-footer-top-background-primary: var(--tds-grey-50);
7225
7292
  --tds-footer-top-background-secondary: var(--tds-white);
7226
7293
  --tds-footer-top-background: var(--tds-footer-top-background-primary);
7227
- --tds-footer-top-divider: var(--tds-grey-300);
7228
- --tds-footer-top-links: var(--tds-blue-800);
7229
- --tds-footer-top-links-background-hover: var(--tds-grey-300);
7230
- --tds-footer-top-button-active: var(--tds-grey-300);
7231
- --tds-footer-top-links-opacity: 0.87;
7232
- --tds-footer-top-links-opacity-hover: 0.38;
7233
- --tds-footer-top-title-opacity-mobile: 0.87;
7234
- --tds-footer-top-title-opacity: 0.6;
7294
+ --tds-footer-top-divider: var(--tds-grey-200);
7295
+ --tds-footer-top-links: var(--tds-grey-950);
7296
+ --tds-footer-top-links-header: var(--tds-grey-500);
7297
+ --tds-footer-top-links-background-hover: var(--tds-grey-200);
7298
+ --tds-footer-top-button-active: var(--tds-grey-200);
7235
7299
  --tds-footer-main-background: var(--tds-blue-800);
7236
7300
  --tds-footer-main-links: var(--tds-white);
7237
- --tds-footer-main-divider: var(--tds-blue-600);
7238
- --tds-footer-main-links-opacity: 0.87;
7239
- --tds-footer-main-copyright: rgb(255 255 255 / 60%);
7301
+ --tds-footer-main-divider: var(--tds-blue-700);
7302
+ --tds-footer-main-copyright: var(--tds-grey-300);
7240
7303
  }
7241
7304
  :root .tds-mode-variant-primary,
7242
7305
  .tds-mode-light .tds-mode-variant-primary {
@@ -7248,21 +7311,17 @@ html {
7248
7311
  }
7249
7312
 
7250
7313
  .tds-mode-dark {
7251
- --tds-footer-top-background-primary: var(--tds-grey-868);
7314
+ --tds-footer-top-background-primary: var(--tds-grey-850);
7252
7315
  --tds-footer-top-background: var(--tds-footer-top-background-primary);
7253
- --tds-footer-top-divider: var(--tds-grey-800);
7316
+ --tds-footer-top-divider: var(--tds-grey-600);
7254
7317
  --tds-footer-top-links: var(--tds-grey-50);
7255
- --tds-footer-top-links-background-hover: var(--tds-grey-700);
7256
- --tds-footer-top-button-active: var(--tds-grey-700);
7257
- --tds-footer-top-links-opacity: 0.87;
7258
- --tds-footer-top-links-opacity-hover: 0.38;
7259
- --tds-footer-top-title-opacity-mobile: 0.87;
7260
- --tds-footer-top-title-opacity: 0.6;
7318
+ --tds-footer-top-links-header: var(--tds-grey-300);
7319
+ --tds-footer-top-links-background-hover: var(--tds-grey-600);
7320
+ --tds-footer-top-button-active: var(--tds-grey-600);
7261
7321
  --tds-footer-main-background: var(--tds-blue-900);
7262
7322
  --tds-footer-main-links: var(--tds-white);
7263
- --tds-footer-main-divider: var(--tds-blue-600);
7264
- --tds-footer-main-links-opacity: 0.87;
7265
- --tds-footer-main-copyright: rgb(255 255 255 / 60%);
7323
+ --tds-footer-main-divider: var(--tds-blue-700);
7324
+ --tds-footer-main-copyright: var(--tds-grey-300);
7266
7325
  }
7267
7326
  .tds-mode-dark .tds-mode-variant-primary,
7268
7327
  .tds-mode-dark .tds-mode-variant-secondary {
@@ -7424,7 +7483,7 @@ html {
7424
7483
  --tds-nav-dropdown-item-background: var(--tds-grey-800);
7425
7484
  --tds-nav-dropdown-item-border-color: var(--tds-grey-700);
7426
7485
  --tds-header-nav-item-dropdown-opened-background: var(--tds-grey-958);
7427
- --tds-header-nav-item-dropdown-opened-background-hover: var(--tds-grey-868);
7486
+ --tds-header-nav-item-dropdown-opened-background-hover: var(--tds-grey-800);
7428
7487
  --tds-header-nav-item-dropdown-opened-background-selected: var(--tds-grey-868);
7429
7488
  --tds-header-nav-item-dropdown-opened-background-active: var(--tds-grey-800);
7430
7489
  --tds-header-nav-item-dropdown-opened-color: var(--tds-white);
@@ -7507,16 +7566,20 @@ html {
7507
7566
  --tds-link: var(--tds-blue-400);
7508
7567
  --tds-link-hover: var(--tds-blue-400);
7509
7568
  --tds-link-focus: var(--tds-blue-400);
7510
- --tds-link-visited: var(--tds-blue-700);
7511
- --tds-link-disabled: var(--tds-grey-400);
7569
+ --tds-link-visited: var(--tds-blue-600);
7570
+ --tds-link-disabled: var(--tds-grey-250);
7512
7571
  }
7513
7572
  :root tds-toast,
7514
7573
  .tds-mode-light tds-toast {
7515
- --tds-link: var(--tds-blue-400);
7574
+ --tds-link: var(--tds-grey-50);
7516
7575
  --tds-link-hover: var(--tds-blue-400);
7517
7576
  --tds-link-focus: var(--tds-blue-400);
7518
7577
  --tds-link-visited: var(--tds-blue-700);
7519
- --tds-link-disabled: var(--tds-grey-400);
7578
+ --tds-link-disabled: var(--tds-grey-250);
7579
+ }
7580
+ :root tds-banner,
7581
+ .tds-mode-light tds-banner {
7582
+ --tds-link: var(--tds-grey-950);
7520
7583
  }
7521
7584
 
7522
7585
  .tds-mode-dark {
@@ -7524,14 +7587,17 @@ html {
7524
7587
  --tds-link-hover: var(--tds-blue-300);
7525
7588
  --tds-link-focus: var(--tds-blue-300);
7526
7589
  --tds-link-visited: var(--tds-blue-100);
7527
- --tds-link-disabled: var(--tds-grey-700);
7590
+ --tds-link-disabled: var(--tds-grey-500);
7528
7591
  }
7529
7592
  .tds-mode-dark tds-toast {
7530
- --tds-link: var(--tds-blue-300);
7593
+ --tds-link: var(--tds-grey-950);
7531
7594
  --tds-link-hover: var(--tds-blue-300);
7532
7595
  --tds-link-focus: var(--tds-blue-300);
7533
7596
  --tds-link-visited: var(--tds-blue-100);
7534
- --tds-link-disabled: var(--tds-grey-700);
7597
+ --tds-link-disabled: var(--tds-grey-500);
7598
+ }
7599
+ .tds-mode-dark tds-banner {
7600
+ --tds-link: var(--tds-grey-50);
7535
7601
  }
7536
7602
 
7537
7603
  tds-link tds-icon {
@@ -7562,7 +7628,7 @@ tds-link tds-icon {
7562
7628
 
7563
7629
  .tds-mode-dark {
7564
7630
  --tds-popover-menu-color: var(--tds-grey-50);
7565
- --tds-popover-menu-background: var(--tds-grey-958);
7631
+ --tds-popover-menu-background: var(--tds-grey-850);
7566
7632
  --tds-popover-menu-background-hover: var(--tds-grey-800);
7567
7633
  --tds-popover-menu-divider-color: var(--tds-grey-800);
7568
7634
  --tds-popover-menu-divider-disabled-color: var(--tds-grey-600);
@@ -7571,26 +7637,27 @@ tds-link tds-icon {
7571
7637
 
7572
7638
  :root,
7573
7639
  .tds-mode-light {
7574
- --tds-radio-button-color: var(--tds-grey-958);
7640
+ --tds-radio-button-color: var(--tds-grey-950);
7575
7641
  --tds-radio-button-interaction-01: var(--tds-blue-800);
7576
7642
  --tds-radio-button-interaction-02: var(--tds-white);
7577
- --tds-radio-button-background-hover: var(--tds-blue-800);
7578
- --tds-radio-button-background-focus: var(--tds-blue-800);
7579
- --tds-radio-button-disabled: var(--tds-grey-600);
7580
- --tds-radio-button-border-color-disabled-after: var(--tds-grey-500);
7581
- --tds-radio-button-color-disabled-after: var(--tds-grey-700);
7582
- --tds-radio-button-color-disabled-before: var(--tds-grey-700);
7643
+ --tds-radio-button-background-hover: var(--tds-grey-350);
7644
+ --tds-radio-button-background-focus: var(--tds-blue-400);
7645
+ --tds-radio-button-disabled: var(--tds-grey-250);
7646
+ --tds-radio-button-border-color-disabled-after: var(--tds-grey-250);
7647
+ --tds-radio-button-color-disabled-after: var(--tds-grey-250);
7648
+ --tds-radio-button-color-disabled-before: var(--tds-grey-250);
7583
7649
  }
7584
7650
 
7585
7651
  .tds-mode-dark {
7586
7652
  --tds-radio-button-color: var(--tds-white);
7587
7653
  --tds-radio-button-interaction-01: var(--tds-white);
7588
- --tds-radio-button-interaction-02: var(--tds-grey-958);
7589
- --tds-radio-button-background-hover: var(--tds-white);
7590
- --tds-radio-button-background-focus: var(--tds-white);
7591
- --tds-radio-button-disabled: var(--tds-grey-600);
7592
- --tds-radio-button-border-color-disabled-after: var(--tds-grey-700);
7593
- --tds-radio-button-color-disabled-after: var(--tds-grey-700);
7654
+ --tds-radio-button-interaction-02: var(--tds-grey-950);
7655
+ --tds-radio-button-background-hover: var(--tds-grey-350);
7656
+ --tds-radio-button-background-focus: var(--tds-blue-400);
7657
+ --tds-radio-button-disabled: var(--tds-grey-500);
7658
+ --tds-radio-button-border-color-disabled-after: var(--tds-grey-500);
7659
+ --tds-radio-button-color-disabled-after: var(--tds-grey-500);
7660
+ --tds-radio-button-color-disabled-before: var(--tds-grey-500);
7594
7661
  }
7595
7662
 
7596
7663
  .__tds-side-menu-item-icon {
@@ -7639,19 +7706,19 @@ tds-link tds-icon {
7639
7706
  --tds-sidebar-mobile-menu-btn-icon: var(--tds-white);
7640
7707
  --tds-sidebar-item-state-focus: var(--tds-grey-958);
7641
7708
  --tds-sidebar-item-state-border-focus: var(--tds-blue-400);
7642
- --tds-sidebar-item-state-hover: var(--tds-grey-868);
7709
+ --tds-sidebar-item-state-hover: var(--tds-grey-850);
7643
7710
  --tds-sidebar-item-state-active: var(--tds-grey-800);
7644
7711
  --tds-sidemenu-item-state-active: var(--tds-grey-800);
7645
7712
  --tds-sidebar-item-state-selected: var(--tds-grey-868);
7646
7713
  --tds-sidebar-side-menu: var(--tds-grey-958);
7647
- --tds-sidebar-side-menu-border-right: var(--tds-grey-868);
7714
+ --tds-sidebar-side-menu-border-right: var(--tds-grey-850);
7648
7715
  --tds-sidebar-side-menu-background-cover: var(--tds-grey-958);
7649
- --tds-sidebar-side-menu-mobile-header-border-bottom: var(--tds-grey-868);
7716
+ --tds-sidebar-side-menu-mobile-header-border-bottom: var(--tds-grey-850);
7650
7717
  --tds-sidebar-side-menu-bottom-menu-background: var(--tds-grey-958);
7651
- --tds-sidebar-side-menu-bottom-menu-border-top: var(--tds-grey-868);
7652
- --tds-sidebar-side-menu-single-item-border-bottom: var(--tds-grey-868);
7718
+ --tds-sidebar-side-menu-bottom-menu-border-top: var(--tds-grey-850);
7719
+ --tds-sidebar-side-menu-single-item-border-bottom: var(--tds-grey-850);
7653
7720
  --tds-sidebar-side-menu-single-item-color: var(--tds-grey-50);
7654
- --tds-sidebar-side-menu-single-item-background-selected: var(--tds-grey-868);
7721
+ --tds-sidebar-side-menu-single-item-background-selected: var(--tds-grey-850);
7655
7722
  --tds-sidebar-side-menu-single-item-border-left-selected: var(--tds-blue-400);
7656
7723
  --tds-sidebar-side-menu-single-subitem-color: var(--tds-grey-100);
7657
7724
  --tds-sidebar-side-menu-single-subitem-title-color: var(--tds-grey-50);
@@ -7699,48 +7766,28 @@ tds-link tds-icon {
7699
7766
 
7700
7767
  :root,
7701
7768
  .tds-mode-light {
7702
- --tds-stepper-icon-background: var(--tds-grey-958);
7703
- --tds-stepper-color: var(--tds-grey-958);
7704
- --tds-stepper-icon-step-border-color-warning: var(--tds-negative);
7705
- --tds-stepper-icon-step-border-color-success: var(--tds-positive);
7706
- --tds-stepper-icon-step-background-success: var(--tds-positive);
7707
- --tds-stepper-label-text-color-upcoming: var(--tds-blue-900);
7708
- --tds-stepper-label-border-color-upcoming: var(--tds-blue-900);
7709
- --tds-stepper-label-text-opacity-upcoming: 0.38;
7710
- /* TODO --tds-blue-900 is not defined */
7711
- --tds-stepper-icon-sidetext-background-before: var(--tds-blue-900);
7712
- --tds-stepper-icon-vertical-background-before: var(--tds-blue-900);
7713
- --tds-stepper-icon-step-background-before: var(--tds-blue-900);
7714
- --tds-stepper-icon-step-background-after: var(--tds-blue-900);
7715
- /* INVERTED */
7716
- --tds-stepper-color--inverted: var(--tds-white);
7717
- --tds-stepper-border-color--inverted: var(--tds-white);
7718
- --tds-stepper-background--inverted-before: var(--tds-white);
7719
- --tds-stepper-background--inverted-after: var(--tds-white);
7720
- --tds-stepper-icon-border-color-waring--inverted: var(--tds-negative);
7721
- --tds-stepper-icon-border-color-success-after--inverted: var(--tds-positive);
7769
+ --tds-stepper-background: var(--tds-grey-950);
7770
+ --tds-stepper-icon-background: var(--tds-grey-50);
7771
+ --tds-stepper-color: var(--tds-grey-50);
7772
+ --tds-stepper-icon-step-border-color-warning: var(--tds-red-400);
7773
+ --tds-stepper-icon-step-border-color-success: var(--tds-green-400);
7774
+ --tds-stepper-icon-step-background-success: var(--tds-green-400);
7775
+ --tds-stepper-icon-step-border-color-current: var(--tds-grey-950);
7776
+ --tds-stepper-label-text-color-upcoming: var(--tds-blue-950);
7777
+ --tds-stepper-label-border-color-upcoming: var(--tds-blue-750);
7778
+ --tds-stepper-divider-line: var(--tds-grey-700);
7722
7779
  }
7723
7780
 
7724
7781
  .tds-mode-dark {
7725
- --tds-stepper-icon-background: var(--tds-white);
7726
- --tds-stepper-color: var(--tds-white);
7727
- --tds-stepper-icon-step-border-color-warning: var(--tds-negative);
7728
- --tds-stepper-icon-step-border-color-success: var(--tds-positive);
7729
- --tds-stepper-icon-step-background-success: var(--tds-positive);
7730
- --tds-stepper-icon-sidetext-background-before: var(--tds-white);
7731
- --tds-stepper-icon-vertical-background-before: var(--tds-white);
7732
- --tds-stepper-icon-step-background-before: var(--tds-white);
7733
- --tds-stepper-icon-step-background-after: var(--tds-white);
7734
- --tds-stepper-label-text-color-upcoming: var(--tds-blue-50);
7735
- --tds-stepper-label-border-color-upcoming: var(--tds-blue-50);
7736
- --tds-stepper-label-text-opacity-upcoming: 0.38;
7737
- /* INVERTED */
7738
- --tds-stepper-color--inverted: var(--tds-grey-958);
7739
- --tds-stepper-border-color--inverted: var(--tds-grey-958);
7740
- --tds-stepper-background--inverted-before: var(--tds-grey-958);
7741
- --tds-stepper-background--inverted-after: var(--tds-grey-958);
7742
- --tds-stepper-icon-border-color-waring--inverted: var(--tds-negative);
7743
- --tds-stepper-icon-border-color-success-after--inverted: var(--tds-positive);
7782
+ --tds-stepper-background: var(--tds-grey-150);
7783
+ --tds-stepper-icon-background: var(--tds-grey-150);
7784
+ --tds-stepper-color: var(--tds-grey-950);
7785
+ --tds-stepper-icon-step-border-color-warning: var(--tds-red-300);
7786
+ --tds-stepper-icon-step-border-color-success: var(--tds-green-300);
7787
+ --tds-stepper-icon-step-background-success: var(--tds-green-300);
7788
+ --tds-stepper-label-text-color-upcoming: var(--tds-grey-50);
7789
+ --tds-stepper-label-border-color-upcoming: var(--tds-grey-150);
7790
+ --tds-stepper-divider-line: var(--tds-grey-250);
7744
7791
  }
7745
7792
 
7746
7793
  :root,
@@ -7909,7 +7956,6 @@ tds-link tds-icon {
7909
7956
  --tds-navigation-tabs-tab-color-focus: var(--tds-grey-958);
7910
7957
  --tds-navigation-tabs-tab-color-active: var(--tds-grey-958);
7911
7958
  --tds-navigation-tabs-tab-indicator-background-active: var(--tds-blue-400);
7912
- --tds-navigation-tabs-tab-indicator-background-hover: #d1d5db;
7913
7959
  }
7914
7960
  :root .tds-mode-variant-primary,
7915
7961
  .tds-mode-light .tds-mode-variant-primary {
@@ -7937,7 +7983,6 @@ tds-link tds-icon {
7937
7983
  --tds-navigation-tabs-tab-color-focus: var(--tds-grey-50);
7938
7984
  --tds-navigation-tabs-tab-color-active: var(--tds-grey-50);
7939
7985
  --tds-navigation-tabs-tab-indicator-background-active: var(--tds-blue-300);
7940
- --tds-navigation-tabs-tab-indicator-background-hover: #373d46;
7941
7986
  }
7942
7987
  .tds-mode-dark .tds-mode-variant-primary {
7943
7988
  --tds-navigation-tabs-background: var(--tds-navigation-tabs-tab-background-primary);
@@ -8033,34 +8078,34 @@ tds-link tds-icon {
8033
8078
  --tds-text-field-background-primary: var(--tds-grey-50);
8034
8079
  --tds-text-field-background-secondary: var(--tds-white);
8035
8080
  --tds-text-field-background: var(--tds-text-field-background-primary);
8036
- --tds-text-field-color: var(--tds-grey-600);
8081
+ --tds-text-field-color: var(--tds-grey-950);
8037
8082
  --tds-text-field-placeholder: var(--tds-grey-500);
8038
8083
  --tds-text-field-data-color: var(--tds-grey-958);
8039
8084
  --tds-text-field-background-disabled-primary: var(--tds-grey-50);
8040
8085
  --tds-text-field-background-disabled-secondary: var(--tds-white);
8041
8086
  --tds-text-field-background-disabled: var(--tds-text-field-background-disabled-primary);
8042
- --tds-text-field-color-disabled: var(--tds-grey-400);
8043
- --tds-text-field-placeholder-disabled: var(--tds-grey-400);
8044
- --tds-text-field-label-disabled: var(--tds-grey-400);
8045
- --tds-text-field-ps-color-disabled: var(--tds-grey-400);
8046
- --tds-text-field-helper-disabled: var(--tds-grey-400);
8047
- --tds-text-field-label-color: var(--tds-grey-958);
8048
- --tds-text-field-label-inside-color: var(--tds-grey-958);
8087
+ --tds-text-field-color-disabled: var(--tds-grey-250);
8088
+ --tds-text-field-placeholder-disabled: var(--tds-grey-250);
8089
+ --tds-text-field-label-disabled: var(--tds-grey-250);
8090
+ --tds-text-field-ps-color-disabled: var(--tds-grey-250);
8091
+ --tds-text-field-helper-disabled: var(--tds-grey-250);
8092
+ --tds-text-field-label-color: var(--tds-grey-950);
8093
+ --tds-text-field-label-inside-color: var(--tds-grey-950);
8049
8094
  --tds-text-field-bar: var(--tds-blue-400);
8050
- --tds-text-field-helper: var(--tds-grey-700);
8051
- --tds-text-field-border-bottom-error: var(--tds-negative);
8052
- --tds-text-field-helper-error: var(--tds-negative);
8053
- --tds-text-field-bar-error: var(--tds-negative);
8054
- --tds-text-field-icon-error: var(--tds-negative);
8055
- --tds-text-field-textcounter: var(--tds-grey-700);
8056
- --tds-text-field-textcounter-disabled: var(--tds-grey-400);
8095
+ --tds-text-field-helper: var(--tds-grey-500);
8096
+ --tds-text-field-border-bottom-error: var(--tds-red-400);
8097
+ --tds-text-field-helper-error: var(--tds-red-400);
8098
+ --tds-text-field-bar-error: var(--tds-red-400);
8099
+ --tds-text-field-icon-error: var(--tds-red-400);
8100
+ --tds-text-field-textcounter: var(--tds-grey-500);
8101
+ --tds-text-field-textcounter-disabled: var(--tds-grey-250);
8057
8102
  --tds-text-field-textcounter-divider: var(--tds-grey-500);
8058
- --tds-text-field-ps-color: var(--tds-grey-600);
8059
- --tds-text-field-ps-color-error: var(--tds-negative);
8103
+ --tds-text-field-ps-color: var(--tds-grey-500);
8104
+ --tds-text-field-ps-color-error: var(--tds-red-400);
8060
8105
  --tds-text-field-resize-icon: var(--tds-grey-500);
8061
- --tds-text-field-border-bottom: var(--tds-grey-600);
8062
- --tds-text-field-border-bottom-hover: var(--tds-grey-800);
8063
- --tds-text-field-border-bottom-success: var(--tds-grey-958);
8106
+ --tds-text-field-border-bottom: var(--tds-grey-350);
8107
+ --tds-text-field-border-bottom-hover: var(--tds-grey-250);
8108
+ --tds-text-field-border-bottom-success: var(--tds-grey-850);
8064
8109
  --tds-text-field-border-bottom-readonly: var(--tds-grey-500);
8065
8110
  --tds-text-field-icon-read-only-color: var(--tds-grey-958);
8066
8111
  --tds-text-field-icon-read-only-label-color: var(--tds-grey-958);
@@ -8079,34 +8124,34 @@ tds-link tds-icon {
8079
8124
  .tds-mode-dark {
8080
8125
  --tds-text-field-background-primary: var(--tds-grey-900);
8081
8126
  --tds-text-field-background: var(--tds-text-field-background-primary);
8082
- --tds-text-field-background-secondary: var(--tds-grey-868);
8083
- --tds-text-field-color: var(--tds-grey-600);
8084
- --tds-text-field-placeholder: var(--tds-grey-600);
8127
+ --tds-text-field-background-secondary: var(--tds-grey-850);
8128
+ --tds-text-field-color: var(--tds-grey-50);
8129
+ --tds-text-field-placeholder: var(--tds-grey-300);
8085
8130
  --tds-text-field-data-color: var(--tds-grey-50);
8086
- --tds-text-field-ps-color-disabled: var(--tds-grey-700);
8131
+ --tds-text-field-ps-color-disabled: var(--tds-grey-500);
8087
8132
  --tds-text-field-color-disabled: var(--tds-grey-800);
8088
8133
  --tds-text-field-background-disabled-primary: var(--tds-grey-900);
8089
- --tds-text-field-background-disabled-secondary: var(--tds-grey-868);
8134
+ --tds-text-field-background-disabled-secondary: var(--tds-grey-850);
8090
8135
  --tds-text-field-background-disabled: var(--tds-text-field-background-disabled-primary);
8091
- --tds-text-field-placeholder-disabled: var(--tds-grey-800);
8092
- --tds-text-field-label-disabled: var(--tds-grey-800);
8093
- --tds-text-field-helper-disabled: var(--tds-grey-800);
8136
+ --tds-text-field-placeholder-disabled: var(--tds-grey-500);
8137
+ --tds-text-field-label-disabled: var(--tds-grey-500);
8138
+ --tds-text-field-helper-disabled: var(--tds-grey-500);
8094
8139
  --tds-text-field-label-color: var(--tds-grey-50);
8095
8140
  --tds-text-field-label-inside-color: var(--tds-grey-50);
8096
- --tds-text-field-bar: var(--tds-blue-400);
8097
- --tds-text-field-helper: var(--tds-grey-600);
8098
- --tds-text-field-helper-error: var(--tds-negative);
8099
- --tds-text-field-bar-error: var(--tds-negative);
8100
- --tds-text-field-icon-error: var(--tds-negative);
8101
- --tds-text-field-textcounter: var(--tds-grey-600);
8102
- --tds-text-field-textcounter-disabled: var(--tds-grey-800);
8103
- --tds-text-field-textcounter-divider: var(--tds-grey-800);
8104
- --tds-text-field-ps-color: var(--tds-grey-100);
8141
+ --tds-text-field-bar: var(--tds-blue-300);
8142
+ --tds-text-field-helper: var(--tds-grey-300);
8143
+ --tds-text-field-helper-error: var(--tds-red-300);
8144
+ --tds-text-field-bar-error: var(--tds-red-300);
8145
+ --tds-text-field-icon-error: var(--tds-red-300);
8146
+ --tds-text-field-textcounter: var(--tds-grey-300);
8147
+ --tds-text-field-textcounter-disabled: var(--tds-grey-500);
8148
+ --tds-text-field-textcounter-divider: var(--tds-grey-500);
8149
+ --tds-text-field-ps-color: var(--tds-grey-300);
8105
8150
  --tds-text-field-resize-icon: var(--tds-grey-500);
8106
- --tds-text-field-border-bottom: var(--tds-grey-600);
8107
- --tds-text-field-border-bottom-hover: var(--tds-grey-400);
8151
+ --tds-text-field-border-bottom: var(--tds-grey-850);
8152
+ --tds-text-field-border-bottom-hover: var(--tds-grey-900);
8108
8153
  --tds-text-field-border-bottom-success: var(--tds-grey-50);
8109
- --tds-text-field-border-bottom-error: var(--tds-negative);
8154
+ --tds-text-field-border-bottom-error: var(--tds-red-300);
8110
8155
  --tds-text-field-border-bottom-readonly: var(--tds-grey-600);
8111
8156
  --tds-text-field-icon-read-only-color: var(--tds-grey-100);
8112
8157
  --tds-text-field-icon-read-only-label-color: var(--tds-grey-50);
@@ -8122,73 +8167,83 @@ tds-link tds-icon {
8122
8167
 
8123
8168
  :root,
8124
8169
  .tds-mode-light {
8125
- --tds-toast-background-color: var(--tds-grey-958);
8170
+ --tds-toast-background-color: var(--tds-grey-950);
8126
8171
  --tds-toast-headline-color: var(--tds-grey-50);
8127
8172
  --tds-toast-subheadline-color: var(--tds-grey-50);
8128
- --tds-toast-link-color: var(--tds-blue-300);
8129
- --tds-toast-dissmiss-color: var(--tds-white);
8173
+ --tds-toast-link-color: var(--tds-grey-50);
8174
+ --tds-toast-dissmiss-color: var(--tds-grey-50);
8175
+ --tds-toast-icon-color-error: var(--tds-red-300);
8176
+ --tds-toast-icon-color-success: var(--tds-green-300);
8177
+ --tds-toast-icon-color-warning: var(--tds-yellow-300);
8178
+ --tds-toast-icon-color-info: var(--tds-blue-300);
8130
8179
  }
8131
8180
 
8132
8181
  .tds-mode-dark {
8133
8182
  --tds-toast-background-color: var(--tds-grey-50);
8134
- --tds-toast-headline-color: var(--tds-grey-958);
8135
- --tds-toast-subheadline-color: var(--tds-grey-958);
8136
- --tds-toast-link-color: var(--tds-blue-500);
8137
- --tds-toast-dissmiss-color: var(--tds-black);
8183
+ --tds-toast-headline-color: var(--tds-grey-950);
8184
+ --tds-toast-subheadline-color: var(--tds-grey-950);
8185
+ --tds-toast-link-color: var(--tds-grey-950);
8186
+ --tds-toast-dissmiss-color: var(--tds-grey-950);
8187
+ --tds-toast-icon-color-error: var(--tds-red-400);
8188
+ --tds-toast-icon-color-success: var(--tds-green-400);
8189
+ --tds-toast-icon-color-warning: var(--tds-yellow-400);
8190
+ --tds-toast-icon-color-info: var(--tds-blue-400);
8138
8191
  }
8139
8192
 
8140
8193
  :root,
8141
8194
  .tds-mode-light {
8142
8195
  --tds-toggle-switch: var(--tds-white);
8143
- --tds-toggle-switch-disabled: var(--tds-grey-200);
8144
- --tds-toggle-headline: var(--tds-grey-700);
8145
- --tds-toggle-headline-disabled: var(--tds-grey-600);
8146
- --tds-toggle-on-slider: var(--tds-positive);
8147
- --tds-toggle-on-slider-hover: var(--tds-positive);
8148
- --tds-toggle-on-slider-focus: var(--tds-positive);
8149
- --tds-toggle-on-slider-pressed: var(--tds-positive);
8150
- --tds-toggle-on-border-focus: var(--tds-positive);
8151
- --tds-toggle-on-slider-disabled: var(--tds-grey-400);
8152
- --tds-toggle-slider-disabled: var(--tds-grey-400);
8153
- --tds-toggle-label-color: var(--tds-grey-958);
8154
- --tds-toggle-label-color-disabled: var(--tds-grey-600);
8155
- --tds-toggle-off-slider: var(--tds-grey-500);
8156
- --tds-toggle-off-slider-hover: var(--tds-grey-600);
8157
- --tds-toggle-off-slider-focus: var(--tds-grey-600);
8158
- --tds-toggle-off-slider-pressed: var(--tds-grey-700);
8159
- --tds-toggle-off-border-focus: var(--tds-grey-800);
8196
+ --tds-toggle-switch-disabled: var(--tds-grey-250);
8197
+ --tds-toggle-headline: var(--tds-grey-950);
8198
+ --tds-toggle-headline-disabled: var(--tds-grey-250);
8199
+ --tds-toggle-on-slider: var(--tds-green-300);
8200
+ --tds-toggle-on-slider-hover: var(--tds-green-400);
8201
+ --tds-toggle-on-slider-focus: var(--tds-green-300);
8202
+ --tds-toggle-on-slider-pressed: var(--tds-green-500);
8203
+ --tds-toggle-on-border-focus: var(--tds-white);
8204
+ --tds-toggle-border-outline: var(--tds-blue-400);
8205
+ --tds-toggle-on-slider-disabled: var(--tds-grey-200);
8206
+ --tds-toggle-slider-disabled: var(--tds-grey-200);
8207
+ --tds-toggle-label-color: var(--tds-grey-950);
8208
+ --tds-toggle-label-color-disabled: var(--tds-grey-250);
8209
+ --tds-toggle-off-slider: var(--tds-grey-350);
8210
+ --tds-toggle-off-slider-hover: var(--tds-grey-500);
8211
+ --tds-toggle-off-slider-focus: var(--tds-grey-350);
8212
+ --tds-toggle-off-slider-pressed: var(--tds-grey-600);
8213
+ --tds-toggle-off-border-focus: var(--tds-white);
8160
8214
  }
8161
8215
 
8162
8216
  .tds-mode-dark {
8163
8217
  --tds-toggle-switch: var(--tds-white);
8164
- --tds-toggle-switch-disabled: var(--tds-grey-200);
8165
- --tds-toggle-headline: var(--tds-grey-100);
8166
- --tds-toggle-headline-disabled: var(--tds-grey-700);
8167
- --tds-toggle-on-slider: var(--tds-positive);
8168
- --tds-toggle-on-slider-hover: var(--tds-positive);
8169
- --tds-toggle-on-slider-focus: var(--tds-positive);
8170
- --tds-toggle-on-slider-pressed: var(--tds-positive);
8171
- --tds-toggle-on-border-focus: var(--tds-positive);
8172
- --tds-toggle-on-slider-disabled: var(--tds-grey-800);
8173
- --tds-toggle-slider-disabled: var(--tds-grey-400);
8218
+ --tds-toggle-switch-disabled: var(--tds-grey-500);
8219
+ --tds-toggle-headline: var(--tds-grey-50);
8220
+ --tds-toggle-headline-disabled: var(--tds-grey-500);
8221
+ --tds-toggle-on-slider: var(--tds-green-300);
8222
+ --tds-toggle-on-slider-hover: var(--tds-green-400);
8223
+ --tds-toggle-on-slider-focus: var(--tds-green-300);
8224
+ --tds-toggle-on-slider-pressed: var(--tds-green-500);
8225
+ --tds-toggle-on-border-focus: var(--tds-white);
8226
+ --tds-toggle-border-outline: var(--tds-blue-300);
8227
+ --tds-toggle-on-slider-disabled: var(--tds-grey-600);
8228
+ --tds-toggle-slider-disabled: var(--tds-grey-600);
8174
8229
  --tds-toggle-label-color: var(--tds-grey-50);
8175
- --tds-toggle-label-color-disabled: var(--tds-grey-400);
8176
- --tds-toggle-off-slider: var(--tds-grey-500);
8177
- --tds-toggle-off-slider-hover: var(--tds-grey-600);
8178
- --tds-toggle-off-slider-focus: var(--tds-grey-600);
8179
- --tds-toggle-off-slider-pressed: var(--tds-grey-700);
8180
- --tds-toggle-off-border-focus: var(--tds-grey-800);
8230
+ --tds-toggle-label-color-disabled: var(--tds-grey-500);
8231
+ --tds-toggle-off-slider: var(--tds-grey-350);
8232
+ --tds-toggle-off-slider-hover: var(--tds-grey-500);
8233
+ --tds-toggle-off-slider-focus: var(--tds-grey-350);
8234
+ --tds-toggle-off-slider-pressed: var(--tds-grey-600);
8235
+ --tds-toggle-off-border-focus: var(--tds-white);
8181
8236
  }
8182
8237
 
8183
8238
  :root,
8184
8239
  .tds-mode-light {
8185
- --tds-tooltip-background: var(--tds-grey-800);
8186
- --tds-tooltip-color: var(--tds-white);
8240
+ --tds-tooltip-background: var(--tds-grey-700);
8241
+ --tds-tooltip-color: var(--tds-grey-50);
8187
8242
  }
8188
8243
 
8189
8244
  .tds-mode-dark {
8190
- --tds-tooltip-background: var(--tds-grey-200);
8191
- --tds-tooltip-color: var(--tds-grey-958);
8245
+ --tds-tooltip-background: var(--tds-grey-150);
8246
+ --tds-tooltip-color: var(--tds-grey-950);
8192
8247
  }
8193
8248
 
8194
8249
  :root,