@sage/design-tokens 9.2.0 → 10.0.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 (343) hide show
  1. package/css/frozenproduct/all.css +11 -25
  2. package/css/frozenproduct/large/components/container.css +18 -25
  3. package/css/frozenproduct/large/components/form.css +0 -9
  4. package/css/frozenproduct/large/dark.css +1 -0
  5. package/css/frozenproduct/large/light.css +1 -0
  6. package/css/frozenproduct/small/components/container.css +9 -16
  7. package/css/frozenproduct/small/components/form.css +0 -9
  8. package/css/frozenproduct/small/dark.css +1 -0
  9. package/css/frozenproduct/small/light.css +1 -0
  10. package/css/marketing/all.css +11 -25
  11. package/css/marketing/large/components/container.css +9 -16
  12. package/css/marketing/large/components/form.css +0 -9
  13. package/css/marketing/large/dark.css +1 -0
  14. package/css/marketing/large/light.css +1 -0
  15. package/css/marketing/small/components/container.css +9 -16
  16. package/css/marketing/small/components/form.css +0 -9
  17. package/css/marketing/small/dark.css +1 -0
  18. package/css/marketing/small/light.css +1 -0
  19. package/css/product/all.css +11 -25
  20. package/css/product/large/components/container.css +18 -25
  21. package/css/product/large/components/form.css +7 -16
  22. package/css/product/large/components/link.css +2 -2
  23. package/css/product/large/dark.css +1 -0
  24. package/css/product/large/light.css +1 -0
  25. package/css/product/small/components/container.css +9 -16
  26. package/css/product/small/components/form.css +0 -9
  27. package/css/product/small/dark.css +1 -0
  28. package/css/product/small/light.css +1 -0
  29. package/ios/frozenproduct/large/dark/components/container.h +9 -16
  30. package/ios/frozenproduct/large/dark/components/form.h +0 -9
  31. package/ios/frozenproduct/large/dark/mode.h +1 -0
  32. package/ios/frozenproduct/large/light/components/container.h +9 -16
  33. package/ios/frozenproduct/large/light/components/form.h +0 -9
  34. package/ios/frozenproduct/large/light/mode.h +1 -0
  35. package/ios/frozenproduct/small/dark/components/container.h +9 -16
  36. package/ios/frozenproduct/small/dark/components/form.h +0 -9
  37. package/ios/frozenproduct/small/dark/mode.h +1 -0
  38. package/ios/frozenproduct/small/light/components/container.h +9 -16
  39. package/ios/frozenproduct/small/light/components/form.h +0 -9
  40. package/ios/frozenproduct/small/light/mode.h +1 -0
  41. package/ios/marketing/large/dark/components/container.h +9 -16
  42. package/ios/marketing/large/dark/components/form.h +0 -9
  43. package/ios/marketing/large/dark/mode.h +1 -0
  44. package/ios/marketing/large/light/components/container.h +9 -16
  45. package/ios/marketing/large/light/components/form.h +0 -9
  46. package/ios/marketing/large/light/mode.h +1 -0
  47. package/ios/marketing/small/dark/components/container.h +9 -16
  48. package/ios/marketing/small/dark/components/form.h +0 -9
  49. package/ios/marketing/small/dark/mode.h +1 -0
  50. package/ios/marketing/small/light/components/container.h +9 -16
  51. package/ios/marketing/small/light/components/form.h +0 -9
  52. package/ios/marketing/small/light/mode.h +1 -0
  53. package/ios/product/large/dark/components/container.h +9 -16
  54. package/ios/product/large/dark/components/form.h +0 -9
  55. package/ios/product/large/dark/mode.h +1 -0
  56. package/ios/product/large/light/components/container.h +9 -16
  57. package/ios/product/large/light/components/form.h +0 -9
  58. package/ios/product/large/light/mode.h +1 -0
  59. package/ios/product/small/dark/components/container.h +9 -16
  60. package/ios/product/small/dark/components/form.h +0 -9
  61. package/ios/product/small/dark/mode.h +1 -0
  62. package/ios/product/small/light/components/container.h +9 -16
  63. package/ios/product/small/light/components/form.h +0 -9
  64. package/ios/product/small/light/mode.h +1 -0
  65. package/js/common/frozenproduct/large/dark/components/container.d.ts +13 -38
  66. package/js/common/frozenproduct/large/dark/components/container.js +158 -252
  67. package/js/common/frozenproduct/large/dark/components/form.d.ts +0 -9
  68. package/js/common/frozenproduct/large/dark/components/form.js +0 -153
  69. package/js/common/frozenproduct/large/dark/mode.d.ts +3 -0
  70. package/js/common/frozenproduct/large/dark/mode.js +19 -0
  71. package/js/common/frozenproduct/large/light/components/container.d.ts +13 -38
  72. package/js/common/frozenproduct/large/light/components/container.js +158 -252
  73. package/js/common/frozenproduct/large/light/components/form.d.ts +0 -9
  74. package/js/common/frozenproduct/large/light/components/form.js +0 -153
  75. package/js/common/frozenproduct/large/light/mode.d.ts +3 -0
  76. package/js/common/frozenproduct/large/light/mode.js +19 -0
  77. package/js/common/frozenproduct/small/dark/components/container.d.ts +13 -38
  78. package/js/common/frozenproduct/small/dark/components/container.js +158 -252
  79. package/js/common/frozenproduct/small/dark/components/form.d.ts +0 -9
  80. package/js/common/frozenproduct/small/dark/components/form.js +0 -153
  81. package/js/common/frozenproduct/small/dark/mode.d.ts +3 -0
  82. package/js/common/frozenproduct/small/dark/mode.js +19 -0
  83. package/js/common/frozenproduct/small/light/components/container.d.ts +13 -38
  84. package/js/common/frozenproduct/small/light/components/container.js +158 -252
  85. package/js/common/frozenproduct/small/light/components/form.d.ts +0 -9
  86. package/js/common/frozenproduct/small/light/components/form.js +0 -153
  87. package/js/common/frozenproduct/small/light/mode.d.ts +3 -0
  88. package/js/common/frozenproduct/small/light/mode.js +19 -0
  89. package/js/common/marketing/large/dark/components/container.d.ts +13 -38
  90. package/js/common/marketing/large/dark/components/container.js +158 -252
  91. package/js/common/marketing/large/dark/components/form.d.ts +0 -9
  92. package/js/common/marketing/large/dark/components/form.js +0 -153
  93. package/js/common/marketing/large/dark/mode.d.ts +3 -0
  94. package/js/common/marketing/large/dark/mode.js +19 -0
  95. package/js/common/marketing/large/light/components/container.d.ts +13 -38
  96. package/js/common/marketing/large/light/components/container.js +158 -252
  97. package/js/common/marketing/large/light/components/form.d.ts +0 -9
  98. package/js/common/marketing/large/light/components/form.js +0 -153
  99. package/js/common/marketing/large/light/mode.d.ts +3 -0
  100. package/js/common/marketing/large/light/mode.js +19 -0
  101. package/js/common/marketing/small/dark/components/container.d.ts +13 -38
  102. package/js/common/marketing/small/dark/components/container.js +158 -252
  103. package/js/common/marketing/small/dark/components/form.d.ts +0 -9
  104. package/js/common/marketing/small/dark/components/form.js +0 -153
  105. package/js/common/marketing/small/dark/mode.d.ts +3 -0
  106. package/js/common/marketing/small/dark/mode.js +19 -0
  107. package/js/common/marketing/small/light/components/container.d.ts +13 -38
  108. package/js/common/marketing/small/light/components/container.js +158 -252
  109. package/js/common/marketing/small/light/components/form.d.ts +0 -9
  110. package/js/common/marketing/small/light/components/form.js +0 -153
  111. package/js/common/marketing/small/light/mode.d.ts +3 -0
  112. package/js/common/marketing/small/light/mode.js +19 -0
  113. package/js/common/product/large/dark/components/container.d.ts +13 -38
  114. package/js/common/product/large/dark/components/container.js +158 -252
  115. package/js/common/product/large/dark/components/form.d.ts +0 -9
  116. package/js/common/product/large/dark/components/form.js +0 -153
  117. package/js/common/product/large/dark/mode.d.ts +3 -0
  118. package/js/common/product/large/dark/mode.js +19 -0
  119. package/js/common/product/large/light/components/container.d.ts +13 -38
  120. package/js/common/product/large/light/components/container.js +158 -252
  121. package/js/common/product/large/light/components/form.d.ts +0 -9
  122. package/js/common/product/large/light/components/form.js +0 -153
  123. package/js/common/product/large/light/mode.d.ts +3 -0
  124. package/js/common/product/large/light/mode.js +19 -0
  125. package/js/common/product/small/dark/components/container.d.ts +13 -38
  126. package/js/common/product/small/dark/components/container.js +158 -252
  127. package/js/common/product/small/dark/components/form.d.ts +0 -9
  128. package/js/common/product/small/dark/components/form.js +0 -153
  129. package/js/common/product/small/dark/mode.d.ts +3 -0
  130. package/js/common/product/small/dark/mode.js +19 -0
  131. package/js/common/product/small/light/components/container.d.ts +13 -38
  132. package/js/common/product/small/light/components/container.js +158 -252
  133. package/js/common/product/small/light/components/form.d.ts +0 -9
  134. package/js/common/product/small/light/components/form.js +0 -153
  135. package/js/common/product/small/light/mode.d.ts +3 -0
  136. package/js/common/product/small/light/mode.js +19 -0
  137. package/js/es6/frozenproduct/large/dark/components/container.d.ts +9 -16
  138. package/js/es6/frozenproduct/large/dark/components/container.js +10 -16
  139. package/js/es6/frozenproduct/large/dark/components/form.d.ts +0 -9
  140. package/js/es6/frozenproduct/large/dark/components/form.js +0 -9
  141. package/js/es6/frozenproduct/large/dark/mode.d.ts +1 -0
  142. package/js/es6/frozenproduct/large/dark/mode.js +1 -0
  143. package/js/es6/frozenproduct/large/light/components/container.d.ts +9 -16
  144. package/js/es6/frozenproduct/large/light/components/container.js +10 -16
  145. package/js/es6/frozenproduct/large/light/components/form.d.ts +0 -9
  146. package/js/es6/frozenproduct/large/light/components/form.js +0 -9
  147. package/js/es6/frozenproduct/large/light/mode.d.ts +1 -0
  148. package/js/es6/frozenproduct/large/light/mode.js +1 -0
  149. package/js/es6/frozenproduct/small/dark/components/container.d.ts +9 -16
  150. package/js/es6/frozenproduct/small/dark/components/container.js +10 -16
  151. package/js/es6/frozenproduct/small/dark/components/form.d.ts +0 -9
  152. package/js/es6/frozenproduct/small/dark/components/form.js +0 -9
  153. package/js/es6/frozenproduct/small/dark/mode.d.ts +1 -0
  154. package/js/es6/frozenproduct/small/dark/mode.js +1 -0
  155. package/js/es6/frozenproduct/small/light/components/container.d.ts +9 -16
  156. package/js/es6/frozenproduct/small/light/components/container.js +10 -16
  157. package/js/es6/frozenproduct/small/light/components/form.d.ts +0 -9
  158. package/js/es6/frozenproduct/small/light/components/form.js +0 -9
  159. package/js/es6/frozenproduct/small/light/mode.d.ts +1 -0
  160. package/js/es6/frozenproduct/small/light/mode.js +1 -0
  161. package/js/es6/marketing/large/dark/components/container.d.ts +9 -16
  162. package/js/es6/marketing/large/dark/components/container.js +10 -16
  163. package/js/es6/marketing/large/dark/components/form.d.ts +0 -9
  164. package/js/es6/marketing/large/dark/components/form.js +0 -9
  165. package/js/es6/marketing/large/dark/mode.d.ts +1 -0
  166. package/js/es6/marketing/large/dark/mode.js +1 -0
  167. package/js/es6/marketing/large/light/components/container.d.ts +9 -16
  168. package/js/es6/marketing/large/light/components/container.js +10 -16
  169. package/js/es6/marketing/large/light/components/form.d.ts +0 -9
  170. package/js/es6/marketing/large/light/components/form.js +0 -9
  171. package/js/es6/marketing/large/light/mode.d.ts +1 -0
  172. package/js/es6/marketing/large/light/mode.js +1 -0
  173. package/js/es6/marketing/small/dark/components/container.d.ts +9 -16
  174. package/js/es6/marketing/small/dark/components/container.js +10 -16
  175. package/js/es6/marketing/small/dark/components/form.d.ts +0 -9
  176. package/js/es6/marketing/small/dark/components/form.js +0 -9
  177. package/js/es6/marketing/small/dark/mode.d.ts +1 -0
  178. package/js/es6/marketing/small/dark/mode.js +1 -0
  179. package/js/es6/marketing/small/light/components/container.d.ts +9 -16
  180. package/js/es6/marketing/small/light/components/container.js +10 -16
  181. package/js/es6/marketing/small/light/components/form.d.ts +0 -9
  182. package/js/es6/marketing/small/light/components/form.js +0 -9
  183. package/js/es6/marketing/small/light/mode.d.ts +1 -0
  184. package/js/es6/marketing/small/light/mode.js +1 -0
  185. package/js/es6/product/large/dark/components/container.d.ts +9 -16
  186. package/js/es6/product/large/dark/components/container.js +10 -16
  187. package/js/es6/product/large/dark/components/form.d.ts +0 -9
  188. package/js/es6/product/large/dark/components/form.js +0 -9
  189. package/js/es6/product/large/dark/mode.d.ts +1 -0
  190. package/js/es6/product/large/dark/mode.js +1 -0
  191. package/js/es6/product/large/light/components/container.d.ts +9 -16
  192. package/js/es6/product/large/light/components/container.js +10 -16
  193. package/js/es6/product/large/light/components/form.d.ts +0 -9
  194. package/js/es6/product/large/light/components/form.js +0 -9
  195. package/js/es6/product/large/light/mode.d.ts +1 -0
  196. package/js/es6/product/large/light/mode.js +1 -0
  197. package/js/es6/product/small/dark/components/container.d.ts +9 -16
  198. package/js/es6/product/small/dark/components/container.js +10 -16
  199. package/js/es6/product/small/dark/components/form.d.ts +0 -9
  200. package/js/es6/product/small/dark/components/form.js +0 -9
  201. package/js/es6/product/small/dark/mode.d.ts +1 -0
  202. package/js/es6/product/small/dark/mode.js +1 -0
  203. package/js/es6/product/small/light/components/container.d.ts +9 -16
  204. package/js/es6/product/small/light/components/container.js +10 -16
  205. package/js/es6/product/small/light/components/form.d.ts +0 -9
  206. package/js/es6/product/small/light/components/form.js +0 -9
  207. package/js/es6/product/small/light/mode.d.ts +1 -0
  208. package/js/es6/product/small/light/mode.js +1 -0
  209. package/js/umd/frozenproduct/large/dark/components/container.js +164 -252
  210. package/js/umd/frozenproduct/large/dark/components/form.js +0 -153
  211. package/js/umd/frozenproduct/large/dark/mode.js +19 -0
  212. package/js/umd/frozenproduct/large/light/components/container.js +164 -252
  213. package/js/umd/frozenproduct/large/light/components/form.js +0 -153
  214. package/js/umd/frozenproduct/large/light/mode.js +19 -0
  215. package/js/umd/frozenproduct/small/dark/components/container.js +164 -252
  216. package/js/umd/frozenproduct/small/dark/components/form.js +0 -153
  217. package/js/umd/frozenproduct/small/dark/mode.js +19 -0
  218. package/js/umd/frozenproduct/small/light/components/container.js +164 -252
  219. package/js/umd/frozenproduct/small/light/components/form.js +0 -153
  220. package/js/umd/frozenproduct/small/light/mode.js +19 -0
  221. package/js/umd/marketing/large/dark/components/container.js +164 -252
  222. package/js/umd/marketing/large/dark/components/form.js +0 -153
  223. package/js/umd/marketing/large/dark/mode.js +19 -0
  224. package/js/umd/marketing/large/light/components/container.js +164 -252
  225. package/js/umd/marketing/large/light/components/form.js +0 -153
  226. package/js/umd/marketing/large/light/mode.js +19 -0
  227. package/js/umd/marketing/small/dark/components/container.js +164 -252
  228. package/js/umd/marketing/small/dark/components/form.js +0 -153
  229. package/js/umd/marketing/small/dark/mode.js +19 -0
  230. package/js/umd/marketing/small/light/components/container.js +164 -252
  231. package/js/umd/marketing/small/light/components/form.js +0 -153
  232. package/js/umd/marketing/small/light/mode.js +19 -0
  233. package/js/umd/product/large/dark/components/container.js +164 -252
  234. package/js/umd/product/large/dark/components/form.js +0 -153
  235. package/js/umd/product/large/dark/mode.js +19 -0
  236. package/js/umd/product/large/light/components/container.js +164 -252
  237. package/js/umd/product/large/light/components/form.js +0 -153
  238. package/js/umd/product/large/light/mode.js +19 -0
  239. package/js/umd/product/small/dark/components/container.js +164 -252
  240. package/js/umd/product/small/dark/components/form.js +0 -153
  241. package/js/umd/product/small/dark/mode.js +19 -0
  242. package/js/umd/product/small/light/components/container.js +164 -252
  243. package/js/umd/product/small/light/components/form.js +0 -153
  244. package/js/umd/product/small/light/mode.js +19 -0
  245. package/json/flat/frozenproduct/large/dark/components/container.json +9 -16
  246. package/json/flat/frozenproduct/large/dark/components/form.json +0 -9
  247. package/json/flat/frozenproduct/large/dark/mode.json +1 -0
  248. package/json/flat/frozenproduct/large/light/components/container.json +9 -16
  249. package/json/flat/frozenproduct/large/light/components/form.json +0 -9
  250. package/json/flat/frozenproduct/large/light/mode.json +1 -0
  251. package/json/flat/frozenproduct/small/dark/components/container.json +9 -16
  252. package/json/flat/frozenproduct/small/dark/components/form.json +0 -9
  253. package/json/flat/frozenproduct/small/dark/mode.json +1 -0
  254. package/json/flat/frozenproduct/small/light/components/container.json +9 -16
  255. package/json/flat/frozenproduct/small/light/components/form.json +0 -9
  256. package/json/flat/frozenproduct/small/light/mode.json +1 -0
  257. package/json/flat/marketing/large/dark/components/container.json +9 -16
  258. package/json/flat/marketing/large/dark/components/form.json +0 -9
  259. package/json/flat/marketing/large/dark/mode.json +1 -0
  260. package/json/flat/marketing/large/light/components/container.json +9 -16
  261. package/json/flat/marketing/large/light/components/form.json +0 -9
  262. package/json/flat/marketing/large/light/mode.json +1 -0
  263. package/json/flat/marketing/small/dark/components/container.json +9 -16
  264. package/json/flat/marketing/small/dark/components/form.json +0 -9
  265. package/json/flat/marketing/small/dark/mode.json +1 -0
  266. package/json/flat/marketing/small/light/components/container.json +9 -16
  267. package/json/flat/marketing/small/light/components/form.json +0 -9
  268. package/json/flat/marketing/small/light/mode.json +1 -0
  269. package/json/flat/product/large/dark/components/container.json +9 -16
  270. package/json/flat/product/large/dark/components/form.json +0 -9
  271. package/json/flat/product/large/dark/mode.json +1 -0
  272. package/json/flat/product/large/light/components/container.json +9 -16
  273. package/json/flat/product/large/light/components/form.json +0 -9
  274. package/json/flat/product/large/light/mode.json +1 -0
  275. package/json/flat/product/small/dark/components/container.json +9 -16
  276. package/json/flat/product/small/dark/components/form.json +0 -9
  277. package/json/flat/product/small/dark/mode.json +1 -0
  278. package/json/flat/product/small/light/components/container.json +9 -16
  279. package/json/flat/product/small/light/components/form.json +0 -9
  280. package/json/flat/product/small/light/mode.json +1 -0
  281. package/json/nested/frozenproduct/large/dark/components/container.json +15 -40
  282. package/json/nested/frozenproduct/large/dark/components/form.json +9 -18
  283. package/json/nested/frozenproduct/large/dark/mode.json +3 -0
  284. package/json/nested/frozenproduct/large/light/components/container.json +15 -40
  285. package/json/nested/frozenproduct/large/light/components/form.json +9 -18
  286. package/json/nested/frozenproduct/large/light/mode.json +3 -0
  287. package/json/nested/frozenproduct/small/dark/components/container.json +15 -40
  288. package/json/nested/frozenproduct/small/dark/components/form.json +9 -18
  289. package/json/nested/frozenproduct/small/dark/mode.json +3 -0
  290. package/json/nested/frozenproduct/small/light/components/container.json +15 -40
  291. package/json/nested/frozenproduct/small/light/components/form.json +9 -18
  292. package/json/nested/frozenproduct/small/light/mode.json +3 -0
  293. package/json/nested/marketing/large/dark/components/container.json +15 -40
  294. package/json/nested/marketing/large/dark/components/form.json +9 -18
  295. package/json/nested/marketing/large/dark/mode.json +3 -0
  296. package/json/nested/marketing/large/light/components/container.json +15 -40
  297. package/json/nested/marketing/large/light/components/form.json +9 -18
  298. package/json/nested/marketing/large/light/mode.json +3 -0
  299. package/json/nested/marketing/small/dark/components/container.json +15 -40
  300. package/json/nested/marketing/small/dark/components/form.json +9 -18
  301. package/json/nested/marketing/small/dark/mode.json +3 -0
  302. package/json/nested/marketing/small/light/components/container.json +15 -40
  303. package/json/nested/marketing/small/light/components/form.json +9 -18
  304. package/json/nested/marketing/small/light/mode.json +3 -0
  305. package/json/nested/product/large/dark/components/container.json +15 -40
  306. package/json/nested/product/large/dark/components/form.json +9 -18
  307. package/json/nested/product/large/dark/mode.json +3 -0
  308. package/json/nested/product/large/light/components/container.json +15 -40
  309. package/json/nested/product/large/light/components/form.json +9 -18
  310. package/json/nested/product/large/light/mode.json +3 -0
  311. package/json/nested/product/small/dark/components/container.json +15 -40
  312. package/json/nested/product/small/dark/components/form.json +9 -18
  313. package/json/nested/product/small/dark/mode.json +3 -0
  314. package/json/nested/product/small/light/components/container.json +15 -40
  315. package/json/nested/product/small/light/components/form.json +9 -18
  316. package/json/nested/product/small/light/mode.json +3 -0
  317. package/package.json +1 -1
  318. package/sage-design-tokens-10.0.0.tgz +0 -0
  319. package/scss/frozenproduct/large/components/container.scss +9 -16
  320. package/scss/frozenproduct/large/components/form.scss +0 -9
  321. package/scss/frozenproduct/large/dark.scss +1 -0
  322. package/scss/frozenproduct/large/light.scss +1 -0
  323. package/scss/frozenproduct/small/components/container.scss +9 -16
  324. package/scss/frozenproduct/small/components/form.scss +0 -9
  325. package/scss/frozenproduct/small/dark.scss +1 -0
  326. package/scss/frozenproduct/small/light.scss +1 -0
  327. package/scss/marketing/large/components/container.scss +9 -16
  328. package/scss/marketing/large/components/form.scss +0 -9
  329. package/scss/marketing/large/dark.scss +1 -0
  330. package/scss/marketing/large/light.scss +1 -0
  331. package/scss/marketing/small/components/container.scss +9 -16
  332. package/scss/marketing/small/components/form.scss +0 -9
  333. package/scss/marketing/small/dark.scss +1 -0
  334. package/scss/marketing/small/light.scss +1 -0
  335. package/scss/product/large/components/container.scss +9 -16
  336. package/scss/product/large/components/form.scss +0 -9
  337. package/scss/product/large/dark.scss +1 -0
  338. package/scss/product/large/light.scss +1 -0
  339. package/scss/product/small/components/container.scss +9 -16
  340. package/scss/product/small/components/form.scss +0 -9
  341. package/scss/product/small/dark.scss +1 -0
  342. package/scss/product/small/light.scss +1 -0
  343. package/sage-design-tokens-9.2.0.tgz +0 -0
