@sage/design-tokens 11.0.0 → 11.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (357) hide show
  1. package/css/frozenproduct/all.css +50 -74
  2. package/css/frozenproduct/large/components/container.css +0 -32
  3. package/css/frozenproduct/large/components/dataviz.css +48 -0
  4. package/css/frozenproduct/large/components/form.css +6 -42
  5. package/css/frozenproduct/small/components/container.css +0 -32
  6. package/css/frozenproduct/small/components/dataviz.css +48 -0
  7. package/css/frozenproduct/small/components/form.css +6 -42
  8. package/css/marketing/all.css +50 -74
  9. package/css/marketing/large/components/container.css +0 -32
  10. package/css/marketing/large/components/dataviz.css +48 -0
  11. package/css/marketing/large/components/form.css +6 -42
  12. package/css/marketing/small/components/container.css +0 -32
  13. package/css/marketing/small/components/dataviz.css +48 -0
  14. package/css/marketing/small/components/form.css +6 -42
  15. package/css/product/all.css +50 -74
  16. package/css/product/large/components/container.css +0 -32
  17. package/css/product/large/components/dataviz.css +48 -0
  18. package/css/product/large/components/form.css +6 -42
  19. package/css/product/small/components/container.css +0 -32
  20. package/css/product/small/components/dataviz.css +48 -0
  21. package/css/product/small/components/form.css +6 -42
  22. package/ios/frozenproduct/large/dark/components/container.h +0 -32
  23. package/ios/frozenproduct/large/dark/components/dataviz.h +53 -0
  24. package/ios/frozenproduct/large/dark/components/form.h +6 -42
  25. package/ios/frozenproduct/large/light/components/container.h +0 -32
  26. package/ios/frozenproduct/large/light/components/dataviz.h +53 -0
  27. package/ios/frozenproduct/large/light/components/form.h +6 -42
  28. package/ios/frozenproduct/small/dark/components/container.h +0 -32
  29. package/ios/frozenproduct/small/dark/components/dataviz.h +53 -0
  30. package/ios/frozenproduct/small/dark/components/form.h +6 -42
  31. package/ios/frozenproduct/small/light/components/container.h +0 -32
  32. package/ios/frozenproduct/small/light/components/dataviz.h +53 -0
  33. package/ios/frozenproduct/small/light/components/form.h +6 -42
  34. package/ios/marketing/large/dark/components/container.h +0 -32
  35. package/ios/marketing/large/dark/components/dataviz.h +53 -0
  36. package/ios/marketing/large/dark/components/form.h +6 -42
  37. package/ios/marketing/large/light/components/container.h +0 -32
  38. package/ios/marketing/large/light/components/dataviz.h +53 -0
  39. package/ios/marketing/large/light/components/form.h +6 -42
  40. package/ios/marketing/small/dark/components/container.h +0 -32
  41. package/ios/marketing/small/dark/components/dataviz.h +53 -0
  42. package/ios/marketing/small/dark/components/form.h +6 -42
  43. package/ios/marketing/small/light/components/container.h +0 -32
  44. package/ios/marketing/small/light/components/dataviz.h +53 -0
  45. package/ios/marketing/small/light/components/form.h +6 -42
  46. package/ios/product/large/dark/components/container.h +0 -32
  47. package/ios/product/large/dark/components/dataviz.h +53 -0
  48. package/ios/product/large/dark/components/form.h +6 -42
  49. package/ios/product/large/light/components/container.h +0 -32
  50. package/ios/product/large/light/components/dataviz.h +53 -0
  51. package/ios/product/large/light/components/form.h +6 -42
  52. package/ios/product/small/dark/components/container.h +0 -32
  53. package/ios/product/small/dark/components/dataviz.h +53 -0
  54. package/ios/product/small/dark/components/form.h +6 -42
  55. package/ios/product/small/light/components/container.h +0 -32
  56. package/ios/product/small/light/components/dataviz.h +53 -0
  57. package/ios/product/small/light/components/form.h +6 -42
  58. package/js/common/frozenproduct/large/dark/components/container.d.ts +0 -54
  59. package/js/common/frozenproduct/large/dark/components/container.js +0 -454
  60. package/js/common/frozenproduct/large/dark/components/dataviz.d.ts +90 -0
  61. package/js/common/frozenproduct/large/dark/components/dataviz.js +586 -0
  62. package/js/common/frozenproduct/large/dark/components/form.d.ts +12 -64
  63. package/js/common/frozenproduct/large/dark/components/form.js +120 -572
  64. package/js/common/frozenproduct/large/light/components/container.d.ts +0 -54
  65. package/js/common/frozenproduct/large/light/components/container.js +0 -454
  66. package/js/common/frozenproduct/large/light/components/dataviz.d.ts +90 -0
  67. package/js/common/frozenproduct/large/light/components/dataviz.js +586 -0
  68. package/js/common/frozenproduct/large/light/components/form.d.ts +12 -64
  69. package/js/common/frozenproduct/large/light/components/form.js +120 -572
  70. package/js/common/frozenproduct/small/dark/components/container.d.ts +0 -54
  71. package/js/common/frozenproduct/small/dark/components/container.js +0 -454
  72. package/js/common/frozenproduct/small/dark/components/dataviz.d.ts +90 -0
  73. package/js/common/frozenproduct/small/dark/components/dataviz.js +586 -0
  74. package/js/common/frozenproduct/small/dark/components/form.d.ts +12 -64
  75. package/js/common/frozenproduct/small/dark/components/form.js +120 -572
  76. package/js/common/frozenproduct/small/light/components/container.d.ts +0 -54
  77. package/js/common/frozenproduct/small/light/components/container.js +0 -454
  78. package/js/common/frozenproduct/small/light/components/dataviz.d.ts +90 -0
  79. package/js/common/frozenproduct/small/light/components/dataviz.js +586 -0
  80. package/js/common/frozenproduct/small/light/components/form.d.ts +12 -64
  81. package/js/common/frozenproduct/small/light/components/form.js +120 -572
  82. package/js/common/marketing/large/dark/components/container.d.ts +0 -54
  83. package/js/common/marketing/large/dark/components/container.js +0 -454
  84. package/js/common/marketing/large/dark/components/dataviz.d.ts +90 -0
  85. package/js/common/marketing/large/dark/components/dataviz.js +586 -0
  86. package/js/common/marketing/large/dark/components/form.d.ts +12 -64
  87. package/js/common/marketing/large/dark/components/form.js +120 -572
  88. package/js/common/marketing/large/light/components/container.d.ts +0 -54
  89. package/js/common/marketing/large/light/components/container.js +0 -454
  90. package/js/common/marketing/large/light/components/dataviz.d.ts +90 -0
  91. package/js/common/marketing/large/light/components/dataviz.js +586 -0
  92. package/js/common/marketing/large/light/components/form.d.ts +12 -64
  93. package/js/common/marketing/large/light/components/form.js +120 -572
  94. package/js/common/marketing/small/dark/components/container.d.ts +0 -54
  95. package/js/common/marketing/small/dark/components/container.js +0 -454
  96. package/js/common/marketing/small/dark/components/dataviz.d.ts +90 -0
  97. package/js/common/marketing/small/dark/components/dataviz.js +586 -0
  98. package/js/common/marketing/small/dark/components/form.d.ts +12 -64
  99. package/js/common/marketing/small/dark/components/form.js +120 -572
  100. package/js/common/marketing/small/light/components/container.d.ts +0 -54
  101. package/js/common/marketing/small/light/components/container.js +0 -454
  102. package/js/common/marketing/small/light/components/dataviz.d.ts +90 -0
  103. package/js/common/marketing/small/light/components/dataviz.js +586 -0
  104. package/js/common/marketing/small/light/components/form.d.ts +12 -64
  105. package/js/common/marketing/small/light/components/form.js +120 -572
  106. package/js/common/product/large/dark/components/container.d.ts +0 -54
  107. package/js/common/product/large/dark/components/container.js +0 -454
  108. package/js/common/product/large/dark/components/dataviz.d.ts +90 -0
  109. package/js/common/product/large/dark/components/dataviz.js +586 -0
  110. package/js/common/product/large/dark/components/form.d.ts +12 -64
  111. package/js/common/product/large/dark/components/form.js +120 -572
  112. package/js/common/product/large/light/components/container.d.ts +0 -54
  113. package/js/common/product/large/light/components/container.js +0 -454
  114. package/js/common/product/large/light/components/dataviz.d.ts +90 -0
  115. package/js/common/product/large/light/components/dataviz.js +586 -0
  116. package/js/common/product/large/light/components/form.d.ts +12 -64
  117. package/js/common/product/large/light/components/form.js +120 -572
  118. package/js/common/product/small/dark/components/container.d.ts +0 -54
  119. package/js/common/product/small/dark/components/container.js +0 -454
  120. package/js/common/product/small/dark/components/dataviz.d.ts +90 -0
  121. package/js/common/product/small/dark/components/dataviz.js +586 -0
  122. package/js/common/product/small/dark/components/form.d.ts +12 -64
  123. package/js/common/product/small/dark/components/form.js +120 -572
  124. package/js/common/product/small/light/components/container.d.ts +0 -54
  125. package/js/common/product/small/light/components/container.js +0 -454
  126. package/js/common/product/small/light/components/dataviz.d.ts +90 -0
  127. package/js/common/product/small/light/components/dataviz.js +586 -0
  128. package/js/common/product/small/light/components/form.d.ts +12 -64
  129. package/js/common/product/small/light/components/form.js +120 -572
  130. package/js/es6/frozenproduct/large/dark/components/container.d.ts +0 -32
  131. package/js/es6/frozenproduct/large/dark/components/container.js +0 -32
  132. package/js/es6/frozenproduct/large/dark/components/dataviz.d.ts +50 -0
  133. package/js/es6/frozenproduct/large/dark/components/dataviz.js +50 -0
  134. package/js/es6/frozenproduct/large/dark/components/form.d.ts +6 -42
  135. package/js/es6/frozenproduct/large/dark/components/form.js +6 -42
  136. package/js/es6/frozenproduct/large/light/components/container.d.ts +0 -32
  137. package/js/es6/frozenproduct/large/light/components/container.js +0 -32
  138. package/js/es6/frozenproduct/large/light/components/dataviz.d.ts +50 -0
  139. package/js/es6/frozenproduct/large/light/components/dataviz.js +50 -0
  140. package/js/es6/frozenproduct/large/light/components/form.d.ts +6 -42
  141. package/js/es6/frozenproduct/large/light/components/form.js +6 -42
  142. package/js/es6/frozenproduct/small/dark/components/container.d.ts +0 -32
  143. package/js/es6/frozenproduct/small/dark/components/container.js +0 -32
  144. package/js/es6/frozenproduct/small/dark/components/dataviz.d.ts +50 -0
  145. package/js/es6/frozenproduct/small/dark/components/dataviz.js +50 -0
  146. package/js/es6/frozenproduct/small/dark/components/form.d.ts +6 -42
  147. package/js/es6/frozenproduct/small/dark/components/form.js +6 -42
  148. package/js/es6/frozenproduct/small/light/components/container.d.ts +0 -32
  149. package/js/es6/frozenproduct/small/light/components/container.js +0 -32
  150. package/js/es6/frozenproduct/small/light/components/dataviz.d.ts +50 -0
  151. package/js/es6/frozenproduct/small/light/components/dataviz.js +50 -0
  152. package/js/es6/frozenproduct/small/light/components/form.d.ts +6 -42
  153. package/js/es6/frozenproduct/small/light/components/form.js +6 -42
  154. package/js/es6/marketing/large/dark/components/container.d.ts +0 -32
  155. package/js/es6/marketing/large/dark/components/container.js +0 -32
  156. package/js/es6/marketing/large/dark/components/dataviz.d.ts +50 -0
  157. package/js/es6/marketing/large/dark/components/dataviz.js +50 -0
  158. package/js/es6/marketing/large/dark/components/form.d.ts +6 -42
  159. package/js/es6/marketing/large/dark/components/form.js +6 -42
  160. package/js/es6/marketing/large/light/components/container.d.ts +0 -32
  161. package/js/es6/marketing/large/light/components/container.js +0 -32
  162. package/js/es6/marketing/large/light/components/dataviz.d.ts +50 -0
  163. package/js/es6/marketing/large/light/components/dataviz.js +50 -0
  164. package/js/es6/marketing/large/light/components/form.d.ts +6 -42
  165. package/js/es6/marketing/large/light/components/form.js +6 -42
  166. package/js/es6/marketing/small/dark/components/container.d.ts +0 -32
  167. package/js/es6/marketing/small/dark/components/container.js +0 -32
  168. package/js/es6/marketing/small/dark/components/dataviz.d.ts +50 -0
  169. package/js/es6/marketing/small/dark/components/dataviz.js +50 -0
  170. package/js/es6/marketing/small/dark/components/form.d.ts +6 -42
  171. package/js/es6/marketing/small/dark/components/form.js +6 -42
  172. package/js/es6/marketing/small/light/components/container.d.ts +0 -32
  173. package/js/es6/marketing/small/light/components/container.js +0 -32
  174. package/js/es6/marketing/small/light/components/dataviz.d.ts +50 -0
  175. package/js/es6/marketing/small/light/components/dataviz.js +50 -0
  176. package/js/es6/marketing/small/light/components/form.d.ts +6 -42
  177. package/js/es6/marketing/small/light/components/form.js +6 -42
  178. package/js/es6/product/large/dark/components/container.d.ts +0 -32
  179. package/js/es6/product/large/dark/components/container.js +0 -32
  180. package/js/es6/product/large/dark/components/dataviz.d.ts +50 -0
  181. package/js/es6/product/large/dark/components/dataviz.js +50 -0
  182. package/js/es6/product/large/dark/components/form.d.ts +6 -42
  183. package/js/es6/product/large/dark/components/form.js +6 -42
  184. package/js/es6/product/large/light/components/container.d.ts +0 -32
  185. package/js/es6/product/large/light/components/container.js +0 -32
  186. package/js/es6/product/large/light/components/dataviz.d.ts +50 -0
  187. package/js/es6/product/large/light/components/dataviz.js +50 -0
  188. package/js/es6/product/large/light/components/form.d.ts +6 -42
  189. package/js/es6/product/large/light/components/form.js +6 -42
  190. package/js/es6/product/small/dark/components/container.d.ts +0 -32
  191. package/js/es6/product/small/dark/components/container.js +0 -32
  192. package/js/es6/product/small/dark/components/dataviz.d.ts +50 -0
  193. package/js/es6/product/small/dark/components/dataviz.js +50 -0
  194. package/js/es6/product/small/dark/components/form.d.ts +6 -42
  195. package/js/es6/product/small/dark/components/form.js +6 -42
  196. package/js/es6/product/small/light/components/container.d.ts +0 -32
  197. package/js/es6/product/small/light/components/container.js +0 -32
  198. package/js/es6/product/small/light/components/dataviz.d.ts +50 -0
  199. package/js/es6/product/small/light/components/dataviz.js +50 -0
  200. package/js/es6/product/small/light/components/form.d.ts +6 -42
  201. package/js/es6/product/small/light/components/form.js +6 -42
  202. package/js/umd/frozenproduct/large/dark/components/container.js +0 -496
  203. package/js/umd/frozenproduct/large/dark/components/dataviz.js +598 -0
  204. package/js/umd/frozenproduct/large/dark/components/form.js +120 -572
  205. package/js/umd/frozenproduct/large/light/components/container.js +0 -496
  206. package/js/umd/frozenproduct/large/light/components/dataviz.js +598 -0
  207. package/js/umd/frozenproduct/large/light/components/form.js +120 -572
  208. package/js/umd/frozenproduct/small/dark/components/container.js +0 -496
  209. package/js/umd/frozenproduct/small/dark/components/dataviz.js +598 -0
  210. package/js/umd/frozenproduct/small/dark/components/form.js +120 -572
  211. package/js/umd/frozenproduct/small/light/components/container.js +0 -496
  212. package/js/umd/frozenproduct/small/light/components/dataviz.js +598 -0
  213. package/js/umd/frozenproduct/small/light/components/form.js +120 -572
  214. package/js/umd/marketing/large/dark/components/container.js +0 -496
  215. package/js/umd/marketing/large/dark/components/dataviz.js +598 -0
  216. package/js/umd/marketing/large/dark/components/form.js +120 -572
  217. package/js/umd/marketing/large/light/components/container.js +0 -496
  218. package/js/umd/marketing/large/light/components/dataviz.js +598 -0
  219. package/js/umd/marketing/large/light/components/form.js +120 -572
  220. package/js/umd/marketing/small/dark/components/container.js +0 -496
  221. package/js/umd/marketing/small/dark/components/dataviz.js +598 -0
  222. package/js/umd/marketing/small/dark/components/form.js +120 -572
  223. package/js/umd/marketing/small/light/components/container.js +0 -496
  224. package/js/umd/marketing/small/light/components/dataviz.js +598 -0
  225. package/js/umd/marketing/small/light/components/form.js +120 -572
  226. package/js/umd/product/large/dark/components/container.js +0 -496
  227. package/js/umd/product/large/dark/components/dataviz.js +598 -0
  228. package/js/umd/product/large/dark/components/form.js +120 -572
  229. package/js/umd/product/large/light/components/container.js +0 -496
  230. package/js/umd/product/large/light/components/dataviz.js +598 -0
  231. package/js/umd/product/large/light/components/form.js +120 -572
  232. package/js/umd/product/small/dark/components/container.js +0 -496
  233. package/js/umd/product/small/dark/components/dataviz.js +598 -0
  234. package/js/umd/product/small/dark/components/form.js +120 -572
  235. package/js/umd/product/small/light/components/container.js +0 -496
  236. package/js/umd/product/small/light/components/dataviz.js +598 -0
  237. package/js/umd/product/small/light/components/form.js +120 -572
  238. package/json/flat/frozenproduct/large/dark/components/container.json +0 -32
  239. package/json/flat/frozenproduct/large/dark/components/dataviz.json +44 -0
  240. package/json/flat/frozenproduct/large/dark/components/form.json +6 -42
  241. package/json/flat/frozenproduct/large/light/components/container.json +0 -32
  242. package/json/flat/frozenproduct/large/light/components/dataviz.json +44 -0
  243. package/json/flat/frozenproduct/large/light/components/form.json +6 -42
  244. package/json/flat/frozenproduct/small/dark/components/container.json +0 -32
  245. package/json/flat/frozenproduct/small/dark/components/dataviz.json +44 -0
  246. package/json/flat/frozenproduct/small/dark/components/form.json +6 -42
  247. package/json/flat/frozenproduct/small/light/components/container.json +0 -32
  248. package/json/flat/frozenproduct/small/light/components/dataviz.json +44 -0
  249. package/json/flat/frozenproduct/small/light/components/form.json +6 -42
  250. package/json/flat/marketing/large/dark/components/container.json +0 -32
  251. package/json/flat/marketing/large/dark/components/dataviz.json +44 -0
  252. package/json/flat/marketing/large/dark/components/form.json +6 -42
  253. package/json/flat/marketing/large/light/components/container.json +0 -32
  254. package/json/flat/marketing/large/light/components/dataviz.json +44 -0
  255. package/json/flat/marketing/large/light/components/form.json +6 -42
  256. package/json/flat/marketing/small/dark/components/container.json +0 -32
  257. package/json/flat/marketing/small/dark/components/dataviz.json +44 -0
  258. package/json/flat/marketing/small/dark/components/form.json +6 -42
  259. package/json/flat/marketing/small/light/components/container.json +0 -32
  260. package/json/flat/marketing/small/light/components/dataviz.json +44 -0
  261. package/json/flat/marketing/small/light/components/form.json +6 -42
  262. package/json/flat/product/large/dark/components/container.json +0 -32
  263. package/json/flat/product/large/dark/components/dataviz.json +44 -0
  264. package/json/flat/product/large/dark/components/form.json +6 -42
  265. package/json/flat/product/large/light/components/container.json +0 -32
  266. package/json/flat/product/large/light/components/dataviz.json +44 -0
  267. package/json/flat/product/large/light/components/form.json +6 -42
  268. package/json/flat/product/small/dark/components/container.json +0 -32
  269. package/json/flat/product/small/dark/components/dataviz.json +44 -0
  270. package/json/flat/product/small/dark/components/form.json +6 -42
  271. package/json/flat/product/small/light/components/container.json +0 -32
  272. package/json/flat/product/small/light/components/dataviz.json +44 -0
  273. package/json/flat/product/small/light/components/form.json +6 -42
  274. package/json/nested/frozenproduct/large/dark/components/container.json +0 -54
  275. package/json/nested/frozenproduct/large/dark/components/dataviz.json +70 -0
  276. package/json/nested/frozenproduct/large/dark/components/form.json +12 -64
  277. package/json/nested/frozenproduct/large/light/components/container.json +0 -54
  278. package/json/nested/frozenproduct/large/light/components/dataviz.json +70 -0
  279. package/json/nested/frozenproduct/large/light/components/form.json +12 -64
  280. package/json/nested/frozenproduct/small/dark/components/container.json +0 -54
  281. package/json/nested/frozenproduct/small/dark/components/dataviz.json +70 -0
  282. package/json/nested/frozenproduct/small/dark/components/form.json +12 -64
  283. package/json/nested/frozenproduct/small/light/components/container.json +0 -54
  284. package/json/nested/frozenproduct/small/light/components/dataviz.json +70 -0
  285. package/json/nested/frozenproduct/small/light/components/form.json +12 -64
  286. package/json/nested/marketing/large/dark/components/container.json +0 -54
  287. package/json/nested/marketing/large/dark/components/dataviz.json +70 -0
  288. package/json/nested/marketing/large/dark/components/form.json +12 -64
  289. package/json/nested/marketing/large/light/components/container.json +0 -54
  290. package/json/nested/marketing/large/light/components/dataviz.json +70 -0
  291. package/json/nested/marketing/large/light/components/form.json +12 -64
  292. package/json/nested/marketing/small/dark/components/container.json +0 -54
  293. package/json/nested/marketing/small/dark/components/dataviz.json +70 -0
  294. package/json/nested/marketing/small/dark/components/form.json +12 -64
  295. package/json/nested/marketing/small/light/components/container.json +0 -54
  296. package/json/nested/marketing/small/light/components/dataviz.json +70 -0
  297. package/json/nested/marketing/small/light/components/form.json +12 -64
  298. package/json/nested/product/large/dark/components/container.json +0 -54
  299. package/json/nested/product/large/dark/components/dataviz.json +70 -0
  300. package/json/nested/product/large/dark/components/form.json +12 -64
  301. package/json/nested/product/large/light/components/container.json +0 -54
  302. package/json/nested/product/large/light/components/dataviz.json +70 -0
  303. package/json/nested/product/large/light/components/form.json +12 -64
  304. package/json/nested/product/small/dark/components/container.json +0 -54
  305. package/json/nested/product/small/dark/components/dataviz.json +70 -0
  306. package/json/nested/product/small/dark/components/form.json +12 -64
  307. package/json/nested/product/small/light/components/container.json +0 -54
  308. package/json/nested/product/small/light/components/dataviz.json +70 -0
  309. package/json/nested/product/small/light/components/form.json +12 -64
  310. package/package.json +1 -1
  311. package/sage-design-tokens-11.1.0.tgz +0 -0
  312. package/scss/frozenproduct/large/components/container.scss +0 -32
  313. package/scss/frozenproduct/large/components/dataviz.scss +49 -0
  314. package/scss/frozenproduct/large/components/form.scss +6 -42
  315. package/scss/frozenproduct/small/components/container.scss +0 -32
  316. package/scss/frozenproduct/small/components/dataviz.scss +49 -0
  317. package/scss/frozenproduct/small/components/form.scss +6 -42
  318. package/scss/marketing/large/components/container.scss +0 -32
  319. package/scss/marketing/large/components/dataviz.scss +49 -0
  320. package/scss/marketing/large/components/form.scss +6 -42
  321. package/scss/marketing/small/components/button.scss +23 -23
  322. package/scss/marketing/small/components/container.scss +9 -41
  323. package/scss/marketing/small/components/dataviz.scss +49 -0
  324. package/scss/marketing/small/components/form.scss +13 -49
  325. package/scss/marketing/small/components/link.scss +2 -2
  326. package/scss/marketing/small/components/nav.scss +3 -3
  327. package/scss/marketing/small/components/page.scss +1 -1
  328. package/scss/marketing/small/components/popover.scss +2 -2
  329. package/scss/marketing/small/components/progress.scss +6 -6
  330. package/scss/marketing/small/components/status.scss +3 -3
  331. package/scss/marketing/small/components/tab.scss +7 -7
  332. package/scss/marketing/small/components/table.scss +10 -10
  333. package/scss/product/large/components/button.scss +23 -23
  334. package/scss/product/large/components/container.scss +9 -41
  335. package/scss/product/large/components/dataviz.scss +49 -0
  336. package/scss/product/large/components/form.scss +13 -49
  337. package/scss/product/large/components/link.scss +2 -2
  338. package/scss/product/large/components/nav.scss +3 -3
  339. package/scss/product/large/components/page.scss +1 -1
  340. package/scss/product/large/components/popover.scss +2 -2
  341. package/scss/product/large/components/progress.scss +6 -6
  342. package/scss/product/large/components/status.scss +3 -3
  343. package/scss/product/large/components/tab.scss +7 -7
  344. package/scss/product/large/components/table.scss +10 -10
  345. package/scss/product/small/components/button.scss +23 -23
  346. package/scss/product/small/components/container.scss +9 -41
  347. package/scss/product/small/components/dataviz.scss +49 -0
  348. package/scss/product/small/components/form.scss +13 -49
  349. package/scss/product/small/components/link.scss +2 -2
  350. package/scss/product/small/components/nav.scss +3 -3
  351. package/scss/product/small/components/page.scss +1 -1
  352. package/scss/product/small/components/popover.scss +2 -2
  353. package/scss/product/small/components/progress.scss +6 -6
  354. package/scss/product/small/components/status.scss +3 -3
  355. package/scss/product/small/components/tab.scss +7 -7
  356. package/scss/product/small/components/table.scss +10 -10
  357. package/sage-design-tokens-11.0.0.tgz +0 -0
