@sage/design-tokens 8.2.0 → 8.4.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 (566) hide show
  1. package/css/frozenproduct/all.css +154 -17
  2. package/css/frozenproduct/large/components/badge.css +2 -1
  3. package/css/frozenproduct/large/components/container.css +36 -14
  4. package/css/frozenproduct/large/components/form.css +52 -0
  5. package/css/frozenproduct/large/components/tab.css +4 -2
  6. package/css/frozenproduct/large/dark.css +30 -0
  7. package/css/frozenproduct/large/light.css +30 -0
  8. package/css/frozenproduct/small/components/badge.css +2 -1
  9. package/css/frozenproduct/small/components/container.css +36 -14
  10. package/css/frozenproduct/small/components/form.css +52 -0
  11. package/css/frozenproduct/small/components/tab.css +4 -2
  12. package/css/frozenproduct/small/dark.css +30 -0
  13. package/css/frozenproduct/small/light.css +30 -0
  14. package/css/marketing/all.css +154 -17
  15. package/css/marketing/large/components/badge.css +2 -1
  16. package/css/marketing/large/components/container.css +36 -14
  17. package/css/marketing/large/components/form.css +52 -0
  18. package/css/marketing/large/components/tab.css +4 -2
  19. package/css/marketing/large/dark.css +30 -0
  20. package/css/marketing/large/light.css +30 -0
  21. package/css/marketing/small/components/badge.css +2 -1
  22. package/css/marketing/small/components/container.css +36 -14
  23. package/css/marketing/small/components/form.css +52 -0
  24. package/css/marketing/small/components/tab.css +4 -2
  25. package/css/marketing/small/dark.css +30 -0
  26. package/css/marketing/small/light.css +30 -0
  27. package/css/product/all.css +154 -17
  28. package/css/product/large/components/badge.css +2 -1
  29. package/css/product/large/components/container.css +36 -14
  30. package/css/product/large/components/form.css +52 -0
  31. package/css/product/large/components/tab.css +4 -2
  32. package/css/product/large/dark.css +30 -0
  33. package/css/product/large/light.css +30 -0
  34. package/css/product/small/components/badge.css +2 -1
  35. package/css/product/small/components/container.css +36 -14
  36. package/css/product/small/components/form.css +52 -0
  37. package/css/product/small/components/tab.css +4 -2
  38. package/css/product/small/dark.css +30 -0
  39. package/css/product/small/light.css +30 -0
  40. package/ios/frozenproduct/large/dark/components/badge.h +1 -0
  41. package/ios/frozenproduct/large/dark/components/container.h +36 -14
  42. package/ios/frozenproduct/large/dark/components/form.h +52 -0
  43. package/ios/frozenproduct/large/dark/components/tab.h +2 -0
  44. package/ios/frozenproduct/large/dark/mode.h +30 -0
  45. package/ios/frozenproduct/large/light/components/badge.h +1 -0
  46. package/ios/frozenproduct/large/light/components/container.h +36 -14
  47. package/ios/frozenproduct/large/light/components/form.h +52 -0
  48. package/ios/frozenproduct/large/light/components/tab.h +2 -0
  49. package/ios/frozenproduct/large/light/mode.h +30 -0
  50. package/ios/frozenproduct/small/dark/components/badge.h +1 -0
  51. package/ios/frozenproduct/small/dark/components/container.h +36 -14
  52. package/ios/frozenproduct/small/dark/components/form.h +52 -0
  53. package/ios/frozenproduct/small/dark/components/tab.h +2 -0
  54. package/ios/frozenproduct/small/dark/mode.h +30 -0
  55. package/ios/frozenproduct/small/light/components/badge.h +1 -0
  56. package/ios/frozenproduct/small/light/components/container.h +36 -14
  57. package/ios/frozenproduct/small/light/components/form.h +52 -0
  58. package/ios/frozenproduct/small/light/components/tab.h +2 -0
  59. package/ios/frozenproduct/small/light/mode.h +30 -0
  60. package/ios/marketing/large/dark/components/badge.h +1 -0
  61. package/ios/marketing/large/dark/components/container.h +36 -14
  62. package/ios/marketing/large/dark/components/form.h +52 -0
  63. package/ios/marketing/large/dark/components/tab.h +2 -0
  64. package/ios/marketing/large/dark/mode.h +30 -0
  65. package/ios/marketing/large/light/components/badge.h +1 -0
  66. package/ios/marketing/large/light/components/container.h +36 -14
  67. package/ios/marketing/large/light/components/form.h +52 -0
  68. package/ios/marketing/large/light/components/tab.h +2 -0
  69. package/ios/marketing/large/light/mode.h +30 -0
  70. package/ios/marketing/small/dark/components/badge.h +1 -0
  71. package/ios/marketing/small/dark/components/container.h +36 -14
  72. package/ios/marketing/small/dark/components/form.h +52 -0
  73. package/ios/marketing/small/dark/components/tab.h +2 -0
  74. package/ios/marketing/small/dark/mode.h +30 -0
  75. package/ios/marketing/small/light/components/badge.h +1 -0
  76. package/ios/marketing/small/light/components/container.h +36 -14
  77. package/ios/marketing/small/light/components/form.h +52 -0
  78. package/ios/marketing/small/light/components/tab.h +2 -0
  79. package/ios/marketing/small/light/mode.h +30 -0
  80. package/ios/product/large/dark/components/badge.h +1 -0
  81. package/ios/product/large/dark/components/container.h +36 -14
  82. package/ios/product/large/dark/components/form.h +52 -0
  83. package/ios/product/large/dark/components/tab.h +2 -0
  84. package/ios/product/large/dark/mode.h +30 -0
  85. package/ios/product/large/light/components/badge.h +1 -0
  86. package/ios/product/large/light/components/container.h +36 -14
  87. package/ios/product/large/light/components/form.h +52 -0
  88. package/ios/product/large/light/components/tab.h +2 -0
  89. package/ios/product/large/light/mode.h +30 -0
  90. package/ios/product/small/dark/components/badge.h +1 -0
  91. package/ios/product/small/dark/components/container.h +36 -14
  92. package/ios/product/small/dark/components/form.h +52 -0
  93. package/ios/product/small/dark/components/tab.h +2 -0
  94. package/ios/product/small/dark/mode.h +30 -0
  95. package/ios/product/small/light/components/badge.h +1 -0
  96. package/ios/product/small/light/components/container.h +36 -14
  97. package/ios/product/small/light/components/form.h +52 -0
  98. package/ios/product/small/light/components/tab.h +2 -0
  99. package/ios/product/small/light/mode.h +30 -0
  100. package/js/common/frozenproduct/large/dark/components/badge.d.ts +1 -0
  101. package/js/common/frozenproduct/large/dark/components/badge.js +15 -0
  102. package/js/common/frozenproduct/large/dark/components/container.d.ts +64 -20
  103. package/js/common/frozenproduct/large/dark/components/container.js +487 -175
  104. package/js/common/frozenproduct/large/dark/components/form.d.ts +74 -0
  105. package/js/common/frozenproduct/large/dark/components/form.js +742 -0
  106. package/js/common/frozenproduct/large/dark/components/tab.d.ts +2 -0
  107. package/js/common/frozenproduct/large/dark/components/tab.js +26 -4
  108. package/js/common/frozenproduct/large/dark/mode.d.ts +52 -0
  109. package/js/common/frozenproduct/large/dark/mode.js +412 -0
  110. package/js/common/frozenproduct/large/light/components/badge.d.ts +1 -0
  111. package/js/common/frozenproduct/large/light/components/badge.js +15 -0
  112. package/js/common/frozenproduct/large/light/components/container.d.ts +64 -20
  113. package/js/common/frozenproduct/large/light/components/container.js +487 -175
  114. package/js/common/frozenproduct/large/light/components/form.d.ts +74 -0
  115. package/js/common/frozenproduct/large/light/components/form.js +742 -0
  116. package/js/common/frozenproduct/large/light/components/tab.d.ts +2 -0
  117. package/js/common/frozenproduct/large/light/components/tab.js +26 -4
  118. package/js/common/frozenproduct/large/light/mode.d.ts +52 -0
  119. package/js/common/frozenproduct/large/light/mode.js +412 -0
  120. package/js/common/frozenproduct/small/dark/components/badge.d.ts +1 -0
  121. package/js/common/frozenproduct/small/dark/components/badge.js +15 -0
  122. package/js/common/frozenproduct/small/dark/components/container.d.ts +64 -20
  123. package/js/common/frozenproduct/small/dark/components/container.js +487 -175
  124. package/js/common/frozenproduct/small/dark/components/form.d.ts +74 -0
  125. package/js/common/frozenproduct/small/dark/components/form.js +742 -0
  126. package/js/common/frozenproduct/small/dark/components/tab.d.ts +2 -0
  127. package/js/common/frozenproduct/small/dark/components/tab.js +26 -4
  128. package/js/common/frozenproduct/small/dark/mode.d.ts +52 -0
  129. package/js/common/frozenproduct/small/dark/mode.js +412 -0
  130. package/js/common/frozenproduct/small/light/components/badge.d.ts +1 -0
  131. package/js/common/frozenproduct/small/light/components/badge.js +15 -0
  132. package/js/common/frozenproduct/small/light/components/container.d.ts +64 -20
  133. package/js/common/frozenproduct/small/light/components/container.js +487 -175
  134. package/js/common/frozenproduct/small/light/components/form.d.ts +74 -0
  135. package/js/common/frozenproduct/small/light/components/form.js +742 -0
  136. package/js/common/frozenproduct/small/light/components/tab.d.ts +2 -0
  137. package/js/common/frozenproduct/small/light/components/tab.js +26 -4
  138. package/js/common/frozenproduct/small/light/mode.d.ts +52 -0
  139. package/js/common/frozenproduct/small/light/mode.js +412 -0
  140. package/js/common/marketing/large/dark/components/badge.d.ts +1 -0
  141. package/js/common/marketing/large/dark/components/badge.js +15 -0
  142. package/js/common/marketing/large/dark/components/container.d.ts +64 -20
  143. package/js/common/marketing/large/dark/components/container.js +487 -175
  144. package/js/common/marketing/large/dark/components/form.d.ts +74 -0
  145. package/js/common/marketing/large/dark/components/form.js +742 -0
  146. package/js/common/marketing/large/dark/components/tab.d.ts +2 -0
  147. package/js/common/marketing/large/dark/components/tab.js +26 -4
  148. package/js/common/marketing/large/dark/mode.d.ts +52 -0
  149. package/js/common/marketing/large/dark/mode.js +412 -0
  150. package/js/common/marketing/large/light/components/badge.d.ts +1 -0
  151. package/js/common/marketing/large/light/components/badge.js +15 -0
  152. package/js/common/marketing/large/light/components/container.d.ts +64 -20
  153. package/js/common/marketing/large/light/components/container.js +487 -175
  154. package/js/common/marketing/large/light/components/form.d.ts +74 -0
  155. package/js/common/marketing/large/light/components/form.js +742 -0
  156. package/js/common/marketing/large/light/components/tab.d.ts +2 -0
  157. package/js/common/marketing/large/light/components/tab.js +26 -4
  158. package/js/common/marketing/large/light/mode.d.ts +52 -0
  159. package/js/common/marketing/large/light/mode.js +412 -0
  160. package/js/common/marketing/small/dark/components/badge.d.ts +1 -0
  161. package/js/common/marketing/small/dark/components/badge.js +15 -0
  162. package/js/common/marketing/small/dark/components/container.d.ts +64 -20
  163. package/js/common/marketing/small/dark/components/container.js +487 -175
  164. package/js/common/marketing/small/dark/components/form.d.ts +74 -0
  165. package/js/common/marketing/small/dark/components/form.js +742 -0
  166. package/js/common/marketing/small/dark/components/tab.d.ts +2 -0
  167. package/js/common/marketing/small/dark/components/tab.js +26 -4
  168. package/js/common/marketing/small/dark/mode.d.ts +52 -0
  169. package/js/common/marketing/small/dark/mode.js +412 -0
  170. package/js/common/marketing/small/light/components/badge.d.ts +1 -0
  171. package/js/common/marketing/small/light/components/badge.js +15 -0
  172. package/js/common/marketing/small/light/components/container.d.ts +64 -20
  173. package/js/common/marketing/small/light/components/container.js +487 -175
  174. package/js/common/marketing/small/light/components/form.d.ts +74 -0
  175. package/js/common/marketing/small/light/components/form.js +742 -0
  176. package/js/common/marketing/small/light/components/tab.d.ts +2 -0
  177. package/js/common/marketing/small/light/components/tab.js +26 -4
  178. package/js/common/marketing/small/light/mode.d.ts +52 -0
  179. package/js/common/marketing/small/light/mode.js +412 -0
  180. package/js/common/product/large/dark/components/badge.d.ts +1 -0
  181. package/js/common/product/large/dark/components/badge.js +15 -0
  182. package/js/common/product/large/dark/components/container.d.ts +64 -20
  183. package/js/common/product/large/dark/components/container.js +487 -175
  184. package/js/common/product/large/dark/components/form.d.ts +74 -0
  185. package/js/common/product/large/dark/components/form.js +742 -0
  186. package/js/common/product/large/dark/components/tab.d.ts +2 -0
  187. package/js/common/product/large/dark/components/tab.js +26 -4
  188. package/js/common/product/large/dark/mode.d.ts +52 -0
  189. package/js/common/product/large/dark/mode.js +412 -0
  190. package/js/common/product/large/light/components/badge.d.ts +1 -0
  191. package/js/common/product/large/light/components/badge.js +15 -0
  192. package/js/common/product/large/light/components/container.d.ts +64 -20
  193. package/js/common/product/large/light/components/container.js +487 -175
  194. package/js/common/product/large/light/components/form.d.ts +74 -0
  195. package/js/common/product/large/light/components/form.js +742 -0
  196. package/js/common/product/large/light/components/tab.d.ts +2 -0
  197. package/js/common/product/large/light/components/tab.js +26 -4
  198. package/js/common/product/large/light/mode.d.ts +52 -0
  199. package/js/common/product/large/light/mode.js +412 -0
  200. package/js/common/product/small/dark/components/badge.d.ts +1 -0
  201. package/js/common/product/small/dark/components/badge.js +15 -0
  202. package/js/common/product/small/dark/components/container.d.ts +64 -20
  203. package/js/common/product/small/dark/components/container.js +487 -175
  204. package/js/common/product/small/dark/components/form.d.ts +74 -0
  205. package/js/common/product/small/dark/components/form.js +742 -0
  206. package/js/common/product/small/dark/components/tab.d.ts +2 -0
  207. package/js/common/product/small/dark/components/tab.js +26 -4
  208. package/js/common/product/small/dark/mode.d.ts +52 -0
  209. package/js/common/product/small/dark/mode.js +412 -0
  210. package/js/common/product/small/light/components/badge.d.ts +1 -0
  211. package/js/common/product/small/light/components/badge.js +15 -0
  212. package/js/common/product/small/light/components/container.d.ts +64 -20
  213. package/js/common/product/small/light/components/container.js +487 -175
  214. package/js/common/product/small/light/components/form.d.ts +74 -0
  215. package/js/common/product/small/light/components/form.js +742 -0
  216. package/js/common/product/small/light/components/tab.d.ts +2 -0
  217. package/js/common/product/small/light/components/tab.js +26 -4
  218. package/js/common/product/small/light/mode.d.ts +52 -0
  219. package/js/common/product/small/light/mode.js +412 -0
  220. package/js/es6/frozenproduct/large/dark/components/badge.d.ts +1 -0
  221. package/js/es6/frozenproduct/large/dark/components/badge.js +1 -0
  222. package/js/es6/frozenproduct/large/dark/components/container.d.ts +36 -14
  223. package/js/es6/frozenproduct/large/dark/components/container.js +36 -14
  224. package/js/es6/frozenproduct/large/dark/components/form.d.ts +52 -0
  225. package/js/es6/frozenproduct/large/dark/components/form.js +52 -0
  226. package/js/es6/frozenproduct/large/dark/components/tab.d.ts +2 -0
  227. package/js/es6/frozenproduct/large/dark/components/tab.js +2 -0
  228. package/js/es6/frozenproduct/large/dark/mode.d.ts +30 -0
  229. package/js/es6/frozenproduct/large/dark/mode.js +30 -0
  230. package/js/es6/frozenproduct/large/light/components/badge.d.ts +1 -0
  231. package/js/es6/frozenproduct/large/light/components/badge.js +1 -0
  232. package/js/es6/frozenproduct/large/light/components/container.d.ts +36 -14
  233. package/js/es6/frozenproduct/large/light/components/container.js +36 -14
  234. package/js/es6/frozenproduct/large/light/components/form.d.ts +52 -0
  235. package/js/es6/frozenproduct/large/light/components/form.js +52 -0
  236. package/js/es6/frozenproduct/large/light/components/tab.d.ts +2 -0
  237. package/js/es6/frozenproduct/large/light/components/tab.js +2 -0
  238. package/js/es6/frozenproduct/large/light/mode.d.ts +30 -0
  239. package/js/es6/frozenproduct/large/light/mode.js +30 -0
  240. package/js/es6/frozenproduct/small/dark/components/badge.d.ts +1 -0
  241. package/js/es6/frozenproduct/small/dark/components/badge.js +1 -0
  242. package/js/es6/frozenproduct/small/dark/components/container.d.ts +36 -14
  243. package/js/es6/frozenproduct/small/dark/components/container.js +36 -14
  244. package/js/es6/frozenproduct/small/dark/components/form.d.ts +52 -0
  245. package/js/es6/frozenproduct/small/dark/components/form.js +52 -0
  246. package/js/es6/frozenproduct/small/dark/components/tab.d.ts +2 -0
  247. package/js/es6/frozenproduct/small/dark/components/tab.js +2 -0
  248. package/js/es6/frozenproduct/small/dark/mode.d.ts +30 -0
  249. package/js/es6/frozenproduct/small/dark/mode.js +30 -0
  250. package/js/es6/frozenproduct/small/light/components/badge.d.ts +1 -0
  251. package/js/es6/frozenproduct/small/light/components/badge.js +1 -0
  252. package/js/es6/frozenproduct/small/light/components/container.d.ts +36 -14
  253. package/js/es6/frozenproduct/small/light/components/container.js +36 -14
  254. package/js/es6/frozenproduct/small/light/components/form.d.ts +52 -0
  255. package/js/es6/frozenproduct/small/light/components/form.js +52 -0
  256. package/js/es6/frozenproduct/small/light/components/tab.d.ts +2 -0
  257. package/js/es6/frozenproduct/small/light/components/tab.js +2 -0
  258. package/js/es6/frozenproduct/small/light/mode.d.ts +30 -0
  259. package/js/es6/frozenproduct/small/light/mode.js +30 -0
  260. package/js/es6/marketing/large/dark/components/badge.d.ts +1 -0
  261. package/js/es6/marketing/large/dark/components/badge.js +1 -0
  262. package/js/es6/marketing/large/dark/components/container.d.ts +36 -14
  263. package/js/es6/marketing/large/dark/components/container.js +36 -14
  264. package/js/es6/marketing/large/dark/components/form.d.ts +52 -0
  265. package/js/es6/marketing/large/dark/components/form.js +52 -0
  266. package/js/es6/marketing/large/dark/components/tab.d.ts +2 -0
  267. package/js/es6/marketing/large/dark/components/tab.js +2 -0
  268. package/js/es6/marketing/large/dark/mode.d.ts +30 -0
  269. package/js/es6/marketing/large/dark/mode.js +30 -0
  270. package/js/es6/marketing/large/light/components/badge.d.ts +1 -0
  271. package/js/es6/marketing/large/light/components/badge.js +1 -0
  272. package/js/es6/marketing/large/light/components/container.d.ts +36 -14
  273. package/js/es6/marketing/large/light/components/container.js +36 -14
  274. package/js/es6/marketing/large/light/components/form.d.ts +52 -0
  275. package/js/es6/marketing/large/light/components/form.js +52 -0
  276. package/js/es6/marketing/large/light/components/tab.d.ts +2 -0
  277. package/js/es6/marketing/large/light/components/tab.js +2 -0
  278. package/js/es6/marketing/large/light/mode.d.ts +30 -0
  279. package/js/es6/marketing/large/light/mode.js +30 -0
  280. package/js/es6/marketing/small/dark/components/badge.d.ts +1 -0
  281. package/js/es6/marketing/small/dark/components/badge.js +1 -0
  282. package/js/es6/marketing/small/dark/components/container.d.ts +36 -14
  283. package/js/es6/marketing/small/dark/components/container.js +36 -14
  284. package/js/es6/marketing/small/dark/components/form.d.ts +52 -0
  285. package/js/es6/marketing/small/dark/components/form.js +52 -0
  286. package/js/es6/marketing/small/dark/components/tab.d.ts +2 -0
  287. package/js/es6/marketing/small/dark/components/tab.js +2 -0
  288. package/js/es6/marketing/small/dark/mode.d.ts +30 -0
  289. package/js/es6/marketing/small/dark/mode.js +30 -0
  290. package/js/es6/marketing/small/light/components/badge.d.ts +1 -0
  291. package/js/es6/marketing/small/light/components/badge.js +1 -0
  292. package/js/es6/marketing/small/light/components/container.d.ts +36 -14
  293. package/js/es6/marketing/small/light/components/container.js +36 -14
  294. package/js/es6/marketing/small/light/components/form.d.ts +52 -0
  295. package/js/es6/marketing/small/light/components/form.js +52 -0
  296. package/js/es6/marketing/small/light/components/tab.d.ts +2 -0
  297. package/js/es6/marketing/small/light/components/tab.js +2 -0
  298. package/js/es6/marketing/small/light/mode.d.ts +30 -0
  299. package/js/es6/marketing/small/light/mode.js +30 -0
  300. package/js/es6/product/large/dark/components/badge.d.ts +1 -0
  301. package/js/es6/product/large/dark/components/badge.js +1 -0
  302. package/js/es6/product/large/dark/components/container.d.ts +36 -14
  303. package/js/es6/product/large/dark/components/container.js +36 -14
  304. package/js/es6/product/large/dark/components/form.d.ts +52 -0
  305. package/js/es6/product/large/dark/components/form.js +52 -0
  306. package/js/es6/product/large/dark/components/tab.d.ts +2 -0
  307. package/js/es6/product/large/dark/components/tab.js +2 -0
  308. package/js/es6/product/large/dark/mode.d.ts +30 -0
  309. package/js/es6/product/large/dark/mode.js +30 -0
  310. package/js/es6/product/large/light/components/badge.d.ts +1 -0
  311. package/js/es6/product/large/light/components/badge.js +1 -0
  312. package/js/es6/product/large/light/components/container.d.ts +36 -14
  313. package/js/es6/product/large/light/components/container.js +36 -14
  314. package/js/es6/product/large/light/components/form.d.ts +52 -0
  315. package/js/es6/product/large/light/components/form.js +52 -0
  316. package/js/es6/product/large/light/components/tab.d.ts +2 -0
  317. package/js/es6/product/large/light/components/tab.js +2 -0
  318. package/js/es6/product/large/light/mode.d.ts +30 -0
  319. package/js/es6/product/large/light/mode.js +30 -0
  320. package/js/es6/product/small/dark/components/badge.d.ts +1 -0
  321. package/js/es6/product/small/dark/components/badge.js +1 -0
  322. package/js/es6/product/small/dark/components/container.d.ts +36 -14
  323. package/js/es6/product/small/dark/components/container.js +36 -14
  324. package/js/es6/product/small/dark/components/form.d.ts +52 -0
  325. package/js/es6/product/small/dark/components/form.js +52 -0
  326. package/js/es6/product/small/dark/components/tab.d.ts +2 -0
  327. package/js/es6/product/small/dark/components/tab.js +2 -0
  328. package/js/es6/product/small/dark/mode.d.ts +30 -0
  329. package/js/es6/product/small/dark/mode.js +30 -0
  330. package/js/es6/product/small/light/components/badge.d.ts +1 -0
  331. package/js/es6/product/small/light/components/badge.js +1 -0
  332. package/js/es6/product/small/light/components/container.d.ts +36 -14
  333. package/js/es6/product/small/light/components/container.js +36 -14
  334. package/js/es6/product/small/light/components/form.d.ts +52 -0
  335. package/js/es6/product/small/light/components/form.js +52 -0
  336. package/js/es6/product/small/light/components/tab.d.ts +2 -0
  337. package/js/es6/product/small/light/components/tab.js +2 -0
  338. package/js/es6/product/small/light/mode.d.ts +30 -0
  339. package/js/es6/product/small/light/mode.js +30 -0
  340. package/js/umd/frozenproduct/large/dark/components/badge.js +15 -0
  341. package/js/umd/frozenproduct/large/dark/components/container.js +494 -182
  342. package/js/umd/frozenproduct/large/dark/components/form.js +742 -0
  343. package/js/umd/frozenproduct/large/dark/components/tab.js +26 -4
  344. package/js/umd/frozenproduct/large/dark/mode.js +412 -0
  345. package/js/umd/frozenproduct/large/light/components/badge.js +15 -0
  346. package/js/umd/frozenproduct/large/light/components/container.js +494 -182
  347. package/js/umd/frozenproduct/large/light/components/form.js +742 -0
  348. package/js/umd/frozenproduct/large/light/components/tab.js +26 -4
  349. package/js/umd/frozenproduct/large/light/mode.js +412 -0
  350. package/js/umd/frozenproduct/small/dark/components/badge.js +15 -0
  351. package/js/umd/frozenproduct/small/dark/components/container.js +494 -182
  352. package/js/umd/frozenproduct/small/dark/components/form.js +742 -0
  353. package/js/umd/frozenproduct/small/dark/components/tab.js +26 -4
  354. package/js/umd/frozenproduct/small/dark/mode.js +412 -0
  355. package/js/umd/frozenproduct/small/light/components/badge.js +15 -0
  356. package/js/umd/frozenproduct/small/light/components/container.js +494 -182
  357. package/js/umd/frozenproduct/small/light/components/form.js +742 -0
  358. package/js/umd/frozenproduct/small/light/components/tab.js +26 -4
  359. package/js/umd/frozenproduct/small/light/mode.js +412 -0
  360. package/js/umd/marketing/large/dark/components/badge.js +15 -0
  361. package/js/umd/marketing/large/dark/components/container.js +494 -182
  362. package/js/umd/marketing/large/dark/components/form.js +742 -0
  363. package/js/umd/marketing/large/dark/components/tab.js +26 -4
  364. package/js/umd/marketing/large/dark/mode.js +412 -0
  365. package/js/umd/marketing/large/light/components/badge.js +15 -0
  366. package/js/umd/marketing/large/light/components/container.js +494 -182
  367. package/js/umd/marketing/large/light/components/form.js +742 -0
  368. package/js/umd/marketing/large/light/components/tab.js +26 -4
  369. package/js/umd/marketing/large/light/mode.js +412 -0
  370. package/js/umd/marketing/small/dark/components/badge.js +15 -0
  371. package/js/umd/marketing/small/dark/components/container.js +494 -182
  372. package/js/umd/marketing/small/dark/components/form.js +742 -0
  373. package/js/umd/marketing/small/dark/components/tab.js +26 -4
  374. package/js/umd/marketing/small/dark/mode.js +412 -0
  375. package/js/umd/marketing/small/light/components/badge.js +15 -0
  376. package/js/umd/marketing/small/light/components/container.js +494 -182
  377. package/js/umd/marketing/small/light/components/form.js +742 -0
  378. package/js/umd/marketing/small/light/components/tab.js +26 -4
  379. package/js/umd/marketing/small/light/mode.js +412 -0
  380. package/js/umd/product/large/dark/components/badge.js +15 -0
  381. package/js/umd/product/large/dark/components/container.js +494 -182
  382. package/js/umd/product/large/dark/components/form.js +742 -0
  383. package/js/umd/product/large/dark/components/tab.js +26 -4
  384. package/js/umd/product/large/dark/mode.js +412 -0
  385. package/js/umd/product/large/light/components/badge.js +15 -0
  386. package/js/umd/product/large/light/components/container.js +494 -182
  387. package/js/umd/product/large/light/components/form.js +742 -0
  388. package/js/umd/product/large/light/components/tab.js +26 -4
  389. package/js/umd/product/large/light/mode.js +412 -0
  390. package/js/umd/product/small/dark/components/badge.js +15 -0
  391. package/js/umd/product/small/dark/components/container.js +494 -182
  392. package/js/umd/product/small/dark/components/form.js +742 -0
  393. package/js/umd/product/small/dark/components/tab.js +26 -4
  394. package/js/umd/product/small/dark/mode.js +412 -0
  395. package/js/umd/product/small/light/components/badge.js +15 -0
  396. package/js/umd/product/small/light/components/container.js +494 -182
  397. package/js/umd/product/small/light/components/form.js +742 -0
  398. package/js/umd/product/small/light/components/tab.js +26 -4
  399. package/js/umd/product/small/light/mode.js +412 -0
  400. package/json/flat/frozenproduct/large/dark/components/badge.json +1 -0
  401. package/json/flat/frozenproduct/large/dark/components/container.json +36 -14
  402. package/json/flat/frozenproduct/large/dark/components/form.json +52 -0
  403. package/json/flat/frozenproduct/large/dark/components/tab.json +2 -0
  404. package/json/flat/frozenproduct/large/dark/mode.json +30 -0
  405. package/json/flat/frozenproduct/large/light/components/badge.json +1 -0
  406. package/json/flat/frozenproduct/large/light/components/container.json +36 -14
  407. package/json/flat/frozenproduct/large/light/components/form.json +52 -0
  408. package/json/flat/frozenproduct/large/light/components/tab.json +2 -0
  409. package/json/flat/frozenproduct/large/light/mode.json +30 -0
  410. package/json/flat/frozenproduct/small/dark/components/badge.json +1 -0
  411. package/json/flat/frozenproduct/small/dark/components/container.json +36 -14
  412. package/json/flat/frozenproduct/small/dark/components/form.json +52 -0
  413. package/json/flat/frozenproduct/small/dark/components/tab.json +2 -0
  414. package/json/flat/frozenproduct/small/dark/mode.json +30 -0
  415. package/json/flat/frozenproduct/small/light/components/badge.json +1 -0
  416. package/json/flat/frozenproduct/small/light/components/container.json +36 -14
  417. package/json/flat/frozenproduct/small/light/components/form.json +52 -0
  418. package/json/flat/frozenproduct/small/light/components/tab.json +2 -0
  419. package/json/flat/frozenproduct/small/light/mode.json +30 -0
  420. package/json/flat/marketing/large/dark/components/badge.json +1 -0
  421. package/json/flat/marketing/large/dark/components/container.json +36 -14
  422. package/json/flat/marketing/large/dark/components/form.json +52 -0
  423. package/json/flat/marketing/large/dark/components/tab.json +2 -0
  424. package/json/flat/marketing/large/dark/mode.json +30 -0
  425. package/json/flat/marketing/large/light/components/badge.json +1 -0
  426. package/json/flat/marketing/large/light/components/container.json +36 -14
  427. package/json/flat/marketing/large/light/components/form.json +52 -0
  428. package/json/flat/marketing/large/light/components/tab.json +2 -0
  429. package/json/flat/marketing/large/light/mode.json +30 -0
  430. package/json/flat/marketing/small/dark/components/badge.json +1 -0
  431. package/json/flat/marketing/small/dark/components/container.json +36 -14
  432. package/json/flat/marketing/small/dark/components/form.json +52 -0
  433. package/json/flat/marketing/small/dark/components/tab.json +2 -0
  434. package/json/flat/marketing/small/dark/mode.json +30 -0
  435. package/json/flat/marketing/small/light/components/badge.json +1 -0
  436. package/json/flat/marketing/small/light/components/container.json +36 -14
  437. package/json/flat/marketing/small/light/components/form.json +52 -0
  438. package/json/flat/marketing/small/light/components/tab.json +2 -0
  439. package/json/flat/marketing/small/light/mode.json +30 -0
  440. package/json/flat/product/large/dark/components/badge.json +1 -0
  441. package/json/flat/product/large/dark/components/container.json +36 -14
  442. package/json/flat/product/large/dark/components/form.json +52 -0
  443. package/json/flat/product/large/dark/components/tab.json +2 -0
  444. package/json/flat/product/large/dark/mode.json +30 -0
  445. package/json/flat/product/large/light/components/badge.json +1 -0
  446. package/json/flat/product/large/light/components/container.json +36 -14
  447. package/json/flat/product/large/light/components/form.json +52 -0
  448. package/json/flat/product/large/light/components/tab.json +2 -0
  449. package/json/flat/product/large/light/mode.json +30 -0
  450. package/json/flat/product/small/dark/components/badge.json +1 -0
  451. package/json/flat/product/small/dark/components/container.json +36 -14
  452. package/json/flat/product/small/dark/components/form.json +52 -0
  453. package/json/flat/product/small/dark/components/tab.json +2 -0
  454. package/json/flat/product/small/dark/mode.json +30 -0
  455. package/json/flat/product/small/light/components/badge.json +1 -0
  456. package/json/flat/product/small/light/components/container.json +36 -14
  457. package/json/flat/product/small/light/components/form.json +52 -0
  458. package/json/flat/product/small/light/components/tab.json +2 -0
  459. package/json/flat/product/small/light/mode.json +30 -0
  460. package/json/nested/frozenproduct/large/dark/components/badge.json +1 -0
  461. package/json/nested/frozenproduct/large/dark/components/container.json +65 -21
  462. package/json/nested/frozenproduct/large/dark/components/form.json +74 -0
  463. package/json/nested/frozenproduct/large/dark/components/tab.json +3 -1
  464. package/json/nested/frozenproduct/large/dark/mode.json +52 -0
  465. package/json/nested/frozenproduct/large/light/components/badge.json +1 -0
  466. package/json/nested/frozenproduct/large/light/components/container.json +65 -21
  467. package/json/nested/frozenproduct/large/light/components/form.json +74 -0
  468. package/json/nested/frozenproduct/large/light/components/tab.json +3 -1
  469. package/json/nested/frozenproduct/large/light/mode.json +52 -0
  470. package/json/nested/frozenproduct/small/dark/components/badge.json +1 -0
  471. package/json/nested/frozenproduct/small/dark/components/container.json +65 -21
  472. package/json/nested/frozenproduct/small/dark/components/form.json +74 -0
  473. package/json/nested/frozenproduct/small/dark/components/tab.json +3 -1
  474. package/json/nested/frozenproduct/small/dark/mode.json +52 -0
  475. package/json/nested/frozenproduct/small/light/components/badge.json +1 -0
  476. package/json/nested/frozenproduct/small/light/components/container.json +65 -21
  477. package/json/nested/frozenproduct/small/light/components/form.json +74 -0
  478. package/json/nested/frozenproduct/small/light/components/tab.json +3 -1
  479. package/json/nested/frozenproduct/small/light/mode.json +52 -0
  480. package/json/nested/marketing/large/dark/components/badge.json +1 -0
  481. package/json/nested/marketing/large/dark/components/container.json +65 -21
  482. package/json/nested/marketing/large/dark/components/form.json +74 -0
  483. package/json/nested/marketing/large/dark/components/tab.json +3 -1
  484. package/json/nested/marketing/large/dark/mode.json +52 -0
  485. package/json/nested/marketing/large/light/components/badge.json +1 -0
  486. package/json/nested/marketing/large/light/components/container.json +65 -21
  487. package/json/nested/marketing/large/light/components/form.json +74 -0
  488. package/json/nested/marketing/large/light/components/tab.json +3 -1
  489. package/json/nested/marketing/large/light/mode.json +52 -0
  490. package/json/nested/marketing/small/dark/components/badge.json +1 -0
  491. package/json/nested/marketing/small/dark/components/container.json +65 -21
  492. package/json/nested/marketing/small/dark/components/form.json +74 -0
  493. package/json/nested/marketing/small/dark/components/tab.json +3 -1
  494. package/json/nested/marketing/small/dark/mode.json +52 -0
  495. package/json/nested/marketing/small/light/components/badge.json +1 -0
  496. package/json/nested/marketing/small/light/components/container.json +65 -21
  497. package/json/nested/marketing/small/light/components/form.json +74 -0
  498. package/json/nested/marketing/small/light/components/tab.json +3 -1
  499. package/json/nested/marketing/small/light/mode.json +52 -0
  500. package/json/nested/product/large/dark/components/badge.json +1 -0
  501. package/json/nested/product/large/dark/components/container.json +65 -21
  502. package/json/nested/product/large/dark/components/form.json +74 -0
  503. package/json/nested/product/large/dark/components/tab.json +3 -1
  504. package/json/nested/product/large/dark/mode.json +52 -0
  505. package/json/nested/product/large/light/components/badge.json +1 -0
  506. package/json/nested/product/large/light/components/container.json +65 -21
  507. package/json/nested/product/large/light/components/form.json +74 -0
  508. package/json/nested/product/large/light/components/tab.json +3 -1
  509. package/json/nested/product/large/light/mode.json +52 -0
  510. package/json/nested/product/small/dark/components/badge.json +1 -0
  511. package/json/nested/product/small/dark/components/container.json +65 -21
  512. package/json/nested/product/small/dark/components/form.json +74 -0
  513. package/json/nested/product/small/dark/components/tab.json +3 -1
  514. package/json/nested/product/small/dark/mode.json +52 -0
  515. package/json/nested/product/small/light/components/badge.json +1 -0
  516. package/json/nested/product/small/light/components/container.json +65 -21
  517. package/json/nested/product/small/light/components/form.json +74 -0
  518. package/json/nested/product/small/light/components/tab.json +3 -1
  519. package/json/nested/product/small/light/mode.json +52 -0
  520. package/package.json +1 -1
  521. package/sage-design-tokens-8.4.0.tgz +0 -0
  522. package/scss/frozenproduct/large/components/badge.scss +2 -1
  523. package/scss/frozenproduct/large/components/container.scss +36 -14
  524. package/scss/frozenproduct/large/components/form.scss +52 -0
  525. package/scss/frozenproduct/large/components/tab.scss +4 -2
  526. package/scss/frozenproduct/large/dark.scss +30 -0
  527. package/scss/frozenproduct/large/light.scss +30 -0
  528. package/scss/frozenproduct/small/components/badge.scss +2 -1
  529. package/scss/frozenproduct/small/components/button.scss +23 -23
  530. package/scss/frozenproduct/small/components/container.scss +42 -20
  531. package/scss/frozenproduct/small/components/form.scss +59 -7
  532. package/scss/frozenproduct/small/components/link.scss +2 -2
  533. package/scss/frozenproduct/small/components/nav.scss +3 -3
  534. package/scss/frozenproduct/small/components/page.scss +1 -1
  535. package/scss/frozenproduct/small/components/popover.scss +2 -2
  536. package/scss/frozenproduct/small/components/progress.scss +6 -6
  537. package/scss/frozenproduct/small/components/status.scss +3 -3
  538. package/scss/frozenproduct/small/components/tab.scss +11 -9
  539. package/scss/frozenproduct/small/components/table.scss +10 -10
  540. package/scss/frozenproduct/small/dark.scss +30 -0
  541. package/scss/frozenproduct/small/light.scss +30 -0
  542. package/scss/marketing/large/components/badge.scss +2 -1
  543. package/scss/marketing/large/components/container.scss +36 -14
  544. package/scss/marketing/large/components/form.scss +52 -0
  545. package/scss/marketing/large/components/tab.scss +4 -2
  546. package/scss/marketing/large/dark.scss +30 -0
  547. package/scss/marketing/large/light.scss +30 -0
  548. package/scss/marketing/small/components/badge.scss +2 -1
  549. package/scss/marketing/small/components/container.scss +36 -14
  550. package/scss/marketing/small/components/form.scss +52 -0
  551. package/scss/marketing/small/components/tab.scss +4 -2
  552. package/scss/marketing/small/dark.scss +30 -0
  553. package/scss/marketing/small/light.scss +30 -0
  554. package/scss/product/large/components/badge.scss +2 -1
  555. package/scss/product/large/components/container.scss +36 -14
  556. package/scss/product/large/components/form.scss +52 -0
  557. package/scss/product/large/components/tab.scss +4 -2
  558. package/scss/product/large/dark.scss +30 -0
  559. package/scss/product/large/light.scss +30 -0
  560. package/scss/product/small/components/badge.scss +2 -1
  561. package/scss/product/small/components/container.scss +36 -14
  562. package/scss/product/small/components/form.scss +52 -0
  563. package/scss/product/small/components/tab.scss +4 -2
  564. package/scss/product/small/dark.scss +30 -0
  565. package/scss/product/small/light.scss +30 -0
  566. package/sage-design-tokens-8.2.0.tgz +0 -0