package/css/frozenproduct/all.css CHANGED
@@ -303,6 +303,7 @@
303
303
  --modes-color-status-info-hover-alt-light: #cbd6e9; /* used on pill hover states and message bg */
304
304
  --modes-color-status-info-frozenglobal-default-light: #65a9ff; /* used on global message bg */
305
305
  --modes-color-status-info-frozenglobal-hover-light: #84b6ff; /* used on global message bg */
306
+ --modes-color-status-important-default-light: #8F4CD7; /* For tile status keylines to show if something is of high importance. */
306
307
  --modes-color-status-negative-default-light: #CD384B; /* For pills and messages. Not accessible with white TEXT. */
307
308
  --modes-color-status-negative-default-alt-light: #fdeceb; /* Subtle message bg */
308
309
  --modes-color-status-negative-hover-light: #aa323f; /* used on pill hover states */
@@ -504,6 +505,7 @@
504
505
  --modes-color-status-negative-hover-dark: #eb646c; /* used on pill hover states */
505
506
  --modes-color-status-negative-hover-alt-dark: #3f1a1c; /* used on pill hover states and message bg */
506
507
  --modes-color-status-negative-text-dark: #E13E53;
508
+ --modes-color-status-important-default-dark: #985FDC; /* For tile status keylines to show if something is of high importance. */
507
509
  --modes-color-status-neutral-default-dark: #7C7C7C;
