@sage/design-tokens 10.0.0 → 11.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 (421) hide show
  1. package/css/frozenproduct/all.css +17 -23
  2. package/css/frozenproduct/large/components/container.css +4 -4
  3. package/css/frozenproduct/large/components/form.css +10 -19
  4. package/css/frozenproduct/large/dark.css +1 -0
  5. package/css/frozenproduct/large/global.css +1 -0
  6. package/css/frozenproduct/large/light.css +1 -0
  7. package/css/frozenproduct/small/components/container.css +4 -4
  8. package/css/frozenproduct/small/components/form.css +10 -19
  9. package/css/frozenproduct/small/dark.css +1 -0
  10. package/css/frozenproduct/small/global.css +1 -0
  11. package/css/frozenproduct/small/light.css +1 -0
  12. package/css/marketing/all.css +17 -23
  13. package/css/marketing/large/components/container.css +4 -4
  14. package/css/marketing/large/components/form.css +10 -19
  15. package/css/marketing/large/dark.css +1 -0
  16. package/css/marketing/large/global.css +1 -0
  17. package/css/marketing/large/light.css +1 -0
  18. package/css/marketing/small/components/container.css +4 -4
  19. package/css/marketing/small/components/form.css +10 -19
  20. package/css/marketing/small/dark.css +1 -0
  21. package/css/marketing/small/global.css +1 -0
  22. package/css/marketing/small/light.css +1 -0
  23. package/css/product/all.css +17 -23
  24. package/css/product/large/components/container.css +4 -4
  25. package/css/product/large/components/form.css +17 -26
  26. package/css/product/large/components/link.css +2 -2
  27. package/css/product/large/dark.css +1 -0
  28. package/css/product/large/global.css +1 -0
  29. package/css/product/large/light.css +1 -0
  30. package/css/product/small/components/container.css +4 -4
  31. package/css/product/small/components/form.css +10 -19
  32. package/css/product/small/dark.css +1 -0
  33. package/css/product/small/global.css +1 -0
  34. package/css/product/small/light.css +1 -0
  35. package/ios/frozenproduct/large/dark/components/container.h +3 -3
  36. package/ios/frozenproduct/large/dark/components/form.h +10 -19
  37. package/ios/frozenproduct/large/dark/mode.h +1 -0
  38. package/ios/frozenproduct/large/global.h +1 -0
  39. package/ios/frozenproduct/large/light/components/container.h +3 -3
  40. package/ios/frozenproduct/large/light/components/form.h +10 -19
  41. package/ios/frozenproduct/large/light/mode.h +1 -0
  42. package/ios/frozenproduct/small/dark/components/container.h +3 -3
  43. package/ios/frozenproduct/small/dark/components/form.h +10 -19
  44. package/ios/frozenproduct/small/dark/mode.h +1 -0
  45. package/ios/frozenproduct/small/global.h +1 -0
  46. package/ios/frozenproduct/small/light/components/container.h +3 -3
  47. package/ios/frozenproduct/small/light/components/form.h +10 -19
  48. package/ios/frozenproduct/small/light/mode.h +1 -0
  49. package/ios/marketing/large/dark/components/container.h +3 -3
  50. package/ios/marketing/large/dark/components/form.h +10 -19
  51. package/ios/marketing/large/dark/mode.h +1 -0
  52. package/ios/marketing/large/global.h +1 -0
  53. package/ios/marketing/large/light/components/container.h +3 -3
  54. package/ios/marketing/large/light/components/form.h +10 -19
  55. package/ios/marketing/large/light/mode.h +1 -0
  56. package/ios/marketing/small/dark/components/container.h +3 -3
  57. package/ios/marketing/small/dark/components/form.h +10 -19
  58. package/ios/marketing/small/dark/mode.h +1 -0
  59. package/ios/marketing/small/global.h +1 -0
  60. package/ios/marketing/small/light/components/container.h +3 -3
  61. package/ios/marketing/small/light/components/form.h +10 -19
  62. package/ios/marketing/small/light/mode.h +1 -0
  63. package/ios/product/large/dark/components/container.h +3 -3
  64. package/ios/product/large/dark/components/form.h +10 -19
  65. package/ios/product/large/dark/mode.h +1 -0
  66. package/ios/product/large/global.h +1 -0
  67. package/ios/product/large/light/components/container.h +3 -3
  68. package/ios/product/large/light/components/form.h +10 -19
  69. package/ios/product/large/light/mode.h +1 -0
  70. package/ios/product/small/dark/components/container.h +3 -3
  71. package/ios/product/small/dark/components/form.h +10 -19
  72. package/ios/product/small/dark/mode.h +1 -0
  73. package/ios/product/small/global.h +1 -0
  74. package/ios/product/small/light/components/container.h +3 -3
  75. package/ios/product/small/light/components/form.h +10 -19
  76. package/ios/product/small/light/mode.h +1 -0
  77. package/js/common/frozenproduct/large/dark/components/container.d.ts +6 -2
  78. package/js/common/frozenproduct/large/dark/components/container.js +36 -33
  79. package/js/common/frozenproduct/large/dark/components/form.d.ts +10 -35
  80. package/js/common/frozenproduct/large/dark/components/form.js +30 -175
  81. package/js/common/frozenproduct/large/dark/mode.d.ts +3 -0
  82. package/js/common/frozenproduct/large/dark/mode.js +18 -0
  83. package/js/common/frozenproduct/large/global.d.ts +1 -0
  84. package/js/common/frozenproduct/large/global.js +23 -0
  85. package/js/common/frozenproduct/large/light/components/container.d.ts +6 -2
  86. package/js/common/frozenproduct/large/light/components/container.js +36 -33
  87. package/js/common/frozenproduct/large/light/components/form.d.ts +10 -35
  88. package/js/common/frozenproduct/large/light/components/form.js +30 -175
  89. package/js/common/frozenproduct/large/light/mode.d.ts +3 -0
  90. package/js/common/frozenproduct/large/light/mode.js +18 -0
  91. package/js/common/frozenproduct/small/dark/components/container.d.ts +6 -2
  92. package/js/common/frozenproduct/small/dark/components/container.js +36 -33
  93. package/js/common/frozenproduct/small/dark/components/form.d.ts +10 -35
  94. package/js/common/frozenproduct/small/dark/components/form.js +30 -175
  95. package/js/common/frozenproduct/small/dark/mode.d.ts +3 -0
  96. package/js/common/frozenproduct/small/dark/mode.js +18 -0
  97. package/js/common/frozenproduct/small/global.d.ts +1 -0
  98. package/js/common/frozenproduct/small/global.js +23 -0
  99. package/js/common/frozenproduct/small/light/components/container.d.ts +6 -2
  100. package/js/common/frozenproduct/small/light/components/container.js +36 -33
  101. package/js/common/frozenproduct/small/light/components/form.d.ts +10 -35
  102. package/js/common/frozenproduct/small/light/components/form.js +30 -175
  103. package/js/common/frozenproduct/small/light/mode.d.ts +3 -0
  104. package/js/common/frozenproduct/small/light/mode.js +18 -0
  105. package/js/common/marketing/large/dark/components/container.d.ts +6 -2
  106. package/js/common/marketing/large/dark/components/container.js +36 -33
  107. package/js/common/marketing/large/dark/components/form.d.ts +10 -35
  108. package/js/common/marketing/large/dark/components/form.js +30 -175
  109. package/js/common/marketing/large/dark/mode.d.ts +3 -0
  110. package/js/common/marketing/large/dark/mode.js +18 -0
  111. package/js/common/marketing/large/global.d.ts +1 -0
  112. package/js/common/marketing/large/global.js +23 -0
  113. package/js/common/marketing/large/light/components/container.d.ts +6 -2
  114. package/js/common/marketing/large/light/components/container.js +36 -33
  115. package/js/common/marketing/large/light/components/form.d.ts +10 -35
  116. package/js/common/marketing/large/light/components/form.js +30 -175
  117. package/js/common/marketing/large/light/mode.d.ts +3 -0
  118. package/js/common/marketing/large/light/mode.js +18 -0
  119. package/js/common/marketing/small/dark/components/container.d.ts +6 -2
  120. package/js/common/marketing/small/dark/components/container.js +36 -33
  121. package/js/common/marketing/small/dark/components/form.d.ts +10 -35
  122. package/js/common/marketing/small/dark/components/form.js +30 -175
  123. package/js/common/marketing/small/dark/mode.d.ts +3 -0
  124. package/js/common/marketing/small/dark/mode.js +18 -0
  125. package/js/common/marketing/small/global.d.ts +1 -0
  126. package/js/common/marketing/small/global.js +23 -0
  127. package/js/common/marketing/small/light/components/container.d.ts +6 -2
  128. package/js/common/marketing/small/light/components/container.js +36 -33
  129. package/js/common/marketing/small/light/components/form.d.ts +10 -35
  130. package/js/common/marketing/small/light/components/form.js +30 -175
  131. package/js/common/marketing/small/light/mode.d.ts +3 -0
  132. package/js/common/marketing/small/light/mode.js +18 -0
  133. package/js/common/product/large/dark/components/container.d.ts +6 -2
  134. package/js/common/product/large/dark/components/container.js +36 -33
  135. package/js/common/product/large/dark/components/form.d.ts +10 -35
  136. package/js/common/product/large/dark/components/form.js +30 -175
  137. package/js/common/product/large/dark/mode.d.ts +3 -0
  138. package/js/common/product/large/dark/mode.js +18 -0
  139. package/js/common/product/large/global.d.ts +1 -0
  140. package/js/common/product/large/global.js +23 -0
  141. package/js/common/product/large/light/components/container.d.ts +6 -2
  142. package/js/common/product/large/light/components/container.js +36 -33
  143. package/js/common/product/large/light/components/form.d.ts +10 -35
  144. package/js/common/product/large/light/components/form.js +30 -175
  145. package/js/common/product/large/light/mode.d.ts +3 -0
  146. package/js/common/product/large/light/mode.js +18 -0
  147. package/js/common/product/small/dark/components/container.d.ts +6 -2
  148. package/js/common/product/small/dark/components/container.js +36 -33
  149. package/js/common/product/small/dark/components/form.d.ts +10 -35
  150. package/js/common/product/small/dark/components/form.js +30 -175
  151. package/js/common/product/small/dark/mode.d.ts +3 -0
  152. package/js/common/product/small/dark/mode.js +18 -0
  153. package/js/common/product/small/global.d.ts +1 -0
  154. package/js/common/product/small/global.js +23 -0
  155. package/js/common/product/small/light/components/container.d.ts +6 -2
  156. package/js/common/product/small/light/components/container.js +36 -33
  157. package/js/common/product/small/light/components/form.d.ts +10 -35
  158. package/js/common/product/small/light/components/form.js +30 -175
  159. package/js/common/product/small/light/mode.d.ts +3 -0
  160. package/js/common/product/small/light/mode.js +18 -0
  161. package/js/es6/frozenproduct/large/dark/components/container.d.ts +2 -2
  162. package/js/es6/frozenproduct/large/dark/components/container.js +4 -4
  163. package/js/es6/frozenproduct/large/dark/components/form.d.ts +10 -19
  164. package/js/es6/frozenproduct/large/dark/components/form.js +10 -19
  165. package/js/es6/frozenproduct/large/dark/mode.d.ts +1 -0
  166. package/js/es6/frozenproduct/large/dark/mode.js +2 -0
  167. package/js/es6/frozenproduct/large/global.d.ts +1 -0
  168. package/js/es6/frozenproduct/large/global.js +1 -0
  169. package/js/es6/frozenproduct/large/light/components/container.d.ts +2 -2
  170. package/js/es6/frozenproduct/large/light/components/container.js +5 -5
  171. package/js/es6/frozenproduct/large/light/components/form.d.ts +10 -19
  172. package/js/es6/frozenproduct/large/light/components/form.js +10 -19
  173. package/js/es6/frozenproduct/large/light/mode.d.ts +1 -0
  174. package/js/es6/frozenproduct/large/light/mode.js +2 -0
  175. package/js/es6/frozenproduct/small/dark/components/container.d.ts +2 -2
  176. package/js/es6/frozenproduct/small/dark/components/container.js +4 -4
  177. package/js/es6/frozenproduct/small/dark/components/form.d.ts +10 -19
  178. package/js/es6/frozenproduct/small/dark/components/form.js +10 -19
  179. package/js/es6/frozenproduct/small/dark/mode.d.ts +1 -0
  180. package/js/es6/frozenproduct/small/dark/mode.js +2 -0
  181. package/js/es6/frozenproduct/small/global.d.ts +1 -0
  182. package/js/es6/frozenproduct/small/global.js +1 -0
  183. package/js/es6/frozenproduct/small/light/components/container.d.ts +2 -2
  184. package/js/es6/frozenproduct/small/light/components/container.js +5 -5
  185. package/js/es6/frozenproduct/small/light/components/form.d.ts +10 -19
  186. package/js/es6/frozenproduct/small/light/components/form.js +10 -19
  187. package/js/es6/frozenproduct/small/light/mode.d.ts +1 -0
  188. package/js/es6/frozenproduct/small/light/mode.js +2 -0
  189. package/js/es6/marketing/large/dark/components/container.d.ts +2 -2
  190. package/js/es6/marketing/large/dark/components/container.js +4 -4
  191. package/js/es6/marketing/large/dark/components/form.d.ts +10 -19
  192. package/js/es6/marketing/large/dark/components/form.js +10 -19
  193. package/js/es6/marketing/large/dark/mode.d.ts +1 -0
  194. package/js/es6/marketing/large/dark/mode.js +2 -0
  195. package/js/es6/marketing/large/global.d.ts +1 -0
  196. package/js/es6/marketing/large/global.js +1 -0
  197. package/js/es6/marketing/large/light/components/container.d.ts +2 -2
  198. package/js/es6/marketing/large/light/components/container.js +5 -5
  199. package/js/es6/marketing/large/light/components/form.d.ts +10 -19
  200. package/js/es6/marketing/large/light/components/form.js +10 -19
  201. package/js/es6/marketing/large/light/mode.d.ts +1 -0
  202. package/js/es6/marketing/large/light/mode.js +2 -0
  203. package/js/es6/marketing/small/dark/components/container.d.ts +2 -2
  204. package/js/es6/marketing/small/dark/components/container.js +4 -4
  205. package/js/es6/marketing/small/dark/components/form.d.ts +10 -19
  206. package/js/es6/marketing/small/dark/components/form.js +10 -19
  207. package/js/es6/marketing/small/dark/mode.d.ts +1 -0
  208. package/js/es6/marketing/small/dark/mode.js +2 -0
  209. package/js/es6/marketing/small/global.d.ts +1 -0
  210. package/js/es6/marketing/small/global.js +1 -0
  211. package/js/es6/marketing/small/light/components/container.d.ts +2 -2
  212. package/js/es6/marketing/small/light/components/container.js +5 -5
  213. package/js/es6/marketing/small/light/components/form.d.ts +10 -19
  214. package/js/es6/marketing/small/light/components/form.js +10 -19
  215. package/js/es6/marketing/small/light/mode.d.ts +1 -0
  216. package/js/es6/marketing/small/light/mode.js +2 -0
  217. package/js/es6/product/large/dark/components/container.d.ts +2 -2
  218. package/js/es6/product/large/dark/components/container.js +4 -4
  219. package/js/es6/product/large/dark/components/form.d.ts +10 -19
  220. package/js/es6/product/large/dark/components/form.js +10 -19
  221. package/js/es6/product/large/dark/mode.d.ts +1 -0
  222. package/js/es6/product/large/dark/mode.js +2 -0
  223. package/js/es6/product/large/global.d.ts +1 -0
  224. package/js/es6/product/large/global.js +1 -0
  225. package/js/es6/product/large/light/components/container.d.ts +2 -2
  226. package/js/es6/product/large/light/components/container.js +5 -5
  227. package/js/es6/product/large/light/components/form.d.ts +10 -19
  228. package/js/es6/product/large/light/components/form.js +10 -19
  229. package/js/es6/product/large/light/mode.d.ts +1 -0
  230. package/js/es6/product/large/light/mode.js +2 -0
  231. package/js/es6/product/small/dark/components/container.d.ts +2 -2
  232. package/js/es6/product/small/dark/components/container.js +4 -4
  233. package/js/es6/product/small/dark/components/form.d.ts +10 -19
  234. package/js/es6/product/small/dark/components/form.js +10 -19
  235. package/js/es6/product/small/dark/mode.d.ts +1 -0
  236. package/js/es6/product/small/dark/mode.js +2 -0
  237. package/js/es6/product/small/global.d.ts +1 -0
  238. package/js/es6/product/small/global.js +1 -0
  239. package/js/es6/product/small/light/components/container.d.ts +2 -2
  240. package/js/es6/product/small/light/components/container.js +5 -5
  241. package/js/es6/product/small/light/components/form.d.ts +10 -19
  242. package/js/es6/product/small/light/components/form.js +10 -19
  243. package/js/es6/product/small/light/mode.d.ts +1 -0
  244. package/js/es6/product/small/light/mode.js +2 -0
  245. package/js/umd/frozenproduct/large/dark/components/container.js +36 -34
  246. package/js/umd/frozenproduct/large/dark/components/form.js +30 -175
  247. package/js/umd/frozenproduct/large/dark/mode.js +18 -0
  248. package/js/umd/frozenproduct/large/global.js +23 -0
  249. package/js/umd/frozenproduct/large/light/components/container.js +36 -34
  250. package/js/umd/frozenproduct/large/light/components/form.js +30 -175
  251. package/js/umd/frozenproduct/large/light/mode.js +18 -0
  252. package/js/umd/frozenproduct/small/dark/components/container.js +36 -34
  253. package/js/umd/frozenproduct/small/dark/components/form.js +30 -175
  254. package/js/umd/frozenproduct/small/dark/mode.js +18 -0
  255. package/js/umd/frozenproduct/small/global.js +23 -0
  256. package/js/umd/frozenproduct/small/light/components/container.js +36 -34
  257. package/js/umd/frozenproduct/small/light/components/form.js +30 -175
  258. package/js/umd/frozenproduct/small/light/mode.js +18 -0
  259. package/js/umd/marketing/large/dark/components/container.js +36 -34
  260. package/js/umd/marketing/large/dark/components/form.js +30 -175
  261. package/js/umd/marketing/large/dark/mode.js +18 -0
  262. package/js/umd/marketing/large/global.js +23 -0
  263. package/js/umd/marketing/large/light/components/container.js +36 -34
  264. package/js/umd/marketing/large/light/components/form.js +30 -175
  265. package/js/umd/marketing/large/light/mode.js +18 -0
  266. package/js/umd/marketing/small/dark/components/container.js +36 -34
  267. package/js/umd/marketing/small/dark/components/form.js +30 -175
  268. package/js/umd/marketing/small/dark/mode.js +18 -0
  269. package/js/umd/marketing/small/global.js +23 -0
  270. package/js/umd/marketing/small/light/components/container.js +36 -34
  271. package/js/umd/marketing/small/light/components/form.js +30 -175
  272. package/js/umd/marketing/small/light/mode.js +18 -0
  273. package/js/umd/product/large/dark/components/container.js +36 -34
  274. package/js/umd/product/large/dark/components/form.js +30 -175
  275. package/js/umd/product/large/dark/mode.js +18 -0
  276. package/js/umd/product/large/global.js +23 -0
  277. package/js/umd/product/large/light/components/container.js +36 -34
  278. package/js/umd/product/large/light/components/form.js +30 -175
  279. package/js/umd/product/large/light/mode.js +18 -0
  280. package/js/umd/product/small/dark/components/container.js +36 -34
  281. package/js/umd/product/small/dark/components/form.js +30 -175
  282. package/js/umd/product/small/dark/mode.js +18 -0
  283. package/js/umd/product/small/global.js +23 -0
  284. package/js/umd/product/small/light/components/container.js +36 -34
  285. package/js/umd/product/small/light/components/form.js +30 -175
  286. package/js/umd/product/small/light/mode.js +18 -0
  287. package/json/flat/frozenproduct/large/dark/components/container.json +3 -3
  288. package/json/flat/frozenproduct/large/dark/components/form.json +10 -19
  289. package/json/flat/frozenproduct/large/dark/mode.json +1 -0
  290. package/json/flat/frozenproduct/large/global.json +1 -0
  291. package/json/flat/frozenproduct/large/light/components/container.json +3 -3
  292. package/json/flat/frozenproduct/large/light/components/form.json +10 -19
  293. package/json/flat/frozenproduct/large/light/mode.json +1 -0
  294. package/json/flat/frozenproduct/small/dark/components/container.json +3 -3
  295. package/json/flat/frozenproduct/small/dark/components/form.json +10 -19
  296. package/json/flat/frozenproduct/small/dark/mode.json +1 -0
  297. package/json/flat/frozenproduct/small/global.json +1 -0
  298. package/json/flat/frozenproduct/small/light/components/container.json +3 -3
  299. package/json/flat/frozenproduct/small/light/components/form.json +10 -19
  300. package/json/flat/frozenproduct/small/light/mode.json +1 -0
  301. package/json/flat/marketing/large/dark/components/container.json +3 -3
  302. package/json/flat/marketing/large/dark/components/form.json +10 -19
  303. package/json/flat/marketing/large/dark/mode.json +1 -0
  304. package/json/flat/marketing/large/global.json +1 -0
  305. package/json/flat/marketing/large/light/components/container.json +3 -3
  306. package/json/flat/marketing/large/light/components/form.json +10 -19
  307. package/json/flat/marketing/large/light/mode.json +1 -0
  308. package/json/flat/marketing/small/dark/components/container.json +3 -3
  309. package/json/flat/marketing/small/dark/components/form.json +10 -19
  310. package/json/flat/marketing/small/dark/mode.json +1 -0
  311. package/json/flat/marketing/small/global.json +1 -0
  312. package/json/flat/marketing/small/light/components/container.json +3 -3
  313. package/json/flat/marketing/small/light/components/form.json +10 -19
  314. package/json/flat/marketing/small/light/mode.json +1 -0
  315. package/json/flat/product/large/dark/components/container.json +3 -3
  316. package/json/flat/product/large/dark/components/form.json +10 -19
  317. package/json/flat/product/large/dark/mode.json +1 -0
  318. package/json/flat/product/large/global.json +1 -0
  319. package/json/flat/product/large/light/components/container.json +3 -3
  320. package/json/flat/product/large/light/components/form.json +10 -19
  321. package/json/flat/product/large/light/mode.json +1 -0
  322. package/json/flat/product/small/dark/components/container.json +3 -3
  323. package/json/flat/product/small/dark/components/form.json +10 -19
  324. package/json/flat/product/small/dark/mode.json +1 -0
  325. package/json/flat/product/small/global.json +1 -0
  326. package/json/flat/product/small/light/components/container.json +3 -3
  327. package/json/flat/product/small/light/components/form.json +10 -19
  328. package/json/flat/product/small/light/mode.json +1 -0
  329. package/json/nested/frozenproduct/large/dark/components/container.json +7 -3
  330. package/json/nested/frozenproduct/large/dark/components/form.json +11 -36
  331. package/json/nested/frozenproduct/large/dark/mode.json +3 -0
  332. package/json/nested/frozenproduct/large/global.json +2 -1
  333. package/json/nested/frozenproduct/large/light/components/container.json +7 -3
  334. package/json/nested/frozenproduct/large/light/components/form.json +11 -36
  335. package/json/nested/frozenproduct/large/light/mode.json +3 -0
  336. package/json/nested/frozenproduct/small/dark/components/container.json +7 -3
  337. package/json/nested/frozenproduct/small/dark/components/form.json +11 -36
  338. package/json/nested/frozenproduct/small/dark/mode.json +3 -0
  339. package/json/nested/frozenproduct/small/global.json +2 -1
  340. package/json/nested/frozenproduct/small/light/components/container.json +7 -3
  341. package/json/nested/frozenproduct/small/light/components/form.json +11 -36
  342. package/json/nested/frozenproduct/small/light/mode.json +3 -0
  343. package/json/nested/marketing/large/dark/components/container.json +7 -3
  344. package/json/nested/marketing/large/dark/components/form.json +11 -36
  345. package/json/nested/marketing/large/dark/mode.json +3 -0
  346. package/json/nested/marketing/large/global.json +2 -1
  347. package/json/nested/marketing/large/light/components/container.json +7 -3
  348. package/json/nested/marketing/large/light/components/form.json +11 -36
  349. package/json/nested/marketing/large/light/mode.json +3 -0
  350. package/json/nested/marketing/small/dark/components/container.json +7 -3
  351. package/json/nested/marketing/small/dark/components/form.json +11 -36
  352. package/json/nested/marketing/small/dark/mode.json +3 -0
  353. package/json/nested/marketing/small/global.json +2 -1
  354. package/json/nested/marketing/small/light/components/container.json +7 -3
  355. package/json/nested/marketing/small/light/components/form.json +11 -36
  356. package/json/nested/marketing/small/light/mode.json +3 -0
  357. package/json/nested/product/large/dark/components/container.json +7 -3
  358. package/json/nested/product/large/dark/components/form.json +11 -36
  359. package/json/nested/product/large/dark/mode.json +3 -0
  360. package/json/nested/product/large/global.json +2 -1
  361. package/json/nested/product/large/light/components/container.json +7 -3
  362. package/json/nested/product/large/light/components/form.json +11 -36
  363. package/json/nested/product/large/light/mode.json +3 -0
  364. package/json/nested/product/small/dark/components/container.json +7 -3
  365. package/json/nested/product/small/dark/components/form.json +11 -36
  366. package/json/nested/product/small/dark/mode.json +3 -0
  367. package/json/nested/product/small/global.json +2 -1
  368. package/json/nested/product/small/light/components/container.json +7 -3
  369. package/json/nested/product/small/light/components/form.json +11 -36
  370. package/json/nested/product/small/light/mode.json +3 -0
  371. package/package.json +1 -1
  372. package/sage-design-tokens-11.0.0.tgz +0 -0
  373. package/scss/frozenproduct/large/components/container.scss +4 -4
  374. package/scss/frozenproduct/large/components/form.scss +10 -19
  375. package/scss/frozenproduct/large/dark.scss +1 -0
  376. package/scss/frozenproduct/large/global.scss +1 -0
  377. package/scss/frozenproduct/large/light.scss +1 -0
  378. package/scss/frozenproduct/small/components/container.scss +4 -4
  379. package/scss/frozenproduct/small/components/form.scss +10 -19
  380. package/scss/frozenproduct/small/dark.scss +1 -0
  381. package/scss/frozenproduct/small/global.scss +1 -0
  382. package/scss/frozenproduct/small/light.scss +1 -0
  383. package/scss/marketing/large/components/container.scss +4 -4
  384. package/scss/marketing/large/components/form.scss +10 -19
  385. package/scss/marketing/large/dark.scss +1 -0
  386. package/scss/marketing/large/global.scss +1 -0
  387. package/scss/marketing/large/light.scss +1 -0
  388. package/scss/marketing/small/components/button.scss +23 -23
  389. package/scss/marketing/small/components/container.scss +13 -13
  390. package/scss/marketing/small/components/form.scss +17 -26
  391. package/scss/marketing/small/components/link.scss +2 -2
  392. package/scss/marketing/small/components/nav.scss +3 -3
  393. package/scss/marketing/small/components/page.scss +1 -1
  394. package/scss/marketing/small/components/popover.scss +2 -2
  395. package/scss/marketing/small/components/progress.scss +6 -6
  396. package/scss/marketing/small/components/status.scss +3 -3
  397. package/scss/marketing/small/components/tab.scss +7 -7
  398. package/scss/marketing/small/components/table.scss +10 -10
  399. package/scss/marketing/small/dark.scss +1 -0
  400. package/scss/marketing/small/global.scss +1 -0
  401. package/scss/marketing/small/light.scss +1 -0
  402. package/scss/product/large/components/button.scss +23 -23
  403. package/scss/product/large/components/container.scss +13 -13
  404. package/scss/product/large/components/form.scss +17 -26
  405. package/scss/product/large/components/link.scss +2 -2
  406. package/scss/product/large/components/nav.scss +3 -3
  407. package/scss/product/large/components/page.scss +1 -1
  408. package/scss/product/large/components/popover.scss +2 -2
  409. package/scss/product/large/components/progress.scss +6 -6
  410. package/scss/product/large/components/status.scss +3 -3
  411. package/scss/product/large/components/tab.scss +7 -7
  412. package/scss/product/large/components/table.scss +10 -10
  413. package/scss/product/large/dark.scss +1 -0
  414. package/scss/product/large/global.scss +1 -0
  415. package/scss/product/large/light.scss +1 -0
  416. package/scss/product/small/components/container.scss +4 -4
  417. package/scss/product/small/components/form.scss +10 -19
  418. package/scss/product/small/dark.scss +1 -0
  419. package/scss/product/small/global.scss +1 -0
  420. package/scss/product/small/light.scss +1 -0
  421. package/sage-design-tokens-10.0.0.tgz +0 -0
