@sage/design-tokens 14.0.1 → 14.1.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 (454) hide show
  1. package/css/frozenproduct/all.css +166 -22
  2. package/css/frozenproduct/large/components/progress.css +1 -1
  3. package/css/frozenproduct/large/components/status.css +62 -12
  4. package/css/frozenproduct/large/components/table.css +1 -1
  5. package/css/frozenproduct/large/dark.css +51 -4
  6. package/css/frozenproduct/large/light.css +51 -4
  7. package/css/frozenproduct/small/components/progress.css +1 -1
  8. package/css/frozenproduct/small/components/status.css +62 -12
  9. package/css/frozenproduct/small/components/table.css +1 -1
  10. package/css/frozenproduct/small/dark.css +51 -4
  11. package/css/frozenproduct/small/light.css +51 -4
  12. package/css/marketing/all.css +166 -22
  13. package/css/marketing/large/components/progress.css +1 -1
  14. package/css/marketing/large/components/status.css +62 -12
  15. package/css/marketing/large/components/table.css +1 -1
  16. package/css/marketing/large/dark.css +51 -4
  17. package/css/marketing/large/light.css +51 -4
  18. package/css/marketing/small/components/progress.css +1 -1
  19. package/css/marketing/small/components/status.css +62 -12
  20. package/css/marketing/small/components/table.css +1 -1
  21. package/css/marketing/small/dark.css +51 -4
  22. package/css/marketing/small/light.css +51 -4
  23. package/css/product/all.css +166 -22
  24. package/css/product/large/components/progress.css +1 -1
  25. package/css/product/large/components/status.css +62 -12
  26. package/css/product/large/components/table.css +1 -1
  27. package/css/product/large/dark.css +51 -4
  28. package/css/product/large/light.css +51 -4
  29. package/css/product/small/components/progress.css +1 -1
  30. package/css/product/small/components/status.css +62 -12
  31. package/css/product/small/components/table.css +1 -1
  32. package/css/product/small/dark.css +51 -4
  33. package/css/product/small/light.css +51 -4
  34. package/ios/frozenproduct/large/dark/components/container.h +1 -1
  35. package/ios/frozenproduct/large/dark/components/progress.h +1 -1
  36. package/ios/frozenproduct/large/dark/components/status.h +72 -22
  37. package/ios/frozenproduct/large/dark/components/table.h +1 -1
  38. package/ios/frozenproduct/large/dark/mode.h +51 -4
  39. package/ios/frozenproduct/large/light/components/progress.h +1 -1
  40. package/ios/frozenproduct/large/light/components/status.h +72 -22
  41. package/ios/frozenproduct/large/light/components/table.h +1 -1
  42. package/ios/frozenproduct/large/light/mode.h +51 -4
  43. package/ios/frozenproduct/small/dark/components/container.h +1 -1
  44. package/ios/frozenproduct/small/dark/components/progress.h +1 -1
  45. package/ios/frozenproduct/small/dark/components/status.h +72 -22
  46. package/ios/frozenproduct/small/dark/components/table.h +1 -1
  47. package/ios/frozenproduct/small/dark/mode.h +51 -4
  48. package/ios/frozenproduct/small/light/components/progress.h +1 -1
  49. package/ios/frozenproduct/small/light/components/status.h +72 -22
  50. package/ios/frozenproduct/small/light/components/table.h +1 -1
  51. package/ios/frozenproduct/small/light/mode.h +51 -4
  52. package/ios/marketing/large/dark/components/container.h +1 -1
  53. package/ios/marketing/large/dark/components/progress.h +1 -1
  54. package/ios/marketing/large/dark/components/status.h +72 -22
  55. package/ios/marketing/large/dark/components/table.h +1 -1
  56. package/ios/marketing/large/dark/mode.h +51 -4
  57. package/ios/marketing/large/light/components/progress.h +1 -1
  58. package/ios/marketing/large/light/components/status.h +72 -22
  59. package/ios/marketing/large/light/components/table.h +1 -1
  60. package/ios/marketing/large/light/mode.h +51 -4
  61. package/ios/marketing/small/dark/components/container.h +1 -1
  62. package/ios/marketing/small/dark/components/progress.h +1 -1
  63. package/ios/marketing/small/dark/components/status.h +72 -22
  64. package/ios/marketing/small/dark/components/table.h +1 -1
  65. package/ios/marketing/small/dark/mode.h +51 -4
  66. package/ios/marketing/small/light/components/progress.h +1 -1
  67. package/ios/marketing/small/light/components/status.h +72 -22
  68. package/ios/marketing/small/light/components/table.h +1 -1
  69. package/ios/marketing/small/light/mode.h +51 -4
  70. package/ios/product/large/dark/components/container.h +1 -1
  71. package/ios/product/large/dark/components/progress.h +1 -1
  72. package/ios/product/large/dark/components/status.h +72 -22
  73. package/ios/product/large/dark/components/table.h +1 -1
  74. package/ios/product/large/dark/mode.h +51 -4
  75. package/ios/product/large/light/components/progress.h +1 -1
  76. package/ios/product/large/light/components/status.h +72 -22
  77. package/ios/product/large/light/components/table.h +1 -1
  78. package/ios/product/large/light/mode.h +51 -4
  79. package/ios/product/small/dark/components/container.h +1 -1
  80. package/ios/product/small/dark/components/progress.h +1 -1
  81. package/ios/product/small/dark/components/status.h +72 -22
  82. package/ios/product/small/dark/components/table.h +1 -1
  83. package/ios/product/small/dark/mode.h +51 -4
  84. package/ios/product/small/light/components/progress.h +1 -1
  85. package/ios/product/small/light/components/status.h +72 -22
  86. package/ios/product/small/light/components/table.h +1 -1
  87. package/ios/product/small/light/mode.h +51 -4
  88. package/js/common/frozenproduct/large/dark/components/container.js +1 -1
  89. package/js/common/frozenproduct/large/dark/components/progress.js +2 -2
  90. package/js/common/frozenproduct/large/dark/components/status.d.ts +106 -34
  91. package/js/common/frozenproduct/large/dark/components/status.js +1248 -325
  92. package/js/common/frozenproduct/large/dark/components/table.js +2 -2
  93. package/js/common/frozenproduct/large/dark/mode.d.ts +80 -9
  94. package/js/common/frozenproduct/large/dark/mode.js +1730 -142
  95. package/js/common/frozenproduct/large/light/components/progress.js +2 -2
  96. package/js/common/frozenproduct/large/light/components/status.d.ts +106 -34
  97. package/js/common/frozenproduct/large/light/components/status.js +1248 -325
  98. package/js/common/frozenproduct/large/light/components/table.js +2 -2
  99. package/js/common/frozenproduct/large/light/mode.d.ts +80 -9
  100. package/js/common/frozenproduct/large/light/mode.js +1741 -151
  101. package/js/common/frozenproduct/small/dark/components/container.js +1 -1
  102. package/js/common/frozenproduct/small/dark/components/progress.js +2 -2
  103. package/js/common/frozenproduct/small/dark/components/status.d.ts +106 -34
  104. package/js/common/frozenproduct/small/dark/components/status.js +1248 -325
  105. package/js/common/frozenproduct/small/dark/components/table.js +2 -2
  106. package/js/common/frozenproduct/small/dark/mode.d.ts +80 -9
  107. package/js/common/frozenproduct/small/dark/mode.js +1730 -142
  108. package/js/common/frozenproduct/small/light/components/progress.js +2 -2
  109. package/js/common/frozenproduct/small/light/components/status.d.ts +106 -34
  110. package/js/common/frozenproduct/small/light/components/status.js +1248 -325
  111. package/js/common/frozenproduct/small/light/components/table.js +2 -2
  112. package/js/common/frozenproduct/small/light/mode.d.ts +80 -9
  113. package/js/common/frozenproduct/small/light/mode.js +1741 -151
  114. package/js/common/marketing/large/dark/components/container.js +1 -1
  115. package/js/common/marketing/large/dark/components/progress.js +2 -2
  116. package/js/common/marketing/large/dark/components/status.d.ts +106 -34
  117. package/js/common/marketing/large/dark/components/status.js +1248 -325
  118. package/js/common/marketing/large/dark/components/table.js +2 -2
  119. package/js/common/marketing/large/dark/mode.d.ts +80 -9
  120. package/js/common/marketing/large/dark/mode.js +1730 -142
  121. package/js/common/marketing/large/light/components/progress.js +2 -2
  122. package/js/common/marketing/large/light/components/status.d.ts +106 -34
  123. package/js/common/marketing/large/light/components/status.js +1248 -325
  124. package/js/common/marketing/large/light/components/table.js +2 -2
  125. package/js/common/marketing/large/light/mode.d.ts +80 -9
  126. package/js/common/marketing/large/light/mode.js +1741 -151
  127. package/js/common/marketing/small/dark/components/container.js +1 -1
  128. package/js/common/marketing/small/dark/components/progress.js +2 -2
  129. package/js/common/marketing/small/dark/components/status.d.ts +106 -34
  130. package/js/common/marketing/small/dark/components/status.js +1248 -325
  131. package/js/common/marketing/small/dark/components/table.js +2 -2
  132. package/js/common/marketing/small/dark/mode.d.ts +80 -9
  133. package/js/common/marketing/small/dark/mode.js +1730 -142
  134. package/js/common/marketing/small/light/components/progress.js +2 -2
  135. package/js/common/marketing/small/light/components/status.d.ts +106 -34
  136. package/js/common/marketing/small/light/components/status.js +1248 -325
  137. package/js/common/marketing/small/light/components/table.js +2 -2
  138. package/js/common/marketing/small/light/mode.d.ts +80 -9
  139. package/js/common/marketing/small/light/mode.js +1741 -151
  140. package/js/common/product/large/dark/components/container.js +1 -1
  141. package/js/common/product/large/dark/components/progress.js +2 -2
  142. package/js/common/product/large/dark/components/status.d.ts +106 -34
  143. package/js/common/product/large/dark/components/status.js +1248 -325
  144. package/js/common/product/large/dark/components/table.js +2 -2
  145. package/js/common/product/large/dark/mode.d.ts +80 -9
  146. package/js/common/product/large/dark/mode.js +1730 -142
  147. package/js/common/product/large/light/components/progress.js +2 -2
  148. package/js/common/product/large/light/components/status.d.ts +106 -34
  149. package/js/common/product/large/light/components/status.js +1248 -325
  150. package/js/common/product/large/light/components/table.js +2 -2
  151. package/js/common/product/large/light/mode.d.ts +80 -9
  152. package/js/common/product/large/light/mode.js +1741 -151
  153. package/js/common/product/small/dark/components/container.js +1 -1
  154. package/js/common/product/small/dark/components/progress.js +2 -2
  155. package/js/common/product/small/dark/components/status.d.ts +106 -34
  156. package/js/common/product/small/dark/components/status.js +1248 -325
  157. package/js/common/product/small/dark/components/table.js +2 -2
  158. package/js/common/product/small/dark/mode.d.ts +80 -9
  159. package/js/common/product/small/dark/mode.js +1730 -142
  160. package/js/common/product/small/light/components/progress.js +2 -2
  161. package/js/common/product/small/light/components/status.d.ts +106 -34
  162. package/js/common/product/small/light/components/status.js +1248 -325
  163. package/js/common/product/small/light/components/table.js +2 -2
  164. package/js/common/product/small/light/mode.d.ts +80 -9
  165. package/js/common/product/small/light/mode.js +1741 -151
  166. package/js/es6/frozenproduct/large/dark/components/container.js +1 -1
  167. package/js/es6/frozenproduct/large/dark/components/progress.js +1 -1
  168. package/js/es6/frozenproduct/large/dark/components/status.d.ts +72 -22
  169. package/js/es6/frozenproduct/large/dark/components/status.js +72 -22
  170. package/js/es6/frozenproduct/large/dark/components/table.js +1 -1
  171. package/js/es6/frozenproduct/large/dark/mode.d.ts +51 -4
  172. package/js/es6/frozenproduct/large/dark/mode.js +51 -4
  173. package/js/es6/frozenproduct/large/light/components/progress.js +1 -1
  174. package/js/es6/frozenproduct/large/light/components/status.d.ts +72 -22
  175. package/js/es6/frozenproduct/large/light/components/status.js +72 -22
  176. package/js/es6/frozenproduct/large/light/components/table.js +1 -1
  177. package/js/es6/frozenproduct/large/light/mode.d.ts +51 -4
  178. package/js/es6/frozenproduct/large/light/mode.js +51 -4
  179. package/js/es6/frozenproduct/small/dark/components/container.js +1 -1
  180. package/js/es6/frozenproduct/small/dark/components/progress.js +1 -1
  181. package/js/es6/frozenproduct/small/dark/components/status.d.ts +72 -22
  182. package/js/es6/frozenproduct/small/dark/components/status.js +72 -22
  183. package/js/es6/frozenproduct/small/dark/components/table.js +1 -1
  184. package/js/es6/frozenproduct/small/dark/mode.d.ts +51 -4
  185. package/js/es6/frozenproduct/small/dark/mode.js +51 -4
  186. package/js/es6/frozenproduct/small/light/components/progress.js +1 -1
  187. package/js/es6/frozenproduct/small/light/components/status.d.ts +72 -22
  188. package/js/es6/frozenproduct/small/light/components/status.js +72 -22
  189. package/js/es6/frozenproduct/small/light/components/table.js +1 -1
  190. package/js/es6/frozenproduct/small/light/mode.d.ts +51 -4
  191. package/js/es6/frozenproduct/small/light/mode.js +51 -4
  192. package/js/es6/marketing/large/dark/components/container.js +1 -1
  193. package/js/es6/marketing/large/dark/components/progress.js +1 -1
  194. package/js/es6/marketing/large/dark/components/status.d.ts +72 -22
  195. package/js/es6/marketing/large/dark/components/status.js +72 -22
  196. package/js/es6/marketing/large/dark/components/table.js +1 -1
  197. package/js/es6/marketing/large/dark/mode.d.ts +51 -4
  198. package/js/es6/marketing/large/dark/mode.js +51 -4
  199. package/js/es6/marketing/large/light/components/progress.js +1 -1
  200. package/js/es6/marketing/large/light/components/status.d.ts +72 -22
  201. package/js/es6/marketing/large/light/components/status.js +72 -22
  202. package/js/es6/marketing/large/light/components/table.js +1 -1
  203. package/js/es6/marketing/large/light/mode.d.ts +51 -4
  204. package/js/es6/marketing/large/light/mode.js +51 -4
  205. package/js/es6/marketing/small/dark/components/container.js +1 -1
  206. package/js/es6/marketing/small/dark/components/progress.js +1 -1
  207. package/js/es6/marketing/small/dark/components/status.d.ts +72 -22
  208. package/js/es6/marketing/small/dark/components/status.js +72 -22
  209. package/js/es6/marketing/small/dark/components/table.js +1 -1
  210. package/js/es6/marketing/small/dark/mode.d.ts +51 -4
  211. package/js/es6/marketing/small/dark/mode.js +51 -4
  212. package/js/es6/marketing/small/light/components/progress.js +1 -1
  213. package/js/es6/marketing/small/light/components/status.d.ts +72 -22
  214. package/js/es6/marketing/small/light/components/status.js +72 -22
  215. package/js/es6/marketing/small/light/components/table.js +1 -1
  216. package/js/es6/marketing/small/light/mode.d.ts +51 -4
  217. package/js/es6/marketing/small/light/mode.js +51 -4
  218. package/js/es6/product/large/dark/components/container.js +1 -1
  219. package/js/es6/product/large/dark/components/progress.js +1 -1
  220. package/js/es6/product/large/dark/components/status.d.ts +72 -22
  221. package/js/es6/product/large/dark/components/status.js +72 -22
  222. package/js/es6/product/large/dark/components/table.js +1 -1
  223. package/js/es6/product/large/dark/mode.d.ts +51 -4
  224. package/js/es6/product/large/dark/mode.js +51 -4
  225. package/js/es6/product/large/light/components/progress.js +1 -1
  226. package/js/es6/product/large/light/components/status.d.ts +72 -22
  227. package/js/es6/product/large/light/components/status.js +72 -22
  228. package/js/es6/product/large/light/components/table.js +1 -1
  229. package/js/es6/product/large/light/mode.d.ts +51 -4
  230. package/js/es6/product/large/light/mode.js +51 -4
  231. package/js/es6/product/small/dark/components/container.js +1 -1
  232. package/js/es6/product/small/dark/components/progress.js +1 -1
  233. package/js/es6/product/small/dark/components/status.d.ts +72 -22
  234. package/js/es6/product/small/dark/components/status.js +72 -22
  235. package/js/es6/product/small/dark/components/table.js +1 -1
  236. package/js/es6/product/small/dark/mode.d.ts +51 -4
  237. package/js/es6/product/small/dark/mode.js +51 -4
  238. package/js/es6/product/small/light/components/progress.js +1 -1
  239. package/js/es6/product/small/light/components/status.d.ts +72 -22
  240. package/js/es6/product/small/light/components/status.js +72 -22
  241. package/js/es6/product/small/light/components/table.js +1 -1
  242. package/js/es6/product/small/light/mode.d.ts +51 -4
  243. package/js/es6/product/small/light/mode.js +51 -4
  244. package/js/umd/frozenproduct/large/dark/components/container.js +1 -1
  245. package/js/umd/frozenproduct/large/dark/components/progress.js +2 -2
  246. package/js/umd/frozenproduct/large/dark/components/status.js +1336 -336
  247. package/js/umd/frozenproduct/large/dark/components/table.js +2 -2
  248. package/js/umd/frozenproduct/large/dark/mode.js +1814 -142
  249. package/js/umd/frozenproduct/large/light/components/progress.js +2 -2
  250. package/js/umd/frozenproduct/large/light/components/status.js +1336 -336
  251. package/js/umd/frozenproduct/large/light/components/table.js +2 -2
  252. package/js/umd/frozenproduct/large/light/mode.js +1825 -151
  253. package/js/umd/frozenproduct/small/dark/components/container.js +1 -1
  254. package/js/umd/frozenproduct/small/dark/components/progress.js +2 -2
  255. package/js/umd/frozenproduct/small/dark/components/status.js +1336 -336
  256. package/js/umd/frozenproduct/small/dark/components/table.js +2 -2
  257. package/js/umd/frozenproduct/small/dark/mode.js +1814 -142
  258. package/js/umd/frozenproduct/small/light/components/progress.js +2 -2
  259. package/js/umd/frozenproduct/small/light/components/status.js +1336 -336
  260. package/js/umd/frozenproduct/small/light/components/table.js +2 -2
  261. package/js/umd/frozenproduct/small/light/mode.js +1825 -151
  262. package/js/umd/marketing/large/dark/components/container.js +1 -1
  263. package/js/umd/marketing/large/dark/components/progress.js +2 -2
  264. package/js/umd/marketing/large/dark/components/status.js +1336 -336
  265. package/js/umd/marketing/large/dark/components/table.js +2 -2
  266. package/js/umd/marketing/large/dark/mode.js +1814 -142
  267. package/js/umd/marketing/large/light/components/progress.js +2 -2
  268. package/js/umd/marketing/large/light/components/status.js +1336 -336
  269. package/js/umd/marketing/large/light/components/table.js +2 -2
  270. package/js/umd/marketing/large/light/mode.js +1825 -151
  271. package/js/umd/marketing/small/dark/components/container.js +1 -1
  272. package/js/umd/marketing/small/dark/components/progress.js +2 -2
  273. package/js/umd/marketing/small/dark/components/status.js +1336 -336
  274. package/js/umd/marketing/small/dark/components/table.js +2 -2
  275. package/js/umd/marketing/small/dark/mode.js +1814 -142
  276. package/js/umd/marketing/small/light/components/progress.js +2 -2
  277. package/js/umd/marketing/small/light/components/status.js +1336 -336
  278. package/js/umd/marketing/small/light/components/table.js +2 -2
  279. package/js/umd/marketing/small/light/mode.js +1825 -151
  280. package/js/umd/product/large/dark/components/container.js +1 -1
  281. package/js/umd/product/large/dark/components/progress.js +2 -2
  282. package/js/umd/product/large/dark/components/status.js +1336 -336
  283. package/js/umd/product/large/dark/components/table.js +2 -2
  284. package/js/umd/product/large/dark/mode.js +1814 -142
  285. package/js/umd/product/large/light/components/progress.js +2 -2
  286. package/js/umd/product/large/light/components/status.js +1336 -336
  287. package/js/umd/product/large/light/components/table.js +2 -2
  288. package/js/umd/product/large/light/mode.js +1825 -151
  289. package/js/umd/product/small/dark/components/container.js +1 -1
  290. package/js/umd/product/small/dark/components/progress.js +2 -2
  291. package/js/umd/product/small/dark/components/status.js +1336 -336
  292. package/js/umd/product/small/dark/components/table.js +2 -2
  293. package/js/umd/product/small/dark/mode.js +1814 -142
  294. package/js/umd/product/small/light/components/progress.js +2 -2
  295. package/js/umd/product/small/light/components/status.js +1336 -336
  296. package/js/umd/product/small/light/components/table.js +2 -2
  297. package/js/umd/product/small/light/mode.js +1825 -151
  298. package/json/flat/frozenproduct/large/dark/components/container.json +1 -1
  299. package/json/flat/frozenproduct/large/dark/components/progress.json +1 -1
  300. package/json/flat/frozenproduct/large/dark/components/status.json +72 -22
  301. package/json/flat/frozenproduct/large/dark/components/table.json +1 -1
  302. package/json/flat/frozenproduct/large/dark/mode.json +51 -4
  303. package/json/flat/frozenproduct/large/light/components/progress.json +1 -1
  304. package/json/flat/frozenproduct/large/light/components/status.json +72 -22
  305. package/json/flat/frozenproduct/large/light/components/table.json +1 -1
  306. package/json/flat/frozenproduct/large/light/mode.json +51 -4
  307. package/json/flat/frozenproduct/small/dark/components/container.json +1 -1
  308. package/json/flat/frozenproduct/small/dark/components/progress.json +1 -1
  309. package/json/flat/frozenproduct/small/dark/components/status.json +72 -22
  310. package/json/flat/frozenproduct/small/dark/components/table.json +1 -1
  311. package/json/flat/frozenproduct/small/dark/mode.json +51 -4
  312. package/json/flat/frozenproduct/small/light/components/progress.json +1 -1
  313. package/json/flat/frozenproduct/small/light/components/status.json +72 -22
  314. package/json/flat/frozenproduct/small/light/components/table.json +1 -1
  315. package/json/flat/frozenproduct/small/light/mode.json +51 -4
  316. package/json/flat/marketing/large/dark/components/container.json +1 -1
  317. package/json/flat/marketing/large/dark/components/progress.json +1 -1
  318. package/json/flat/marketing/large/dark/components/status.json +72 -22
  319. package/json/flat/marketing/large/dark/components/table.json +1 -1
  320. package/json/flat/marketing/large/dark/mode.json +51 -4
  321. package/json/flat/marketing/large/light/components/progress.json +1 -1
  322. package/json/flat/marketing/large/light/components/status.json +72 -22
  323. package/json/flat/marketing/large/light/components/table.json +1 -1
  324. package/json/flat/marketing/large/light/mode.json +51 -4
  325. package/json/flat/marketing/small/dark/components/container.json +1 -1
  326. package/json/flat/marketing/small/dark/components/progress.json +1 -1
  327. package/json/flat/marketing/small/dark/components/status.json +72 -22
  328. package/json/flat/marketing/small/dark/components/table.json +1 -1
  329. package/json/flat/marketing/small/dark/mode.json +51 -4
  330. package/json/flat/marketing/small/light/components/progress.json +1 -1
  331. package/json/flat/marketing/small/light/components/status.json +72 -22
  332. package/json/flat/marketing/small/light/components/table.json +1 -1
  333. package/json/flat/marketing/small/light/mode.json +51 -4
  334. package/json/flat/product/large/dark/components/container.json +1 -1
  335. package/json/flat/product/large/dark/components/progress.json +1 -1
  336. package/json/flat/product/large/dark/components/status.json +72 -22
  337. package/json/flat/product/large/dark/components/table.json +1 -1
  338. package/json/flat/product/large/dark/mode.json +51 -4
  339. package/json/flat/product/large/light/components/progress.json +1 -1
  340. package/json/flat/product/large/light/components/status.json +72 -22
  341. package/json/flat/product/large/light/components/table.json +1 -1
  342. package/json/flat/product/large/light/mode.json +51 -4
  343. package/json/flat/product/small/dark/components/container.json +1 -1
  344. package/json/flat/product/small/dark/components/progress.json +1 -1
  345. package/json/flat/product/small/dark/components/status.json +72 -22
  346. package/json/flat/product/small/dark/components/table.json +1 -1
  347. package/json/flat/product/small/dark/mode.json +51 -4
  348. package/json/flat/product/small/light/components/progress.json +1 -1
  349. package/json/flat/product/small/light/components/status.json +72 -22
  350. package/json/flat/product/small/light/components/table.json +1 -1
  351. package/json/flat/product/small/light/mode.json +51 -4
  352. package/json/nested/frozenproduct/large/dark/components/container.json +1 -1
  353. package/json/nested/frozenproduct/large/dark/components/progress.json +1 -1
  354. package/json/nested/frozenproduct/large/dark/components/status.json +106 -34
  355. package/json/nested/frozenproduct/large/dark/components/table.json +1 -1
  356. package/json/nested/frozenproduct/large/dark/mode.json +80 -9
  357. package/json/nested/frozenproduct/large/light/components/progress.json +1 -1
  358. package/json/nested/frozenproduct/large/light/components/status.json +106 -34
  359. package/json/nested/frozenproduct/large/light/components/table.json +1 -1
  360. package/json/nested/frozenproduct/large/light/mode.json +80 -9
  361. package/json/nested/frozenproduct/small/dark/components/container.json +1 -1
  362. package/json/nested/frozenproduct/small/dark/components/progress.json +1 -1
  363. package/json/nested/frozenproduct/small/dark/components/status.json +106 -34
  364. package/json/nested/frozenproduct/small/dark/components/table.json +1 -1
  365. package/json/nested/frozenproduct/small/dark/mode.json +80 -9
  366. package/json/nested/frozenproduct/small/light/components/progress.json +1 -1
  367. package/json/nested/frozenproduct/small/light/components/status.json +106 -34
  368. package/json/nested/frozenproduct/small/light/components/table.json +1 -1
  369. package/json/nested/frozenproduct/small/light/mode.json +80 -9
  370. package/json/nested/marketing/large/dark/components/container.json +1 -1
  371. package/json/nested/marketing/large/dark/components/progress.json +1 -1
  372. package/json/nested/marketing/large/dark/components/status.json +106 -34
  373. package/json/nested/marketing/large/dark/components/table.json +1 -1
  374. package/json/nested/marketing/large/dark/mode.json +80 -9
  375. package/json/nested/marketing/large/light/components/progress.json +1 -1
  376. package/json/nested/marketing/large/light/components/status.json +106 -34
  377. package/json/nested/marketing/large/light/components/table.json +1 -1
  378. package/json/nested/marketing/large/light/mode.json +80 -9
  379. package/json/nested/marketing/small/dark/components/container.json +1 -1
  380. package/json/nested/marketing/small/dark/components/progress.json +1 -1
  381. package/json/nested/marketing/small/dark/components/status.json +106 -34
  382. package/json/nested/marketing/small/dark/components/table.json +1 -1
  383. package/json/nested/marketing/small/dark/mode.json +80 -9
  384. package/json/nested/marketing/small/light/components/progress.json +1 -1
  385. package/json/nested/marketing/small/light/components/status.json +106 -34
  386. package/json/nested/marketing/small/light/components/table.json +1 -1
  387. package/json/nested/marketing/small/light/mode.json +80 -9
  388. package/json/nested/product/large/dark/components/container.json +1 -1
  389. package/json/nested/product/large/dark/components/progress.json +1 -1
  390. package/json/nested/product/large/dark/components/status.json +106 -34
  391. package/json/nested/product/large/dark/components/table.json +1 -1
  392. package/json/nested/product/large/dark/mode.json +80 -9
  393. package/json/nested/product/large/light/components/progress.json +1 -1
  394. package/json/nested/product/large/light/components/status.json +106 -34
  395. package/json/nested/product/large/light/components/table.json +1 -1
  396. package/json/nested/product/large/light/mode.json +80 -9
  397. package/json/nested/product/small/dark/components/container.json +1 -1
  398. package/json/nested/product/small/dark/components/progress.json +1 -1
  399. package/json/nested/product/small/dark/components/status.json +106 -34
  400. package/json/nested/product/small/dark/components/table.json +1 -1
  401. package/json/nested/product/small/dark/mode.json +80 -9
  402. package/json/nested/product/small/light/components/progress.json +1 -1
  403. package/json/nested/product/small/light/components/status.json +106 -34
  404. package/json/nested/product/small/light/components/table.json +1 -1
  405. package/json/nested/product/small/light/mode.json +80 -9
  406. package/package.json +1 -1
  407. package/sage-design-tokens-14.1.0.tgz +0 -0
  408. package/scss/frozenproduct/large/components/button.scss +13 -13
  409. package/scss/frozenproduct/large/components/container.scss +10 -10
  410. package/scss/frozenproduct/large/components/form.scss +7 -7
  411. package/scss/frozenproduct/large/components/link.scss +2 -2
  412. package/scss/frozenproduct/large/components/nav.scss +5 -5
  413. package/scss/frozenproduct/large/components/page.scss +1 -1
  414. package/scss/frozenproduct/large/components/popover.scss +2 -2
  415. package/scss/frozenproduct/large/components/progress.scss +7 -7
  416. package/scss/frozenproduct/large/components/status.scss +64 -14
  417. package/scss/frozenproduct/large/components/tab.scss +7 -7
  418. package/scss/frozenproduct/large/components/table.scss +11 -11
  419. package/scss/frozenproduct/large/dark.scss +51 -4
  420. package/scss/frozenproduct/large/light.scss +51 -4
  421. package/scss/frozenproduct/small/components/button.scss +13 -13
  422. package/scss/frozenproduct/small/components/container.scss +10 -10
  423. package/scss/frozenproduct/small/components/form.scss +7 -7
  424. package/scss/frozenproduct/small/components/link.scss +2 -2
  425. package/scss/frozenproduct/small/components/nav.scss +5 -5
  426. package/scss/frozenproduct/small/components/page.scss +1 -1
  427. package/scss/frozenproduct/small/components/popover.scss +2 -2
  428. package/scss/frozenproduct/small/components/progress.scss +7 -7
  429. package/scss/frozenproduct/small/components/status.scss +64 -14
  430. package/scss/frozenproduct/small/components/tab.scss +7 -7
  431. package/scss/frozenproduct/small/components/table.scss +11 -11
  432. package/scss/frozenproduct/small/dark.scss +51 -4
  433. package/scss/frozenproduct/small/light.scss +51 -4
  434. package/scss/marketing/large/components/progress.scss +1 -1
  435. package/scss/marketing/large/components/status.scss +62 -12
  436. package/scss/marketing/large/components/table.scss +1 -1
  437. package/scss/marketing/large/dark.scss +51 -4
  438. package/scss/marketing/large/light.scss +51 -4
  439. package/scss/marketing/small/components/progress.scss +1 -1
  440. package/scss/marketing/small/components/status.scss +62 -12
  441. package/scss/marketing/small/components/table.scss +1 -1
  442. package/scss/marketing/small/dark.scss +51 -4
  443. package/scss/marketing/small/light.scss +51 -4
  444. package/scss/product/large/components/progress.scss +1 -1
  445. package/scss/product/large/components/status.scss +62 -12
  446. package/scss/product/large/components/table.scss +1 -1
  447. package/scss/product/large/dark.scss +51 -4
  448. package/scss/product/large/light.scss +51 -4
  449. package/scss/product/small/components/progress.scss +1 -1
  450. package/scss/product/small/components/status.scss +62 -12
  451. package/scss/product/small/components/table.scss +1 -1
  452. package/scss/product/small/dark.scss +51 -4
  453. package/scss/product/small/light.scss +51 -4
  454. package/sage-design-tokens-14.0.1.tgz +0 -0
