mainstack-design-system 1.4.0 → 1.4.2

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 (576) hide show
  1. package/dist/{DayPickerExtended-BWfjKhHS.js → DayPickerExtended-DDXNs0_e.js} +5 -5
  2. package/dist/{DayPickerExtended-C-mkxMLf.cjs → DayPickerExtended-DV1NlJoN.cjs} +1 -1
  3. package/dist/assets/styles.css +1 -1
  4. package/dist/assets/theme/lightDarkModeTheme.css +569 -502
  5. package/dist/assets/theme/tokenTheme.css +62 -62
  6. package/dist/assets/theme/uiTheme.css +95 -88
  7. package/dist/{format-DoULNQ4B.js → format---Gy3iqv.js} +1 -1
  8. package/dist/{format-Rn-zUAVA.cjs → format-D-2SsLOD.cjs} +1 -1
  9. package/dist/index.d.ts +105 -0
  10. package/dist/mainstack-design-system.cjs +1 -1
  11. package/dist/mainstack-design-system.js +482 -462
  12. package/dist/mainstack-design-system16.cjs +1 -1
  13. package/dist/mainstack-design-system16.js +16 -16
  14. package/dist/mainstack-design-system17.cjs +1 -1
  15. package/dist/mainstack-design-system17.js +5 -5
  16. package/dist/mainstack-design-system18.cjs +1 -1
  17. package/dist/mainstack-design-system18.js +42 -42
  18. package/dist/mainstack-design-system19.cjs +1 -1
  19. package/dist/mainstack-design-system19.js +17 -17
  20. package/dist/mainstack-design-system2.cjs +1 -1
  21. package/dist/mainstack-design-system2.js +1 -1
  22. package/dist/mainstack-design-system20.cjs +1 -1
  23. package/dist/mainstack-design-system20.js +21 -21
  24. package/dist/mainstack-design-system21.cjs +1 -1
  25. package/dist/mainstack-design-system21.js +2 -2
  26. package/dist/mainstack-design-system22.cjs +1 -1
  27. package/dist/mainstack-design-system22.js +2 -2
  28. package/dist/mainstack-design-system23.cjs +1 -1
  29. package/dist/mainstack-design-system23.js +18 -18
  30. package/dist/mainstack-design-system26.cjs +1 -1
  31. package/dist/mainstack-design-system26.js +8 -8
  32. package/dist/mainstack-design-system27.cjs +1 -1
  33. package/dist/mainstack-design-system27.js +28 -25
  34. package/dist/mainstack-design-system28.cjs +1 -1
  35. package/dist/mainstack-design-system28.js +7 -7
  36. package/dist/mainstack-design-system29.cjs +1 -1
  37. package/dist/mainstack-design-system29.js +2 -2
  38. package/dist/mainstack-design-system30.cjs +1 -1
  39. package/dist/mainstack-design-system30.js +2 -2
  40. package/dist/mainstack-design-system31.cjs +1 -1
  41. package/dist/mainstack-design-system31.js +19 -16
  42. package/dist/mainstack-design-system32.cjs +1 -1
  43. package/dist/mainstack-design-system32.js +14 -14
  44. package/dist/mainstack-design-system34.cjs +1 -1
  45. package/dist/mainstack-design-system34.js +5 -5
  46. package/dist/mainstack-design-system35.cjs +1 -1
  47. package/dist/mainstack-design-system35.js +3 -3
  48. package/dist/mainstack-design-system355.cjs +1 -1
  49. package/dist/mainstack-design-system355.js +9 -9
  50. package/dist/mainstack-design-system356.cjs +1 -1
  51. package/dist/mainstack-design-system356.js +14 -14
  52. package/dist/mainstack-design-system357.cjs +1 -1
  53. package/dist/mainstack-design-system357.js +3 -3
  54. package/dist/mainstack-design-system358.cjs +1 -1
  55. package/dist/mainstack-design-system358.js +13 -13
  56. package/dist/mainstack-design-system359.cjs +1 -1
  57. package/dist/mainstack-design-system359.js +8 -8
  58. package/dist/mainstack-design-system36.cjs +1 -1
  59. package/dist/mainstack-design-system36.js +7 -7
  60. package/dist/mainstack-design-system360.cjs +1 -1
  61. package/dist/mainstack-design-system360.js +9 -9
  62. package/dist/mainstack-design-system361.cjs +1 -1
  63. package/dist/mainstack-design-system361.js +1 -1
  64. package/dist/mainstack-design-system362.cjs +1 -1
  65. package/dist/mainstack-design-system362.js +1 -1
  66. package/dist/mainstack-design-system363.cjs +1 -1
  67. package/dist/mainstack-design-system363.js +6 -6
  68. package/dist/mainstack-design-system364.cjs +1 -1
  69. package/dist/mainstack-design-system364.js +26 -26
  70. package/dist/mainstack-design-system365.cjs +1 -1
  71. package/dist/mainstack-design-system365.js +9 -9
  72. package/dist/mainstack-design-system366.cjs +1 -1
  73. package/dist/mainstack-design-system366.js +4 -4
  74. package/dist/mainstack-design-system367.cjs +1 -1
  75. package/dist/mainstack-design-system367.js +5 -5
  76. package/dist/mainstack-design-system368.cjs +1 -1
  77. package/dist/mainstack-design-system368.js +3 -3
  78. package/dist/mainstack-design-system369.cjs +1 -1
  79. package/dist/mainstack-design-system369.js +15 -15
  80. package/dist/mainstack-design-system37.cjs +1 -1
  81. package/dist/mainstack-design-system37.js +7 -7
  82. package/dist/mainstack-design-system370.cjs +1 -1
  83. package/dist/mainstack-design-system370.js +7 -7
  84. package/dist/mainstack-design-system371.cjs +1 -1
  85. package/dist/mainstack-design-system371.js +6 -6
  86. package/dist/mainstack-design-system372.cjs +1 -1
  87. package/dist/mainstack-design-system372.js +6 -6
  88. package/dist/mainstack-design-system373.cjs +1 -1
  89. package/dist/mainstack-design-system373.js +5 -5
  90. package/dist/mainstack-design-system374.cjs +1 -1
  91. package/dist/mainstack-design-system374.js +4 -4
  92. package/dist/mainstack-design-system375.cjs +1 -1
  93. package/dist/mainstack-design-system375.js +4 -4
  94. package/dist/mainstack-design-system376.cjs +1 -1
  95. package/dist/mainstack-design-system376.js +12 -12
  96. package/dist/mainstack-design-system377.cjs +1 -1
  97. package/dist/mainstack-design-system377.js +2 -2
  98. package/dist/mainstack-design-system378.cjs +1 -1
  99. package/dist/mainstack-design-system378.js +2 -2
  100. package/dist/mainstack-design-system379.cjs +1 -1
  101. package/dist/mainstack-design-system379.js +2 -2
  102. package/dist/mainstack-design-system38.cjs +1 -1
  103. package/dist/mainstack-design-system38.js +6 -6
  104. package/dist/mainstack-design-system380.cjs +1 -1
  105. package/dist/mainstack-design-system380.js +5 -5
  106. package/dist/mainstack-design-system381.cjs +1 -1
  107. package/dist/mainstack-design-system381.js +10 -10
  108. package/dist/mainstack-design-system382.cjs +1 -1
  109. package/dist/mainstack-design-system382.js +5 -5
  110. package/dist/mainstack-design-system383.cjs +1 -1
  111. package/dist/mainstack-design-system383.js +27 -24
  112. package/dist/mainstack-design-system384.cjs +1 -1
  113. package/dist/mainstack-design-system384.js +26 -15
  114. package/dist/mainstack-design-system385.cjs +1 -1
  115. package/dist/mainstack-design-system385.js +16 -18
  116. package/dist/mainstack-design-system386.cjs +1 -1
  117. package/dist/mainstack-design-system386.js +16 -12
  118. package/dist/mainstack-design-system387.cjs +1 -1
  119. package/dist/mainstack-design-system387.js +19 -68
  120. package/dist/mainstack-design-system388.cjs +1 -1
  121. package/dist/mainstack-design-system388.js +69 -7
  122. package/dist/mainstack-design-system389.cjs +1 -87
  123. package/dist/mainstack-design-system389.js +7 -238
  124. package/dist/mainstack-design-system39.cjs +1 -1
  125. package/dist/mainstack-design-system39.js +4 -4
  126. package/dist/mainstack-design-system390.cjs +87 -1
  127. package/dist/mainstack-design-system390.js +236 -18
  128. package/dist/mainstack-design-system391.cjs +1 -1
  129. package/dist/mainstack-design-system391.js +20 -5
  130. package/dist/mainstack-design-system392.cjs +1 -2
  131. package/dist/mainstack-design-system392.js +5 -32
  132. package/dist/mainstack-design-system393.cjs +1 -1
  133. package/dist/mainstack-design-system393.js +29 -14
  134. package/dist/mainstack-design-system394.cjs +2 -1
  135. package/dist/mainstack-design-system394.js +17 -7
  136. package/dist/mainstack-design-system395.cjs +1 -1
  137. package/dist/mainstack-design-system395.js +7 -32
  138. package/dist/mainstack-design-system396.cjs +1 -1
  139. package/dist/mainstack-design-system396.js +32 -7
  140. package/dist/mainstack-design-system397.cjs +1 -1
  141. package/dist/mainstack-design-system397.js +7 -16
  142. package/dist/mainstack-design-system398.cjs +1 -1
  143. package/dist/mainstack-design-system398.js +9 -9
  144. package/dist/mainstack-design-system399.cjs +1 -1
  145. package/dist/mainstack-design-system399.js +12 -12
  146. package/dist/mainstack-design-system40.cjs +1 -1
  147. package/dist/mainstack-design-system40.js +6 -6
  148. package/dist/mainstack-design-system400.cjs +1 -1
  149. package/dist/mainstack-design-system400.js +12 -14
  150. package/dist/mainstack-design-system401.cjs +1 -1
  151. package/dist/mainstack-design-system401.js +14 -14
  152. package/dist/mainstack-design-system402.cjs +1 -1
  153. package/dist/mainstack-design-system402.js +15 -18
  154. package/dist/mainstack-design-system403.cjs +1 -1
  155. package/dist/mainstack-design-system403.js +19 -16
  156. package/dist/mainstack-design-system404.cjs +1 -1
  157. package/dist/mainstack-design-system404.js +17 -28
  158. package/dist/mainstack-design-system405.cjs +1 -1
  159. package/dist/mainstack-design-system405.js +30 -14
  160. package/dist/mainstack-design-system406.cjs +1 -1
  161. package/dist/mainstack-design-system406.js +19 -17
  162. package/dist/mainstack-design-system407.cjs +1 -1
  163. package/dist/mainstack-design-system407.js +17 -18
  164. package/dist/mainstack-design-system408.cjs +1 -1
  165. package/dist/mainstack-design-system408.js +14 -16
  166. package/dist/mainstack-design-system409.cjs +1 -1
  167. package/dist/mainstack-design-system409.js +20 -15
  168. package/dist/mainstack-design-system41.cjs +1 -1
  169. package/dist/mainstack-design-system41.js +8 -8
  170. package/dist/mainstack-design-system410.cjs +1 -1
  171. package/dist/mainstack-design-system410.js +15 -16
  172. package/dist/mainstack-design-system411.cjs +1 -1
  173. package/dist/mainstack-design-system411.js +11 -11
  174. package/dist/mainstack-design-system412.cjs +1 -1
  175. package/dist/mainstack-design-system412.js +15 -7
  176. package/dist/mainstack-design-system413.cjs +1 -1
  177. package/dist/mainstack-design-system413.js +10 -20
  178. package/dist/mainstack-design-system414.cjs +1 -1
  179. package/dist/mainstack-design-system414.js +24 -13
  180. package/dist/mainstack-design-system415.cjs +1 -1
  181. package/dist/mainstack-design-system415.js +14 -14
  182. package/dist/mainstack-design-system416.cjs +1 -1
  183. package/dist/mainstack-design-system416.js +20 -18
  184. package/dist/mainstack-design-system417.cjs +1 -1
  185. package/dist/mainstack-design-system417.js +17 -68
  186. package/dist/mainstack-design-system418.cjs +1 -1
  187. package/dist/mainstack-design-system418.js +68 -17
  188. package/dist/mainstack-design-system419.cjs +1 -1
  189. package/dist/mainstack-design-system419.js +15 -15
  190. package/dist/mainstack-design-system420.cjs +1 -1
  191. package/dist/mainstack-design-system420.js +17 -17
  192. package/dist/mainstack-design-system421.cjs +1 -1
  193. package/dist/mainstack-design-system421.js +21 -14
  194. package/dist/mainstack-design-system422.cjs +1 -1
  195. package/dist/mainstack-design-system422.js +14 -38
  196. package/dist/mainstack-design-system423.cjs +1 -1
  197. package/dist/mainstack-design-system423.js +37 -29
  198. package/dist/mainstack-design-system424.cjs +1 -1
  199. package/dist/mainstack-design-system424.js +24 -9
  200. package/dist/mainstack-design-system425.cjs +1 -1
  201. package/dist/mainstack-design-system425.js +10 -11
  202. package/dist/mainstack-design-system426.cjs +1 -1
  203. package/dist/mainstack-design-system426.js +15 -20
  204. package/dist/mainstack-design-system427.cjs +1 -1
  205. package/dist/mainstack-design-system427.js +17 -11
  206. package/dist/mainstack-design-system428.cjs +1 -1
  207. package/dist/mainstack-design-system428.js +11 -17
  208. package/dist/mainstack-design-system429.cjs +1 -1
  209. package/dist/mainstack-design-system429.js +20 -14
  210. package/dist/mainstack-design-system430.cjs +1 -1
  211. package/dist/mainstack-design-system430.js +14 -7
  212. package/dist/mainstack-design-system431.cjs +1 -1
  213. package/dist/mainstack-design-system431.js +7 -7
  214. package/dist/mainstack-design-system432.cjs +1 -1
  215. package/dist/mainstack-design-system432.js +7 -21
  216. package/dist/mainstack-design-system433.cjs +1 -1
  217. package/dist/mainstack-design-system433.js +17 -24
  218. package/dist/mainstack-design-system434.cjs +1 -2
  219. package/dist/mainstack-design-system434.js +24 -45
  220. package/dist/mainstack-design-system435.cjs +1 -1
  221. package/dist/mainstack-design-system435.js +48 -25
  222. package/dist/mainstack-design-system436.cjs +1 -1
  223. package/dist/mainstack-design-system436.js +22 -29
  224. package/dist/mainstack-design-system437.cjs +1 -1
  225. package/dist/mainstack-design-system437.js +28 -15
  226. package/dist/mainstack-design-system438.cjs +1 -1
  227. package/dist/mainstack-design-system438.js +15 -37
  228. package/dist/mainstack-design-system439.cjs +1 -1
  229. package/dist/mainstack-design-system439.js +37 -16
  230. package/dist/mainstack-design-system440.cjs +1 -1
  231. package/dist/mainstack-design-system440.js +17 -36
  232. package/dist/mainstack-design-system441.cjs +1 -1
  233. package/dist/mainstack-design-system441.js +34 -32
  234. package/dist/mainstack-design-system442.cjs +1 -1
  235. package/dist/mainstack-design-system442.js +36 -47
  236. package/dist/mainstack-design-system443.cjs +1 -1
  237. package/dist/mainstack-design-system443.js +45 -38
  238. package/dist/mainstack-design-system444.cjs +1 -1
  239. package/dist/mainstack-design-system444.js +37 -21
  240. package/dist/mainstack-design-system445.cjs +1 -1
  241. package/dist/mainstack-design-system445.js +22 -29
  242. package/dist/mainstack-design-system446.cjs +1 -1
  243. package/dist/mainstack-design-system446.js +29 -16
  244. package/dist/mainstack-design-system447.cjs +1 -1
  245. package/dist/mainstack-design-system447.js +14 -34
  246. package/dist/mainstack-design-system448.cjs +1 -1
  247. package/dist/mainstack-design-system448.js +34 -15
  248. package/dist/mainstack-design-system449.cjs +1 -1
  249. package/dist/mainstack-design-system449.js +17 -36
  250. package/dist/mainstack-design-system450.cjs +1 -1
  251. package/dist/mainstack-design-system450.js +34 -32
  252. package/dist/mainstack-design-system451.cjs +2 -1
  253. package/dist/mainstack-design-system451.js +38 -18
  254. package/dist/mainstack-design-system452.cjs +1 -1
  255. package/dist/mainstack-design-system452.js +15 -15
  256. package/dist/mainstack-design-system453.cjs +1 -1
  257. package/dist/mainstack-design-system453.js +15 -13
  258. package/dist/mainstack-design-system454.cjs +1 -1
  259. package/dist/mainstack-design-system454.js +14 -15
  260. package/dist/mainstack-design-system455.cjs +1 -1
  261. package/dist/mainstack-design-system455.js +15 -14
  262. package/dist/mainstack-design-system456.cjs +1 -1
  263. package/dist/mainstack-design-system456.js +20 -18
  264. package/dist/mainstack-design-system457.cjs +1 -2
  265. package/dist/mainstack-design-system457.js +18 -53
  266. package/dist/mainstack-design-system458.cjs +1 -1
  267. package/dist/mainstack-design-system458.js +28 -30
  268. package/dist/mainstack-design-system459.cjs +1 -1
  269. package/dist/mainstack-design-system459.js +53 -99
  270. package/dist/mainstack-design-system460.cjs +1 -1
  271. package/dist/mainstack-design-system460.js +102 -31
  272. package/dist/mainstack-design-system461.cjs +1 -1
  273. package/dist/mainstack-design-system461.js +30 -71
  274. package/dist/mainstack-design-system462.cjs +1 -1
  275. package/dist/mainstack-design-system462.js +65 -63
  276. package/dist/mainstack-design-system463.cjs +1 -1
  277. package/dist/mainstack-design-system463.js +68 -39
  278. package/dist/mainstack-design-system464.cjs +1 -1
  279. package/dist/mainstack-design-system464.js +38 -74
  280. package/dist/mainstack-design-system465.cjs +2 -1
  281. package/dist/mainstack-design-system465.js +88 -8
  282. package/dist/mainstack-design-system466.cjs +1 -1
  283. package/dist/mainstack-design-system466.js +8 -13
  284. package/dist/mainstack-design-system467.cjs +1 -1
  285. package/dist/mainstack-design-system467.js +13 -17
  286. package/dist/mainstack-design-system468.cjs +1 -1
  287. package/dist/mainstack-design-system468.js +17 -13
  288. package/dist/mainstack-design-system469.cjs +1 -1
  289. package/dist/mainstack-design-system469.js +13 -21
  290. package/dist/mainstack-design-system470.cjs +1 -1
  291. package/dist/mainstack-design-system470.js +16 -22
  292. package/dist/mainstack-design-system471.cjs +1 -1
  293. package/dist/mainstack-design-system471.js +28 -33
  294. package/dist/mainstack-design-system472.cjs +1 -1
  295. package/dist/mainstack-design-system472.js +35 -7
  296. package/dist/mainstack-design-system473.cjs +1 -1
  297. package/dist/mainstack-design-system473.js +7 -85
  298. package/dist/mainstack-design-system474.cjs +1 -1
  299. package/dist/mainstack-design-system474.js +83 -26
  300. package/dist/mainstack-design-system475.cjs +1 -1
  301. package/dist/mainstack-design-system475.js +27 -21
  302. package/dist/mainstack-design-system476.cjs +1 -1
  303. package/dist/mainstack-design-system476.js +17 -17
  304. package/dist/mainstack-design-system477.cjs +1 -2
  305. package/dist/mainstack-design-system477.js +21 -32
  306. package/dist/mainstack-design-system478.cjs +1 -1
  307. package/dist/mainstack-design-system478.js +19 -19
  308. package/dist/mainstack-design-system479.cjs +1 -1
  309. package/dist/mainstack-design-system479.js +24 -36
  310. package/dist/mainstack-design-system480.cjs +1 -1
  311. package/dist/mainstack-design-system480.js +39 -29
  312. package/dist/mainstack-design-system481.cjs +1 -1
  313. package/dist/mainstack-design-system481.js +25 -55
  314. package/dist/mainstack-design-system482.cjs +1 -1
  315. package/dist/mainstack-design-system482.js +56 -24
  316. package/dist/mainstack-design-system483.cjs +1 -1
  317. package/dist/mainstack-design-system483.js +27 -98
  318. package/dist/mainstack-design-system484.cjs +1 -1
  319. package/dist/mainstack-design-system484.js +98 -27
  320. package/dist/mainstack-design-system485.cjs +1 -1
  321. package/dist/mainstack-design-system485.js +21 -21
  322. package/dist/mainstack-design-system486.cjs +1 -1
  323. package/dist/mainstack-design-system486.js +27 -75
  324. package/dist/mainstack-design-system487.cjs +1 -1
  325. package/dist/mainstack-design-system487.js +79 -20
  326. package/dist/mainstack-design-system488.cjs +1 -1
  327. package/dist/mainstack-design-system488.js +19 -125
  328. package/dist/mainstack-design-system489.cjs +1 -1
  329. package/dist/mainstack-design-system489.js +143 -32
  330. package/dist/mainstack-design-system490.cjs +1 -1
  331. package/dist/mainstack-design-system490.js +27 -22
  332. package/dist/mainstack-design-system491.cjs +1 -1
  333. package/dist/mainstack-design-system491.js +29 -28
  334. package/dist/mainstack-design-system492.cjs +1 -1
  335. package/dist/mainstack-design-system492.js +28 -35
  336. package/dist/mainstack-design-system493.cjs +2 -3
  337. package/dist/mainstack-design-system493.js +38 -16
  338. package/dist/mainstack-design-system494.cjs +3 -1
  339. package/dist/mainstack-design-system494.js +14 -15
  340. package/dist/mainstack-design-system495.cjs +1 -1
  341. package/dist/mainstack-design-system495.js +15 -13
  342. package/dist/mainstack-design-system496.cjs +1 -1
  343. package/dist/mainstack-design-system496.js +11 -11
  344. package/dist/mainstack-design-system497.cjs +1 -1
  345. package/dist/mainstack-design-system497.js +11 -11
  346. package/dist/mainstack-design-system498.cjs +1 -1
  347. package/dist/mainstack-design-system498.js +12 -12
  348. package/dist/mainstack-design-system499.cjs +1 -1
  349. package/dist/mainstack-design-system499.js +14 -7
  350. package/dist/mainstack-design-system500.cjs +1 -1
  351. package/dist/mainstack-design-system500.js +8 -14
  352. package/dist/mainstack-design-system501.cjs +1 -1
  353. package/dist/mainstack-design-system501.js +11 -12
  354. package/dist/mainstack-design-system502.cjs +1 -1
  355. package/dist/mainstack-design-system502.js +15 -13
  356. package/dist/mainstack-design-system503.cjs +1 -1
  357. package/dist/mainstack-design-system503.js +13 -14
  358. package/dist/mainstack-design-system504.cjs +1 -1
  359. package/dist/mainstack-design-system504.js +16 -30
  360. package/dist/mainstack-design-system505.cjs +1 -1
  361. package/dist/mainstack-design-system505.js +31 -16
  362. package/dist/mainstack-design-system506.cjs +1 -1
  363. package/dist/mainstack-design-system506.js +16 -35
  364. package/dist/mainstack-design-system507.cjs +1 -1
  365. package/dist/mainstack-design-system507.js +30 -38
  366. package/dist/mainstack-design-system508.cjs +1 -2
  367. package/dist/mainstack-design-system508.js +40 -28
  368. package/dist/mainstack-design-system509.cjs +2 -1
  369. package/dist/mainstack-design-system509.js +28 -93
  370. package/dist/mainstack-design-system510.cjs +1 -1
  371. package/dist/mainstack-design-system510.js +92 -18
  372. package/dist/mainstack-design-system511.cjs +1 -2
  373. package/dist/mainstack-design-system511.js +22 -14
  374. package/dist/mainstack-design-system512.cjs +1 -1
  375. package/dist/mainstack-design-system512.js +13 -37
  376. package/dist/mainstack-design-system513.cjs +1 -1
  377. package/dist/mainstack-design-system513.js +36 -32
  378. package/dist/mainstack-design-system514.cjs +1 -1
  379. package/dist/mainstack-design-system514.js +32 -38
  380. package/dist/mainstack-design-system515.cjs +1 -1
  381. package/dist/mainstack-design-system515.js +34 -41
  382. package/dist/mainstack-design-system516.cjs +1 -1
  383. package/dist/mainstack-design-system516.js +46 -13
  384. package/dist/mainstack-design-system517.cjs +1 -1
  385. package/dist/mainstack-design-system517.js +13 -33
  386. package/dist/mainstack-design-system518.cjs +1 -1
  387. package/dist/mainstack-design-system518.js +32 -38
  388. package/dist/mainstack-design-system519.cjs +1 -1
  389. package/dist/mainstack-design-system519.js +34 -41
  390. package/dist/mainstack-design-system520.cjs +2 -1
  391. package/dist/mainstack-design-system520.js +48 -17
  392. package/dist/mainstack-design-system521.cjs +1 -1
  393. package/dist/mainstack-design-system521.js +12 -17
  394. package/dist/mainstack-design-system522.cjs +1 -1
  395. package/dist/mainstack-design-system522.js +17 -44
  396. package/dist/mainstack-design-system523.cjs +1 -1
  397. package/dist/mainstack-design-system523.js +49 -27
  398. package/dist/mainstack-design-system524.cjs +1 -2
  399. package/dist/mainstack-design-system524.js +26 -24
  400. package/dist/mainstack-design-system525.cjs +1 -1
  401. package/dist/mainstack-design-system525.js +20 -32
  402. package/dist/mainstack-design-system526.cjs +2 -1
  403. package/dist/mainstack-design-system526.js +33 -15
  404. package/dist/mainstack-design-system527.cjs +1 -1
  405. package/dist/mainstack-design-system527.js +13 -13
  406. package/dist/mainstack-design-system528.cjs +1 -1
  407. package/dist/mainstack-design-system528.js +13 -13
  408. package/dist/mainstack-design-system529.cjs +1 -1
  409. package/dist/mainstack-design-system529.js +13 -11
  410. package/dist/mainstack-design-system530.cjs +1 -1
  411. package/dist/mainstack-design-system530.js +13 -12
  412. package/dist/mainstack-design-system531.cjs +1 -2
  413. package/dist/mainstack-design-system531.js +12 -17
  414. package/dist/mainstack-design-system532.cjs +1 -1
  415. package/dist/mainstack-design-system532.js +20 -4
  416. package/dist/mainstack-design-system533.cjs +1 -1
  417. package/dist/mainstack-design-system533.js +4 -8
  418. package/dist/mainstack-design-system534.cjs +1 -1
  419. package/dist/mainstack-design-system534.js +8 -5
  420. package/dist/mainstack-design-system535.cjs +2 -1
  421. package/dist/mainstack-design-system535.js +6 -15
  422. package/dist/mainstack-design-system536.cjs +1 -1
  423. package/dist/mainstack-design-system536.js +14 -13
  424. package/dist/mainstack-design-system537.cjs +1 -2
  425. package/dist/mainstack-design-system537.js +13 -17
  426. package/dist/mainstack-design-system538.cjs +1 -1
  427. package/dist/mainstack-design-system538.js +15 -21
  428. package/dist/mainstack-design-system539.cjs +1 -1
  429. package/dist/mainstack-design-system539.js +16 -9
  430. package/dist/mainstack-design-system540.cjs +1 -1
  431. package/dist/mainstack-design-system540.js +11 -18
  432. package/dist/mainstack-design-system541.cjs +2 -1
  433. package/dist/mainstack-design-system541.js +24 -29
  434. package/dist/mainstack-design-system542.cjs +1 -1
  435. package/dist/mainstack-design-system542.js +29 -15
  436. package/dist/mainstack-design-system543.cjs +1 -1
  437. package/dist/mainstack-design-system543.js +19 -9
  438. package/dist/mainstack-design-system544.cjs +1 -1
  439. package/dist/mainstack-design-system544.js +8 -18
  440. package/dist/mainstack-design-system545.cjs +1 -1
  441. package/dist/mainstack-design-system545.js +18 -15
  442. package/dist/mainstack-design-system546.cjs +1 -1
  443. package/dist/mainstack-design-system546.js +14 -14
  444. package/dist/mainstack-design-system547.cjs +1 -1
  445. package/dist/mainstack-design-system547.js +15 -17
  446. package/dist/mainstack-design-system548.cjs +1 -1
  447. package/dist/mainstack-design-system548.js +16 -10
  448. package/dist/mainstack-design-system549.cjs +1 -1
  449. package/dist/mainstack-design-system549.js +10 -10
  450. package/dist/mainstack-design-system550.cjs +1 -1
  451. package/dist/mainstack-design-system550.js +15 -55
  452. package/dist/mainstack-design-system551.cjs +1 -1
  453. package/dist/mainstack-design-system551.js +55 -35
  454. package/dist/mainstack-design-system552.cjs +1 -1
  455. package/dist/mainstack-design-system552.js +35 -23
  456. package/dist/mainstack-design-system553.cjs +1 -1
  457. package/dist/mainstack-design-system553.js +13 -13
  458. package/dist/mainstack-design-system554.cjs +1 -5
  459. package/dist/mainstack-design-system554.js +19 -50
  460. package/dist/mainstack-design-system555.cjs +5 -1
  461. package/dist/mainstack-design-system555.js +51 -30
  462. package/dist/mainstack-design-system556.cjs +1 -1
  463. package/dist/mainstack-design-system556.js +33 -7
  464. package/dist/mainstack-design-system557.cjs +1 -2
  465. package/dist/mainstack-design-system557.js +18 -83
  466. package/dist/mainstack-design-system558.cjs +1 -1
  467. package/dist/mainstack-design-system558.js +17 -202
  468. package/dist/mainstack-design-system559.cjs +1 -1
  469. package/dist/mainstack-design-system559.js +68 -83
  470. package/dist/mainstack-design-system560.cjs +2 -1
  471. package/dist/mainstack-design-system560.js +14 -67
  472. package/dist/mainstack-design-system561.cjs +1 -1
  473. package/dist/mainstack-design-system561.js +18 -255
  474. package/dist/mainstack-design-system562.cjs +1 -1
  475. package/dist/mainstack-design-system562.js +15 -11
  476. package/dist/mainstack-design-system563.cjs +1 -1
  477. package/dist/mainstack-design-system563.js +14 -4
  478. package/dist/mainstack-design-system564.cjs +1 -1
  479. package/dist/mainstack-design-system564.js +14 -21
  480. package/dist/mainstack-design-system565.cjs +1 -1
  481. package/dist/mainstack-design-system565.js +16 -9
  482. package/dist/mainstack-design-system566.cjs +1 -1
  483. package/dist/mainstack-design-system566.js +6 -42
  484. package/dist/mainstack-design-system567.cjs +2 -1
  485. package/dist/mainstack-design-system567.js +84 -13
  486. package/dist/mainstack-design-system568.cjs +1 -1
  487. package/dist/mainstack-design-system568.js +202 -49
  488. package/dist/mainstack-design-system569.cjs +1 -1
  489. package/dist/mainstack-design-system569.js +82 -18
  490. package/dist/mainstack-design-system570.cjs +1 -1
  491. package/dist/mainstack-design-system570.js +67 -98
  492. package/dist/mainstack-design-system571.cjs +1 -1
  493. package/dist/mainstack-design-system571.js +255 -39
  494. package/dist/mainstack-design-system572.cjs +1 -1
  495. package/dist/mainstack-design-system572.js +11 -14
  496. package/dist/mainstack-design-system573.cjs +1 -1
  497. package/dist/mainstack-design-system573.js +5 -12
  498. package/dist/mainstack-design-system574.cjs +1 -1
  499. package/dist/mainstack-design-system574.js +23 -9
  500. package/dist/mainstack-design-system575.cjs +1 -1
  501. package/dist/mainstack-design-system575.js +9 -47
  502. package/dist/mainstack-design-system576.cjs +1 -1
  503. package/dist/mainstack-design-system576.js +42 -13
  504. package/dist/mainstack-design-system577.cjs +1 -1
  505. package/dist/mainstack-design-system577.js +13 -21
  506. package/dist/mainstack-design-system578.cjs +1 -1
  507. package/dist/mainstack-design-system578.js +49 -13
  508. package/dist/mainstack-design-system579.cjs +1 -1
  509. package/dist/mainstack-design-system579.js +19 -14
  510. package/dist/mainstack-design-system580.cjs +1 -1
  511. package/dist/mainstack-design-system580.js +109 -11
  512. package/dist/mainstack-design-system581.cjs +1 -1
  513. package/dist/mainstack-design-system581.js +38 -13
  514. package/dist/mainstack-design-system582.cjs +1 -1
  515. package/dist/mainstack-design-system582.js +3 -3
  516. package/dist/mainstack-design-system583.cjs +1 -1
  517. package/dist/mainstack-design-system583.js +12 -16
  518. package/dist/mainstack-design-system584.cjs +1 -1
  519. package/dist/mainstack-design-system584.js +9 -15
  520. package/dist/mainstack-design-system585.cjs +1 -1
  521. package/dist/mainstack-design-system585.js +47 -11
  522. package/dist/mainstack-design-system586.cjs +1 -2
  523. package/dist/mainstack-design-system586.js +11 -9
  524. package/dist/mainstack-design-system587.cjs +1 -1
  525. package/dist/mainstack-design-system587.js +21 -24
  526. package/dist/mainstack-design-system588.cjs +1 -1
  527. package/dist/mainstack-design-system588.js +13 -17
  528. package/dist/mainstack-design-system589.cjs +1 -1
  529. package/dist/mainstack-design-system589.js +13 -61
  530. package/dist/mainstack-design-system590.cjs +1 -1
  531. package/dist/mainstack-design-system590.js +12 -18
  532. package/dist/mainstack-design-system591.cjs +1 -1
  533. package/dist/mainstack-design-system591.js +13 -19
  534. package/dist/mainstack-design-system592.cjs +1 -1
  535. package/dist/mainstack-design-system592.js +13 -15
  536. package/dist/mainstack-design-system593.cjs +1 -1
  537. package/dist/mainstack-design-system593.js +15 -15
  538. package/dist/mainstack-design-system594.cjs +1 -1
  539. package/dist/mainstack-design-system594.js +15 -15
  540. package/dist/mainstack-design-system595.cjs +1 -1
  541. package/dist/mainstack-design-system595.js +11 -15
  542. package/dist/mainstack-design-system596.cjs +2 -1
  543. package/dist/mainstack-design-system596.js +11 -21
  544. package/dist/mainstack-design-system597.cjs +1 -2
  545. package/dist/mainstack-design-system597.js +25 -14
  546. package/dist/mainstack-design-system598.cjs +1 -1
  547. package/dist/mainstack-design-system598.js +86 -86
  548. package/dist/mainstack-design-system599.cjs +1 -1
  549. package/dist/mainstack-design-system599.js +36 -36
  550. package/dist/mainstack-design-system600.cjs +1 -1
  551. package/dist/mainstack-design-system600.js +17 -14
  552. package/dist/mainstack-design-system601.cjs +1 -1
  553. package/dist/mainstack-design-system601.js +25 -25
  554. package/dist/mainstack-design-system602.cjs +1 -1
  555. package/dist/mainstack-design-system602.js +3 -3
  556. package/dist/mainstack-design-system603.cjs +2 -2
  557. package/dist/mainstack-design-system603.js +6 -6
  558. package/dist/mainstack-design-system604.cjs +1 -1
  559. package/dist/mainstack-design-system604.js +57 -57
  560. package/dist/mainstack-design-system605.cjs +2 -2
  561. package/dist/mainstack-design-system605.js +4 -4
  562. package/dist/mainstack-design-system606.cjs +2 -2
  563. package/dist/mainstack-design-system606.js +19 -19
  564. package/dist/mainstack-design-system607.cjs +2 -2
  565. package/dist/mainstack-design-system607.js +3 -3
  566. package/dist/mainstack-design-system608.cjs +3 -3
  567. package/dist/mainstack-design-system608.js +5 -5
  568. package/dist/mainstack-design-system609.cjs +1 -1
  569. package/dist/mainstack-design-system609.js +94 -94
  570. package/dist/mainstack-design-system612.cjs +1 -1
  571. package/dist/mainstack-design-system612.js +2 -2
  572. package/dist/mainstack-design-system613.cjs +1 -1
  573. package/dist/mainstack-design-system613.js +2 -2
  574. package/dist/{utils-DrLMGmuk.cjs → utils-KlkRDGof.cjs} +1 -1
  575. package/dist/{utils-DC6U5j2d.js → utils-Opg_zrKx.js} +4 -4
  576. package/package.json +1 -1