package/css/marketing/large/components/container.css CHANGED
@@ -9,16 +9,38 @@
9
9
  --container-radius-blockquote-bar: var(--global-radius-circle); /* radius for blockquote bar */
10
10
  --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
11
11
  --container-opacity-carousel-hidden: var(--modes-color-modifiers-input-disabled-fg); /* opacity applied to next and previous carousel slides */
12
- --container-color-standard-bg-default: var(--modes-color-generic-bg-nought);
13
12
  --container-color-ai-borderhorizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI dialog component */
14
13
  --container-color-ai-bordervertical: var(--modes-color-status-ai-default-vertical); /* left and right border for dialog and insight bubbles. */
15
14
  --container-color-ai-nudge-border-ai-horizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI nudge message component */
16
15
  --container-color-ai-nudge-border-ai-vertical: var(--modes-color-status-ai-default-vertical); /* left and right border for AI nudge message component */
17
- --container-color-interactive-detailedicon-bg: var(--modes-color-custom-default); /* */
16
+ --container-color-calendar-label-default: var(--modes-color-generic-content-extreme); /* Accessible on calendar bg-default colors. */
17
+ --container-color-calendar-label-alt: var(--modes-color-generic-content-extreme); /* Accessible on calendar bg-alt colors. */
18
+ --container-color-calendar-blue-bg-default: var(--modes-color-colorcode-blue-muted);
19
+ --container-color-calendar-blue-pattern: var(--modes-color-colorcode-blue-rich);
20
+ --container-color-calendar-teal-bg-default: var(--modes-color-colorcode-teal-muted);
21
+ --container-color-calendar-teal-pattern: var(--modes-color-colorcode-teal-rich);
22
+ --container-color-calendar-green-bg-default: var(--modes-color-colorcode-green-muted);
23
+ --container-color-calendar-green-pattern: var(--modes-color-colorcode-green-rich);
24
+ --container-color-calendar-lime-bg-default: var(--modes-color-colorcode-lime-muted);
25
+ --container-color-calendar-lime-pattern: var(--modes-color-colorcode-lime-rich);
26
+ --container-color-calendar-orange-bg-default: var(--modes-color-colorcode-orange-muted);
27
+ --container-color-calendar-orange-pattern: var(--modes-color-colorcode-orange-rich);
28
+ --container-color-calendar-red-bg-default: var(--modes-color-colorcode-red-muted);
29
+ --container-color-calendar-red-pattern: var(--modes-color-colorcode-red-rich);
30
+ --container-color-calendar-pink-bg-default: var(--modes-color-colorcode-pink-muted);
31
+ --container-color-calendar-pink-pattern: var(--modes-color-colorcode-pink-rich);
32
+ --container-color-calendar-purple-bg-default: var(--modes-color-colorcode-purple-muted);
33
+ --container-color-calendar-purple-pattern: var(--modes-color-colorcode-purple-rich);
34
+ --container-color-calendar-slate-bg-default: var(--modes-color-colorcode-slate-muted);
35
+ --container-color-calendar-slate-pattern: var(--modes-color-colorcode-slate-rich);
36
+ --container-color-calendar-gray-bg-default: var(--modes-color-colorcode-gray-muted);
37
+ --container-color-calendar-gray-pattern: var(--modes-color-colorcode-gray-rich);
18
38
  --container-color-interactive-bg-footer-activated: var(--modes-color-status-positive-default); /* */