package/css/frozenproduct/all.css CHANGED
@@ -805,37 +805,6 @@
805
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 */
806
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
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. */
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. */
809
- --container-color-calendar-blue-bg-default: light-dark(var(--modes-color-colorcode-blue-muted-light), var(--modes-color-colorcode-blue-muted-dark));
810
- --container-color-calendar-blue-border-default: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
811
- --container-color-calendar-blue-pattern: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
812
- --container-color-calendar-teal-bg-default: light-dark(var(--modes-color-colorcode-teal-muted-light), var(--modes-color-colorcode-teal-muted-dark));
813
- --container-color-calendar-teal-border-default: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
814
- --container-color-calendar-teal-pattern: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
815
- --container-color-calendar-green-bg-default: light-dark(var(--modes-color-colorcode-green-muted-light), var(--modes-color-colorcode-green-muted-dark));
816
- --container-color-calendar-green-border-default: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
817
- --container-color-calendar-green-pattern: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
818
- --container-color-calendar-lime-bg-default: light-dark(var(--modes-color-colorcode-lime-muted-light), var(--modes-color-colorcode-lime-muted-dark));
819
- --container-color-calendar-lime-border-default: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
820
- --container-color-calendar-lime-pattern: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
821
- --container-color-calendar-orange-bg-default: light-dark(var(--modes-color-colorcode-orange-muted-light), var(--modes-color-colorcode-orange-muted-dark));
822
- --container-color-calendar-orange-border-default: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
823
- --container-color-calendar-orange-pattern: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
824
- --container-color-calendar-red-bg-default: light-dark(var(--modes-color-colorcode-red-muted-light), var(--modes-color-colorcode-red-muted-dark));
825
- --container-color-calendar-red-border-default: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
826
- --container-color-calendar-red-pattern: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
827
- --container-color-calendar-pink-bg-default: light-dark(var(--modes-color-colorcode-pink-muted-light), var(--modes-color-colorcode-pink-muted-dark));
828
- --container-color-calendar-pink-border-default: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
829
- --container-color-calendar-pink-pattern: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
830
- --container-color-calendar-purple-bg-default: light-dark(var(--modes-color-colorcode-purple-muted-light), var(--modes-color-colorcode-purple-muted-dark));
831
- --container-color-calendar-purple-border-default: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
832
- --container-color-calendar-purple-pattern: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
833
- --container-color-calendar-slate-bg-default: light-dark(var(--modes-color-colorcode-slate-muted-light), var(--modes-color-colorcode-slate-muted-dark));
834
- --container-color-calendar-slate-border-default: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
835
- --container-color-calendar-slate-pattern: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
836
- --container-color-calendar-gray-bg-default: light-dark(var(--modes-color-colorcode-gray-muted-light), var(--modes-color-colorcode-gray-muted-dark));
837
- --container-color-calendar-gray-border-default: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
838
- --container-color-calendar-gray-pattern: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
839
808
  --container-color-interactive-bg-footer-activated: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark)); /* */