package/css/frozenproduct/all.css CHANGED
@@ -11,6 +11,7 @@
11
11
  --global-borderwidth-m: 3px; /* Focus */
12
12
  --global-borderwidth-l: 4px; /* Focus underline. Dividing lines. */
13
13
  --global-borderwidth-xl: 6px; /* Double Focus Border */
14
+ --global-borderwidth-xxl: 8px;
14
15
  --global-radius-scale: 1px; /* We can override this to locally change the size of radius in the future if required. */
15
16
  --global-radius-none: 0; /* Button groups (internal/adjacent corners), Card select group (internal/adjacent corners), File input (integrated base bar top corners). */
16
17
  --global-radius-circle: 999px; /* CIRCLE. Badge, Calendar date (today indicator and selected), Carousel selector dots, Loader bar, Portrait, Progress tracker, Radio button, Step flow (step indicators), Switch, */
@@ -198,6 +199,7 @@
198
199
  --modes-color-generic-fg-soft-light: #a6a6a6;
199
200
  --modes-color-generic-fg-moderate-light: #777;
200
201
  --modes-color-generic-fg-frozen-soft-light: #335B70; /* frozen progress tracker border */
202
+ --modes-color-generic-fg-ai-default-light: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment. */
201
203
  --modes-color-generic-backdrop-nought-light: #FFFFFF; /* used on full page backgrounds */