19
39
  --container-color-interactive-border-activated: var(--modes-color-status-positive-default);
20
40
  --container-color-interactive-bg-footer-default: var(--modes-color-generic-bg-nought); /* tile footer bg color */
21
41
  --container-color-interactive-bg-enabled: var(--modes-color-generic-bg-nought);
42
+ --container-color-interactive-detailedicon-bg: var(--modes-color-custom-default); /* */
43
+ --container-color-standard-bg-default: var(--modes-color-generic-bg-nought);
22
44
  --container-typography-adaptive-heading-m: var(--global-typography-adaptive-heading-s); /* Accordion, Subscription tile, Tile select and generic tile or card headings */
23
45
  --container-typography-adaptive-heading-l: var(--global-typography-adaptive-heading-m); /* Dialog, drawer and sidebar headings */
24
46
  --container-typography-adaptive-subheading-m: var(--global-typography-adaptive-subheading-m); /* Accordion subheading, Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading */
@@ -37,13 +59,7 @@
37
59
  --container-typography-responsive-paragraph-s: var(--global-typography-responsive-component-moderate-s);
38
60
  --container-typography-responsive-paragraph-m: var(--global-typography-responsive-component-moderate-m);
39
61
  --container-typography-responsive-paragraph-l: var(--global-typography-responsive-component-moderate-l);