840
809
  --container-color-interactive-border-activated: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
841
810
  --container-color-interactive-bg-footer-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* tile footer bg color */
@@ -858,7 +827,6 @@
858
827
  --container-typography-paragraph-m: var(--global-typography-component-moderate-m);
859
828
  --container-typography-paragraph-l: var(--global-typography-component-moderate-l);
860
829
  --container-color-blockquote-border: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
861
- --container-color-calendar-label-alt: light-dark(var(--modes-color-generic-content-nought-light), var(--modes-color-generic-content-nought-dark)); /* Accessible on calendar bg-alt colors. */
862
830
  --container-color-interactive-bg-footer-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
863
831
  --container-color-interactive-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark)); /* Used for accordion hover backgrounds */
864
832
  --container-color-interactive-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
@@ -1096,6 +1064,50 @@
1096
1064
  --container-borderwidth-nudge: var(--global-borderwidth-xl); /* nudge AI message borders */
1097
1065
  --container-color-interactive-borderalt-hover: var(--container-color-interactive-border-alt); /* For hover border on Link preview. */
1098
1066
 
1067
+ /* dataviz component tokens */
1068
+ --dataviz-color-generic-label-default: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark)); /* Accessible on colorpicker bg-default colors. */
1069
+ --dataviz-color-generic-blue-bg-alt: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
1070
+ --dataviz-color-generic-blue-bg-default: light-dark(var(--modes-color-colorcode-blue-muted-light), var(--modes-color-colorcode-blue-muted-dark));
1071
+ --dataviz-color-generic-blue-border: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
1072
+ --dataviz-color-generic-blue-pattern: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
1073
+ --dataviz-color-generic-teal-bg-alt: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
1074
+ --dataviz-color-generic-teal-bg-default: light-dark(var(--modes-color-colorcode-teal-muted-light), var(--modes-color-colorcode-teal-muted-dark));
1075
+ --dataviz-color-generic-teal-border: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
1076
+ --dataviz-color-generic-teal-pattern: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
1077
+ --dataviz-color-generic-green-bg-alt: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
1078
+ --dataviz-color-generic-green-bg-default: light-dark(var(--modes-color-colorcode-green-muted-light), var(--modes-color-colorcode-green-muted-dark));
1079
+ --dataviz-color-generic-green-border: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
1080
+ --dataviz-color-generic-green-pattern: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
1081
+ --dataviz-color-generic-lime-bg-alt: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
1082
+ --dataviz-color-generic-lime-bg-default: light-dark(var(--modes-color-colorcode-lime-muted-light), var(--modes-color-colorcode-lime-muted-dark));
1083
+ --dataviz-color-generic-lime-border: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
1084
+ --dataviz-color-generic-lime-pattern: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
1085
+ --dataviz-color-generic-orange-bg-alt: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1086
+ --dataviz-color-generic-orange-bg-default: light-dark(var(--modes-color-colorcode-orange-muted-light), var(--modes-color-colorcode-orange-muted-dark));
1087
+ --dataviz-color-generic-orange-border: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1088
+ --dataviz-color-generic-orange-pattern: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1089
+ --dataviz-color-generic-red-bg-alt: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1090
+ --dataviz-color-generic-red-bg-default: light-dark(var(--modes-color-colorcode-red-muted-light), var(--modes-color-colorcode-red-muted-dark));
1091
+ --dataviz-color-generic-red-border: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1092
+ --dataviz-color-generic-red-pattern: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1093
+ --dataviz-color-generic-pink-bg-alt: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1094
+ --dataviz-color-generic-pink-bg-default: light-dark(var(--modes-color-colorcode-pink-muted-light), var(--modes-color-colorcode-pink-muted-dark));
1095
+ --dataviz-color-generic-pink-border: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1096
+ --dataviz-color-generic-pink-pattern: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1097
+ --dataviz-color-generic-purple-bg-alt: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1098
+ --dataviz-color-generic-purple-bg-default: light-dark(var(--modes-color-colorcode-purple-muted-light), var(--modes-color-colorcode-purple-muted-dark));
1099
+ --dataviz-color-generic-purple-border: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1100
+ --dataviz-color-generic-purple-pattern: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1101
+ --dataviz-color-generic-gray-bg-alt: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1102
+ --dataviz-color-generic-gray-bg-default: light-dark(var(--modes-color-colorcode-gray-muted-light), var(--modes-color-colorcode-gray-muted-dark));
1103
+ --dataviz-color-generic-gray-border: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1104
+ --dataviz-color-generic-gray-pattern: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1105
+ --dataviz-color-generic-slate-bg-alt: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1106
+ --dataviz-color-generic-slate-bg-default: light-dark(var(--modes-color-colorcode-slate-muted-light), var(--modes-color-colorcode-slate-muted-dark));
1107
+ --dataviz-color-generic-slate-border: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1108
+ --dataviz-color-generic-slate-pattern: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1109
+ --dataviz-color-generic-label-alt: light-dark(var(--modes-color-generic-content-nought-light), var(--modes-color-generic-content-nought-dark)); /* Accessible on colorpicker bg-alt colors. */
1110
+
1099
1111
  /* focus component tokens */