package/scss/marketing/small/dark.scss CHANGED
@@ -191,7 +191,8 @@ $modes-color-status-ai-default: #000000;
191
191
  $modes-color-status-ai-default-alt: #FFFFFF; // bg for contextual message comp
192
192
  $modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
193
193
  $modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
194
- $modes-color-status-generic-default: #008a89;
194
+ $modes-color-status-callout-default-alt: #122211; // used for marketing banners
195
+ $modes-color-status-callout-hover-alt: #263525; // marketing banner hover
195
196
  $modes-color-status-caution-default: #E04500;
196
197
  $modes-color-status-caution-default-alt: #251206; // Subtle message bg
197
198
  $modes-color-status-caution-hover: #eb6530; // used on pill hover states
@@ -213,11 +214,59 @@ $modes-color-status-content-inverse-with-default: #FFFFFF;
213
214
  $modes-color-status-content-inverse-with-default-alt: #000000f2;
214
215
  $modes-color-status-content-inverse-with-hover: #FFFFFF;
215
216
  $modes-color-status-content-inverse-with-hover-alt: #000000;
217
+ $modes-color-status-custom-blue-default: #007FD9; // For pills. Not accessible with white TEXT.
218
+ $modes-color-status-custom-blue-default-alt: #0d1219; // Pill bg
219
+ $modes-color-status-custom-blue-hover: #4f91df; // used on pill hover states
220
+ $modes-color-status-custom-blue-hover-alt: #142131; // used on pill hover states
221
+ $modes-color-status-custom-teal-default: #008A89; // For pills. Not accessible with white TEXT.
222
+ $modes-color-status-custom-teal-default-alt: #0a1313; // Pill bg
223
+ $modes-color-status-custom-teal-hover: #449b9a; // used on pill hover states
224
+ $modes-color-status-custom-teal-hover-alt: #082427; // used on pill hover states
225
+ $modes-color-status-custom-green-default: #009023; // For pills. Not accessible with white TEXT.
226
+ $modes-color-status-custom-green-default-alt: #0a1408; // Pill bg
227
+ $modes-color-status-custom-green-hover: #44a146; // used on pill hover states
228
+ $modes-color-status-custom-green-hover-alt: #0b2418; // used on pill hover states
229
+ $modes-color-status-custom-lime-default: #6E8500; // For pills. Not accessible with white TEXT.
230
+ $modes-color-status-custom-lime-default-alt: #111205; // Pill bg
231
+ $modes-color-status-custom-lime-hover: #859635; // used on pill hover states
232
+ $modes-color-status-custom-lime-hover-alt: #162311; // used on pill hover states
233
+ $modes-color-status-custom-orange-default: #DB4B00; // For pills. Not accessible with white TEXT.
234
+ $modes-color-status-custom-orange-default-alt: #1c0e04; // Pill bg
235
+ $modes-color-status-custom-orange-hover: #e66930; // used on pill hover states
236
+ $modes-color-status-custom-orange-hover-alt: #331816; // used on pill hover states
237
+ $modes-color-status-custom-red-default: #F50058; // For pills. Not accessible with white TEXT.
238
+ $modes-color-status-custom-red-default-alt: #1e0d0d; // Pill bg
239
+ $modes-color-status-custom-red-hover: #fc4e6e; // used on pill hover states
240
+ $modes-color-status-custom-red-hover-alt: #331720; // used on pill hover states
241
+ $modes-color-status-custom-pink-default: #DD2BAB; // For pills. Not accessible with white TEXT.
242
+ $modes-color-status-custom-pink-default-alt: #1b0d16; // Pill bg
243
+ $modes-color-status-custom-pink-hover: #e558b7; // used on pill hover states
244
+ $modes-color-status-custom-pink-hover-alt: #2d192b; // used on pill hover states
245
+ $modes-color-status-custom-purple-default: #985FDC; // For pills. Not accessible with white TEXT.
246
+ $modes-color-status-custom-purple-default-alt: #150f19; // Pill bg
247
+ $modes-color-status-custom-purple-hover: #a977e2; // used on pill hover states
248
+ $modes-color-status-custom-purple-hover-alt: #231c30; // used on pill hover states
249
+ $modes-color-status-custom-gray-default: #7C7C7C; // For pills. Not accessible with white TEXT.
250
+ $modes-color-status-custom-gray-default-alt: #111; // Pill bg
251
+ $modes-color-status-custom-gray-hover: #8e8e8e; // used on pill hover states
252
+ $modes-color-status-custom-gray-hover-alt: #1a202b; // used on pill hover states
253
+ $modes-color-status-custom-slate-default: #5C8196; // For pills. Not accessible with white TEXT.
254
+ $modes-color-status-custom-slate-default-alt: #0f1214; // Pill bg
255
+ $modes-color-status-custom-slate-hover: #7493a5; // used on pill hover states
256
+ $modes-color-status-custom-slate-hover-alt: #13222c; // used on pill hover states
257
+ $modes-color-status-generic-default: #F0F;
258
+ $modes-color-status-important-default: #8F4CD7; // For tile status keylines to show if something is of high importance.
259
+ $modes-color-status-important-default-alt: #150d19; // Subtle message bg
260
+ $modes-color-status-important-hover: #a267de; // used on pill hover states
261
+ $modes-color-status-important-hover-alt: #231b30; // used on pill hover states and message bg
262
+ $modes-color-status-important-inverse-default: #985FDC;
263
+ $modes-color-status-important-inverse-default-alt: #f1e6fa; // Subtle message bg
264
+ $modes-color-status-important-inverse-hover: #8051b8; // used on pill hover states
265
+ $modes-color-status-important-inverse-hover-alt: #daceed; // used on pill hover states and message bg
216
266
  $modes-color-status-inactive-default: #4b4b4b; // For readonly pill bg and border