202
204
  --modes-color-generic-backdrop-faint-light: #f6f8f9; /* used on full page backgrounds as an alternative option */
203
205
  --modes-color-interactive-ai-active-light: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
@@ -395,6 +397,7 @@
395
397
  --modes-color-generic-fg-soft-dark: #4b4b4b;
396
398
  --modes-color-generic-fg-moderate-dark: #777;
397
399
  --modes-color-generic-fg-frozen-soft-dark: #4b4b4b;
400
+ --modes-color-generic-fg-ai-default-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment. */
398
401
  --modes-color-generic-backdrop-nought-dark: #000000; /* used on full page backgrounds */
399
402
  --modes-color-generic-backdrop-faint-dark: #181818; /* used on full page backgrounds as an alternative option */
400
403
  --modes-color-interactive-ai-active-dark: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
@@ -798,10 +801,10 @@
798
801
  --container-radius-blockquote-bar: var(--global-radius-circle); /* radius for blockquote bar */
799
802
  --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
800
803
  --container-opacity-carousel-hidden: light-dark(var(--modes-color-modifiers-input-disabled-fg-light), var(--modes-color-modifiers-input-disabled-fg-dark)); /* opacity applied to next and previous carousel slides */
801
- --container-color-ai-borderhorizontal: light-dark(var(--modes-color-status-ai-default-horizontal-light), var(--modes-color-status-ai-default-horizontal-dark)); /* top and bottom border for AI dialog component */
802
- --container-color-ai-bordervertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left and right border for dialog and insight bubbles. */
804
+ --container-color-ai-dialog-borderhorizontal: light-dark(var(--modes-color-generic-fg-ai-default-light), var(--modes-color-generic-fg-ai-default-dark)); /* top border for AI dialog component */
803
805
  --container-color-ai-nudge-border-ai-horizontal: light-dark(var(--modes-color-status-ai-default-horizontal-light), var(--modes-color-status-ai-default-horizontal-dark)); /* top and bottom border for AI nudge message component */
