@sage/design-tokens 13.1.0 → 13.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (574) hide show
  1. package/css/frozenproduct/all.css +55 -13
  2. package/css/frozenproduct/large/components/button.css +16 -7
  3. package/css/frozenproduct/large/components/focus.css +4 -0
  4. package/css/frozenproduct/large/components/link.css +2 -0
  5. package/css/frozenproduct/large/components/table.css +1 -0
  6. package/css/frozenproduct/large/dark.css +16 -3
  7. package/css/frozenproduct/large/light.css +16 -3
  8. package/css/frozenproduct/small/components/button.css +16 -7
  9. package/css/frozenproduct/small/components/focus.css +4 -0
  10. package/css/frozenproduct/small/components/link.css +2 -0
  11. package/css/frozenproduct/small/components/table.css +1 -0
  12. package/css/frozenproduct/small/dark.css +16 -3
  13. package/css/frozenproduct/small/light.css +16 -3
  14. package/css/marketing/all.css +55 -13
  15. package/css/marketing/large/components/button.css +16 -7
  16. package/css/marketing/large/components/focus.css +4 -0
  17. package/css/marketing/large/components/link.css +2 -0
  18. package/css/marketing/large/components/table.css +1 -0
  19. package/css/marketing/large/dark.css +16 -3
  20. package/css/marketing/large/light.css +16 -3
  21. package/css/marketing/small/components/button.css +16 -7
  22. package/css/marketing/small/components/focus.css +4 -0
  23. package/css/marketing/small/components/link.css +2 -0
  24. package/css/marketing/small/components/table.css +1 -0
  25. package/css/marketing/small/dark.css +16 -3
  26. package/css/marketing/small/light.css +16 -3
  27. package/css/product/all.css +55 -13
  28. package/css/product/large/components/button.css +16 -7
  29. package/css/product/large/components/focus.css +4 -0
  30. package/css/product/large/components/link.css +2 -0
  31. package/css/product/large/components/table.css +1 -0
  32. package/css/product/large/dark.css +16 -3
  33. package/css/product/large/light.css +16 -3
  34. package/css/product/small/components/button.css +16 -7
  35. package/css/product/small/components/focus.css +4 -0
  36. package/css/product/small/components/link.css +2 -0
  37. package/css/product/small/components/table.css +1 -0
  38. package/css/product/small/dark.css +16 -3
  39. package/css/product/small/light.css +16 -3
  40. package/ios/frozenproduct/large/dark/components/button.h +10 -1
  41. package/ios/frozenproduct/large/dark/components/focus.h +4 -0
  42. package/ios/frozenproduct/large/dark/components/link.h +2 -0
  43. package/ios/frozenproduct/large/dark/components/table.h +1 -0
  44. package/ios/frozenproduct/large/dark/mode.h +16 -3
  45. package/ios/frozenproduct/large/light/components/button.h +10 -1
  46. package/ios/frozenproduct/large/light/components/focus.h +4 -0
  47. package/ios/frozenproduct/large/light/components/link.h +2 -0
  48. package/ios/frozenproduct/large/light/components/table.h +1 -0
  49. package/ios/frozenproduct/large/light/mode.h +16 -3
  50. package/ios/frozenproduct/small/dark/components/button.h +10 -1
  51. package/ios/frozenproduct/small/dark/components/focus.h +4 -0
  52. package/ios/frozenproduct/small/dark/components/link.h +2 -0
  53. package/ios/frozenproduct/small/dark/components/table.h +1 -0
  54. package/ios/frozenproduct/small/dark/mode.h +16 -3
  55. package/ios/frozenproduct/small/light/components/button.h +10 -1
  56. package/ios/frozenproduct/small/light/components/focus.h +4 -0
  57. package/ios/frozenproduct/small/light/components/link.h +2 -0
  58. package/ios/frozenproduct/small/light/components/table.h +1 -0
  59. package/ios/frozenproduct/small/light/mode.h +16 -3
  60. package/ios/marketing/large/dark/components/button.h +10 -1
  61. package/ios/marketing/large/dark/components/focus.h +4 -0
  62. package/ios/marketing/large/dark/components/link.h +2 -0
  63. package/ios/marketing/large/dark/components/table.h +1 -0
  64. package/ios/marketing/large/dark/mode.h +16 -3
  65. package/ios/marketing/large/light/components/button.h +10 -1
  66. package/ios/marketing/large/light/components/focus.h +4 -0
  67. package/ios/marketing/large/light/components/link.h +2 -0
  68. package/ios/marketing/large/light/components/table.h +1 -0
  69. package/ios/marketing/large/light/mode.h +16 -3
  70. package/ios/marketing/small/dark/components/button.h +10 -1
  71. package/ios/marketing/small/dark/components/focus.h +4 -0
  72. package/ios/marketing/small/dark/components/link.h +2 -0
  73. package/ios/marketing/small/dark/components/table.h +1 -0
  74. package/ios/marketing/small/dark/mode.h +16 -3
  75. package/ios/marketing/small/light/components/button.h +10 -1
  76. package/ios/marketing/small/light/components/focus.h +4 -0
  77. package/ios/marketing/small/light/components/link.h +2 -0
  78. package/ios/marketing/small/light/components/table.h +1 -0
  79. package/ios/marketing/small/light/mode.h +16 -3
  80. package/ios/product/large/dark/components/button.h +10 -1
  81. package/ios/product/large/dark/components/focus.h +4 -0
  82. package/ios/product/large/dark/components/link.h +2 -0
  83. package/ios/product/large/dark/components/table.h +1 -0
  84. package/ios/product/large/dark/mode.h +16 -3
  85. package/ios/product/large/light/components/button.h +10 -1
  86. package/ios/product/large/light/components/focus.h +4 -0
  87. package/ios/product/large/light/components/link.h +2 -0
  88. package/ios/product/large/light/components/table.h +1 -0
  89. package/ios/product/large/light/mode.h +16 -3
  90. package/ios/product/small/dark/components/button.h +10 -1
  91. package/ios/product/small/dark/components/focus.h +4 -0
  92. package/ios/product/small/dark/components/link.h +2 -0
  93. package/ios/product/small/dark/components/table.h +1 -0
  94. package/ios/product/small/dark/mode.h +16 -3
  95. package/ios/product/small/light/components/button.h +10 -1
  96. package/ios/product/small/light/components/focus.h +4 -0
  97. package/ios/product/small/light/components/link.h +2 -0
  98. package/ios/product/small/light/components/table.h +1 -0
  99. package/ios/product/small/light/mode.h +16 -3
  100. package/js/common/frozenproduct/large/dark/components/button.d.ts +11 -0
  101. package/js/common/frozenproduct/large/dark/components/button.js +185 -1
  102. package/js/common/frozenproduct/large/dark/components/focus.d.ts +6 -0
  103. package/js/common/frozenproduct/large/dark/components/focus.js +54 -0
  104. package/js/common/frozenproduct/large/dark/components/link.d.ts +4 -0
  105. package/js/common/frozenproduct/large/dark/components/link.js +30 -0
  106. package/js/common/frozenproduct/large/dark/components/table.d.ts +1 -0
  107. package/js/common/frozenproduct/large/dark/components/table.js +15 -0
  108. package/js/common/frozenproduct/large/dark/mode.d.ts +19 -2
  109. package/js/common/frozenproduct/large/dark/mode.js +447 -26
  110. package/js/common/frozenproduct/large/light/components/button.d.ts +11 -0
  111. package/js/common/frozenproduct/large/light/components/button.js +185 -1
  112. package/js/common/frozenproduct/large/light/components/focus.d.ts +6 -0
  113. package/js/common/frozenproduct/large/light/components/focus.js +54 -0
  114. package/js/common/frozenproduct/large/light/components/link.d.ts +4 -0
  115. package/js/common/frozenproduct/large/light/components/link.js +30 -0
  116. package/js/common/frozenproduct/large/light/components/table.d.ts +1 -0
  117. package/js/common/frozenproduct/large/light/components/table.js +15 -0
  118. package/js/common/frozenproduct/large/light/mode.d.ts +19 -2
  119. package/js/common/frozenproduct/large/light/mode.js +452 -31
  120. package/js/common/frozenproduct/small/dark/components/button.d.ts +11 -0
  121. package/js/common/frozenproduct/small/dark/components/button.js +185 -1
  122. package/js/common/frozenproduct/small/dark/components/focus.d.ts +6 -0
  123. package/js/common/frozenproduct/small/dark/components/focus.js +54 -0
  124. package/js/common/frozenproduct/small/dark/components/link.d.ts +4 -0
  125. package/js/common/frozenproduct/small/dark/components/link.js +30 -0
  126. package/js/common/frozenproduct/small/dark/components/table.d.ts +1 -0
  127. package/js/common/frozenproduct/small/dark/components/table.js +15 -0
  128. package/js/common/frozenproduct/small/dark/mode.d.ts +19 -2
  129. package/js/common/frozenproduct/small/dark/mode.js +447 -26
  130. package/js/common/frozenproduct/small/light/components/button.d.ts +11 -0
  131. package/js/common/frozenproduct/small/light/components/button.js +185 -1
  132. package/js/common/frozenproduct/small/light/components/focus.d.ts +6 -0
  133. package/js/common/frozenproduct/small/light/components/focus.js +54 -0
  134. package/js/common/frozenproduct/small/light/components/link.d.ts +4 -0
  135. package/js/common/frozenproduct/small/light/components/link.js +30 -0
  136. package/js/common/frozenproduct/small/light/components/table.d.ts +1 -0
  137. package/js/common/frozenproduct/small/light/components/table.js +15 -0
  138. package/js/common/frozenproduct/small/light/mode.d.ts +19 -2
  139. package/js/common/frozenproduct/small/light/mode.js +452 -31
  140. package/js/common/marketing/large/dark/components/button.d.ts +11 -0
  141. package/js/common/marketing/large/dark/components/button.js +185 -1
  142. package/js/common/marketing/large/dark/components/focus.d.ts +6 -0
  143. package/js/common/marketing/large/dark/components/focus.js +54 -0
  144. package/js/common/marketing/large/dark/components/link.d.ts +4 -0
  145. package/js/common/marketing/large/dark/components/link.js +30 -0
  146. package/js/common/marketing/large/dark/components/table.d.ts +1 -0
  147. package/js/common/marketing/large/dark/components/table.js +15 -0
  148. package/js/common/marketing/large/dark/mode.d.ts +19 -2
  149. package/js/common/marketing/large/dark/mode.js +447 -26
  150. package/js/common/marketing/large/light/components/button.d.ts +11 -0
  151. package/js/common/marketing/large/light/components/button.js +185 -1
  152. package/js/common/marketing/large/light/components/focus.d.ts +6 -0
  153. package/js/common/marketing/large/light/components/focus.js +54 -0
  154. package/js/common/marketing/large/light/components/link.d.ts +4 -0
  155. package/js/common/marketing/large/light/components/link.js +30 -0
  156. package/js/common/marketing/large/light/components/table.d.ts +1 -0
  157. package/js/common/marketing/large/light/components/table.js +15 -0
  158. package/js/common/marketing/large/light/mode.d.ts +19 -2
  159. package/js/common/marketing/large/light/mode.js +452 -31
  160. package/js/common/marketing/small/dark/components/button.d.ts +11 -0
  161. package/js/common/marketing/small/dark/components/button.js +185 -1
  162. package/js/common/marketing/small/dark/components/focus.d.ts +6 -0
  163. package/js/common/marketing/small/dark/components/focus.js +54 -0
  164. package/js/common/marketing/small/dark/components/link.d.ts +4 -0
  165. package/js/common/marketing/small/dark/components/link.js +30 -0
  166. package/js/common/marketing/small/dark/components/table.d.ts +1 -0
  167. package/js/common/marketing/small/dark/components/table.js +15 -0
  168. package/js/common/marketing/small/dark/mode.d.ts +19 -2
  169. package/js/common/marketing/small/dark/mode.js +447 -26
  170. package/js/common/marketing/small/light/components/button.d.ts +11 -0
  171. package/js/common/marketing/small/light/components/button.js +185 -1
  172. package/js/common/marketing/small/light/components/focus.d.ts +6 -0
  173. package/js/common/marketing/small/light/components/focus.js +54 -0
  174. package/js/common/marketing/small/light/components/link.d.ts +4 -0
  175. package/js/common/marketing/small/light/components/link.js +30 -0
  176. package/js/common/marketing/small/light/components/table.d.ts +1 -0
  177. package/js/common/marketing/small/light/components/table.js +15 -0
  178. package/js/common/marketing/small/light/mode.d.ts +19 -2
  179. package/js/common/marketing/small/light/mode.js +452 -31
  180. package/js/common/product/large/dark/components/button.d.ts +11 -0
  181. package/js/common/product/large/dark/components/button.js +185 -1
  182. package/js/common/product/large/dark/components/focus.d.ts +6 -0
  183. package/js/common/product/large/dark/components/focus.js +54 -0
  184. package/js/common/product/large/dark/components/link.d.ts +4 -0
  185. package/js/common/product/large/dark/components/link.js +30 -0
  186. package/js/common/product/large/dark/components/table.d.ts +1 -0
  187. package/js/common/product/large/dark/components/table.js +15 -0
  188. package/js/common/product/large/dark/mode.d.ts +19 -2
  189. package/js/common/product/large/dark/mode.js +447 -26
  190. package/js/common/product/large/light/components/button.d.ts +11 -0
  191. package/js/common/product/large/light/components/button.js +185 -1
  192. package/js/common/product/large/light/components/focus.d.ts +6 -0
  193. package/js/common/product/large/light/components/focus.js +54 -0
  194. package/js/common/product/large/light/components/link.d.ts +4 -0
  195. package/js/common/product/large/light/components/link.js +30 -0
  196. package/js/common/product/large/light/components/table.d.ts +1 -0
  197. package/js/common/product/large/light/components/table.js +15 -0
  198. package/js/common/product/large/light/mode.d.ts +19 -2
  199. package/js/common/product/large/light/mode.js +452 -31
  200. package/js/common/product/small/dark/components/button.d.ts +11 -0
  201. package/js/common/product/small/dark/components/button.js +185 -1
  202. package/js/common/product/small/dark/components/focus.d.ts +6 -0
  203. package/js/common/product/small/dark/components/focus.js +54 -0
  204. package/js/common/product/small/dark/components/link.d.ts +4 -0
  205. package/js/common/product/small/dark/components/link.js +30 -0
  206. package/js/common/product/small/dark/components/table.d.ts +1 -0
  207. package/js/common/product/small/dark/components/table.js +15 -0
  208. package/js/common/product/small/dark/mode.d.ts +19 -2
  209. package/js/common/product/small/dark/mode.js +447 -26
  210. package/js/common/product/small/light/components/button.d.ts +11 -0
  211. package/js/common/product/small/light/components/button.js +185 -1
  212. package/js/common/product/small/light/components/focus.d.ts +6 -0
  213. package/js/common/product/small/light/components/focus.js +54 -0
  214. package/js/common/product/small/light/components/link.d.ts +4 -0
  215. package/js/common/product/small/light/components/link.js +30 -0
  216. package/js/common/product/small/light/components/table.d.ts +1 -0
  217. package/js/common/product/small/light/components/table.js +15 -0
  218. package/js/common/product/small/light/mode.d.ts +19 -2
  219. package/js/common/product/small/light/mode.js +452 -31
  220. package/js/es6/frozenproduct/large/dark/components/button.d.ts +9 -0
  221. package/js/es6/frozenproduct/large/dark/components/button.js +10 -1
  222. package/js/es6/frozenproduct/large/dark/components/focus.d.ts +4 -0
  223. package/js/es6/frozenproduct/large/dark/components/focus.js +4 -0
  224. package/js/es6/frozenproduct/large/dark/components/link.d.ts +2 -0
  225. package/js/es6/frozenproduct/large/dark/components/link.js +2 -0
  226. package/js/es6/frozenproduct/large/dark/components/table.d.ts +1 -0
  227. package/js/es6/frozenproduct/large/dark/components/table.js +1 -0
  228. package/js/es6/frozenproduct/large/dark/mode.d.ts +15 -2
  229. package/js/es6/frozenproduct/large/dark/mode.js +16 -3
  230. package/js/es6/frozenproduct/large/light/components/button.d.ts +9 -0
  231. package/js/es6/frozenproduct/large/light/components/button.js +10 -1
  232. package/js/es6/frozenproduct/large/light/components/focus.d.ts +4 -0
  233. package/js/es6/frozenproduct/large/light/components/focus.js +4 -0
  234. package/js/es6/frozenproduct/large/light/components/link.d.ts +2 -0
  235. package/js/es6/frozenproduct/large/light/components/link.js +2 -0
  236. package/js/es6/frozenproduct/large/light/components/table.d.ts +1 -0
  237. package/js/es6/frozenproduct/large/light/components/table.js +1 -0
  238. package/js/es6/frozenproduct/large/light/mode.d.ts +15 -2
  239. package/js/es6/frozenproduct/large/light/mode.js +16 -3
  240. package/js/es6/frozenproduct/small/dark/components/button.d.ts +9 -0
  241. package/js/es6/frozenproduct/small/dark/components/button.js +10 -1
  242. package/js/es6/frozenproduct/small/dark/components/focus.d.ts +4 -0
  243. package/js/es6/frozenproduct/small/dark/components/focus.js +4 -0
  244. package/js/es6/frozenproduct/small/dark/components/link.d.ts +2 -0
  245. package/js/es6/frozenproduct/small/dark/components/link.js +2 -0
  246. package/js/es6/frozenproduct/small/dark/components/table.d.ts +1 -0
  247. package/js/es6/frozenproduct/small/dark/components/table.js +1 -0
  248. package/js/es6/frozenproduct/small/dark/mode.d.ts +15 -2
  249. package/js/es6/frozenproduct/small/dark/mode.js +16 -3
  250. package/js/es6/frozenproduct/small/light/components/button.d.ts +9 -0
  251. package/js/es6/frozenproduct/small/light/components/button.js +10 -1
  252. package/js/es6/frozenproduct/small/light/components/focus.d.ts +4 -0
  253. package/js/es6/frozenproduct/small/light/components/focus.js +4 -0
  254. package/js/es6/frozenproduct/small/light/components/link.d.ts +2 -0
  255. package/js/es6/frozenproduct/small/light/components/link.js +2 -0
  256. package/js/es6/frozenproduct/small/light/components/table.d.ts +1 -0
  257. package/js/es6/frozenproduct/small/light/components/table.js +1 -0
  258. package/js/es6/frozenproduct/small/light/mode.d.ts +15 -2
  259. package/js/es6/frozenproduct/small/light/mode.js +16 -3
  260. package/js/es6/marketing/large/dark/components/button.d.ts +9 -0
  261. package/js/es6/marketing/large/dark/components/button.js +10 -1
  262. package/js/es6/marketing/large/dark/components/focus.d.ts +4 -0
  263. package/js/es6/marketing/large/dark/components/focus.js +4 -0
  264. package/js/es6/marketing/large/dark/components/link.d.ts +2 -0
  265. package/js/es6/marketing/large/dark/components/link.js +2 -0
  266. package/js/es6/marketing/large/dark/components/table.d.ts +1 -0
  267. package/js/es6/marketing/large/dark/components/table.js +1 -0
  268. package/js/es6/marketing/large/dark/mode.d.ts +15 -2
  269. package/js/es6/marketing/large/dark/mode.js +16 -3
  270. package/js/es6/marketing/large/light/components/button.d.ts +9 -0
  271. package/js/es6/marketing/large/light/components/button.js +10 -1
  272. package/js/es6/marketing/large/light/components/focus.d.ts +4 -0
  273. package/js/es6/marketing/large/light/components/focus.js +4 -0
  274. package/js/es6/marketing/large/light/components/link.d.ts +2 -0
  275. package/js/es6/marketing/large/light/components/link.js +2 -0
  276. package/js/es6/marketing/large/light/components/table.d.ts +1 -0
  277. package/js/es6/marketing/large/light/components/table.js +1 -0
  278. package/js/es6/marketing/large/light/mode.d.ts +15 -2
  279. package/js/es6/marketing/large/light/mode.js +16 -3
  280. package/js/es6/marketing/small/dark/components/button.d.ts +9 -0
  281. package/js/es6/marketing/small/dark/components/button.js +10 -1
  282. package/js/es6/marketing/small/dark/components/focus.d.ts +4 -0
  283. package/js/es6/marketing/small/dark/components/focus.js +4 -0
  284. package/js/es6/marketing/small/dark/components/link.d.ts +2 -0
  285. package/js/es6/marketing/small/dark/components/link.js +2 -0
  286. package/js/es6/marketing/small/dark/components/table.d.ts +1 -0
  287. package/js/es6/marketing/small/dark/components/table.js +1 -0
  288. package/js/es6/marketing/small/dark/mode.d.ts +15 -2
  289. package/js/es6/marketing/small/dark/mode.js +16 -3
  290. package/js/es6/marketing/small/light/components/button.d.ts +9 -0
  291. package/js/es6/marketing/small/light/components/button.js +10 -1
  292. package/js/es6/marketing/small/light/components/focus.d.ts +4 -0
  293. package/js/es6/marketing/small/light/components/focus.js +4 -0
  294. package/js/es6/marketing/small/light/components/link.d.ts +2 -0
  295. package/js/es6/marketing/small/light/components/link.js +2 -0
  296. package/js/es6/marketing/small/light/components/table.d.ts +1 -0
  297. package/js/es6/marketing/small/light/components/table.js +1 -0
  298. package/js/es6/marketing/small/light/mode.d.ts +15 -2
  299. package/js/es6/marketing/small/light/mode.js +16 -3
  300. package/js/es6/product/large/dark/components/button.d.ts +9 -0
  301. package/js/es6/product/large/dark/components/button.js +10 -1
  302. package/js/es6/product/large/dark/components/focus.d.ts +4 -0
  303. package/js/es6/product/large/dark/components/focus.js +4 -0
  304. package/js/es6/product/large/dark/components/link.d.ts +2 -0
  305. package/js/es6/product/large/dark/components/link.js +2 -0
  306. package/js/es6/product/large/dark/components/table.d.ts +1 -0
  307. package/js/es6/product/large/dark/components/table.js +1 -0
  308. package/js/es6/product/large/dark/mode.d.ts +15 -2
  309. package/js/es6/product/large/dark/mode.js +16 -3
  310. package/js/es6/product/large/light/components/button.d.ts +9 -0
  311. package/js/es6/product/large/light/components/button.js +10 -1
  312. package/js/es6/product/large/light/components/focus.d.ts +4 -0
  313. package/js/es6/product/large/light/components/focus.js +4 -0
  314. package/js/es6/product/large/light/components/link.d.ts +2 -0
  315. package/js/es6/product/large/light/components/link.js +2 -0
  316. package/js/es6/product/large/light/components/table.d.ts +1 -0
  317. package/js/es6/product/large/light/components/table.js +1 -0
  318. package/js/es6/product/large/light/mode.d.ts +15 -2
  319. package/js/es6/product/large/light/mode.js +16 -3
  320. package/js/es6/product/small/dark/components/button.d.ts +9 -0
  321. package/js/es6/product/small/dark/components/button.js +10 -1
  322. package/js/es6/product/small/dark/components/focus.d.ts +4 -0
  323. package/js/es6/product/small/dark/components/focus.js +4 -0
  324. package/js/es6/product/small/dark/components/link.d.ts +2 -0
  325. package/js/es6/product/small/dark/components/link.js +2 -0
  326. package/js/es6/product/small/dark/components/table.d.ts +1 -0
  327. package/js/es6/product/small/dark/components/table.js +1 -0
  328. package/js/es6/product/small/dark/mode.d.ts +15 -2
  329. package/js/es6/product/small/dark/mode.js +16 -3
  330. package/js/es6/product/small/light/components/button.d.ts +9 -0
  331. package/js/es6/product/small/light/components/button.js +10 -1
  332. package/js/es6/product/small/light/components/focus.d.ts +4 -0
  333. package/js/es6/product/small/light/components/focus.js +4 -0
  334. package/js/es6/product/small/light/components/link.d.ts +2 -0
  335. package/js/es6/product/small/light/components/link.js +2 -0
  336. package/js/es6/product/small/light/components/table.d.ts +1 -0
  337. package/js/es6/product/small/light/components/table.js +1 -0
  338. package/js/es6/product/small/light/mode.d.ts +15 -2
  339. package/js/es6/product/small/light/mode.js +16 -3
  340. package/js/umd/frozenproduct/large/dark/components/button.js +190 -1
  341. package/js/umd/frozenproduct/large/dark/components/focus.js +54 -0
  342. package/js/umd/frozenproduct/large/dark/components/link.js +36 -0
  343. package/js/umd/frozenproduct/large/dark/components/table.js +15 -0
  344. package/js/umd/frozenproduct/large/dark/mode.js +447 -26
  345. package/js/umd/frozenproduct/large/light/components/button.js +190 -1
  346. package/js/umd/frozenproduct/large/light/components/focus.js +54 -0
  347. package/js/umd/frozenproduct/large/light/components/link.js +36 -0
  348. package/js/umd/frozenproduct/large/light/components/table.js +15 -0
  349. package/js/umd/frozenproduct/large/light/mode.js +452 -31
  350. package/js/umd/frozenproduct/small/dark/components/button.js +190 -1
  351. package/js/umd/frozenproduct/small/dark/components/focus.js +54 -0
  352. package/js/umd/frozenproduct/small/dark/components/link.js +36 -0
  353. package/js/umd/frozenproduct/small/dark/components/table.js +15 -0
  354. package/js/umd/frozenproduct/small/dark/mode.js +447 -26
  355. package/js/umd/frozenproduct/small/light/components/button.js +190 -1
  356. package/js/umd/frozenproduct/small/light/components/focus.js +54 -0
  357. package/js/umd/frozenproduct/small/light/components/link.js +36 -0
  358. package/js/umd/frozenproduct/small/light/components/table.js +15 -0
  359. package/js/umd/frozenproduct/small/light/mode.js +452 -31
  360. package/js/umd/marketing/large/dark/components/button.js +190 -1
  361. package/js/umd/marketing/large/dark/components/focus.js +54 -0
  362. package/js/umd/marketing/large/dark/components/link.js +36 -0
  363. package/js/umd/marketing/large/dark/components/table.js +15 -0
  364. package/js/umd/marketing/large/dark/mode.js +447 -26
  365. package/js/umd/marketing/large/light/components/button.js +190 -1
  366. package/js/umd/marketing/large/light/components/focus.js +54 -0
  367. package/js/umd/marketing/large/light/components/link.js +36 -0
  368. package/js/umd/marketing/large/light/components/table.js +15 -0
  369. package/js/umd/marketing/large/light/mode.js +452 -31
  370. package/js/umd/marketing/small/dark/components/button.js +190 -1
  371. package/js/umd/marketing/small/dark/components/focus.js +54 -0
  372. package/js/umd/marketing/small/dark/components/link.js +36 -0
  373. package/js/umd/marketing/small/dark/components/table.js +15 -0
  374. package/js/umd/marketing/small/dark/mode.js +447 -26
  375. package/js/umd/marketing/small/light/components/button.js +190 -1
  376. package/js/umd/marketing/small/light/components/focus.js +54 -0
  377. package/js/umd/marketing/small/light/components/link.js +36 -0
  378. package/js/umd/marketing/small/light/components/table.js +15 -0
  379. package/js/umd/marketing/small/light/mode.js +452 -31
  380. package/js/umd/product/large/dark/components/button.js +190 -1
  381. package/js/umd/product/large/dark/components/focus.js +54 -0
  382. package/js/umd/product/large/dark/components/link.js +36 -0
  383. package/js/umd/product/large/dark/components/table.js +15 -0
  384. package/js/umd/product/large/dark/mode.js +447 -26
  385. package/js/umd/product/large/light/components/button.js +190 -1
  386. package/js/umd/product/large/light/components/focus.js +54 -0
  387. package/js/umd/product/large/light/components/link.js +36 -0
  388. package/js/umd/product/large/light/components/table.js +15 -0
  389. package/js/umd/product/large/light/mode.js +452 -31
  390. package/js/umd/product/small/dark/components/button.js +190 -1
  391. package/js/umd/product/small/dark/components/focus.js +54 -0
  392. package/js/umd/product/small/dark/components/link.js +36 -0
  393. package/js/umd/product/small/dark/components/table.js +15 -0
  394. package/js/umd/product/small/dark/mode.js +447 -26
  395. package/js/umd/product/small/light/components/button.js +190 -1
  396. package/js/umd/product/small/light/components/focus.js +54 -0
  397. package/js/umd/product/small/light/components/link.js +36 -0
  398. package/js/umd/product/small/light/components/table.js +15 -0
  399. package/js/umd/product/small/light/mode.js +452 -31
  400. package/json/flat/frozenproduct/large/dark/components/button.json +10 -1
  401. package/json/flat/frozenproduct/large/dark/components/focus.json +4 -0
  402. package/json/flat/frozenproduct/large/dark/components/link.json +2 -0
  403. package/json/flat/frozenproduct/large/dark/components/table.json +1 -0
  404. package/json/flat/frozenproduct/large/dark/mode.json +16 -3
  405. package/json/flat/frozenproduct/large/light/components/button.json +10 -1
  406. package/json/flat/frozenproduct/large/light/components/focus.json +4 -0
  407. package/json/flat/frozenproduct/large/light/components/link.json +2 -0
  408. package/json/flat/frozenproduct/large/light/components/table.json +1 -0
  409. package/json/flat/frozenproduct/large/light/mode.json +16 -3
  410. package/json/flat/frozenproduct/small/dark/components/button.json +10 -1
  411. package/json/flat/frozenproduct/small/dark/components/focus.json +4 -0
  412. package/json/flat/frozenproduct/small/dark/components/link.json +2 -0
  413. package/json/flat/frozenproduct/small/dark/components/table.json +1 -0
  414. package/json/flat/frozenproduct/small/dark/mode.json +16 -3
  415. package/json/flat/frozenproduct/small/light/components/button.json +10 -1
  416. package/json/flat/frozenproduct/small/light/components/focus.json +4 -0
  417. package/json/flat/frozenproduct/small/light/components/link.json +2 -0
  418. package/json/flat/frozenproduct/small/light/components/table.json +1 -0
  419. package/json/flat/frozenproduct/small/light/mode.json +16 -3
  420. package/json/flat/marketing/large/dark/components/button.json +10 -1
  421. package/json/flat/marketing/large/dark/components/focus.json +4 -0
  422. package/json/flat/marketing/large/dark/components/link.json +2 -0
  423. package/json/flat/marketing/large/dark/components/table.json +1 -0
  424. package/json/flat/marketing/large/dark/mode.json +16 -3
  425. package/json/flat/marketing/large/light/components/button.json +10 -1
  426. package/json/flat/marketing/large/light/components/focus.json +4 -0
  427. package/json/flat/marketing/large/light/components/link.json +2 -0
  428. package/json/flat/marketing/large/light/components/table.json +1 -0
  429. package/json/flat/marketing/large/light/mode.json +16 -3
  430. package/json/flat/marketing/small/dark/components/button.json +10 -1
  431. package/json/flat/marketing/small/dark/components/focus.json +4 -0
  432. package/json/flat/marketing/small/dark/components/link.json +2 -0
  433. package/json/flat/marketing/small/dark/components/table.json +1 -0
  434. package/json/flat/marketing/small/dark/mode.json +16 -3
  435. package/json/flat/marketing/small/light/components/button.json +10 -1
  436. package/json/flat/marketing/small/light/components/focus.json +4 -0
  437. package/json/flat/marketing/small/light/components/link.json +2 -0
  438. package/json/flat/marketing/small/light/components/table.json +1 -0
  439. package/json/flat/marketing/small/light/mode.json +16 -3
  440. package/json/flat/product/large/dark/components/button.json +10 -1
  441. package/json/flat/product/large/dark/components/focus.json +4 -0
  442. package/json/flat/product/large/dark/components/link.json +2 -0
  443. package/json/flat/product/large/dark/components/table.json +1 -0
  444. package/json/flat/product/large/dark/mode.json +16 -3
  445. package/json/flat/product/large/light/components/button.json +10 -1
  446. package/json/flat/product/large/light/components/focus.json +4 -0
  447. package/json/flat/product/large/light/components/link.json +2 -0
  448. package/json/flat/product/large/light/components/table.json +1 -0
  449. package/json/flat/product/large/light/mode.json +16 -3
  450. package/json/flat/product/small/dark/components/button.json +10 -1
  451. package/json/flat/product/small/dark/components/focus.json +4 -0
  452. package/json/flat/product/small/dark/components/link.json +2 -0
  453. package/json/flat/product/small/dark/components/table.json +1 -0
  454. package/json/flat/product/small/dark/mode.json +16 -3
  455. package/json/flat/product/small/light/components/button.json +10 -1
  456. package/json/flat/product/small/light/components/focus.json +4 -0
  457. package/json/flat/product/small/light/components/link.json +2 -0
  458. package/json/flat/product/small/light/components/table.json +1 -0
  459. package/json/flat/product/small/light/mode.json +16 -3
  460. package/json/nested/frozenproduct/large/dark/components/button.json +13 -2
  461. package/json/nested/frozenproduct/large/dark/components/focus.json +7 -1
  462. package/json/nested/frozenproduct/large/dark/components/link.json +5 -1
  463. package/json/nested/frozenproduct/large/dark/components/table.json +1 -0
  464. package/json/nested/frozenproduct/large/dark/mode.json +22 -5
  465. package/json/nested/frozenproduct/large/light/components/button.json +13 -2
  466. package/json/nested/frozenproduct/large/light/components/focus.json +7 -1
  467. package/json/nested/frozenproduct/large/light/components/link.json +5 -1
  468. package/json/nested/frozenproduct/large/light/components/table.json +1 -0
  469. package/json/nested/frozenproduct/large/light/mode.json +22 -5
  470. package/json/nested/frozenproduct/small/dark/components/button.json +13 -2
  471. package/json/nested/frozenproduct/small/dark/components/focus.json +7 -1
  472. package/json/nested/frozenproduct/small/dark/components/link.json +5 -1
  473. package/json/nested/frozenproduct/small/dark/components/table.json +1 -0
  474. package/json/nested/frozenproduct/small/dark/mode.json +22 -5
  475. package/json/nested/frozenproduct/small/light/components/button.json +13 -2
  476. package/json/nested/frozenproduct/small/light/components/focus.json +7 -1
  477. package/json/nested/frozenproduct/small/light/components/link.json +5 -1
  478. package/json/nested/frozenproduct/small/light/components/table.json +1 -0
  479. package/json/nested/frozenproduct/small/light/mode.json +22 -5
  480. package/json/nested/marketing/large/dark/components/button.json +13 -2
  481. package/json/nested/marketing/large/dark/components/focus.json +7 -1
  482. package/json/nested/marketing/large/dark/components/link.json +5 -1
  483. package/json/nested/marketing/large/dark/components/table.json +1 -0
  484. package/json/nested/marketing/large/dark/mode.json +22 -5
  485. package/json/nested/marketing/large/light/components/button.json +13 -2
  486. package/json/nested/marketing/large/light/components/focus.json +7 -1
  487. package/json/nested/marketing/large/light/components/link.json +5 -1
  488. package/json/nested/marketing/large/light/components/table.json +1 -0
  489. package/json/nested/marketing/large/light/mode.json +22 -5
  490. package/json/nested/marketing/small/dark/components/button.json +13 -2
  491. package/json/nested/marketing/small/dark/components/focus.json +7 -1
  492. package/json/nested/marketing/small/dark/components/link.json +5 -1
  493. package/json/nested/marketing/small/dark/components/table.json +1 -0
  494. package/json/nested/marketing/small/dark/mode.json +22 -5
  495. package/json/nested/marketing/small/light/components/button.json +13 -2
  496. package/json/nested/marketing/small/light/components/focus.json +7 -1
  497. package/json/nested/marketing/small/light/components/link.json +5 -1
  498. package/json/nested/marketing/small/light/components/table.json +1 -0
  499. package/json/nested/marketing/small/light/mode.json +22 -5
  500. package/json/nested/product/large/dark/components/button.json +13 -2
  501. package/json/nested/product/large/dark/components/focus.json +7 -1
  502. package/json/nested/product/large/dark/components/link.json +5 -1
  503. package/json/nested/product/large/dark/components/table.json +1 -0
  504. package/json/nested/product/large/dark/mode.json +22 -5
  505. package/json/nested/product/large/light/components/button.json +13 -2
  506. package/json/nested/product/large/light/components/focus.json +7 -1
  507. package/json/nested/product/large/light/components/link.json +5 -1
  508. package/json/nested/product/large/light/components/table.json +1 -0
  509. package/json/nested/product/large/light/mode.json +22 -5
  510. package/json/nested/product/small/dark/components/button.json +13 -2
  511. package/json/nested/product/small/dark/components/focus.json +7 -1
  512. package/json/nested/product/small/dark/components/link.json +5 -1
  513. package/json/nested/product/small/dark/components/table.json +1 -0
  514. package/json/nested/product/small/dark/mode.json +22 -5
  515. package/json/nested/product/small/light/components/button.json +13 -2
  516. package/json/nested/product/small/light/components/focus.json +7 -1
  517. package/json/nested/product/small/light/components/link.json +5 -1
  518. package/json/nested/product/small/light/components/table.json +1 -0
  519. package/json/nested/product/small/light/mode.json +22 -5
  520. package/package.json +1 -1
  521. package/sage-design-tokens-13.2.0.tgz +0 -0
  522. package/scss/frozenproduct/large/components/button.scss +16 -7
  523. package/scss/frozenproduct/large/components/focus.scss +4 -0
  524. package/scss/frozenproduct/large/components/link.scss +2 -0
  525. package/scss/frozenproduct/large/components/table.scss +1 -0
  526. package/scss/frozenproduct/large/dark.scss +16 -3
  527. package/scss/frozenproduct/large/light.scss +16 -3
  528. package/scss/frozenproduct/small/components/button.scss +16 -7
  529. package/scss/frozenproduct/small/components/focus.scss +4 -0
  530. package/scss/frozenproduct/small/components/link.scss +2 -0
  531. package/scss/frozenproduct/small/components/table.scss +1 -0
  532. package/scss/frozenproduct/small/dark.scss +16 -3
  533. package/scss/frozenproduct/small/light.scss +16 -3
  534. package/scss/marketing/large/components/button.scss +27 -18
  535. package/scss/marketing/large/components/container.scss +9 -9
  536. package/scss/marketing/large/components/focus.scss +4 -0
  537. package/scss/marketing/large/components/form.scss +7 -7
  538. package/scss/marketing/large/components/link.scss +4 -2
  539. package/scss/marketing/large/components/nav.scss +5 -5
  540. package/scss/marketing/large/components/page.scss +1 -1
  541. package/scss/marketing/large/components/popover.scss +2 -2
  542. package/scss/marketing/large/components/progress.scss +6 -6
  543. package/scss/marketing/large/components/status.scss +3 -3
  544. package/scss/marketing/large/components/tab.scss +7 -7
  545. package/scss/marketing/large/components/table.scss +11 -10
  546. package/scss/marketing/large/dark.scss +16 -3
  547. package/scss/marketing/large/light.scss +16 -3
  548. package/scss/marketing/small/components/button.scss +16 -7
  549. package/scss/marketing/small/components/focus.scss +4 -0
  550. package/scss/marketing/small/components/link.scss +2 -0
  551. package/scss/marketing/small/components/table.scss +1 -0
  552. package/scss/marketing/small/dark.scss +16 -3
  553. package/scss/marketing/small/light.scss +16 -3
  554. package/scss/product/large/components/button.scss +27 -18
  555. package/scss/product/large/components/container.scss +9 -9
  556. package/scss/product/large/components/focus.scss +4 -0
  557. package/scss/product/large/components/form.scss +7 -7
  558. package/scss/product/large/components/link.scss +4 -2
  559. package/scss/product/large/components/nav.scss +5 -5
  560. package/scss/product/large/components/page.scss +1 -1
  561. package/scss/product/large/components/popover.scss +2 -2
  562. package/scss/product/large/components/progress.scss +6 -6
  563. package/scss/product/large/components/status.scss +3 -3
  564. package/scss/product/large/components/tab.scss +7 -7
  565. package/scss/product/large/components/table.scss +11 -10
  566. package/scss/product/large/dark.scss +16 -3
  567. package/scss/product/large/light.scss +16 -3
  568. package/scss/product/small/components/button.scss +16 -7
  569. package/scss/product/small/components/focus.scss +4 -0
  570. package/scss/product/small/components/link.scss +2 -0
  571. package/scss/product/small/components/table.scss +1 -0
  572. package/scss/product/small/dark.scss +16 -3
  573. package/scss/product/small/light.scss +16 -3
  574. package/sage-design-tokens-13.1.0.tgz +0 -0