1100
1112
  --focus-color-bg: light-dark(var(--modes-color-interactive-focus-with-default-alt-light), var(--modes-color-interactive-focus-with-default-alt-dark));
1101
1113
  --focus-color-borderalt: light-dark(var(--modes-color-interactive-focus-default-light), var(--modes-color-interactive-focus-default-dark));
@@ -1115,47 +1127,6 @@
1115
1127
  --form-radius-switch: var(--global-radius-circle); /* Switch container and handle */
1116
1128
  --form-radius-calendar-none: var(--global-radius-none); /* Calendar (start and end duration) */
1117
1129
  --form-radius-calendar-date: var(--global-radius-circle); /* Calendar date (hover & selected), */
1118
- --form-color-colorpicker-label-default: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark)); /* Accessible on colorpicker bg-default colors. */
1119
- --form-color-colorpicker-blue-bg-alt: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
1120
- --form-color-colorpicker-blue-bg-default: light-dark(var(--modes-color-colorcode-blue-muted-light), var(--modes-color-colorcode-blue-muted-dark));
1121
- --form-color-colorpicker-blue-border: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
1122
- --form-color-colorpicker-blue-pattern: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
1123
- --form-color-colorpicker-teal-bg-alt: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
1124
- --form-color-colorpicker-teal-bg-default: light-dark(var(--modes-color-colorcode-teal-muted-light), var(--modes-color-colorcode-teal-muted-dark));
1125
- --form-color-colorpicker-teal-border: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
1126
- --form-color-colorpicker-teal-pattern: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
1127
- --form-color-colorpicker-green-bg-alt: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
1128
- --form-color-colorpicker-green-bg-default: light-dark(var(--modes-color-colorcode-green-muted-light), var(--modes-color-colorcode-green-muted-dark));
1129
- --form-color-colorpicker-green-border: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
1130
- --form-color-colorpicker-green-pattern: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
1131
- --form-color-colorpicker-lime-bg-alt: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
1132
- --form-color-colorpicker-lime-bg-default: light-dark(var(--modes-color-colorcode-lime-muted-light), var(--modes-color-colorcode-lime-muted-dark));
1133
- --form-color-colorpicker-lime-border: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
1134
- --form-color-colorpicker-lime-pattern: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
1135
- --form-color-colorpicker-orange-bg-alt: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1136
- --form-color-colorpicker-orange-bg-default: light-dark(var(--modes-color-colorcode-orange-muted-light), var(--modes-color-colorcode-orange-muted-dark));
1137
- --form-color-colorpicker-orange-border: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1138
- --form-color-colorpicker-orange-pattern: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
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));
1142
- --form-color-colorpicker-red-pattern: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
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));
1146
- --form-color-colorpicker-pink-pattern: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
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));
1150
- --form-color-colorpicker-purple-pattern: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
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));
1154
- --form-color-colorpicker-gray-pattern: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
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));
1158
- --form-color-colorpicker-slate-pattern: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1159
1130
  --form-color-labelset-label-required: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