804
806
  --container-color-ai-nudge-border-ai-vertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left and right border for AI nudge message component */
807
+ --container-color-ai-tile-bordervertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left border for AI tiles and bubbles. */
805
808
  --container-color-calendar-label-default: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark)); /* Accessible on calendar bg-default colors. */
806
809
  --container-color-calendar-blue-bg-default: light-dark(var(--modes-color-colorcode-blue-muted-light), var(--modes-color-colorcode-blue-muted-dark));
807
810
  --container-color-calendar-blue-border-default: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
@@ -870,7 +873,7 @@
870
873
  --container-color-standard-dimmer: light-dark(var(--modes-color-interactive-inactive-mask-light), var(--modes-color-interactive-inactive-mask-dark)); /* dimmed mask for dialogs */
871
874
  --container-color-standard-text-alt: light-dark(var(--modes-color-generic-content-moderate-light), var(--modes-color-generic-content-moderate-dark)); /* for subheadings etc */
872
875
  --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);
876
+ --container-color-standard-statusborder-bg-ai: var(--container-color-ai-tile-bordervertical);
874
877
  --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
875
878
  --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
876
879
  --container-boxshadow-card-drag: var(--global-boxshadow-interactive-drag); /* Card (drag state) */
@@ -1069,7 +1072,7 @@
1069
1072
  --container-space-nudge-yg-l: var(--global-space-micro-xxl); /* Gap between message elements */
1070
1073
  --container-space-nudge-header-xg-m: var(--global-space-macro-xs); /* gap between header and ai logo */
1071
1074
  --container-space-nudge-header-xg-l: var(--global-space-macro-xs); /* gap between header and ai logo */
1072
- --container-borderwidth-a-igradient: var(--global-borderwidth-xl); /* AI gradient used on all containers such as dialog, chat bubbles etc */
1075
+ --container-borderwidth-a-igradient: var(--global-borderwidth-xxl); /* AI gradient used on all containers such as dialog, chat bubbles etc */
1073
1076
  --container-borderwidth-dialog: var(--global-borderwidth-xs); /* Dialog */
1074
1077
  --container-borderwidth-divider: var(--global-borderwidth-xs); /* Divider */
1075
1078
  --container-borderwidth-drawer: var(--global-borderwidth-xs); /* Drawer */
@@ -1133,27 +1136,26 @@
1133
1136
  --form-color-colorpicker-orange-bg-default: light-dark(var(--modes-color-colorcode-orange-muted-light), var(--modes-color-colorcode-orange-muted-dark));
1134
1137
  --form-color-colorpicker-orange-border: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1135
1138
  --form-color-colorpicker-orange-pattern: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1136
- --form-color-colorpicker-red-border: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1137
- --form-color-colorpicker-red-bg-default: light-dark(var(--modes-color-colorcode-red-muted-light), var(--modes-color-colorcode-red-muted-dark));
1138
1139
  --form-color-colorpicker-red-bg-alt: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1140
+ --form-color-colorpicker-red-bg-default: light-dark(var(--modes-color-colorcode-red-muted-light), var(--modes-color-colorcode-red-muted-dark));
1141
+ --form-color-colorpicker-red-border: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1139
1142
  --form-color-colorpicker-red-pattern: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1140
- --form-color-colorpicker-pink-border: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1141
- --form-color-colorpicker-pink-bg-default: light-dark(var(--modes-color-colorcode-pink-muted-light), var(--modes-color-colorcode-pink-muted-dark));
1142
1143
  --form-color-colorpicker-pink-bg-alt: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1144
+ --form-color-colorpicker-pink-bg-default: light-dark(var(--modes-color-colorcode-pink-muted-light), var(--modes-color-colorcode-pink-muted-dark));
1145
+ --form-color-colorpicker-pink-border: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1143
1146
  --form-color-colorpicker-pink-pattern: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1144
- --form-color-colorpicker-purple-border: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1145
- --form-color-colorpicker-purple-bg-default: light-dark(var(--modes-color-colorcode-purple-muted-light), var(--modes-color-colorcode-purple-muted-dark));
1146
1147
  --form-color-colorpicker-purple-bg-alt: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1148
+ --form-color-colorpicker-purple-bg-default: light-dark(var(--modes-color-colorcode-purple-muted-light), var(--modes-color-colorcode-purple-muted-dark));
1149
+ --form-color-colorpicker-purple-border: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1147
1150
  --form-color-colorpicker-purple-pattern: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1148
- --form-color-colorpicker-gray-border: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1149
- --form-color-colorpicker-gray-bg-default: light-dark(var(--modes-color-colorcode-gray-muted-light), var(--modes-color-colorcode-gray-muted-dark));
1150
1151
  --form-color-colorpicker-gray-bg-alt: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1152
+ --form-color-colorpicker-gray-bg-default: light-dark(var(--modes-color-colorcode-gray-muted-light), var(--modes-color-colorcode-gray-muted-dark));
1153
+ --form-color-colorpicker-gray-border: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1151
1154
  --form-color-colorpicker-gray-pattern: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1152
- --form-color-colorpicker-slate-border: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1153
- --form-color-colorpicker-slate-bg-default: light-dark(var(--modes-color-colorcode-slate-muted-light), var(--modes-color-colorcode-slate-muted-dark));
1154
1155
  --form-color-colorpicker-slate-bg-alt: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1156
+ --form-color-colorpicker-slate-bg-default: light-dark(var(--modes-color-colorcode-slate-muted-light), var(--modes-color-colorcode-slate-muted-dark));
1157
+ --form-color-colorpicker-slate-border: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1155
1158
  --form-color-colorpicker-slate-pattern: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1156
- --form-color-colorpicker-slate-label-default: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1157
1159
  --form-color-labelset-label-required: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
1158
1160
  --form-color-validation-border-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
1159
1161
  --form-color-validation-bar-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark)); /* error bar to left of inputs */
@@ -1193,11 +1195,6 @@
1193
1195
  --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
1194
1196
  --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
1195
1197
  --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
1196
- --form-space-colorpicker-x-m: var(--global-space-macro-m);
1197
- --form-space-colorpicker-xg-m: var(--global-space-macro-xs);
1198
- --form-space-colorpicker-y-m: var(--global-space-macro-m);
1199
- --form-space-colorpicker-yg-m: var(--global-space-macro-m);
1200
- --form-space-colorpicker-swatch-yg-m: calc(var(--global-space-macro-xxxs) / 2); /* space between swatch and swatch label */
1201
1198
  --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
1202
1199
  --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
1203
1200
  --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
@@ -1315,9 +1312,6 @@
1315
1312
  --form-size-checkbox-s: var(--global-size-macro-xxs); /* S checkboxes */
1316
1313
  --form-size-checkbox-m: var(--global-size-macro-xs); /* M checkboxes */
1317
1314
  --form-size-checkbox-l: var(--global-size-macro-s); /* L checkboxes */