package/css/frozenproduct/all.css CHANGED
@@ -216,10 +216,18 @@
216
216
  --modes-color-interactive-danger-default-light: #CD384B;
217
217
  --modes-color-interactive-danger-default-alt-light: #b23342; /* For links in datatables */
218
218
  --modes-color-interactive-danger-hover-light: #aa323f; /* used on solid-pill and primary-button hover states */
219
- --modes-color-interactive-danger-hover-alt-light: #f9d1cf; /* used on secondary-button hover states */
219
+ --modes-color-interactive-danger-hover-alt-light: #cd384b14; /* used on secondary-button hover states */
220
220
  --modes-color-interactive-danger-hover-alt2-light: #a3303d; /* used on link hover state */
221
221
  --modes-color-interactive-danger-with-active-light: #FFFFFF;
222
222
  --modes-color-interactive-danger-with-default-light: #FFFFFF;
223
+ --modes-color-interactive-danger-inverse-active-light: #f28486; /* used on pill hover states */
224
+ --modes-color-interactive-danger-inverse-default-light: #E13E53;
225
+ --modes-color-interactive-danger-inverse-default-alt-light: #e85b66; /* For links in datatables */
226
+ --modes-color-interactive-danger-inverse-hover-light: #eb646c; /* used on solid-pill and primary-button hover states */
227
+ --modes-color-interactive-danger-inverse-hover-alt-light: #e13e5314; /* used on secondary-button hover states */
228
+ --modes-color-interactive-danger-inverse-hover-alt2-light: #ec6a71; /* used on link hover state */
229
+ --modes-color-interactive-danger-inverse-with-active-light: #000000;
230
+ --modes-color-interactive-danger-inverse-with-default-light: #000000;
223
231
  --modes-color-interactive-data-entry-default-light: #FFFFFF; /* Input backgrounds. */