package/dist/assets/theme/lightDarkModeTheme.css CHANGED
@@ -4,241 +4,253 @@
4
4
  /*
5
5
  * In comparison to the figma design system, "-content" prefix was intentionally omitted here in the naming convention.
6
6
  * So instead of --color-content-primary- we have --color-primary.
7
+ * Also you don't need to prefix the css variables defined here with `--mds-` cause tailwind does that for you already when you placed the css variable in `@theme`
7
8
  */
8
- --color-primary: var(--color-neutral-400);
9
- --color-secondary: var(--color-neutral-300);
10
- --color-tertiary: var(--color-neutral-275);
11
- --color-accent: var(--color-purple-300);
12
-
13
- --color-accent-hover: var(--color-purple-375);
14
- --color-disabled: var(--color-neutral-250);
15
- --color-success: var(--color-green-400);
16
- --color-success-hover: var(--color-green-450);
17
- --color-error: var(--color-red-375);
18
-
19
- --color-error-hover: var(--color-red-400);
20
- --color-info: var(--color-cobalt-325);
21
- --color-info-hover: var(--color-cobalt-375);
22
- --color-warning: var(--color-lemon-425);
23
- --color-warning-hover: var(--color-lemon-475);
24
-
25
- --color-on-primary: var(--color-neutral-50);
26
- --color-on-primary-disabled: var(--color-neutral-250);
27
- --color-on-secondary: var(--color-neutral-400);
28
- --color-on-secondary-disabled: var(--color-neutral-250);
29
- --color-on-ghost: var(--color-neutral-400);
30
-
31
- --color-on-accent: var(--color-purple-50);
32
- --color-on-success: var(--color-green-50);
33
- --color-on-success-disabled: var(--color-muted-green-325);
34
- --color-on-success-light: var(--color-green-425);
35
- --color-on-success-light-disabled: var(--color-muted-green-325);
36
-
37
- --color-on-warning: var(--color-lemon-125);
38
- --color-on-warning-disabled: var(--color-muted-lemon-325);
39
- --color-on-warning-light: var(--color-lemon-425);
40
- --color-on-warning-light-disabled: var(--color-muted-lemon-325);
41
-
42
- --color-on-error: var(--color-red-75);
43
- --color-on-error-disabled: var(--color-muted-red-325);
44
- --color-on-error-light: var(--color-red-425);
45
- --color-on-error-light-disabled: var(--color-muted-red-325);
46
-
47
- --color-on-info: var(--color-cobalt-75);
48
- --color-on-info-disabled: var(--color-muted-cobalt-325);
49
- --color-on-info-light: var(--color-cobalt-425);
50
- --color-on-info-light-disabled: var(--color-muted-cobalt-325);
51
-
52
- --color-interactive-primary: var(--color-neutral-400);
53
- --color-interactive-primary-hover: var(--color-neutral-450);
54
- --color-interactive-primary-pressed: var(--color-neutral-500);
55
- --color-interactive-primary-disabled: var(--color-neutral-150);
56
-
57
- --color-interactive-secondary: var(--color-neutral-150);
58
- --color-interactive-secondary-hover: var(--color-neutral-175);
59
- --color-interactive-secondary-pressed: var(--color-neutral-200);
60
- --color-interactive-secondary-disabled: var(--color-neutral-150);
61
-
62
- --color-interactive-ghost: var(--color-neutral-50);
63
- --color-interactive-ghost-hover: var(--color-neutral-150);
64
- --color-interactive-ghost-pressed: var(--color-neutral-175);
65
-
66
- --color-interactive-accent: var(--color-purple-300);
67
- --color-interactive-accent-hover: var(--color-purple-350);
68
- --color-interactive-accent-pressed: var(--color-purple-400);
69
- --color-interactive-accent-disabled: var(--color-purple-125);
70
-
71
- --color-interactive-success: var(--color-green-400);
72
- --color-interactive-success-hover: var(--color-green-450);
73
- --color-interactive-success-pressed: var(--color-green-475);
74
- --color-interactive-success-disabled: var(--color-muted-green-225);
75
-
76
- --color-interactive-success-light: var(--color-green-75);
77
- --color-interactive-success-light-hover: var(--color-green-100);
78
- --color-interactive-success-light-pressed: var(--color-green-125);
79
- --color-interactive-success-light-disabled: var(--color-muted-green-225);
80
-
81
- --color-interactive-error: var(--color-red-350);
82
- --color-interactive-error-hover: var(--color-red-375);
83
- --color-interactive-error-pressed: var(--color-red-400);
84
- --color-interactive-error-disabled: var(--color-muted-red-225);
85
-
86
- --color-interactive-error-light: var(--color-red-75);
87
- --color-interactive-error-light-hover: var(--color-red-100);
88
- --color-interactive-error-light-pressed: var(--color-red-125);
89
- --color-interactive-error-light-disabled: var(--color-muted-red-225);
90
-
91
- --color-interactive-warning: var(--color-lemon-425);
92
- --color-interactive-warning-hover: var(--color-lemon-450);
93
- --color-interactive-warning-pressed: var(--color-lemon-475);
94
- --color-interactive-warning-disabled: var(--color-muted-lemon-225);
95
-
96
- --color-interactive-warning-light: var(--color-lemon-75);
97
- --color-interactive-warning-light-hover: var(--color-lemon-100);
98
- --color-interactive-warning-light-pressed: var(--color-lemon-125);
99
- --color-interactive-warning-light-disabled: var(--color-muted-lemon-200);
100
-
101
- --color-interactive-info: var(--color-cobalt-375);
102
- --color-interactive-info-hover: var(--color-cobalt-425);
103
- --color-interactive-info-pressed: var(--color-cobalt-450);
104
- --color-interactive-info-disabled: var(--color-muted-cobalt-225);
105
-
106
- --color-interactive-info-light: var(--color-cobalt-75);
107
- --color-interactive-info-light-hover: var(--color-cobalt-100);
108
- --color-interactive-info-light-pressed: var(--color-cobalt-125);
109
- --color-interactive-info-light-disabled: var(--color-muted-cobalt-225);
110
-
111
- --color-surface-neutral-l1: var(--color-neutral-50);
112
- --color-surface-neutral-l2: var(--color-neutral-75);
113
- --color-surface-neutral-l3: var(--color-neutral-100);
114
- --color-surface-neutral-l4: var(--color-neutral-125);
115
- --color-surface-neutral-l5: var(--color-neutral-150);
116
-
117
- --color-surface-neutral-invert-l1: var(--color-neutral-500);
118
- --color-surface-neutral-invert-l2: var(--color-neutral-475);
119
- --color-surface-neutral-invert-l3: var(--color-neutral-450);
120
- --color-surface-neutral-invert-l4: var(--color-neutral-425);
121
- --color-surface-neutral-invert-l5: var(--color-neutral-400);
122
-
123
- --color-surface-accent-l1: var(--color-purple-50);
124
- --color-surface-accent-l2: var(--color-purple-75);
125
- --color-surface-accent-l3: var(--color-purple-100);
126
- --color-surface-accent-l4: var(--color-purple-125);
127
- --color-surface-accent-l5: var(--color-purple-150);
128
-
129
- --color-surface-accent-invert-l1: var(--color-purple-500);
130
- --color-surface-accent-invert-l2: var(--color-purple-475);
131
- --color-surface-accent-invert-l3: var(--color-purple-450);
132
- --color-surface-accent-invert-l4: var(--color-purple-425);
133
- --color-surface-accent-invert-l5: var(--color-purple-400);
134
-
135
- --color-surface-success-l1: var(--color-green-50);
136
- --color-surface-success-l2: var(--color-green-75);
137
- --color-surface-success-l3: var(--color-green-100);
138
- --color-surface-success-l4: var(--color-green-125);
139
- --color-surface-success-l5: var(--color-green-150);
140
-
141
- --color-surface-success-invert-l1: var(--color-green-500);
142
- --color-surface-success-invert-l2: var(--color-green-475);
143
- --color-surface-success-invert-l3: var(--color-green-450);
144
- --color-surface-success-invert-l4: var(--color-green-425);
145
- --color-surface-success-invert-l5: var(--color-green-400);
146
-
147
- --color-surface-error-l1: var(--color-red-50);
148
- --color-surface-error-l2: var(--color-red-75);
149
- --color-surface-error-l3: var(--color-red-100);
150
- --color-surface-error-l4: var(--color-red-125);
151
- --color-surface-error-l5: var(--color-red-150);
152
-
153
- --color-surface-error-invert-l1: var(--color-red-500);
154
- --color-surface-error-invert-l2: var(--color-red-475);
155
- --color-surface-error-invert-l3: var(--color-red-450);
156
- --color-surface-error-invert-l4: var(--color-red-425);
157
- --color-surface-error-invert-l5: var(--color-red-400);
158
-
159
- --color-surface-info-l1: var(--color-cobalt-50);
160
- --color-surface-info-l2: var(--color-cobalt-75);
161
- --color-surface-info-l3: var(--color-cobalt-100);
162
- --color-surface-info-l4: var(--color-cobalt-125);
163
- --color-surface-info-l5: var(--color-cobalt-125);
164
-
165
- --color-surface-info-invert-l1: var(--color-cobalt-500);
166
- --color-surface-info-invert-l2: var(--color-cobalt-475);
167
- --color-surface-info-invert-l3: var(--color-cobalt-450);
168
- --color-surface-info-invert-l4: var(--color-cobalt-425);
169
- --color-surface-info-invert-l5: var(--color-cobalt-400);
170
-
171
- --color-surface-warning-l1: var(--color-lemon-50);
172
- --color-surface-warning-l2: var(--color-lemon-75);
173
- --color-surface-warning-l3: var(--color-lemon-100);
174
- --color-surface-warning-l4: var(--color-lemon-125);
175
- --color-surface-warning-l5: var(--color-lemon-150);
176
-
177
- --color-surface-warning-invert-l1: var(--color-lemon-500);
178
- --color-surface-warning-invert-l2: var(--color-lemon-475);
179
- --color-surface-warning-invert-l3: var(--color-lemon-450);
180
- --color-surface-warning-invert-l4: var(--color-lemon-425);
181
- --color-surface-warning-invert-l5: var(--color-lemon-400);
182
-
183
- --color-border-interactive-success: var(--color-green-125);
184
- --color-border-interactive-neutral: var(--color-neutral-150);
185
- --color-border-interactive-neutral-hover: var(--color-neutral-175);
186
- --color-border-interactive-neutral-pressed: var(--color-neutral-375);
187
- --color-border-interactive-neutral-disabled: var(--color-neutral-150);
188
- --color-border-interactive-neutral-active: var(--color-neutral-400);
189
- --color-border-interactive-neutral-active-hover: var(--color-neutral-450);
190
- --color-border-interactive-neutral-active-pressed: var(--color-neutral-500);
191
- --color-border-interactive-neutral-active-disabled: var(--color-neutral-375);
192
-
193
- --color-border-interactive-neutral-inverse: var(--color-neutral-450);
194
- --color-border-interactive-neutral-inverse-hover: var(--color-neutral-275);
195
- --color-border-interactive-neutral-inverse-pressed: var(--color-neutral-200);
196
- --color-border-interactive-neutral-inverse-disabled: var(--color-neutral-400);
197
-
198
- --color-border-interactive-success: var(--color-green-125);
199
- --color-border-interactive-success-hover: var(--color-green-250);
200
- --color-border-interactive-success-pressed: var(--color-green-375);
201
- --color-border-interactive-success-disabled: var(--color-muted-green-75);
202
-
203
- --color-border-interactive-error: var(--color-red-125);
204
- --color-border-interactive-error-hover: var(--color-red-250);
205
- --color-border-interactive-error-pressed: var(--color-red-375);
206
- --color-border-interactive-error-disabled: var(--color-muted-red-75);
207
-
208
- --color-border-interactive-warning: var(--color-lemon-125);
209
- --color-border-interactive-warning-hover: var(--color-lemon-250);
210
- --color-border-interactive-warning-pressed: var(--color-lemon-375);
211
- --color-border-interactive-warning-disabled: var(--color-muted-lemon-75);
212
-
213
- --color-border-interactive-info: var(--color-cobalt-125);
214
- --color-border-interactive-info-hover: var(--color-cobalt-250);
215
- --color-border-interactive-info-pressed: var(--color-cobalt-375);
216
- --color-border-interactive-info-disabled: var(--color-cobalt-75);
217
-
218
- --color-border-surface-neutral-l1: var(--color-neutral-175);
219
- --color-border-surface-neutral-l2: var(--color-neutral-200);
220
-
221
- --color-border-surface-neutral-inverse-l1: var(--color-neutral-400);
222
- --color-border-surface-neutral-inverse-l2: var(--color-neutral-500);
223
-
224
- --color-border-surface-success-l1: var(--color-green-275);
225
- --color-border-surface-success-l2: var(--color-green-325);
226
-
227
- --color-border-surface-error-l1: var(--color-red-225);
228
- --color-border-surface-error-l2: var(--color-red-275);
229
-
230
- --color-border-surface-warning-l1: var(--color-lemon-275);
231
- --color-border-surface-warning-l2: var(--color-lemon-325);
232
-
233
- --color-border-surface-info-subtle: var(--color-cobalt-275);
234
- --color-border-surface-info-strong: var(--color-cobalt-325);
235
-
236
- --color-border-surface-spread-neutral: var(--color-neutral-225);
237
- --color-border-surface-spread-success: var(--color-green-175);
238
- --color-border-surface-spread-error: var(--color-red-175);
239
- --color-border-surface-spread-warning: var(--color-lemon-175);
240
- --color-border-surface-spread-info: var(--color-cobalt-175);
241
- --color-border-surface-spread-focus: var(--color-cobalt-200);
9
+
10
+ --color-primary: var(--mds-color-neutral-400);
11
+ --color-secondary: var(--mds-color-neutral-300);
12
+ --color-tertiary: var(--mds-color-neutral-275);
13
+ --color-accent: var(--mds-color-purple-300);
14
+
15
+ --color-accent-hover: var(--mds-color-purple-375);
16
+ --color-disabled: var(--mds-color-neutral-250);
17
+ --color-success: var(--mds-color-green-400);
18
+ --color-success-hover: var(--mds-color-green-450);
19
+ --color-error: var(--mds-color-red-375);
20
+
21
+ --color-error-hover: var(--mds-color-red-400);
22
+ --color-info: var(--mds-color-cobalt-325);
23
+ --color-info-hover: var(--mds-color-cobalt-375);
24
+ --color-warning: var(--mds-color-lemon-425);
25
+ --color-warning-hover: var(--mds-color-lemon-475);
26
+
27
+ --color-on-primary: var(--mds-color-neutral-50);
28
+ --color-on-primary-disabled: var(--mds-color-neutral-250);
29
+ --color-on-secondary: var(--mds-color-neutral-400);
30
+ --color-on-secondary-disabled: var(--mds-color-neutral-250);
31
+ --color-on-ghost: var(--mds-color-neutral-400);
32
+
33
+ --color-on-accent: var(--mds-color-purple-50);
34
+ --color-on-success: var(--mds-color-green-50);
35
+ --color-on-success-disabled: var(--mds-color-muted-green-325);
36
+ --color-on-success-light: var(--mds-color-green-425);
37
+ --color-on-success-light-disabled: var(--mds-color-muted-green-325);
38
+
39
+ --color-on-warning: var(--mds-color-lemon-125);
40
+ --color-on-warning-disabled: var(--mds-color-muted-lemon-325);
41
+ --color-on-warning-light: var(--mds-color-lemon-425);
42
+ --color-on-warning-light-disabled: var(--mds-color-muted-lemon-325);
43
+
44
+ --color-on-error: var(--mds-color-red-75);
45
+ --color-on-error-disabled: var(--mds-color-muted-red-325);
46
+ --color-on-error-light: var(--mds-color-red-425);
47
+ --color-on-error-light-disabled: var(--mds-color-muted-red-325);
48
+
49
+ --color-on-info: var(--mds-color-cobalt-75);
50
+ --color-on-info-disabled: var(--mds-color-muted-cobalt-325);
51
+ --color-on-info-light: var(--mds-color-cobalt-425);
52
+ --color-on-info-light-disabled: var(--mds-color-muted-cobalt-325);
53
+
54
+ --color-interactive-primary: var(--mds-color-neutral-400);
55
+ --color-interactive-primary-hover: var(--mds-color-neutral-450);
56
+ --color-interactive-primary-pressed: var(--mds-color-neutral-500);
57
+ --color-interactive-primary-disabled: var(--mds-color-neutral-150);
58
+
59
+ --color-interactive-secondary: var(--mds-color-neutral-150);
60
+ --color-interactive-secondary-hover: var(--mds-color-neutral-175);
61
+ --color-interactive-secondary-pressed: var(--mds-color-neutral-200);
62
+ --color-interactive-secondary-disabled: var(--mds-color-neutral-150);
63
+
64
+ --color-interactive-ghost: var(--mds-color-neutral-50);
65
+ --color-interactive-ghost-hover: var(--mds-color-neutral-150);
66
+ --color-interactive-ghost-pressed: var(--mds-color-neutral-175);
67
+
68
+ --color-interactive-accent: var(--mds-color-purple-300);
69
+ --color-interactive-accent-hover: var(--mds-color-purple-350);
70
+ --color-interactive-accent-pressed: var(--mds-color-purple-400);
71
+ --color-interactive-accent-disabled: var(--mds-color-purple-125);
72
+
73
+ --color-interactive-success: var(--mds-color-green-400);
74
+ --color-interactive-success-hover: var(--mds-color-green-450);
75
+ --color-interactive-success-pressed: var(--mds-color-green-475);
76
+ --color-interactive-success-disabled: var(--mds-color-muted-green-225);
77
+
78
+ --color-interactive-success-light: var(--mds-color-green-75);
79
+ --color-interactive-success-light-hover: var(--mds-color-green-100);
80
+ --color-interactive-success-light-pressed: var(--mds-color-green-125);
81
+ --color-interactive-success-light-disabled: var(--mds-color-muted-green-225);
82
+
83
+ --color-interactive-error: var(--mds-color-red-350);
84
+ --color-interactive-error-hover: var(--mds-color-red-375);
85
+ --color-interactive-error-pressed: var(--mds-color-red-400);
86
+ --color-interactive-error-disabled: var(--mds-color-muted-red-225);
87
+
88
+ --color-interactive-error-light: var(--mds-color-red-75);
89
+ --color-interactive-error-light-hover: var(--mds-color-red-100);
90
+ --color-interactive-error-light-pressed: var(--mds-color-red-125);
91
+ --color-interactive-error-light-disabled: var(--mds-color-muted-red-225);
92
+
93
+ --color-interactive-warning: var(--mds-color-lemon-425);
94
+ --color-interactive-warning-hover: var(--mds-color-lemon-450);
95
+ --color-interactive-warning-pressed: var(--mds-color-lemon-475);
96
+ --color-interactive-warning-disabled: var(--mds-color-muted-lemon-225);
97
+
98
+ --color-interactive-warning-light: var(--mds-color-lemon-75);
99
+ --color-interactive-warning-light-hover: var(--mds-color-lemon-100);
100
+ --color-interactive-warning-light-pressed: var(--mds-color-lemon-125);
101
+ --color-interactive-warning-light-disabled: var(--mds-color-muted-lemon-200);
102
+
103
+ --color-interactive-info: var(--mds-color-cobalt-375);
104
+ --color-interactive-info-hover: var(--mds-color-cobalt-425);
105
+ --color-interactive-info-pressed: var(--mds-color-cobalt-450);
106
+ --color-interactive-info-disabled: var(--mds-color-muted-cobalt-225);
107
+
108
+ --color-interactive-info-light: var(--mds-color-cobalt-75);
109
+ --color-interactive-info-light-hover: var(--mds-color-cobalt-100);
110
+ --color-interactive-info-light-pressed: var(--mds-color-cobalt-125);
111
+ --color-interactive-info-light-disabled: var(--mds-color-muted-cobalt-225);
112
+
113
+ --color-surface-neutral-l1: var(--mds-color-neutral-50);
114
+ --color-surface-neutral-l2: var(--mds-color-neutral-75);
115
+ --color-surface-neutral-l3: var(--mds-color-neutral-100);
116
+ --color-surface-neutral-l4: var(--mds-color-neutral-125);
117
+ --color-surface-neutral-l5: var(--mds-color-neutral-150);
118
+
119
+ --color-surface-neutral-invert-l1: var(--mds-color-neutral-500);
120
+ --color-surface-neutral-invert-l2: var(--mds-color-neutral-475);
121
+ --color-surface-neutral-invert-l3: var(--mds-color-neutral-450);
122
+ --color-surface-neutral-invert-l4: var(--mds-color-neutral-425);
123
+ --color-surface-neutral-invert-l5: var(--mds-color-neutral-400);
124
+
125
+ --color-surface-accent-l1: var(--mds-color-purple-50);
126
+ --color-surface-accent-l2: var(--mds-color-purple-75);
127
+ --color-surface-accent-l3: var(--mds-color-purple-100);
128
+ --color-surface-accent-l4: var(--mds-color-purple-125);
129
+ --color-surface-accent-l5: var(--mds-color-purple-150);
130
+
131
+ --color-surface-accent-invert-l1: var(--mds-color-purple-500);
132
+ --color-surface-accent-invert-l2: var(--mds-color-purple-475);
133
+ --color-surface-accent-invert-l3: var(--mds-color-purple-450);
134
+ --color-surface-accent-invert-l4: var(--mds-color-purple-425);
135
+ --color-surface-accent-invert-l5: var(--mds-color-purple-400);
136
+
137
+ --color-surface-success-l1: var(--mds-color-green-50);
138
+ --color-surface-success-l2: var(--mds-color-green-75);
139
+ --color-surface-success-l3: var(--mds-color-green-100);
140
+ --color-surface-success-l4: var(--mds-color-green-125);
141
+ --color-surface-success-l5: var(--mds-color-green-150);
142
+
143
+ --color-surface-success-invert-l1: var(--mds-color-green-500);
144
+ --color-surface-success-invert-l2: var(--mds-color-green-475);
145
+ --color-surface-success-invert-l3: var(--mds-color-green-450);
146
+ --color-surface-success-invert-l4: var(--mds-color-green-425);
147
+ --color-surface-success-invert-l5: var(--mds-color-green-400);
148
+
149
+ --color-surface-error-l1: var(--mds-color-red-50);
150
+ --color-surface-error-l2: var(--mds-color-red-75);
151
+ --color-surface-error-l3: var(--mds-color-red-100);
152
+ --color-surface-error-l4: var(--mds-color-red-125);
153
+ --color-surface-error-l5: var(--mds-color-red-150);
154
+
155
+ --color-surface-error-invert-l1: var(--mds-color-red-500);
156
+ --color-surface-error-invert-l2: var(--mds-color-red-475);
157
+ --color-surface-error-invert-l3: var(--mds-color-red-450);
158
+ --color-surface-error-invert-l4: var(--mds-color-red-425);
159
+ --color-surface-error-invert-l5: var(--mds-color-red-400);
160
+
161
+ --color-surface-info-l1: var(--mds-color-cobalt-50);
162
+ --color-surface-info-l2: var(--mds-color-cobalt-75);
163
+ --color-surface-info-l3: var(--mds-color-cobalt-100);
164
+ --color-surface-info-l4: var(--mds-color-cobalt-125);
165
+ --color-surface-info-l5: var(--mds-color-cobalt-125);
166
+
167
+ --color-surface-info-invert-l1: var(--mds-color-cobalt-500);
168
+ --color-surface-info-invert-l2: var(--mds-color-cobalt-475);
169
+ --color-surface-info-invert-l3: var(--mds-color-cobalt-450);
170
+ --color-surface-info-invert-l4: var(--mds-color-cobalt-425);
171
+ --color-surface-info-invert-l5: var(--mds-color-cobalt-400);
172
+
173
+ --color-surface-warning-l1: var(--mds-color-lemon-50);
174
+ --color-surface-warning-l2: var(--mds-color-lemon-75);
175
+ --color-surface-warning-l3: var(--mds-color-lemon-100);
176
+ --color-surface-warning-l4: var(--mds-color-lemon-125);
177
+ --color-surface-warning-l5: var(--mds-color-lemon-150);
178
+
179
+ --color-surface-warning-invert-l1: var(--mds-color-lemon-500);
180
+ --color-surface-warning-invert-l2: var(--mds-color-lemon-475);
181
+ --color-surface-warning-invert-l3: var(--mds-color-lemon-450);
182
+ --color-surface-warning-invert-l4: var(--mds-color-lemon-425);
183
+ --color-surface-warning-invert-l5: var(--mds-color-lemon-400);
184
+
185
+ --color-border-interactive-success: var(--mds-color-green-125);
186
+ --color-border-interactive-neutral: var(--mds-color-neutral-150);
187
+ --color-border-interactive-neutral-hover: var(--mds-color-neutral-175);
188
+ --color-border-interactive-neutral-pressed: var(--mds-color-neutral-375);
189
+ --color-border-interactive-neutral-disabled: var(--mds-color-neutral-150);
190
+ --color-border-interactive-neutral-active: var(--mds-color-neutral-400);
191
+ --color-border-interactive-neutral-active-hover: var(--mds-color-neutral-450);
192
+ --color-border-interactive-neutral-active-pressed: var(
193
+ --mds-color-neutral-500
194
+ );
195
+ --color-border-interactive-neutral-active-disabled: var(
196
+ --mds-color-neutral-375
197
+ );
198
+
199
+ --color-border-interactive-neutral-inverse: var(--mds-color-neutral-450);
200
+ --color-border-interactive-neutral-inverse-hover: var(
201
+ --mds-color-neutral-275
202
+ );
203
+ --color-border-interactive-neutral-inverse-pressed: var(
204
+ --mds-color-neutral-200
205
+ );
206
+ --color-border-interactive-neutral-inverse-disabled: var(
207
+ --mds-color-neutral-400
208
+ );
209
+
210
+ --color-border-interactive-success: var(--mds-color-green-125);
211
+ --color-border-interactive-success-hover: var(--mds-color-green-250);
212
+ --color-border-interactive-success-pressed: var(--mds-color-green-375);
213
+ --color-border-interactive-success-disabled: var(--mds-color-muted-green-75);
214
+
215
+ --color-border-interactive-error: var(--mds-color-red-125);
216
+ --color-border-interactive-error-hover: var(--mds-color-red-250);
217
+ --color-border-interactive-error-pressed: var(--mds-color-red-375);
218
+ --color-border-interactive-error-disabled: var(--mds-color-muted-red-75);
219
+
220
+ --color-border-interactive-warning: var(--mds-color-lemon-125);
221
+ --color-border-interactive-warning-hover: var(--mds-color-lemon-250);
222
+ --color-border-interactive-warning-pressed: var(--mds-color-lemon-375);
223
+ --color-border-interactive-warning-disabled: var(--mds-color-muted-lemon-75);
224
+
225
+ --color-border-interactive-info: var(--mds-color-cobalt-125);
226
+ --color-border-interactive-info-hover: var(--mds-color-cobalt-250);
227
+ --color-border-interactive-info-pressed: var(--mds-color-cobalt-375);
228
+ --color-border-interactive-info-disabled: var(--mds-color-cobalt-75);
229
+
230
+ --color-border-surface-neutral-l1: var(--mds-color-neutral-175);
231
+ --color-border-surface-neutral-l2: var(--mds-color-neutral-200);
232
+
233
+ --color-border-surface-neutral-inverse-l1: var(--mds-color-neutral-400);
234
+ --color-border-surface-neutral-inverse-l2: var(--mds-color-neutral-500);
235
+
236
+ --color-border-surface-success-l1: var(--mds-color-green-275);
237
+ --color-border-surface-success-l2: var(--mds-color-green-325);
238
+
239
+ --color-border-surface-error-l1: var(--mds-color-red-225);
240
+ --color-border-surface-error-l2: var(--mds-color-red-275);
241
+
242
+ --color-border-surface-warning-l1: var(--mds-color-lemon-275);
243
+ --color-border-surface-warning-l2: var(--mds-color-lemon-325);
244
+
245
+ --color-border-surface-info-subtle: var(--mds-color-cobalt-275);
246
+ --color-border-surface-info-strong: var(--mds-color-cobalt-325);
247
+
248
+ --color-border-surface-spread-neutral: var(--mds-color-neutral-225);
249
+ --color-border-surface-spread-success: var(--mds-color-green-175);
250
+ --color-border-surface-spread-error: var(--mds-color-red-175);
251
+ --color-border-surface-spread-warning: var(--mds-color-lemon-175);
252
+ --color-border-surface-spread-info: var(--mds-color-cobalt-175);
253
+ --color-border-surface-spread-focus: var(--mds-color-cobalt-200);
242
254
 