40
- --container-color-standard-bg-alt: var(--modes-color-generic-bg-faint);
41
- --container-color-standard-bg-footer-default: var(--modes-color-generic-bg-faint); /* tile footer bg color */
42
- --container-color-standard-border-active: var(--modes-color-interactive-monochrome-generic-active);
43
- --container-color-standard-dimmer: var(--modes-color-interactive-inactive-mask); /* dimmed mask for dialogs */
44
- --container-color-standard-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
45
- --container-color-standard-text-default: var(--modes-color-generic-content-harsh); /* for headings, paragraph text etc */
46
- --container-color-scrollbar-bg-default: var(--modes-color-generic-bg-faint);
62
+ --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
47
63
  --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-generic-active);
48
64
  --container-color-interactive-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt); /* Used for accordion hover backgrounds */
49
65
  --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-generic-active);
@@ -51,7 +67,13 @@
51
67
  --container-color-interactive-text-active: var(--modes-color-interactive-monochrome-generic-active); /* Active label for any accordion. */
52
68
  --container-color-interactive-text-enabled: var(--modes-color-generic-content-harsh); /* Enabled label for standard accordion. */
53
69
  --container-color-interactive-text-alt-enabled: var(--modes-color-generic-content-moderate); /* Enabled label for subtle accordion. */