508
510
  --modes-color-status-neutral-default-alt-dark: #171717; /* Subtle message bg */
509
511
  --modes-color-status-neutral-hover-dark: #909090; /* used on pill hover states */
@@ -837,6 +839,12 @@
837
839
  --container-color-interactive-bg-enabled: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
838
840
  --container-color-interactive-detailedicon-bg: light-dark(var(--modes-color-custom-default-light), var(--modes-color-custom-default-dark)); /* */
839
841
  --container-color-standard-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
842
+ --container-color-standard-statusborder-bg-caution: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
843
+ --container-color-standard-statusborder-bg-negative: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
844
+ --container-color-standard-statusborder-bg-important: light-dark(var(--modes-color-status-important-default-light), var(--modes-color-status-important-default-dark));
845
+ --container-color-standard-statusborder-bg-info: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
846
+ --container-color-standard-statusborder-bg-neutral: light-dark(var(--modes-color-status-neutral-default-light), var(--modes-color-status-neutral-default-dark));
847
+ --container-color-standard-statusborder-bg-positive: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
840
848
  --container-typography-heading-m: var(--global-typography-heading-s); /* Accordion, Subscription tile, Tile select and generic tile or card headings */
841
849
  --container-typography-heading-l: var(--global-typography-heading-m); /* Dialog, drawer and sidebar headings */