1160
1131
  --form-color-validation-border-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
1161
1132
  --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 */
@@ -1173,7 +1144,6 @@
1173
1144
  --form-color-calendar-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
1174
1145
  --form-color-calendar-border-duration: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
1175
1146
  --form-color-calendar-text-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
1176
- --form-color-colorpicker-label-alt: light-dark(var(--modes-color-generic-content-nought-light), var(--modes-color-generic-content-nought-dark)); /* Accessible on colorpicker bg-alt colors. */
1177
1147
  --form-color-dropdown-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
1178
1148
  --form-color-typical-bg-default: light-dark(var(--modes-color-interactive-data-entry-default-light), var(--modes-color-interactive-data-entry-default-dark));
1179
1149
  --form-color-typical-bg-enabled: light-dark(var(--modes-color-interactive-data-entry-default-light), var(--modes-color-interactive-data-entry-default-dark));
@@ -1213,6 +1183,9 @@
1213
1183
  --form-space-dropdown-option-xg-s: var(--global-space-micro-xs); /* DD only. Space between optional icon, prefix, and label. */
1214
1184
  --form-space-dropdown-option-xg-m: var(--global-space-micro-s); /* DD only. Space between optional icon, prefix, and label. */
1215
1185
  --form-space-dropdown-option-xg-l: var(--global-space-micro-s); /* DD only. Space between optional icon, prefix, and label. */
1186
+ --form-space-dropdown-option-colorpicker-xg-s: var(--global-space-micro-s); /* space on right of swatch */
1187
+ --form-space-dropdown-option-colorpicker-xg-m: var(--global-space-micro-l); /* space on right of swatch */
1188
+ --form-space-dropdown-option-colorpicker-xg-l: var(--global-space-micro-xxl); /* space on right of swatch */
1216
1189
  --form-space-dropdown-option-subtext-x-s: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
1217
1190
  --form-space-dropdown-option-subtext-x-m: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
1218
1191
  --form-space-dropdown-option-subtext-x-l: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
@@ -1312,6 +1285,9 @@
1312
1285
  --form-size-checkbox-s: var(--global-size-macro-xxs); /* S checkboxes */
1313
1286
  --form-size-checkbox-m: var(--global-size-macro-xs); /* M checkboxes */
1314
1287
  --form-size-checkbox-l: var(--global-size-macro-s); /* L checkboxes */
1288
+ --form-size-dropdown-colorpicker-s: var(--global-size-macro-xs); /* Swatch size. */
1289
+ --form-size-dropdown-colorpicker-m: var(--global-size-macro-xs); /* Swatch size. */
1290
+ --form-size-dropdown-colorpicker-l: var(--global-size-macro-xs)+4; /* Swatch size. */
1315
1291
  --form-size-dropdown-subtle-s: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
1316
1292
  --form-size-dropdown-subtle-m: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
1317
1293
  --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
@@ -13,37 +13,6 @@
13
13
  --container-color-ai-nudge-border-ai-horizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI nudge message component */
14
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
15
  --container-color-ai-tile-bordervertical: var(--modes-color-status-ai-default-vertical); /* left border for AI tiles and bubbles. */
16
- --container-color-calendar-label-default: var(--modes-color-generic-content-extreme); /* Accessible on calendar bg-default colors. */
17
- --container-color-calendar-blue-bg-default: var(--modes-color-colorcode-blue-muted);
18
- --container-color-calendar-blue-border-default: var(--modes-color-colorcode-blue-deep);
19
- --container-color-calendar-blue-pattern: var(--modes-color-colorcode-blue-deep);
20
- --container-color-calendar-teal-bg-default: var(--modes-color-colorcode-teal-muted);
21
- --container-color-calendar-teal-border-default: var(--modes-color-colorcode-teal-deep);
22
- --container-color-calendar-teal-pattern: var(--modes-color-colorcode-teal-deep);
23
- --container-color-calendar-green-bg-default: var(--modes-color-colorcode-green-muted);
24
- --container-color-calendar-green-border-default: var(--modes-color-colorcode-green-deep);
25
- --container-color-calendar-green-pattern: var(--modes-color-colorcode-green-deep);
26
- --container-color-calendar-lime-bg-default: var(--modes-color-colorcode-lime-muted);
27
- --container-color-calendar-lime-border-default: var(--modes-color-colorcode-lime-deep);
28
- --container-color-calendar-lime-pattern: var(--modes-color-colorcode-lime-deep);
29
- --container-color-calendar-orange-bg-default: var(--modes-color-colorcode-orange-muted);
30
- --container-color-calendar-orange-border-default: var(--modes-color-colorcode-orange-deep);
31
- --container-color-calendar-orange-pattern: var(--modes-color-colorcode-orange-deep);
32
- --container-color-calendar-red-bg-default: var(--modes-color-colorcode-red-muted);
33
- --container-color-calendar-red-border-default: var(--modes-color-colorcode-red-deep);
34
- --container-color-calendar-red-pattern: var(--modes-color-colorcode-red-deep);
35
- --container-color-calendar-pink-bg-default: var(--modes-color-colorcode-pink-muted);
36
- --container-color-calendar-pink-border-default: var(--modes-color-colorcode-pink-deep);
37
- --container-color-calendar-pink-pattern: var(--modes-color-colorcode-pink-deep);
38
- --container-color-calendar-purple-bg-default: var(--modes-color-colorcode-purple-muted);
39
- --container-color-calendar-purple-border-default: var(--modes-color-colorcode-purple-deep);
40
- --container-color-calendar-purple-pattern: var(--modes-color-colorcode-purple-deep);
41
- --container-color-calendar-slate-bg-default: var(--modes-color-colorcode-slate-muted);
42
- --container-color-calendar-slate-border-default: var(--modes-color-colorcode-slate-deep);
43
- --container-color-calendar-slate-pattern: var(--modes-color-colorcode-slate-deep);
44
- --container-color-calendar-gray-bg-default: var(--modes-color-colorcode-gray-muted);
45
- --container-color-calendar-gray-border-default: var(--modes-color-colorcode-gray-deep);
46
- --container-color-calendar-gray-pattern: var(--modes-color-colorcode-gray-deep);
47
16
  --container-color-interactive-bg-footer-activated: var(--modes-color-status-positive-default); /* */