54
- --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
70
+ --container-color-scrollbar-bg-default: var(--modes-color-generic-bg-faint);
71
+ --container-color-standard-bg-alt: var(--modes-color-generic-bg-faint);
72
+ --container-color-standard-bg-footer-default: var(--modes-color-generic-bg-faint); /* tile footer bg color */
73
+ --container-color-standard-border-active: var(--modes-color-interactive-monochrome-generic-active);
74
+ --container-color-standard-dimmer: var(--modes-color-interactive-inactive-mask); /* dimmed mask for dialogs */
75
+ --container-color-standard-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
76
+ --container-color-standard-text-default: var(--modes-color-generic-content-harsh); /* for headings, paragraph text etc */
55
77
  --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
56
78
  --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
57
79
  --container-boxshadow-card-drag: var(--global-boxshadow-interactive-drag); /* Card (drag state) */
@@ -62,10 +84,6 @@
62
84
  --container-boxshadow-sidebar: var(--global-boxshadow-container-distant); /* Sidebar */
63
85
  --container-boxshadow-stickyfooter: var(--global-boxshadow-container-sticky-footer); /* Sticky footer in Dialog, Drawer, Sidebar. */
64
86
  --container-boxshadow-nudge: var(--global-boxshadow-container-far); /* nudge shadow */
65
- --container-color-standard-border-alt: var(--modes-color-generic-fg-soft);
66
- --container-color-standard-border-default: var(--modes-color-generic-fg-faint);
67
- --container-color-standard-icon: var(--modes-color-generic-fg-moderate); /* Link preview image thumbnail */
68
- --container-color-scrollbar-fg-default: var(--modes-color-generic-fg-moderate);
69
87
  --container-color-interactive-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
70
88
  --container-color-interactive-border-alt: var(--modes-color-generic-fg-delicate); /* Link preview. */
71
89
  --container-color-interactive-border-inactive: var(--modes-color-generic-fg-soft);
@@ -77,6 +95,10 @@
77
95
  --container-color-interactive-label-footer-activated: var(--modes-color-interactive-monochrome-generic-with-active);
78
96
  --container-color-interactive-text-disabled: var(--modes-color-interactive-inactive-content);
79
97
  --container-color-interactive-text-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover label for any accordion. */
98
+ --container-color-scrollbar-fg-default: var(--modes-color-generic-fg-moderate);
99
+ --container-color-standard-border-alt: var(--modes-color-generic-fg-soft);
100
+ --container-color-standard-border-default: var(--modes-color-generic-fg-faint);
101
+ --container-color-standard-icon: var(--modes-color-generic-fg-moderate); /* Link preview image thumbnail */
80
102
  --container-size-none: var(--global-size-none);
81
103
  --container-size-accordionstandard-chevron: var(--global-size-icon-m); /* Accordion chevron container */
82
104
  --container-size-quotebar-width: var(--global-size-micro-m); /* block quote bar width */