1318
- --form-size-colorpicker-swatch: var(--global-size-macro-s); /* width and height of color picker swatch */
1319
- --form-size-colorpicker-swatchcontainer: calc(var(--global-size-macro-xxxl) + var(--global-size-micro-m)); /* width of swatch parent container */
1320
- --form-size-colorpicker-swatchselected: var(--global-size-macro-m)/2; /* selected swatch */
1321
1315
  --form-size-dropdown-subtle-s: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
1322
1316
  --form-size-dropdown-subtle-m: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
1323
1317
  --form-size-dropdown-subtle-l: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
package/css/frozenproduct/large/components/container.css CHANGED
@@ -9,10 +9,10 @@
9
9
  --container-radius-blockquote-bar: var(--global-radius-circle); /* radius for blockquote bar */
10
10
  --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
11
11
  --container-opacity-carousel-hidden: var(--modes-color-modifiers-input-disabled-fg); /* opacity applied to next and previous carousel slides */
12
- --container-color-ai-borderhorizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI dialog component */
13
- --container-color-ai-bordervertical: var(--modes-color-status-ai-default-vertical); /* left and right border for dialog and insight bubbles. */
12
+ --container-color-ai-dialog-borderhorizontal: var(--modes-color-generic-fg-ai-default); /* top border for AI dialog component */
14
13
  --container-color-ai-nudge-border-ai-horizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI nudge message component */
15
14
  --container-color-ai-nudge-border-ai-vertical: var(--modes-color-status-ai-default-vertical); /* left and right border for AI nudge message component */
15
+ --container-color-ai-tile-bordervertical: var(--modes-color-status-ai-default-vertical); /* left border for AI tiles and bubbles. */
16
16
  --container-color-calendar-label-default: var(--modes-color-generic-content-extreme); /* Accessible on calendar bg-default colors. */
17
17
  --container-color-calendar-blue-bg-default: var(--modes-color-colorcode-blue-muted);
18
18
  --container-color-calendar-blue-border-default: var(--modes-color-colorcode-blue-deep);
@@ -90,7 +90,7 @@
90
90
  --container-color-standard-dimmer: var(--modes-color-interactive-inactive-mask); /* dimmed mask for dialogs */
91
91
  --container-color-standard-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
92
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);
93
+ --container-color-standard-statusborder-bg-ai: var(--container-color-ai-tile-bordervertical);
94
94
  --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
95
95
  --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
96
96
  --container-boxshadow-card-drag: var(--global-boxshadow-interactive-drag); /* Card (drag state) */
@@ -289,7 +289,7 @@
289
289
  --container-space-nudge-yg-l: var(--global-space-micro-xxl); /* Gap between message elements */
290
290
  --container-space-nudge-header-xg-m: var(--global-space-macro-xs); /* gap between header and ai logo */
291
291
  --container-space-nudge-header-xg-l: var(--global-space-macro-xs); /* gap between header and ai logo */
292
- --container-borderwidth-a-igradient: var(--global-borderwidth-xl); /* AI gradient used on all containers such as dialog, chat bubbles etc */
292
+ --container-borderwidth-a-igradient: var(--global-borderwidth-xxl); /* AI gradient used on all containers such as dialog, chat bubbles etc */
293
293
  --container-borderwidth-dialog: var(--global-borderwidth-xs); /* Dialog */
294
294
  --container-borderwidth-divider: var(--global-borderwidth-xs); /* Divider */
295
295
  --container-borderwidth-drawer: var(--global-borderwidth-xs); /* Drawer */
package/css/frozenproduct/large/components/form.css CHANGED
@@ -32,27 +32,26 @@
32
32
  --form-color-colorpicker-orange-bg-default: var(--modes-color-colorcode-orange-muted);
33
33
  --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-deep);
34
34
  --form-color-colorpicker-orange-pattern: var(--modes-color-colorcode-orange-deep);
35
- --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-deep);
36
- --form-color-colorpicker-red-bg-default: var(--modes-color-colorcode-red-muted);
37
35
  --form-color-colorpicker-red-bg-alt: var(--modes-color-colorcode-red-deep);
36
+ --form-color-colorpicker-red-bg-default: var(--modes-color-colorcode-red-muted);
37
+ --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-deep);
38
38
  --form-color-colorpicker-red-pattern: var(--modes-color-colorcode-red-deep);
39
- --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-deep);
40
- --form-color-colorpicker-pink-bg-default: var(--modes-color-colorcode-pink-muted);
41
39
  --form-color-colorpicker-pink-bg-alt: var(--modes-color-colorcode-pink-deep);
40
+ --form-color-colorpicker-pink-bg-default: var(--modes-color-colorcode-pink-muted);
41
+ --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-deep);
42
42
  --form-color-colorpicker-pink-pattern: var(--modes-color-colorcode-pink-deep);
43
- --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-deep);
44
- --form-color-colorpicker-purple-bg-default: var(--modes-color-colorcode-purple-muted);
45
43
  --form-color-colorpicker-purple-bg-alt: var(--modes-color-colorcode-purple-deep);
44
+ --form-color-colorpicker-purple-bg-default: var(--modes-color-colorcode-purple-muted);
45
+ --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-deep);
46
46
  --form-color-colorpicker-purple-pattern: var(--modes-color-colorcode-purple-deep);
47
- --form-color-colorpicker-gray-border: var(--modes-color-colorcode-gray-deep);
48
- --form-color-colorpicker-gray-bg-default: var(--modes-color-colorcode-gray-muted);
49
47
  --form-color-colorpicker-gray-bg-alt: var(--modes-color-colorcode-gray-deep);
48
+ --form-color-colorpicker-gray-bg-default: var(--modes-color-colorcode-gray-muted);
49
+ --form-color-colorpicker-gray-border: var(--modes-color-colorcode-gray-deep);
50
50
  --form-color-colorpicker-gray-pattern: var(--modes-color-colorcode-gray-deep);
51
- --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-deep);
52
- --form-color-colorpicker-slate-bg-default: var(--modes-color-colorcode-slate-muted);
53
51
  --form-color-colorpicker-slate-bg-alt: var(--modes-color-colorcode-slate-deep);
52
+ --form-color-colorpicker-slate-bg-default: var(--modes-color-colorcode-slate-muted);
53
+ --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-deep);
54
54
  --form-color-colorpicker-slate-pattern: var(--modes-color-colorcode-slate-deep);
55
- --form-color-colorpicker-slate-label-default: var(--modes-color-colorcode-slate-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
56
55
  --form-color-labelset-label-required: var(--modes-color-interactive-danger-default);
57
56
  --form-color-validation-border-error: var(--modes-color-status-negative-default);
58
57
  --form-color-validation-bar-error: var(--modes-color-status-negative-default); /* error bar to left of inputs */
@@ -98,11 +97,6 @@
98
97
  --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
99
98
  --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
100
99
  --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
101
- --form-space-colorpicker-x-m: var(--global-space-macro-m);
102
- --form-space-colorpicker-xg-m: var(--global-space-macro-xs);
103
- --form-space-colorpicker-y-m: var(--global-space-macro-m);
104
- --form-space-colorpicker-yg-m: var(--global-space-macro-m);
105
- --form-space-colorpicker-swatch-yg-m: calc(var(--global-space-macro-xxxs) / 2); /* space between swatch and swatch label */
106
100
  --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
107
101
  --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
108
102
  --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
@@ -220,9 +214,6 @@
220
214
  --form-size-checkbox-s: var(--global-size-macro-xxs); /* S checkboxes */
221
215
  --form-size-checkbox-m: var(--global-size-macro-xs); /* M checkboxes */
222
216
  --form-size-checkbox-l: var(--global-size-macro-s); /* L checkboxes */
223
- --form-size-colorpicker-swatch: var(--global-size-macro-s); /* width and height of color picker swatch */
224
- --form-size-colorpicker-swatchcontainer: calc(var(--global-size-macro-xxxl) + var(--global-size-micro-m)); /* width of swatch parent container */
225
- --form-size-colorpicker-swatchselected: var(--global-size-macro-m)/2; /* selected swatch */
226
217
  --form-size-dropdown-subtle-s: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
227
218
  --form-size-dropdown-subtle-m: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
228
219
  --form-size-dropdown-subtle-l: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
package/css/frozenproduct/large/dark.css CHANGED
@@ -56,6 +56,7 @@
56
56
  --modes-color-generic-fg-soft: #4b4b4b;
57
57
  --modes-color-generic-fg-moderate: #777;
58
58
  --modes-color-generic-fg-frozen-soft: #4b4b4b;
59
+ --modes-color-generic-fg-ai-default: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment. */
59
60
  --modes-color-generic-backdrop-nought: #000000; /* used on full page backgrounds */
60
61
  --modes-color-generic-backdrop-faint: #181818; /* used on full page backgrounds as an alternative option */
61
62
  --modes-color-interactive-ai-active: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
package/css/frozenproduct/large/global.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --global-borderwidth-m: 3px; /* Focus */
11
11
  --global-borderwidth-l: 4px; /* Focus underline. Dividing lines. */
12
12
  --global-borderwidth-xl: 6px; /* Double Focus Border */
13
+ --global-borderwidth-xxl: 8px;
13
14
  --global-radius-scale: 1px; /* We can override this to locally change the size of radius in the future if required. */
14
15
  --global-radius-none: 0; /* Button groups (internal/adjacent corners), Card select group (internal/adjacent corners), File input (integrated base bar top corners). */
15
16
  --global-radius-circle: 999px; /* CIRCLE. Badge, Calendar date (today indicator and selected), Carousel selector dots, Loader bar, Portrait, Progress tracker, Radio button, Step flow (step indicators), Switch, */
package/css/frozenproduct/large/light.css CHANGED
@@ -56,6 +56,7 @@
56
56
  --modes-color-generic-fg-soft: #a6a6a6;
57
57
  --modes-color-generic-fg-moderate: #777;
58
58
  --modes-color-generic-fg-frozen-soft: #335B70; /* frozen progress tracker border */
59
+ --modes-color-generic-fg-ai-default: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment. */
59
60
  --modes-color-generic-backdrop-nought: #FFFFFF; /* used on full page backgrounds */
60
61
  --modes-color-generic-backdrop-faint: #f6f8f9; /* used on full page backgrounds as an alternative option */
61
62
  --modes-color-interactive-ai-active: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
package/css/frozenproduct/small/components/container.css CHANGED
@@ -9,10 +9,10 @@
9
9
  --container-radius-blockquote-bar: var(--global-radius-circle); /* radius for blockquote bar */
10
10
  --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
11
11
  --container-opacity-carousel-hidden: var(--modes-color-modifiers-input-disabled-fg); /* opacity applied to next and previous carousel slides */
12
- --container-color-ai-borderhorizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI dialog component */
13
- --container-color-ai-bordervertical: var(--modes-color-status-ai-default-vertical); /* left and right border for dialog and insight bubbles. */
12
+ --container-color-ai-dialog-borderhorizontal: var(--modes-color-generic-fg-ai-default); /* top border for AI dialog component */
14
13
  --container-color-ai-nudge-border-ai-horizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI nudge message component */
15
14
  --container-color-ai-nudge-border-ai-vertical: var(--modes-color-status-ai-default-vertical); /* left and right border for AI nudge message component */
15
+ --container-color-ai-tile-bordervertical: var(--modes-color-status-ai-default-vertical); /* left border for AI tiles and bubbles. */
16
16
  --container-color-calendar-label-default: var(--modes-color-generic-content-extreme); /* Accessible on calendar bg-default colors. */
17
17
  --container-color-calendar-blue-bg-default: var(--modes-color-colorcode-blue-muted);
18
18
  --container-color-calendar-blue-border-default: var(--modes-color-colorcode-blue-deep);
@@ -90,7 +90,7 @@
90
90
  --container-color-standard-dimmer: var(--modes-color-interactive-inactive-mask); /* dimmed mask for dialogs */
91
91
  --container-color-standard-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
92
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);
93
+ --container-color-standard-statusborder-bg-ai: var(--container-color-ai-tile-bordervertical);
94
94
  --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
