@sage/design-tokens 8.6.0 → 9.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 (379) hide show
  1. package/css/frozenproduct/all.css +52 -53
  2. package/css/frozenproduct/large/components/button.css +31 -12
  3. package/css/frozenproduct/large/components/form.css +23 -23
  4. package/css/frozenproduct/large/dark.css +0 -10
  5. package/css/frozenproduct/large/light.css +1 -11
  6. package/css/frozenproduct/small/components/button.css +31 -12
  7. package/css/frozenproduct/small/components/form.css +23 -23
  8. package/css/frozenproduct/small/dark.css +0 -10
  9. package/css/frozenproduct/small/light.css +1 -11
  10. package/css/marketing/all.css +55 -56
  11. package/css/marketing/large/components/button.css +31 -12
  12. package/css/marketing/large/components/form.css +23 -23
  13. package/css/marketing/large/dark.css +0 -10
  14. package/css/marketing/large/light.css +1 -11
  15. package/css/marketing/small/components/button.css +31 -12
  16. package/css/marketing/small/components/form.css +23 -23
  17. package/css/marketing/small/components/status.css +3 -3
  18. package/css/marketing/small/dark.css +0 -10
  19. package/css/marketing/small/light.css +1 -11
  20. package/css/product/all.css +52 -53
  21. package/css/product/large/components/button.css +31 -12
  22. package/css/product/large/components/form.css +23 -23
  23. package/css/product/large/dark.css +0 -10
  24. package/css/product/large/light.css +1 -11
  25. package/css/product/small/components/button.css +31 -12
  26. package/css/product/small/components/form.css +23 -23
  27. package/css/product/small/dark.css +0 -10
  28. package/css/product/small/light.css +1 -11
  29. package/ios/frozenproduct/large/dark/components/button.h +31 -12
  30. package/ios/frozenproduct/large/dark/components/form.h +23 -23
  31. package/ios/frozenproduct/large/dark/mode.h +0 -10
  32. package/ios/frozenproduct/large/light/components/button.h +31 -12
  33. package/ios/frozenproduct/large/light/components/container.h +2 -2
  34. package/ios/frozenproduct/large/light/components/form.h +25 -25
  35. package/ios/frozenproduct/large/light/mode.h +1 -11
  36. package/ios/frozenproduct/small/dark/components/button.h +31 -12
  37. package/ios/frozenproduct/small/dark/components/form.h +23 -23
  38. package/ios/frozenproduct/small/dark/mode.h +0 -10
  39. package/ios/frozenproduct/small/light/components/button.h +31 -12
  40. package/ios/frozenproduct/small/light/components/container.h +2 -2
  41. package/ios/frozenproduct/small/light/components/form.h +25 -25
  42. package/ios/frozenproduct/small/light/mode.h +1 -11
  43. package/ios/marketing/large/dark/components/button.h +31 -12
  44. package/ios/marketing/large/dark/components/form.h +23 -23
  45. package/ios/marketing/large/dark/mode.h +0 -10
  46. package/ios/marketing/large/light/components/button.h +31 -12
  47. package/ios/marketing/large/light/components/container.h +2 -2
  48. package/ios/marketing/large/light/components/form.h +25 -25
  49. package/ios/marketing/large/light/mode.h +1 -11
  50. package/ios/marketing/small/dark/components/button.h +31 -12
  51. package/ios/marketing/small/dark/components/form.h +23 -23
  52. package/ios/marketing/small/dark/mode.h +0 -10
  53. package/ios/marketing/small/light/components/button.h +31 -12
  54. package/ios/marketing/small/light/components/container.h +2 -2
  55. package/ios/marketing/small/light/components/form.h +25 -25
  56. package/ios/marketing/small/light/mode.h +1 -11
  57. package/ios/product/large/dark/components/button.h +31 -12
  58. package/ios/product/large/dark/components/form.h +23 -23
  59. package/ios/product/large/dark/mode.h +0 -10
  60. package/ios/product/large/light/components/button.h +31 -12
  61. package/ios/product/large/light/components/container.h +2 -2
  62. package/ios/product/large/light/components/form.h +25 -25
  63. package/ios/product/large/light/mode.h +1 -11
  64. package/ios/product/small/dark/components/button.h +31 -12
  65. package/ios/product/small/dark/components/form.h +23 -23
  66. package/ios/product/small/dark/mode.h +0 -10
  67. package/ios/product/small/light/components/button.h +31 -12
  68. package/ios/product/small/light/components/container.h +2 -2
  69. package/ios/product/small/light/components/form.h +25 -25
  70. package/ios/product/small/light/mode.h +1 -11
  71. package/js/common/frozenproduct/large/dark/components/button.d.ts +34 -7
  72. package/js/common/frozenproduct/large/dark/components/button.js +376 -73
  73. package/js/common/frozenproduct/large/dark/components/form.d.ts +2 -2
  74. package/js/common/frozenproduct/large/dark/components/form.js +74 -74
  75. package/js/common/frozenproduct/large/dark/mode.d.ts +0 -10
  76. package/js/common/frozenproduct/large/dark/mode.js +0 -130
  77. package/js/common/frozenproduct/large/light/components/button.d.ts +34 -7
  78. package/js/common/frozenproduct/large/light/components/button.js +376 -73
  79. package/js/common/frozenproduct/large/light/components/container.js +2 -2
  80. package/js/common/frozenproduct/large/light/components/form.d.ts +2 -2
  81. package/js/common/frozenproduct/large/light/components/form.js +76 -76
  82. package/js/common/frozenproduct/large/light/mode.d.ts +0 -10
  83. package/js/common/frozenproduct/large/light/mode.js +1 -131
  84. package/js/common/frozenproduct/small/dark/components/button.d.ts +34 -7
  85. package/js/common/frozenproduct/small/dark/components/button.js +376 -73
  86. package/js/common/frozenproduct/small/dark/components/form.d.ts +2 -2
  87. package/js/common/frozenproduct/small/dark/components/form.js +74 -74
  88. package/js/common/frozenproduct/small/dark/mode.d.ts +0 -10
  89. package/js/common/frozenproduct/small/dark/mode.js +0 -130
  90. package/js/common/frozenproduct/small/light/components/button.d.ts +34 -7
  91. package/js/common/frozenproduct/small/light/components/button.js +376 -73
  92. package/js/common/frozenproduct/small/light/components/container.js +2 -2
  93. package/js/common/frozenproduct/small/light/components/form.d.ts +2 -2
  94. package/js/common/frozenproduct/small/light/components/form.js +76 -76
  95. package/js/common/frozenproduct/small/light/mode.d.ts +0 -10
  96. package/js/common/frozenproduct/small/light/mode.js +1 -131
  97. package/js/common/marketing/large/dark/components/button.d.ts +34 -7
  98. package/js/common/marketing/large/dark/components/button.js +376 -73
  99. package/js/common/marketing/large/dark/components/form.d.ts +2 -2
  100. package/js/common/marketing/large/dark/components/form.js +74 -74
  101. package/js/common/marketing/large/dark/mode.d.ts +0 -10
  102. package/js/common/marketing/large/dark/mode.js +0 -130
  103. package/js/common/marketing/large/light/components/button.d.ts +34 -7
  104. package/js/common/marketing/large/light/components/button.js +376 -73
  105. package/js/common/marketing/large/light/components/container.js +2 -2
  106. package/js/common/marketing/large/light/components/form.d.ts +2 -2
  107. package/js/common/marketing/large/light/components/form.js +76 -76
  108. package/js/common/marketing/large/light/mode.d.ts +0 -10
  109. package/js/common/marketing/large/light/mode.js +1 -131
  110. package/js/common/marketing/small/dark/components/button.d.ts +34 -7
  111. package/js/common/marketing/small/dark/components/button.js +376 -73
  112. package/js/common/marketing/small/dark/components/form.d.ts +2 -2
  113. package/js/common/marketing/small/dark/components/form.js +74 -74
  114. package/js/common/marketing/small/dark/mode.d.ts +0 -10
  115. package/js/common/marketing/small/dark/mode.js +0 -130
  116. package/js/common/marketing/small/light/components/button.d.ts +34 -7
  117. package/js/common/marketing/small/light/components/button.js +376 -73
  118. package/js/common/marketing/small/light/components/container.js +2 -2
  119. package/js/common/marketing/small/light/components/form.d.ts +2 -2
  120. package/js/common/marketing/small/light/components/form.js +76 -76
  121. package/js/common/marketing/small/light/mode.d.ts +0 -10
  122. package/js/common/marketing/small/light/mode.js +1 -131
  123. package/js/common/product/large/dark/components/button.d.ts +34 -7
  124. package/js/common/product/large/dark/components/button.js +376 -73
  125. package/js/common/product/large/dark/components/form.d.ts +2 -2
  126. package/js/common/product/large/dark/components/form.js +74 -74
  127. package/js/common/product/large/dark/mode.d.ts +0 -10
  128. package/js/common/product/large/dark/mode.js +0 -130
  129. package/js/common/product/large/light/components/button.d.ts +34 -7
  130. package/js/common/product/large/light/components/button.js +376 -73
  131. package/js/common/product/large/light/components/container.js +2 -2
  132. package/js/common/product/large/light/components/form.d.ts +2 -2
  133. package/js/common/product/large/light/components/form.js +76 -76
  134. package/js/common/product/large/light/mode.d.ts +0 -10
  135. package/js/common/product/large/light/mode.js +1 -131
  136. package/js/common/product/small/dark/components/button.d.ts +34 -7
  137. package/js/common/product/small/dark/components/button.js +376 -73
  138. package/js/common/product/small/dark/components/form.d.ts +2 -2
  139. package/js/common/product/small/dark/components/form.js +74 -74
  140. package/js/common/product/small/dark/mode.d.ts +0 -10
  141. package/js/common/product/small/dark/mode.js +0 -130
  142. package/js/common/product/small/light/components/button.d.ts +34 -7
  143. package/js/common/product/small/light/components/button.js +376 -73
  144. package/js/common/product/small/light/components/container.js +2 -2
  145. package/js/common/product/small/light/components/form.d.ts +2 -2
  146. package/js/common/product/small/light/components/form.js +76 -76
  147. package/js/common/product/small/light/mode.d.ts +0 -10
  148. package/js/common/product/small/light/mode.js +1 -131
  149. package/js/es6/frozenproduct/large/dark/components/button.d.ts +35 -16
  150. package/js/es6/frozenproduct/large/dark/components/button.js +37 -18
  151. package/js/es6/frozenproduct/large/dark/components/form.d.ts +5 -5
  152. package/js/es6/frozenproduct/large/dark/components/form.js +23 -23
  153. package/js/es6/frozenproduct/large/dark/mode.d.ts +0 -10
  154. package/js/es6/frozenproduct/large/dark/mode.js +0 -10
  155. package/js/es6/frozenproduct/large/light/components/button.d.ts +35 -16
  156. package/js/es6/frozenproduct/large/light/components/button.js +37 -18
  157. package/js/es6/frozenproduct/large/light/components/container.js +2 -2
  158. package/js/es6/frozenproduct/large/light/components/form.d.ts +5 -5
  159. package/js/es6/frozenproduct/large/light/components/form.js +25 -25
  160. package/js/es6/frozenproduct/large/light/mode.d.ts +0 -10
  161. package/js/es6/frozenproduct/large/light/mode.js +1 -11
  162. package/js/es6/frozenproduct/small/dark/components/button.d.ts +35 -16
  163. package/js/es6/frozenproduct/small/dark/components/button.js +37 -18
  164. package/js/es6/frozenproduct/small/dark/components/form.d.ts +5 -5
  165. package/js/es6/frozenproduct/small/dark/components/form.js +23 -23
  166. package/js/es6/frozenproduct/small/dark/mode.d.ts +0 -10
  167. package/js/es6/frozenproduct/small/dark/mode.js +0 -10
  168. package/js/es6/frozenproduct/small/light/components/button.d.ts +35 -16
  169. package/js/es6/frozenproduct/small/light/components/button.js +37 -18
  170. package/js/es6/frozenproduct/small/light/components/container.js +2 -2
  171. package/js/es6/frozenproduct/small/light/components/form.d.ts +5 -5
  172. package/js/es6/frozenproduct/small/light/components/form.js +25 -25
  173. package/js/es6/frozenproduct/small/light/mode.d.ts +0 -10
  174. package/js/es6/frozenproduct/small/light/mode.js +1 -11
  175. package/js/es6/marketing/large/dark/components/button.d.ts +35 -16
  176. package/js/es6/marketing/large/dark/components/button.js +37 -18
  177. package/js/es6/marketing/large/dark/components/form.d.ts +5 -5
  178. package/js/es6/marketing/large/dark/components/form.js +23 -23
  179. package/js/es6/marketing/large/dark/mode.d.ts +0 -10
  180. package/js/es6/marketing/large/dark/mode.js +0 -10
  181. package/js/es6/marketing/large/light/components/button.d.ts +35 -16
  182. package/js/es6/marketing/large/light/components/button.js +37 -18
  183. package/js/es6/marketing/large/light/components/container.js +2 -2
  184. package/js/es6/marketing/large/light/components/form.d.ts +5 -5
  185. package/js/es6/marketing/large/light/components/form.js +25 -25
  186. package/js/es6/marketing/large/light/mode.d.ts +0 -10
  187. package/js/es6/marketing/large/light/mode.js +1 -11
  188. package/js/es6/marketing/small/dark/components/button.d.ts +35 -16
  189. package/js/es6/marketing/small/dark/components/button.js +37 -18
  190. package/js/es6/marketing/small/dark/components/form.d.ts +5 -5
  191. package/js/es6/marketing/small/dark/components/form.js +23 -23
  192. package/js/es6/marketing/small/dark/mode.d.ts +0 -10
  193. package/js/es6/marketing/small/dark/mode.js +0 -10
  194. package/js/es6/marketing/small/light/components/button.d.ts +35 -16
  195. package/js/es6/marketing/small/light/components/button.js +37 -18
  196. package/js/es6/marketing/small/light/components/container.js +2 -2
  197. package/js/es6/marketing/small/light/components/form.d.ts +5 -5
  198. package/js/es6/marketing/small/light/components/form.js +25 -25
  199. package/js/es6/marketing/small/light/mode.d.ts +0 -10
  200. package/js/es6/marketing/small/light/mode.js +1 -11
  201. package/js/es6/product/large/dark/components/button.d.ts +35 -16
  202. package/js/es6/product/large/dark/components/button.js +37 -18
  203. package/js/es6/product/large/dark/components/form.d.ts +5 -5
  204. package/js/es6/product/large/dark/components/form.js +23 -23
  205. package/js/es6/product/large/dark/mode.d.ts +0 -10
  206. package/js/es6/product/large/dark/mode.js +0 -10
  207. package/js/es6/product/large/light/components/button.d.ts +35 -16
  208. package/js/es6/product/large/light/components/button.js +37 -18
  209. package/js/es6/product/large/light/components/container.js +2 -2
  210. package/js/es6/product/large/light/components/form.d.ts +5 -5
  211. package/js/es6/product/large/light/components/form.js +25 -25
  212. package/js/es6/product/large/light/mode.d.ts +0 -10
  213. package/js/es6/product/large/light/mode.js +1 -11
  214. package/js/es6/product/small/dark/components/button.d.ts +35 -16
  215. package/js/es6/product/small/dark/components/button.js +37 -18
  216. package/js/es6/product/small/dark/components/form.d.ts +5 -5
  217. package/js/es6/product/small/dark/components/form.js +23 -23
  218. package/js/es6/product/small/dark/mode.d.ts +0 -10
  219. package/js/es6/product/small/dark/mode.js +0 -10
  220. package/js/es6/product/small/light/components/button.d.ts +35 -16
  221. package/js/es6/product/small/light/components/button.js +37 -18
  222. package/js/es6/product/small/light/components/container.js +2 -2
  223. package/js/es6/product/small/light/components/form.d.ts +5 -5
  224. package/js/es6/product/small/light/components/form.js +25 -25
  225. package/js/es6/product/small/light/mode.d.ts +0 -10
  226. package/js/es6/product/small/light/mode.js +1 -11
  227. package/js/umd/frozenproduct/large/dark/components/button.js +378 -73
  228. package/js/umd/frozenproduct/large/dark/components/form.js +74 -74
  229. package/js/umd/frozenproduct/large/dark/mode.js +0 -130
  230. package/js/umd/frozenproduct/large/light/components/button.js +378 -73
  231. package/js/umd/frozenproduct/large/light/components/container.js +2 -2
  232. package/js/umd/frozenproduct/large/light/components/form.js +76 -76
  233. package/js/umd/frozenproduct/large/light/mode.js +1 -131
  234. package/js/umd/frozenproduct/small/dark/components/button.js +378 -73
  235. package/js/umd/frozenproduct/small/dark/components/form.js +74 -74
  236. package/js/umd/frozenproduct/small/dark/mode.js +0 -130
  237. package/js/umd/frozenproduct/small/light/components/button.js +378 -73
  238. package/js/umd/frozenproduct/small/light/components/container.js +2 -2
  239. package/js/umd/frozenproduct/small/light/components/form.js +76 -76
  240. package/js/umd/frozenproduct/small/light/mode.js +1 -131
  241. package/js/umd/marketing/large/dark/components/button.js +378 -73
  242. package/js/umd/marketing/large/dark/components/form.js +74 -74
  243. package/js/umd/marketing/large/dark/mode.js +0 -130
  244. package/js/umd/marketing/large/light/components/button.js +378 -73
  245. package/js/umd/marketing/large/light/components/container.js +2 -2
  246. package/js/umd/marketing/large/light/components/form.js +76 -76
  247. package/js/umd/marketing/large/light/mode.js +1 -131
  248. package/js/umd/marketing/small/dark/components/button.js +378 -73
  249. package/js/umd/marketing/small/dark/components/form.js +74 -74
  250. package/js/umd/marketing/small/dark/mode.js +0 -130
  251. package/js/umd/marketing/small/light/components/button.js +378 -73
  252. package/js/umd/marketing/small/light/components/container.js +2 -2
  253. package/js/umd/marketing/small/light/components/form.js +76 -76
  254. package/js/umd/marketing/small/light/mode.js +1 -131
  255. package/js/umd/product/large/dark/components/button.js +378 -73
  256. package/js/umd/product/large/dark/components/form.js +74 -74
  257. package/js/umd/product/large/dark/mode.js +0 -130
  258. package/js/umd/product/large/light/components/button.js +378 -73
  259. package/js/umd/product/large/light/components/container.js +2 -2
  260. package/js/umd/product/large/light/components/form.js +76 -76
  261. package/js/umd/product/large/light/mode.js +1 -131
  262. package/js/umd/product/small/dark/components/button.js +378 -73
  263. package/js/umd/product/small/dark/components/form.js +74 -74
  264. package/js/umd/product/small/dark/mode.js +0 -130
  265. package/js/umd/product/small/light/components/button.js +378 -73
  266. package/js/umd/product/small/light/components/container.js +2 -2
  267. package/js/umd/product/small/light/components/form.js +76 -76
  268. package/js/umd/product/small/light/mode.js +1 -131
  269. package/json/flat/frozenproduct/large/dark/components/button.json +32 -13
  270. package/json/flat/frozenproduct/large/dark/components/form.json +23 -23
  271. package/json/flat/frozenproduct/large/dark/mode.json +0 -10
  272. package/json/flat/frozenproduct/large/light/components/button.json +32 -13
  273. package/json/flat/frozenproduct/large/light/components/container.json +2 -2
  274. package/json/flat/frozenproduct/large/light/components/form.json +25 -25
  275. package/json/flat/frozenproduct/large/light/mode.json +1 -11
  276. package/json/flat/frozenproduct/small/dark/components/button.json +32 -13
  277. package/json/flat/frozenproduct/small/dark/components/form.json +23 -23
  278. package/json/flat/frozenproduct/small/dark/mode.json +0 -10
  279. package/json/flat/frozenproduct/small/light/components/button.json +32 -13
  280. package/json/flat/frozenproduct/small/light/components/container.json +2 -2
  281. package/json/flat/frozenproduct/small/light/components/form.json +25 -25
  282. package/json/flat/frozenproduct/small/light/mode.json +1 -11
  283. package/json/flat/marketing/large/dark/components/button.json +32 -13
  284. package/json/flat/marketing/large/dark/components/form.json +23 -23
  285. package/json/flat/marketing/large/dark/mode.json +0 -10
  286. package/json/flat/marketing/large/light/components/button.json +32 -13
  287. package/json/flat/marketing/large/light/components/container.json +2 -2
  288. package/json/flat/marketing/large/light/components/form.json +25 -25
  289. package/json/flat/marketing/large/light/mode.json +1 -11
  290. package/json/flat/marketing/small/dark/components/button.json +32 -13
  291. package/json/flat/marketing/small/dark/components/form.json +23 -23
  292. package/json/flat/marketing/small/dark/mode.json +0 -10
  293. package/json/flat/marketing/small/light/components/button.json +32 -13
  294. package/json/flat/marketing/small/light/components/container.json +2 -2
  295. package/json/flat/marketing/small/light/components/form.json +25 -25
  296. package/json/flat/marketing/small/light/mode.json +1 -11
  297. package/json/flat/product/large/dark/components/button.json +32 -13
  298. package/json/flat/product/large/dark/components/form.json +23 -23
  299. package/json/flat/product/large/dark/mode.json +0 -10
  300. package/json/flat/product/large/light/components/button.json +32 -13
  301. package/json/flat/product/large/light/components/container.json +2 -2
  302. package/json/flat/product/large/light/components/form.json +25 -25
  303. package/json/flat/product/large/light/mode.json +1 -11
  304. package/json/flat/product/small/dark/components/button.json +32 -13
  305. package/json/flat/product/small/dark/components/form.json +23 -23
  306. package/json/flat/product/small/dark/mode.json +0 -10
  307. package/json/flat/product/small/light/components/button.json +32 -13
  308. package/json/flat/product/small/light/components/container.json +2 -2
  309. package/json/flat/product/small/light/components/form.json +25 -25
  310. package/json/flat/product/small/light/mode.json +1 -11
  311. package/json/nested/frozenproduct/large/dark/components/button.json +36 -9
  312. package/json/nested/frozenproduct/large/dark/components/form.json +25 -25
  313. package/json/nested/frozenproduct/large/dark/mode.json +10 -20
  314. package/json/nested/frozenproduct/large/light/components/button.json +36 -9
  315. package/json/nested/frozenproduct/large/light/components/container.json +2 -2
  316. package/json/nested/frozenproduct/large/light/components/form.json +27 -27
  317. package/json/nested/frozenproduct/large/light/mode.json +11 -21
  318. package/json/nested/frozenproduct/small/dark/components/button.json +36 -9
  319. package/json/nested/frozenproduct/small/dark/components/form.json +25 -25
  320. package/json/nested/frozenproduct/small/dark/mode.json +10 -20
  321. package/json/nested/frozenproduct/small/light/components/button.json +36 -9
  322. package/json/nested/frozenproduct/small/light/components/container.json +2 -2
  323. package/json/nested/frozenproduct/small/light/components/form.json +27 -27
  324. package/json/nested/frozenproduct/small/light/mode.json +11 -21
  325. package/json/nested/marketing/large/dark/components/button.json +36 -9
  326. package/json/nested/marketing/large/dark/components/form.json +25 -25
  327. package/json/nested/marketing/large/dark/mode.json +10 -20
  328. package/json/nested/marketing/large/light/components/button.json +36 -9
  329. package/json/nested/marketing/large/light/components/container.json +2 -2
  330. package/json/nested/marketing/large/light/components/form.json +27 -27
  331. package/json/nested/marketing/large/light/mode.json +11 -21
  332. package/json/nested/marketing/small/dark/components/button.json +36 -9
  333. package/json/nested/marketing/small/dark/components/form.json +25 -25
  334. package/json/nested/marketing/small/dark/mode.json +10 -20
  335. package/json/nested/marketing/small/light/components/button.json +36 -9
  336. package/json/nested/marketing/small/light/components/container.json +2 -2
  337. package/json/nested/marketing/small/light/components/form.json +27 -27
  338. package/json/nested/marketing/small/light/mode.json +11 -21
  339. package/json/nested/product/large/dark/components/button.json +36 -9
  340. package/json/nested/product/large/dark/components/form.json +25 -25
  341. package/json/nested/product/large/dark/mode.json +10 -20
  342. package/json/nested/product/large/light/components/button.json +36 -9
  343. package/json/nested/product/large/light/components/container.json +2 -2
  344. package/json/nested/product/large/light/components/form.json +27 -27
  345. package/json/nested/product/large/light/mode.json +11 -21
  346. package/json/nested/product/small/dark/components/button.json +36 -9
  347. package/json/nested/product/small/dark/components/form.json +25 -25
  348. package/json/nested/product/small/dark/mode.json +10 -20
  349. package/json/nested/product/small/light/components/button.json +36 -9
  350. package/json/nested/product/small/light/components/container.json +2 -2
  351. package/json/nested/product/small/light/components/form.json +27 -27
  352. package/json/nested/product/small/light/mode.json +11 -21
  353. package/package.json +1 -1
  354. package/sage-design-tokens-9.1.0.tgz +0 -0
  355. package/scss/frozenproduct/large/components/button.scss +31 -12
  356. package/scss/frozenproduct/large/components/form.scss +23 -23
  357. package/scss/frozenproduct/large/dark.scss +0 -10
  358. package/scss/frozenproduct/large/light.scss +1 -11
  359. package/scss/frozenproduct/small/components/button.scss +31 -12
  360. package/scss/frozenproduct/small/components/form.scss +23 -23
  361. package/scss/frozenproduct/small/dark.scss +0 -10
  362. package/scss/frozenproduct/small/light.scss +1 -11
  363. package/scss/marketing/large/components/button.scss +31 -12
  364. package/scss/marketing/large/components/form.scss +23 -23
  365. package/scss/marketing/large/dark.scss +0 -10
  366. package/scss/marketing/large/light.scss +1 -11
  367. package/scss/marketing/small/components/button.scss +31 -12
  368. package/scss/marketing/small/components/form.scss +23 -23
  369. package/scss/marketing/small/dark.scss +0 -10
  370. package/scss/marketing/small/light.scss +1 -11
  371. package/scss/product/large/components/button.scss +31 -12
  372. package/scss/product/large/components/form.scss +23 -23
  373. package/scss/product/large/dark.scss +0 -10
  374. package/scss/product/large/light.scss +1 -11
  375. package/scss/product/small/components/button.scss +31 -12
  376. package/scss/product/small/components/form.scss +23 -23
  377. package/scss/product/small/dark.scss +0 -10
  378. package/scss/product/small/light.scss +1 -11
  379. package/sage-design-tokens-8.6.0.tgz +0 -0
package/css/frozenproduct/all.css CHANGED
@@ -154,36 +154,26 @@
154
154
  --modes-color-brand-copilot-no-bg-monochrome-light: #000000;
155
155
  --modes-color-custom-default-light: #00811F; /* This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
156
156
  --modes-color-custom-frozen-light: #008046; /* This is a derivative of Jade, and is the color to replace in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
157
- --modes-color-colorcode-blue-deep-light: #0071c3;
157
+ --modes-color-colorcode-blue-deep-light: #0071C3;
158
158
  --modes-color-colorcode-blue-muted-light: #CDE5FF;
159
- --modes-color-colorcode-blue-rich-light: #0084E1;
160
159
  --modes-color-colorcode-teal-deep-light: #007C7B;
161
160
  --modes-color-colorcode-teal-muted-light: #C1FBFB;
162
- --modes-color-colorcode-teal-rich-light: #009B99;
163
161
  --modes-color-colorcode-green-deep-light: #00811F;
164
162
  --modes-color-colorcode-green-muted-light: #C5FFC9;
165
- --modes-color-colorcode-green-rich-light: #00a128;
166
163
  --modes-color-colorcode-lime-deep-light: #637700;
167
164
  --modes-color-colorcode-lime-muted-light: #FFFF9C;
168
- --modes-color-colorcode-lime-rich-light: #819B00;
169
165
  --modes-color-colorcode-orange-deep-light: #C54300;
170
166
  --modes-color-colorcode-orange-muted-light: #FEEAB0;
171
- --modes-color-colorcode-orange-rich-light: #EA5100;
172
167
  --modes-color-colorcode-red-deep-light: #DC004E;
173
168
  --modes-color-colorcode-red-muted-light: #FFDBCF;
174
- --modes-color-colorcode-red-rich-light: #FE005B;
175
169
  --modes-color-colorcode-pink-deep-light: #C8269A;
176
170
  --modes-color-colorcode-pink-muted-light: #FFD7EE;
177
- --modes-color-colorcode-pink-rich-light: #e62db2;
178
171
  --modes-color-colorcode-purple-deep-light: #8F4CD7;
179
172
  --modes-color-colorcode-purple-muted-light: #E7DEF8;
180
- --modes-color-colorcode-purple-rich-light: #9C66DE;
181
173
  --modes-color-colorcode-slate-deep-light: #527386;
182
174
  --modes-color-colorcode-slate-muted-light: #D4E5F1;
183
- --modes-color-colorcode-slate-rich-light: #60869C;
184
175
  --modes-color-colorcode-gray-deep-light: #6F6F6F;
185
176
  --modes-color-colorcode-gray-muted-light: #E2E2E2;
186
- --modes-color-colorcode-gray-rich-light: #9b9b9b;
187
177
  --modes-color-generic-bg-nought-light: #FFFFFF;
188
178
  --modes-color-generic-bg-faint-light: #f3f3f3;
189
179
  --modes-color-generic-bg-delicate-light: #e8e8e8;
@@ -362,34 +352,24 @@
362
352
  --modes-color-custom-frozen-dark: #00D639; /* Replace this color in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
363
353
  --modes-color-colorcode-blue-deep-dark: #007FD9;
364
354
  --modes-color-colorcode-blue-muted-dark: #00293F;
365
- --modes-color-colorcode-blue-rich-dark: #0071c3;
366
355
  --modes-color-colorcode-teal-deep-dark: #008A89;
367
356
  --modes-color-colorcode-teal-muted-dark: #002B2A;
368
- --modes-color-colorcode-teal-rich-dark: #007C7B;
369
357
  --modes-color-colorcode-green-deep-dark: #009023;
370
358
  --modes-color-colorcode-green-muted-dark: #002D05;
371
- --modes-color-colorcode-green-rich-dark: #00811F;
372
359
  --modes-color-colorcode-lime-deep-dark: #6E8500;
373
360
  --modes-color-colorcode-lime-muted-dark: #171e00;
374
- --modes-color-colorcode-lime-rich-dark: #637700;
375
361
  --modes-color-colorcode-orange-deep-dark: #DB4B00;
376
362
  --modes-color-colorcode-orange-muted-dark: #380D00;
377
- --modes-color-colorcode-orange-rich-dark: #C54300;
378
363
  --modes-color-colorcode-red-deep-dark: #F50058;
379
364
  --modes-color-colorcode-red-muted-dark: #400011;
380
- --modes-color-colorcode-red-rich-dark: #DC004E;
381
365
  --modes-color-colorcode-pink-deep-dark: #DD2BAB;
382
366
  --modes-color-colorcode-pink-muted-dark: #3C002C;
383
- --modes-color-colorcode-pink-rich-dark: #C8269A;
384
367
  --modes-color-colorcode-purple-deep-dark: #985FDC;
385
368
  --modes-color-colorcode-purple-muted-dark: #270E41;
386
- --modes-color-colorcode-purple-rich-dark: #8F4CD7;
387
369
  --modes-color-colorcode-slate-deep-dark: #5C8196;
388
370
  --modes-color-colorcode-slate-muted-dark: #121D23;
389
- --modes-color-colorcode-slate-rich-dark: #527386;
390
371
  --modes-color-colorcode-gray-deep-dark: #7C7C7C;
391
372
  --modes-color-colorcode-gray-muted-dark: #1b1b1b;
392
- --modes-color-colorcode-gray-rich-dark: #6F6F6F;
393
373
  --modes-color-generic-bg-nought-dark: #000000;
394
374
  --modes-color-generic-bg-faint-dark: #0e0e0e;
395
375
  --modes-color-generic-bg-delicate-dark: #181818;
@@ -584,8 +564,8 @@
584
564
  --button-radius-none: var(--global-radius-none);
585
565
  --button-radius-fab: var(--global-radius-circle); /* FAB Button radius */
586
566
  --button-borderwidth-none: var(--global-borderwidth-none); /* Override on tertiary buttons within Button-toggle. */
587
- --button-borderwidth-tertiarymarketing: var(--global-borderwidth-none); /* tertiary button border used for a marketing override */
588
567
  --button-borderwidth-primary: var(--global-borderwidth-none); /* primary button border */
568
+ --button-borderwidth-tertiarymarketing: var(--global-borderwidth-none); /* tertiary button border used for a marketing override */
589
569
  --button-color-none: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark)); /* transparent override used for hiding colors when needed. */
590
570
  --button-color-ai-border-active: light-dark(var(--modes-color-interactive-ai-default-light), var(--modes-color-interactive-ai-default-dark));
591
571
  --button-color-ai-border-enabled: light-dark(var(--modes-color-interactive-ai-default-light), var(--modes-color-interactive-ai-default-dark));
@@ -599,12 +579,12 @@
599
579
  --button-typography-secondary-s: var(--global-typography-component-firm-s);
600
580
  --button-typography-secondary-m: var(--global-typography-component-firm-m);
601
581
  --button-typography-secondary-l: var(--global-typography-component-firm-l);
602
- --button-typography-tertiary-s: var(--global-typography-component-firm-s);
603
- --button-typography-tertiary-m: var(--global-typography-component-firm-m);
604
- --button-typography-tertiary-l: var(--global-typography-component-firm-l);
605
582
  --button-typography-subtle-s: var(--global-typography-component-firm-s);
606
583
  --button-typography-subtle-m: var(--global-typography-component-firm-m);
607
584
  --button-typography-subtle-l: var(--global-typography-component-firm-l);
585
+ --button-typography-tertiary-s: var(--global-typography-component-firm-s);
586
+ --button-typography-tertiary-m: var(--global-typography-component-firm-m);
587
+ --button-typography-tertiary-l: var(--global-typography-component-firm-l);
608
588
  --button-color-ai-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
609
589
  --button-color-destructive-primary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
610
590
  --button-color-destructive-secondary-border-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
@@ -627,6 +607,10 @@
627
607
  --button-size-s: var(--global-size-macro-s); /* min-height on S Buttons */
628
608
  --button-size-m: var(--global-size-macro-m); /* min-height on M Buttons */
629
609
  --button-size-l: var(--global-size-macro-l); /* min-height on L Buttons */
610
+ --button-size-toggle-xs: var(--global-size-macro-xs); /* min-height on button within S toggle group */
611
+ --button-size-toggle-s: var(--global-size-macro-s); /* min-height on S single toggle, and on button within M toggle group */
612
+ --button-size-toggle-m: var(--global-size-macro-m); /* min-height on M single toggle, and on button within L toggle group */
613
+ --button-size-toggle-l: var(--global-size-macro-l); /* min-height on L single toggle */
630
614
  --button-size-icon-m: var(--global-size-icon-m);
631
615
  --button-size-video-s: var(--global-size-macro-m);
632
616
  --button-size-video-m: var(--global-size-macro-xxl);
@@ -697,16 +681,24 @@
697
681
  --button-space-tertiary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only processing button */
698
682
  --button-space-tertiary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only processing button */
699
683
  --button-space-tertiary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only processing button */
684
+ --button-space-toggle-button-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS asset used within S toggle group */
685
+ --button-space-toggle-button-x-s: var(--global-space-macro-xxs); /* Left and right padding on S toggle buttons */
700
686
  --button-space-toggle-button-x-m: var(--global-space-macro-xs); /* Left and right padding on medium toggle buttons */
701
687
  --button-space-toggle-button-x-l: var(--global-space-macro-s); /* Left and right padding on buttons */
688
+ --button-space-toggle-button-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside toggle buttons */
702
689
  --button-space-toggle-button-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside toggle buttons */
703
690
  --button-space-toggle-button-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside toggle buttons */
704
- --button-space-toggle-button-y-m: var(--global-space-micro-s); /* Top and bottom padding on toggle buttons */
705
- --button-space-toggle-button-y-l: var(--global-space-micro-m); /* Top and bottom padding on toggle buttons */
691
+ --button-space-toggle-button-y-xs: var(--global-space-micro-xs)-0.5; /* Top and bottom padding on toggle buttons */
692
+ --button-space-toggle-button-y-s: var(--global-space-micro-l); /* Top and bottom padding on toggle buttons */
693
+ --button-space-toggle-button-y-m: var(--global-space-micro-l); /* Top and bottom padding on toggle buttons */
694
+ --button-space-toggle-button-y-l: var(--global-space-micro-xl)-0.5; /* Top and bottom padding on toggle buttons */
695
+ --button-space-toggle-container-x-s: var(--global-space-micro-s); /* Horizontal padding */
706
696
  --button-space-toggle-container-x-m: var(--global-space-micro-s); /* Horizontal padding */
707
697
  --button-space-toggle-container-x-l: var(--global-space-micro-s); /* Horizontal padding */
698
+ --button-space-toggle-container-xg-s: var(--global-space-micro-l); /* Spacing between buttons in Toggle. */
708
699
  --button-space-toggle-container-xg-m: var(--global-space-micro-l); /* Spacing between buttons in Toggle. */
709
700
  --button-space-toggle-container-xg-l: var(--global-space-micro-l); /* Spacing between buttons in Toggle. */
701
+ --button-space-toggle-container-y-s: var(--global-space-micro-s); /* Vertical padding */
710
702
  --button-space-toggle-container-y-m: var(--global-space-micro-s); /* Vertical padding */
711
703
  --button-space-toggle-container-y-l: var(--global-space-micro-s); /* Vertical padding */
712
704
  --button-space-video-x-s: var(--global-space-micro-xs); /* Left padding on play icon in video button */
@@ -760,12 +752,19 @@
760
752
  --button-radius-secondary-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
761
753
  --button-radius-secondary-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
762
754
  --button-radius-secondary-l: var(--global-radius-interactive-xxl); /* large tertiary button */
763
- --button-radius-tertiary-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
764
- --button-radius-tertiary-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
765
- --button-radius-tertiary-l: var(--global-radius-interactive-xxl); /* large tertiary button */
766
755
  --button-radius-subtle-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
767
756
  --button-radius-subtle-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
768
757
  --button-radius-subtle-l: var(--global-radius-interactive-xxl); /* large subtle button */
758
+ --button-radius-tertiary-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
759
+ --button-radius-tertiary-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
760
+ --button-radius-tertiary-l: var(--global-radius-interactive-xxl); /* large tertiary button */
761
+ --button-radius-toggle-button-xs: var(--global-radius-interactive-xxl)/2; /* XS single toggle button (used within S toggle group) */
762
+ --button-radius-toggle-button-s: var(--global-radius-interactive-l); /* S single toggle button (used within M toggle group) */
763
+ --button-radius-toggle-button-m: var(--global-radius-interactive-xl); /* M single toggle button (used within L toggle group) */
764
+ --button-radius-toggle-button-l: var(--global-radius-interactive-xxl); /* L single toggle button */
765
+ --button-radius-toggle-container-s: var(--global-radius-interactive-l); /* S toggle group */
766
+ --button-radius-toggle-container-m: var(--global-radius-interactive-xl); /* M toggle group */
767
+ --button-radius-toggle-container-l: var(--global-radius-interactive-xxl); /* L toggle group */
769
768
  --button-borderwidth-chip: var(--global-borderwidth-xs); /* chip button border width */
770
769
  --button-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary button. */
771
770
  --button-borderwidth-tertiary: var(--global-borderwidth-xs); /* tertiary button border */
@@ -1116,56 +1115,56 @@
1116
1115
  --form-radius-calendar-none: var(--global-radius-none); /* Calendar (start and end duration) */
1117
1116
  --form-radius-calendar-date: var(--global-radius-circle); /* Calendar date (hover & selected), */
1118
1117
  --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-border: light-dark(var(--modes-color-colorcode-blue-rich-light), var(--modes-color-colorcode-blue-rich-dark));
1118
+ --form-color-colorpicker-blue-border: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
1120
1119
  --form-color-colorpicker-blue-bg-alt: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
1121
1120
  --form-color-colorpicker-blue-bg-default: light-dark(var(--modes-color-colorcode-blue-muted-light), var(--modes-color-colorcode-blue-muted-dark));
1122
- --form-color-colorpicker-blue-pattern: light-dark(var(--modes-color-colorcode-blue-rich-light), var(--modes-color-colorcode-blue-rich-dark));
1121
+ --form-color-colorpicker-blue-pattern: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
1123
1122
  --form-color-colorpicker-blue-label-default: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1124
- --form-color-colorpicker-teal-border: light-dark(var(--modes-color-colorcode-teal-rich-light), var(--modes-color-colorcode-teal-rich-dark));
1123
+ --form-color-colorpicker-teal-border: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
1125
1124
  --form-color-colorpicker-teal-bg-alt: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
1126
1125
  --form-color-colorpicker-teal-bg-default: light-dark(var(--modes-color-colorcode-teal-muted-light), var(--modes-color-colorcode-teal-muted-dark));
1127
- --form-color-colorpicker-teal-pattern: light-dark(var(--modes-color-colorcode-teal-rich-light), var(--modes-color-colorcode-teal-rich-dark));
1126
+ --form-color-colorpicker-teal-pattern: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
1128
1127
  --form-color-colorpicker-teal-label-default: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1129
- --form-color-colorpicker-green-border: light-dark(var(--modes-color-colorcode-green-rich-light), var(--modes-color-colorcode-green-rich-dark));
1128
+ --form-color-colorpicker-green-border: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
1130
1129
  --form-color-colorpicker-green-bg-alt: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
1131
1130
  --form-color-colorpicker-green-bg-default: light-dark(var(--modes-color-colorcode-green-muted-light), var(--modes-color-colorcode-green-muted-dark));
1132
- --form-color-colorpicker-green-pattern: light-dark(var(--modes-color-colorcode-green-rich-light), var(--modes-color-colorcode-green-rich-dark));
1131
+ --form-color-colorpicker-green-pattern: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
1133
1132
  --form-color-colorpicker-green-label-default: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1134
- --form-color-colorpicker-lime-border: light-dark(var(--modes-color-colorcode-lime-rich-light), var(--modes-color-colorcode-lime-rich-dark));
1133
+ --form-color-colorpicker-lime-border: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
1135
1134
  --form-color-colorpicker-lime-bg-alt: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
1136
1135
  --form-color-colorpicker-lime-bg-default: light-dark(var(--modes-color-colorcode-lime-muted-light), var(--modes-color-colorcode-lime-muted-dark));
1137
- --form-color-colorpicker-lime-pattern: light-dark(var(--modes-color-colorcode-lime-rich-light), var(--modes-color-colorcode-lime-rich-dark));
1136
+ --form-color-colorpicker-lime-pattern: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
1138
1137
  --form-color-colorpicker-lime-label-default: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1139
- --form-color-colorpicker-orange-border: light-dark(var(--modes-color-colorcode-orange-rich-light), var(--modes-color-colorcode-orange-rich-dark));
1138
+ --form-color-colorpicker-orange-border: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1140
1139
  --form-color-colorpicker-orange-bg-alt: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1141
1140
  --form-color-colorpicker-orange-bg-default: light-dark(var(--modes-color-colorcode-orange-muted-light), var(--modes-color-colorcode-orange-muted-dark));
1142
- --form-color-colorpicker-orange-pattern: light-dark(var(--modes-color-colorcode-orange-rich-light), var(--modes-color-colorcode-orange-rich-dark));
1141
+ --form-color-colorpicker-orange-pattern: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1143
1142
  --form-color-colorpicker-orange-label-default: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1144
- --form-color-colorpicker-red-border: light-dark(var(--modes-color-colorcode-red-rich-light), var(--modes-color-colorcode-red-rich-dark));
1143
+ --form-color-colorpicker-red-border: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1145
1144
  --form-color-colorpicker-red-bg-alt: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1146
1145
  --form-color-colorpicker-red-bg-default: light-dark(var(--modes-color-colorcode-red-muted-light), var(--modes-color-colorcode-red-muted-dark));
1147
- --form-color-colorpicker-red-pattern: light-dark(var(--modes-color-colorcode-red-rich-light), var(--modes-color-colorcode-red-rich-dark));
1146
+ --form-color-colorpicker-red-pattern: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1148
1147
  --form-color-colorpicker-red-label-default: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1149
- --form-color-colorpicker-pink-border: light-dark(var(--modes-color-colorcode-pink-rich-light), var(--modes-color-colorcode-pink-rich-dark));
1148
+ --form-color-colorpicker-pink-border: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1150
1149
  --form-color-colorpicker-pink-bg-alt: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1151
1150
  --form-color-colorpicker-pink-bg-default: light-dark(var(--modes-color-colorcode-pink-muted-light), var(--modes-color-colorcode-pink-muted-dark));
1152
- --form-color-colorpicker-pink-pattern: light-dark(var(--modes-color-colorcode-pink-rich-light), var(--modes-color-colorcode-pink-rich-dark));
1151
+ --form-color-colorpicker-pink-pattern: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1153
1152
  --form-color-colorpicker-pink-label-default: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1154
- --form-color-colorpicker-purple-border: light-dark(var(--modes-color-colorcode-purple-rich-light), var(--modes-color-colorcode-purple-rich-dark));
1153
+ --form-color-colorpicker-purple-border: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1155
1154
  --form-color-colorpicker-purple-bg-alt: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1156
1155
  --form-color-colorpicker-purple-bg-default: light-dark(var(--modes-color-colorcode-purple-muted-light), var(--modes-color-colorcode-purple-muted-dark));
1157
- --form-color-colorpicker-purple-pattern: light-dark(var(--modes-color-colorcode-purple-rich-light), var(--modes-color-colorcode-purple-rich-dark));
1156
+ --form-color-colorpicker-purple-pattern: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1158
1157
  --form-color-colorpicker-purple-label-default: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1159
- --form-color-colorpicker-slate-border: light-dark(var(--modes-color-colorcode-slate-rich-light), var(--modes-color-colorcode-slate-rich-dark));
1160
- --form-color-colorpicker-slate-bg-alt: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1161
- --form-color-colorpicker-slate-bg-default: light-dark(var(--modes-color-colorcode-slate-muted-light), var(--modes-color-colorcode-slate-muted-dark));
1162
- --form-color-colorpicker-slate-pattern: light-dark(var(--modes-color-colorcode-slate-rich-light), var(--modes-color-colorcode-slate-rich-dark));
1163
- --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. */
1164
- --form-color-colorpicker-gray-border: light-dark(var(--modes-color-colorcode-gray-rich-light), var(--modes-color-colorcode-gray-rich-dark));
1158
+ --form-color-colorpicker-gray-border: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1165
1159
  --form-color-colorpicker-gray-bg-alt: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1166
1160
  --form-color-colorpicker-gray-bg-default: light-dark(var(--modes-color-colorcode-gray-muted-light), var(--modes-color-colorcode-gray-muted-dark));
1167
- --form-color-colorpicker-gray-pattern: light-dark(var(--modes-color-colorcode-gray-rich-light), var(--modes-color-colorcode-gray-rich-dark));
1161
+ --form-color-colorpicker-gray-pattern: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1168
1162
  --form-color-colorpicker-gray-label-default: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1163
+ --form-color-colorpicker-slate-border: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1164
+ --form-color-colorpicker-slate-bg-alt: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1165
+ --form-color-colorpicker-slate-bg-default: light-dark(var(--modes-color-colorcode-slate-muted-light), var(--modes-color-colorcode-slate-muted-dark));
1166
+ --form-color-colorpicker-slate-pattern: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1167
+ --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. */
1169
1168
  --form-color-labelset-label-required: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
1170
1169
  --form-color-validation-border-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
1171
1170
  --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 */
package/css/frozenproduct/large/components/button.css CHANGED
@@ -12,8 +12,8 @@
12
12
  --button-radius-none: var(--global-radius-none);
13
13
  --button-radius-fab: var(--global-radius-circle); /* FAB Button radius */
14
14
  --button-borderwidth-none: var(--global-borderwidth-none); /* Override on tertiary buttons within Button-toggle. */
15
- --button-borderwidth-tertiarymarketing: var(--global-borderwidth-none); /* tertiary button border used for a marketing override */
16
15
  --button-borderwidth-primary: var(--global-borderwidth-none); /* primary button border */
16
+ --button-borderwidth-tertiarymarketing: var(--global-borderwidth-none); /* tertiary button border used for a marketing override */
17
17
  --button-color-none: var(--modes-color-none); /* transparent override used for hiding colors when needed. */
18
18
  --button-color-ai-border-active: var(--modes-color-interactive-ai-default);
19
19
  --button-color-ai-border-enabled: var(--modes-color-interactive-ai-default);
@@ -27,24 +27,24 @@
27
27
  --button-typography-adaptive-secondary-s: var(--global-typography-adaptive-component-firm-s);
28
28
  --button-typography-adaptive-secondary-m: var(--global-typography-adaptive-component-firm-m);
29
29
  --button-typography-adaptive-secondary-l: var(--global-typography-adaptive-component-firm-l);
30
- --button-typography-adaptive-tertiary-s: var(--global-typography-adaptive-component-firm-s);
31
- --button-typography-adaptive-tertiary-m: var(--global-typography-adaptive-component-firm-m);
32
- --button-typography-adaptive-tertiary-l: var(--global-typography-adaptive-component-firm-l);
33
30
  --button-typography-adaptive-subtle-s: var(--global-typography-adaptive-component-firm-s);
34
31
  --button-typography-adaptive-subtle-m: var(--global-typography-adaptive-component-firm-m);
35
32
  --button-typography-adaptive-subtle-l: var(--global-typography-adaptive-component-firm-l);
33
+ --button-typography-adaptive-tertiary-s: var(--global-typography-adaptive-component-firm-s);
34
+ --button-typography-adaptive-tertiary-m: var(--global-typography-adaptive-component-firm-m);
35
+ --button-typography-adaptive-tertiary-l: var(--global-typography-adaptive-component-firm-l);
36
36
  --button-typography-responsive-primary-s: var(--global-typography-responsive-component-firm-s);
37
37
  --button-typography-responsive-primary-m: var(--global-typography-responsive-component-firm-m);
38
38
  --button-typography-responsive-primary-l: var(--global-typography-responsive-component-firm-l);
39
39
  --button-typography-responsive-secondary-s: var(--global-typography-responsive-component-firm-s);
40
40
  --button-typography-responsive-secondary-m: var(--global-typography-responsive-component-firm-m);
41
41
  --button-typography-responsive-secondary-l: var(--global-typography-responsive-component-firm-l);
42
- --button-typography-responsive-tertiary-s: var(--global-typography-responsive-component-firm-s);
43
- --button-typography-responsive-tertiary-m: var(--global-typography-responsive-component-firm-m);
44
- --button-typography-responsive-tertiary-l: var(--global-typography-responsive-component-firm-l);
45
42
  --button-typography-responsive-subtle-s: var(--global-typography-responsive-component-firm-s);
46
43
  --button-typography-responsive-subtle-m: var(--global-typography-responsive-component-firm-m);
47
44
  --button-typography-responsive-subtle-l: var(--global-typography-responsive-component-firm-l);
45
+ --button-typography-responsive-tertiary-s: var(--global-typography-responsive-component-firm-s);
46
+ --button-typography-responsive-tertiary-m: var(--global-typography-responsive-component-firm-m);
47
+ --button-typography-responsive-tertiary-l: var(--global-typography-responsive-component-firm-l);
48
48
  --button-color-ai-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
49
49
  --button-color-destructive-primary-bg-hover: var(--modes-color-interactive-danger-hover);
50
50
  --button-color-destructive-secondary-border-hover: var(--modes-color-interactive-danger-hover);
@@ -67,6 +67,10 @@
67
67
  --button-size-s: var(--global-size-macro-s); /* min-height on S Buttons */
68
68
  --button-size-m: var(--global-size-macro-m); /* min-height on M Buttons */
69
69
  --button-size-l: var(--global-size-macro-l); /* min-height on L Buttons */
70
+ --button-size-toggle-xs: var(--global-size-macro-xs); /* min-height on button within S toggle group */
71
+ --button-size-toggle-s: var(--global-size-macro-s); /* min-height on S single toggle, and on button within M toggle group */
72
+ --button-size-toggle-m: var(--global-size-macro-m); /* min-height on M single toggle, and on button within L toggle group */
73
+ --button-size-toggle-l: var(--global-size-macro-l); /* min-height on L single toggle */
70
74
  --button-size-icon-m: var(--global-size-icon-m);
71
75
  --button-size-video-s: var(--global-size-macro-m);
72
76
  --button-size-video-m: var(--global-size-macro-xxl);
@@ -137,16 +141,24 @@
137
141
  --button-space-tertiary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only processing button */
138
142
  --button-space-tertiary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only processing button */
139
143
  --button-space-tertiary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only processing button */
144
+ --button-space-toggle-button-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS asset used within S toggle group */
145
+ --button-space-toggle-button-x-s: var(--global-space-macro-xxs); /* Left and right padding on S toggle buttons */
140
146
  --button-space-toggle-button-x-m: var(--global-space-macro-xs); /* Left and right padding on medium toggle buttons */
141
147
  --button-space-toggle-button-x-l: var(--global-space-macro-s); /* Left and right padding on buttons */
148
+ --button-space-toggle-button-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside toggle buttons */
142
149
  --button-space-toggle-button-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside toggle buttons */
143
150
  --button-space-toggle-button-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside toggle buttons */
144
- --button-space-toggle-button-y-m: var(--global-space-micro-s); /* Top and bottom padding on toggle buttons */
145
- --button-space-toggle-button-y-l: var(--global-space-micro-m); /* Top and bottom padding on toggle buttons */
151
+ --button-space-toggle-button-y-xs: var(--global-space-micro-xs)-0.5; /* Top and bottom padding on toggle buttons */
152
+ --button-space-toggle-button-y-s: var(--global-space-micro-l); /* Top and bottom padding on toggle buttons */
153
+ --button-space-toggle-button-y-m: var(--global-space-micro-l); /* Top and bottom padding on toggle buttons */
154
+ --button-space-toggle-button-y-l: var(--global-space-micro-xl)-0.5; /* Top and bottom padding on toggle buttons */
155
+ --button-space-toggle-container-x-s: var(--global-space-micro-s); /* Horizontal padding */
146
156
  --button-space-toggle-container-x-m: var(--global-space-micro-s); /* Horizontal padding */
147
157
  --button-space-toggle-container-x-l: var(--global-space-micro-s); /* Horizontal padding */
158
+ --button-space-toggle-container-xg-s: var(--global-space-micro-l); /* Spacing between buttons in Toggle. */
148
159
  --button-space-toggle-container-xg-m: var(--global-space-micro-l); /* Spacing between buttons in Toggle. */
149
160
  --button-space-toggle-container-xg-l: var(--global-space-micro-l); /* Spacing between buttons in Toggle. */
161
+ --button-space-toggle-container-y-s: var(--global-space-micro-s); /* Vertical padding */
150
162
  --button-space-toggle-container-y-m: var(--global-space-micro-s); /* Vertical padding */
151
163
  --button-space-toggle-container-y-l: var(--global-space-micro-s); /* Vertical padding */
152
164
  --button-space-video-x-s: var(--global-space-micro-xs); /* Left padding on play icon in video button */
@@ -200,12 +212,19 @@
200
212
  --button-radius-secondary-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
201
213
  --button-radius-secondary-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
202
214
  --button-radius-secondary-l: var(--global-radius-interactive-xxl); /* large tertiary button */
203
- --button-radius-tertiary-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
204
- --button-radius-tertiary-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
205
- --button-radius-tertiary-l: var(--global-radius-interactive-xxl); /* large tertiary button */
206
215
  --button-radius-subtle-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
207
216
  --button-radius-subtle-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
208
217
  --button-radius-subtle-l: var(--global-radius-interactive-xxl); /* large subtle button */
218
+ --button-radius-tertiary-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
219
+ --button-radius-tertiary-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
220
+ --button-radius-tertiary-l: var(--global-radius-interactive-xxl); /* large tertiary button */
221
+ --button-radius-toggle-button-xs: var(--global-radius-interactive-xxl)/2; /* XS single toggle button (used within S toggle group) */
222
+ --button-radius-toggle-button-s: var(--global-radius-interactive-l); /* S single toggle button (used within M toggle group) */
223
+ --button-radius-toggle-button-m: var(--global-radius-interactive-xl); /* M single toggle button (used within L toggle group) */
224
+ --button-radius-toggle-button-l: var(--global-radius-interactive-xxl); /* L single toggle button */
225
+ --button-radius-toggle-container-s: var(--global-radius-interactive-l); /* S toggle group */
226
+ --button-radius-toggle-container-m: var(--global-radius-interactive-xl); /* M toggle group */
227
+ --button-radius-toggle-container-l: var(--global-radius-interactive-xxl); /* L toggle group */
209
228
  --button-borderwidth-chip: var(--global-borderwidth-xs); /* chip button border width */
210
229
  --button-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary button. */
211
230
  --button-borderwidth-tertiary: var(--global-borderwidth-xs); /* tertiary button border */
package/css/frozenproduct/large/components/form.css CHANGED
@@ -12,56 +12,56 @@
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
14
  --form-color-colorpicker-label-default: var(--modes-color-generic-content-extreme); /* Accessible on colorpicker bg-default colors. */
15
- --form-color-colorpicker-blue-border: var(--modes-color-colorcode-blue-rich);
15
+ --form-color-colorpicker-blue-border: var(--modes-color-colorcode-blue-deep);
16
16
  --form-color-colorpicker-blue-bg-alt: var(--modes-color-colorcode-blue-deep);
17
17
  --form-color-colorpicker-blue-bg-default: var(--modes-color-colorcode-blue-muted);
18
- --form-color-colorpicker-blue-pattern: var(--modes-color-colorcode-blue-rich);
18
+ --form-color-colorpicker-blue-pattern: var(--modes-color-colorcode-blue-deep);
19
19
  --form-color-colorpicker-blue-label-default: var(--modes-color-colorcode-blue-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
20
- --form-color-colorpicker-teal-border: var(--modes-color-colorcode-teal-rich);
20
+ --form-color-colorpicker-teal-border: var(--modes-color-colorcode-teal-deep);
21
21
  --form-color-colorpicker-teal-bg-alt: var(--modes-color-colorcode-teal-deep);
22
22
  --form-color-colorpicker-teal-bg-default: var(--modes-color-colorcode-teal-muted);
23
- --form-color-colorpicker-teal-pattern: var(--modes-color-colorcode-teal-rich);
23
+ --form-color-colorpicker-teal-pattern: var(--modes-color-colorcode-teal-deep);
24
24
  --form-color-colorpicker-teal-label-default: var(--modes-color-colorcode-teal-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
25
- --form-color-colorpicker-green-border: var(--modes-color-colorcode-green-rich);
25
+ --form-color-colorpicker-green-border: var(--modes-color-colorcode-green-deep);
26
26
  --form-color-colorpicker-green-bg-alt: var(--modes-color-colorcode-green-deep);
27
27
  --form-color-colorpicker-green-bg-default: var(--modes-color-colorcode-green-muted);
28
- --form-color-colorpicker-green-pattern: var(--modes-color-colorcode-green-rich);
28
+ --form-color-colorpicker-green-pattern: var(--modes-color-colorcode-green-deep);
29
29
  --form-color-colorpicker-green-label-default: var(--modes-color-colorcode-green-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
30
- --form-color-colorpicker-lime-border: var(--modes-color-colorcode-lime-rich);
30
+ --form-color-colorpicker-lime-border: var(--modes-color-colorcode-lime-deep);
31
31
  --form-color-colorpicker-lime-bg-alt: var(--modes-color-colorcode-lime-deep);
32
32
  --form-color-colorpicker-lime-bg-default: var(--modes-color-colorcode-lime-muted);
33
- --form-color-colorpicker-lime-pattern: var(--modes-color-colorcode-lime-rich);
33
+ --form-color-colorpicker-lime-pattern: var(--modes-color-colorcode-lime-deep);
34
34
  --form-color-colorpicker-lime-label-default: var(--modes-color-colorcode-lime-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
35
- --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-rich);
35
+ --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-deep);
36
36
  --form-color-colorpicker-orange-bg-alt: var(--modes-color-colorcode-orange-deep);
37
37
  --form-color-colorpicker-orange-bg-default: var(--modes-color-colorcode-orange-muted);
38
- --form-color-colorpicker-orange-pattern: var(--modes-color-colorcode-orange-rich);
38
+ --form-color-colorpicker-orange-pattern: var(--modes-color-colorcode-orange-deep);
39
39
  --form-color-colorpicker-orange-label-default: var(--modes-color-colorcode-orange-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
40
- --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-rich);
40
+ --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-deep);
41
41
  --form-color-colorpicker-red-bg-alt: var(--modes-color-colorcode-red-deep);
42
42
  --form-color-colorpicker-red-bg-default: var(--modes-color-colorcode-red-muted);
43
- --form-color-colorpicker-red-pattern: var(--modes-color-colorcode-red-rich);
43
+ --form-color-colorpicker-red-pattern: var(--modes-color-colorcode-red-deep);
44
44
  --form-color-colorpicker-red-label-default: var(--modes-color-colorcode-red-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
45
- --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-rich);
45
+ --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-deep);
46
46
  --form-color-colorpicker-pink-bg-alt: var(--modes-color-colorcode-pink-deep);
47
47
  --form-color-colorpicker-pink-bg-default: var(--modes-color-colorcode-pink-muted);
48
- --form-color-colorpicker-pink-pattern: var(--modes-color-colorcode-pink-rich);
48
+ --form-color-colorpicker-pink-pattern: var(--modes-color-colorcode-pink-deep);
49
49
  --form-color-colorpicker-pink-label-default: var(--modes-color-colorcode-pink-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
50
- --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-rich);
50
+ --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-deep);
51
51
  --form-color-colorpicker-purple-bg-alt: var(--modes-color-colorcode-purple-deep);
52
52
  --form-color-colorpicker-purple-bg-default: var(--modes-color-colorcode-purple-muted);
53
- --form-color-colorpicker-purple-pattern: var(--modes-color-colorcode-purple-rich);
53
+ --form-color-colorpicker-purple-pattern: var(--modes-color-colorcode-purple-deep);
54
54
  --form-color-colorpicker-purple-label-default: var(--modes-color-colorcode-purple-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
55
- --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-rich);
56
- --form-color-colorpicker-slate-bg-alt: var(--modes-color-colorcode-slate-deep);
57
- --form-color-colorpicker-slate-bg-default: var(--modes-color-colorcode-slate-muted);
58
- --form-color-colorpicker-slate-pattern: var(--modes-color-colorcode-slate-rich);
59
- --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. */
60
- --form-color-colorpicker-gray-border: var(--modes-color-colorcode-gray-rich);
55
+ --form-color-colorpicker-gray-border: var(--modes-color-colorcode-gray-deep);
61
56
  --form-color-colorpicker-gray-bg-alt: var(--modes-color-colorcode-gray-deep);
62
57
  --form-color-colorpicker-gray-bg-default: var(--modes-color-colorcode-gray-muted);
63
- --form-color-colorpicker-gray-pattern: var(--modes-color-colorcode-gray-rich);
58
+ --form-color-colorpicker-gray-pattern: var(--modes-color-colorcode-gray-deep);
64
59
  --form-color-colorpicker-gray-label-default: var(--modes-color-colorcode-gray-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
60
+ --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-deep);
61
+ --form-color-colorpicker-slate-bg-alt: var(--modes-color-colorcode-slate-deep);
62
+ --form-color-colorpicker-slate-bg-default: var(--modes-color-colorcode-slate-muted);
63
+ --form-color-colorpicker-slate-pattern: var(--modes-color-colorcode-slate-deep);
64
+ --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. */
65
65
  --form-color-labelset-label-required: var(--modes-color-interactive-danger-default);
66
66
  --form-color-validation-border-error: var(--modes-color-status-negative-default);
67
67
  --form-color-validation-bar-error: var(--modes-color-status-negative-default); /* error bar to left of inputs */
package/css/frozenproduct/large/dark.css CHANGED
@@ -14,34 +14,24 @@
14
14
  --modes-color-custom-frozen: #00D639; /* Replace this color in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
15
15
  --modes-color-colorcode-blue-deep: #007FD9;
16
16
  --modes-color-colorcode-blue-muted: #00293F;
17
- --modes-color-colorcode-blue-rich: #0071c3;
18
17
  --modes-color-colorcode-teal-deep: #008A89;
19
18
  --modes-color-colorcode-teal-muted: #002B2A;
20
- --modes-color-colorcode-teal-rich: #007C7B;
21
19
  --modes-color-colorcode-green-deep: #009023;
22
20
  --modes-color-colorcode-green-muted: #002D05;
23
- --modes-color-colorcode-green-rich: #00811F;
24
21
  --modes-color-colorcode-lime-deep: #6E8500;
25
22
  --modes-color-colorcode-lime-muted: #171e00;
26
- --modes-color-colorcode-lime-rich: #637700;
27
23
  --modes-color-colorcode-orange-deep: #DB4B00;
28
24
  --modes-color-colorcode-orange-muted: #380D00;
29
- --modes-color-colorcode-orange-rich: #C54300;
30
25
  --modes-color-colorcode-red-deep: #F50058;
31
26
  --modes-color-colorcode-red-muted: #400011;
32
- --modes-color-colorcode-red-rich: #DC004E;
33
27
  --modes-color-colorcode-pink-deep: #DD2BAB;
34
28
  --modes-color-colorcode-pink-muted: #3C002C;
35
- --modes-color-colorcode-pink-rich: #C8269A;
36
29
  --modes-color-colorcode-purple-deep: #985FDC;
37
30
  --modes-color-colorcode-purple-muted: #270E41;
38
- --modes-color-colorcode-purple-rich: #8F4CD7;
39
31
  --modes-color-colorcode-slate-deep: #5C8196;
40
32
  --modes-color-colorcode-slate-muted: #121D23;
41
- --modes-color-colorcode-slate-rich: #527386;
42
33
  --modes-color-colorcode-gray-deep: #7C7C7C;
43
34
  --modes-color-colorcode-gray-muted: #1b1b1b;
44
- --modes-color-colorcode-gray-rich: #6F6F6F;
45
35
  --modes-color-generic-bg-nought: #000000;
46
36
  --modes-color-generic-bg-faint: #0e0e0e;
47
37
  --modes-color-generic-bg-delicate: #181818;
package/css/frozenproduct/large/light.css CHANGED
@@ -12,36 +12,26 @@
12
12
  --modes-color-brand-copilot-no-bg-monochrome: #000000;
13
13
  --modes-color-custom-default: #00811F; /* This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
14
14
  --modes-color-custom-frozen: #008046; /* This is a derivative of Jade, and is the color to replace in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
15
- --modes-color-colorcode-blue-deep: #0071c3;
15
+ --modes-color-colorcode-blue-deep: #0071C3;
16
16
  --modes-color-colorcode-blue-muted: #CDE5FF;
17
- --modes-color-colorcode-blue-rich: #0084E1;
18
17
  --modes-color-colorcode-teal-deep: #007C7B;
19
18
  --modes-color-colorcode-teal-muted: #C1FBFB;
20
- --modes-color-colorcode-teal-rich: #009B99;
21
19
  --modes-color-colorcode-green-deep: #00811F;
22
20
  --modes-color-colorcode-green-muted: #C5FFC9;
23
- --modes-color-colorcode-green-rich: #00a128;
24
21
  --modes-color-colorcode-lime-deep: #637700;
25
22
  --modes-color-colorcode-lime-muted: #FFFF9C;
26
- --modes-color-colorcode-lime-rich: #819B00;
27
23
  --modes-color-colorcode-orange-deep: #C54300;
28
24
  --modes-color-colorcode-orange-muted: #FEEAB0;
29
- --modes-color-colorcode-orange-rich: #EA5100;
30
25
  --modes-color-colorcode-red-deep: #DC004E;
31
26
  --modes-color-colorcode-red-muted: #FFDBCF;
32
- --modes-color-colorcode-red-rich: #FE005B;
33
27
  --modes-color-colorcode-pink-deep: #C8269A;
34
28
  --modes-color-colorcode-pink-muted: #FFD7EE;
35
- --modes-color-colorcode-pink-rich: #e62db2;
36
29
  --modes-color-colorcode-purple-deep: #8F4CD7;
37
30
  --modes-color-colorcode-purple-muted: #E7DEF8;
38
- --modes-color-colorcode-purple-rich: #9C66DE;
39
31
  --modes-color-colorcode-slate-deep: #527386;
40
32
  --modes-color-colorcode-slate-muted: #D4E5F1;
41
- --modes-color-colorcode-slate-rich: #60869C;
42
33
  --modes-color-colorcode-gray-deep: #6F6F6F;
43
34
  --modes-color-colorcode-gray-muted: #E2E2E2;
44
- --modes-color-colorcode-gray-rich: #9b9b9b;
45
35
  --modes-color-generic-bg-nought: #FFFFFF;
46
36
  --modes-color-generic-bg-faint: #f3f3f3;
47
37
  --modes-color-generic-bg-delicate: #e8e8e8;