224
232
  --modes-color-interactive-data-entry-with-active-light: #000000; /* checkbox tick icon or radio handle */
225
233
  --modes-color-interactive-data-entry-with-active-alt-light: #FFFFFF;
@@ -230,10 +238,14 @@
230
238
  --modes-color-interactive-data-entry-content-light: #000000f2; /* Input Text */
231
239
  --modes-color-interactive-data-entry-content-alt-light: #0000008c; /* Hint text, placeholder text, character count etc */
232
240
  --modes-color-interactive-data-entry-frozen-with-default-light: #698495; /* Input borders. */
233
- --modes-color-interactive-focus-with-default-light: #FFB500;
234
- --modes-color-interactive-focus-with-default-alt-light: #ffd27e;
235
241
  --modes-color-interactive-focus-default-light: #000000;
236
242
  --modes-color-interactive-focus-content-light: #000000;
243
+ --modes-color-interactive-focus-with-default-light: #FFB500;
244
+ --modes-color-interactive-focus-with-default-alt-light: #ffd27e;
245
+ --modes-color-interactive-focus-inverse-default-light: #FFB500;
246
+ --modes-color-interactive-focus-inverse-content-light: #FFFFFF;
247
+ --modes-color-interactive-focus-inverse-with-default-light: #000000;
248
+ --modes-color-interactive-focus-inverse-with-default-alt-light: #926916;
237
249
  --modes-color-interactive-inactive-default-light: #a6a6a6; /* Disabled form secondary, tertiary and input borders borders. */