package/css/marketing/large/components/form.css CHANGED
@@ -11,6 +11,58 @@
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-label-alt: var(--modes-color-generic-content-extreme); /* Accessible on colorpicker bg-alt colors. */
16
+ --form-color-colorpicker-blue-border: var(--modes-color-colorcode-blue-rich);
17
+ --form-color-colorpicker-blue-bg-alt: var(--modes-color-colorcode-blue-rich);
18
+ --form-color-colorpicker-blue-bg-default: var(--modes-color-colorcode-blue-muted);
19
+ --form-color-colorpicker-blue-pattern: var(--modes-color-colorcode-blue-rich);
20
+ --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. */
21
+ --form-color-colorpicker-teal-border: var(--modes-color-colorcode-teal-rich);
22
+ --form-color-colorpicker-teal-bg-alt: var(--modes-color-colorcode-teal-rich);
23
+ --form-color-colorpicker-teal-bg-default: var(--modes-color-colorcode-teal-muted);
24
+ --form-color-colorpicker-teal-pattern: var(--modes-color-colorcode-teal-rich);
25
+ --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. */
26
+ --form-color-colorpicker-green-border: var(--modes-color-colorcode-green-rich);
27
+ --form-color-colorpicker-green-bg-alt: var(--modes-color-colorcode-green-rich);
28
+ --form-color-colorpicker-green-bg-default: var(--modes-color-colorcode-green-muted);
29
+ --form-color-colorpicker-green-pattern: var(--modes-color-colorcode-green-rich);
30
+ --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. */
31
+ --form-color-colorpicker-lime-border: var(--modes-color-colorcode-lime-rich);
32
+ --form-color-colorpicker-lime-bg-alt: var(--modes-color-colorcode-lime-rich);
33
+ --form-color-colorpicker-lime-bg-default: var(--modes-color-colorcode-lime-muted);
34
+ --form-color-colorpicker-lime-pattern: var(--modes-color-colorcode-lime-rich);
35
+ --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. */
36
+ --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-rich);
37
+ --form-color-colorpicker-orange-bg-alt: var(--modes-color-colorcode-orange-rich);
38
+ --form-color-colorpicker-orange-bg-default: var(--modes-color-colorcode-orange-muted);
39
+ --form-color-colorpicker-orange-pattern: var(--modes-color-colorcode-orange-rich);
40
+ --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. */
41
+ --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-rich);
42
+ --form-color-colorpicker-red-bg-alt: var(--modes-color-colorcode-red-rich);
43
+ --form-color-colorpicker-red-bg-default: var(--modes-color-colorcode-red-muted);
44
+ --form-color-colorpicker-red-pattern: var(--modes-color-colorcode-red-rich);
45
+ --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. */
46
+ --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-rich);
47
+ --form-color-colorpicker-pink-bg-alt: var(--modes-color-colorcode-pink-rich);
48
+ --form-color-colorpicker-pink-bg-default: var(--modes-color-colorcode-pink-muted);
49
+ --form-color-colorpicker-pink-pattern: var(--modes-color-colorcode-pink-rich);
50
+ --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. */
51
+ --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-rich);
52
+ --form-color-colorpicker-purple-bg-alt: var(--modes-color-colorcode-purple-rich);
53
+ --form-color-colorpicker-purple-bg-default: var(--modes-color-colorcode-purple-muted);
54
+ --form-color-colorpicker-purple-pattern: var(--modes-color-colorcode-purple-rich);
55
+ --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. */
56
+ --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-rich);
57
+ --form-color-colorpicker-slate-bg-alt: var(--modes-color-colorcode-slate-rich);
58
+ --form-color-colorpicker-slate-bg-default: var(--modes-color-colorcode-slate-muted);
59
+ --form-color-colorpicker-slate-pattern: var(--modes-color-colorcode-slate-rich);
60
+ --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. */
61
+ --form-color-colorpicker-gray-border: var(--modes-color-colorcode-gray-rich);
62
+ --form-color-colorpicker-gray-bg-alt: var(--modes-color-colorcode-gray-rich);
63
+ --form-color-colorpicker-gray-bg-default: var(--modes-color-colorcode-gray-muted);
64
+ --form-color-colorpicker-gray-pattern: var(--modes-color-colorcode-gray-rich);
65
+ --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. */
14
66
  --form-color-labelset-label-required: var(--modes-color-interactive-danger-default);
15
67
  --form-color-validation-border-error: var(--modes-color-status-negative-default);
16
68
  --form-color-validation-bar-error: var(--modes-color-status-negative-default); /* error bar to left of inputs */
package/css/marketing/large/components/tab.css CHANGED
@@ -38,6 +38,7 @@
38
38
  --tab-space-y-m: var(--global-space-micro-l); /* Top bottom padding in Tab. */
39
39
  --tab-space-y-l: var(--global-space-micro-xxl); /* Top bottom padding in Tab. */
40
40
  --tab-color-bg-active: var(--modes-color-interactive-monochrome-generic-with-active);
41
+ --tab-color-border-activealt: var(--modes-color-generic-fg-delicate);
41
42
  --tab-color-border-enabled: var(--modes-color-generic-fg-delicate);
42
43
  --tab-color-border-hover: var(--modes-color-generic-fg-moderate);
43
44
  --tab-color-icon-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
@@ -50,6 +51,7 @@
50
51
  --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
51
52
  --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
52
53
  --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
53
- --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
54
- --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
54
+ --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s);
55
+ --tab-borderwidth-navigation-side: var(--global-borderwidth-s);
56
+ --tab-borderwidth-navigation-top: var(--global-borderwidth-s);
55
57
  }
package/css/marketing/large/dark.css CHANGED
@@ -12,6 +12,36 @@
12
12
  --modes-color-brand-copilot-no-bg-monochrome: #FFFFFF;
13
13
  --modes-color-custom-default: #00D639; /* This is the color to replace in white label products. Dark mode recommended luminosity for SAGE is 75.1 (tested), but above 51.9 should be ok. See hsluv.org to be AAA text on 000000 bgs. */
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
+ --modes-color-colorcode-blue-deep: #007FD9;
16
+ --modes-color-colorcode-blue-muted: #00293F;
17
+ --modes-color-colorcode-blue-rich: #0071c3;
18
+ --modes-color-colorcode-teal-deep: #008A89;
19
+ --modes-color-colorcode-teal-muted: #002B2A;
20
+ --modes-color-colorcode-teal-rich: #007C7B;
21
+ --modes-color-colorcode-green-deep: #009023;
22
+ --modes-color-colorcode-green-muted: #002D05;
23
+ --modes-color-colorcode-green-rich: #00811F;
24
+ --modes-color-colorcode-lime-deep: #6E8500;
25
+ --modes-color-colorcode-lime-muted: #171e00;
26
+ --modes-color-colorcode-lime-rich: #637700;
27
+ --modes-color-colorcode-orange-deep: #DB4B00;
28
+ --modes-color-colorcode-orange-muted: #380D00;
29
+ --modes-color-colorcode-orange-rich: #C54300;
30
+ --modes-color-colorcode-red-deep: #F50058;
31
+ --modes-color-colorcode-red-muted: #400011;
32
+ --modes-color-colorcode-red-rich: #DC004E;
33
+ --modes-color-colorcode-pink-deep: #DD2BAB;
34
+ --modes-color-colorcode-pink-muted: #3C002C;
35
+ --modes-color-colorcode-pink-rich: #C8269A;
36
+ --modes-color-colorcode-purple-deep: #985FDC;
37
+ --modes-color-colorcode-purple-muted: #270E41;
38
+ --modes-color-colorcode-purple-rich: #8F4CD7;
39
+ --modes-color-colorcode-slate-deep: #5C8196;
40
+ --modes-color-colorcode-slate-muted: #121D23;
41
+ --modes-color-colorcode-slate-rich: #527386;
42
+ --modes-color-colorcode-gray-deep: #7C7C7C;
43
+ --modes-color-colorcode-gray-muted: #1b1b1b;
44
+ --modes-color-colorcode-gray-rich: #6F6F6F;
15
45
  --modes-color-generic-bg-nought: #000000;
16
46
  --modes-color-generic-bg-faint: #0e0e0e;
17
47
  --modes-color-generic-bg-delicate: #181818;
package/css/marketing/large/light.css CHANGED
@@ -12,6 +12,36 @@
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;
16
+ --modes-color-colorcode-blue-muted: #CDE5FF;
17
+ --modes-color-colorcode-blue-rich: #0084E1;
18
+ --modes-color-colorcode-teal-deep: #007C7B;
19
+ --modes-color-colorcode-teal-muted: #C1FBFB;
20
+ --modes-color-colorcode-teal-rich: #009B99;
21
+ --modes-color-colorcode-green-deep: #00811F;
22
+ --modes-color-colorcode-green-muted: #C5FFC9;
23
+ --modes-color-colorcode-green-rich: #00a128;
24
+ --modes-color-colorcode-lime-deep: #637700;
25
+ --modes-color-colorcode-lime-muted: #FFFF9C;
26
+ --modes-color-colorcode-lime-rich: #819B00;
27
+ --modes-color-colorcode-orange-deep: #C54300;
28
+ --modes-color-colorcode-orange-muted: #FEEAB0;
29
+ --modes-color-colorcode-orange-rich: #EA5100;
30
+ --modes-color-colorcode-red-deep: #DC004E;
31
+ --modes-color-colorcode-red-muted: #FFDBCF;
32
+ --modes-color-colorcode-red-rich: #FE005B;
33
+ --modes-color-colorcode-pink-deep: #C8269A;
34
+ --modes-color-colorcode-pink-muted: #FFD7EE;
35
+ --modes-color-colorcode-pink-rich: #e62db2;
36
+ --modes-color-colorcode-purple-deep: #8F4CD7;
37
+ --modes-color-colorcode-purple-muted: #E7DEF8;
38
+ --modes-color-colorcode-purple-rich: #9C66DE;
39
+ --modes-color-colorcode-slate-deep: #527386;
40
+ --modes-color-colorcode-slate-muted: #D4E5F1;
41
+ --modes-color-colorcode-slate-rich: #60869C;
42
+ --modes-color-colorcode-gray-deep: #6F6F6F;
43
+ --modes-color-colorcode-gray-muted: #E2E2E2;
44
+ --modes-color-colorcode-gray-rich: #9b9b9b;
15
45
  --modes-color-generic-bg-nought: #FFFFFF;
16
46
  --modes-color-generic-bg-faint: #f3f3f3;