842
850
  --container-typography-subheading-m: var(--global-typography-subheading-m); /* Accordion subheading, Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading */
@@ -862,6 +870,7 @@
862
870
  --container-color-standard-dimmer: light-dark(var(--modes-color-interactive-inactive-mask-light), var(--modes-color-interactive-inactive-mask-dark)); /* dimmed mask for dialogs */
863
871
  --container-color-standard-text-alt: light-dark(var(--modes-color-generic-content-moderate-light), var(--modes-color-generic-content-moderate-dark)); /* for subheadings etc */
864
872
  --container-color-standard-text-default: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark)); /* for headings, paragraph text etc */
873
+ --container-color-standard-statusborder-bg-ai: var(--container-color-ai-bordervertical);
865
874
  --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
866
875
  --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
867
876
  --container-boxshadow-card-drag: var(--global-boxshadow-interactive-drag); /* Card (drag state) */
@@ -925,6 +934,7 @@
925
934
  --container-size-scrollbar-container: var(--global-size-micro-xl); /* Container that the scrollbar sits within */
926
935
  --container-size-sidebar-responsive-min: var(--global-size-flex-xl); /* min-width for sidebar */
927
936
  --container-size-sidebar-responsive-max: var(--global-size-flex-xxxxl); /* max-width for sidebar */
937
+ --container-size-tile-statusborder: var(--global-size-micro-m); /* width of left status borders on tiles. */
928
938
  --container-size-tileselect-footer: var(--global-size-macro-l); /* Product identifier */
929
939
  --container-size-tileselect-productidentifier-m: var(--global-size-macro-s); /* Product identifier */
930
940
  --container-size-tileselect-productidentifier-l: var(--global-size-macro-l); /* Product identifier */
@@ -935,7 +945,6 @@
935
945
  --container-radius-card-curved: var(--global-radius-container-xl); /* Card (more rounded) */
936
946
  --container-radius-card-sweeping: var(--global-radius-container-xxl); /* Card largest rounded type */
937
947
  --container-radius-carouselslide: var(--global-radius-container-l); /* Carousel slides */
938
- --container-radius-chatbubble: var(--global-radius-container-l);
939
948
  --container-radius-colorpicker: var(--global-radius-container-l); /* Color picker container radius */
940
949
  --container-radius-contacttile: var(--global-radius-container-m);
941
950
  --container-radius-dialog: var(--global-radius-container-xl); /* Dialog */
@@ -953,18 +962,6 @@
953
962
  --container-radius-nudge: var(--global-radius-container-l); /* nudge radius */
954
963
  --container-space-none: var(--global-space-none);
955
964
  --container-space-accordionsubtle-yg-m: var(--global-space-macro-xs); /* Gap between Accordion subtle trigger and content */
956
- --container-space-chatbubble-outer-x-m: var(--global-space-macro-m); /* Left margin on AI response bubbles and right margin on user prompt bubbles. */
957
- --container-space-chatbubble-outer-x-l: calc(var(--global-space-macro-xl) * 2); /* Right margin on AI response bubbles and left margin on user prompt bubbles. */
958
- --container-space-chatbubble-outer-y-m: var(--global-space-micro-l); /* Top and bottom margin on all chat bubbles. */
959
- --container-space-chatbubble-outer-yg-m: var(--global-space-micro-s); /* Gap between timestamp and chat bubble container. Also gap between give feedback button and container. */
960
- --container-space-chatbubble-inner-x-m: var(--global-space-macro-xs); /* Left and right padding inside chat bubbles. */
961
- --container-space-chatbubble-inner-xg-s: var(--global-space-micro-l);
962
- --container-space-chatbubble-inner-xg-m: var(--global-space-macro-xs);
963
- --container-space-chatbubble-inner-y-m: var(--global-space-macro-xs); /* Top and bottom padding inside chat bubbles. */
964
- --container-space-chatbubble-inner-yg-xs: var(--global-space-micro-s);
965
- --container-space-chatbubble-inner-yg-s: var(--global-space-micro-l);
966
- --container-space-chatbubble-inner-yg-m: var(--global-space-macro-xs);
967
- --container-space-chatbubble-inner-yg-l: var(--global-space-macro-m); /* Vertical gap between inner blocks within a chat or insight bubble. */
968
965
  --container-space-filepreview-preview-x-m: var(--global-space-micro-l); /* Horizontal padding on large thumbnail image */
969
966
  --container-space-filepreview-preview-y-m: var(--global-space-micro-l); /* Vertical padding on large thumbnail image. */
970
967
  --container-space-flex-xg-s: var(--global-space-macro-xs); /* Small horizontal item spacing */
@@ -1042,6 +1039,7 @@
1042
1039
  --container-space-tilecard-x-s: var(--global-space-macro-xs); /* Right left padding on Tile or Card. */
1043
1040
  --container-space-tilecard-x-m: var(--global-space-macro-m); /* Right left padding on drag wrapper */
1044
1041
  --container-space-tilecard-x-l: var(--global-space-macro-l); /* Right left padding on Tile or Card. */
1042
+ --container-space-tilecard-x-xxxl: calc(var(--global-space-macro-xl) * 2); /* Right margin on AI response bubbles and left margin on user prompt bubbles. */
1045
1043
  --container-space-tilecard-xg-m: var(--global-space-micro-l); /* horizontal gap between icons and text */
1046
1044
  --container-space-tilecard-y-xs: var(--global-space-micro-l); /* Top bottom padding on Link preview and on card drag wrapper */
1047
1045
  --container-space-tilecard-y-s: var(--global-space-macro-xs); /* Top bottom padding on Tile or Card. */
@@ -1084,9 +1082,6 @@
1084
1082
  --container-borderwidth-tile: var(--global-borderwidth-xs); /* Tile */
1085
1083
  --container-borderwidth-accordion-standard: var(--global-borderwidth-xs); /* Accordion standard (top and bottom borders) */
1086
1084
  --container-borderwidth-accordion-subtle: var(--global-borderwidth-s); /* Accordion subtle (content vertical line) */
1087
- --container-borderwidth-chatbubble-default: var(--global-borderwidth-xs);
1088
- --container-borderwidth-chatbubble-error: var(--global-borderwidth-s);
1089
- --container-borderwidth-chatbubble-success: var(--global-borderwidth-s);
1090
1085
  --container-borderwidth-filepreview-container: var(--global-borderwidth-xs); /* File preview (internal borders) */
1091
1086
  --container-borderwidth-filepreview-enabled: var(--global-borderwidth-xs); /* File preview (file selector) */
1092
1087
  --container-borderwidth-filepreview-active: var(--global-borderwidth-s); /* File preview (file selector) */
@@ -1122,47 +1117,38 @@
1122
1117
  --form-color-colorpicker-blue-bg-default: light-dark(var(--modes-color-colorcode-blue-muted-light), var(--modes-color-colorcode-blue-muted-dark));
1123
1118
  --form-color-colorpicker-blue-border: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
1124
1119
  --form-color-colorpicker-blue-pattern: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
1125
- --form-color-colorpicker-blue-label-default: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1126
1120
  --form-color-colorpicker-teal-bg-alt: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
1127
1121
  --form-color-colorpicker-teal-bg-default: light-dark(var(--modes-color-colorcode-teal-muted-light), var(--modes-color-colorcode-teal-muted-dark));
1128
1122
  --form-color-colorpicker-teal-border: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
1129
1123
  --form-color-colorpicker-teal-pattern: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
1130
- --form-color-colorpicker-teal-label-default: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1131
1124
  --form-color-colorpicker-green-bg-alt: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