238
250
  --modes-color-interactive-inactive-mask-light: #000000; /* full screen takeover token for modal dimmer */
239
251
  --modes-color-interactive-inactive-default-alt-light: #f3f3f3; /* Disabled input and button backgrounds, button borders and input backgrounds. */
@@ -244,6 +256,7 @@
244
256
  --modes-color-interactive-inactive-frozen-default-alt-light: #e5eaed; /* Disabled input and button backgrounds, button borders and input backgrounds. */
245
257
  --modes-color-interactive-inactive-inverse-default-light: #4b4b4b; /* Inversed disabled form secondary, tertiary and input borders borders. */
246
258
  --modes-color-interactive-inactive-inverse-content-light: #ffffff6b; /* Inversed disabled text inside buttons and form inputs. */
259
+ --modes-color-interactive-inactive-inverse-content-alt-light: #000000; /* Disabled labels inside buttons and Switch. */
247
260
  --modes-color-interactive-monochrome-active-light: #000000;
248
261
  --modes-color-interactive-monochrome-active-alt-light: #00000029;
249
262
  --modes-color-interactive-monochrome-default-light: #000000e6;
@@ -475,10 +488,18 @@
475
488
  --modes-color-interactive-danger-default-dark: #E13E53;
476
489
  --modes-color-interactive-danger-default-alt-dark: #e85b66; /* for links in datatables */
477
490
  --modes-color-interactive-danger-hover-dark: #eb646c;