95
95
  --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
96
96
  --container-boxshadow-card-drag: var(--global-boxshadow-interactive-drag); /* Card (drag state) */
@@ -289,7 +289,7 @@
289
289
  --container-space-nudge-yg-l: var(--global-space-micro-xxl); /* Gap between message elements */
290
290
  --container-space-nudge-header-xg-m: var(--global-space-macro-xs); /* gap between header and ai logo */
291
291
  --container-space-nudge-header-xg-l: var(--global-space-macro-xs); /* gap between header and ai logo */
292
- --container-borderwidth-a-igradient: var(--global-borderwidth-xl); /* AI gradient used on all containers such as dialog, chat bubbles etc */
292
+ --container-borderwidth-a-igradient: var(--global-borderwidth-xxl); /* AI gradient used on all containers such as dialog, chat bubbles etc */
293
293
  --container-borderwidth-dialog: var(--global-borderwidth-xs); /* Dialog */
294
294
  --container-borderwidth-divider: var(--global-borderwidth-xs); /* Divider */
295
295
  --container-borderwidth-drawer: var(--global-borderwidth-xs); /* Drawer */
package/css/frozenproduct/small/components/form.css CHANGED
@@ -32,27 +32,26 @@
32
32
  --form-color-colorpicker-orange-bg-default: var(--modes-color-colorcode-orange-muted);
33
33
  --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-deep);
34
34
  --form-color-colorpicker-orange-pattern: var(--modes-color-colorcode-orange-deep);
35
- --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-deep);
36
- --form-color-colorpicker-red-bg-default: var(--modes-color-colorcode-red-muted);
37
35
  --form-color-colorpicker-red-bg-alt: var(--modes-color-colorcode-red-deep);
36
+ --form-color-colorpicker-red-bg-default: var(--modes-color-colorcode-red-muted);
37
+ --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-deep);
38
38
  --form-color-colorpicker-red-pattern: var(--modes-color-colorcode-red-deep);
39
- --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-deep);
40
- --form-color-colorpicker-pink-bg-default: var(--modes-color-colorcode-pink-muted);
41
39
  --form-color-colorpicker-pink-bg-alt: var(--modes-color-colorcode-pink-deep);
40
+ --form-color-colorpicker-pink-bg-default: var(--modes-color-colorcode-pink-muted);
41
+ --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-deep);
42
42
  --form-color-colorpicker-pink-pattern: var(--modes-color-colorcode-pink-deep);
43
- --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-deep);
44
- --form-color-colorpicker-purple-bg-default: var(--modes-color-colorcode-purple-muted);
45
43
  --form-color-colorpicker-purple-bg-alt: var(--modes-color-colorcode-purple-deep);
44
+ --form-color-colorpicker-purple-bg-default: var(--modes-color-colorcode-purple-muted);
45
+ --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-deep);
46
46
  --form-color-colorpicker-purple-pattern: var(--modes-color-colorcode-purple-deep);
47
- --form-color-colorpicker-gray-border: var(--modes-color-colorcode-gray-deep);
48
- --form-color-colorpicker-gray-bg-default: var(--modes-color-colorcode-gray-muted);
49
47
  --form-color-colorpicker-gray-bg-alt: var(--modes-color-colorcode-gray-deep);
48
+ --form-color-colorpicker-gray-bg-default: var(--modes-color-colorcode-gray-muted);
49
+ --form-color-colorpicker-gray-border: var(--modes-color-colorcode-gray-deep);
50
50
  --form-color-colorpicker-gray-pattern: var(--modes-color-colorcode-gray-deep);
51
- --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-deep);
52
- --form-color-colorpicker-slate-bg-default: var(--modes-color-colorcode-slate-muted);
53
51
  --form-color-colorpicker-slate-bg-alt: var(--modes-color-colorcode-slate-deep);
52
+ --form-color-colorpicker-slate-bg-default: var(--modes-color-colorcode-slate-muted);
53
+ --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-deep);
54
54
  --form-color-colorpicker-slate-pattern: var(--modes-color-colorcode-slate-deep);
55
- --form-color-colorpicker-slate-label-default: var(--modes-color-colorcode-slate-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
56
55
  --form-color-labelset-label-required: var(--modes-color-interactive-danger-default);
57
56
  --form-color-validation-border-error: var(--modes-color-status-negative-default);
58
57
  --form-color-validation-bar-error: var(--modes-color-status-negative-default); /* error bar to left of inputs */
@@ -98,11 +97,6 @@
98
97
  --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
99
98
  --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
100
99
  --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
101
- --form-space-colorpicker-x-m: var(--global-space-macro-m);
102
- --form-space-colorpicker-xg-m: var(--global-space-macro-xs);
103
- --form-space-colorpicker-y-m: var(--global-space-macro-m);
104
- --form-space-colorpicker-yg-m: var(--global-space-macro-m);
105
- --form-space-colorpicker-swatch-yg-m: calc(var(--global-space-macro-xxxs) / 2); /* space between swatch and swatch label */
106
100
  --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
107
101
  --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
108
102
  --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
@@ -220,9 +214,6 @@
220
214
  --form-size-checkbox-s: var(--global-size-macro-xxs); /* S checkboxes */
221
215
  --form-size-checkbox-m: var(--global-size-macro-xs); /* M checkboxes */
222
216
  --form-size-checkbox-l: var(--global-size-macro-s); /* L checkboxes */
223
- --form-size-colorpicker-swatch: var(--global-size-macro-s); /* width and height of color picker swatch */
224
- --form-size-colorpicker-swatchcontainer: calc(var(--global-size-macro-xxxl) + var(--global-size-micro-m)); /* width of swatch parent container */
225
- --form-size-colorpicker-swatchselected: var(--global-size-macro-m)/2; /* selected swatch */
226
217
  --form-size-dropdown-subtle-s: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
227
218
  --form-size-dropdown-subtle-m: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
228
219
  --form-size-dropdown-subtle-l: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
package/css/frozenproduct/small/dark.css CHANGED
@@ -56,6 +56,7 @@
56
56
  --modes-color-generic-fg-soft: #4b4b4b;
57
57
  --modes-color-generic-fg-moderate: #777;
58
58
  --modes-color-generic-fg-frozen-soft: #4b4b4b;
59
+ --modes-color-generic-fg-ai-default: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment. */
59
60
  --modes-color-generic-backdrop-nought: #000000; /* used on full page backgrounds */
60
61
  --modes-color-generic-backdrop-faint: #181818; /* used on full page backgrounds as an alternative option */
61
62
  --modes-color-interactive-ai-active: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
package/css/frozenproduct/small/global.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --global-borderwidth-m: 3px; /* Focus */
11
11
  --global-borderwidth-l: 4px; /* Focus underline. Dividing lines. */
12
12
  --global-borderwidth-xl: 6px; /* Double Focus Border */
13
+ --global-borderwidth-xxl: 8px;
13
14
  --global-radius-scale: 1px; /* We can override this to locally change the size of radius in the future if required. */
14
15
  --global-radius-none: 0; /* Button groups (internal/adjacent corners), Card select group (internal/adjacent corners), File input (integrated base bar top corners). */
15
16
  --global-radius-circle: 999px; /* CIRCLE. Badge, Calendar date (today indicator and selected), Carousel selector dots, Loader bar, Portrait, Progress tracker, Radio button, Step flow (step indicators), Switch, */
package/css/frozenproduct/small/light.css CHANGED
@@ -56,6 +56,7 @@
56
56
  --modes-color-generic-fg-soft: #a6a6a6;
57
57
  --modes-color-generic-fg-moderate: #777;
58
58
  --modes-color-generic-fg-frozen-soft: #335B70; /* frozen progress tracker border */
59
+ --modes-color-generic-fg-ai-default: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment. */
59
60
  --modes-color-generic-backdrop-nought: #FFFFFF; /* used on full page backgrounds */
60
61
  --modes-color-generic-backdrop-faint: #f6f8f9; /* used on full page backgrounds as an alternative option */
61
62
  --modes-color-interactive-ai-active: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
package/css/marketing/all.css CHANGED
@@ -11,6 +11,7 @@
11
11
  --global-borderwidth-m: 3px; /* Focus */
12
12
  --global-borderwidth-l: 4px; /* Focus underline. Dividing lines. */
13
13
  --global-borderwidth-xl: 6px; /* Double Focus Border */
14
+ --global-borderwidth-xxl: 8px;
14
15
  --global-radius-scale: 1px; /* We can override this to locally change the size of radius in the future if required. */
15
16
  --global-radius-none: 0; /* Button groups (internal/adjacent corners), Card select group (internal/adjacent corners), File input (integrated base bar top corners). */
16
17
  --global-radius-circle: 999px; /* CIRCLE. Badge, Calendar date (today indicator and selected), Carousel selector dots, Loader bar, Portrait, Progress tracker, Radio button, Step flow (step indicators), Switch, */
@@ -198,6 +199,7 @@
198
199
  --modes-color-generic-fg-soft-light: #a6a6a6;
199
200
  --modes-color-generic-fg-moderate-light: #777;
200
201
  --modes-color-generic-fg-frozen-soft-light: #335B70; /* frozen progress tracker border */
202
+ --modes-color-generic-fg-ai-default-light: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment. */
201
203
  --modes-color-generic-backdrop-nought-light: #FFFFFF; /* used on full page backgrounds */
202
204
  --modes-color-generic-backdrop-faint-light: #f6f8f9; /* used on full page backgrounds as an alternative option */
203
205
  --modes-color-interactive-ai-active-light: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
@@ -395,6 +397,7 @@
395
397
  --modes-color-generic-fg-soft-dark: #4b4b4b;
396
398
  --modes-color-generic-fg-moderate-dark: #777;
397
399
  --modes-color-generic-fg-frozen-soft-dark: #4b4b4b;
400
+ --modes-color-generic-fg-ai-default-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment. */
398
401
  --modes-color-generic-backdrop-nought-dark: #000000; /* used on full page backgrounds */
399
402
  --modes-color-generic-backdrop-faint-dark: #181818; /* used on full page backgrounds as an alternative option */
400
403
  --modes-color-interactive-ai-active-dark: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
@@ -798,10 +801,10 @@
798
801
  --container-radius-blockquote-bar: var(--global-radius-circle); /* radius for blockquote bar */
799
802
  --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
800
803
  --container-opacity-carousel-hidden: light-dark(var(--modes-color-modifiers-input-disabled-fg-light), var(--modes-color-modifiers-input-disabled-fg-dark)); /* opacity applied to next and previous carousel slides */
801
- --container-color-ai-borderhorizontal: light-dark(var(--modes-color-status-ai-default-horizontal-light), var(--modes-color-status-ai-default-horizontal-dark)); /* top and bottom border for AI dialog component */
802
- --container-color-ai-bordervertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left and right border for dialog and insight bubbles. */
804
+ --container-color-ai-dialog-borderhorizontal: light-dark(var(--modes-color-generic-fg-ai-default-light), var(--modes-color-generic-fg-ai-default-dark)); /* top border for AI dialog component */
803
805
  --container-color-ai-nudge-border-ai-horizontal: light-dark(var(--modes-color-status-ai-default-horizontal-light), var(--modes-color-status-ai-default-horizontal-dark)); /* top and bottom border for AI nudge message component */
804
806
  --container-color-ai-nudge-border-ai-vertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left and right border for AI nudge message component */
807
+ --container-color-ai-tile-bordervertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left border for AI tiles and bubbles. */
805
808
  --container-color-calendar-label-default: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark)); /* Accessible on calendar bg-default colors. */