217
267
  $modes-color-status-inactive-with-default: #ffffffab; // For readonly filled pill text
218
268
  $modes-color-status-inactive-inverse-default: #a6a6a6; // For readonly pill bg and border
219
269
  $modes-color-status-inactive-inverse-with-default: #000000ab; // For readonly filled pill text
220
- $modes-color-status-important-default: #985FDC; // For tile status keylines to show if something is of high importance.
221
270
  $modes-color-status-info-default: #007ED9;
222
271
  $modes-color-status-info-default-alt: #111722; // Subtle message bg
223
272
  $modes-color-status-info-hover: #4f90df; // used on pill hover states
@@ -258,8 +307,6 @@ $modes-color-status-positive-inverse-default: #00811F; // For pills and messages
258
307
  $modes-color-status-positive-inverse-default-alt: #e9f2e8; // Subtle message bg
259
308
  $modes-color-status-positive-inverse-hover: #0e6d1d; // used on pill hover states
260
309
  $modes-color-status-positive-inverse-hover-alt: #cbe1c9; // used on pill hover states and message bg
261
- $modes-color-status-callout-default-alt: #122211; // used for marketing banners
262
- $modes-color-status-callout-hover-alt: #263525; // marketing banner hover
263
310
  $modes-color-status-reviews-default: #00D639;