17
47
  --modes-color-generic-bg-delicate: #e8e8e8;
package/css/marketing/small/components/badge.css CHANGED
@@ -4,7 +4,8 @@
4
4
 
5
5
  :root {
6
6
  --badge-radius-badge: var(--global-radius-circle); /* Badge */
7
- --badge-color-notification-bg-default: var(--modes-color-status-negative-default);
7
+ --badge-color-notification-bg-default: var(--modes-color-status-negative-default); /* Used in global nav notification badges */
8
+ --badge-color-notification-bg-alt: var(--modes-color-status-info-default);
8
9
  --badge-typography-responsive-m: var(--global-typography-responsive-component-notification-m);
9
10
  --badge-typography-adaptive-m: var(--global-typography-adaptive-component-notification-m);
10
11
  --badge-color-notification-border-default: var(--modes-color-generic-fg-nought);
package/css/marketing/small/components/container.css CHANGED
@@ -9,16 +9,38 @@
9
9
  --container-radius-blockquote-bar: var(--global-radius-circle); /* radius for blockquote bar */
10
10
  --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
11
11
  --container-opacity-carousel-hidden: var(--modes-color-modifiers-input-disabled-fg); /* opacity applied to next and previous carousel slides */
12
- --container-color-standard-bg-default: var(--modes-color-generic-bg-nought);
13
12
  --container-color-ai-borderhorizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI dialog component */
14
13
  --container-color-ai-bordervertical: var(--modes-color-status-ai-default-vertical); /* left and right border for dialog and insight bubbles. */
15
14
  --container-color-ai-nudge-border-ai-horizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI nudge message component */
16
15
  --container-color-ai-nudge-border-ai-vertical: var(--modes-color-status-ai-default-vertical); /* left and right border for AI nudge message component */
17
- --container-color-interactive-detailedicon-bg: var(--modes-color-custom-default); /* */
16
+ --container-color-calendar-label-default: var(--modes-color-generic-content-extreme); /* Accessible on calendar bg-default colors. */
17
+ --container-color-calendar-label-alt: var(--modes-color-generic-content-extreme); /* Accessible on calendar bg-alt colors. */
18
+ --container-color-calendar-blue-bg-default: var(--modes-color-colorcode-blue-muted);
19
+ --container-color-calendar-blue-pattern: var(--modes-color-colorcode-blue-rich);
20
+ --container-color-calendar-teal-bg-default: var(--modes-color-colorcode-teal-muted);
21
+ --container-color-calendar-teal-pattern: var(--modes-color-colorcode-teal-rich);
22
+ --container-color-calendar-green-bg-default: var(--modes-color-colorcode-green-muted);
23
+ --container-color-calendar-green-pattern: var(--modes-color-colorcode-green-rich);
24
+ --container-color-calendar-lime-bg-default: var(--modes-color-colorcode-lime-muted);
25
+ --container-color-calendar-lime-pattern: var(--modes-color-colorcode-lime-rich);
26
+ --container-color-calendar-orange-bg-default: var(--modes-color-colorcode-orange-muted);
27
+ --container-color-calendar-orange-pattern: var(--modes-color-colorcode-orange-rich);
28
+ --container-color-calendar-red-bg-default: var(--modes-color-colorcode-red-muted);
29
+ --container-color-calendar-red-pattern: var(--modes-color-colorcode-red-rich);
30
+ --container-color-calendar-pink-bg-default: var(--modes-color-colorcode-pink-muted);
31
+ --container-color-calendar-pink-pattern: var(--modes-color-colorcode-pink-rich);
32
+ --container-color-calendar-purple-bg-default: var(--modes-color-colorcode-purple-muted);
33
+ --container-color-calendar-purple-pattern: var(--modes-color-colorcode-purple-rich);
34
+ --container-color-calendar-slate-bg-default: var(--modes-color-colorcode-slate-muted);
35
+ --container-color-calendar-slate-pattern: var(--modes-color-colorcode-slate-rich);
36
+ --container-color-calendar-gray-bg-default: var(--modes-color-colorcode-gray-muted);
37
+ --container-color-calendar-gray-pattern: var(--modes-color-colorcode-gray-rich);
18
38
  --container-color-interactive-bg-footer-activated: var(--modes-color-status-positive-default); /* */
19
39
  --container-color-interactive-border-activated: var(--modes-color-status-positive-default);
20
40
  --container-color-interactive-bg-footer-default: var(--modes-color-generic-bg-nought); /* tile footer bg color */
21
41
  --container-color-interactive-bg-enabled: var(--modes-color-generic-bg-nought);
42
+ --container-color-interactive-detailedicon-bg: var(--modes-color-custom-default); /* */
43
+ --container-color-standard-bg-default: var(--modes-color-generic-bg-nought);
22
44
  --container-typography-adaptive-heading-m: var(--global-typography-adaptive-heading-s); /* Accordion, Subscription tile, Tile select and generic tile or card headings */
23
45
  --container-typography-adaptive-heading-l: var(--global-typography-adaptive-heading-m); /* Dialog, drawer and sidebar headings */
24
46
  --container-typography-adaptive-subheading-m: var(--global-typography-adaptive-subheading-m); /* Accordion subheading, Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading */
@@ -37,13 +59,7 @@
37
59
  --container-typography-responsive-paragraph-s: var(--global-typography-responsive-component-moderate-s);
38
60
  --container-typography-responsive-paragraph-m: var(--global-typography-responsive-component-moderate-m);
39
61
  --container-typography-responsive-paragraph-l: var(--global-typography-responsive-component-moderate-l);
40
- --container-color-standard-bg-alt: var(--modes-color-generic-bg-faint);
41
- --container-color-standard-bg-footer-default: var(--modes-color-generic-bg-faint); /* tile footer bg color */
42
- --container-color-standard-border-active: var(--modes-color-interactive-monochrome-generic-active);
43
- --container-color-standard-dimmer: var(--modes-color-interactive-inactive-mask); /* dimmed mask for dialogs */
44
- --container-color-standard-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
45
- --container-color-standard-text-default: var(--modes-color-generic-content-harsh); /* for headings, paragraph text etc */
46
- --container-color-scrollbar-bg-default: var(--modes-color-generic-bg-faint);
62
+ --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
47
63
  --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-generic-active);
48
64
  --container-color-interactive-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt); /* Used for accordion hover backgrounds */
49
65
  --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-generic-active);
@@ -51,7 +67,13 @@
51
67
  --container-color-interactive-text-active: var(--modes-color-interactive-monochrome-generic-active); /* Active label for any accordion. */
52
68
  --container-color-interactive-text-enabled: var(--modes-color-generic-content-harsh); /* Enabled label for standard accordion. */
53
69
  --container-color-interactive-text-alt-enabled: var(--modes-color-generic-content-moderate); /* Enabled label for subtle accordion. */
54
- --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
70
+ --container-color-scrollbar-bg-default: var(--modes-color-generic-bg-faint);
71
+ --container-color-standard-bg-alt: var(--modes-color-generic-bg-faint);
72
+ --container-color-standard-bg-footer-default: var(--modes-color-generic-bg-faint); /* tile footer bg color */
73
+ --container-color-standard-border-active: var(--modes-color-interactive-monochrome-generic-active);
74
+ --container-color-standard-dimmer: var(--modes-color-interactive-inactive-mask); /* dimmed mask for dialogs */
75
+ --container-color-standard-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
76
+ --container-color-standard-text-default: var(--modes-color-generic-content-harsh); /* for headings, paragraph text etc */
55
77
  --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
56
78
  --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
57
79
  --container-boxshadow-card-drag: var(--global-boxshadow-interactive-drag); /* Card (drag state) */
@@ -62,10 +84,6 @@
62
84
  --container-boxshadow-sidebar: var(--global-boxshadow-container-distant); /* Sidebar */
63
85
  --container-boxshadow-stickyfooter: var(--global-boxshadow-container-sticky-footer); /* Sticky footer in Dialog, Drawer, Sidebar. */
64
86
  --container-boxshadow-nudge: var(--global-boxshadow-container-far); /* nudge shadow */
65
- --container-color-standard-border-alt: var(--modes-color-generic-fg-soft);
66
- --container-color-standard-border-default: var(--modes-color-generic-fg-faint);
67
- --container-color-standard-icon: var(--modes-color-generic-fg-moderate); /* Link preview image thumbnail */
68
- --container-color-scrollbar-fg-default: var(--modes-color-generic-fg-moderate);
69
87
  --container-color-interactive-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
70
88
  --container-color-interactive-border-alt: var(--modes-color-generic-fg-delicate); /* Link preview. */
71
89
  --container-color-interactive-border-inactive: var(--modes-color-generic-fg-soft);
@@ -77,6 +95,10 @@
77
95
  --container-color-interactive-label-footer-activated: var(--modes-color-interactive-monochrome-generic-with-active);
78
96
  --container-color-interactive-text-disabled: var(--modes-color-interactive-inactive-content);
79
97
  --container-color-interactive-text-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover label for any accordion. */
98
+ --container-color-scrollbar-fg-default: var(--modes-color-generic-fg-moderate);
99
+ --container-color-standard-border-alt: var(--modes-color-generic-fg-soft);
100
+ --container-color-standard-border-default: var(--modes-color-generic-fg-faint);
101
+ --container-color-standard-icon: var(--modes-color-generic-fg-moderate); /* Link preview image thumbnail */
80
102
  --container-size-none: var(--global-size-none);
81
103
  --container-size-accordionstandard-chevron: var(--global-size-icon-m); /* Accordion chevron container */
82
104
  --container-size-quotebar-width: var(--global-size-micro-m); /* block quote bar width */