48
17
  --container-color-interactive-border-activated: var(--modes-color-status-positive-default);
49
18
  --container-color-interactive-bg-footer-default: var(--modes-color-generic-bg-nought); /* tile footer bg color */
@@ -75,7 +44,6 @@
75
44
  --container-typography-responsive-paragraph-m: var(--global-typography-responsive-component-moderate-m);
76
45
  --container-typography-responsive-paragraph-l: var(--global-typography-responsive-component-moderate-l);
77
46
  --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
78
- --container-color-calendar-label-alt: var(--modes-color-generic-content-nought); /* Accessible on calendar bg-alt colors. */
79
47
  --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-generic-active);
80
48
  --container-color-interactive-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt); /* Used for accordion hover backgrounds */
81
49
  --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-generic-active);
package/css/frozenproduct/large/components/dataviz.css ADDED
@@ -0,0 +1,48 @@
1
+ /**
2
+ * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
3
+ */
4
+
5
+ :root {
6
+ --dataviz-color-generic-label-default: var(--modes-color-generic-content-extreme); /* Accessible on colorpicker bg-default colors. */
7
+ --dataviz-color-generic-blue-bg-alt: var(--modes-color-colorcode-blue-deep);
8
+ --dataviz-color-generic-blue-bg-default: var(--modes-color-colorcode-blue-muted);
9
+ --dataviz-color-generic-blue-border: var(--modes-color-colorcode-blue-deep);
10
+ --dataviz-color-generic-blue-pattern: var(--modes-color-colorcode-blue-deep);
11
+ --dataviz-color-generic-teal-bg-alt: var(--modes-color-colorcode-teal-deep);
12
+ --dataviz-color-generic-teal-bg-default: var(--modes-color-colorcode-teal-muted);
13
+ --dataviz-color-generic-teal-border: var(--modes-color-colorcode-teal-deep);
14
+ --dataviz-color-generic-teal-pattern: var(--modes-color-colorcode-teal-deep);
15
+ --dataviz-color-generic-green-bg-alt: var(--modes-color-colorcode-green-deep);
16
+ --dataviz-color-generic-green-bg-default: var(--modes-color-colorcode-green-muted);
17
+ --dataviz-color-generic-green-border: var(--modes-color-colorcode-green-deep);
18
+ --dataviz-color-generic-green-pattern: var(--modes-color-colorcode-green-deep);
19
+ --dataviz-color-generic-lime-bg-alt: var(--modes-color-colorcode-lime-deep);
20
+ --dataviz-color-generic-lime-bg-default: var(--modes-color-colorcode-lime-muted);
21
+ --dataviz-color-generic-lime-border: var(--modes-color-colorcode-lime-deep);
22
+ --dataviz-color-generic-lime-pattern: var(--modes-color-colorcode-lime-deep);
23
+ --dataviz-color-generic-orange-bg-alt: var(--modes-color-colorcode-orange-deep);
24
+ --dataviz-color-generic-orange-bg-default: var(--modes-color-colorcode-orange-muted);
25
+ --dataviz-color-generic-orange-border: var(--modes-color-colorcode-orange-deep);
26
+ --dataviz-color-generic-orange-pattern: var(--modes-color-colorcode-orange-deep);
27
+ --dataviz-color-generic-red-bg-alt: var(--modes-color-colorcode-red-deep);
28
+ --dataviz-color-generic-red-bg-default: var(--modes-color-colorcode-red-muted);
29
+ --dataviz-color-generic-red-border: var(--modes-color-colorcode-red-deep);
30
+ --dataviz-color-generic-red-pattern: var(--modes-color-colorcode-red-deep);
31
+ --dataviz-color-generic-pink-bg-alt: var(--modes-color-colorcode-pink-deep);
32
+ --dataviz-color-generic-pink-bg-default: var(--modes-color-colorcode-pink-muted);
33
+ --dataviz-color-generic-pink-border: var(--modes-color-colorcode-pink-deep);
34
+ --dataviz-color-generic-pink-pattern: var(--modes-color-colorcode-pink-deep);
35
+ --dataviz-color-generic-purple-bg-alt: var(--modes-color-colorcode-purple-deep);
36
+ --dataviz-color-generic-purple-bg-default: var(--modes-color-colorcode-purple-muted);
37
+ --dataviz-color-generic-purple-border: var(--modes-color-colorcode-purple-deep);
38
+ --dataviz-color-generic-purple-pattern: var(--modes-color-colorcode-purple-deep);
39
+ --dataviz-color-generic-gray-bg-alt: var(--modes-color-colorcode-gray-deep);
40
+ --dataviz-color-generic-gray-bg-default: var(--modes-color-colorcode-gray-muted);
41
+ --dataviz-color-generic-gray-border: var(--modes-color-colorcode-gray-deep);
42
+ --dataviz-color-generic-gray-pattern: var(--modes-color-colorcode-gray-deep);
43
+ --dataviz-color-generic-slate-bg-alt: var(--modes-color-colorcode-slate-deep);
44
+ --dataviz-color-generic-slate-bg-default: var(--modes-color-colorcode-slate-muted);
45
+ --dataviz-color-generic-slate-border: var(--modes-color-colorcode-slate-deep);
46
+ --dataviz-color-generic-slate-pattern: var(--modes-color-colorcode-slate-deep);
47
+ --dataviz-color-generic-label-alt: var(--modes-color-generic-content-nought); /* Accessible on colorpicker bg-alt colors. */
48
+ }
package/css/frozenproduct/large/components/form.css CHANGED
@@ -11,47 +11,6 @@
11
11
  --form-radius-switch: var(--global-radius-circle); /* Switch container and handle */
12
12
  --form-radius-calendar-none: var(--global-radius-none); /* Calendar (start and end duration) */
13
13
  --form-radius-calendar-date: var(--global-radius-circle); /* Calendar date (hover & selected), */
14
- --form-color-colorpicker-label-default: var(--modes-color-generic-content-extreme); /* Accessible on colorpicker bg-default colors. */
15
- --form-color-colorpicker-blue-bg-alt: var(--modes-color-colorcode-blue-deep);
16
- --form-color-colorpicker-blue-bg-default: var(--modes-color-colorcode-blue-muted);
17
- --form-color-colorpicker-blue-border: var(--modes-color-colorcode-blue-deep);
18
- --form-color-colorpicker-blue-pattern: var(--modes-color-colorcode-blue-deep);
19
- --form-color-colorpicker-teal-bg-alt: var(--modes-color-colorcode-teal-deep);
20
- --form-color-colorpicker-teal-bg-default: var(--modes-color-colorcode-teal-muted);
21
- --form-color-colorpicker-teal-border: var(--modes-color-colorcode-teal-deep);
22
- --form-color-colorpicker-teal-pattern: var(--modes-color-colorcode-teal-deep);
23
- --form-color-colorpicker-green-bg-alt: var(--modes-color-colorcode-green-deep);
24
- --form-color-colorpicker-green-bg-default: var(--modes-color-colorcode-green-muted);
25
- --form-color-colorpicker-green-border: var(--modes-color-colorcode-green-deep);
26
- --form-color-colorpicker-green-pattern: var(--modes-color-colorcode-green-deep);
27
- --form-color-colorpicker-lime-bg-alt: var(--modes-color-colorcode-lime-deep);
28
- --form-color-colorpicker-lime-bg-default: var(--modes-color-colorcode-lime-muted);
29
- --form-color-colorpicker-lime-border: var(--modes-color-colorcode-lime-deep);
30
- --form-color-colorpicker-lime-pattern: var(--modes-color-colorcode-lime-deep);
31
- --form-color-colorpicker-orange-bg-alt: var(--modes-color-colorcode-orange-deep);
32
- --form-color-colorpicker-orange-bg-default: var(--modes-color-colorcode-orange-muted);
33
- --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-deep);
34
- --form-color-colorpicker-orange-pattern: var(--modes-color-colorcode-orange-deep);
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
- --form-color-colorpicker-red-pattern: var(--modes-color-colorcode-red-deep);
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
- --form-color-colorpicker-pink-pattern: var(--modes-color-colorcode-pink-deep);
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
- --form-color-colorpicker-purple-pattern: var(--modes-color-colorcode-purple-deep);
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
- --form-color-colorpicker-gray-pattern: var(--modes-color-colorcode-gray-deep);
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
- --form-color-colorpicker-slate-pattern: var(--modes-color-colorcode-slate-deep);
55
14
  --form-color-labelset-label-required: var(--modes-color-interactive-danger-default);