1132
1125
  --form-color-colorpicker-green-bg-default: light-dark(var(--modes-color-colorcode-green-muted-light), var(--modes-color-colorcode-green-muted-dark));
1133
1126
  --form-color-colorpicker-green-border: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
1134
1127
  --form-color-colorpicker-green-pattern: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
1135
- --form-color-colorpicker-green-label-default: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1136
1128
  --form-color-colorpicker-lime-bg-alt: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
1137
1129
  --form-color-colorpicker-lime-bg-default: light-dark(var(--modes-color-colorcode-lime-muted-light), var(--modes-color-colorcode-lime-muted-dark));
1138
1130
  --form-color-colorpicker-lime-border: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
1139
1131
  --form-color-colorpicker-lime-pattern: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
1140
- --form-color-colorpicker-lime-label-default: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1141
1132
  --form-color-colorpicker-orange-bg-alt: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1142
1133
  --form-color-colorpicker-orange-bg-default: light-dark(var(--modes-color-colorcode-orange-muted-light), var(--modes-color-colorcode-orange-muted-dark));
1143
1134
  --form-color-colorpicker-orange-border: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1144
1135
  --form-color-colorpicker-orange-pattern: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1145
- --form-color-colorpicker-orange-label-default: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1146
1136
  --form-color-colorpicker-red-border: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1147
1137
  --form-color-colorpicker-red-bg-default: light-dark(var(--modes-color-colorcode-red-muted-light), var(--modes-color-colorcode-red-muted-dark));
1148
1138
  --form-color-colorpicker-red-bg-alt: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1149
1139
  --form-color-colorpicker-red-pattern: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1150
- --form-color-colorpicker-red-label-default: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1151
1140
  --form-color-colorpicker-pink-border: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1152
1141
  --form-color-colorpicker-pink-bg-default: light-dark(var(--modes-color-colorcode-pink-muted-light), var(--modes-color-colorcode-pink-muted-dark));
1153
1142
  --form-color-colorpicker-pink-bg-alt: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1154
1143
  --form-color-colorpicker-pink-pattern: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1155
- --form-color-colorpicker-pink-label-default: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1156
1144
  --form-color-colorpicker-purple-border: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1157
1145
  --form-color-colorpicker-purple-bg-default: light-dark(var(--modes-color-colorcode-purple-muted-light), var(--modes-color-colorcode-purple-muted-dark));
1158
1146
  --form-color-colorpicker-purple-bg-alt: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1159
1147
  --form-color-colorpicker-purple-pattern: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1160
- --form-color-colorpicker-purple-label-default: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1161
1148
  --form-color-colorpicker-gray-border: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1162
1149
  --form-color-colorpicker-gray-bg-default: light-dark(var(--modes-color-colorcode-gray-muted-light), var(--modes-color-colorcode-gray-muted-dark));
1163
1150
  --form-color-colorpicker-gray-bg-alt: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1164
1151
  --form-color-colorpicker-gray-pattern: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1165
- --form-color-colorpicker-gray-label-default: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1166
1152
  --form-color-colorpicker-slate-border: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1167
1153
  --form-color-colorpicker-slate-bg-default: light-dark(var(--modes-color-colorcode-slate-muted-light), var(--modes-color-colorcode-slate-muted-dark));
1168
1154
  --form-color-colorpicker-slate-bg-alt: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
package/css/frozenproduct/large/components/container.css CHANGED
@@ -45,16 +45,17 @@
45
45
  --container-color-calendar-gray-border-default: var(--modes-color-colorcode-gray-deep);
46
46
  --container-color-calendar-gray-pattern: var(--modes-color-colorcode-gray-deep);
47
47
  --container-color-interactive-bg-footer-activated: var(--modes-color-status-positive-default); /* */
48
- --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-generic-active);
49
48
  --container-color-interactive-border-activated: var(--modes-color-status-positive-default);
50
49
  --container-color-interactive-bg-footer-default: var(--modes-color-generic-bg-nought); /* tile footer bg color */
51
50
  --container-color-interactive-bg-enabled: var(--modes-color-generic-bg-nought);
52
- --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-generic-active);
53
- --container-color-interactive-icon-active: var(--modes-color-interactive-monochrome-generic-active); /* Active chevron for any accordion. */
54
- --container-color-interactive-text-active: var(--modes-color-interactive-monochrome-generic-active); /* Active label for any accordion. */
55
51
  --container-color-interactive-detailedicon-bg: var(--modes-color-custom-default); /* */
56
52
  --container-color-standard-bg-default: var(--modes-color-generic-bg-nought);
57
- --container-color-standard-border-active: var(--modes-color-interactive-monochrome-generic-active);
53
+ --container-color-standard-statusborder-bg-caution: var(--modes-color-status-caution-default);
54
+ --container-color-standard-statusborder-bg-negative: var(--modes-color-status-negative-default);
55
+ --container-color-standard-statusborder-bg-important: var(--modes-color-status-important-default);
56
+ --container-color-standard-statusborder-bg-info: var(--modes-color-status-info-default);
57
+ --container-color-standard-statusborder-bg-neutral: var(--modes-color-status-neutral-default);
58
+ --container-color-standard-statusborder-bg-positive: var(--modes-color-status-positive-default);
58
59
  --container-typography-adaptive-heading-m: var(--global-typography-adaptive-heading-s); /* Accordion, Subscription tile, Tile select and generic tile or card headings */
59
60
  --container-typography-adaptive-heading-l: var(--global-typography-adaptive-heading-m); /* Dialog, drawer and sidebar headings */
60
61
  --container-typography-adaptive-subheading-m: var(--global-typography-adaptive-subheading-m); /* Accordion subheading, Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading */
@@ -75,19 +76,21 @@
75
76
  --container-typography-responsive-paragraph-l: var(--global-typography-responsive-component-moderate-l);
76
77
  --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
77
78
  --container-color-calendar-label-alt: var(--modes-color-generic-content-nought); /* Accessible on calendar bg-alt colors. */
79
+ --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-generic-active);
78
80
  --container-color-interactive-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt); /* Used for accordion hover backgrounds */
79
- --container-color-interactive-icon-enabled: var(--modes-color-interactive-monochrome-generic-default); /* Enabled chevron for any accordion. */
80
- --container-color-interactive-icon-alt-enabled: var(--modes-color-interactive-monochrome-generic-default-alt); /* Enabled label for subtle accordion. */
81
- --container-color-interactive-icon-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover chevron for any accordion. */
81
+ --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-generic-active);
82
+ --container-color-interactive-icon-active: var(--modes-color-interactive-monochrome-generic-active); /* Active chevron for any accordion. */
83
+ --container-color-interactive-text-active: var(--modes-color-interactive-monochrome-generic-active); /* Active label for any accordion. */
82
84
  --container-color-interactive-text-enabled: var(--modes-color-generic-content-harsh); /* Enabled label for standard accordion. */
83
85
  --container-color-interactive-text-alt-enabled: var(--modes-color-generic-content-moderate); /* Enabled label for subtle accordion. */
84
- --container-color-interactive-text-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover label for any accordion. */
85
86
  --container-color-scrollbar-bg-default: var(--modes-color-generic-bg-faint);
86
87
  --container-color-standard-bg-alt: var(--modes-color-generic-bg-faint);
87
88
  --container-color-standard-bg-footer-default: var(--modes-color-generic-bg-faint); /* tile footer bg color */
89
+ --container-color-standard-border-active: var(--modes-color-interactive-monochrome-generic-active);
88
90
  --container-color-standard-dimmer: var(--modes-color-interactive-inactive-mask); /* dimmed mask for dialogs */
89
91
  --container-color-standard-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
90
92
  --container-color-standard-text-default: var(--modes-color-generic-content-harsh); /* for headings, paragraph text etc */
93
+ --container-color-standard-statusborder-bg-ai: var(--container-color-ai-bordervertical);
91
94
  --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
92
95
  --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
93
96
  --container-boxshadow-card-drag: var(--global-boxshadow-interactive-drag); /* Card (drag state) */
@@ -102,9 +105,13 @@
102
105
  --container-color-interactive-border-alt: var(--modes-color-generic-fg-delicate); /* Link preview. */
103
106
  --container-color-interactive-border-inactive: var(--modes-color-generic-fg-soft);
104
107
  --container-color-interactive-border-enabled: var(--modes-color-generic-fg-moderate);
108
+ --container-color-interactive-icon-enabled: var(--modes-color-interactive-monochrome-generic-default); /* Enabled chevron for any accordion. */
109
+ --container-color-interactive-icon-alt-enabled: var(--modes-color-interactive-monochrome-generic-default-alt); /* Enabled label for subtle accordion. */
110
+ --container-color-interactive-icon-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover chevron for any accordion. */
105
111
  --container-color-interactive-label-footer-active: var(--modes-color-interactive-monochrome-generic-with-active);
106
112
  --container-color-interactive-label-footer-activated: var(--modes-color-interactive-monochrome-generic-with-active);
107
113
  --container-color-interactive-text-disabled: var(--modes-color-interactive-inactive-content);
114
+ --container-color-interactive-text-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover label for any accordion. */
108
115
  --container-color-scrollbar-fg-default: var(--modes-color-generic-fg-moderate);
109
116
  --container-color-standard-border-alt: var(--modes-color-generic-fg-soft);
110
117
  --container-color-standard-border-default: var(--modes-color-generic-fg-faint);
@@ -147,6 +154,7 @@
147
154
  --container-size-scrollbar-container: var(--global-size-micro-xl); /* Container that the scrollbar sits within */
148
155
  --container-size-sidebar-responsive-min: var(--global-size-flex-xl); /* min-width for sidebar */
149
156
  --container-size-sidebar-responsive-max: var(--global-size-flex-xxxxl); /* max-width for sidebar */
157
+ --container-size-tile-statusborder: var(--global-size-micro-m); /* width of left status borders on tiles. */
150
158
  --container-size-tileselect-footer: var(--global-size-macro-l); /* Product identifier */
151
159
  --container-size-tileselect-productidentifier-m: var(--global-size-macro-s); /* Product identifier */
152
160
  --container-size-tileselect-productidentifier-l: var(--global-size-macro-l); /* Product identifier */
@@ -157,7 +165,6 @@
157
165
  --container-radius-card-curved: var(--global-radius-container-xl); /* Card (more rounded) */
158
166
  --container-radius-card-sweeping: var(--global-radius-container-xxl); /* Card largest rounded type */
159
167
  --container-radius-carouselslide: var(--global-radius-container-l); /* Carousel slides */
160
- --container-radius-chatbubble: var(--global-radius-container-l);
161
168
  --container-radius-colorpicker: var(--global-radius-container-l); /* Color picker container radius */
162
169
  --container-radius-contacttile: var(--global-radius-container-m);
163
170
  --container-radius-dialog: var(--global-radius-container-xl); /* Dialog */
@@ -175,18 +182,6 @@
175
182
  --container-radius-nudge: var(--global-radius-container-l); /* nudge radius */
176
183
  --container-space-none: var(--global-space-none);
177
184
  --container-space-accordionsubtle-yg-m: var(--global-space-macro-xs); /* Gap between Accordion subtle trigger and content */
178
- --container-space-chatbubble-outer-x-m: var(--global-space-macro-m); /* Left margin on AI response bubbles and right margin on user prompt bubbles. */
179
- --container-space-chatbubble-outer-x-l: calc(var(--global-space-macro-xl) * 2); /* Right margin on AI response bubbles and left margin on user prompt bubbles. */
180
- --container-space-chatbubble-outer-y-m: var(--global-space-micro-l); /* Top and bottom margin on all chat bubbles. */
181
- --container-space-chatbubble-outer-yg-m: var(--global-space-micro-s); /* Gap between timestamp and chat bubble container. Also gap between give feedback button and container. */
182
- --container-space-chatbubble-inner-x-m: var(--global-space-macro-xs); /* Left and right padding inside chat bubbles. */
183
- --container-space-chatbubble-inner-xg-s: var(--global-space-micro-l);
184
- --container-space-chatbubble-inner-xg-m: var(--global-space-macro-xs);
185
- --container-space-chatbubble-inner-y-m: var(--global-space-macro-xs); /* Top and bottom padding inside chat bubbles. */
186
- --container-space-chatbubble-inner-yg-xs: var(--global-space-micro-s);
187
- --container-space-chatbubble-inner-yg-s: var(--global-space-micro-l);
188
- --container-space-chatbubble-inner-yg-m: var(--global-space-macro-xs);
189
- --container-space-chatbubble-inner-yg-l: var(--global-space-macro-m); /* Vertical gap between inner blocks within a chat or insight bubble. */
190
185
  --container-space-filepreview-preview-x-m: var(--global-space-micro-l); /* Horizontal padding on large thumbnail image */
191
186
  --container-space-filepreview-preview-y-m: var(--global-space-micro-l); /* Vertical padding on large thumbnail image. */
192
187
  --container-space-flex-xg-s: var(--global-space-macro-xs); /* Small horizontal item spacing */
@@ -264,6 +259,7 @@
264
259
  --container-space-tilecard-x-s: var(--global-space-macro-xs); /* Right left padding on Tile or Card. */
265
260
  --container-space-tilecard-x-m: var(--global-space-macro-m); /* Right left padding on drag wrapper */
266
261
  --container-space-tilecard-x-l: var(--global-space-macro-l); /* Right left padding on Tile or Card. */
262
+ --container-space-tilecard-x-xxxl: calc(var(--global-space-macro-xl) * 2); /* Right margin on AI response bubbles and left margin on user prompt bubbles. */
267
263
  --container-space-tilecard-xg-m: var(--global-space-micro-l); /* horizontal gap between icons and text */
268
264
  --container-space-tilecard-y-xs: var(--global-space-micro-l); /* Top bottom padding on Link preview and on card drag wrapper */
269
265
  --container-space-tilecard-y-s: var(--global-space-macro-xs); /* Top bottom padding on Tile or Card. */
@@ -306,9 +302,6 @@
306
302
  --container-borderwidth-tile: var(--global-borderwidth-xs); /* Tile */
307
303
  --container-borderwidth-accordion-standard: var(--global-borderwidth-xs); /* Accordion standard (top and bottom borders) */
308
304
  --container-borderwidth-accordion-subtle: var(--global-borderwidth-s); /* Accordion subtle (content vertical line) */
309
- --container-borderwidth-chatbubble-default: var(--global-borderwidth-xs);
310
- --container-borderwidth-chatbubble-error: var(--global-borderwidth-s);
311
- --container-borderwidth-chatbubble-success: var(--global-borderwidth-s);
312
305
  --container-borderwidth-filepreview-container: var(--global-borderwidth-xs); /* File preview (internal borders) */
313
306
  --container-borderwidth-filepreview-enabled: var(--global-borderwidth-xs); /* File preview (file selector) */
314
307
  --container-borderwidth-filepreview-active: var(--global-borderwidth-s); /* File preview (file selector) */
package/css/frozenproduct/large/components/form.css CHANGED
@@ -16,47 +16,38 @@
16
16
  --form-color-colorpicker-blue-bg-default: var(--modes-color-colorcode-blue-muted);
17
17
  --form-color-colorpicker-blue-border: var(--modes-color-colorcode-blue-deep);
18
18
  --form-color-colorpicker-blue-pattern: var(--modes-color-colorcode-blue-deep);