806
809
  --container-color-calendar-blue-bg-default: light-dark(var(--modes-color-colorcode-blue-muted-light), var(--modes-color-colorcode-blue-muted-dark));
807
810
  --container-color-calendar-blue-border-default: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
@@ -870,7 +873,7 @@
870
873
  --container-color-standard-dimmer: light-dark(var(--modes-color-interactive-inactive-mask-light), var(--modes-color-interactive-inactive-mask-dark)); /* dimmed mask for dialogs */
871
874
  --container-color-standard-text-alt: light-dark(var(--modes-color-generic-content-moderate-light), var(--modes-color-generic-content-moderate-dark)); /* for subheadings etc */
872
875
  --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);
876
+ --container-color-standard-statusborder-bg-ai: var(--container-color-ai-tile-bordervertical);
874
877
  --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
875
878
  --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
876
879
  --container-boxshadow-card-drag: var(--global-boxshadow-interactive-drag); /* Card (drag state) */
@@ -1069,7 +1072,7 @@
1069
1072
  --container-space-nudge-yg-l: var(--global-space-micro-xxl); /* Gap between message elements */
1070
1073
  --container-space-nudge-header-xg-m: var(--global-space-macro-xs); /* gap between header and ai logo */
1071
1074
  --container-space-nudge-header-xg-l: var(--global-space-macro-xs); /* gap between header and ai logo */
1072
- --container-borderwidth-a-igradient: var(--global-borderwidth-xl); /* AI gradient used on all containers such as dialog, chat bubbles etc */
1075
+ --container-borderwidth-a-igradient: var(--global-borderwidth-xxl); /* AI gradient used on all containers such as dialog, chat bubbles etc */
1073
1076
  --container-borderwidth-dialog: var(--global-borderwidth-xs); /* Dialog */
1074
1077
  --container-borderwidth-divider: var(--global-borderwidth-xs); /* Divider */
1075
1078
  --container-borderwidth-drawer: var(--global-borderwidth-xs); /* Drawer */
@@ -1133,27 +1136,26 @@
1133
1136
  --form-color-colorpicker-orange-bg-default: light-dark(var(--modes-color-colorcode-orange-muted-light), var(--modes-color-colorcode-orange-muted-dark));
1134
1137
  --form-color-colorpicker-orange-border: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1135
1138
  --form-color-colorpicker-orange-pattern: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1136
- --form-color-colorpicker-red-border: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1137
- --form-color-colorpicker-red-bg-default: light-dark(var(--modes-color-colorcode-red-muted-light), var(--modes-color-colorcode-red-muted-dark));
1138
1139
  --form-color-colorpicker-red-bg-alt: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1140
+ --form-color-colorpicker-red-bg-default: light-dark(var(--modes-color-colorcode-red-muted-light), var(--modes-color-colorcode-red-muted-dark));
1141
+ --form-color-colorpicker-red-border: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1139
1142
  --form-color-colorpicker-red-pattern: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1140
- --form-color-colorpicker-pink-border: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1141
- --form-color-colorpicker-pink-bg-default: light-dark(var(--modes-color-colorcode-pink-muted-light), var(--modes-color-colorcode-pink-muted-dark));
1142
1143
  --form-color-colorpicker-pink-bg-alt: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1144
+ --form-color-colorpicker-pink-bg-default: light-dark(var(--modes-color-colorcode-pink-muted-light), var(--modes-color-colorcode-pink-muted-dark));
1145
+ --form-color-colorpicker-pink-border: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1143
1146
  --form-color-colorpicker-pink-pattern: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1144
- --form-color-colorpicker-purple-border: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1145
- --form-color-colorpicker-purple-bg-default: light-dark(var(--modes-color-colorcode-purple-muted-light), var(--modes-color-colorcode-purple-muted-dark));
1146
1147
  --form-color-colorpicker-purple-bg-alt: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1148
+ --form-color-colorpicker-purple-bg-default: light-dark(var(--modes-color-colorcode-purple-muted-light), var(--modes-color-colorcode-purple-muted-dark));
1149
+ --form-color-colorpicker-purple-border: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1147
1150
  --form-color-colorpicker-purple-pattern: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1148
- --form-color-colorpicker-gray-border: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1149
- --form-color-colorpicker-gray-bg-default: light-dark(var(--modes-color-colorcode-gray-muted-light), var(--modes-color-colorcode-gray-muted-dark));
1150
1151
  --form-color-colorpicker-gray-bg-alt: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1152
+ --form-color-colorpicker-gray-bg-default: light-dark(var(--modes-color-colorcode-gray-muted-light), var(--modes-color-colorcode-gray-muted-dark));
1153
+ --form-color-colorpicker-gray-border: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1151
1154
  --form-color-colorpicker-gray-pattern: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1152
- --form-color-colorpicker-slate-border: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1153
- --form-color-colorpicker-slate-bg-default: light-dark(var(--modes-color-colorcode-slate-muted-light), var(--modes-color-colorcode-slate-muted-dark));
1154
1155
  --form-color-colorpicker-slate-bg-alt: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1156
+ --form-color-colorpicker-slate-bg-default: light-dark(var(--modes-color-colorcode-slate-muted-light), var(--modes-color-colorcode-slate-muted-dark));
1157
+ --form-color-colorpicker-slate-border: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1155
1158
  --form-color-colorpicker-slate-pattern: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1156
- --form-color-colorpicker-slate-label-default: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1157
1159
  --form-color-labelset-label-required: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
1158
1160
  --form-color-validation-border-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
1159
1161
  --form-color-validation-bar-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark)); /* error bar to left of inputs */
@@ -1193,11 +1195,6 @@
1193
1195
  --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
1194
1196
  --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
1195
1197
  --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
1196
- --form-space-colorpicker-x-m: var(--global-space-macro-m);
1197
- --form-space-colorpicker-xg-m: var(--global-space-macro-xs);
1198
- --form-space-colorpicker-y-m: var(--global-space-macro-m);
1199
- --form-space-colorpicker-yg-m: var(--global-space-macro-m);
1200
- --form-space-colorpicker-swatch-yg-m: calc(var(--global-space-macro-xxxs) / 2); /* space between swatch and swatch label */
1201
1198
  --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
1202
1199
  --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
1203
1200
  --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