264
311
  $modes-color-status-reviews-default-alt: linear-gradient(90deg, #00D639 0%, #00D639 50%, #282828 50%, #282828 100%);
265
312
  $modes-color-status-reviews-hover: #17b333; // used on pill hover states
package/scss/marketing/small/light.scss CHANGED
@@ -191,7 +191,8 @@ $modes-color-status-ai-default: #FFFFFF;
191
191
  $modes-color-status-ai-default-alt: #000000; // bg for contextual message comp
192
192
  $modes-color-status-ai-default-horizontal: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
193
193
  $modes-color-status-ai-default-vertical: linear-gradient(180deg, #13A038 0%, #149197 40%, #A87CFB 90%);
194
- $modes-color-status-generic-default: #007c7b; // used in progress bar
194
+ $modes-color-status-callout-default-alt: #e5fae2; // used for marketing banners
195
+ $modes-color-status-callout-hover-alt: #d8ecd5; // used for marketing banners
195
196
  $modes-color-status-caution-default: #D64309; // For pills and messages. Not accessible with white TEXT.
196
197
  $modes-color-status-caution-default-alt: #ffede5; // Subtle message bg
197
198
  $modes-color-status-caution-hover: #b33b0d; // used on pill hover states
@@ -213,11 +214,59 @@ $modes-color-status-content-inverse-with-default: #000000;
213
214
  $modes-color-status-content-inverse-with-default-alt: #fffffff2;
214
215
  $modes-color-status-content-inverse-with-hover: #000000; // for pill hover X
215
216
  $modes-color-status-content-inverse-with-hover-alt: #FFFFFF; // for message text
217
+ $modes-color-status-custom-blue-default: #0071C3; // For pills. Not accessible with white TEXT.
218
+ $modes-color-status-custom-blue-default-alt: #ebf0f9; // Pill bg
219
+ $modes-color-status-custom-blue-hover: #135fa3; // used on pill hover states
220
+ $modes-color-status-custom-blue-hover-alt: #ced9ed; // used on pill hover states
221
+ $modes-color-status-custom-teal-default: #007C7B; // For pills. Not accessible with white TEXT.
222
+ $modes-color-status-custom-teal-default-alt: #e9f1f1; // Pill bg
223
+ $modes-color-status-custom-teal-hover: #0e6968; // used on pill hover states
224
+ $modes-color-status-custom-teal-hover-alt: #c4dde0; // used on pill hover states
225
+ $modes-color-status-custom-green-default: #00811F; // For pills. Not accessible with white TEXT.
226
+ $modes-color-status-custom-green-default-alt: #e9f2e8; // Pill bg
227
+ $modes-color-status-custom-green-hover: #0e6d1d; // used on pill hover states
228
+ $modes-color-status-custom-green-hover-alt: #c4decf; // used on pill hover states
229
+ $modes-color-status-custom-lime-default: #637700; // For pills. Not accessible with white TEXT.
230
+ $modes-color-status-custom-lime-default-alt: #eff1e6; // Pill bg
231
+ $modes-color-status-custom-lime-hover: #546408; // used on pill hover states
232
+ $modes-color-status-custom-lime-hover-alt: #cdddc9; // used on pill hover states
233
+ $modes-color-status-custom-orange-default: #C54300; // For pills. Not accessible with white TEXT.
234
+ $modes-color-status-custom-orange-default-alt: #feece5; // Pill bg
235
+ $modes-color-status-custom-orange-hover: #a53a06; // used on pill hover states
236
+ $modes-color-status-custom-orange-hover-alt: #f2d0ce; // used on pill hover states
237
+ $modes-color-status-custom-red-default: #DC004E; // For pills. Not accessible with white TEXT.
238
+ $modes-color-status-custom-red-default-alt: #ffebec; // Pill bg
239
+ $modes-color-status-custom-red-hover: #b81242; // used on pill hover states
240
+ $modes-color-status-custom-red-hover-alt: #f1cfd9; // used on pill hover states
241
+ $modes-color-status-custom-pink-default: #C8269A; // For pills. Not accessible with white TEXT.
242
+ $modes-color-status-custom-pink-default-alt: #fcecf5; // Pill bg
243
+ $modes-color-status-custom-pink-hover: #a82581; // used on pill hover states
244
+ $modes-color-status-custom-pink-hover-alt: #ead2e5; // used on pill hover states
245
+ $modes-color-status-custom-purple-default: #8F4CD7; // For pills. Not accessible with white TEXT.
246
+ $modes-color-status-custom-purple-default-alt: #f5edfc; // Pill bg
247
+ $modes-color-status-custom-purple-hover: #7941b4; // used on pill hover states
248
+ $modes-color-status-custom-purple-hover-alt: #ded4ee; // used on pill hover states
249
+ $modes-color-status-custom-gray-default: #6F6F6F; // For pills. Not accessible with white TEXT.
250
+ $modes-color-status-custom-gray-default-alt: #f0f0f0; // Pill bg
251
+ $modes-color-status-custom-gray-hover: #5e5e5e; // used on pill hover states
252
+ $modes-color-status-custom-gray-hover-alt: #d3d9e5; // used on pill hover states
253
+ $modes-color-status-custom-slate-default: #527386; // For pills. Not accessible with white TEXT.
254
+ $modes-color-status-custom-slate-default-alt: #edf0f2; // Pill bg
255
+ $modes-color-status-custom-slate-hover: #466171; // used on pill hover states
256
+ $modes-color-status-custom-slate-hover-alt: #cbdae6; // used on pill hover states
257
+ $modes-color-status-generic-default: #F0F; // TO BE DETLETED: Was #007c7b and used in Progress bar, dataVis colour.
258
+ $modes-color-status-important-default: #8F4CD7; // For tile status keylines to show if something is of high importance.
259
+ $modes-color-status-important-default-alt: #f5edfc; // Subtle message bg
260
+ $modes-color-status-important-hover: #7941b4; // used on pill hover states
261
+ $modes-color-status-important-hover-alt: #ded4ee; // used on pill hover states and message bg
262
+ $modes-color-status-important-inverse-default: #985FDC;
263
+ $modes-color-status-important-inverse-default-alt: #1b1422; // Subtle message bg
264
+ $modes-color-status-important-inverse-hover: #a977e2; // used on pill hover states
265
+ $modes-color-status-important-inverse-hover-alt: #282039; // used on pill hover states and message bg
216
266
  $modes-color-status-inactive-default: #a6a6a6; // For readonly pill bg and border
217
267
  $modes-color-status-inactive-with-default: #000000ab; // For readonly filled pill text
218
268
  $modes-color-status-inactive-inverse-default: #4b4b4b; // For readonly pill bg and border
219
269
  $modes-color-status-inactive-inverse-with-default: #ffffffab; // For readonly filled pill text
220
- $modes-color-status-important-default: #8F4CD7; // For tile status keylines to show if something is of high importance.
221
270
  $modes-color-status-info-default: #0060A7; // For pills and messages. Not accessible with white TEXT.
222
271
  $modes-color-status-info-default-alt: #eaeef6; // Subtle message bg
223
272
  $modes-color-status-info-hover: #10518c; // used on pill hover states
@@ -258,8 +307,6 @@ $modes-color-status-positive-inverse-default: #009023;
258
307
  $modes-color-status-positive-inverse-default-alt: #0e1a0b; // Subtle message bg
259
308
  $modes-color-status-positive-inverse-hover: #328e37; // used on pill hover states
260
309
  $modes-color-status-positive-inverse-hover-alt: #132912; // used on pill hover states and message bg
261
- $modes-color-status-callout-default-alt: #e5fae2; // used for marketing banners
262
- $modes-color-status-callout-hover-alt: #d8ecd5; // used for marketing banners
263
310
  $modes-color-status-reviews-default: #00811F;
264
311
  $modes-color-status-reviews-default-alt: linear-gradient(90deg, #00811F 0%, #00811F 50%, #d1d1d1 50%, #d1d1d1 100%); // half fill
265
312
  $modes-color-status-reviews-hover: #0e6d1d;
package/scss/product/large/components/progress.scss CHANGED
@@ -28,7 +28,7 @@ $progress-color-fg-caution: $modes-color-status-caution-default;
28
28
  $progress-color-fg-default: $modes-color-interactive-monochrome-active;
29
29
  $progress-color-fg-error: $modes-color-status-negative-default;
30
30
  $progress-color-fg-info: $modes-color-status-info-default;
31
- $progress-color-datavis-fg-default: $modes-color-status-generic-default;
31
+ $progress-color-datavis-fg-default: $modes-color-status-custom-teal-default;
32
32
  $progress-color-loader-fg-default: $modes-color-interactive-monochrome-active; // used for loader standard loader spinner
33
33
  $progress-color-loader-fg-error: $modes-color-status-negative-default;
34
34
  $progress-color-loader-fg-complete: $modes-color-status-positive-default;
package/scss/product/large/components/status.scss CHANGED
@@ -7,10 +7,6 @@
7
7
 
8
8
  $status-radius-none: $global-radius-none; // Pill (embedded element inner corners)
9
9
  $status-color-none: $modes-color-none; // transparent override used for hiding colors when needed.
10
- $status-color-message-global-info-bg-default: $modes-color-status-info-default-alt; // Global message bg
11
- $status-color-message-global-info-icon: $modes-color-status-info-default; // Icon on tinted bgs
12
- $status-color-message-global-warning-bg-default: $modes-color-status-caution-default-alt; // Global message bg
13
- $status-color-message-global-warning-icon: $modes-color-status-caution-default; // Icon on tinted bgs
14
10
  $status-color-message-contextual-bg: $modes-color-generic-bg-nought;
15
11
  $status-color-message-contextual-icon: $modes-color-generic-bg-nought; // decorative icon on standard contextual messages
16
12
  $status-color-message-contextual-icon-alt: $modes-color-status-neutral-default; // icon on neutral status dialogs
@@ -31,6 +27,40 @@ $status-color-message-contextual-warning-bg-default: $modes-color-status-caution
31
27
  $status-color-message-contextual-warning-bg-alt: $modes-color-status-caution-default-alt; // Subtle message bg
32
28
  $status-color-message-contextual-warning-border-default: $modes-color-status-caution-default;
33
29
  $status-color-message-contextual-warning-icon: $modes-color-status-caution-default; // Icon on tinted bgs
30
+ $status-color-message-global-info-bg-default: $modes-color-status-info-default-alt; // Global message bg
31
+ $status-color-message-global-info-icon: $modes-color-status-info-default; // Icon on tinted bgs
32
+ $status-color-message-global-warning-bg-default: $modes-color-status-caution-default-alt; // Global message bg
33
+ $status-color-message-global-warning-icon: $modes-color-status-caution-default; // Icon on tinted bgs
34
+ $status-color-pill-custom-blue-bg-default: $modes-color-status-custom-blue-default;
35
+ $status-color-pill-custom-blue-bg-alt-default: $modes-color-status-custom-blue-default-alt; // outline pill bg
36
+ $status-color-pill-custom-blue-border-default: $modes-color-status-custom-blue-default;
37
+ $status-color-pill-custom-teal-bg-default: $modes-color-status-custom-teal-default;
38
+ $status-color-pill-custom-teal-bg-alt-default: $modes-color-status-custom-teal-default-alt; // outline pill bg
39
+ $status-color-pill-custom-teal-border-default: $modes-color-status-custom-teal-default;
40
+ $status-color-pill-custom-green-bg-default: $modes-color-status-custom-green-default;
41
+ $status-color-pill-custom-green-bg-alt-default: $modes-color-status-custom-green-default-alt; // outline pill bg
42
+ $status-color-pill-custom-green-border-default: $modes-color-status-custom-green-default;
43
+ $status-color-pill-custom-lime-bg-default: $modes-color-status-custom-lime-default;
44
+ $status-color-pill-custom-lime-bg-alt-default: $modes-color-status-custom-lime-default-alt; // outline pill bg
45
+ $status-color-pill-custom-lime-border-default: $modes-color-status-custom-lime-default;
46
+ $status-color-pill-custom-orange-bg-default: $modes-color-status-custom-orange-default;
47
+ $status-color-pill-custom-orange-bg-alt-default: $modes-color-status-custom-orange-default-alt; // outline pill bg
48
+ $status-color-pill-custom-orange-border-default: $modes-color-status-custom-orange-default;
49
+ $status-color-pill-custom-red-bg-default: $modes-color-status-custom-red-default;
50
+ $status-color-pill-custom-red-bg-alt-default: $modes-color-status-custom-red-default-alt; // outline pill bg
51
+ $status-color-pill-custom-red-border-default: $modes-color-status-custom-red-default;
52
+ $status-color-pill-custom-pink-bg-default: $modes-color-status-custom-pink-default;
53
+ $status-color-pill-custom-pink-bg-alt-default: $modes-color-status-custom-pink-default-alt; // outline pill bg
54
+ $status-color-pill-custom-pink-border-default: $modes-color-status-custom-pink-default;
55
+ $status-color-pill-custom-purple-bg-default: $modes-color-status-custom-purple-default;
56
+ $status-color-pill-custom-purple-bg-alt-default: $modes-color-status-custom-purple-default-alt; // outline pill bg
57
+ $status-color-pill-custom-purple-border-default: $modes-color-status-custom-purple-default;
58
+ $status-color-pill-custom-gray-bg-default: $modes-color-status-custom-gray-default;
59
+ $status-color-pill-custom-gray-bg-alt-default: $modes-color-status-custom-gray-default-alt; // outline pill bg
60
+ $status-color-pill-custom-gray-border-default: $modes-color-status-custom-gray-default;
61
+ $status-color-pill-custom-slate-bg-default: $modes-color-status-custom-slate-default;
62
+ $status-color-pill-custom-slate-bg-alt-default: $modes-color-status-custom-slate-default-alt; // outline pill bg
63
+ $status-color-pill-custom-slate-border-default: $modes-color-status-custom-slate-default;
34
64
  $status-color-pill-error-bg-default: $modes-color-status-negative-default;
35
65
  $status-color-pill-error-bg-alt-default: $modes-color-status-negative-default-alt; // outline pill bg
36
66
  $status-color-pill-error-border-default: $modes-color-status-negative-default;
@@ -79,20 +109,40 @@ $status-typography-responsive-default-l: $global-typography-responsive-component
79
109
  $status-typography-responsive-heading-s: $global-typography-responsive-component-firm-s;
80
110
  $status-typography-responsive-heading-m: $global-typography-responsive-component-firm-m;
81
111
  $status-typography-responsive-heading-l: $global-typography-responsive-component-firm-l;
82
- $status-color-message-global-label-hover: $modes-color-interactive-monochrome-with-hover;
83
- $status-color-message-global-callout-bg-default: $modes-color-status-callout-default-alt; // Global message bg
84
- $status-color-message-global-info-bg-hover: $modes-color-status-info-hover-alt;
85
- $status-color-message-global-warning-bg-hover: $modes-color-status-caution-hover-alt;
86
112
  $status-color-message-contextual-text: $modes-color-status-content-with-hover-alt; // Message text.
87
113
  $status-color-message-contextual-ai-bg-default: $modes-color-status-ai-default-alt;
88
114
  $status-color-message-contextual-ai-border-default: $modes-color-status-ai-default-alt;
89
115
  $status-color-message-contextual-callout-bg-alt: $modes-color-status-callout-default-alt; // Subtle message bg
90
- $status-color-pill-generic-inverse-label-default: $modes-color-status-content-inverse-with-default;
91
- $status-color-pill-generic-inverse-label-hover: $modes-color-status-content-inverse-with-hover;
116
+ $status-color-message-global-label-hover: $modes-color-interactive-monochrome-with-hover;
117
+ $status-color-message-global-callout-bg-default: $modes-color-status-callout-default-alt; // Global message bg
118
+ $status-color-message-global-info-bg-hover: $modes-color-status-info-hover-alt;
119
+ $status-color-message-global-warning-bg-hover: $modes-color-status-caution-hover-alt;
120
+ $status-color-pill-custom-blue-bg-alt-hover: $modes-color-status-custom-blue-hover-alt;
121
+ $status-color-pill-custom-blue-bg-hover: $modes-color-status-custom-blue-hover;
122
+ $status-color-pill-custom-teal-bg-alt-hover: $modes-color-status-custom-teal-hover-alt;
123
+ $status-color-pill-custom-teal-bg-hover: $modes-color-status-custom-teal-hover;
124
+ $status-color-pill-custom-green-bg-alt-hover: $modes-color-status-custom-green-hover-alt;
125
+ $status-color-pill-custom-green-bg-hover: $modes-color-status-custom-green-hover;
126
+ $status-color-pill-custom-lime-bg-alt-hover: $modes-color-status-custom-lime-hover-alt;
127
+ $status-color-pill-custom-lime-bg-hover: $modes-color-status-custom-lime-hover;
128
+ $status-color-pill-custom-orange-bg-alt-hover: $modes-color-status-custom-orange-hover-alt;
129
+ $status-color-pill-custom-orange-bg-hover: $modes-color-status-custom-orange-hover;
130
+ $status-color-pill-custom-red-bg-alt-hover: $modes-color-status-custom-red-hover-alt;
131
+ $status-color-pill-custom-red-bg-hover: $modes-color-status-custom-red-hover;
132
+ $status-color-pill-custom-pink-bg-alt-hover: $modes-color-status-custom-pink-hover-alt;
133
+ $status-color-pill-custom-pink-bg-hover: $modes-color-status-custom-pink-hover;
134
+ $status-color-pill-custom-purple-bg-alt-hover: $modes-color-status-custom-purple-hover-alt;
135
+ $status-color-pill-custom-purple-bg-hover: $modes-color-status-custom-purple-hover;
136
+ $status-color-pill-custom-gray-bg-alt-hover: $modes-color-status-custom-gray-hover-alt;
137
+ $status-color-pill-custom-gray-bg-hover: $modes-color-status-custom-gray-hover;
138
+ $status-color-pill-custom-slate-bg-alt-hover: $modes-color-status-custom-slate-hover-alt;
139
+ $status-color-pill-custom-slate-bg-hover: $modes-color-status-custom-slate-hover;
92
140
  $status-color-pill-error-bg-alt-hover: $modes-color-status-negative-hover-alt;
93
141
  $status-color-pill-error-bg-hover: $modes-color-status-negative-hover;
94
142
  $status-color-pill-error-inverse-bg-alt-hover: $modes-color-status-negative-inverse-hover-alt;
95
143
  $status-color-pill-error-inverse-bg-hover: $modes-color-status-negative-inverse-hover;
144
+ $status-color-pill-generic-inverse-label-default: $modes-color-status-content-inverse-with-default;
145
+ $status-color-pill-generic-inverse-label-hover: $modes-color-status-content-inverse-with-hover;
96
146
  $status-color-pill-info-bg-alt-hover: $modes-color-status-info-hover-alt;
97
147
  $status-color-pill-info-bg-hover: $modes-color-status-info-hover;
98
148
  $status-color-pill-info-inverse-bg-alt-hover: $modes-color-status-info-inverse-hover-alt;
@@ -101,6 +151,7 @@ $status-color-pill-neutral-bg-alt-hover: $modes-color-status-neutral-hover-alt;
101
151
  $status-color-pill-neutral-bg-hover: $modes-color-status-neutral-hover;
102
152
  $status-color-pill-neutral-inverse-bg-alt-hover: $modes-color-status-neutral-inverse-hover-alt;
103
153
  $status-color-pill-neutral-inverse-bg-hover: $modes-color-status-neutral-inverse-hover;
154
+ $status-color-pill-readonly-label: $modes-color-generic-content-firm; // Pill (all types, readonly, when nested in disabled parent components)
104
155
  $status-color-pill-success-bg-alt-hover: $modes-color-status-positive-hover-alt;
105
156
  $status-color-pill-success-bg-hover: $modes-color-status-positive-hover;
106
157
  $status-color-pill-success-inverse-bg-alt-hover: $modes-color-status-positive-inverse-hover-alt;
@@ -109,15 +160,14 @@ $status-color-pill-warning-bg-alt-hover: $modes-color-status-caution-hover-alt;
109
160
  $status-color-pill-warning-bg-hover: $modes-color-status-caution-hover;
110
161
  $status-color-pill-warning-inverse-bg-alt-hover: $modes-color-status-caution-inverse-hover-alt;
111
162
  $status-color-pill-warning-inverse-bg-hover: $modes-color-status-caution-inverse-hover;
112
- $status-color-pill-readonly-label: $modes-color-generic-content-firm; // Pill (all types, readonly, when nested in disabled parent components)
113
163
  $status-color-rating-bg-default: $modes-color-status-reviews-default;
114
164
  $status-color-rating-bg-default-alt: $modes-color-status-reviews-default-alt;
115
165
  $status-color-rating-bg-hover: $modes-color-status-reviews-hover;
116
166
  $status-color-rating-border-default: $modes-color-status-reviews-default;
167
+ $status-color-message-contextual-callout-icon: $modes-color-status-content-with-default-alt;
117
168
  $status-color-message-global-label-default: $modes-color-status-content-with-default-alt;
118
169
  $status-color-message-global-callout-bg-hover: $modes-color-status-callout-hover-alt; // global message bg hover
119
170
  $status-color-message-global-callout-icon: $modes-color-status-content-with-default-alt; // Icon on tinted bgs
120
- $status-color-message-contextual-callout-icon: $modes-color-status-content-with-default-alt;
121
171
  $status-color-pill-generic-label-default: $modes-color-status-content-with-default;
122
172
  $status-color-pill-generic-label-hover: $modes-color-status-content-with-hover;
123
173
  $status-color-pill-generic-label-alt-default: $modes-color-status-content-with-default-alt;
package/scss/product/large/components/table.scss CHANGED
@@ -80,7 +80,7 @@ $table-size-row-standard-m: $global-size-macro-m;
80
80
  $table-size-row-standard-l: $global-size-macro-l;
81
81
  $table-size-row-standard-xl: $global-size-macro-xl + $global-size-micro-m;
82
82
  $table-size-icon-xs: $global-size-icon-s;
83
- $table-size-icon-s: $global-size-icon-s;
83
+ $table-size-icon-s: $global-size-icon-m;
84
84
  $table-size-icon-m: $global-size-icon-m;
85
85
  $table-size-icon-l: $global-size-icon-l;
86
86
  $table-size-icon-xl: $global-size-icon-xl;
package/scss/product/large/dark.scss CHANGED
@@ -191,7 +191,8 @@ $modes-color-status-ai-default: #000000;
191
191
  $modes-color-status-ai-default-alt: #FFFFFF; // bg for contextual message comp
192
192
  $modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
193
193
  $modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
194
- $modes-color-status-generic-default: #008a89;
194
+ $modes-color-status-callout-default-alt: #122211; // used for marketing banners
195
+ $modes-color-status-callout-hover-alt: #263525; // marketing banner hover
195
196
  $modes-color-status-caution-default: #E04500;
196
197
  $modes-color-status-caution-default-alt: #251206; // Subtle message bg
197
198
  $modes-color-status-caution-hover: #eb6530; // used on pill hover states
@@ -213,11 +214,59 @@ $modes-color-status-content-inverse-with-default: #FFFFFF;
213
214
  $modes-color-status-content-inverse-with-default-alt: #000000f2;
214
215
  $modes-color-status-content-inverse-with-hover: #FFFFFF;
215
216
  $modes-color-status-content-inverse-with-hover-alt: #000000;
217
+ $modes-color-status-custom-blue-default: #007FD9; // For pills. Not accessible with white TEXT.
218
+ $modes-color-status-custom-blue-default-alt: #0d1219; // Pill bg
219
+ $modes-color-status-custom-blue-hover: #4f91df; // used on pill hover states
220
+ $modes-color-status-custom-blue-hover-alt: #142131; // used on pill hover states
221
+ $modes-color-status-custom-teal-default: #008A89; // For pills. Not accessible with white TEXT.
222
+ $modes-color-status-custom-teal-default-alt: #0a1313; // Pill bg
223
+ $modes-color-status-custom-teal-hover: #449b9a; // used on pill hover states
224
+ $modes-color-status-custom-teal-hover-alt: #082427; // used on pill hover states
225
+ $modes-color-status-custom-green-default: #009023; // For pills. Not accessible with white TEXT.
226
+ $modes-color-status-custom-green-default-alt: #0a1408; // Pill bg
227
+ $modes-color-status-custom-green-hover: #44a146; // used on pill hover states
228
+ $modes-color-status-custom-green-hover-alt: #0b2418; // used on pill hover states
229
+ $modes-color-status-custom-lime-default: #6E8500; // For pills. Not accessible with white TEXT.
230
+ $modes-color-status-custom-lime-default-alt: #111205; // Pill bg
231
+ $modes-color-status-custom-lime-hover: #859635; // used on pill hover states
232
+ $modes-color-status-custom-lime-hover-alt: #162311; // used on pill hover states
233
+ $modes-color-status-custom-orange-default: #DB4B00; // For pills. Not accessible with white TEXT.
234
+ $modes-color-status-custom-orange-default-alt: #1c0e04; // Pill bg
235
+ $modes-color-status-custom-orange-hover: #e66930; // used on pill hover states
236
+ $modes-color-status-custom-orange-hover-alt: #331816; // used on pill hover states
237
+ $modes-color-status-custom-red-default: #F50058; // For pills. Not accessible with white TEXT.
238
+ $modes-color-status-custom-red-default-alt: #1e0d0d; // Pill bg
239
+ $modes-color-status-custom-red-hover: #fc4e6e; // used on pill hover states
240
+ $modes-color-status-custom-red-hover-alt: #331720; // used on pill hover states
241
+ $modes-color-status-custom-pink-default: #DD2BAB; // For pills. Not accessible with white TEXT.
242
+ $modes-color-status-custom-pink-default-alt: #1b0d16; // Pill bg
243
+ $modes-color-status-custom-pink-hover: #e558b7; // used on pill hover states
244
+ $modes-color-status-custom-pink-hover-alt: #2d192b; // used on pill hover states
245
+ $modes-color-status-custom-purple-default: #985FDC; // For pills. Not accessible with white TEXT.
246
+ $modes-color-status-custom-purple-default-alt: #150f19; // Pill bg
247
+ $modes-color-status-custom-purple-hover: #a977e2; // used on pill hover states
248
+ $modes-color-status-custom-purple-hover-alt: #231c30; // used on pill hover states
249
+ $modes-color-status-custom-gray-default: #7C7C7C; // For pills. Not accessible with white TEXT.
250
+ $modes-color-status-custom-gray-default-alt: #111; // Pill bg
251
+ $modes-color-status-custom-gray-hover: #8e8e8e; // used on pill hover states
252
+ $modes-color-status-custom-gray-hover-alt: #1a202b; // used on pill hover states
253
+ $modes-color-status-custom-slate-default: #5C8196; // For pills. Not accessible with white TEXT.
254
+ $modes-color-status-custom-slate-default-alt: #0f1214; // Pill bg
255
+ $modes-color-status-custom-slate-hover: #7493a5; // used on pill hover states
256
+ $modes-color-status-custom-slate-hover-alt: #13222c; // used on pill hover states
257
+ $modes-color-status-generic-default: #F0F;
258
+ $modes-color-status-important-default: #8F4CD7; // For tile status keylines to show if something is of high importance.
259
+ $modes-color-status-important-default-alt: #150d19; // Subtle message bg
260
+ $modes-color-status-important-hover: #a267de; // used on pill hover states
261
+ $modes-color-status-important-hover-alt: #231b30; // used on pill hover states and message bg
262
+ $modes-color-status-important-inverse-default: #985FDC;
263
+ $modes-color-status-important-inverse-default-alt: #f1e6fa; // Subtle message bg
264
+ $modes-color-status-important-inverse-hover: #8051b8; // used on pill hover states
265
+ $modes-color-status-important-inverse-hover-alt: #daceed; // used on pill hover states and message bg
216
266
  $modes-color-status-inactive-default: #4b4b4b; // For readonly pill bg and border
217
267
  $modes-color-status-inactive-with-default: #ffffffab; // For readonly filled pill text
218
268
  $modes-color-status-inactive-inverse-default: #a6a6a6; // For readonly pill bg and border
219
269
  $modes-color-status-inactive-inverse-with-default: #000000ab; // For readonly filled pill text
220
- $modes-color-status-important-default: #985FDC; // For tile status keylines to show if something is of high importance.
221
270
  $modes-color-status-info-default: #007ED9;
222
271
  $modes-color-status-info-default-alt: #111722; // Subtle message bg
223
272
  $modes-color-status-info-hover: #4f90df; // used on pill hover states
@@ -258,8 +307,6 @@ $modes-color-status-positive-inverse-default: #00811F; // For pills and messages
258
307
  $modes-color-status-positive-inverse-default-alt: #e9f2e8; // Subtle message bg
259
308
  $modes-color-status-positive-inverse-hover: #0e6d1d; // used on pill hover states
260
309
  $modes-color-status-positive-inverse-hover-alt: #cbe1c9; // used on pill hover states and message bg
261
- $modes-color-status-callout-default-alt: #122211; // used for marketing banners
262
- $modes-color-status-callout-hover-alt: #263525; // marketing banner hover
263
310
  $modes-color-status-reviews-default: #00D639;
264
311
  $modes-color-status-reviews-default-alt: linear-gradient(90deg, #00D639 0%, #00D639 50%, #282828 50%, #282828 100%);
265
312
  $modes-color-status-reviews-hover: #17b333; // used on pill hover states
package/scss/product/large/light.scss CHANGED
@@ -191,7 +191,8 @@ $modes-color-status-ai-default: #FFFFFF;
191
191
  $modes-color-status-ai-default-alt: #000000; // bg for contextual message comp
192
192
  $modes-color-status-ai-default-horizontal: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
193
193
  $modes-color-status-ai-default-vertical: linear-gradient(180deg, #13A038 0%, #149197 40%, #A87CFB 90%);
194
- $modes-color-status-generic-default: #007c7b; // used in progress bar
194
+ $modes-color-status-callout-default-alt: #e5fae2; // used for marketing banners
195
+ $modes-color-status-callout-hover-alt: #d8ecd5; // used for marketing banners
195
196
  $modes-color-status-caution-default: #D64309; // For pills and messages. Not accessible with white TEXT.
196
197
  $modes-color-status-caution-default-alt: #ffede5; // Subtle message bg
197
198
  $modes-color-status-caution-hover: #b33b0d; // used on pill hover states
@@ -213,11 +214,59 @@ $modes-color-status-content-inverse-with-default: #000000;
213
214
  $modes-color-status-content-inverse-with-default-alt: #fffffff2;
214
215
  $modes-color-status-content-inverse-with-hover: #000000; // for pill hover X
215
216
  $modes-color-status-content-inverse-with-hover-alt: #FFFFFF; // for message text
217
+ $modes-color-status-custom-blue-default: #0071C3; // For pills. Not accessible with white TEXT.
218
+ $modes-color-status-custom-blue-default-alt: #ebf0f9; // Pill bg
219
+ $modes-color-status-custom-blue-hover: #135fa3; // used on pill hover states
220
+ $modes-color-status-custom-blue-hover-alt: #ced9ed; // used on pill hover states
221
+ $modes-color-status-custom-teal-default: #007C7B; // For pills. Not accessible with white TEXT.
222
+ $modes-color-status-custom-teal-default-alt: #e9f1f1; // Pill bg
223
+ $modes-color-status-custom-teal-hover: #0e6968; // used on pill hover states
224
+ $modes-color-status-custom-teal-hover-alt: #c4dde0; // used on pill hover states
225
+ $modes-color-status-custom-green-default: #00811F; // For pills. Not accessible with white TEXT.
226
+ $modes-color-status-custom-green-default-alt: #e9f2e8; // Pill bg
227
+ $modes-color-status-custom-green-hover: #0e6d1d; // used on pill hover states
228
+ $modes-color-status-custom-green-hover-alt: #c4decf; // used on pill hover states
229
+ $modes-color-status-custom-lime-default: #637700; // For pills. Not accessible with white TEXT.
230
+ $modes-color-status-custom-lime-default-alt: #eff1e6; // Pill bg
231
+ $modes-color-status-custom-lime-hover: #546408; // used on pill hover states
232
+ $modes-color-status-custom-lime-hover-alt: #cdddc9; // used on pill hover states
233
+ $modes-color-status-custom-orange-default: #C54300; // For pills. Not accessible with white TEXT.
234
+ $modes-color-status-custom-orange-default-alt: #feece5; // Pill bg
235
+ $modes-color-status-custom-orange-hover: #a53a06; // used on pill hover states
236
+ $modes-color-status-custom-orange-hover-alt: #f2d0ce; // used on pill hover states
237
+ $modes-color-status-custom-red-default: #DC004E; // For pills. Not accessible with white TEXT.
238
+ $modes-color-status-custom-red-default-alt: #ffebec; // Pill bg
239
+ $modes-color-status-custom-red-hover: #b81242; // used on pill hover states
240
+ $modes-color-status-custom-red-hover-alt: #f1cfd9; // used on pill hover states
241
+ $modes-color-status-custom-pink-default: #C8269A; // For pills. Not accessible with white TEXT.
242
+ $modes-color-status-custom-pink-default-alt: #fcecf5; // Pill bg
243
+ $modes-color-status-custom-pink-hover: #a82581; // used on pill hover states
244
+ $modes-color-status-custom-pink-hover-alt: #ead2e5; // used on pill hover states
245
+ $modes-color-status-custom-purple-default: #8F4CD7; // For pills. Not accessible with white TEXT.
246
+ $modes-color-status-custom-purple-default-alt: #f5edfc; // Pill bg
247
+ $modes-color-status-custom-purple-hover: #7941b4; // used on pill hover states
248
+ $modes-color-status-custom-purple-hover-alt: #ded4ee; // used on pill hover states
249
+ $modes-color-status-custom-gray-default: #6F6F6F; // For pills. Not accessible with white TEXT.
250
+ $modes-color-status-custom-gray-default-alt: #f0f0f0; // Pill bg
251
+ $modes-color-status-custom-gray-hover: #5e5e5e; // used on pill hover states
252
+ $modes-color-status-custom-gray-hover-alt: #d3d9e5; // used on pill hover states
253
+ $modes-color-status-custom-slate-default: #527386; // For pills. Not accessible with white TEXT.
254
+ $modes-color-status-custom-slate-default-alt: #edf0f2; // Pill bg
255
+ $modes-color-status-custom-slate-hover: #466171; // used on pill hover states
256
+ $modes-color-status-custom-slate-hover-alt: #cbdae6; // used on pill hover states
257
+ $modes-color-status-generic-default: #F0F; // TO BE DETLETED: Was #007c7b and used in Progress bar, dataVis colour.
258
+ $modes-color-status-important-default: #8F4CD7; // For tile status keylines to show if something is of high importance.
259
+ $modes-color-status-important-default-alt: #f5edfc; // Subtle message bg
260
+ $modes-color-status-important-hover: #7941b4; // used on pill hover states
261
+ $modes-color-status-important-hover-alt: #ded4ee; // used on pill hover states and message bg
262
+ $modes-color-status-important-inverse-default: #985FDC;
263
+ $modes-color-status-important-inverse-default-alt: #1b1422; // Subtle message bg
264
+ $modes-color-status-important-inverse-hover: #a977e2; // used on pill hover states
265
+ $modes-color-status-important-inverse-hover-alt: #282039; // used on pill hover states and message bg
216
266
  $modes-color-status-inactive-default: #a6a6a6; // For readonly pill bg and border
217
267
  $modes-color-status-inactive-with-default: #000000ab; // For readonly filled pill text
218
268
  $modes-color-status-inactive-inverse-default: #4b4b4b; // For readonly pill bg and border
219
269
  $modes-color-status-inactive-inverse-with-default: #ffffffab; // For readonly filled pill text
220
- $modes-color-status-important-default: #8F4CD7; // For tile status keylines to show if something is of high importance.
221
270
  $modes-color-status-info-default: #0060A7; // For pills and messages. Not accessible with white TEXT.
222
271
  $modes-color-status-info-default-alt: #eaeef6; // Subtle message bg
223
272
  $modes-color-status-info-hover: #10518c; // used on pill hover states
@@ -258,8 +307,6 @@ $modes-color-status-positive-inverse-default: #009023;
258
307
  $modes-color-status-positive-inverse-default-alt: #0e1a0b; // Subtle message bg
259
308
  $modes-color-status-positive-inverse-hover: #328e37; // used on pill hover states
260
309
  $modes-color-status-positive-inverse-hover-alt: #132912; // used on pill hover states and message bg
261
- $modes-color-status-callout-default-alt: #e5fae2; // used for marketing banners
262
- $modes-color-status-callout-hover-alt: #d8ecd5; // used for marketing banners
263
310
  $modes-color-status-reviews-default: #00811F;
264
311
  $modes-color-status-reviews-default-alt: linear-gradient(90deg, #00811F 0%, #00811F 50%, #d1d1d1 50%, #d1d1d1 100%); // half fill
265
312
  $modes-color-status-reviews-hover: #0e6d1d;
package/scss/product/small/components/progress.scss CHANGED
@@ -28,7 +28,7 @@ $progress-color-fg-caution: $modes-color-status-caution-default;
28
28
  $progress-color-fg-default: $modes-color-interactive-monochrome-active;
29
29
  $progress-color-fg-error: $modes-color-status-negative-default;
30
30
  $progress-color-fg-info: $modes-color-status-info-default;
31
- $progress-color-datavis-fg-default: $modes-color-status-generic-default;
31
+ $progress-color-datavis-fg-default: $modes-color-status-custom-teal-default;
32
32
  $progress-color-loader-fg-default: $modes-color-interactive-monochrome-active; // used for loader standard loader spinner
33
33
  $progress-color-loader-fg-error: $modes-color-status-negative-default;
34
34
  $progress-color-loader-fg-complete: $modes-color-status-positive-default;
package/scss/product/small/components/status.scss CHANGED
@@ -7,10 +7,6 @@
7
7
 
8
8
  $status-radius-none: $global-radius-none; // Pill (embedded element inner corners)
9
9
  $status-color-none: $modes-color-none; // transparent override used for hiding colors when needed.
10
- $status-color-message-global-info-bg-default: $modes-color-status-info-default-alt; // Global message bg
11
- $status-color-message-global-info-icon: $modes-color-status-info-default; // Icon on tinted bgs
12
- $status-color-message-global-warning-bg-default: $modes-color-status-caution-default-alt; // Global message bg
13
- $status-color-message-global-warning-icon: $modes-color-status-caution-default; // Icon on tinted bgs
14
10
  $status-color-message-contextual-bg: $modes-color-generic-bg-nought;
15
11
  $status-color-message-contextual-icon: $modes-color-generic-bg-nought; // decorative icon on standard contextual messages
16
12
  $status-color-message-contextual-icon-alt: $modes-color-status-neutral-default; // icon on neutral status dialogs
@@ -31,6 +27,40 @@ $status-color-message-contextual-warning-bg-default: $modes-color-status-caution
31
27
  $status-color-message-contextual-warning-bg-alt: $modes-color-status-caution-default-alt; // Subtle message bg
32
28
  $status-color-message-contextual-warning-border-default: $modes-color-status-caution-default;
33
29
  $status-color-message-contextual-warning-icon: $modes-color-status-caution-default; // Icon on tinted bgs
30
+ $status-color-message-global-info-bg-default: $modes-color-status-info-default-alt; // Global message bg
31
+ $status-color-message-global-info-icon: $modes-color-status-info-default; // Icon on tinted bgs
32
+ $status-color-message-global-warning-bg-default: $modes-color-status-caution-default-alt; // Global message bg
33
+ $status-color-message-global-warning-icon: $modes-color-status-caution-default; // Icon on tinted bgs
34
+ $status-color-pill-custom-blue-bg-default: $modes-color-status-custom-blue-default;
35
+ $status-color-pill-custom-blue-bg-alt-default: $modes-color-status-custom-blue-default-alt; // outline pill bg
36
+ $status-color-pill-custom-blue-border-default: $modes-color-status-custom-blue-default;
37
+ $status-color-pill-custom-teal-bg-default: $modes-color-status-custom-teal-default;
38
+ $status-color-pill-custom-teal-bg-alt-default: $modes-color-status-custom-teal-default-alt; // outline pill bg
39
+ $status-color-pill-custom-teal-border-default: $modes-color-status-custom-teal-default;
40
+ $status-color-pill-custom-green-bg-default: $modes-color-status-custom-green-default;
41
+ $status-color-pill-custom-green-bg-alt-default: $modes-color-status-custom-green-default-alt; // outline pill bg
42
+ $status-color-pill-custom-green-border-default: $modes-color-status-custom-green-default;
43
+ $status-color-pill-custom-lime-bg-default: $modes-color-status-custom-lime-default;
44
+ $status-color-pill-custom-lime-bg-alt-default: $modes-color-status-custom-lime-default-alt; // outline pill bg
45
+ $status-color-pill-custom-lime-border-default: $modes-color-status-custom-lime-default;
46
+ $status-color-pill-custom-orange-bg-default: $modes-color-status-custom-orange-default;
47
+ $status-color-pill-custom-orange-bg-alt-default: $modes-color-status-custom-orange-default-alt; // outline pill bg
48
+ $status-color-pill-custom-orange-border-default: $modes-color-status-custom-orange-default;
49
+ $status-color-pill-custom-red-bg-default: $modes-color-status-custom-red-default;
50
+ $status-color-pill-custom-red-bg-alt-default: $modes-color-status-custom-red-default-alt; // outline pill bg
51
+ $status-color-pill-custom-red-border-default: $modes-color-status-custom-red-default;
52
+ $status-color-pill-custom-pink-bg-default: $modes-color-status-custom-pink-default;
53
+ $status-color-pill-custom-pink-bg-alt-default: $modes-color-status-custom-pink-default-alt; // outline pill bg
54
+ $status-color-pill-custom-pink-border-default: $modes-color-status-custom-pink-default;
55
+ $status-color-pill-custom-purple-bg-default: $modes-color-status-custom-purple-default;
56
+ $status-color-pill-custom-purple-bg-alt-default: $modes-color-status-custom-purple-default-alt; // outline pill bg
57
+ $status-color-pill-custom-purple-border-default: $modes-color-status-custom-purple-default;
58
+ $status-color-pill-custom-gray-bg-default: $modes-color-status-custom-gray-default;
59
+ $status-color-pill-custom-gray-bg-alt-default: $modes-color-status-custom-gray-default-alt; // outline pill bg
60
+ $status-color-pill-custom-gray-border-default: $modes-color-status-custom-gray-default;
61
+ $status-color-pill-custom-slate-bg-default: $modes-color-status-custom-slate-default;
62
+ $status-color-pill-custom-slate-bg-alt-default: $modes-color-status-custom-slate-default-alt; // outline pill bg
63
+ $status-color-pill-custom-slate-border-default: $modes-color-status-custom-slate-default;
34
64
  $status-color-pill-error-bg-default: $modes-color-status-negative-default;
35
65
  $status-color-pill-error-bg-alt-default: $modes-color-status-negative-default-alt; // outline pill bg
36
66
  $status-color-pill-error-border-default: $modes-color-status-negative-default;
@@ -79,20 +109,40 @@ $status-typography-responsive-default-l: $global-typography-responsive-component
79
109
  $status-typography-responsive-heading-s: $global-typography-responsive-component-firm-s;
80
110
  $status-typography-responsive-heading-m: $global-typography-responsive-component-firm-m;
81
111
  $status-typography-responsive-heading-l: $global-typography-responsive-component-firm-l;
82
- $status-color-message-global-label-hover: $modes-color-interactive-monochrome-with-hover;
83
- $status-color-message-global-callout-bg-default: $modes-color-status-callout-default-alt; // Global message bg
84
- $status-color-message-global-info-bg-hover: $modes-color-status-info-hover-alt;
85
- $status-color-message-global-warning-bg-hover: $modes-color-status-caution-hover-alt;
86
112
  $status-color-message-contextual-text: $modes-color-status-content-with-hover-alt; // Message text.
87
113
  $status-color-message-contextual-ai-bg-default: $modes-color-status-ai-default-alt;
88
114
  $status-color-message-contextual-ai-border-default: $modes-color-status-ai-default-alt;
89
115
  $status-color-message-contextual-callout-bg-alt: $modes-color-status-callout-default-alt; // Subtle message bg
90
- $status-color-pill-generic-inverse-label-default: $modes-color-status-content-inverse-with-default;
91
- $status-color-pill-generic-inverse-label-hover: $modes-color-status-content-inverse-with-hover;
116
+ $status-color-message-global-label-hover: $modes-color-interactive-monochrome-with-hover;
117
+ $status-color-message-global-callout-bg-default: $modes-color-status-callout-default-alt; // Global message bg
118
+ $status-color-message-global-info-bg-hover: $modes-color-status-info-hover-alt;
119
+ $status-color-message-global-warning-bg-hover: $modes-color-status-caution-hover-alt;
120
+ $status-color-pill-custom-blue-bg-alt-hover: $modes-color-status-custom-blue-hover-alt;
121
+ $status-color-pill-custom-blue-bg-hover: $modes-color-status-custom-blue-hover;
122
+ $status-color-pill-custom-teal-bg-alt-hover: $modes-color-status-custom-teal-hover-alt;
123
+ $status-color-pill-custom-teal-bg-hover: $modes-color-status-custom-teal-hover;
124
+ $status-color-pill-custom-green-bg-alt-hover: $modes-color-status-custom-green-hover-alt;
125
+ $status-color-pill-custom-green-bg-hover: $modes-color-status-custom-green-hover;
126
+ $status-color-pill-custom-lime-bg-alt-hover: $modes-color-status-custom-lime-hover-alt;
127
+ $status-color-pill-custom-lime-bg-hover: $modes-color-status-custom-lime-hover;
128
+ $status-color-pill-custom-orange-bg-alt-hover: $modes-color-status-custom-orange-hover-alt;
129
+ $status-color-pill-custom-orange-bg-hover: $modes-color-status-custom-orange-hover;
130
+ $status-color-pill-custom-red-bg-alt-hover: $modes-color-status-custom-red-hover-alt;
131
+ $status-color-pill-custom-red-bg-hover: $modes-color-status-custom-red-hover;
132
+ $status-color-pill-custom-pink-bg-alt-hover: $modes-color-status-custom-pink-hover-alt;
133
+ $status-color-pill-custom-pink-bg-hover: $modes-color-status-custom-pink-hover;
134
+ $status-color-pill-custom-purple-bg-alt-hover: $modes-color-status-custom-purple-hover-alt;
135
+ $status-color-pill-custom-purple-bg-hover: $modes-color-status-custom-purple-hover;
136
+ $status-color-pill-custom-gray-bg-alt-hover: $modes-color-status-custom-gray-hover-alt;
137
+ $status-color-pill-custom-gray-bg-hover: $modes-color-status-custom-gray-hover;
138
+ $status-color-pill-custom-slate-bg-alt-hover: $modes-color-status-custom-slate-hover-alt;
139
+ $status-color-pill-custom-slate-bg-hover: $modes-color-status-custom-slate-hover;
92
140
  $status-color-pill-error-bg-alt-hover: $modes-color-status-negative-hover-alt;
93
141
  $status-color-pill-error-bg-hover: $modes-color-status-negative-hover;
94
142
  $status-color-pill-error-inverse-bg-alt-hover: $modes-color-status-negative-inverse-hover-alt;
95
143
  $status-color-pill-error-inverse-bg-hover: $modes-color-status-negative-inverse-hover;
144
+ $status-color-pill-generic-inverse-label-default: $modes-color-status-content-inverse-with-default;
145
+ $status-color-pill-generic-inverse-label-hover: $modes-color-status-content-inverse-with-hover;
96
146
  $status-color-pill-info-bg-alt-hover: $modes-color-status-info-hover-alt;
97
147
  $status-color-pill-info-bg-hover: $modes-color-status-info-hover;
98
148
  $status-color-pill-info-inverse-bg-alt-hover: $modes-color-status-info-inverse-hover-alt;
@@ -101,6 +151,7 @@ $status-color-pill-neutral-bg-alt-hover: $modes-color-status-neutral-hover-alt;
101
151
  $status-color-pill-neutral-bg-hover: $modes-color-status-neutral-hover;
102
152
  $status-color-pill-neutral-inverse-bg-alt-hover: $modes-color-status-neutral-inverse-hover-alt;
103
153
  $status-color-pill-neutral-inverse-bg-hover: $modes-color-status-neutral-inverse-hover;
154
+ $status-color-pill-readonly-label: $modes-color-generic-content-firm; // Pill (all types, readonly, when nested in disabled parent components)
104
155
  $status-color-pill-success-bg-alt-hover: $modes-color-status-positive-hover-alt;
105
156
  $status-color-pill-success-bg-hover: $modes-color-status-positive-hover;
106
157
  $status-color-pill-success-inverse-bg-alt-hover: $modes-color-status-positive-inverse-hover-alt;
@@ -109,15 +160,14 @@ $status-color-pill-warning-bg-alt-hover: $modes-color-status-caution-hover-alt;
109
160
  $status-color-pill-warning-bg-hover: $modes-color-status-caution-hover;
110
161
  $status-color-pill-warning-inverse-bg-alt-hover: $modes-color-status-caution-inverse-hover-alt;
111
162
  $status-color-pill-warning-inverse-bg-hover: $modes-color-status-caution-inverse-hover;
112
- $status-color-pill-readonly-label: $modes-color-generic-content-firm; // Pill (all types, readonly, when nested in disabled parent components)
113
163
  $status-color-rating-bg-default: $modes-color-status-reviews-default;
114
164
  $status-color-rating-bg-default-alt: $modes-color-status-reviews-default-alt;
115
165
  $status-color-rating-bg-hover: $modes-color-status-reviews-hover;
116
166
  $status-color-rating-border-default: $modes-color-status-reviews-default;
167
+ $status-color-message-contextual-callout-icon: $modes-color-status-content-with-default-alt;
117
168
  $status-color-message-global-label-default: $modes-color-status-content-with-default-alt;
118
169
  $status-color-message-global-callout-bg-hover: $modes-color-status-callout-hover-alt; // global message bg hover
119
170
  $status-color-message-global-callout-icon: $modes-color-status-content-with-default-alt; // Icon on tinted bgs
120
- $status-color-message-contextual-callout-icon: $modes-color-status-content-with-default-alt;
121
171
  $status-color-pill-generic-label-default: $modes-color-status-content-with-default;
122
172
  $status-color-pill-generic-label-hover: $modes-color-status-content-with-hover;
123
173
  $status-color-pill-generic-label-alt-default: $modes-color-status-content-with-default-alt;
package/scss/product/small/components/table.scss CHANGED
@@ -80,7 +80,7 @@ $table-size-row-standard-m: $global-size-macro-m;
80
80
  $table-size-row-standard-l: $global-size-macro-l;
81
81
  $table-size-row-standard-xl: $global-size-macro-xl + $global-size-micro-m;
82
82
  $table-size-icon-xs: $global-size-icon-s;
83
- $table-size-icon-s: $global-size-icon-s;
83
+ $table-size-icon-s: $global-size-icon-m;
84
84
  $table-size-icon-m: $global-size-icon-m;
85
85
  $table-size-icon-l: $global-size-icon-l;
86
86
  $table-size-icon-xl: $global-size-icon-xl;