19
- --form-color-colorpicker-blue-label-default: var(--modes-color-colorcode-blue-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
20
19
  --form-color-colorpicker-teal-bg-alt: var(--modes-color-colorcode-teal-deep);
21
20
  --form-color-colorpicker-teal-bg-default: var(--modes-color-colorcode-teal-muted);
22
21
  --form-color-colorpicker-teal-border: var(--modes-color-colorcode-teal-deep);
23
22
  --form-color-colorpicker-teal-pattern: var(--modes-color-colorcode-teal-deep);
24
- --form-color-colorpicker-teal-label-default: var(--modes-color-colorcode-teal-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
25
23
  --form-color-colorpicker-green-bg-alt: var(--modes-color-colorcode-green-deep);
26
24
  --form-color-colorpicker-green-bg-default: var(--modes-color-colorcode-green-muted);
27
25
  --form-color-colorpicker-green-border: var(--modes-color-colorcode-green-deep);
28
26
  --form-color-colorpicker-green-pattern: var(--modes-color-colorcode-green-deep);
29
- --form-color-colorpicker-green-label-default: var(--modes-color-colorcode-green-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
30
27
  --form-color-colorpicker-lime-bg-alt: var(--modes-color-colorcode-lime-deep);
31
28
  --form-color-colorpicker-lime-bg-default: var(--modes-color-colorcode-lime-muted);
32
29
  --form-color-colorpicker-lime-border: var(--modes-color-colorcode-lime-deep);
33
30
  --form-color-colorpicker-lime-pattern: var(--modes-color-colorcode-lime-deep);
34
- --form-color-colorpicker-lime-label-default: var(--modes-color-colorcode-lime-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
35
31
  --form-color-colorpicker-orange-bg-alt: var(--modes-color-colorcode-orange-deep);
36
32
  --form-color-colorpicker-orange-bg-default: var(--modes-color-colorcode-orange-muted);
37
33
  --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-deep);
38
34
  --form-color-colorpicker-orange-pattern: var(--modes-color-colorcode-orange-deep);
39
- --form-color-colorpicker-orange-label-default: var(--modes-color-colorcode-orange-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
40
35
  --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-deep);
41
36
  --form-color-colorpicker-red-bg-default: var(--modes-color-colorcode-red-muted);
42
37
  --form-color-colorpicker-red-bg-alt: var(--modes-color-colorcode-red-deep);
43
38
  --form-color-colorpicker-red-pattern: var(--modes-color-colorcode-red-deep);
44
- --form-color-colorpicker-red-label-default: var(--modes-color-colorcode-red-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
45
39
  --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-deep);
46
40
  --form-color-colorpicker-pink-bg-default: var(--modes-color-colorcode-pink-muted);
47
41
  --form-color-colorpicker-pink-bg-alt: var(--modes-color-colorcode-pink-deep);
48
42
  --form-color-colorpicker-pink-pattern: var(--modes-color-colorcode-pink-deep);
49
- --form-color-colorpicker-pink-label-default: var(--modes-color-colorcode-pink-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
50
43
  --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-deep);
51
44
  --form-color-colorpicker-purple-bg-default: var(--modes-color-colorcode-purple-muted);
52
45
  --form-color-colorpicker-purple-bg-alt: var(--modes-color-colorcode-purple-deep);
53
46
  --form-color-colorpicker-purple-pattern: var(--modes-color-colorcode-purple-deep);
54
- --form-color-colorpicker-purple-label-default: var(--modes-color-colorcode-purple-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
55
47
  --form-color-colorpicker-gray-border: var(--modes-color-colorcode-gray-deep);
56
48
  --form-color-colorpicker-gray-bg-default: var(--modes-color-colorcode-gray-muted);
57
49
  --form-color-colorpicker-gray-bg-alt: var(--modes-color-colorcode-gray-deep);
58
50
  --form-color-colorpicker-gray-pattern: var(--modes-color-colorcode-gray-deep);
59
- --form-color-colorpicker-gray-label-default: var(--modes-color-colorcode-gray-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
60
51
  --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-deep);
61
52
  --form-color-colorpicker-slate-bg-default: var(--modes-color-colorcode-slate-muted);
62
53
  --form-color-colorpicker-slate-bg-alt: var(--modes-color-colorcode-slate-deep);
package/css/frozenproduct/large/dark.css CHANGED
@@ -166,6 +166,7 @@
166
166
  --modes-color-status-negative-hover: #eb646c; /* used on pill hover states */
167
167
  --modes-color-status-negative-hover-alt: #3f1a1c; /* used on pill hover states and message bg */
168
168
  --modes-color-status-negative-text: #E13E53;
169
+ --modes-color-status-important-default: #985FDC; /* For tile status keylines to show if something is of high importance. */
169
170
  --modes-color-status-neutral-default: #7C7C7C;
170
171
  --modes-color-status-neutral-default-alt: #171717; /* Subtle message bg */
171
172
  --modes-color-status-neutral-hover: #909090; /* used on pill hover states */
package/css/frozenproduct/large/light.css CHANGED
@@ -161,6 +161,7 @@
161
161
  --modes-color-status-info-hover-alt: #cbd6e9; /* used on pill hover states and message bg */
162
162
  --modes-color-status-info-frozenglobal-default: #65a9ff; /* used on global message bg */
163
163
  --modes-color-status-info-frozenglobal-hover: #84b6ff; /* used on global message bg */
164
+ --modes-color-status-important-default: #8F4CD7; /* For tile status keylines to show if something is of high importance. */
164
165
  --modes-color-status-negative-default: #CD384B; /* For pills and messages. Not accessible with white TEXT. */
165
166
  --modes-color-status-negative-default-alt: #fdeceb; /* Subtle message bg */
166
167
  --modes-color-status-negative-hover: #aa323f; /* used on pill hover states */
package/css/frozenproduct/small/components/container.css CHANGED
@@ -50,6 +50,12 @@
50
50
  --container-color-interactive-bg-enabled: var(--modes-color-generic-bg-nought);
51
51
  --container-color-interactive-detailedicon-bg: var(--modes-color-custom-default); /* */
52
52
  --container-color-standard-bg-default: var(--modes-color-generic-bg-nought);
53
+ --container-color-standard-statusborder-bg-caution: var(--modes-color-status-caution-default);
54
+ --container-color-standard-statusborder-bg-negative: var(--modes-color-status-negative-default);
55
+ --container-color-standard-statusborder-bg-important: var(--modes-color-status-important-default);
56
+ --container-color-standard-statusborder-bg-info: var(--modes-color-status-info-default);
57
+ --container-color-standard-statusborder-bg-neutral: var(--modes-color-status-neutral-default);
58
+ --container-color-standard-statusborder-bg-positive: var(--modes-color-status-positive-default);
53
59
  --container-typography-adaptive-heading-m: var(--global-typography-adaptive-heading-s); /* Accordion, Subscription tile, Tile select and generic tile or card headings */
54
60
  --container-typography-adaptive-heading-l: var(--global-typography-adaptive-heading-m); /* Dialog, drawer and sidebar headings */
55
61
  --container-typography-adaptive-subheading-m: var(--global-typography-adaptive-subheading-m); /* Accordion subheading, Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading */
@@ -84,6 +90,7 @@
84
90
  --container-color-standard-dimmer: var(--modes-color-interactive-inactive-mask); /* dimmed mask for dialogs */
85
91
  --container-color-standard-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
86
92
  --container-color-standard-text-default: var(--modes-color-generic-content-harsh); /* for headings, paragraph text etc */
93
+ --container-color-standard-statusborder-bg-ai: var(--container-color-ai-bordervertical);
87
94
  --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
88
95
  --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
89
96
  --container-boxshadow-card-drag: var(--global-boxshadow-interactive-drag); /* Card (drag state) */
@@ -147,6 +154,7 @@
147
154
  --container-size-scrollbar-container: var(--global-size-micro-xl); /* Container that the scrollbar sits within */
148
155
  --container-size-sidebar-responsive-min: var(--global-size-flex-xl); /* min-width for sidebar */
149
156
  --container-size-sidebar-responsive-max: var(--global-size-flex-xxxxl); /* max-width for sidebar */
157
+ --container-size-tile-statusborder: var(--global-size-micro-m); /* width of left status borders on tiles. */
150
158
  --container-size-tileselect-footer: var(--global-size-macro-l); /* Product identifier */
151
159
  --container-size-tileselect-productidentifier-m: var(--global-size-macro-s); /* Product identifier */
152
160
  --container-size-tileselect-productidentifier-l: var(--global-size-macro-l); /* Product identifier */
@@ -157,7 +165,6 @@
157
165
  --container-radius-card-curved: var(--global-radius-container-xl); /* Card (more rounded) */
158
166
  --container-radius-card-sweeping: var(--global-radius-container-xxl); /* Card largest rounded type */
159
167
  --container-radius-carouselslide: var(--global-radius-container-l); /* Carousel slides */
160
- --container-radius-chatbubble: var(--global-radius-container-l);
161
168
  --container-radius-colorpicker: var(--global-radius-container-l); /* Color picker container radius */
162
169
  --container-radius-contacttile: var(--global-radius-container-m);
163
170
  --container-radius-dialog: var(--global-radius-container-xl); /* Dialog */
@@ -175,18 +182,6 @@
175
182
  --container-radius-nudge: var(--global-radius-container-l); /* nudge radius */
176
183
  --container-space-none: var(--global-space-none);
177
184
  --container-space-accordionsubtle-yg-m: var(--global-space-macro-xs); /* Gap between Accordion subtle trigger and content */
178
- --container-space-chatbubble-outer-x-m: var(--global-space-macro-m); /* Left margin on AI response bubbles and right margin on user prompt bubbles. */
179
- --container-space-chatbubble-outer-x-l: calc(var(--global-space-macro-xl) * 2); /* Right margin on AI response bubbles and left margin on user prompt bubbles. */
180
- --container-space-chatbubble-outer-y-m: var(--global-space-micro-l); /* Top and bottom margin on all chat bubbles. */
181
- --container-space-chatbubble-outer-yg-m: var(--global-space-micro-s); /* Gap between timestamp and chat bubble container. Also gap between give feedback button and container. */
182
- --container-space-chatbubble-inner-x-m: var(--global-space-macro-xs); /* Left and right padding inside chat bubbles. */
183
- --container-space-chatbubble-inner-xg-s: var(--global-space-micro-l);
184
- --container-space-chatbubble-inner-xg-m: var(--global-space-macro-xs);
185
- --container-space-chatbubble-inner-y-m: var(--global-space-macro-xs); /* Top and bottom padding inside chat bubbles. */
186
- --container-space-chatbubble-inner-yg-xs: var(--global-space-micro-s);
187
- --container-space-chatbubble-inner-yg-s: var(--global-space-micro-l);
188
- --container-space-chatbubble-inner-yg-m: var(--global-space-macro-xs);
189
- --container-space-chatbubble-inner-yg-l: var(--global-space-macro-m); /* Vertical gap between inner blocks within a chat or insight bubble. */
190
185
  --container-space-filepreview-preview-x-m: var(--global-space-micro-l); /* Horizontal padding on large thumbnail image */
191
186
  --container-space-filepreview-preview-y-m: var(--global-space-micro-l); /* Vertical padding on large thumbnail image. */
192
187
  --container-space-flex-xg-s: var(--global-space-macro-xs); /* Small horizontal item spacing */
@@ -264,6 +259,7 @@
264
259
  --container-space-tilecard-x-s: var(--global-space-macro-xs); /* Right left padding on Tile or Card. */
265
260
  --container-space-tilecard-x-m: var(--global-space-macro-m); /* Right left padding on drag wrapper */
266
261
  --container-space-tilecard-x-l: var(--global-space-macro-l); /* Right left padding on Tile or Card. */
262
+ --container-space-tilecard-x-xxxl: calc(var(--global-space-macro-xl) * 2); /* Right margin on AI response bubbles and left margin on user prompt bubbles. */
267
263
  --container-space-tilecard-xg-m: var(--global-space-micro-l); /* horizontal gap between icons and text */
268
264
  --container-space-tilecard-y-xs: var(--global-space-micro-l); /* Top bottom padding on Link preview and on card drag wrapper */
269
265
  --container-space-tilecard-y-s: var(--global-space-macro-xs); /* Top bottom padding on Tile or Card. */
@@ -306,9 +302,6 @@
306
302
  --container-borderwidth-tile: var(--global-borderwidth-xs); /* Tile */
307
303
  --container-borderwidth-accordion-standard: var(--global-borderwidth-xs); /* Accordion standard (top and bottom borders) */
308
304
  --container-borderwidth-accordion-subtle: var(--global-borderwidth-s); /* Accordion subtle (content vertical line) */
309
- --container-borderwidth-chatbubble-default: var(--global-borderwidth-xs);
310
- --container-borderwidth-chatbubble-error: var(--global-borderwidth-s);
311
- --container-borderwidth-chatbubble-success: var(--global-borderwidth-s);
312
305
  --container-borderwidth-filepreview-container: var(--global-borderwidth-xs); /* File preview (internal borders) */
313
306
  --container-borderwidth-filepreview-enabled: var(--global-borderwidth-xs); /* File preview (file selector) */
314
307
  --container-borderwidth-filepreview-active: var(--global-borderwidth-s); /* File preview (file selector) */
package/css/frozenproduct/small/components/form.css CHANGED
@@ -16,47 +16,38 @@
16
16
  --form-color-colorpicker-blue-bg-default: var(--modes-color-colorcode-blue-muted);
17
17
  --form-color-colorpicker-blue-border: var(--modes-color-colorcode-blue-deep);
18
18
  --form-color-colorpicker-blue-pattern: var(--modes-color-colorcode-blue-deep);
19
- --form-color-colorpicker-blue-label-default: var(--modes-color-colorcode-blue-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
20
19
  --form-color-colorpicker-teal-bg-alt: var(--modes-color-colorcode-teal-deep);
21
20
  --form-color-colorpicker-teal-bg-default: var(--modes-color-colorcode-teal-muted);
22
21
  --form-color-colorpicker-teal-border: var(--modes-color-colorcode-teal-deep);
23
22
  --form-color-colorpicker-teal-pattern: var(--modes-color-colorcode-teal-deep);
24
- --form-color-colorpicker-teal-label-default: var(--modes-color-colorcode-teal-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
25
23
  --form-color-colorpicker-green-bg-alt: var(--modes-color-colorcode-green-deep);
26
24
  --form-color-colorpicker-green-bg-default: var(--modes-color-colorcode-green-muted);
27
25
  --form-color-colorpicker-green-border: var(--modes-color-colorcode-green-deep);
28
26
  --form-color-colorpicker-green-pattern: var(--modes-color-colorcode-green-deep);
29
- --form-color-colorpicker-green-label-default: var(--modes-color-colorcode-green-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
30
27
  --form-color-colorpicker-lime-bg-alt: var(--modes-color-colorcode-lime-deep);
31
28
  --form-color-colorpicker-lime-bg-default: var(--modes-color-colorcode-lime-muted);
32
29
  --form-color-colorpicker-lime-border: var(--modes-color-colorcode-lime-deep);
33
30
  --form-color-colorpicker-lime-pattern: var(--modes-color-colorcode-lime-deep);
34
- --form-color-colorpicker-lime-label-default: var(--modes-color-colorcode-lime-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
35
31
  --form-color-colorpicker-orange-bg-alt: var(--modes-color-colorcode-orange-deep);
36
32
  --form-color-colorpicker-orange-bg-default: var(--modes-color-colorcode-orange-muted);
37
33
  --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-deep);
38
34
  --form-color-colorpicker-orange-pattern: var(--modes-color-colorcode-orange-deep);
39
- --form-color-colorpicker-orange-label-default: var(--modes-color-colorcode-orange-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
40
35
  --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-deep);
41
36
  --form-color-colorpicker-red-bg-default: var(--modes-color-colorcode-red-muted);
42
37
  --form-color-colorpicker-red-bg-alt: var(--modes-color-colorcode-red-deep);
43
38
  --form-color-colorpicker-red-pattern: var(--modes-color-colorcode-red-deep);
44
- --form-color-colorpicker-red-label-default: var(--modes-color-colorcode-red-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
45
39
  --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-deep);
46
40
  --form-color-colorpicker-pink-bg-default: var(--modes-color-colorcode-pink-muted);
47
41
  --form-color-colorpicker-pink-bg-alt: var(--modes-color-colorcode-pink-deep);
48
42
  --form-color-colorpicker-pink-pattern: var(--modes-color-colorcode-pink-deep);
49
- --form-color-colorpicker-pink-label-default: var(--modes-color-colorcode-pink-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
50
43
  --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-deep);
51
44
  --form-color-colorpicker-purple-bg-default: var(--modes-color-colorcode-purple-muted);
52
45
  --form-color-colorpicker-purple-bg-alt: var(--modes-color-colorcode-purple-deep);
53
46
  --form-color-colorpicker-purple-pattern: var(--modes-color-colorcode-purple-deep);
54
- --form-color-colorpicker-purple-label-default: var(--modes-color-colorcode-purple-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
55
47
  --form-color-colorpicker-gray-border: var(--modes-color-colorcode-gray-deep);
56
48
  --form-color-colorpicker-gray-bg-default: var(--modes-color-colorcode-gray-muted);
57
49
  --form-color-colorpicker-gray-bg-alt: var(--modes-color-colorcode-gray-deep);
58
50
  --form-color-colorpicker-gray-pattern: var(--modes-color-colorcode-gray-deep);
59
- --form-color-colorpicker-gray-label-default: var(--modes-color-colorcode-gray-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
60
51
  --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-deep);
61
52
  --form-color-colorpicker-slate-bg-default: var(--modes-color-colorcode-slate-muted);
62
53
  --form-color-colorpicker-slate-bg-alt: var(--modes-color-colorcode-slate-deep);
package/css/frozenproduct/small/dark.css CHANGED
@@ -166,6 +166,7 @@
166
166
  --modes-color-status-negative-hover: #eb646c; /* used on pill hover states */
167
167
  --modes-color-status-negative-hover-alt: #3f1a1c; /* used on pill hover states and message bg */
168
168
  --modes-color-status-negative-text: #E13E53;
169
+ --modes-color-status-important-default: #985FDC; /* For tile status keylines to show if something is of high importance. */
169
170
  --modes-color-status-neutral-default: #7C7C7C;
170
171
  --modes-color-status-neutral-default-alt: #171717; /* Subtle message bg */
171
172
  --modes-color-status-neutral-hover: #909090; /* used on pill hover states */
package/css/frozenproduct/small/light.css CHANGED
@@ -161,6 +161,7 @@
161
161
  --modes-color-status-info-hover-alt: #cbd6e9; /* used on pill hover states and message bg */
162
162
  --modes-color-status-info-frozenglobal-default: #65a9ff; /* used on global message bg */
163
163
  --modes-color-status-info-frozenglobal-hover: #84b6ff; /* used on global message bg */
164
+ --modes-color-status-important-default: #8F4CD7; /* For tile status keylines to show if something is of high importance. */
164
165
  --modes-color-status-negative-default: #CD384B; /* For pills and messages. Not accessible with white TEXT. */
165
166
  --modes-color-status-negative-default-alt: #fdeceb; /* Subtle message bg */
166
167
  --modes-color-status-negative-hover: #aa323f; /* used on pill hover states */