@@ -1315,9 +1312,6 @@
1315
1312
  --form-size-checkbox-s: var(--global-size-macro-xxs); /* S checkboxes */
1316
1313
  --form-size-checkbox-m: var(--global-size-macro-xs); /* M checkboxes */
1317
1314
  --form-size-checkbox-l: var(--global-size-macro-s); /* L checkboxes */
1318
- --form-size-colorpicker-swatch: var(--global-size-macro-s); /* width and height of color picker swatch */
1319
- --form-size-colorpicker-swatchcontainer: calc(var(--global-size-macro-xxxl) + var(--global-size-micro-m)); /* width of swatch parent container */
1320
- --form-size-colorpicker-swatchselected: var(--global-size-macro-m)/2; /* selected swatch */
1321
1315
  --form-size-dropdown-subtle-s: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
1322
1316
  --form-size-dropdown-subtle-m: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
1323
1317
  --form-size-dropdown-subtle-l: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
package/css/marketing/large/components/container.css CHANGED
@@ -9,10 +9,10 @@
9
9
  --container-radius-blockquote-bar: var(--global-radius-circle); /* radius for blockquote bar */
10
10
  --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
11
11
  --container-opacity-carousel-hidden: var(--modes-color-modifiers-input-disabled-fg); /* opacity applied to next and previous carousel slides */
12
- --container-color-ai-borderhorizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI dialog component */
13
- --container-color-ai-bordervertical: var(--modes-color-status-ai-default-vertical); /* left and right border for dialog and insight bubbles. */
12
+ --container-color-ai-dialog-borderhorizontal: var(--modes-color-generic-fg-ai-default); /* top border for AI dialog component */
14
13
  --container-color-ai-nudge-border-ai-horizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI nudge message component */
15
14
  --container-color-ai-nudge-border-ai-vertical: var(--modes-color-status-ai-default-vertical); /* left and right border for AI nudge message component */
15
+ --container-color-ai-tile-bordervertical: var(--modes-color-status-ai-default-vertical); /* left border for AI tiles and bubbles. */
16
16
  --container-color-calendar-label-default: var(--modes-color-generic-content-extreme); /* Accessible on calendar bg-default colors. */
17
17
  --container-color-calendar-blue-bg-default: var(--modes-color-colorcode-blue-muted);
18
18
  --container-color-calendar-blue-border-default: var(--modes-color-colorcode-blue-deep);
@@ -90,7 +90,7 @@
90
90
  --container-color-standard-dimmer: var(--modes-color-interactive-inactive-mask); /* dimmed mask for dialogs */
91
91
  --container-color-standard-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
92
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);
93
+ --container-color-standard-statusborder-bg-ai: var(--container-color-ai-tile-bordervertical);
94
94
  --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
95
95
  --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
96
96
  --container-boxshadow-card-drag: var(--global-boxshadow-interactive-drag); /* Card (drag state) */
@@ -289,7 +289,7 @@
289
289
  --container-space-nudge-yg-l: var(--global-space-micro-xxl); /* Gap between message elements */
290
290
  --container-space-nudge-header-xg-m: var(--global-space-macro-xs); /* gap between header and ai logo */
291
291
  --container-space-nudge-header-xg-l: var(--global-space-macro-xs); /* gap between header and ai logo */
292
- --container-borderwidth-a-igradient: var(--global-borderwidth-xl); /* AI gradient used on all containers such as dialog, chat bubbles etc */
292
+ --container-borderwidth-a-igradient: var(--global-borderwidth-xxl); /* AI gradient used on all containers such as dialog, chat bubbles etc */
293
293
  --container-borderwidth-dialog: var(--global-borderwidth-xs); /* Dialog */
294
294
  --container-borderwidth-divider: var(--global-borderwidth-xs); /* Divider */
295
295
  --container-borderwidth-drawer: var(--global-borderwidth-xs); /* Drawer */
package/css/marketing/large/components/form.css CHANGED
@@ -32,27 +32,26 @@
32
32
  --form-color-colorpicker-orange-bg-default: var(--modes-color-colorcode-orange-muted);
33
33
  --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-deep);
34
34
  --form-color-colorpicker-orange-pattern: var(--modes-color-colorcode-orange-deep);
35
- --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-deep);
36
- --form-color-colorpicker-red-bg-default: var(--modes-color-colorcode-red-muted);
37
35
  --form-color-colorpicker-red-bg-alt: var(--modes-color-colorcode-red-deep);
36
+ --form-color-colorpicker-red-bg-default: var(--modes-color-colorcode-red-muted);
37
+ --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-deep);
38
38
  --form-color-colorpicker-red-pattern: var(--modes-color-colorcode-red-deep);
39
- --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-deep);
40
- --form-color-colorpicker-pink-bg-default: var(--modes-color-colorcode-pink-muted);
41
39
  --form-color-colorpicker-pink-bg-alt: var(--modes-color-colorcode-pink-deep);
40
+ --form-color-colorpicker-pink-bg-default: var(--modes-color-colorcode-pink-muted);
41
+ --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-deep);
42
42
  --form-color-colorpicker-pink-pattern: var(--modes-color-colorcode-pink-deep);
43
- --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-deep);
44
- --form-color-colorpicker-purple-bg-default: var(--modes-color-colorcode-purple-muted);
45
43
  --form-color-colorpicker-purple-bg-alt: var(--modes-color-colorcode-purple-deep);
44
+ --form-color-colorpicker-purple-bg-default: var(--modes-color-colorcode-purple-muted);
45
+ --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-deep);
46
46
  --form-color-colorpicker-purple-pattern: var(--modes-color-colorcode-purple-deep);
47
- --form-color-colorpicker-gray-border: var(--modes-color-colorcode-gray-deep);
48
- --form-color-colorpicker-gray-bg-default: var(--modes-color-colorcode-gray-muted);
49
47
  --form-color-colorpicker-gray-bg-alt: var(--modes-color-colorcode-gray-deep);
48
+ --form-color-colorpicker-gray-bg-default: var(--modes-color-colorcode-gray-muted);
49
+ --form-color-colorpicker-gray-border: var(--modes-color-colorcode-gray-deep);
50
50
  --form-color-colorpicker-gray-pattern: var(--modes-color-colorcode-gray-deep);
51
- --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-deep);
52
- --form-color-colorpicker-slate-bg-default: var(--modes-color-colorcode-slate-muted);
53
51
  --form-color-colorpicker-slate-bg-alt: var(--modes-color-colorcode-slate-deep);
52
+ --form-color-colorpicker-slate-bg-default: var(--modes-color-colorcode-slate-muted);
53
+ --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-deep);
54
54
  --form-color-colorpicker-slate-pattern: var(--modes-color-colorcode-slate-deep);
55
- --form-color-colorpicker-slate-label-default: var(--modes-color-colorcode-slate-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
56
55
  --form-color-labelset-label-required: var(--modes-color-interactive-danger-default);
57
56
  --form-color-validation-border-error: var(--modes-color-status-negative-default);
58
57
  --form-color-validation-bar-error: var(--modes-color-status-negative-default); /* error bar to left of inputs */
@@ -98,11 +97,6 @@
98
97
  --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
99
98
  --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
100
99
  --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
101
- --form-space-colorpicker-x-m: var(--global-space-macro-m);
102
- --form-space-colorpicker-xg-m: var(--global-space-macro-xs);
103
- --form-space-colorpicker-y-m: var(--global-space-macro-m);
104
- --form-space-colorpicker-yg-m: var(--global-space-macro-m);
105
- --form-space-colorpicker-swatch-yg-m: calc(var(--global-space-macro-xxxs) / 2); /* space between swatch and swatch label */
106
100
  --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
107
101
  --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
108
102
  --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
@@ -220,9 +214,6 @@
220
214
  --form-size-checkbox-s: var(--global-size-macro-xxs); /* S checkboxes */
221
215
  --form-size-checkbox-m: var(--global-size-macro-xs); /* M checkboxes */
222
216
  --form-size-checkbox-l: var(--global-size-macro-s); /* L checkboxes */
223
- --form-size-colorpicker-swatch: var(--global-size-macro-s); /* width and height of color picker swatch */
224
- --form-size-colorpicker-swatchcontainer: calc(var(--global-size-macro-xxxl) + var(--global-size-micro-m)); /* width of swatch parent container */
225
- --form-size-colorpicker-swatchselected: var(--global-size-macro-m)/2; /* selected swatch */
226
217
  --form-size-dropdown-subtle-s: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
227
218
  --form-size-dropdown-subtle-m: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
228
219
  --form-size-dropdown-subtle-l: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
package/css/marketing/large/dark.css CHANGED
@@ -56,6 +56,7 @@
56
56
  --modes-color-generic-fg-soft: #4b4b4b;
57
57
  --modes-color-generic-fg-moderate: #777;
58
58
  --modes-color-generic-fg-frozen-soft: #4b4b4b;
59
+ --modes-color-generic-fg-ai-default: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment. */
59
60
  --modes-color-generic-backdrop-nought: #000000; /* used on full page backgrounds */
60
61
  --modes-color-generic-backdrop-faint: #181818; /* used on full page backgrounds as an alternative option */
61
62
  --modes-color-interactive-ai-active: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
package/css/marketing/large/global.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --global-borderwidth-m: 3px; /* Focus */
11
11
  --global-borderwidth-l: 4px; /* Focus underline. Dividing lines. */
12
12
  --global-borderwidth-xl: 6px; /* Double Focus Border */
13
+ --global-borderwidth-xxl: 8px;
13
14
  --global-radius-scale: 1px; /* We can override this to locally change the size of radius in the future if required. */
14
15
  --global-radius-none: 0; /* Button groups (internal/adjacent corners), Card select group (internal/adjacent corners), File input (integrated base bar top corners). */
15
16
  --global-radius-circle: 999px; /* CIRCLE. Badge, Calendar date (today indicator and selected), Carousel selector dots, Loader bar, Portrait, Progress tracker, Radio button, Step flow (step indicators), Switch, */