243
255
  /* Base values, every shadow and elevation will be computed from this colors */
244
256
  --color-base-shadow-elevation-lt: #363b45;
@@ -246,344 +258,399 @@
246
258
 
247
259
  --color-elevation-shadow-2: color-mix(
248
260
  in srgb,
249
- var(--color-base-shadow-elevation-lt) 2%,
261
+ var(--mds-color-base-shadow-elevation-lt) 2%,
250
262
  transparent
251
263
  );
252
264
  --color-elevation-shadow-4: color-mix(
253
265
  in srgb,
254
- var(--color-base-shadow-elevation-lt) 4%,
266
+ var(--mds-color-base-shadow-elevation-lt) 4%,
255
267
  transparent
256
268
  );
257
269
  --color-elevation-shadow-6: color-mix(
258
270
  in srgb,
259
- var(--color-base-shadow-elevation-lt) 6%,
271
+ var(--mds-color-base-shadow-elevation-lt) 6%,
260
272
  transparent
261
273
  );
262
274
  --color-elevation-shadow-8: color-mix(
263
275
  in srgb,
264
- var(--color-base-shadow-elevation-lt) 8%,
276
+ var(--mds-color-base-shadow-elevation-lt) 8%,
265
277
  transparent
266
278
  );
267
279
  --color-elevation-shadow-10: color-mix(
268
280
  in srgb,
269
- var(--color-base-shadow-elevation-lt) 10%,
281
+ var(--mds-color-base-shadow-elevation-lt) 10%,
270
282
  transparent
271
283
  );
272
284
  --color-elevation-shadow-12: color-mix(
273
285
  in srgb,
274
- var(--color-base-shadow-elevation-lt) 12%,
286
+ var(--mds-color-base-shadow-elevation-lt) 12%,
275
287
  transparent
276
288
  );
277
289
  --color-elevation-shadow-16: color-mix(
278
290
  in srgb,
279
- var(--color-base-shadow-elevation-lt) 16%,
291
+ var(--mds-color-base-shadow-elevation-lt) 16%,
280
292
  transparent
281
293
  );
282
294
  --color-elevation-shadow-20: color-mix(
283
295
  in srgb,
284
- var(--color-base-shadow-elevation-lt) 20%,
296
+ var(--mds-color-base-shadow-elevation-lt) 20%,
285
297
  transparent
286
298
  );
287
299
  --color-elevation-shadow-24: color-mix(
288
300
  in srgb,
289
- var(--color-base-shadow-elevation-lt) 24%,
301
+ var(--mds-color-base-shadow-elevation-lt) 24%,
290
302
  transparent
291
303
  );
292
304
  --color-elevation-shadow-28: color-mix(
293
305
  in srgb,
294
- var(--color-base-shadow-elevation-lt) 28%,
306
+ var(--mds-color-base-shadow-elevation-lt) 28%,
295
307
  transparent
296
308
  );
297
309
  }
298
310
 
299
311
  @layer theme {
300
- /* Dark Mode Overides */
312
+ /**
313
+ * Dark Mode Overides.
314
+ * You need to prefix with `--mds-`
315
+ */
301
316
  [data-theme-mode="dark"] {
302
- --color-primary: var(--color-neutral-100);
303
- --color-secondary: var(--color-neutral-250);
304
- --color-tertiary: var(--color-neutral-275);
305
- --color-accent: var(--color-neutral-275);
306
- --color-accent-hover: var(--color-neutral-275);
307
- --color-disabled: var(--color-neutral-325);
308
- --color-success: var(--color-muted-green-175);
309
- --color-success-hover: var(--color-muted-green-175);
310
- --color-error: var(--color-muted-red-175);
311
-
312
- --color-error-hover: var(--color-muted-red-175);
313
- --color-info: var(--color-muted-cobalt-150);
314
- --color-info-hover: var(--color-muted-cobalt-150);
315
- --color-warning: var(--color-lemon-175);
316
- --color-warning-hover: var(--color-lemon-175);
317
- --color-on-primary: var(--color-neutral-400);
318
- --color-on-primary-disabled: var(--color-neutral-325);
319
-
320
- --color-on-secondary: var(--color-neutral-50);
321
- --color-on-secondary-disabled: var(--color-neutral-325);
322
- --color-on-ghost: var(--color-neutral-50);
323
- --color-on-accent: var(--color-neutral-50);
324
- --color-on-success: var(--color-muted-green-450);
325
- --color-on-success-disabled: var(--color-muted-green-325);
326
- --color-on-success-light: var(--color-muted-green-50);
327
- --color-on-success-light-disabled: var(--color-muted-green-325);
328
- --color-on-warning: var(--color-muted-lemon-450);
329
- --color-on-warning-disabled: var(--color-muted-lemon-325);
330
-
331
- --color-on-warning-light: var(--color-muted-lemon-50);
332
- --color-on-warning-light-disabled: var(--color-muted-lemon-325);
333
- --color-on-error: var(--color-muted-red-450);
334
- --color-on-error-disabled: var(--color-muted-red-325);
335
- --color-on-error-light: var(--color-muted-red-75);
336
- --color-on-error-light-disabled: var(--color-muted-red-325);
337
-
338
- --color-on-info: var(--color-muted-cobalt-450);
339
- --color-on-info-disabled: var(--color-muted-cobalt-325);
340
- --color-on-info-light: var(--color-muted-cobalt-50);
341
- --color-on-info-light-disabled: var(--color-muted-cobalt-325);
342
-
343
- --color-interactive-primary: var(--color-neutral-150);
344
- --color-interactive-primary-hover: var(--color-neutral-100);
345
- --color-interactive-primary-pressed: var(--color-neutral-50);
346
- --color-interactive-primary-disabled: var(--color-neutral-400);
347
-
348
- --color-interactive-secondary: var(--color-neutral-375);
349
- --color-interactive-secondary-hover: var(--color-neutral-350);
350
- --color-interactive-secondary-pressed: var(--color-neutral-325);
351
- --color-interactive-secondary-disabled: var(--color-neutral-400);
352
-
353
- --color-interactive-ghost: var(--color-neutral-50);
354
- --color-interactive-ghost-hover: var(--color-neutral-400);
355
- --color-interactive-ghost-pressed: var(--color-neutral-375);
356
-
357
- --color-interactive-accent: var(--color-neutral-150);
358
- --color-interactive-accent-hover: var(--color-neutral-100);
359
- --color-interactive-accent-pressed: var(--color-neutral-50);
360
- --color-interactive-accent-disabled: var(--color-neutral-400);
361
-
362
- --color-interactive-success: var(--color-muted-green-150);
363
- --color-interactive-success-hover: var(--color-muted-green-175);
364
- --color-interactive-success-pressed: var(--color-muted-green-200);
365
- --color-interactive-success-disabled: var(--color-muted-green-225);
366
-
367
- --color-interactive-success-light: var(--color-muted-green-425);
368
- --color-interactive-success-light-hover: var(--color-muted-green-450);
369
- --color-interactive-success-light-pressed: var(--color-muted-green-475);
370
- --color-interactive-success-light-disabled: var(--color-muted-green-225);
371
-
372
- --color-interactive-error: var(--color-muted-red-150);
373
- --color-interactive-error-hover: var(--color-muted-red-175);
374
- --color-interactive-error-pressed: var(--color-muted-red-200);
375
- --color-interactive-error-disabled: var(--color-muted-red-225);
376
-
377
- --color-interactive-error-light: var(--color-muted-red-425);
378
- --color-interactive-error-light-hover: var(--color-muted-red-450);
379
- --color-interactive-error-light-pressed: var(--color-muted-red-475);
380
- --color-interactive-error-light-disabled: var(--color-muted-red-225);
381
-
382
- --color-interactive-warning: var(--color-muted-lemon-150);
383
- --color-interactive-warning-hover: var(--color-muted-lemon-175);
384
- --color-interactive-warning-pressed: var(--color-muted-lemon-200);
385
- --color-interactive-warning-disabled: var(--color-muted-lemon-225);
386
-
387
- --color-interactive-warning-light: var(--color-muted-lemon-425);
388
- --color-interactive-warning-light-hover: var(--color-muted-lemon-450);
389
- --color-interactive-warning-light-pressed: var(--color-muted-lemon-475);
390
- --color-interactive-warning-light-disabled: var(--color-muted-lemon-225);
391
-
392
- --color-interactive-info: var(--color-muted-cobalt-150);
393
- --color-interactive-info-hover: var(--color-muted-cobalt-175);
394
- --color-interactive-info-pressed: var(--color-muted-cobalt-200);
395
- --color-interactive-info-disabled: var(--color-muted-cobalt-225);
396
-
397
- --color-interactive-info-light: var(--color-muted-cobalt-425);
398
- --color-interactive-info-light-hover: var(--color-muted-cobalt-450);
399
- --color-interactive-info-light-pressed: var(--color-muted-cobalt-475);
400
- --color-interactive-info-light-disabled: var(--color-muted-cobalt-225);
401
-
402
- --color-surface-neutral-l1: var(--color-neutral-500);
403
- --color-surface-neutral-l2: var(--color-neutral-475);
404
- --color-surface-neutral-l3: var(--color-neutral-450);
405
- --color-surface-neutral-l4: var(--color-neutral-425);
406
- --color-surface-neutral-l5: var(--color-neutral-400);
407
-
408
- --color-surface-neutral-invert-l1: var(--color-neutral-50);
409
- --color-surface-neutral-invert-l2: var(--color-neutral-75);
410
- --color-surface-neutral-invert-l3: var(--color-neutral-100);
411
- --color-surface-neutral-invert-l4: var(--color-neutral-125);
412
- --color-surface-neutral-invert-l5: var(--color-neutral-150);
413
-
414
- --color-surface-accent-l1: var(--color-neutral-500);
415
- --color-surface-accent-l2: var(--color-neutral-475);
416
- --color-surface-accent-l3: var(--color-neutral-450);
417
- --color-surface-accent-l4: var(--color-neutral-425);
418
- --color-surface-accent-l5: var(--color-neutral-400);
419
-
420
- --color-surface-accent-invert-l1: var(--color-neutral-500);
421
- --color-surface-accent-invert-l2: var(--color-neutral-475);
422
- --color-surface-accent-invert-l3: var(--color-neutral-450);
423
- --color-surface-accent-invert-l4: var(--color-neutral-425);
424
- --color-surface-accent-invert-l5: var(--color-neutral-400);
425
-
426
- --color-surface-success-l1: var(--color-muted-green-500);
427
- --color-surface-success-l2: var(--color-muted-green-475);
428
- --color-surface-success-l3: var(--color-muted-green-450);
429
- --color-surface-success-l4: var(--color-muted-green-425);
430
- --color-surface-success-l5: var(--color-muted-green-400);
431
-
432
- --color-surface-success-invert-l1: var(--color-muted-green-50);
433
- --color-surface-success-invert-l2: var(--color-muted-green-75);
434
- --color-surface-success-invert-l3: var(--color-muted-green-100);
435
- --color-surface-success-invert-l4: var(--color-muted-green-125);
436
- --color-surface-success-invert-l5: var(--color-muted-green-150);
437
-
438
- --color-surface-error-l1: var(--color-muted-red-500);
439
- --color-surface-error-l2: var(--color-muted-red-475);
440
- --color-surface-error-l3: var(--color-muted-red-450);
441
- --color-surface-error-l4: var(--color-muted-red-425);
442
- --color-surface-error-l5: var(--color-muted-red-400);
443
-
444
- --color-surface-error-invert-l1: var(--color-muted-red-50);
445
- --color-surface-error-invert-l2: var(--color-muted-red-75);
446
- --color-surface-error-invert-l3: var(--color-muted-red-100);
447
- --color-surface-error-invert-l4: var(--color-muted-red-125);
448
- --color-surface-error-invert-l5: var(--color-muted-red-150);
449
-
450
- --color-surface-info-l1: var(--color-muted-cobalt-500);
451
- --color-surface-info-l2: var(--color-muted-cobalt-475);
452
- --color-surface-info-l3: var(--color-muted-cobalt-450);
453
- --color-surface-info-l4: var(--color-muted-cobalt-425);
454
- --color-surface-info-l5: var(--color-muted-cobalt-400);
455
-
456
- --color-surface-info-invert-l1: var(--color-muted-cobalt-50);
457
- --color-surface-info-invert-l2: var(--color-muted-cobalt-75);
458
- --color-surface-info-invert-l3: var(--color-muted-cobalt-100);
459
- --color-surface-info-invert-l4: var(--color-muted-cobalt-125);
460
- --color-surface-info-invert-l5: var(--color-muted-cobalt-150);
461
-
462
- --color-surface-warning-l1: var(--color-muted-lemon-500);
463
- --color-surface-warning-l2: var(--color-muted-lemon-475);
464
- --color-surface-warning-l3: var(--color-muted-lemon-450);
465
- --color-surface-warning-l4: var(--color-muted-lemon-425);
466
- --color-surface-warning-l5: var(--color-muted-lemon-400);
467
-
468
- --color-surface-warning-invert-l1: var(--color-muted-lemon-50);
469
- --color-surface-warning-invert-l2: var(--color-muted-lemon-75);
470
- --color-surface-warning-invert-l3: var(--color-muted-lemon-100);
471
- --color-surface-warning-invert-l4: var(--color-muted-lemon-125);
472
- --color-surface-warning-invert-l5: var(--color-muted-lemon-150);
473
-
474
- --color-border-interactive-neutral: var(--color-neutral-375);
475
- --color-border-interactive-neutral-hover: var(--color-neutral-275);
476
- --color-border-interactive-neutral-pressed: var(--color-neutral-200);
477
- --color-border-interactive-neutral-disabled: var(--color-neutral-400);
478
- --color-border-interactive-neutral-active: var(--color-neutral-150);
479
- --color-border-interactive-neutral-active-hover: var(--color-neutral-100);
480
- --color-border-interactive-neutral-active-pressed: var(--color-neutral-50);
481
- --color-border-interactive-neutral-active-disabled: var(
482
- --color-neutral-325
483
- );
484
-
485
- --color-border-interactive-neutral-inverse: var(--color-neutral-175);
486
- --color-border-interactive-neutral-inverse-hover: var(--color-neutral-350);
487
- --color-border-interactive-neutral-inverse-pressed: var(
488
- --color-neutral-375
489
- );
490
- --color-border-interactive-neutral-inverse-disabled: var(
491
- --color-neutral-150
492
- );
493
-
494
- --color-border-interactive-success: var(--color-muted-green-250);
495
- --color-border-interactive-success-hover: var(--color-muted-green-275);
496
- --color-border-interactive-success-pressed: var(--color-muted-green-275);
497
- --color-border-interactive-success-disabled: var(--color-muted-green-500);
498
-
499
- --color-border-interactive-error: var(--color-muted-red-200);
500
- --color-border-interactive-error-hover: var(--color-muted-red-350);
501
- --color-border-interactive-error-pressed: var(--color-muted-red-350);
502
- --color-border-interactive-error-disabled: var(--color-muted-red-500);
503
-
504
- --color-border-interactive-warning: var(--color-muted-lemon-325);
505
- --color-border-interactive-warning-hover: var(--color-muted-lemon-350);
506
- --color-border-interactive-warning-pressed: var(--color-muted-lemon-350);
507
- --color-border-interactive-warning-disabled: var(--color-muted-lemon-500);
508
-
509
- --color-border-interactive-info: var(--color-muted-cobalt-250);
510
- --color-border-interactive-info-hover: var(--color-muted-cobalt-275);
511
- --color-border-interactive-info-pressed: var(--color-muted-cobalt-275);
512
- --color-border-interactive-info-disabled: var(--color-muted-cobalt-500);
513
-
514
- --color-border-surface-neutral-l1: var(--color-neutral-350);
515
- --color-border-surface-neutral-l2: var(--color-neutral-325);
516
-
517
- --color-border-surface-neutral-inverse-l1: var(--color-neutral-150);
518
- --color-border-surface-neutral-inverse-l2: var(--color-neutral-200);
519
-
520
- --color-border-surface-success-l1: var(--color-muted-green-200);
521
- --color-border-surface-success-l2: var(--color-muted-green-250);
522
-
523
- --color-border-surface-error-l1: var(--color-muted-red-200);
524
- --color-border-surface-error-l2: var(--color-muted-red-325);
525
-
526
- --color-border-surface-warning-l1: var(--color-muted-lemon-275);
527
- --color-border-surface-warning-l2: var(--color-muted-lemon-325);
528
-
529
- --color-border-surface-info-subtle: var(--color-muted-cobalt-200);
530
- --color-border-surface-info-strong: var(--color-muted-cobalt-250);
531
-
532
- --color-border-surface-spread-neutral: var(--color-neutral-325);
533
- --color-border-surface-spread-success: var(--color-muted-green-450);
534
- --color-border-surface-spread-error: var(--color-red-450);
535
- --color-border-surface-spread-warning: var(--color-muted-lemon-450);
536
- --color-border-surface-spread-info: var(--color-muted-cobalt-450);
537
- --color-border-surface-spread-focus: var(--color-muted-cobalt-200);
538
-
539
- --color-elevation-shadow-2: color-mix(
317
+ --mds-color-primary: var(--mds-color-neutral-100);
318
+ --mds-color-secondary: var(--mds-color-neutral-250);
319
+ --mds-color-tertiary: var(--mds-color-neutral-275);
320
+ --mds-color-accent: var(--mds-color-neutral-275);
321
+ --mds-color-accent-hover: var(--mds-color-neutral-275);
322
+ --mds-color-disabled: var(--mds-color-neutral-325);
323
+ --mds-color-success: var(--mds-color-muted-green-175);
324
+ --mds-color-success-hover: var(--mds-color-muted-green-175);
325
+ --mds-color-error: var(--mds-color-muted-red-175);
326
+
327
+ --mds-color-error-hover: var(--mds-color-muted-red-175);
328
+ --mds-color-info: var(--mds-color-muted-cobalt-150);
329
+ --mds-color-info-hover: var(--mds-color-muted-cobalt-150);
330
+ --mds-color-warning: var(--mds-color-lemon-175);
331
+ --mds-color-warning-hover: var(--mds-color-lemon-175);
332
+ --mds-color-on-primary: var(--mds-color-neutral-400);
333
+ --mds-color-on-primary-disabled: var(--mds-color-neutral-325);
334
+
335
+ --mds-color-on-secondary: var(--mds-color-neutral-50);
336
+ --mds-color-on-secondary-disabled: var(--mds-color-neutral-325);
337
+ --mds-color-on-ghost: var(--mds-color-neutral-50);
338
+ --mds-color-on-accent: var(--mds-color-neutral-50);
339
+ --mds-color-on-success: var(--mds-color-muted-green-450);
340
+ --mds-color-on-success-disabled: var(--mds-color-muted-green-325);
341
+ --mds-color-on-success-light: var(--mds-color-muted-green-50);
342
+ --mds-color-on-success-light-disabled: var(--mds-color-muted-green-325);
343
+ --mds-color-on-warning: var(--mds-color-muted-lemon-450);
344
+ --mds-color-on-warning-disabled: var(--mds-color-muted-lemon-325);
345
+
346
+ --mds-color-on-warning-light: var(--mds-color-muted-lemon-50);
347
+ --mds-color-on-warning-light-disabled: var(--mds-color-muted-lemon-325);
348
+ --mds-color-on-error: var(--mds-color-muted-red-450);
349
+ --mds-color-on-error-disabled: var(--mds-color-muted-red-325);
350
+ --mds-color-on-error-light: var(--mds-color-muted-red-75);
351
+ --mds-color-on-error-light-disabled: var(--mds-color-muted-red-325);
352
+
353
+ --mds-color-on-info: var(--mds-color-muted-cobalt-450);
354
+ --mds-color-on-info-disabled: var(--mds-color-muted-cobalt-325);
355
+ --mds-color-on-info-light: var(--mds-color-muted-cobalt-50);
356
+ --mds-color-on-info-light-disabled: var(--mds-color-muted-cobalt-325);
357
+
358
+ --mds-color-interactive-primary: var(--mds-color-neutral-150);
359
+ --mds-color-interactive-primary-hover: var(--mds-color-neutral-100);
360
+ --mds-color-interactive-primary-pressed: var(--mds-color-neutral-50);
361
+ --mds-color-interactive-primary-disabled: var(--mds-color-neutral-400);
362
+
363
+ --mds-color-interactive-secondary: var(--mds-color-neutral-375);
364
+ --mds-color-interactive-secondary-hover: var(--mds-color-neutral-350);
365
+ --mds-color-interactive-secondary-pressed: var(--mds-color-neutral-325);
366
+ --mds-color-interactive-secondary-disabled: var(--mds-color-neutral-400);
367
+
368
+ --mds-color-interactive-ghost: var(--mds-color-neutral-50);
369
+ --mds-color-interactive-ghost-hover: var(--mds-color-neutral-400);
370
+ --mds-color-interactive-ghost-pressed: var(--mds-color-neutral-375);
371
+
372
+ --mds-color-interactive-accent: var(--mds-color-neutral-150);
373
+ --mds-color-interactive-accent-hover: var(--mds-color-neutral-100);
374
+ --mds-color-interactive-accent-pressed: var(--mds-color-neutral-50);
375
+ --mds-color-interactive-accent-disabled: var(--mds-color-neutral-400);
376
+
377
+ --mds-color-interactive-success: var(--mds-color-muted-green-150);
378
+ --mds-color-interactive-success-hover: var(--mds-color-muted-green-175);
379
+ --mds-color-interactive-success-pressed: var(--mds-color-muted-green-200);
380
+ --mds-color-interactive-success-disabled: var(--mds-color-muted-green-225);
381
+
382
+ --mds-color-interactive-success-light: var(--mds-color-muted-green-425);
383
+ --mds-color-interactive-success-light-hover: var(
384
+ --mds-color-muted-green-450
385
+ );
386
+ --mds-color-interactive-success-light-pressed: var(
387
+ --mds-color-muted-green-475
388
+ );
389
+ --mds-color-interactive-success-light-disabled: var(
390
+ --mds-color-muted-green-225
391
+ );
392
+
393
+ --mds-color-interactive-error: var(--mds-color-muted-red-150);
394
+ --mds-color-interactive-error-hover: var(--mds-color-muted-red-175);
395
+ --mds-color-interactive-error-pressed: var(--mds-color-muted-red-200);
396
+ --mds-color-interactive-error-disabled: var(--mds-color-muted-red-225);
397
+
398
+ --mds-color-interactive-error-light: var(--mds-color-muted-red-425);
399
+ --mds-color-interactive-error-light-hover: var(--mds-color-muted-red-450);
400
+ --mds-color-interactive-error-light-pressed: var(--mds-color-muted-red-475);
401
+ --mds-color-interactive-error-light-disabled: var(
402
+ --mds-color-muted-red-225
403
+ );
404
+
405
+ --mds-color-interactive-warning: var(--mds-color-muted-lemon-150);
406
+ --mds-color-interactive-warning-hover: var(--mds-color-muted-lemon-175);
407
+ --mds-color-interactive-warning-pressed: var(--mds-color-muted-lemon-200);
408
+ --mds-color-interactive-warning-disabled: var(--mds-color-muted-lemon-225);
409
+
410
+ --mds-color-interactive-warning-light: var(--mds-color-muted-lemon-425);
411
+ --mds-color-interactive-warning-light-hover: var(
412
+ --mds-color-muted-lemon-450
413
+ );
414
+ --mds-color-interactive-warning-light-pressed: var(
415
+ --mds-color-muted-lemon-475
416
+ );
417
+ --mds-color-interactive-warning-light-disabled: var(
418
+ --mds-color-muted-lemon-225
419
+ );
420
+
421
+ --mds-color-interactive-info: var(--mds-color-muted-cobalt-150);
422
+ --mds-color-interactive-info-hover: var(--mds-color-muted-cobalt-175);
423
+ --mds-color-interactive-info-pressed: var(--mds-color-muted-cobalt-200);
424
+ --mds-color-interactive-info-disabled: var(--mds-color-muted-cobalt-225);
425
+
426
+ --mds-color-interactive-info-light: var(--mds-color-muted-cobalt-425);
427
+ --mds-color-interactive-info-light-hover: var(--mds-color-muted-cobalt-450);
428
+ --mds-color-interactive-info-light-pressed: var(
429
+ --mds-color-muted-cobalt-475
430
+ );
431
+ --mds-color-interactive-info-light-disabled: var(
432
+ --mds-color-muted-cobalt-225
433
+ );
434
+
435
+ --mds-color-surface-neutral-l1: var(--mds-color-neutral-500);
436
+ --mds-color-surface-neutral-l2: var(--mds-color-neutral-475);
437
+ --mds-color-surface-neutral-l3: var(--mds-color-neutral-450);
438
+ --mds-color-surface-neutral-l4: var(--mds-color-neutral-425);
439
+ --mds-color-surface-neutral-l5: var(--mds-color-neutral-400);
440
+
441
+ --mds-color-surface-neutral-invert-l1: var(--mds-color-neutral-50);
442
+ --mds-color-surface-neutral-invert-l2: var(--mds-color-neutral-75);
443
+ --mds-color-surface-neutral-invert-l3: var(--mds-color-neutral-100);
444
+ --mds-color-surface-neutral-invert-l4: var(--mds-color-neutral-125);
445
+ --mds-color-surface-neutral-invert-l5: var(--mds-color-neutral-150);
446
+
447
+ --mds-color-surface-accent-l1: var(--mds-color-neutral-500);
448
+ --mds-color-surface-accent-l2: var(--mds-color-neutral-475);
449
+ --mds-color-surface-accent-l3: var(--mds-color-neutral-450);
450
+ --mds-color-surface-accent-l4: var(--mds-color-neutral-425);
451
+ --mds-color-surface-accent-l5: var(--mds-color-neutral-400);
452
+
453
+ --mds-color-surface-accent-invert-l1: var(--mds-color-neutral-500);
454
+ --mds-color-surface-accent-invert-l2: var(--mds-color-neutral-475);
455
+ --mds-color-surface-accent-invert-l3: var(--mds-color-neutral-450);
456
+ --mds-color-surface-accent-invert-l4: var(--mds-color-neutral-425);
457
+ --mds-color-surface-accent-invert-l5: var(--mds-color-neutral-400);
458
+
459
+ --mds-color-surface-success-l1: var(--mds-color-muted-green-500);
460
+ --mds-color-surface-success-l2: var(--mds-color-muted-green-475);
461
+ --mds-color-surface-success-l3: var(--mds-color-muted-green-450);
462
+ --mds-color-surface-success-l4: var(--mds-color-muted-green-425);
463
+ --mds-color-surface-success-l5: var(--mds-color-muted-green-400);
464
+
465
+ --mds-color-surface-success-invert-l1: var(--mds-color-muted-green-50);
466
+ --mds-color-surface-success-invert-l2: var(--mds-color-muted-green-75);
467
+ --mds-color-surface-success-invert-l3: var(--mds-color-muted-green-100);
468
+ --mds-color-surface-success-invert-l4: var(--mds-color-muted-green-125);
469
+ --mds-color-surface-success-invert-l5: var(--mds-color-muted-green-150);
470
+
471
+ --mds-color-surface-error-l1: var(--mds-color-muted-red-500);
472
+ --mds-color-surface-error-l2: var(--mds-color-muted-red-475);
473
+ --mds-color-surface-error-l3: var(--mds-color-muted-red-450);
474
+ --mds-color-surface-error-l4: var(--mds-color-muted-red-425);
475
+ --mds-color-surface-error-l5: var(--mds-color-muted-red-400);
476
+
477
+ --mds-color-surface-error-invert-l1: var(--mds-color-muted-red-50);
478
+ --mds-color-surface-error-invert-l2: var(--mds-color-muted-red-75);
479
+ --mds-color-surface-error-invert-l3: var(--mds-color-muted-red-100);
480
+ --mds-color-surface-error-invert-l4: var(--mds-color-muted-red-125);
481
+ --mds-color-surface-error-invert-l5: var(--mds-color-muted-red-150);
482
+
483
+ --mds-color-surface-info-l1: var(--mds-color-muted-cobalt-500);
484
+ --mds-color-surface-info-l2: var(--mds-color-muted-cobalt-475);
485
+ --mds-color-surface-info-l3: var(--mds-color-muted-cobalt-450);
486
+ --mds-color-surface-info-l4: var(--mds-color-muted-cobalt-425);
487
+ --mds-color-surface-info-l5: var(--mds-color-muted-cobalt-400);
488
+
489
+ --mds-color-surface-info-invert-l1: var(--mds-color-muted-cobalt-50);
490
+ --mds-color-surface-info-invert-l2: var(--mds-color-muted-cobalt-75);
491
+ --mds-color-surface-info-invert-l3: var(--mds-color-muted-cobalt-100);
492
+ --mds-color-surface-info-invert-l4: var(--mds-color-muted-cobalt-125);
493
+ --mds-color-surface-info-invert-l5: var(--mds-color-muted-cobalt-150);
494
+
495
+ --mds-color-surface-warning-l1: var(--mds-color-muted-lemon-500);
496
+ --mds-color-surface-warning-l2: var(--mds-color-muted-lemon-475);
497
+ --mds-color-surface-warning-l3: var(--mds-color-muted-lemon-450);
498
+ --mds-color-surface-warning-l4: var(--mds-color-muted-lemon-425);
499
+ --mds-color-surface-warning-l5: var(--mds-color-muted-lemon-400);
500
+
501
+ --mds-color-surface-warning-invert-l1: var(--mds-color-muted-lemon-50);
502
+ --mds-color-surface-warning-invert-l2: var(--mds-color-muted-lemon-75);
503
+ --mds-color-surface-warning-invert-l3: var(--mds-color-muted-lemon-100);
504
+ --mds-color-surface-warning-invert-l4: var(--mds-color-muted-lemon-125);
505
+ --mds-color-surface-warning-invert-l5: var(--mds-color-muted-lemon-150);
506
+
507
+ --mds-color-border-interactive-neutral: var(--mds-color-neutral-375);
508
+ --mds-color-border-interactive-neutral-hover: var(--mds-color-neutral-275);
509
+ --mds-color-border-interactive-neutral-pressed: var(
510
+ --mds-color-neutral-200
511
+ );
512
+ --mds-color-border-interactive-neutral-disabled: var(
513
+ --mds-color-neutral-400
514
+ );
515
+ --mds-color-border-interactive-neutral-active: var(--mds-color-neutral-150);
516
+ --mds-color-border-interactive-neutral-active-hover: var(
517
+ --mds-color-neutral-100
518
+ );
519
+ --mds-color-border-interactive-neutral-active-pressed: var(
520
+ --mds-color-neutral-50
521
+ );
522
+ --mds-color-border-interactive-neutral-active-disabled: var(
523
+ --mds-color-neutral-325
524
+ );
525
+
526
+ --mds-color-border-interactive-neutral-inverse: var(
527
+ --mds-color-neutral-175
528
+ );
529
+ --mds-color-border-interactive-neutral-inverse-hover: var(
530
+ --mds-color-neutral-350
531
+ );
532
+ --mds-color-border-interactive-neutral-inverse-pressed: var(
533
+ --mds-color-neutral-375
534
+ );
535
+ --mds-color-border-interactive-neutral-inverse-disabled: var(
536
+ --mds-color-neutral-150
537
+ );
538
+
539
+ --mds-color-border-interactive-success: var(--mds-color-muted-green-250);
540
+ --mds-color-border-interactive-success-hover: var(
541
+ --mds-color-muted-green-275
542
+ );
543
+ --mds-color-border-interactive-success-pressed: var(
544
+ --mds-color-muted-green-275
545
+ );
546
+ --mds-color-border-interactive-success-disabled: var(
547
+ --mds-color-muted-green-500
548
+ );
549
+
550
+ --mds-color-border-interactive-error: var(--mds-color-muted-red-200);
551
+ --mds-color-border-interactive-error-hover: var(--mds-color-muted-red-350);
552
+ --mds-color-border-interactive-error-pressed: var(
553
+ --mds-color-muted-red-350
554
+ );
555
+ --mds-color-border-interactive-error-disabled: var(
556
+ --mds-color-muted-red-500
557
+ );
558
+
559
+ --mds-color-border-interactive-warning: var(--mds-color-muted-lemon-325);
560
+ --mds-color-border-interactive-warning-hover: var(
561
+ --mds-color-muted-lemon-350
562
+ );
563
+ --mds-color-border-interactive-warning-pressed: var(
564
+ --mds-color-muted-lemon-350
565
+ );
566
+ --mds-color-border-interactive-warning-disabled: var(
567
+ --mds-color-muted-lemon-500
568
+ );
569
+
570
+ --mds-color-border-interactive-info: var(--mds-color-muted-cobalt-250);
571
+ --mds-color-border-interactive-info-hover: var(
572
+ --mds-color-muted-cobalt-275
573
+ );
574
+ --mds-color-border-interactive-info-pressed: var(
575
+ --mds-color-muted-cobalt-275
576
+ );
577
+ --mds-color-border-interactive-info-disabled: var(
578
+ --mds-color-muted-cobalt-500
579
+ );
580
+
581
+ --mds-color-border-surface-neutral-l1: var(--mds-color-neutral-350);
582
+ --mds-color-border-surface-neutral-l2: var(--mds-color-neutral-325);
583
+
584
+ --mds-color-border-surface-neutral-inverse-l1: var(--mds-color-neutral-150);
585
+ --mds-color-border-surface-neutral-inverse-l2: var(--mds-color-neutral-200);
586
+
587
+ --mds-color-border-surface-success-l1: var(--mds-color-muted-green-200);
588
+ --mds-color-border-surface-success-l2: var(--mds-color-muted-green-250);
589
+
590
+ --mds-color-border-surface-error-l1: var(--mds-color-muted-red-200);
591
+ --mds-color-border-surface-error-l2: var(--mds-color-muted-red-325);
592
+
593
+ --mds-color-border-surface-warning-l1: var(--mds-color-muted-lemon-275);
594
+ --mds-color-border-surface-warning-l2: var(--mds-color-muted-lemon-325);
595
+
596
+ --mds-color-border-surface-info-subtle: var(--mds-color-muted-cobalt-200);
597
+ --mds-color-border-surface-info-strong: var(--mds-color-muted-cobalt-250);
598
+
599
+ --mds-color-border-surface-spread-neutral: var(--mds-color-neutral-325);
600
+ --mds-color-border-surface-spread-success: var(--mds-color-muted-green-450);
601
+ --mds-color-border-surface-spread-error: var(--mds-color-red-450);
602
+ --mds-color-border-surface-spread-warning: var(--mds-color-muted-lemon-450);
603
+ --mds-color-border-surface-spread-info: var(--mds-color-muted-cobalt-450);
604
+ --mds-color-border-surface-spread-focus: var(--mds-color-muted-cobalt-200);
605
+
606
+ --mds-color-elevation-shadow-2: color-mix(
540
607
  in srgb,
541
- var(--color-base-shadow-elevation-dt) 2%,
608
+ var(--mds-color-base-shadow-elevation-dt) 2%,
542
609
  transparent
543
610
  );
544
- --color-elevation-shadow-4: color-mix(
611
+ --mds-color-elevation-shadow-4: color-mix(
545
612
  in srgb,
546
- var(--color-base-shadow-elevation-dt) 4%,
613
+ var(--mds-color-base-shadow-elevation-dt) 4%,
547
614
  transparent
548
615
  );
549
- --color-elevation-shadow-6: color-mix(
616
+ --mds-color-elevation-shadow-6: color-mix(
550
617
  in srgb,
551
- var(--color-base-shadow-elevation-dt) 6%,
618
+ var(--mds-color-base-shadow-elevation-dt) 6%,
552
619
  transparent
553
620
  );
554
- --color-elevation-shadow-8: color-mix(
621
+ --mds-color-elevation-shadow-8: color-mix(
555
622
  in srgb,
556
- var(--color-base-shadow-elevation-dt) 8%,
623
+ var(--mds-color-base-shadow-elevation-dt) 8%,
557
624
  transparent
558
625
  );
559
- --color-elevation-shadow-10: color-mix(
626
+ --mds-color-elevation-shadow-10: color-mix(
560
627
  in srgb,
561
- var(--color-base-shadow-elevation-dt) 10%,
628
+ var(--mds-color-base-shadow-elevation-dt) 10%,
562
629
  transparent
563
630
  );
564
- --color-elevation-shadow-12: color-mix(
631
+ --mds-color-elevation-shadow-12: color-mix(
565
632
  in srgb,
566
- var(--color-base-shadow-elevation-dt) 12%,
633
+ var(--mds-color-base-shadow-elevation-dt) 12%,
567
634
  transparent
568
635
  );
569
- --color-elevation-shadow-16: color-mix(
636
+ --mds-color-elevation-shadow-16: color-mix(
570
637
  in srgb,
571
- var(--color-base-shadow-elevation-dt) 16%,
638
+ var(--mds-color-base-shadow-elevation-dt) 16%,
572
639
  transparent
573
640
  );
574
- --color-elevation-shadow-20: color-mix(
641
+ --mds-color-elevation-shadow-20: color-mix(
575
642
  in srgb,
576
- var(--color-base-shadow-elevation-dt) 20%,
643
+ var(--mds-color-base-shadow-elevation-dt) 20%,
577
644
  transparent
578
645
  );
579
- --color-elevation-shadow-24: color-mix(
646
+ --mds-color-elevation-shadow-24: color-mix(
580
647
  in srgb,
581
- var(--color-base-shadow-elevation-dt) 24%,
648
+ var(--mds-color-base-shadow-elevation-dt) 24%,
582
649
  transparent
583
650
  );
584
- --color-elevation-shadow-28: color-mix(
651
+ --mds-color-elevation-shadow-28: color-mix(
585
652
  in srgb,
586
- var(--color-base-shadow-elevation-dt) 28%,
653
+ var(--mds-color-base-shadow-elevation-dt) 28%,
587
654
  transparent
588
655
  );
589
656
  }