package/css/marketing/small/components/form.css CHANGED
@@ -11,6 +11,58 @@
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-label-alt: var(--modes-color-generic-content-extreme); /* Accessible on colorpicker bg-alt colors. */
16
+ --form-color-colorpicker-blue-border: var(--modes-color-colorcode-blue-rich);
17
+ --form-color-colorpicker-blue-bg-alt: var(--modes-color-colorcode-blue-rich);
18
+ --form-color-colorpicker-blue-bg-default: var(--modes-color-colorcode-blue-muted);
19
+ --form-color-colorpicker-blue-pattern: var(--modes-color-colorcode-blue-rich);
20
+ --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. */
21
+ --form-color-colorpicker-teal-border: var(--modes-color-colorcode-teal-rich);
22
+ --form-color-colorpicker-teal-bg-alt: var(--modes-color-colorcode-teal-rich);
23
+ --form-color-colorpicker-teal-bg-default: var(--modes-color-colorcode-teal-muted);
24
+ --form-color-colorpicker-teal-pattern: var(--modes-color-colorcode-teal-rich);
25
+ --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. */
26
+ --form-color-colorpicker-green-border: var(--modes-color-colorcode-green-rich);
27
+ --form-color-colorpicker-green-bg-alt: var(--modes-color-colorcode-green-rich);
28
+ --form-color-colorpicker-green-bg-default: var(--modes-color-colorcode-green-muted);
29
+ --form-color-colorpicker-green-pattern: var(--modes-color-colorcode-green-rich);
30
+ --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. */
31
+ --form-color-colorpicker-lime-border: var(--modes-color-colorcode-lime-rich);
32
+ --form-color-colorpicker-lime-bg-alt: var(--modes-color-colorcode-lime-rich);
33
+ --form-color-colorpicker-lime-bg-default: var(--modes-color-colorcode-lime-muted);
34
+ --form-color-colorpicker-lime-pattern: var(--modes-color-colorcode-lime-rich);
35
+ --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. */
36
+ --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-rich);
37
+ --form-color-colorpicker-orange-bg-alt: var(--modes-color-colorcode-orange-rich);
38
+ --form-color-colorpicker-orange-bg-default: var(--modes-color-colorcode-orange-muted);
39
+ --form-color-colorpicker-orange-pattern: var(--modes-color-colorcode-orange-rich);
40
+ --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. */
41
+ --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-rich);
42
+ --form-color-colorpicker-red-bg-alt: var(--modes-color-colorcode-red-rich);
43
+ --form-color-colorpicker-red-bg-default: var(--modes-color-colorcode-red-muted);
44
+ --form-color-colorpicker-red-pattern: var(--modes-color-colorcode-red-rich);
45
+ --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. */
46
+ --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-rich);
47
+ --form-color-colorpicker-pink-bg-alt: var(--modes-color-colorcode-pink-rich);
48
+ --form-color-colorpicker-pink-bg-default: var(--modes-color-colorcode-pink-muted);
49
+ --form-color-colorpicker-pink-pattern: var(--modes-color-colorcode-pink-rich);
50
+ --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. */
51
+ --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-rich);
52
+ --form-color-colorpicker-purple-bg-alt: var(--modes-color-colorcode-purple-rich);
53
+ --form-color-colorpicker-purple-bg-default: var(--modes-color-colorcode-purple-muted);
54
+ --form-color-colorpicker-purple-pattern: var(--modes-color-colorcode-purple-rich);
55
+ --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. */
56
+ --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-rich);
57
+ --form-color-colorpicker-slate-bg-alt: var(--modes-color-colorcode-slate-rich);
58
+ --form-color-colorpicker-slate-bg-default: var(--modes-color-colorcode-slate-muted);
59
+ --form-color-colorpicker-slate-pattern: var(--modes-color-colorcode-slate-rich);
60
+ --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. */
61
+ --form-color-colorpicker-gray-border: var(--modes-color-colorcode-gray-rich);
62
+ --form-color-colorpicker-gray-bg-alt: var(--modes-color-colorcode-gray-rich);
63
+ --form-color-colorpicker-gray-bg-default: var(--modes-color-colorcode-gray-muted);
64
+ --form-color-colorpicker-gray-pattern: var(--modes-color-colorcode-gray-rich);
65
+ --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. */
14
66
  --form-color-labelset-label-required: var(--modes-color-interactive-danger-default);
15
67
  --form-color-validation-border-error: var(--modes-color-status-negative-default);
16
68
  --form-color-validation-bar-error: var(--modes-color-status-negative-default); /* error bar to left of inputs */
package/css/marketing/small/components/tab.css CHANGED
@@ -38,6 +38,7 @@
38
38
  --tab-space-y-m: var(--global-space-micro-l); /* Top bottom padding in Tab. */
39
39
  --tab-space-y-l: var(--global-space-micro-xxl); /* Top bottom padding in Tab. */
40
40
  --tab-color-bg-active: var(--modes-color-interactive-monochrome-generic-with-active);
41
+ --tab-color-border-activealt: var(--modes-color-generic-fg-delicate);
41
42
  --tab-color-border-enabled: var(--modes-color-generic-fg-delicate);
42
43
  --tab-color-border-hover: var(--modes-color-generic-fg-moderate);
43
44
  --tab-color-icon-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
@@ -50,6 +51,7 @@
50
51
  --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
51
52
  --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
52
53
  --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
53
- --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
54
- --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
54
+ --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s);
55
+ --tab-borderwidth-navigation-side: var(--global-borderwidth-s);
56
+ --tab-borderwidth-navigation-top: var(--global-borderwidth-s);
55
57
  }
package/css/marketing/small/dark.css CHANGED
@@ -12,6 +12,36 @@
12
12
  --modes-color-brand-copilot-no-bg-monochrome: #FFFFFF;
13
13
  --modes-color-custom-default: #00D639; /* This is the color to replace in white label products. Dark mode recommended luminosity for SAGE is 75.1 (tested), but above 51.9 should be ok. See hsluv.org to be AAA text on 000000 bgs. */
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
+ --modes-color-colorcode-blue-deep: #007FD9;
16
+ --modes-color-colorcode-blue-muted: #00293F;
17
+ --modes-color-colorcode-blue-rich: #0071c3;
18
+ --modes-color-colorcode-teal-deep: #008A89;
19
+ --modes-color-colorcode-teal-muted: #002B2A;
20
+ --modes-color-colorcode-teal-rich: #007C7B;
21
+ --modes-color-colorcode-green-deep: #009023;
22
+ --modes-color-colorcode-green-muted: #002D05;
23
+ --modes-color-colorcode-green-rich: #00811F;
24
+ --modes-color-colorcode-lime-deep: #6E8500;
25
+ --modes-color-colorcode-lime-muted: #171e00;
26
+ --modes-color-colorcode-lime-rich: #637700;
27
+ --modes-color-colorcode-orange-deep: #DB4B00;
28
+ --modes-color-colorcode-orange-muted: #380D00;
29
+ --modes-color-colorcode-orange-rich: #C54300;
30
+ --modes-color-colorcode-red-deep: #F50058;
31
+ --modes-color-colorcode-red-muted: #400011;
32
+ --modes-color-colorcode-red-rich: #DC004E;
33
+ --modes-color-colorcode-pink-deep: #DD2BAB;
34
+ --modes-color-colorcode-pink-muted: #3C002C;
35
+ --modes-color-colorcode-pink-rich: #C8269A;
36
+ --modes-color-colorcode-purple-deep: #985FDC;
37
+ --modes-color-colorcode-purple-muted: #270E41;
38
+ --modes-color-colorcode-purple-rich: #8F4CD7;
39
+ --modes-color-colorcode-slate-deep: #5C8196;
40
+ --modes-color-colorcode-slate-muted: #121D23;
41
+ --modes-color-colorcode-slate-rich: #527386;
42
+ --modes-color-colorcode-gray-deep: #7C7C7C;
43
+ --modes-color-colorcode-gray-muted: #1b1b1b;
44
+ --modes-color-colorcode-gray-rich: #6F6F6F;
15
45
  --modes-color-generic-bg-nought: #000000;
16
46
  --modes-color-generic-bg-faint: #0e0e0e;
17
47
  --modes-color-generic-bg-delicate: #181818;
package/css/marketing/small/light.css CHANGED
@@ -12,6 +12,36 @@
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;
16
+ --modes-color-colorcode-blue-muted: #CDE5FF;
17
+ --modes-color-colorcode-blue-rich: #0084E1;
18
+ --modes-color-colorcode-teal-deep: #007C7B;
19
+ --modes-color-colorcode-teal-muted: #C1FBFB;
20
+ --modes-color-colorcode-teal-rich: #009B99;
21
+ --modes-color-colorcode-green-deep: #00811F;
22
+ --modes-color-colorcode-green-muted: #C5FFC9;
23
+ --modes-color-colorcode-green-rich: #00a128;
24
+ --modes-color-colorcode-lime-deep: #637700;
25
+ --modes-color-colorcode-lime-muted: #FFFF9C;
26
+ --modes-color-colorcode-lime-rich: #819B00;
27
+ --modes-color-colorcode-orange-deep: #C54300;
28
+ --modes-color-colorcode-orange-muted: #FEEAB0;
29
+ --modes-color-colorcode-orange-rich: #EA5100;
30
+ --modes-color-colorcode-red-deep: #DC004E;
31
+ --modes-color-colorcode-red-muted: #FFDBCF;
32
+ --modes-color-colorcode-red-rich: #FE005B;
33
+ --modes-color-colorcode-pink-deep: #C8269A;
34
+ --modes-color-colorcode-pink-muted: #FFD7EE;
35
+ --modes-color-colorcode-pink-rich: #e62db2;
36
+ --modes-color-colorcode-purple-deep: #8F4CD7;
37
+ --modes-color-colorcode-purple-muted: #E7DEF8;
38
+ --modes-color-colorcode-purple-rich: #9C66DE;
39
+ --modes-color-colorcode-slate-deep: #527386;
40
+ --modes-color-colorcode-slate-muted: #D4E5F1;
41
+ --modes-color-colorcode-slate-rich: #60869C;
42
+ --modes-color-colorcode-gray-deep: #6F6F6F;
43
+ --modes-color-colorcode-gray-muted: #E2E2E2;
44
+ --modes-color-colorcode-gray-rich: #9b9b9b;
15
45
  --modes-color-generic-bg-nought: #FFFFFF;
16
46
  --modes-color-generic-bg-faint: #f3f3f3;
17
47
  --modes-color-generic-bg-delicate: #e8e8e8;