56
15
  --form-color-validation-border-error: var(--modes-color-status-negative-default);
57
16
  --form-color-validation-bar-error: var(--modes-color-status-negative-default); /* error bar to left of inputs */
@@ -75,7 +34,6 @@
75
34
  --form-color-calendar-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
76
35
  --form-color-calendar-border-duration: var(--modes-color-interactive-monochrome-generic-active);
77
36
  --form-color-calendar-text-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
78
- --form-color-colorpicker-label-alt: var(--modes-color-generic-content-nought); /* Accessible on colorpicker bg-alt colors. */
79
37
  --form-color-dropdown-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
80
38
  --form-color-typical-bg-default: var(--modes-color-interactive-data-entry-default);
81
39
  --form-color-typical-bg-enabled: var(--modes-color-interactive-data-entry-default);
@@ -115,6 +73,9 @@
115
73
  --form-space-dropdown-option-xg-s: var(--global-space-micro-xs); /* DD only. Space between optional icon, prefix, and label. */
116
74
  --form-space-dropdown-option-xg-m: var(--global-space-micro-s); /* DD only. Space between optional icon, prefix, and label. */
117
75
  --form-space-dropdown-option-xg-l: var(--global-space-micro-s); /* DD only. Space between optional icon, prefix, and label. */
76
+ --form-space-dropdown-option-colorpicker-xg-s: var(--global-space-micro-s); /* space on right of swatch */
77
+ --form-space-dropdown-option-colorpicker-xg-m: var(--global-space-micro-l); /* space on right of swatch */
78
+ --form-space-dropdown-option-colorpicker-xg-l: var(--global-space-micro-xxl); /* space on right of swatch */
118
79
  --form-space-dropdown-option-subtext-x-s: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
119
80
  --form-space-dropdown-option-subtext-x-m: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
120
81
  --form-space-dropdown-option-subtext-x-l: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
@@ -214,6 +175,9 @@
214
175
  --form-size-checkbox-s: var(--global-size-macro-xxs); /* S checkboxes */
215
176
  --form-size-checkbox-m: var(--global-size-macro-xs); /* M checkboxes */
216
177
  --form-size-checkbox-l: var(--global-size-macro-s); /* L checkboxes */
178
+ --form-size-dropdown-colorpicker-s: var(--global-size-macro-xs); /* Swatch size. */
179
+ --form-size-dropdown-colorpicker-m: var(--global-size-macro-xs); /* Swatch size. */
180
+ --form-size-dropdown-colorpicker-l: var(--global-size-macro-xs)+4; /* Swatch size. */
217
181
  --form-size-dropdown-subtle-s: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
218
182
  --form-size-dropdown-subtle-m: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
219
183
  --form-size-dropdown-subtle-l: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
package/css/frozenproduct/small/components/container.css CHANGED
@@ -13,37 +13,6 @@
13
13
  --container-color-ai-nudge-border-ai-horizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI nudge message component */
14
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
15
  --container-color-ai-tile-bordervertical: var(--modes-color-status-ai-default-vertical); /* left border for AI tiles and bubbles. */
16
- --container-color-calendar-label-default: var(--modes-color-generic-content-extreme); /* Accessible on calendar bg-default colors. */
17
- --container-color-calendar-blue-bg-default: var(--modes-color-colorcode-blue-muted);
18
- --container-color-calendar-blue-border-default: var(--modes-color-colorcode-blue-deep);
19
- --container-color-calendar-blue-pattern: var(--modes-color-colorcode-blue-deep);
20
- --container-color-calendar-teal-bg-default: var(--modes-color-colorcode-teal-muted);
21
- --container-color-calendar-teal-border-default: var(--modes-color-colorcode-teal-deep);
22
- --container-color-calendar-teal-pattern: var(--modes-color-colorcode-teal-deep);
23
- --container-color-calendar-green-bg-default: var(--modes-color-colorcode-green-muted);
24
- --container-color-calendar-green-border-default: var(--modes-color-colorcode-green-deep);
25
- --container-color-calendar-green-pattern: var(--modes-color-colorcode-green-deep);
26
- --container-color-calendar-lime-bg-default: var(--modes-color-colorcode-lime-muted);
27
- --container-color-calendar-lime-border-default: var(--modes-color-colorcode-lime-deep);
28
- --container-color-calendar-lime-pattern: var(--modes-color-colorcode-lime-deep);
29
- --container-color-calendar-orange-bg-default: var(--modes-color-colorcode-orange-muted);
30
- --container-color-calendar-orange-border-default: var(--modes-color-colorcode-orange-deep);
31
- --container-color-calendar-orange-pattern: var(--modes-color-colorcode-orange-deep);
32
- --container-color-calendar-red-bg-default: var(--modes-color-colorcode-red-muted);
33
- --container-color-calendar-red-border-default: var(--modes-color-colorcode-red-deep);
34
- --container-color-calendar-red-pattern: var(--modes-color-colorcode-red-deep);
35
- --container-color-calendar-pink-bg-default: var(--modes-color-colorcode-pink-muted);
36
- --container-color-calendar-pink-border-default: var(--modes-color-colorcode-pink-deep);
37
- --container-color-calendar-pink-pattern: var(--modes-color-colorcode-pink-deep);
38
- --container-color-calendar-purple-bg-default: var(--modes-color-colorcode-purple-muted);
39
- --container-color-calendar-purple-border-default: var(--modes-color-colorcode-purple-deep);
40
- --container-color-calendar-purple-pattern: var(--modes-color-colorcode-purple-deep);
41
- --container-color-calendar-slate-bg-default: var(--modes-color-colorcode-slate-muted);
42
- --container-color-calendar-slate-border-default: var(--modes-color-colorcode-slate-deep);
43
- --container-color-calendar-slate-pattern: var(--modes-color-colorcode-slate-deep);
44
- --container-color-calendar-gray-bg-default: var(--modes-color-colorcode-gray-muted);
45
- --container-color-calendar-gray-border-default: var(--modes-color-colorcode-gray-deep);
46
- --container-color-calendar-gray-pattern: var(--modes-color-colorcode-gray-deep);
47
16
  --container-color-interactive-bg-footer-activated: var(--modes-color-status-positive-default); /* */
48
17
  --container-color-interactive-border-activated: var(--modes-color-status-positive-default);
49
18
  --container-color-interactive-bg-footer-default: var(--modes-color-generic-bg-nought); /* tile footer bg color */
@@ -75,7 +44,6 @@
75
44
  --container-typography-responsive-paragraph-m: var(--global-typography-responsive-component-moderate-m);
76
45
  --container-typography-responsive-paragraph-l: var(--global-typography-responsive-component-moderate-l);
77
46
  --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
78
- --container-color-calendar-label-alt: var(--modes-color-generic-content-nought); /* Accessible on calendar bg-alt colors. */
79
47
  --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-generic-active);
80
48
  --container-color-interactive-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt); /* Used for accordion hover backgrounds */
81
49
  --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-generic-active);