478
- --modes-color-interactive-danger-hover-alt-dark: #3f1a1c; /* button hover on dark */
491
+ --modes-color-interactive-danger-hover-alt-dark: #e13e5314; /* button hover on dark */
479
492
  --modes-color-interactive-danger-hover-alt2-dark: #ec6a71; /* for links in datatables */
480
493
  --modes-color-interactive-danger-with-active-dark: #000000;
481
494
  --modes-color-interactive-danger-with-default-dark: #000000;
495
+ --modes-color-interactive-danger-inverse-active-dark: #882b34; /* used on pill hover states */
496
+ --modes-color-interactive-danger-inverse-default-dark: #CD384B;
497
+ --modes-color-interactive-danger-inverse-default-alt-dark: #b23342; /* For links in datatables */
498
+ --modes-color-interactive-danger-inverse-hover-dark: #aa323f; /* used on solid-pill and primary-button hover states */
499
+ --modes-color-interactive-danger-inverse-hover-alt-dark: #cd384b14; /* used on secondary-button hover states */
500
+ --modes-color-interactive-danger-inverse-hover-alt2-dark: #a3303d; /* used on link hover state */
501
+ --modes-color-interactive-danger-inverse-with-active-dark: #FFFFFF;
502
+ --modes-color-interactive-danger-inverse-with-default-dark: #FFFFFF;
482
503
  --modes-color-interactive-data-entry-default-dark: #000000; /* Input backgrounds. */
483
504
  --modes-color-interactive-data-entry-with-active-dark: #FFFFFF; /* checkbox tick icon or radio handle */
484
505
  --modes-color-interactive-data-entry-with-active-alt-dark: #000000;
@@ -489,10 +510,14 @@
489
510
  --modes-color-interactive-data-entry-content-dark: #fffffff2; /* Input Text */
490
511
  --modes-color-interactive-data-entry-content-alt-dark: #ffffff8c; /* Hint text, placeholder text, character count etc */
491
512
  --modes-color-interactive-data-entry-frozen-with-default-dark: #777; /* Input borders. */
492
- --modes-color-interactive-focus-with-default-dark: #000000;
513
+ --modes-color-interactive-focus-default-dark: #FFB500;
493
514
  --modes-color-interactive-focus-content-dark: #FFFFFF;
515
+ --modes-color-interactive-focus-with-default-dark: #000000;
494
516
  --modes-color-interactive-focus-with-default-alt-dark: #926916;
495
- --modes-color-interactive-focus-default-dark: #FFB500;
517
+ --modes-color-interactive-focus-inverse-default-dark: #000000;
518
+ --modes-color-interactive-focus-inverse-content-dark: #000000;
519
+ --modes-color-interactive-focus-inverse-with-default-dark: #FFB500;
520
+ --modes-color-interactive-focus-inverse-with-default-alt-dark: #ffd27e;
496
521
  --modes-color-interactive-inactive-default-dark: #4b4b4b; /* disabled buttons on dark */
497
522
  --modes-color-interactive-inactive-mask-dark: #FFFFFF; /* full screen takeover token for modal dimmer */
498
523
  --modes-color-interactive-inactive-default-alt-dark: #0e0e0e; /* Disabled button backgrounds and borders ON DARK */
@@ -503,6 +528,7 @@
503
528
  --modes-color-interactive-inactive-frozen-default-alt-dark: #0e0e0e; /* Disabled input and button backgrounds, button borders and input backgrounds. */
504
529
  --modes-color-interactive-inactive-inverse-default-dark: #a6a6a6; /* Inversed disabled form secondary, tertiary and input borders borders. */
505
530
  --modes-color-interactive-inactive-inverse-content-dark: #0000006b; /* Inversed disabled text inside buttons and form inputs. */
531
+ --modes-color-interactive-inactive-inverse-content-alt-dark: #FFFFFF; /* Disabled labels inside buttons and Switch. */
506
532
  --modes-color-interactive-monochrome-active-dark: #FFFFFF;
507
533
  --modes-color-interactive-monochrome-active-alt-dark: #ffffff29;
508
534
  --modes-color-interactive-monochrome-default-dark: #ffffffe6;
@@ -705,8 +731,20 @@
705
731
  --button-color-ai-border-enabled: light-dark(var(--modes-color-interactive-ai-default-light), var(--modes-color-interactive-ai-default-dark));
706
732
  --button-color-ai-border-hover: light-dark(var(--modes-color-interactive-ai-default-light), var(--modes-color-interactive-ai-default-dark));
707
733
  --button-color-destructive-primary-bg-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
734
+ --button-color-destructive-primary-label-enabled: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
735
+ --button-color-destructive-primary-label-hover: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
708
736
  --button-color-destructive-secondary-border-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
709
737
  --button-color-destructive-secondary-label-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
738
+ --button-color-typical-primary-bg-default: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark)); /* For spacer in Split button */
739
+ --button-color-typical-primary-label-active: light-dark(var(--modes-color-interactive-primary-with-active-light), var(--modes-color-interactive-primary-with-active-dark));
740
+ --button-color-typical-primary-label-enabled: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
741
+ --button-color-typical-primary-label-hover: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
742
+ --button-color-typical-primary-inverse-bg-default: light-dark(var(--modes-color-interactive-primary-inverse-with-default-light), var(--modes-color-interactive-primary-inverse-with-default-dark)); /* For spacer in Split button */
743
+ --button-color-typical-primary-inverse-bg-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-default-light), var(--modes-color-interactive-inactive-inverse-default-dark));
744
+ --button-color-typical-primary-inverse-label-active: light-dark(var(--modes-color-interactive-primary-inverse-with-active-light), var(--modes-color-interactive-primary-inverse-with-active-dark));
745
+ --button-color-typical-primary-inverse-label-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-content-alt-light), var(--modes-color-interactive-inactive-inverse-content-alt-dark));
746
+ --button-color-typical-primary-inverse-label-enabled: light-dark(var(--modes-color-interactive-primary-inverse-with-default-light), var(--modes-color-interactive-primary-inverse-with-default-dark));
747
+ --button-color-typical-primary-inverse-label-hover: light-dark(var(--modes-color-interactive-primary-inverse-with-default-light), var(--modes-color-interactive-primary-inverse-with-default-dark));
710
748
  --button-color-typical-secondary-inverse-border-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-default-light), var(--modes-color-interactive-inactive-inverse-default-dark));
711
749
  --button-color-typical-secondary-inverse-label-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-content-light), var(--modes-color-interactive-inactive-inverse-content-dark));
712
750
  --button-color-typical-tertiary-inverse-border-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-default-light), var(--modes-color-interactive-inactive-inverse-default-dark));
@@ -730,9 +768,11 @@
730
768
  --button-color-ai-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-alt-light), var(--modes-color-interactive-monochrome-with-active-alt-dark));
731
769
  --button-color-ai-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
732
770
  --button-color-destructive-primary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
771
+ --button-color-destructive-secondary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-alt-light), var(--modes-color-interactive-danger-hover-alt-dark));
733
772
  --button-color-destructive-secondary-border-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
734
773
  --button-color-destructive-secondary-label-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
735
774
  --button-color-typical-primary-bg-enabled: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
775
+ --button-color-typical-primary-inverse-bg-enabled: light-dark(var(--modes-color-interactive-primary-inverse-default-light), var(--modes-color-interactive-primary-inverse-default-dark));
736
776
  --button-color-typical-secondary-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-alt-light), var(--modes-color-interactive-monochrome-with-active-alt-dark));
737
777
  --button-color-typical-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
738
778
  --button-color-typical-tertiary-bg-enabled: var(--button-color-none);
@@ -866,17 +906,12 @@
866
906
  --button-color-ai-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
867
907
  --button-color-ai-label-enabled: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
868
908
  --button-color-destructive-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
869
- --button-color-destructive-primary-label-enabled: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
870
- --button-color-destructive-primary-label-hover: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
871
- --button-color-destructive-secondary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-alt-light), var(--modes-color-interactive-danger-hover-alt-dark));
872
909
  --button-color-destructive-secondary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
873
910
  --button-color-typical-primary-bg-active: light-dark(var(--modes-color-interactive-primary-active-light), var(--modes-color-interactive-primary-active-dark));
874
- --button-color-typical-primary-bg-default: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark)); /* For spacer in Split button */
875
911
  --button-color-typical-primary-bg-hover: light-dark(var(--modes-color-interactive-primary-hover-light), var(--modes-color-interactive-primary-hover-dark));
876
- --button-color-typical-primary-label-active: light-dark(var(--modes-color-interactive-primary-with-active-light), var(--modes-color-interactive-primary-with-active-dark));
877
912
  --button-color-typical-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
878
- --button-color-typical-primary-label-enabled: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
879
- --button-color-typical-primary-label-hover: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
913
+ --button-color-typical-primary-inverse-bg-active: light-dark(var(--modes-color-interactive-primary-inverse-active-light), var(--modes-color-interactive-primary-inverse-active-dark));
914
+ --button-color-typical-primary-inverse-bg-hover: light-dark(var(--modes-color-interactive-primary-inverse-hover-light), var(--modes-color-interactive-primary-inverse-hover-dark));
880
915
  --button-color-typical-secondary-bg-active: light-dark(var(--modes-color-interactive-primary-active-alt-light), var(--modes-color-interactive-primary-active-alt-dark));
881
916
  --button-color-typical-secondary-border-active: light-dark(var(--modes-color-interactive-primary-active-light), var(--modes-color-interactive-primary-active-dark));
882
917
  --button-color-typical-secondary-border-enabled: light-dark(var(--modes-color-interactive-primary-default-alt-light), var(--modes-color-interactive-primary-default-alt-dark));
@@ -1295,6 +1330,10 @@
1295
1330
  --focus-color-borderalt: light-dark(var(--modes-color-interactive-focus-default-light), var(--modes-color-interactive-focus-default-dark));
1296
1331
  --focus-color-border: light-dark(var(--modes-color-interactive-focus-with-default-light), var(--modes-color-interactive-focus-with-default-dark));
1297
1332
  --focus-color-label: light-dark(var(--modes-color-interactive-focus-content-light), var(--modes-color-interactive-focus-content-dark));
1333
+ --focus-color-inverse-bg: light-dark(var(--modes-color-interactive-focus-inverse-with-default-alt-light), var(--modes-color-interactive-focus-inverse-with-default-alt-dark));
1334
+ --focus-color-inverse-borderalt: light-dark(var(--modes-color-interactive-focus-inverse-default-light), var(--modes-color-interactive-focus-inverse-default-dark));
1335
+ --focus-color-inverse-border: light-dark(var(--modes-color-interactive-focus-inverse-with-default-light), var(--modes-color-interactive-focus-inverse-with-default-dark));
1336
+ --focus-color-inverse-label: light-dark(var(--modes-color-interactive-focus-inverse-content-light), var(--modes-color-interactive-focus-inverse-content-dark));
1298
1337
  --focus-size-underline: var(--global-size-micro-xs); /* focus black underline on links and skiplink */
1299
1338
  --focus-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary focus (dropdown item) */
1300
1339
  --focus-borderwidth-inner: var(--global-borderwidth-s); /* Focus border (inner) */
@@ -1598,10 +1637,12 @@
1598
1637
  --link-typography-heading-m: var(--global-typography-component-underlined-firm-m);
1599
1638
  --link-typography-heading-l: var(--global-typography-component-underlined-firm-l);
1600
1639
  --link-color-destructive-label-default: light-dark(var(--modes-color-interactive-danger-default-alt-light), var(--modes-color-interactive-danger-default-alt-dark)); /* . */
1640
+ --link-color-destructive-inverse-label-default: light-dark(var(--modes-color-interactive-danger-inverse-default-alt-light), var(--modes-color-interactive-danger-inverse-default-alt-dark)); /* . */
1601
1641
  --link-color-subtle-label-hover: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
1602
1642
  --link-color-subtle-inverse-label-hover: light-dark(var(--modes-color-interactive-monochrome-inverse-active-light), var(--modes-color-interactive-monochrome-inverse-active-dark));
1603
1643
  --link-boxshadow-skiplink: var(--global-boxshadow-container-near);
1604
1644
  --link-color-destructive-label-hover: light-dark(var(--modes-color-interactive-danger-hover-alt2-light), var(--modes-color-interactive-danger-hover-alt2-dark));
1645
+ --link-color-destructive-inverse-label-hover: light-dark(var(--modes-color-interactive-danger-inverse-hover-alt2-light), var(--modes-color-interactive-danger-inverse-hover-alt2-dark));
1605
1646
  --link-color-typical-label-default: light-dark(var(--modes-color-interactive-primary-default-alt3-light), var(--modes-color-interactive-primary-default-alt3-dark));
1606
1647
  --link-color-typical-inverse-label-default: light-dark(var(--modes-color-interactive-primary-inverse-default-alt3-light), var(--modes-color-interactive-primary-inverse-default-alt3-dark));
1607
1648
  --link-color-subtle-label-default: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
@@ -2303,6 +2344,7 @@
2303
2344
  --table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border */
2304
2345
  --table-borderwidth-thick: var(--global-borderwidth-s); /* header border for subtle */
2305
2346
  --table-space-none: var(--global-space-none);
2347
+ --table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
2306
2348
  --table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */
2307
2349
  --table-space-row-x-s: var(--global-space-macro-xs); /* Left and right padding inside S row cells */
2308
2350
  --table-space-row-x-m: var(--global-space-macro-xs); /* Left and right padding inside M row cells */
package/css/frozenproduct/large/components/button.css CHANGED
@@ -19,8 +19,20 @@
19
19
  --button-color-ai-border-enabled: var(--modes-color-interactive-ai-default);
20
20
  --button-color-ai-border-hover: var(--modes-color-interactive-ai-default);
21
21
  --button-color-destructive-primary-bg-enabled: var(--modes-color-interactive-danger-default);
22
+ --button-color-destructive-primary-label-enabled: var(--modes-color-interactive-danger-with-default);
23
+ --button-color-destructive-primary-label-hover: var(--modes-color-interactive-danger-with-default);
22
24
  --button-color-destructive-secondary-border-enabled: var(--modes-color-interactive-danger-default);
23
25
  --button-color-destructive-secondary-label-enabled: var(--modes-color-interactive-danger-default);
26
+ --button-color-typical-primary-bg-default: var(--modes-color-interactive-primary-with-default); /* For spacer in Split button */
27
+ --button-color-typical-primary-label-active: var(--modes-color-interactive-primary-with-active);
28
+ --button-color-typical-primary-label-enabled: var(--modes-color-interactive-primary-with-default);
29
+ --button-color-typical-primary-label-hover: var(--modes-color-interactive-primary-with-default);
30
+ --button-color-typical-primary-inverse-bg-default: var(--modes-color-interactive-primary-inverse-with-default); /* For spacer in Split button */
31
+ --button-color-typical-primary-inverse-bg-disabled: var(--modes-color-interactive-inactive-inverse-default);
32
+ --button-color-typical-primary-inverse-label-active: var(--modes-color-interactive-primary-inverse-with-active);
33
+ --button-color-typical-primary-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content-alt);
34
+ --button-color-typical-primary-inverse-label-enabled: var(--modes-color-interactive-primary-inverse-with-default);
35
+ --button-color-typical-primary-inverse-label-hover: var(--modes-color-interactive-primary-inverse-with-default);
24
36
  --button-color-typical-secondary-inverse-border-disabled: var(--modes-color-interactive-inactive-inverse-default);
25
37
  --button-color-typical-secondary-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content);
26
38
  --button-color-typical-tertiary-inverse-border-disabled: var(--modes-color-interactive-inactive-inverse-default);
@@ -59,9 +71,11 @@
59
71
  --button-color-ai-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
60
72
  --button-color-ai-label-hover: var(--modes-color-interactive-monochrome-with-hover);
61
73
  --button-color-destructive-primary-bg-hover: var(--modes-color-interactive-danger-hover);
74
+ --button-color-destructive-secondary-bg-hover: var(--modes-color-interactive-danger-hover-alt);
62
75
  --button-color-destructive-secondary-border-hover: var(--modes-color-interactive-danger-hover);
63
76
  --button-color-destructive-secondary-label-hover: var(--modes-color-interactive-danger-hover);
64
77
  --button-color-typical-primary-bg-enabled: var(--modes-color-interactive-primary-default);
78
+ --button-color-typical-primary-inverse-bg-enabled: var(--modes-color-interactive-primary-inverse-default);
65
79
  --button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
66
80
  --button-color-typical-secondary-label-hover: var(--modes-color-interactive-monochrome-with-hover);
67
81
  --button-color-typical-tertiary-bg-enabled: var(--button-color-none);
@@ -195,17 +209,12 @@
195
209
  --button-color-ai-label-disabled: var(--modes-color-interactive-inactive-content);
196
210
  --button-color-ai-label-enabled: var(--modes-color-interactive-monochrome-default);
197
211
  --button-color-destructive-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
198
- --button-color-destructive-primary-label-enabled: var(--modes-color-interactive-danger-with-default);
199
- --button-color-destructive-primary-label-hover: var(--modes-color-interactive-danger-with-default);
200
- --button-color-destructive-secondary-bg-hover: var(--modes-color-interactive-danger-hover-alt);
201
212
  --button-color-destructive-secondary-label-disabled: var(--modes-color-interactive-inactive-content);
202
213
  --button-color-typical-primary-bg-active: var(--modes-color-interactive-primary-active);
203
- --button-color-typical-primary-bg-default: var(--modes-color-interactive-primary-with-default); /* For spacer in Split button */
204
214
  --button-color-typical-primary-bg-hover: var(--modes-color-interactive-primary-hover);
205
- --button-color-typical-primary-label-active: var(--modes-color-interactive-primary-with-active);
206
215
  --button-color-typical-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
207
- --button-color-typical-primary-label-enabled: var(--modes-color-interactive-primary-with-default);
208
- --button-color-typical-primary-label-hover: var(--modes-color-interactive-primary-with-default);
216
+ --button-color-typical-primary-inverse-bg-active: var(--modes-color-interactive-primary-inverse-active);
217
+ --button-color-typical-primary-inverse-bg-hover: var(--modes-color-interactive-primary-inverse-hover);
209
218
  --button-color-typical-secondary-bg-active: var(--modes-color-interactive-primary-active-alt);
210
219
  --button-color-typical-secondary-border-active: var(--modes-color-interactive-primary-active);
211
220
  --button-color-typical-secondary-border-enabled: var(--modes-color-interactive-primary-default-alt);
package/css/frozenproduct/large/components/focus.css CHANGED
@@ -7,6 +7,10 @@
7
7
  --focus-color-borderalt: var(--modes-color-interactive-focus-default);
8
8
  --focus-color-border: var(--modes-color-interactive-focus-with-default);
9
9
  --focus-color-label: var(--modes-color-interactive-focus-content);
10
+ --focus-color-inverse-bg: var(--modes-color-interactive-focus-inverse-with-default-alt);
11
+ --focus-color-inverse-borderalt: var(--modes-color-interactive-focus-inverse-default);
12
+ --focus-color-inverse-border: var(--modes-color-interactive-focus-inverse-with-default);
13
+ --focus-color-inverse-label: var(--modes-color-interactive-focus-inverse-content);
10
14
  --focus-size-underline: var(--global-size-micro-xs); /* focus black underline on links and skiplink */
11
15
  --focus-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary focus (dropdown item) */
12
16
  --focus-borderwidth-inner: var(--global-borderwidth-s); /* Focus border (inner) */
package/css/frozenproduct/large/components/link.css CHANGED
@@ -16,10 +16,12 @@
16
16
  --link-typography-adaptive-heading-m: var(--global-typography-adaptive-component-underlined-firm-m);
17
17
  --link-typography-adaptive-heading-l: var(--global-typography-adaptive-component-underlined-firm-l);
18
18
  --link-color-destructive-label-default: var(--modes-color-interactive-danger-default-alt); /* . */
19
+ --link-color-destructive-inverse-label-default: var(--modes-color-interactive-danger-inverse-default-alt); /* . */
19
20
  --link-color-subtle-label-hover: var(--modes-color-interactive-monochrome-active);
20
21
  --link-color-subtle-inverse-label-hover: var(--modes-color-interactive-monochrome-inverse-active);
21
22
  --link-boxshadow-skiplink: var(--global-boxshadow-container-near);
22
23
  --link-color-destructive-label-hover: var(--modes-color-interactive-danger-hover-alt2);
24
+ --link-color-destructive-inverse-label-hover: var(--modes-color-interactive-danger-inverse-hover-alt2);
23
25
  --link-color-typical-label-default: var(--modes-color-interactive-primary-default-alt3);
24
26
  --link-color-typical-inverse-label-default: var(--modes-color-interactive-primary-inverse-default-alt3);
25
27
  --link-color-subtle-label-default: var(--modes-color-interactive-monochrome-default);
package/css/frozenproduct/large/components/table.css CHANGED
@@ -56,6 +56,7 @@
56
56
  --table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border */
57
57
  --table-borderwidth-thick: var(--global-borderwidth-s); /* header border for subtle */
58
58
  --table-space-none: var(--global-space-none);
59
+ --table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
59
60
  --table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */
60
61
  --table-space-row-x-s: var(--global-space-macro-xs); /* Left and right padding inside S row cells */
61
62
  --table-space-row-x-m: var(--global-space-macro-xs); /* Left and right padding inside M row cells */
package/css/frozenproduct/large/dark.css CHANGED
@@ -67,10 +67,18 @@
67
67
  --modes-color-interactive-danger-default: #E13E53;
68
68
  --modes-color-interactive-danger-default-alt: #e85b66; /* for links in datatables */
69
69
  --modes-color-interactive-danger-hover: #eb646c;
70
- --modes-color-interactive-danger-hover-alt: #3f1a1c; /* button hover on dark */
70
+ --modes-color-interactive-danger-hover-alt: #e13e5314; /* button hover on dark */
71
71
  --modes-color-interactive-danger-hover-alt2: #ec6a71; /* for links in datatables */
72
72
  --modes-color-interactive-danger-with-active: #000000;
73
73
  --modes-color-interactive-danger-with-default: #000000;
74
+ --modes-color-interactive-danger-inverse-active: #882b34; /* used on pill hover states */
75
+ --modes-color-interactive-danger-inverse-default: #CD384B;
76
+ --modes-color-interactive-danger-inverse-default-alt: #b23342; /* For links in datatables */
77
+ --modes-color-interactive-danger-inverse-hover: #aa323f; /* used on solid-pill and primary-button hover states */
78
+ --modes-color-interactive-danger-inverse-hover-alt: #cd384b14; /* used on secondary-button hover states */
79
+ --modes-color-interactive-danger-inverse-hover-alt2: #a3303d; /* used on link hover state */
80
+ --modes-color-interactive-danger-inverse-with-active: #FFFFFF;
81
+ --modes-color-interactive-danger-inverse-with-default: #FFFFFF;
74
82
  --modes-color-interactive-data-entry-default: #000000; /* Input backgrounds. */
75
83
  --modes-color-interactive-data-entry-with-active: #FFFFFF; /* checkbox tick icon or radio handle */
76
84
  --modes-color-interactive-data-entry-with-active-alt: #000000;
@@ -81,10 +89,14 @@
81
89
  --modes-color-interactive-data-entry-content: #fffffff2; /* Input Text */
82
90
  --modes-color-interactive-data-entry-content-alt: #ffffff8c; /* Hint text, placeholder text, character count etc */
83
91
  --modes-color-interactive-data-entry-frozen-with-default: #777; /* Input borders. */
84
- --modes-color-interactive-focus-with-default: #000000;
92
+ --modes-color-interactive-focus-default: #FFB500;
85
93
  --modes-color-interactive-focus-content: #FFFFFF;
94
+ --modes-color-interactive-focus-with-default: #000000;
86
95
  --modes-color-interactive-focus-with-default-alt: #926916;
87
- --modes-color-interactive-focus-default: #FFB500;
96
+ --modes-color-interactive-focus-inverse-default: #000000;
97
+ --modes-color-interactive-focus-inverse-content: #000000;
98
+ --modes-color-interactive-focus-inverse-with-default: #FFB500;
99
+ --modes-color-interactive-focus-inverse-with-default-alt: #ffd27e;
88
100
  --modes-color-interactive-inactive-default: #4b4b4b; /* disabled buttons on dark */
89
101
  --modes-color-interactive-inactive-mask: #FFFFFF; /* full screen takeover token for modal dimmer */
90
102
  --modes-color-interactive-inactive-default-alt: #0e0e0e; /* Disabled button backgrounds and borders ON DARK */
@@ -95,6 +107,7 @@
95
107
  --modes-color-interactive-inactive-frozen-default-alt: #0e0e0e; /* Disabled input and button backgrounds, button borders and input backgrounds. */
96
108
  --modes-color-interactive-inactive-inverse-default: #a6a6a6; /* Inversed disabled form secondary, tertiary and input borders borders. */
97
109
  --modes-color-interactive-inactive-inverse-content: #0000006b; /* Inversed disabled text inside buttons and form inputs. */
110
+ --modes-color-interactive-inactive-inverse-content-alt: #FFFFFF; /* Disabled labels inside buttons and Switch. */
98
111
  --modes-color-interactive-monochrome-active: #FFFFFF;
99
112
  --modes-color-interactive-monochrome-active-alt: #ffffff29;
100
113
  --modes-color-interactive-monochrome-default: #ffffffe6;
package/css/frozenproduct/large/light.css CHANGED
@@ -67,10 +67,18 @@
67
67
  --modes-color-interactive-danger-default: #CD384B;
68
68
  --modes-color-interactive-danger-default-alt: #b23342; /* For links in datatables */
69
69
  --modes-color-interactive-danger-hover: #aa323f; /* used on solid-pill and primary-button hover states */
70
- --modes-color-interactive-danger-hover-alt: #f9d1cf; /* used on secondary-button hover states */
70
+ --modes-color-interactive-danger-hover-alt: #cd384b14; /* used on secondary-button hover states */
71
71
  --modes-color-interactive-danger-hover-alt2: #a3303d; /* used on link hover state */
72
72
  --modes-color-interactive-danger-with-active: #FFFFFF;
73
73
  --modes-color-interactive-danger-with-default: #FFFFFF;
74
+ --modes-color-interactive-danger-inverse-active: #f28486; /* used on pill hover states */
75
+ --modes-color-interactive-danger-inverse-default: #E13E53;
76
+ --modes-color-interactive-danger-inverse-default-alt: #e85b66; /* For links in datatables */
77
+ --modes-color-interactive-danger-inverse-hover: #eb646c; /* used on solid-pill and primary-button hover states */
78
+ --modes-color-interactive-danger-inverse-hover-alt: #e13e5314; /* used on secondary-button hover states */
79
+ --modes-color-interactive-danger-inverse-hover-alt2: #ec6a71; /* used on link hover state */
80
+ --modes-color-interactive-danger-inverse-with-active: #000000;
81
+ --modes-color-interactive-danger-inverse-with-default: #000000;
74
82
  --modes-color-interactive-data-entry-default: #FFFFFF; /* Input backgrounds. */
75
83
  --modes-color-interactive-data-entry-with-active: #000000; /* checkbox tick icon or radio handle */
76
84
  --modes-color-interactive-data-entry-with-active-alt: #FFFFFF;
@@ -81,10 +89,14 @@
81
89
  --modes-color-interactive-data-entry-content: #000000f2; /* Input Text */
82
90
  --modes-color-interactive-data-entry-content-alt: #0000008c; /* Hint text, placeholder text, character count etc */
83
91
  --modes-color-interactive-data-entry-frozen-with-default: #698495; /* Input borders. */
84
- --modes-color-interactive-focus-with-default: #FFB500;
85
- --modes-color-interactive-focus-with-default-alt: #ffd27e;
86
92
  --modes-color-interactive-focus-default: #000000;
87
93
  --modes-color-interactive-focus-content: #000000;
94
+ --modes-color-interactive-focus-with-default: #FFB500;
95
+ --modes-color-interactive-focus-with-default-alt: #ffd27e;
96
+ --modes-color-interactive-focus-inverse-default: #FFB500;
97
+ --modes-color-interactive-focus-inverse-content: #FFFFFF;
98
+ --modes-color-interactive-focus-inverse-with-default: #000000;
99
+ --modes-color-interactive-focus-inverse-with-default-alt: #926916;
88
100
  --modes-color-interactive-inactive-default: #a6a6a6; /* Disabled form secondary, tertiary and input borders borders. */
89
101
  --modes-color-interactive-inactive-mask: #000000; /* full screen takeover token for modal dimmer */
90
102
  --modes-color-interactive-inactive-default-alt: #f3f3f3; /* Disabled input and button backgrounds, button borders and input backgrounds. */
@@ -95,6 +107,7 @@
95
107
  --modes-color-interactive-inactive-frozen-default-alt: #e5eaed; /* Disabled input and button backgrounds, button borders and input backgrounds. */
96
108
  --modes-color-interactive-inactive-inverse-default: #4b4b4b; /* Inversed disabled form secondary, tertiary and input borders borders. */
97
109
  --modes-color-interactive-inactive-inverse-content: #ffffff6b; /* Inversed disabled text inside buttons and form inputs. */
110
+ --modes-color-interactive-inactive-inverse-content-alt: #000000; /* Disabled labels inside buttons and Switch. */
98
111
  --modes-color-interactive-monochrome-active: #000000;
99
112
  --modes-color-interactive-monochrome-active-alt: #00000029;
100
113
  --modes-color-interactive-monochrome-default: #000000e6;
package/css/frozenproduct/small/components/button.css CHANGED
@@ -19,8 +19,20 @@
19
19
  --button-color-ai-border-enabled: var(--modes-color-interactive-ai-default);
20
20
  --button-color-ai-border-hover: var(--modes-color-interactive-ai-default);
21
21
  --button-color-destructive-primary-bg-enabled: var(--modes-color-interactive-danger-default);
22
+ --button-color-destructive-primary-label-enabled: var(--modes-color-interactive-danger-with-default);
23
+ --button-color-destructive-primary-label-hover: var(--modes-color-interactive-danger-with-default);
22
24
  --button-color-destructive-secondary-border-enabled: var(--modes-color-interactive-danger-default);
23
25
  --button-color-destructive-secondary-label-enabled: var(--modes-color-interactive-danger-default);
26
+ --button-color-typical-primary-bg-default: var(--modes-color-interactive-primary-with-default); /* For spacer in Split button */
27
+ --button-color-typical-primary-label-active: var(--modes-color-interactive-primary-with-active);
28
+ --button-color-typical-primary-label-enabled: var(--modes-color-interactive-primary-with-default);
29
+ --button-color-typical-primary-label-hover: var(--modes-color-interactive-primary-with-default);
30
+ --button-color-typical-primary-inverse-bg-default: var(--modes-color-interactive-primary-inverse-with-default); /* For spacer in Split button */
31
+ --button-color-typical-primary-inverse-bg-disabled: var(--modes-color-interactive-inactive-inverse-default);
32
+ --button-color-typical-primary-inverse-label-active: var(--modes-color-interactive-primary-inverse-with-active);
33
+ --button-color-typical-primary-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content-alt);
34
+ --button-color-typical-primary-inverse-label-enabled: var(--modes-color-interactive-primary-inverse-with-default);
35
+ --button-color-typical-primary-inverse-label-hover: var(--modes-color-interactive-primary-inverse-with-default);
24
36
  --button-color-typical-secondary-inverse-border-disabled: var(--modes-color-interactive-inactive-inverse-default);
25
37
  --button-color-typical-secondary-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content);
26
38
  --button-color-typical-tertiary-inverse-border-disabled: var(--modes-color-interactive-inactive-inverse-default);
@@ -59,9 +71,11 @@
59
71
  --button-color-ai-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
60
72
  --button-color-ai-label-hover: var(--modes-color-interactive-monochrome-with-hover);
61
73
  --button-color-destructive-primary-bg-hover: var(--modes-color-interactive-danger-hover);
74
+ --button-color-destructive-secondary-bg-hover: var(--modes-color-interactive-danger-hover-alt);
62
75
  --button-color-destructive-secondary-border-hover: var(--modes-color-interactive-danger-hover);
63
76
  --button-color-destructive-secondary-label-hover: var(--modes-color-interactive-danger-hover);
64
77
  --button-color-typical-primary-bg-enabled: var(--modes-color-interactive-primary-default);
78
+ --button-color-typical-primary-inverse-bg-enabled: var(--modes-color-interactive-primary-inverse-default);
65
79
  --button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
66
80
  --button-color-typical-secondary-label-hover: var(--modes-color-interactive-monochrome-with-hover);
67
81
  --button-color-typical-tertiary-bg-enabled: var(--button-color-none);
@@ -195,17 +209,12 @@
195
209
  --button-color-ai-label-disabled: var(--modes-color-interactive-inactive-content);
196
210
  --button-color-ai-label-enabled: var(--modes-color-interactive-monochrome-default);
197
211
  --button-color-destructive-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
198
- --button-color-destructive-primary-label-enabled: var(--modes-color-interactive-danger-with-default);
199
- --button-color-destructive-primary-label-hover: var(--modes-color-interactive-danger-with-default);
200
- --button-color-destructive-secondary-bg-hover: var(--modes-color-interactive-danger-hover-alt);
201
212
  --button-color-destructive-secondary-label-disabled: var(--modes-color-interactive-inactive-content);
202
213
  --button-color-typical-primary-bg-active: var(--modes-color-interactive-primary-active);
203
- --button-color-typical-primary-bg-default: var(--modes-color-interactive-primary-with-default); /* For spacer in Split button */
204
214
  --button-color-typical-primary-bg-hover: var(--modes-color-interactive-primary-hover);
205
- --button-color-typical-primary-label-active: var(--modes-color-interactive-primary-with-active);
206
215
  --button-color-typical-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
207
- --button-color-typical-primary-label-enabled: var(--modes-color-interactive-primary-with-default);
208
- --button-color-typical-primary-label-hover: var(--modes-color-interactive-primary-with-default);
216
+ --button-color-typical-primary-inverse-bg-active: var(--modes-color-interactive-primary-inverse-active);
217
+ --button-color-typical-primary-inverse-bg-hover: var(--modes-color-interactive-primary-inverse-hover);
209
218
  --button-color-typical-secondary-bg-active: var(--modes-color-interactive-primary-active-alt);
210
219
  --button-color-typical-secondary-border-active: var(--modes-color-interactive-primary-active);
211
220
  --button-color-typical-secondary-border-enabled: var(--modes-color-interactive-primary-default-alt);
package/css/frozenproduct/small/components/focus.css CHANGED
@@ -7,6 +7,10 @@
7
7
  --focus-color-borderalt: var(--modes-color-interactive-focus-default);
8
8
  --focus-color-border: var(--modes-color-interactive-focus-with-default);
9
9
  --focus-color-label: var(--modes-color-interactive-focus-content);
10
+ --focus-color-inverse-bg: var(--modes-color-interactive-focus-inverse-with-default-alt);
11
+ --focus-color-inverse-borderalt: var(--modes-color-interactive-focus-inverse-default);
12
+ --focus-color-inverse-border: var(--modes-color-interactive-focus-inverse-with-default);
13
+ --focus-color-inverse-label: var(--modes-color-interactive-focus-inverse-content);
10
14
  --focus-size-underline: var(--global-size-micro-xs); /* focus black underline on links and skiplink */
11
15
  --focus-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary focus (dropdown item) */
12
16
  --focus-borderwidth-inner: var(--global-borderwidth-s); /* Focus border (inner) */
package/css/frozenproduct/small/components/link.css CHANGED
@@ -16,10 +16,12 @@
16
16
  --link-typography-adaptive-heading-m: var(--global-typography-adaptive-component-underlined-firm-m);
17
17
  --link-typography-adaptive-heading-l: var(--global-typography-adaptive-component-underlined-firm-l);
18
18
  --link-color-destructive-label-default: var(--modes-color-interactive-danger-default-alt); /* . */
19
+ --link-color-destructive-inverse-label-default: var(--modes-color-interactive-danger-inverse-default-alt); /* . */
19
20
  --link-color-subtle-label-hover: var(--modes-color-interactive-monochrome-active);
20
21
  --link-color-subtle-inverse-label-hover: var(--modes-color-interactive-monochrome-inverse-active);
21
22
  --link-boxshadow-skiplink: var(--global-boxshadow-container-near);
22
23
  --link-color-destructive-label-hover: var(--modes-color-interactive-danger-hover-alt2);
24
+ --link-color-destructive-inverse-label-hover: var(--modes-color-interactive-danger-inverse-hover-alt2);
23
25
  --link-color-typical-label-default: var(--modes-color-interactive-primary-default-alt3);
24
26
  --link-color-typical-inverse-label-default: var(--modes-color-interactive-primary-inverse-default-alt3);
25
27
  --link-color-subtle-label-default: var(--modes-color-interactive-monochrome-default);
package/css/frozenproduct/small/components/table.css CHANGED
@@ -56,6 +56,7 @@
56
56
  --table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border */
57
57
  --table-borderwidth-thick: var(--global-borderwidth-s); /* header border for subtle */
58
58
  --table-space-none: var(--global-space-none);
59
+ --table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
59
60
  --table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */
60
61
  --table-space-row-x-s: var(--global-space-macro-xs); /* Left and right padding inside S row cells */
61
62
  --table-space-row-x-m: var(--global-space-macro-xs); /* Left and right padding inside M row cells */
package/css/frozenproduct/small/dark.css CHANGED
@@ -67,10 +67,18 @@
67
67
  --modes-color-interactive-danger-default: #E13E53;
68
68
  --modes-color-interactive-danger-default-alt: #e85b66; /* for links in datatables */
69
69
  --modes-color-interactive-danger-hover: #eb646c;
70
- --modes-color-interactive-danger-hover-alt: #3f1a1c; /* button hover on dark */
70
+ --modes-color-interactive-danger-hover-alt: #e13e5314; /* button hover on dark */
71
71
  --modes-color-interactive-danger-hover-alt2: #ec6a71; /* for links in datatables */
72
72
  --modes-color-interactive-danger-with-active: #000000;
73
73
  --modes-color-interactive-danger-with-default: #000000;
74
+ --modes-color-interactive-danger-inverse-active: #882b34; /* used on pill hover states */
75
+ --modes-color-interactive-danger-inverse-default: #CD384B;
76
+ --modes-color-interactive-danger-inverse-default-alt: #b23342; /* For links in datatables */
77
+ --modes-color-interactive-danger-inverse-hover: #aa323f; /* used on solid-pill and primary-button hover states */
78
+ --modes-color-interactive-danger-inverse-hover-alt: #cd384b14; /* used on secondary-button hover states */
79
+ --modes-color-interactive-danger-inverse-hover-alt2: #a3303d; /* used on link hover state */
80
+ --modes-color-interactive-danger-inverse-with-active: #FFFFFF;
81
+ --modes-color-interactive-danger-inverse-with-default: #FFFFFF;
74
82
  --modes-color-interactive-data-entry-default: #000000; /* Input backgrounds. */
75
83
  --modes-color-interactive-data-entry-with-active: #FFFFFF; /* checkbox tick icon or radio handle */
76
84
  --modes-color-interactive-data-entry-with-active-alt: #000000;
@@ -81,10 +89,14 @@
81
89
  --modes-color-interactive-data-entry-content: #fffffff2; /* Input Text */
82
90
  --modes-color-interactive-data-entry-content-alt: #ffffff8c; /* Hint text, placeholder text, character count etc */
83
91
  --modes-color-interactive-data-entry-frozen-with-default: #777; /* Input borders. */
84
- --modes-color-interactive-focus-with-default: #000000;
92
+ --modes-color-interactive-focus-default: #FFB500;
85
93
  --modes-color-interactive-focus-content: #FFFFFF;
94
+ --modes-color-interactive-focus-with-default: #000000;
86
95
  --modes-color-interactive-focus-with-default-alt: #926916;
87
- --modes-color-interactive-focus-default: #FFB500;
96
+ --modes-color-interactive-focus-inverse-default: #000000;
97
+ --modes-color-interactive-focus-inverse-content: #000000;
98
+ --modes-color-interactive-focus-inverse-with-default: #FFB500;
99
+ --modes-color-interactive-focus-inverse-with-default-alt: #ffd27e;
88
100
  --modes-color-interactive-inactive-default: #4b4b4b; /* disabled buttons on dark */
89
101
  --modes-color-interactive-inactive-mask: #FFFFFF; /* full screen takeover token for modal dimmer */
90
102
  --modes-color-interactive-inactive-default-alt: #0e0e0e; /* Disabled button backgrounds and borders ON DARK */
@@ -95,6 +107,7 @@
95
107
  --modes-color-interactive-inactive-frozen-default-alt: #0e0e0e; /* Disabled input and button backgrounds, button borders and input backgrounds. */
96
108
  --modes-color-interactive-inactive-inverse-default: #a6a6a6; /* Inversed disabled form secondary, tertiary and input borders borders. */
97
109
  --modes-color-interactive-inactive-inverse-content: #0000006b; /* Inversed disabled text inside buttons and form inputs. */
110
+ --modes-color-interactive-inactive-inverse-content-alt: #FFFFFF; /* Disabled labels inside buttons and Switch. */
98
111
  --modes-color-interactive-monochrome-active: #FFFFFF;
99
112
  --modes-color-interactive-monochrome-active-alt: #ffffff29;
100
113
  --modes-color-interactive-monochrome-default: #ffffffe6;
package/css/frozenproduct/small/light.css CHANGED
@@ -67,10 +67,18 @@
67
67
  --modes-color-interactive-danger-default: #CD384B;
68
68
  --modes-color-interactive-danger-default-alt: #b23342; /* For links in datatables */
69
69
  --modes-color-interactive-danger-hover: #aa323f; /* used on solid-pill and primary-button hover states */
70
- --modes-color-interactive-danger-hover-alt: #f9d1cf; /* used on secondary-button hover states */
70
+ --modes-color-interactive-danger-hover-alt: #cd384b14; /* used on secondary-button hover states */
71
71
  --modes-color-interactive-danger-hover-alt2: #a3303d; /* used on link hover state */
72
72
  --modes-color-interactive-danger-with-active: #FFFFFF;
73
73
  --modes-color-interactive-danger-with-default: #FFFFFF;
74
+ --modes-color-interactive-danger-inverse-active: #f28486; /* used on pill hover states */
75
+ --modes-color-interactive-danger-inverse-default: #E13E53;
76
+ --modes-color-interactive-danger-inverse-default-alt: #e85b66; /* For links in datatables */
77
+ --modes-color-interactive-danger-inverse-hover: #eb646c; /* used on solid-pill and primary-button hover states */
78
+ --modes-color-interactive-danger-inverse-hover-alt: #e13e5314; /* used on secondary-button hover states */
79
+ --modes-color-interactive-danger-inverse-hover-alt2: #ec6a71; /* used on link hover state */
80
+ --modes-color-interactive-danger-inverse-with-active: #000000;
81
+ --modes-color-interactive-danger-inverse-with-default: #000000;
74
82
  --modes-color-interactive-data-entry-default: #FFFFFF; /* Input backgrounds. */
75
83
  --modes-color-interactive-data-entry-with-active: #000000; /* checkbox tick icon or radio handle */
76
84
  --modes-color-interactive-data-entry-with-active-alt: #FFFFFF;
@@ -81,10 +89,14 @@
81
89
  --modes-color-interactive-data-entry-content: #000000f2; /* Input Text */
82
90
  --modes-color-interactive-data-entry-content-alt: #0000008c; /* Hint text, placeholder text, character count etc */
83
91
  --modes-color-interactive-data-entry-frozen-with-default: #698495; /* Input borders. */
84
- --modes-color-interactive-focus-with-default: #FFB500;
85
- --modes-color-interactive-focus-with-default-alt: #ffd27e;
86
92
  --modes-color-interactive-focus-default: #000000;
87
93
  --modes-color-interactive-focus-content: #000000;
94
+ --modes-color-interactive-focus-with-default: #FFB500;
95
+ --modes-color-interactive-focus-with-default-alt: #ffd27e;
96
+ --modes-color-interactive-focus-inverse-default: #FFB500;
97
+ --modes-color-interactive-focus-inverse-content: #FFFFFF;
98
+ --modes-color-interactive-focus-inverse-with-default: #000000;
99
+ --modes-color-interactive-focus-inverse-with-default-alt: #926916;
88
100
  --modes-color-interactive-inactive-default: #a6a6a6; /* Disabled form secondary, tertiary and input borders borders. */
89
101
  --modes-color-interactive-inactive-mask: #000000; /* full screen takeover token for modal dimmer */
90
102
  --modes-color-interactive-inactive-default-alt: #f3f3f3; /* Disabled input and button backgrounds, button borders and input backgrounds. */
@@ -95,6 +107,7 @@
95
107
  --modes-color-interactive-inactive-frozen-default-alt: #e5eaed; /* Disabled input and button backgrounds, button borders and input backgrounds. */
96
108
  --modes-color-interactive-inactive-inverse-default: #4b4b4b; /* Inversed disabled form secondary, tertiary and input borders borders. */
97
109
  --modes-color-interactive-inactive-inverse-content: #ffffff6b; /* Inversed disabled text inside buttons and form inputs. */
110
+ --modes-color-interactive-inactive-inverse-content-alt: #000000; /* Disabled labels inside buttons and Switch. */
98
111
  --modes-color-interactive-monochrome-active: #000000;
99
112
  --modes-color-interactive-monochrome-active-alt: #00000029;
100
113
  --modes-color-interactive-monochrome-default: #000000e6;