package/css/frozenproduct/small/components/dataviz.css ADDED
@@ -0,0 +1,48 @@
1
+ /**
2
+ * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
3
+ */
4
+
5
+ :root {
6
+ --dataviz-color-generic-label-default: var(--modes-color-generic-content-extreme); /* Accessible on colorpicker bg-default colors. */
7
+ --dataviz-color-generic-blue-bg-alt: var(--modes-color-colorcode-blue-deep);
8
+ --dataviz-color-generic-blue-bg-default: var(--modes-color-colorcode-blue-muted);
9
+ --dataviz-color-generic-blue-border: var(--modes-color-colorcode-blue-deep);
10
+ --dataviz-color-generic-blue-pattern: var(--modes-color-colorcode-blue-deep);
11
+ --dataviz-color-generic-teal-bg-alt: var(--modes-color-colorcode-teal-deep);
12
+ --dataviz-color-generic-teal-bg-default: var(--modes-color-colorcode-teal-muted);
13
+ --dataviz-color-generic-teal-border: var(--modes-color-colorcode-teal-deep);
14
+ --dataviz-color-generic-teal-pattern: var(--modes-color-colorcode-teal-deep);
15
+ --dataviz-color-generic-green-bg-alt: var(--modes-color-colorcode-green-deep);
16
+ --dataviz-color-generic-green-bg-default: var(--modes-color-colorcode-green-muted);
17
+ --dataviz-color-generic-green-border: var(--modes-color-colorcode-green-deep);
18
+ --dataviz-color-generic-green-pattern: var(--modes-color-colorcode-green-deep);
19
+ --dataviz-color-generic-lime-bg-alt: var(--modes-color-colorcode-lime-deep);
20
+ --dataviz-color-generic-lime-bg-default: var(--modes-color-colorcode-lime-muted);
21
+ --dataviz-color-generic-lime-border: var(--modes-color-colorcode-lime-deep);
22
+ --dataviz-color-generic-lime-pattern: var(--modes-color-colorcode-lime-deep);
23
+ --dataviz-color-generic-orange-bg-alt: var(--modes-color-colorcode-orange-deep);
24
+ --dataviz-color-generic-orange-bg-default: var(--modes-color-colorcode-orange-muted);
25
+ --dataviz-color-generic-orange-border: var(--modes-color-colorcode-orange-deep);
26
+ --dataviz-color-generic-orange-pattern: var(--modes-color-colorcode-orange-deep);
27
+ --dataviz-color-generic-red-bg-alt: var(--modes-color-colorcode-red-deep);
28
+ --dataviz-color-generic-red-bg-default: var(--modes-color-colorcode-red-muted);
29
+ --dataviz-color-generic-red-border: var(--modes-color-colorcode-red-deep);
30
+ --dataviz-color-generic-red-pattern: var(--modes-color-colorcode-red-deep);
31
+ --dataviz-color-generic-pink-bg-alt: var(--modes-color-colorcode-pink-deep);
32
+ --dataviz-color-generic-pink-bg-default: var(--modes-color-colorcode-pink-muted);
33
+ --dataviz-color-generic-pink-border: var(--modes-color-colorcode-pink-deep);
34
+ --dataviz-color-generic-pink-pattern: var(--modes-color-colorcode-pink-deep);
35
+ --dataviz-color-generic-purple-bg-alt: var(--modes-color-colorcode-purple-deep);
36
+ --dataviz-color-generic-purple-bg-default: var(--modes-color-colorcode-purple-muted);
37
+ --dataviz-color-generic-purple-border: var(--modes-color-colorcode-purple-deep);
38
+ --dataviz-color-generic-purple-pattern: var(--modes-color-colorcode-purple-deep);
39
+ --dataviz-color-generic-gray-bg-alt: var(--modes-color-colorcode-gray-deep);
40
+ --dataviz-color-generic-gray-bg-default: var(--modes-color-colorcode-gray-muted);
41
+ --dataviz-color-generic-gray-border: var(--modes-color-colorcode-gray-deep);
42
+ --dataviz-color-generic-gray-pattern: var(--modes-color-colorcode-gray-deep);
43
+ --dataviz-color-generic-slate-bg-alt: var(--modes-color-colorcode-slate-deep);
44
+ --dataviz-color-generic-slate-bg-default: var(--modes-color-colorcode-slate-muted);
45
+ --dataviz-color-generic-slate-border: var(--modes-color-colorcode-slate-deep);
46
+ --dataviz-color-generic-slate-pattern: var(--modes-color-colorcode-slate-deep);
47
+ --dataviz-color-generic-label-alt: var(--modes-color-generic-content-nought); /* Accessible on colorpicker bg-alt colors. */
48
+ }
package/css/frozenproduct/small/components/form.css CHANGED
@@ -11,47 +11,6 @@
11
11
  --form-radius-switch: var(--global-radius-circle); /* Switch container and handle */
12
12
  --form-radius-calendar-none: var(--global-radius-none); /* Calendar (start and end duration) */
13
13
  --form-radius-calendar-date: var(--global-radius-circle); /* Calendar date (hover & selected), */
14
- --form-color-colorpicker-label-default: var(--modes-color-generic-content-extreme); /* Accessible on colorpicker bg-default colors. */
15
- --form-color-colorpicker-blue-bg-alt: var(--modes-color-colorcode-blue-deep);
16
- --form-color-colorpicker-blue-bg-default: var(--modes-color-colorcode-blue-muted);
17
- --form-color-colorpicker-blue-border: var(--modes-color-colorcode-blue-deep);
18
- --form-color-colorpicker-blue-pattern: var(--modes-color-colorcode-blue-deep);
19
- --form-color-colorpicker-teal-bg-alt: var(--modes-color-colorcode-teal-deep);
20
- --form-color-colorpicker-teal-bg-default: var(--modes-color-colorcode-teal-muted);
21
- --form-color-colorpicker-teal-border: var(--modes-color-colorcode-teal-deep);
22
- --form-color-colorpicker-teal-pattern: var(--modes-color-colorcode-teal-deep);
23
- --form-color-colorpicker-green-bg-alt: var(--modes-color-colorcode-green-deep);
24
- --form-color-colorpicker-green-bg-default: var(--modes-color-colorcode-green-muted);
25
- --form-color-colorpicker-green-border: var(--modes-color-colorcode-green-deep);
26
- --form-color-colorpicker-green-pattern: var(--modes-color-colorcode-green-deep);
27
- --form-color-colorpicker-lime-bg-alt: var(--modes-color-colorcode-lime-deep);
28
- --form-color-colorpicker-lime-bg-default: var(--modes-color-colorcode-lime-muted);
29
- --form-color-colorpicker-lime-border: var(--modes-color-colorcode-lime-deep);
30
- --form-color-colorpicker-lime-pattern: var(--modes-color-colorcode-lime-deep);
31
- --form-color-colorpicker-orange-bg-alt: var(--modes-color-colorcode-orange-deep);
32
- --form-color-colorpicker-orange-bg-default: var(--modes-color-colorcode-orange-muted);
33
- --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-deep);
34
- --form-color-colorpicker-orange-pattern: var(--modes-color-colorcode-orange-deep);
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
- --form-color-colorpicker-red-pattern: var(--modes-color-colorcode-red-deep);
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
- --form-color-colorpicker-pink-pattern: var(--modes-color-colorcode-pink-deep);
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
- --form-color-colorpicker-purple-pattern: var(--modes-color-colorcode-purple-deep);
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
- --form-color-colorpicker-gray-pattern: var(--modes-color-colorcode-gray-deep);
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
- --form-color-colorpicker-slate-pattern: var(--modes-color-colorcode-slate-deep);
55
14
  --form-color-labelset-label-required: var(--modes-color-interactive-danger-default);
56
15
  --form-color-validation-border-error: var(--modes-color-status-negative-default);
57
16
  --form-color-validation-bar-error: var(--modes-color-status-negative-default); /* error bar to left of inputs */
@@ -75,7 +34,6 @@
75
34
  --form-color-calendar-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
76
35
  --form-color-calendar-border-duration: var(--modes-color-interactive-monochrome-generic-active);
77
36
  --form-color-calendar-text-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
78
- --form-color-colorpicker-label-alt: var(--modes-color-generic-content-nought); /* Accessible on colorpicker bg-alt colors. */
79
37
  --form-color-dropdown-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
80
38
  --form-color-typical-bg-default: var(--modes-color-interactive-data-entry-default);
81
39
  --form-color-typical-bg-enabled: var(--modes-color-interactive-data-entry-default);
@@ -115,6 +73,9 @@
115
73
  --form-space-dropdown-option-xg-s: var(--global-space-micro-xs); /* DD only. Space between optional icon, prefix, and label. */
116
74
  --form-space-dropdown-option-xg-m: var(--global-space-micro-s); /* DD only. Space between optional icon, prefix, and label. */
117
75
  --form-space-dropdown-option-xg-l: var(--global-space-micro-s); /* DD only. Space between optional icon, prefix, and label. */
76
+ --form-space-dropdown-option-colorpicker-xg-s: var(--global-space-micro-s); /* space on right of swatch */
77
+ --form-space-dropdown-option-colorpicker-xg-m: var(--global-space-micro-l); /* space on right of swatch */
78
+ --form-space-dropdown-option-colorpicker-xg-l: var(--global-space-micro-xxl); /* space on right of swatch */
118
79
  --form-space-dropdown-option-subtext-x-s: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
119
80
  --form-space-dropdown-option-subtext-x-m: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
120
81
  --form-space-dropdown-option-subtext-x-l: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
@@ -214,6 +175,9 @@
214
175
  --form-size-checkbox-s: var(--global-size-macro-xxs); /* S checkboxes */
215
176
  --form-size-checkbox-m: var(--global-size-macro-xs); /* M checkboxes */
216
177
  --form-size-checkbox-l: var(--global-size-macro-s); /* L checkboxes */
178
+ --form-size-dropdown-colorpicker-s: var(--global-size-macro-xs); /* Swatch size. */
179
+ --form-size-dropdown-colorpicker-m: var(--global-size-macro-xs); /* Swatch size. */
180
+ --form-size-dropdown-colorpicker-l: var(--global-size-macro-xs)+4; /* Swatch size. */
217
181
  --form-size-dropdown-subtle-s: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
218
182
  --form-size-dropdown-subtle-m: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
219
183
  --form-size-dropdown-subtle-l: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */