@sage/design-tokens 5.2.0 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (374) hide show
  1. package/css/frozenproduct/all.css +87 -77
  2. package/css/frozenproduct/large/components/logo.css +1 -6
  3. package/css/frozenproduct/large/components/status.css +67 -48
  4. package/css/frozenproduct/large/dark.css +12 -14
  5. package/css/frozenproduct/large/light.css +7 -9
  6. package/css/frozenproduct/small/components/logo.css +1 -6
  7. package/css/frozenproduct/small/components/status.css +67 -48
  8. package/css/frozenproduct/small/dark.css +12 -14
  9. package/css/frozenproduct/small/light.css +7 -9
  10. package/css/marketing/all.css +118 -108
  11. package/css/marketing/large/components/logo.css +1 -6
  12. package/css/marketing/large/components/status.css +67 -48
  13. package/css/marketing/large/dark.css +12 -14
  14. package/css/marketing/large/light.css +7 -9
  15. package/css/marketing/small/components/button.css +22 -22
  16. package/css/marketing/small/components/container.css +9 -9
  17. package/css/marketing/small/components/logo.css +1 -6
  18. package/css/marketing/small/components/status.css +67 -48
  19. package/css/marketing/small/dark.css +12 -14
  20. package/css/marketing/small/light.css +7 -9
  21. package/css/product/all.css +87 -77
  22. package/css/product/large/components/logo.css +1 -6
  23. package/css/product/large/components/status.css +67 -48
  24. package/css/product/large/dark.css +12 -14
  25. package/css/product/large/light.css +7 -9
  26. package/css/product/small/components/logo.css +1 -6
  27. package/css/product/small/components/status.css +67 -48
  28. package/css/product/small/dark.css +12 -14
  29. package/css/product/small/light.css +7 -9
  30. package/ios/frozenproduct/large/dark/components/logo.h +0 -5
  31. package/ios/frozenproduct/large/dark/components/status.h +67 -48
  32. package/ios/frozenproduct/large/dark/mode.h +12 -14
  33. package/ios/frozenproduct/large/light/components/logo.h +0 -5
  34. package/ios/frozenproduct/large/light/components/status.h +67 -48
  35. package/ios/frozenproduct/large/light/mode.h +7 -9
  36. package/ios/frozenproduct/small/dark/components/logo.h +0 -5
  37. package/ios/frozenproduct/small/dark/components/status.h +67 -48
  38. package/ios/frozenproduct/small/dark/mode.h +12 -14
  39. package/ios/frozenproduct/small/light/components/logo.h +0 -5
  40. package/ios/frozenproduct/small/light/components/status.h +67 -48
  41. package/ios/frozenproduct/small/light/mode.h +7 -9
  42. package/ios/marketing/large/dark/components/logo.h +0 -5
  43. package/ios/marketing/large/dark/components/status.h +67 -48
  44. package/ios/marketing/large/dark/mode.h +12 -14
  45. package/ios/marketing/large/light/components/logo.h +0 -5
  46. package/ios/marketing/large/light/components/status.h +67 -48
  47. package/ios/marketing/large/light/mode.h +7 -9
  48. package/ios/marketing/small/dark/components/logo.h +0 -5
  49. package/ios/marketing/small/dark/components/status.h +67 -48
  50. package/ios/marketing/small/dark/mode.h +12 -14
  51. package/ios/marketing/small/light/components/logo.h +0 -5
  52. package/ios/marketing/small/light/components/status.h +67 -48
  53. package/ios/marketing/small/light/mode.h +7 -9
  54. package/ios/product/large/dark/components/logo.h +0 -5
  55. package/ios/product/large/dark/components/status.h +67 -48
  56. package/ios/product/large/dark/mode.h +12 -14
  57. package/ios/product/large/light/components/logo.h +0 -5
  58. package/ios/product/large/light/components/status.h +67 -48
  59. package/ios/product/large/light/mode.h +7 -9
  60. package/ios/product/small/dark/components/logo.h +0 -5
  61. package/ios/product/small/dark/components/status.h +67 -48
  62. package/ios/product/small/dark/mode.h +12 -14
  63. package/ios/product/small/light/components/logo.h +0 -5
  64. package/ios/product/small/light/components/status.h +67 -48
  65. package/ios/product/small/light/mode.h +7 -9
  66. package/js/common/frozenproduct/large/dark/components/logo.d.ts +0 -7
  67. package/js/common/frozenproduct/large/dark/components/logo.js +1 -70
  68. package/js/common/frozenproduct/large/dark/components/status.d.ts +103 -60
  69. package/js/common/frozenproduct/large/dark/components/status.js +1534 -892
  70. package/js/common/frozenproduct/large/dark/mode.d.ts +16 -20
  71. package/js/common/frozenproduct/large/dark/mode.js +410 -193
  72. package/js/common/frozenproduct/large/light/components/logo.d.ts +0 -7
  73. package/js/common/frozenproduct/large/light/components/logo.js +1 -70
  74. package/js/common/frozenproduct/large/light/components/status.d.ts +103 -60
  75. package/js/common/frozenproduct/large/light/components/status.js +1534 -892
  76. package/js/common/frozenproduct/large/light/mode.d.ts +7 -11
  77. package/js/common/frozenproduct/large/light/mode.js +416 -99
  78. package/js/common/frozenproduct/small/dark/components/logo.d.ts +0 -7
  79. package/js/common/frozenproduct/small/dark/components/logo.js +1 -70
  80. package/js/common/frozenproduct/small/dark/components/status.d.ts +103 -60
  81. package/js/common/frozenproduct/small/dark/components/status.js +1534 -892
  82. package/js/common/frozenproduct/small/dark/mode.d.ts +16 -20
  83. package/js/common/frozenproduct/small/dark/mode.js +410 -193
  84. package/js/common/frozenproduct/small/light/components/logo.d.ts +0 -7
  85. package/js/common/frozenproduct/small/light/components/logo.js +1 -70
  86. package/js/common/frozenproduct/small/light/components/status.d.ts +103 -60
  87. package/js/common/frozenproduct/small/light/components/status.js +1534 -892
  88. package/js/common/frozenproduct/small/light/mode.d.ts +7 -11
  89. package/js/common/frozenproduct/small/light/mode.js +416 -99
  90. package/js/common/marketing/large/dark/components/logo.d.ts +0 -7
  91. package/js/common/marketing/large/dark/components/logo.js +1 -70
  92. package/js/common/marketing/large/dark/components/status.d.ts +103 -60
  93. package/js/common/marketing/large/dark/components/status.js +1534 -892
  94. package/js/common/marketing/large/dark/mode.d.ts +16 -20
  95. package/js/common/marketing/large/dark/mode.js +410 -193
  96. package/js/common/marketing/large/light/components/logo.d.ts +0 -7
  97. package/js/common/marketing/large/light/components/logo.js +1 -70
  98. package/js/common/marketing/large/light/components/status.d.ts +103 -60
  99. package/js/common/marketing/large/light/components/status.js +1534 -892
  100. package/js/common/marketing/large/light/mode.d.ts +7 -11
  101. package/js/common/marketing/large/light/mode.js +416 -99
  102. package/js/common/marketing/small/dark/components/logo.d.ts +0 -7
  103. package/js/common/marketing/small/dark/components/logo.js +1 -70
  104. package/js/common/marketing/small/dark/components/status.d.ts +103 -60
  105. package/js/common/marketing/small/dark/components/status.js +1534 -892
  106. package/js/common/marketing/small/dark/mode.d.ts +16 -20
  107. package/js/common/marketing/small/dark/mode.js +410 -193
  108. package/js/common/marketing/small/light/components/logo.d.ts +0 -7
  109. package/js/common/marketing/small/light/components/logo.js +1 -70
  110. package/js/common/marketing/small/light/components/status.d.ts +103 -60
  111. package/js/common/marketing/small/light/components/status.js +1534 -892
  112. package/js/common/marketing/small/light/mode.d.ts +7 -11
  113. package/js/common/marketing/small/light/mode.js +416 -99
  114. package/js/common/product/large/dark/components/logo.d.ts +0 -7
  115. package/js/common/product/large/dark/components/logo.js +1 -70
  116. package/js/common/product/large/dark/components/status.d.ts +103 -60
  117. package/js/common/product/large/dark/components/status.js +1534 -892
  118. package/js/common/product/large/dark/mode.d.ts +16 -20
  119. package/js/common/product/large/dark/mode.js +410 -193
  120. package/js/common/product/large/light/components/logo.d.ts +0 -7
  121. package/js/common/product/large/light/components/logo.js +1 -70
  122. package/js/common/product/large/light/components/status.d.ts +103 -60
  123. package/js/common/product/large/light/components/status.js +1534 -892
  124. package/js/common/product/large/light/mode.d.ts +7 -11
  125. package/js/common/product/large/light/mode.js +416 -99
  126. package/js/common/product/small/dark/components/logo.d.ts +0 -7
  127. package/js/common/product/small/dark/components/logo.js +1 -70
  128. package/js/common/product/small/dark/components/status.d.ts +103 -60
  129. package/js/common/product/small/dark/components/status.js +1534 -892
  130. package/js/common/product/small/dark/mode.d.ts +16 -20
  131. package/js/common/product/small/dark/mode.js +410 -193
  132. package/js/common/product/small/light/components/logo.d.ts +0 -7
  133. package/js/common/product/small/light/components/logo.js +1 -70
  134. package/js/common/product/small/light/components/status.d.ts +103 -60
  135. package/js/common/product/small/light/components/status.js +1534 -892
  136. package/js/common/product/small/light/mode.d.ts +7 -11
  137. package/js/common/product/small/light/mode.js +416 -99
  138. package/js/es6/frozenproduct/large/dark/components/logo.d.ts +0 -5
  139. package/js/es6/frozenproduct/large/dark/components/logo.js +0 -7
  140. package/js/es6/frozenproduct/large/dark/components/status.d.ts +84 -60
  141. package/js/es6/frozenproduct/large/dark/components/status.js +67 -48
  142. package/js/es6/frozenproduct/large/dark/mode.d.ts +17 -15
  143. package/js/es6/frozenproduct/large/dark/mode.js +12 -16
  144. package/js/es6/frozenproduct/large/light/components/logo.d.ts +0 -5
  145. package/js/es6/frozenproduct/large/light/components/logo.js +0 -7
  146. package/js/es6/frozenproduct/large/light/components/status.d.ts +84 -60
  147. package/js/es6/frozenproduct/large/light/components/status.js +67 -48
  148. package/js/es6/frozenproduct/large/light/mode.d.ts +11 -9
  149. package/js/es6/frozenproduct/large/light/mode.js +7 -11
  150. package/js/es6/frozenproduct/small/dark/components/logo.d.ts +0 -5
  151. package/js/es6/frozenproduct/small/dark/components/logo.js +0 -7
  152. package/js/es6/frozenproduct/small/dark/components/status.d.ts +84 -60
  153. package/js/es6/frozenproduct/small/dark/components/status.js +67 -48
  154. package/js/es6/frozenproduct/small/dark/mode.d.ts +17 -15
  155. package/js/es6/frozenproduct/small/dark/mode.js +12 -16
  156. package/js/es6/frozenproduct/small/light/components/logo.d.ts +0 -5
  157. package/js/es6/frozenproduct/small/light/components/logo.js +0 -7
  158. package/js/es6/frozenproduct/small/light/components/status.d.ts +84 -60
  159. package/js/es6/frozenproduct/small/light/components/status.js +67 -48
  160. package/js/es6/frozenproduct/small/light/mode.d.ts +11 -9
  161. package/js/es6/frozenproduct/small/light/mode.js +7 -11
  162. package/js/es6/marketing/large/dark/components/logo.d.ts +0 -5
  163. package/js/es6/marketing/large/dark/components/logo.js +0 -7
  164. package/js/es6/marketing/large/dark/components/status.d.ts +84 -60
  165. package/js/es6/marketing/large/dark/components/status.js +67 -48
  166. package/js/es6/marketing/large/dark/mode.d.ts +17 -15
  167. package/js/es6/marketing/large/dark/mode.js +12 -16
  168. package/js/es6/marketing/large/light/components/logo.d.ts +0 -5
  169. package/js/es6/marketing/large/light/components/logo.js +0 -7
  170. package/js/es6/marketing/large/light/components/status.d.ts +84 -60
  171. package/js/es6/marketing/large/light/components/status.js +67 -48
  172. package/js/es6/marketing/large/light/mode.d.ts +11 -9
  173. package/js/es6/marketing/large/light/mode.js +7 -11
  174. package/js/es6/marketing/small/dark/components/logo.d.ts +0 -5
  175. package/js/es6/marketing/small/dark/components/logo.js +0 -7
  176. package/js/es6/marketing/small/dark/components/status.d.ts +84 -60
  177. package/js/es6/marketing/small/dark/components/status.js +67 -48
  178. package/js/es6/marketing/small/dark/mode.d.ts +17 -15
  179. package/js/es6/marketing/small/dark/mode.js +12 -16
  180. package/js/es6/marketing/small/light/components/logo.d.ts +0 -5
  181. package/js/es6/marketing/small/light/components/logo.js +0 -7
  182. package/js/es6/marketing/small/light/components/status.d.ts +84 -60
  183. package/js/es6/marketing/small/light/components/status.js +67 -48
  184. package/js/es6/marketing/small/light/mode.d.ts +11 -9
  185. package/js/es6/marketing/small/light/mode.js +7 -11
  186. package/js/es6/product/large/dark/components/logo.d.ts +0 -5
  187. package/js/es6/product/large/dark/components/logo.js +0 -7
  188. package/js/es6/product/large/dark/components/status.d.ts +84 -60
  189. package/js/es6/product/large/dark/components/status.js +67 -48
  190. package/js/es6/product/large/dark/mode.d.ts +17 -15
  191. package/js/es6/product/large/dark/mode.js +12 -16
  192. package/js/es6/product/large/light/components/logo.d.ts +0 -5
  193. package/js/es6/product/large/light/components/logo.js +0 -7
  194. package/js/es6/product/large/light/components/status.d.ts +84 -60
  195. package/js/es6/product/large/light/components/status.js +67 -48
  196. package/js/es6/product/large/light/mode.d.ts +11 -9
  197. package/js/es6/product/large/light/mode.js +7 -11
  198. package/js/es6/product/small/dark/components/logo.d.ts +0 -5
  199. package/js/es6/product/small/dark/components/logo.js +0 -7
  200. package/js/es6/product/small/dark/components/status.d.ts +84 -60
  201. package/js/es6/product/small/dark/components/status.js +67 -48
  202. package/js/es6/product/small/dark/mode.d.ts +17 -15
  203. package/js/es6/product/small/dark/mode.js +12 -16
  204. package/js/es6/product/small/light/components/logo.d.ts +0 -5
  205. package/js/es6/product/small/light/components/logo.js +0 -7
  206. package/js/es6/product/small/light/components/status.d.ts +84 -60
  207. package/js/es6/product/small/light/components/status.js +67 -48
  208. package/js/es6/product/small/light/mode.d.ts +11 -9
  209. package/js/es6/product/small/light/mode.js +7 -11
  210. package/js/umd/frozenproduct/large/dark/components/logo.js +1 -70
  211. package/js/umd/frozenproduct/large/dark/components/status.js +1554 -883
  212. package/js/umd/frozenproduct/large/dark/mode.js +403 -193
  213. package/js/umd/frozenproduct/large/light/components/logo.js +1 -70
  214. package/js/umd/frozenproduct/large/light/components/status.js +1554 -883
  215. package/js/umd/frozenproduct/large/light/mode.js +409 -99
  216. package/js/umd/frozenproduct/small/dark/components/logo.js +1 -70
  217. package/js/umd/frozenproduct/small/dark/components/status.js +1554 -883
  218. package/js/umd/frozenproduct/small/dark/mode.js +403 -193
  219. package/js/umd/frozenproduct/small/light/components/logo.js +1 -70
  220. package/js/umd/frozenproduct/small/light/components/status.js +1554 -883
  221. package/js/umd/frozenproduct/small/light/mode.js +409 -99
  222. package/js/umd/marketing/large/dark/components/logo.js +1 -70
  223. package/js/umd/marketing/large/dark/components/status.js +1554 -883
  224. package/js/umd/marketing/large/dark/mode.js +403 -193
  225. package/js/umd/marketing/large/light/components/logo.js +1 -70
  226. package/js/umd/marketing/large/light/components/status.js +1554 -883
  227. package/js/umd/marketing/large/light/mode.js +409 -99
  228. package/js/umd/marketing/small/dark/components/logo.js +1 -70
  229. package/js/umd/marketing/small/dark/components/status.js +1554 -883
  230. package/js/umd/marketing/small/dark/mode.js +403 -193
  231. package/js/umd/marketing/small/light/components/logo.js +1 -70
  232. package/js/umd/marketing/small/light/components/status.js +1554 -883
  233. package/js/umd/marketing/small/light/mode.js +409 -99
  234. package/js/umd/product/large/dark/components/logo.js +1 -70
  235. package/js/umd/product/large/dark/components/status.js +1554 -883
  236. package/js/umd/product/large/dark/mode.js +403 -193
  237. package/js/umd/product/large/light/components/logo.js +1 -70
  238. package/js/umd/product/large/light/components/status.js +1554 -883
  239. package/js/umd/product/large/light/mode.js +409 -99
  240. package/js/umd/product/small/dark/components/logo.js +1 -70
  241. package/js/umd/product/small/dark/components/status.js +1554 -883
  242. package/js/umd/product/small/dark/mode.js +403 -193
  243. package/js/umd/product/small/light/components/logo.js +1 -70
  244. package/js/umd/product/small/light/components/status.js +1554 -883
  245. package/js/umd/product/small/light/mode.js +409 -99
  246. package/json/flat/frozenproduct/large/dark/components/logo.json +0 -5
  247. package/json/flat/frozenproduct/large/dark/components/status.json +67 -48
  248. package/json/flat/frozenproduct/large/dark/mode.json +12 -14
  249. package/json/flat/frozenproduct/large/light/components/logo.json +0 -5
  250. package/json/flat/frozenproduct/large/light/components/status.json +67 -48
  251. package/json/flat/frozenproduct/large/light/mode.json +7 -9
  252. package/json/flat/frozenproduct/small/dark/components/logo.json +0 -5
  253. package/json/flat/frozenproduct/small/dark/components/status.json +67 -48
  254. package/json/flat/frozenproduct/small/dark/mode.json +12 -14
  255. package/json/flat/frozenproduct/small/light/components/logo.json +0 -5
  256. package/json/flat/frozenproduct/small/light/components/status.json +67 -48
  257. package/json/flat/frozenproduct/small/light/mode.json +7 -9
  258. package/json/flat/marketing/large/dark/components/logo.json +0 -5
  259. package/json/flat/marketing/large/dark/components/status.json +67 -48
  260. package/json/flat/marketing/large/dark/mode.json +12 -14
  261. package/json/flat/marketing/large/light/components/logo.json +0 -5
  262. package/json/flat/marketing/large/light/components/status.json +67 -48
  263. package/json/flat/marketing/large/light/mode.json +7 -9
  264. package/json/flat/marketing/small/dark/components/logo.json +0 -5
  265. package/json/flat/marketing/small/dark/components/status.json +67 -48
  266. package/json/flat/marketing/small/dark/mode.json +12 -14
  267. package/json/flat/marketing/small/light/components/logo.json +0 -5
  268. package/json/flat/marketing/small/light/components/status.json +67 -48
  269. package/json/flat/marketing/small/light/mode.json +7 -9
  270. package/json/flat/product/large/dark/components/logo.json +0 -5
  271. package/json/flat/product/large/dark/components/status.json +67 -48
  272. package/json/flat/product/large/dark/mode.json +12 -14
  273. package/json/flat/product/large/light/components/logo.json +0 -5
  274. package/json/flat/product/large/light/components/status.json +67 -48
  275. package/json/flat/product/large/light/mode.json +7 -9
  276. package/json/flat/product/small/dark/components/logo.json +0 -5
  277. package/json/flat/product/small/dark/components/status.json +67 -48
  278. package/json/flat/product/small/dark/mode.json +12 -14
  279. package/json/flat/product/small/light/components/logo.json +0 -5
  280. package/json/flat/product/small/light/components/status.json +67 -48
  281. package/json/flat/product/small/light/mode.json +7 -9
  282. package/json/nested/frozenproduct/large/dark/components/logo.json +0 -7
  283. package/json/nested/frozenproduct/large/dark/components/status.json +103 -60
  284. package/json/nested/frozenproduct/large/dark/mode.json +18 -22
  285. package/json/nested/frozenproduct/large/light/components/logo.json +0 -7
  286. package/json/nested/frozenproduct/large/light/components/status.json +103 -60
  287. package/json/nested/frozenproduct/large/light/mode.json +10 -14
  288. package/json/nested/frozenproduct/small/dark/components/logo.json +0 -7
  289. package/json/nested/frozenproduct/small/dark/components/status.json +103 -60
  290. package/json/nested/frozenproduct/small/dark/mode.json +18 -22
  291. package/json/nested/frozenproduct/small/light/components/logo.json +0 -7
  292. package/json/nested/frozenproduct/small/light/components/status.json +103 -60
  293. package/json/nested/frozenproduct/small/light/mode.json +10 -14
  294. package/json/nested/marketing/large/dark/components/logo.json +0 -7
  295. package/json/nested/marketing/large/dark/components/status.json +103 -60
  296. package/json/nested/marketing/large/dark/mode.json +18 -22
  297. package/json/nested/marketing/large/light/components/logo.json +0 -7
  298. package/json/nested/marketing/large/light/components/status.json +103 -60
  299. package/json/nested/marketing/large/light/mode.json +10 -14
  300. package/json/nested/marketing/small/dark/components/logo.json +0 -7
  301. package/json/nested/marketing/small/dark/components/status.json +103 -60
  302. package/json/nested/marketing/small/dark/mode.json +18 -22
  303. package/json/nested/marketing/small/light/components/logo.json +0 -7
  304. package/json/nested/marketing/small/light/components/status.json +103 -60
  305. package/json/nested/marketing/small/light/mode.json +10 -14
  306. package/json/nested/product/large/dark/components/logo.json +0 -7
  307. package/json/nested/product/large/dark/components/status.json +103 -60
  308. package/json/nested/product/large/dark/mode.json +18 -22
  309. package/json/nested/product/large/light/components/logo.json +0 -7
  310. package/json/nested/product/large/light/components/status.json +103 -60
  311. package/json/nested/product/large/light/mode.json +10 -14
  312. package/json/nested/product/small/dark/components/logo.json +0 -7
  313. package/json/nested/product/small/dark/components/status.json +103 -60
  314. package/json/nested/product/small/dark/mode.json +18 -22
  315. package/json/nested/product/small/light/components/logo.json +0 -7
  316. package/json/nested/product/small/light/components/status.json +103 -60
  317. package/json/nested/product/small/light/mode.json +10 -14
  318. package/package.json +1 -1
  319. package/sage-design-tokens-6.0.0.tgz +0 -0
  320. package/scss/frozenproduct/large/components/button.scss +22 -22
  321. package/scss/frozenproduct/large/components/container.scss +9 -9
  322. package/scss/frozenproduct/large/components/form.scss +7 -7
  323. package/scss/frozenproduct/large/components/link.scss +2 -2
  324. package/scss/frozenproduct/large/components/logo.scss +1 -6
  325. package/scss/frozenproduct/large/components/nav.scss +3 -3
  326. package/scss/frozenproduct/large/components/page.scss +1 -1
  327. package/scss/frozenproduct/large/components/popover.scss +2 -2
  328. package/scss/frozenproduct/large/components/progress.scss +6 -6
  329. package/scss/frozenproduct/large/components/status.scss +67 -48
  330. package/scss/frozenproduct/large/components/tab.scss +7 -7
  331. package/scss/frozenproduct/large/components/table.scss +11 -11
  332. package/scss/frozenproduct/large/dark.scss +12 -14
  333. package/scss/frozenproduct/large/light.scss +7 -9
  334. package/scss/frozenproduct/small/components/logo.scss +1 -6
  335. package/scss/frozenproduct/small/components/status.scss +67 -48
  336. package/scss/frozenproduct/small/dark.scss +12 -14
  337. package/scss/frozenproduct/small/light.scss +7 -9
  338. package/scss/marketing/large/components/button.scss +22 -22
  339. package/scss/marketing/large/components/container.scss +9 -9
  340. package/scss/marketing/large/components/form.scss +7 -7
  341. package/scss/marketing/large/components/link.scss +2 -2
  342. package/scss/marketing/large/components/logo.scss +1 -6
  343. package/scss/marketing/large/components/nav.scss +3 -3
  344. package/scss/marketing/large/components/page.scss +1 -1
  345. package/scss/marketing/large/components/popover.scss +2 -2
  346. package/scss/marketing/large/components/progress.scss +6 -6
  347. package/scss/marketing/large/components/status.scss +67 -48
  348. package/scss/marketing/large/components/tab.scss +7 -7
  349. package/scss/marketing/large/components/table.scss +11 -11
  350. package/scss/marketing/large/dark.scss +12 -14
  351. package/scss/marketing/large/light.scss +7 -9
  352. package/scss/marketing/small/components/logo.scss +1 -6
  353. package/scss/marketing/small/components/status.scss +67 -48
  354. package/scss/marketing/small/dark.scss +12 -14
  355. package/scss/marketing/small/light.scss +7 -9
  356. package/scss/product/large/components/button.scss +22 -22
  357. package/scss/product/large/components/container.scss +9 -9
  358. package/scss/product/large/components/form.scss +7 -7
  359. package/scss/product/large/components/link.scss +2 -2
  360. package/scss/product/large/components/logo.scss +1 -6
  361. package/scss/product/large/components/nav.scss +3 -3
  362. package/scss/product/large/components/page.scss +1 -1
  363. package/scss/product/large/components/popover.scss +2 -2
  364. package/scss/product/large/components/progress.scss +6 -6
  365. package/scss/product/large/components/status.scss +67 -48
  366. package/scss/product/large/components/tab.scss +7 -7
  367. package/scss/product/large/components/table.scss +11 -11
  368. package/scss/product/large/dark.scss +12 -14
  369. package/scss/product/large/light.scss +7 -9
  370. package/scss/product/small/components/logo.scss +1 -6
  371. package/scss/product/small/components/status.scss +67 -48
  372. package/scss/product/small/dark.scss +12 -14
  373. package/scss/product/small/light.scss +7 -9
  374. package/sage-design-tokens-5.2.0.tgz +0 -0
package/css/frozenproduct/all.css CHANGED
@@ -151,12 +151,7 @@
151
151
  --modes-color-brand-with-default-alt-light: #FFFFFF;
152
152
  --modes-color-brand-copilot-ai-identifier-default-light: #000000;
153
153
  --modes-color-brand-copilot-ai-identifier-with-default-light: #00D639;
154
- --modes-color-brand-copilot-no-bg-s-light: #000000;
155
- --modes-color-brand-copilot-no-bg-star-light: #000000;
156
- --modes-color-brand-copilot-no-bg-mono-light: #000000;
157
- --modes-color-brand-copilot-with-bg-s-light: linear-gradient(191deg, #9D60FF 28.12%, #7C78F8 33.5%, #29B7E6 46.96%, #00D6DE 52.34%, #00D6DA 55.03%, #00D6D0 56.83%, #00D6C0 57.73%, #00D6A8 59.52%, #00D68A 60.42%, #00D665 62.21%, #00D639 63.11%);
158
- --modes-color-brand-copilot-with-bg-star-light: radial-gradient(99.94% 104.1% at 8.01% 0.98%, #9D60FF 34%, #5A99F1 52%, #32B3E8 59%, #0DCCE0 68%, #00D6DE 72%, #00D6D7 74%, #00D6C6 77%, #00D6AA 81%, #00D682 84%, #00D650 88%, #00D639 90%);
159
- --modes-color-brand-copilot-with-bg-bg-light: #000000;
154
+ --modes-color-brand-copilot-no-bg-monochrome-light: #000000;
160
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. */
161
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. */
162
157
  --modes-color-generic-bg-nought-light: #FFFFFF;
@@ -269,7 +264,8 @@
269
264
  --modes-color-status-caution-hover-light: #b13a0d; /* used on pill hover states */
270
265
  --modes-color-status-caution-hover-alt-light: #f1e0d8; /* used on pill hover states and message bg */
271
266
  --modes-color-status-caution-text-light: #bf3e0c;
272
- --modes-color-status-caution-frozen-default-light: #FF8629; /* used on global message bg */
267
+ --modes-color-status-caution-frozenglobal-default-light: #ff8629; /* used on global message bg */
268
+ --modes-color-status-caution-frozenglobal-hover-light: #ff9a4e; /* used on global message bg */
273
269
  --modes-color-status-content-with-default-light: #FFFFFF;
274
270
  --modes-color-status-content-with-default-alt-light: #000000f2;
275
271
  --modes-color-status-content-with-hover-light: #FFFFFF; /* for pill hover X */
@@ -281,19 +277,21 @@
281
277
  --modes-color-status-info-default-alt-light: #eaeef6; /* Subtle message bg */
282
278
  --modes-color-status-info-hover-light: #10508a; /* used on pill hover states */
283
279
  --modes-color-status-info-hover-alt-light: #dde1e8; /* used on pill hover states and message bg */
284
- --modes-color-status-info-frozen-default-light: #65a9ff; /* used on global message bg */
280
+ --modes-color-status-info-frozenglobal-default-light: #65a9ff; /* used on global message bg */
281
+ --modes-color-status-info-frozenglobal-hover-light: #84b6ff; /* used on global message bg */
285
282
  --modes-color-status-negative-default-light: #CD384B; /* For pills and messages. Not accessible with white TEXT. */
286
283
  --modes-color-status-negative-default-alt-light: #fdeceb; /* Subtle message bg */
287
284
  --modes-color-status-negative-hover-light: #aa323f; /* used on pill hover states */
288
285
  --modes-color-status-negative-hover-alt-light: #efdfde; /* used on pill hover states and message bg */
289
286
  --modes-color-status-negative-text-light: #CD384B;
290
- --modes-color-status-neutral-alt-light: #656565;
291
287
  --modes-color-status-neutral-default-light: #656565;
292
288
  --modes-color-status-neutral-default-alt-light: #efefef; /* Subtle message bg */
293
289
  --modes-color-status-neutral-hover-light: #555; /* used on pill hover states */
294
290
  --modes-color-status-neutral-hover-alt-light: #e2e2e2; /* used on pill hover states and message bg */
295
291
  --modes-color-status-neutral-frozen-default-light: #335B70;
292
+ --modes-color-status-neutral-frozen-default-alt-light: #eaedf0; /* Subtle message bg */
296
293
  --modes-color-status-neutral-frozen-hover-light: #20313b;
294
+ --modes-color-status-neutral-frozen-hover-alt-light: #dde0e2; /* used on pill hover states and message bg */
297
295
  --modes-color-status-positive-default-light: #008A21; /* For pills and messages. Not accessible with white TEXT. */
298
296
  --modes-color-status-positive-default-alt-light: #eaf3e8; /* Subtle message bg */
299
297
  --modes-color-status-positive-hover-light: #0f731e; /* used on pill hover states */
@@ -325,12 +323,7 @@
325
323
  --modes-color-brand-with-default-alt-dark: #000000;
326
324
  --modes-color-brand-copilot-ai-identifier-default-dark: #FFFFFF;
327
325
  --modes-color-brand-copilot-ai-identifier-with-default-dark: #00D639;
328
- --modes-color-brand-copilot-no-bg-s-dark: linear-gradient(191deg, #9D60FF 28.12%, #7C78F8 33.5%, #29B7E6 46.96%, #00D6DE 52.34%, #00D6DA 55.03%, #00D6D0 56.83%, #00D6C0 57.73%, #00D6A8 59.52%, #00D68A 60.42%, #00D665 62.21%, #00D639 63.11%);
329
- --modes-color-brand-copilot-no-bg-star-dark: radial-gradient(99.94% 104.1% at 8.01% 0.98%, #9D60FF 34%, #5A99F1 52%, #32B3E8 59%, #0DCCE0 68%, #00D6DE 72%, #00D6D7 74%, #00D6C6 77%, #00D6AA 81%, #00D682 84%, #00D650 88%, #00D639 90%);
330
- --modes-color-brand-copilot-no-bg-mono-dark: #FFFFFF;
331
- --modes-color-brand-copilot-with-bg-s-dark: #000000;
332
- --modes-color-brand-copilot-with-bg-star-dark: #000000;
333
- --modes-color-brand-copilot-with-bg-bg-dark: #FFFFFF;
326
+ --modes-color-brand-copilot-no-bg-monochrome-dark: #FFFFFF;
334
327
  --modes-color-custom-default-dark: #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. */
335
328
  --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. */
336
329
  --modes-color-generic-bg-nought-dark: #000000;
@@ -433,17 +426,18 @@
433
426
  --modes-color-interactive-progress-bg-dark: #ffffff14;
434
427
  --modes-color-interactive-progress-bg-alt-dark: #00000014;
435
428
  --modes-color-interactive-progress-frozen-bg-dark: #ffffff14;
436
- --modes-color-status-ai-default-dark: #000000;
437
- --modes-color-status-ai-default-alt-dark: #FFFFFF; /* bg for contextual message comp */
438
- --modes-color-status-ai-default-horizontal-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
439
- --modes-color-status-ai-default-vertical-dark: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
440
- --modes-color-status-generic-default-dark: #008a89;
441
429
  --modes-color-status-caution-default-dark: #E04500;
442
430
  --modes-color-status-caution-default-alt-dark: #251206; /* Subtle message bg */
443
431
  --modes-color-status-caution-hover-dark: #eb6732; /* used on pill hover states */
444
432
  --modes-color-status-caution-hover-alt-dark: #34211a; /* used on pill hover states and message bg */
445
433
  --modes-color-status-caution-text-dark: #e75b23;
446
- --modes-color-status-caution-frozen-default-dark: #251206; /* Global message bg */
434
+ --modes-color-status-caution-frozenglobal-default-dark: #E04500; /* Global message bg */
435
+ --modes-color-status-caution-frozenglobal-hover-dark: #eb6732; /* used on global message bg */
436
+ --modes-color-status-ai-default-dark: #000000;
437
+ --modes-color-status-ai-default-alt-dark: #FFFFFF; /* bg for contextual message comp */
438
+ --modes-color-status-ai-default-horizontal-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
439
+ --modes-color-status-ai-default-vertical-dark: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
440
+ --modes-color-status-generic-default-dark: #008a89;
447
441
  --modes-color-status-content-with-default-dark: #000000;
448
442
  --modes-color-status-content-with-default-alt-dark: #fffffff2;
449
443
  --modes-color-status-content-with-hover-dark: #000000;
@@ -455,19 +449,21 @@
455
449
  --modes-color-status-info-default-alt-dark: #111722; /* Subtle message bg */
456
450
  --modes-color-status-info-hover-dark: #5291e0; /* used on pill hover states */
457
451
  --modes-color-status-info-hover-alt-dark: #212631; /* used on pill hover states and message bg */
458
- --modes-color-status-info-frozen-default-dark: #111722; /* Global message bg */
452
+ --modes-color-status-info-frozenglobal-default-dark: #007ED9; /* Global message bg */
453
+ --modes-color-status-info-frozenglobal-hover-dark: #5291e0; /* used on global message bg */
459
454
  --modes-color-status-negative-default-dark: #E13E53;
460
455
  --modes-color-status-negative-default-alt-dark: #241212; /* Subtle message bg */
461
456
  --modes-color-status-negative-hover-dark: #eb646c; /* used on pill hover states */
462
457
  --modes-color-status-negative-hover-alt-dark: #332122; /* used on pill hover states and message bg */
463
458
  --modes-color-status-negative-text-dark: #E13E53;
464
- --modes-color-status-neutral-alt-dark: #7C7C7C;
465
459
  --modes-color-status-neutral-default-dark: #7C7C7C;
466
460
  --modes-color-status-neutral-default-alt-dark: #171717; /* Subtle message bg */
467
461
  --modes-color-status-neutral-hover-dark: #909090; /* used on pill hover states */
468
462
  --modes-color-status-neutral-hover-alt-dark: #262626; /* used on pill hover states and message bg */
469
463
  --modes-color-status-neutral-frozen-default-dark: #9e9e9e;
464
+ --modes-color-status-neutral-frozen-default-alt-dark: #171717; /* Subtle message bg */
470
465
  --modes-color-status-neutral-frozen-hover-dark: #909090;
466
+ --modes-color-status-neutral-frozen-hover-alt-dark: #262626; /* used on pill hover states and message bg */
471
467
  --modes-color-status-positive-default-dark: #009023;
472
468
  --modes-color-status-positive-default-alt-dark: #0e1a0b; /* Subtle message bg */
473
469
  --modes-color-status-positive-hover-dark: #2e9936; /* used on pill hover states */
@@ -1309,16 +1305,11 @@
1309
1305
 
1310
1306
  /* logo component tokens */
1311
1307
  --logo-size-ai-m: 14px; /* AI star */
1312
- --logo-color-copilot-with-bg-bg-s: light-dark(var(--modes-color-brand-copilot-with-bg-s-light), var(--modes-color-brand-copilot-with-bg-s-dark));
1313
- --logo-color-copilot-with-bg-bg-star: light-dark(var(--modes-color-brand-copilot-with-bg-star-light), var(--modes-color-brand-copilot-with-bg-star-dark));
1314
1308
  --logo-color-sage-bg-default: light-dark(var(--modes-color-brand-default-light), var(--modes-color-brand-default-dark)); /* sage logo */
1315
1309
  --logo-color-sage-bg-alt: light-dark(var(--modes-color-brand-default-alt-light), var(--modes-color-brand-default-alt-dark));
1316
1310
  --logo-color-trust-bg-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark)); /* filled */
1317
1311
  --logo-color-trust-outline: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark));
1318
- --logo-color-copilot-no-bg-bg-s: light-dark(var(--modes-color-brand-copilot-no-bg-s-light), var(--modes-color-brand-copilot-no-bg-s-dark));
1319
- --logo-color-copilot-no-bg-bg-star: light-dark(var(--modes-color-brand-copilot-no-bg-star-light), var(--modes-color-brand-copilot-no-bg-star-dark));
1320
- --logo-color-copilot-no-bg-fg-default: light-dark(var(--modes-color-brand-copilot-no-bg-mono-light), var(--modes-color-brand-copilot-no-bg-mono-dark));
1321
- --logo-color-copilot-with-bg-bg-default: light-dark(var(--modes-color-brand-copilot-with-bg-bg-light), var(--modes-color-brand-copilot-with-bg-bg-dark));
1312
+ --logo-color-copilot-no-bg-fg-default: light-dark(var(--modes-color-brand-copilot-no-bg-monochrome-light), var(--modes-color-brand-copilot-no-bg-monochrome-dark));
1322
1313
  --logo-color-ai-identifier-bg-star: light-dark(var(--modes-color-brand-copilot-ai-identifier-default-light), var(--modes-color-brand-copilot-ai-identifier-default-dark)); /* star bg color */
1323
1314
  --logo-color-ai-identifier-bg-dot: light-dark(var(--modes-color-brand-copilot-ai-identifier-with-default-light), var(--modes-color-brand-copilot-ai-identifier-with-default-dark));
1324
1315
  --logo-color-ai-identifier-outline: light-dark(var(--modes-color-brand-copilot-ai-identifier-default-light), var(--modes-color-brand-copilot-ai-identifier-default-dark)); /* star outline variant */
@@ -1654,31 +1645,46 @@
1654
1645
  /* status component tokens */
1655
1646
  --status-radius-none: var(--global-radius-none); /* Pill (embedded element inner corners) */
1656
1647
  --status-color-none: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark)); /* transparent override used for hiding colors when needed. */
1657
- --status-color-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
1658
- --status-color-callout-bg-alt: light-dark(var(--modes-color-status-callout-default-alt-light), var(--modes-color-status-callout-default-alt-dark)); /* Subtle message bg */
1659
- --status-color-callout-bg-alt-default: light-dark(var(--modes-color-status-callout-default-alt-light), var(--modes-color-status-callout-default-alt-dark)); /* Global message bg */
1660
- --status-color-error-bg-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
1661
- --status-color-error-bg-alt: light-dark(var(--modes-color-status-negative-default-alt-light), var(--modes-color-status-negative-default-alt-dark)); /* Subtle message bg */
1662
- --status-color-error-border-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
1663
- --status-color-error-icon: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark)); /* Icon on tinted bgs */
1664
- --status-color-info-bg-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
1665
- --status-color-info-bg-alt: light-dark(var(--modes-color-status-info-default-alt-light), var(--modes-color-status-info-default-alt-dark)); /* Subtle message bg */
1666
- --status-color-info-bg-alt-default: light-dark(var(--modes-color-status-info-default-alt-light), var(--modes-color-status-info-default-alt-dark)); /* Global message bg */
1667
- --status-color-info-border-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
1668
- --status-color-info-icon: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark)); /* Icon on tinted bgs */
1669
- --status-color-neutral-bg-default: light-dark(var(--modes-color-status-neutral-default-light), var(--modes-color-status-neutral-default-dark));
1670
- --status-color-neutral-bg-alt: light-dark(var(--modes-color-status-neutral-default-alt-light), var(--modes-color-status-neutral-default-alt-dark)); /* Subtle message bg */
1671
- --status-color-neutral-border-default: light-dark(var(--modes-color-status-neutral-default-light), var(--modes-color-status-neutral-default-dark));
1672
- --status-color-neutral-icon: light-dark(var(--modes-color-status-neutral-alt-light), var(--modes-color-status-neutral-alt-dark)); /* Icon on tinted bgs */
1673
- --status-color-success-bg-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
1674
- --status-color-success-bg-alt: light-dark(var(--modes-color-status-positive-default-alt-light), var(--modes-color-status-positive-default-alt-dark)); /* Subtle message bg */
1675
- --status-color-success-border-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
1676
- --status-color-success-icon: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark)); /* Icon on tinted bgs */
1677
- --status-color-warning-bg-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
1678
- --status-color-warning-bg-alt: light-dark(var(--modes-color-status-caution-default-alt-light), var(--modes-color-status-caution-default-alt-dark)); /* Subtle message bg */
1679
- --status-color-warning-bg-alt-default: light-dark(var(--modes-color-status-caution-default-alt-light), var(--modes-color-status-caution-default-alt-dark)); /* Global message bg */
1680
- --status-color-warning-border-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
1681
- --status-color-warning-icon: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark)); /* Icon on tinted bgs */
1648
+ --status-color-message-global-callout-bg-default: light-dark(var(--modes-color-status-callout-default-alt-light), var(--modes-color-status-callout-default-alt-dark)); /* Global message bg */
1649
+ --status-color-message-global-info-bg-default: light-dark(var(--modes-color-status-info-default-alt-light), var(--modes-color-status-info-default-alt-dark)); /* Global message bg */
1650
+ --status-color-message-global-info-icon: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark)); /* Icon on tinted bgs */
1651
+ --status-color-message-global-warning-bg-default: light-dark(var(--modes-color-status-caution-default-alt-light), var(--modes-color-status-caution-default-alt-dark)); /* Global message bg */
1652
+ --status-color-message-global-warning-icon: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark)); /* Icon on tinted bgs */
1653
+ --status-color-message-contextual-bg: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
1654
+ --status-color-message-contextual-icon: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* decorative icon on standard contextual messages */
1655
+ --status-color-message-contextual-ai-bg-alt: light-dark(var(--modes-color-status-neutral-default-alt-light), var(--modes-color-status-neutral-default-alt-dark));
1656
+ --status-color-message-contextual-callout-bg-alt: light-dark(var(--modes-color-status-callout-default-alt-light), var(--modes-color-status-callout-default-alt-dark)); /* Subtle message bg */
1657
+ --status-color-message-contextual-error-bg-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
1658
+ --status-color-message-contextual-error-bg-alt: light-dark(var(--modes-color-status-negative-default-alt-light), var(--modes-color-status-negative-default-alt-dark)); /* Subtle message bg */
1659
+ --status-color-message-contextual-error-border-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
1660
+ --status-color-message-contextual-error-icon: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark)); /* Icon on tinted bgs */
1661
+ --status-color-message-contextual-info-bg-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
1662
+ --status-color-message-contextual-info-bg-alt: light-dark(var(--modes-color-status-info-default-alt-light), var(--modes-color-status-info-default-alt-dark)); /* Subtle message bg */
1663
+ --status-color-message-contextual-info-border-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
1664
+ --status-color-message-contextual-info-icon: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark)); /* Icon on tinted bgs */
1665
+ --status-color-message-contextual-success-bg-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
1666
+ --status-color-message-contextual-success-bg-alt: light-dark(var(--modes-color-status-positive-default-alt-light), var(--modes-color-status-positive-default-alt-dark)); /* Subtle message bg */
1667
+ --status-color-message-contextual-success-border-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
1668
+ --status-color-message-contextual-success-icon: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark)); /* Icon on tinted bgs */
1669
+ --status-color-message-contextual-warning-bg-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
1670
+ --status-color-message-contextual-warning-bg-alt: light-dark(var(--modes-color-status-caution-default-alt-light), var(--modes-color-status-caution-default-alt-dark)); /* Subtle message bg */
1671
+ --status-color-message-contextual-warning-border-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
1672
+ --status-color-message-contextual-warning-icon: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark)); /* Icon on tinted bgs */
1673
+ --status-color-pill-error-bg-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
1674
+ --status-color-pill-error-bg-alt-default: light-dark(var(--modes-color-status-negative-default-alt-light), var(--modes-color-status-negative-default-alt-dark)); /* outline pill bg */
1675
+ --status-color-pill-error-border-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
1676
+ --status-color-pill-info-bg-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
1677
+ --status-color-pill-info-bg-alt-default: light-dark(var(--modes-color-status-info-default-alt-light), var(--modes-color-status-info-default-alt-dark)); /* outline pill bg */
1678
+ --status-color-pill-info-border-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
1679
+ --status-color-pill-neutral-bg-default: light-dark(var(--modes-color-status-neutral-default-light), var(--modes-color-status-neutral-default-dark));
1680
+ --status-color-pill-neutral-bg-alt-default: light-dark(var(--modes-color-status-neutral-default-alt-light), var(--modes-color-status-neutral-default-alt-dark)); /* outline pill bg */
1681
+ --status-color-pill-neutral-border-default: light-dark(var(--modes-color-status-neutral-default-light), var(--modes-color-status-neutral-default-dark));
1682
+ --status-color-pill-success-bg-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
1683
+ --status-color-pill-success-bg-alt-default: light-dark(var(--modes-color-status-positive-default-alt-light), var(--modes-color-status-positive-default-alt-dark)); /* outline pill bg */
1684
+ --status-color-pill-success-border-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
1685
+ --status-color-pill-warning-bg-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
1686
+ --status-color-pill-warning-bg-alt-default: light-dark(var(--modes-color-status-caution-default-alt-light), var(--modes-color-status-caution-default-alt-dark)); /* Global message bg */
1687
+ --status-color-pill-warning-border-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
1682
1688
  --status-typography-label-s: var(--global-typography-component-firm-s);
1683
1689
  --status-typography-label-m: var(--global-typography-component-firm-m);
1684
1690
  --status-typography-label-l: var(--global-typography-component-firm-l);
@@ -1688,31 +1694,35 @@
1688
1694
  --status-typography-heading-s: var(--global-typography-component-firm-s);
1689
1695
  --status-typography-heading-m: var(--global-typography-component-firm-m);
1690
1696
  --status-typography-heading-l: var(--global-typography-component-firm-l);
1691
- --status-color-label-alt-readonly: light-dark(var(--modes-color-generic-content-firm-light), var(--modes-color-generic-content-firm-dark)); /* Pill (all types, readonly, when nested in disabled parent components) */
1692
- --status-color-label-alt-hover: light-dark(var(--modes-color-status-content-with-hover-alt-light), var(--modes-color-status-content-with-hover-alt-dark));
1693
- --status-color-text: light-dark(var(--modes-color-status-content-with-hover-alt-light), var(--modes-color-status-content-with-hover-alt-dark)); /* Message text. */
1694
- --status-color-ai-bg-default: light-dark(var(--modes-color-status-ai-default-alt-light), var(--modes-color-status-ai-default-alt-dark));
1695
- --status-color-ai-border-default: light-dark(var(--modes-color-status-ai-default-alt-light), var(--modes-color-status-ai-default-alt-dark));
1696
- --status-color-callout-bg-alt-hover: light-dark(var(--modes-color-status-callout-hover-alt-light), var(--modes-color-status-callout-hover-alt-dark)); /* Subtle message bg */
1697
- --status-color-error-bg-alt-hover: light-dark(var(--modes-color-status-negative-hover-alt-light), var(--modes-color-status-negative-hover-alt-dark));
1698
- --status-color-error-bg-hover: light-dark(var(--modes-color-status-negative-hover-light), var(--modes-color-status-negative-hover-dark));
1699
- --status-color-info-bg-alt-hover: light-dark(var(--modes-color-status-info-hover-alt-light), var(--modes-color-status-info-hover-alt-dark));
1700
- --status-color-info-bg-hover: light-dark(var(--modes-color-status-info-hover-light), var(--modes-color-status-info-hover-dark));
1701
- --status-color-neutral-bg-alt-hover: light-dark(var(--modes-color-status-neutral-hover-alt-light), var(--modes-color-status-neutral-hover-alt-dark));
1702
- --status-color-neutral-bg-hover: light-dark(var(--modes-color-status-neutral-hover-light), var(--modes-color-status-neutral-hover-dark));
1697
+ --status-color-message-global-callout-bg-hover: light-dark(var(--modes-color-status-callout-hover-alt-light), var(--modes-color-status-callout-hover-alt-dark)); /* global message bg hover */
1698
+ --status-color-message-global-info-bg-hover: light-dark(var(--modes-color-status-info-hover-alt-light), var(--modes-color-status-info-hover-alt-dark));
1699
+ --status-color-message-global-warning-bg-hover: light-dark(var(--modes-color-status-caution-hover-alt-light), var(--modes-color-status-caution-hover-alt-dark));
1700
+ --status-color-message-contextual-text: light-dark(var(--modes-color-status-content-with-hover-alt-light), var(--modes-color-status-content-with-hover-alt-dark)); /* Message text. */
1701
+ --status-color-message-contextual-ai-bg-default: light-dark(var(--modes-color-status-ai-default-alt-light), var(--modes-color-status-ai-default-alt-dark));
1702
+ --status-color-message-contextual-ai-border-default: light-dark(var(--modes-color-status-ai-default-alt-light), var(--modes-color-status-ai-default-alt-dark));
1703
+ --status-color-pill-error-bg-alt-hover: light-dark(var(--modes-color-status-negative-hover-alt-light), var(--modes-color-status-negative-hover-alt-dark));
1704
+ --status-color-pill-error-bg-hover: light-dark(var(--modes-color-status-negative-hover-light), var(--modes-color-status-negative-hover-dark));
1705
+ --status-color-pill-info-bg-alt-hover: light-dark(var(--modes-color-status-info-hover-alt-light), var(--modes-color-status-info-hover-alt-dark));
1706
+ --status-color-pill-info-bg-hover: light-dark(var(--modes-color-status-info-hover-light), var(--modes-color-status-info-hover-dark));
1707
+ --status-color-pill-neutral-bg-alt-hover: light-dark(var(--modes-color-status-neutral-hover-alt-light), var(--modes-color-status-neutral-hover-alt-dark));
1708
+ --status-color-pill-neutral-bg-hover: light-dark(var(--modes-color-status-neutral-hover-light), var(--modes-color-status-neutral-hover-dark));
1709
+ --status-color-pill-success-bg-alt-hover: light-dark(var(--modes-color-status-positive-hover-alt-light), var(--modes-color-status-positive-hover-alt-dark));
1710
+ --status-color-pill-success-bg-hover: light-dark(var(--modes-color-status-positive-hover-light), var(--modes-color-status-positive-hover-dark));
1711
+ --status-color-pill-warning-bg-alt-hover: light-dark(var(--modes-color-status-caution-hover-alt-light), var(--modes-color-status-caution-hover-alt-dark));
1712
+ --status-color-pill-warning-bg-hover: light-dark(var(--modes-color-status-caution-hover-light), var(--modes-color-status-caution-hover-dark));
1713
+ --status-color-pill-readonly-label: light-dark(var(--modes-color-generic-content-firm-light), var(--modes-color-generic-content-firm-dark)); /* Pill (all types, readonly, when nested in disabled parent components) */
1703
1714
  --status-color-rating-bg-default: light-dark(var(--modes-color-status-reviews-default-light), var(--modes-color-status-reviews-default-dark));
1704
1715
  --status-color-rating-bg-default-alt: light-dark(var(--modes-color-status-reviews-default-alt-light), var(--modes-color-status-reviews-default-alt-dark));
1705
1716
  --status-color-rating-bg-hover: light-dark(var(--modes-color-status-reviews-hover-light), var(--modes-color-status-reviews-hover-dark));
1706
1717
  --status-color-rating-border-default: light-dark(var(--modes-color-status-reviews-default-light), var(--modes-color-status-reviews-default-dark));
1707
- --status-color-success-bg-alt-hover: light-dark(var(--modes-color-status-positive-hover-alt-light), var(--modes-color-status-positive-hover-alt-dark));
1708
- --status-color-success-bg-hover: light-dark(var(--modes-color-status-positive-hover-light), var(--modes-color-status-positive-hover-dark));
1709
- --status-color-warning-bg-alt-hover: light-dark(var(--modes-color-status-caution-hover-alt-light), var(--modes-color-status-caution-hover-alt-dark));
1710
- --status-color-warning-bg-hover: light-dark(var(--modes-color-status-caution-hover-light), var(--modes-color-status-caution-hover-dark));
1711
- --status-color-icon-default: light-dark(var(--modes-color-status-content-with-default-light), var(--modes-color-status-content-with-default-dark)); /* Decorative message icons */
1712
- --status-color-label-default: light-dark(var(--modes-color-status-content-with-default-light), var(--modes-color-status-content-with-default-dark));
1713
- --status-color-label-readonly: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark)); /* Pill (all types, readonly, when nested in disabled parent components) */
1714
- --status-color-label-hover: light-dark(var(--modes-color-status-content-with-hover-light), var(--modes-color-status-content-with-hover-dark));
1715
- --status-color-label-alt-default: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
1718
+ --status-color-message-global-label-default: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
1719
+ --status-color-message-global-label-hover: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
1720
+ --status-color-message-global-callout-icon: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark)); /* Icon on tinted bgs */
1721
+ --status-color-message-contextual-callout-icon: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
1722
+ --status-color-pill-label-default: light-dark(var(--modes-color-status-content-with-default-light), var(--modes-color-status-content-with-default-dark));
1723
+ --status-color-pill-label-hover: light-dark(var(--modes-color-status-content-with-hover-light), var(--modes-color-status-content-with-hover-dark));
1724
+ --status-color-pill-label-alt-default: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
1725
+ --status-color-pill-label-alt-hover: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
1716
1726
  --status-size-pill-s: calc(var(--global-size-macro-xs) - var(--global-size-micro-xs)); /* Min height */
1717
1727
  --status-size-pill-m: var(--global-size-macro-xs); /* Min height and removable button. */
1718
1728
  --status-size-pill-l: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* Min height and removable button */
@@ -1748,8 +1758,8 @@
1748
1758
  --status-space-message-global-cta-y-m: var(--global-space-macro-xs); /* Top and bottom padding on global message for countdown */
1749
1759
  --status-space-message-global-cta-yg-m: var(--global-space-macro-m); /* Gap between countdown spacing for global message */
1750
1760
  --status-space-message-global-iconwrapper-y-m: var(--global-space-micro-xxl); /* Top padding on global message icon wrapper. */
1751
- --status-color-bg-readonly: light-dark(var(--modes-color-status-inactive-default-light), var(--modes-color-status-inactive-default-dark)); /* Pill (all types, readonly, when nested in disabled parent components) */
1752
- --status-color-border-readonly: light-dark(var(--modes-color-status-inactive-default-light), var(--modes-color-status-inactive-default-dark)); /* Pill (all types, readonly, when nested in disabled parent components) */
1761
+ --status-color-pill-readonly-bg-default: light-dark(var(--modes-color-status-inactive-default-light), var(--modes-color-status-inactive-default-dark)); /* Pill (all types, readonly, when nested in disabled parent components) */
1762
+ --status-color-pill-readonly-border-default: light-dark(var(--modes-color-status-inactive-default-light), var(--modes-color-status-inactive-default-dark)); /* Pill (all types, readonly, when nested in disabled parent components) */
1753
1763
  --status-size-message-messagecontent-maxwidth: var(--container-size-responsive-xxxl); /* max width of content inside message to make sure there are roughly 12 works per line */
1754
1764
 
1755
1765
  /* tab component tokens */
package/css/frozenproduct/large/components/logo.css CHANGED
@@ -4,16 +4,11 @@
4
4
 
5
5
  :root {
6
6
  --logo-size-ai-m: 14px; /* AI star */
7
- --logo-color-copilot-with-bg-bg-s: var(--modes-color-brand-copilot-with-bg-s);
8
- --logo-color-copilot-with-bg-bg-star: var(--modes-color-brand-copilot-with-bg-star);
9
7
  --logo-color-sage-bg-default: var(--modes-color-brand-default); /* sage logo */
10
8
  --logo-color-sage-bg-alt: var(--modes-color-brand-default-alt);
11
9
  --logo-color-trust-bg-default: var(--modes-color-status-positive-default); /* filled */
12
10
  --logo-color-trust-outline: var(--modes-color-generic-content-extreme);
13
- --logo-color-copilot-no-bg-bg-s: var(--modes-color-brand-copilot-no-bg-s);
14
- --logo-color-copilot-no-bg-bg-star: var(--modes-color-brand-copilot-no-bg-star);
15
- --logo-color-copilot-no-bg-fg-default: var(--modes-color-brand-copilot-no-bg-mono);
16
- --logo-color-copilot-with-bg-bg-default: var(--modes-color-brand-copilot-with-bg-bg);
11
+ --logo-color-copilot-no-bg-fg-default: var(--modes-color-brand-copilot-no-bg-monochrome);
17
12
  --logo-color-ai-identifier-bg-star: var(--modes-color-brand-copilot-ai-identifier-default); /* star bg color */
18
13
  --logo-color-ai-identifier-bg-dot: var(--modes-color-brand-copilot-ai-identifier-with-default);
19
14
  --logo-color-ai-identifier-outline: var(--modes-color-brand-copilot-ai-identifier-default); /* star outline variant */
package/css/frozenproduct/large/components/status.css CHANGED
@@ -5,31 +5,46 @@
5
5
  :root {
6
6
  --status-radius-none: var(--global-radius-none); /* Pill (embedded element inner corners) */
7
7
  --status-color-none: var(--modes-color-none); /* transparent override used for hiding colors when needed. */
8
- --status-color-bg-default: var(--modes-color-generic-bg-nought);
9
- --status-color-callout-bg-alt: var(--modes-color-status-callout-default-alt); /* Subtle message bg */
10
- --status-color-callout-bg-alt-default: var(--modes-color-status-callout-default-alt); /* Global message bg */
11
- --status-color-error-bg-default: var(--modes-color-status-negative-default);
12
- --status-color-error-bg-alt: var(--modes-color-status-negative-default-alt); /* Subtle message bg */
13
- --status-color-error-border-default: var(--modes-color-status-negative-default);
14
- --status-color-error-icon: var(--modes-color-status-negative-default); /* Icon on tinted bgs */
15
- --status-color-info-bg-default: var(--modes-color-status-info-default);
16
- --status-color-info-bg-alt: var(--modes-color-status-info-default-alt); /* Subtle message bg */
17
- --status-color-info-bg-alt-default: var(--modes-color-status-info-default-alt); /* Global message bg */
18
- --status-color-info-border-default: var(--modes-color-status-info-default);
19
- --status-color-info-icon: var(--modes-color-status-info-default); /* Icon on tinted bgs */
20
- --status-color-neutral-bg-default: var(--modes-color-status-neutral-default);
21
- --status-color-neutral-bg-alt: var(--modes-color-status-neutral-default-alt); /* Subtle message bg */
22
- --status-color-neutral-border-default: var(--modes-color-status-neutral-default);
23
- --status-color-neutral-icon: var(--modes-color-status-neutral-alt); /* Icon on tinted bgs */
24
- --status-color-success-bg-default: var(--modes-color-status-positive-default);
25
- --status-color-success-bg-alt: var(--modes-color-status-positive-default-alt); /* Subtle message bg */
26
- --status-color-success-border-default: var(--modes-color-status-positive-default);
27
- --status-color-success-icon: var(--modes-color-status-positive-default); /* Icon on tinted bgs */
28
- --status-color-warning-bg-default: var(--modes-color-status-caution-default);
29
- --status-color-warning-bg-alt: var(--modes-color-status-caution-default-alt); /* Subtle message bg */
30
- --status-color-warning-bg-alt-default: var(--modes-color-status-caution-default-alt); /* Global message bg */
31
- --status-color-warning-border-default: var(--modes-color-status-caution-default);
32
- --status-color-warning-icon: var(--modes-color-status-caution-default); /* Icon on tinted bgs */
8
+ --status-color-message-global-callout-bg-default: var(--modes-color-status-callout-default-alt); /* Global message bg */
9
+ --status-color-message-global-info-bg-default: var(--modes-color-status-info-default-alt); /* Global message bg */
10
+ --status-color-message-global-info-icon: var(--modes-color-status-info-default); /* Icon on tinted bgs */
11
+ --status-color-message-global-warning-bg-default: var(--modes-color-status-caution-default-alt); /* Global message bg */
12
+ --status-color-message-global-warning-icon: var(--modes-color-status-caution-default); /* Icon on tinted bgs */
13
+ --status-color-message-contextual-bg: var(--modes-color-generic-bg-nought);
14
+ --status-color-message-contextual-icon: var(--modes-color-generic-bg-nought); /* decorative icon on standard contextual messages */
15
+ --status-color-message-contextual-ai-bg-alt: var(--modes-color-status-neutral-default-alt);
16
+ --status-color-message-contextual-callout-bg-alt: var(--modes-color-status-callout-default-alt); /* Subtle message bg */
17
+ --status-color-message-contextual-error-bg-default: var(--modes-color-status-negative-default);
18
+ --status-color-message-contextual-error-bg-alt: var(--modes-color-status-negative-default-alt); /* Subtle message bg */
19
+ --status-color-message-contextual-error-border-default: var(--modes-color-status-negative-default);
20
+ --status-color-message-contextual-error-icon: var(--modes-color-status-negative-default); /* Icon on tinted bgs */
21
+ --status-color-message-contextual-info-bg-default: var(--modes-color-status-info-default);
22
+ --status-color-message-contextual-info-bg-alt: var(--modes-color-status-info-default-alt); /* Subtle message bg */
23
+ --status-color-message-contextual-info-border-default: var(--modes-color-status-info-default);
24
+ --status-color-message-contextual-info-icon: var(--modes-color-status-info-default); /* Icon on tinted bgs */
25
+ --status-color-message-contextual-success-bg-default: var(--modes-color-status-positive-default);
26
+ --status-color-message-contextual-success-bg-alt: var(--modes-color-status-positive-default-alt); /* Subtle message bg */
27
+ --status-color-message-contextual-success-border-default: var(--modes-color-status-positive-default);
28
+ --status-color-message-contextual-success-icon: var(--modes-color-status-positive-default); /* Icon on tinted bgs */
29
+ --status-color-message-contextual-warning-bg-default: var(--modes-color-status-caution-default);
30
+ --status-color-message-contextual-warning-bg-alt: var(--modes-color-status-caution-default-alt); /* Subtle message bg */
31
+ --status-color-message-contextual-warning-border-default: var(--modes-color-status-caution-default);
32
+ --status-color-message-contextual-warning-icon: var(--modes-color-status-caution-default); /* Icon on tinted bgs */
33
+ --status-color-pill-error-bg-default: var(--modes-color-status-negative-default);
34
+ --status-color-pill-error-bg-alt-default: var(--modes-color-status-negative-default-alt); /* outline pill bg */
35
+ --status-color-pill-error-border-default: var(--modes-color-status-negative-default);
36
+ --status-color-pill-info-bg-default: var(--modes-color-status-info-default);
37
+ --status-color-pill-info-bg-alt-default: var(--modes-color-status-info-default-alt); /* outline pill bg */
38
+ --status-color-pill-info-border-default: var(--modes-color-status-info-default);
39
+ --status-color-pill-neutral-bg-default: var(--modes-color-status-neutral-default);
40
+ --status-color-pill-neutral-bg-alt-default: var(--modes-color-status-neutral-default-alt); /* outline pill bg */
41
+ --status-color-pill-neutral-border-default: var(--modes-color-status-neutral-default);
42
+ --status-color-pill-success-bg-default: var(--modes-color-status-positive-default);
43
+ --status-color-pill-success-bg-alt-default: var(--modes-color-status-positive-default-alt); /* outline pill bg */
44
+ --status-color-pill-success-border-default: var(--modes-color-status-positive-default);
45
+ --status-color-pill-warning-bg-default: var(--modes-color-status-caution-default);
46
+ --status-color-pill-warning-bg-alt-default: var(--modes-color-status-caution-default-alt); /* Global message bg */
47
+ --status-color-pill-warning-border-default: var(--modes-color-status-caution-default);
33
48
  --status-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
34
49
  --status-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
35
50
  --status-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
@@ -48,31 +63,35 @@
48
63
  --status-typography-responsive-heading-s: var(--global-typography-responsive-component-firm-s);
49
64
  --status-typography-responsive-heading-m: var(--global-typography-responsive-component-firm-m);
50
65
  --status-typography-responsive-heading-l: var(--global-typography-responsive-component-firm-l);
51
- --status-color-label-alt-readonly: var(--modes-color-generic-content-firm); /* Pill (all types, readonly, when nested in disabled parent components) */
52
- --status-color-label-alt-hover: var(--modes-color-status-content-with-hover-alt);
53
- --status-color-text: var(--modes-color-status-content-with-hover-alt); /* Message text. */
54
- --status-color-ai-bg-default: var(--modes-color-status-ai-default-alt);
55
- --status-color-ai-border-default: var(--modes-color-status-ai-default-alt);
56
- --status-color-callout-bg-alt-hover: var(--modes-color-status-callout-hover-alt); /* Subtle message bg */
57
- --status-color-error-bg-alt-hover: var(--modes-color-status-negative-hover-alt);
58
- --status-color-error-bg-hover: var(--modes-color-status-negative-hover);
59
- --status-color-info-bg-alt-hover: var(--modes-color-status-info-hover-alt);
60
- --status-color-info-bg-hover: var(--modes-color-status-info-hover);
61
- --status-color-neutral-bg-alt-hover: var(--modes-color-status-neutral-hover-alt);
62
- --status-color-neutral-bg-hover: var(--modes-color-status-neutral-hover);
66
+ --status-color-message-global-callout-bg-hover: var(--modes-color-status-callout-hover-alt); /* global message bg hover */
67
+ --status-color-message-global-info-bg-hover: var(--modes-color-status-info-hover-alt);
68
+ --status-color-message-global-warning-bg-hover: var(--modes-color-status-caution-hover-alt);
69
+ --status-color-message-contextual-text: var(--modes-color-status-content-with-hover-alt); /* Message text. */
70
+ --status-color-message-contextual-ai-bg-default: var(--modes-color-status-ai-default-alt);
71
+ --status-color-message-contextual-ai-border-default: var(--modes-color-status-ai-default-alt);
72
+ --status-color-pill-error-bg-alt-hover: var(--modes-color-status-negative-hover-alt);
73
+ --status-color-pill-error-bg-hover: var(--modes-color-status-negative-hover);
74
+ --status-color-pill-info-bg-alt-hover: var(--modes-color-status-info-hover-alt);
75
+ --status-color-pill-info-bg-hover: var(--modes-color-status-info-hover);
76
+ --status-color-pill-neutral-bg-alt-hover: var(--modes-color-status-neutral-hover-alt);
77
+ --status-color-pill-neutral-bg-hover: var(--modes-color-status-neutral-hover);
78
+ --status-color-pill-success-bg-alt-hover: var(--modes-color-status-positive-hover-alt);
79
+ --status-color-pill-success-bg-hover: var(--modes-color-status-positive-hover);
80
+ --status-color-pill-warning-bg-alt-hover: var(--modes-color-status-caution-hover-alt);
81
+ --status-color-pill-warning-bg-hover: var(--modes-color-status-caution-hover);
82
+ --status-color-pill-readonly-label: var(--modes-color-generic-content-firm); /* Pill (all types, readonly, when nested in disabled parent components) */
63
83
  --status-color-rating-bg-default: var(--modes-color-status-reviews-default);
64
84
  --status-color-rating-bg-default-alt: var(--modes-color-status-reviews-default-alt);
65
85
  --status-color-rating-bg-hover: var(--modes-color-status-reviews-hover);
66
86
  --status-color-rating-border-default: var(--modes-color-status-reviews-default);
67
- --status-color-success-bg-alt-hover: var(--modes-color-status-positive-hover-alt);
68
- --status-color-success-bg-hover: var(--modes-color-status-positive-hover);
69
- --status-color-warning-bg-alt-hover: var(--modes-color-status-caution-hover-alt);
70
- --status-color-warning-bg-hover: var(--modes-color-status-caution-hover);
71
- --status-color-icon-default: var(--modes-color-status-content-with-default); /* Decorative message icons */
72
- --status-color-label-default: var(--modes-color-status-content-with-default);
73
- --status-color-label-readonly: var(--modes-color-interactive-monochrome-generic-with-default); /* Pill (all types, readonly, when nested in disabled parent components) */
74
- --status-color-label-hover: var(--modes-color-status-content-with-hover);
75
- --status-color-label-alt-default: var(--modes-color-status-content-with-default-alt);
87
+ --status-color-message-global-label-default: var(--modes-color-status-content-with-default-alt);
88
+ --status-color-message-global-label-hover: var(--modes-color-status-content-with-default-alt);
89
+ --status-color-message-global-callout-icon: var(--modes-color-status-content-with-default-alt); /* Icon on tinted bgs */
90
+ --status-color-message-contextual-callout-icon: var(--modes-color-status-content-with-default-alt);
91
+ --status-color-pill-label-default: var(--modes-color-status-content-with-default);
92
+ --status-color-pill-label-hover: var(--modes-color-status-content-with-hover);
93
+ --status-color-pill-label-alt-default: var(--modes-color-status-content-with-default-alt);
94
+ --status-color-pill-label-alt-hover: var(--modes-color-status-content-with-default-alt);
76
95
  --status-size-pill-s: calc(var(--global-size-macro-xs) - var(--global-size-micro-xs)); /* Min height */
77
96
  --status-size-pill-m: var(--global-size-macro-xs); /* Min height and removable button. */
78
97
  --status-size-pill-l: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* Min height and removable button */
@@ -108,7 +127,7 @@
108
127
  --status-space-message-global-cta-y-m: var(--global-space-macro-xs); /* Top and bottom padding on global message for countdown */
109
128
  --status-space-message-global-cta-yg-m: var(--global-space-macro-m); /* Gap between countdown spacing for global message */
110
129
  --status-space-message-global-iconwrapper-y-m: var(--global-space-micro-xxl); /* Top padding on global message icon wrapper. */
111
- --status-color-bg-readonly: var(--modes-color-status-inactive-default); /* Pill (all types, readonly, when nested in disabled parent components) */
112
- --status-color-border-readonly: var(--modes-color-status-inactive-default); /* Pill (all types, readonly, when nested in disabled parent components) */
130
+ --status-color-pill-readonly-bg-default: var(--modes-color-status-inactive-default); /* Pill (all types, readonly, when nested in disabled parent components) */
131
+ --status-color-pill-readonly-border-default: var(--modes-color-status-inactive-default); /* Pill (all types, readonly, when nested in disabled parent components) */
113
132
  --status-size-message-messagecontent-maxwidth: var(--container-size-responsive-xxxl); /* max width of content inside message to make sure there are roughly 12 works per line */
114
133
  }
package/css/frozenproduct/large/dark.css CHANGED
@@ -9,12 +9,7 @@
9
9
  --modes-color-brand-with-default-alt: #000000;
10
10
  --modes-color-brand-copilot-ai-identifier-default: #FFFFFF;
11
11
  --modes-color-brand-copilot-ai-identifier-with-default: #00D639;
12
- --modes-color-brand-copilot-no-bg-s: linear-gradient(191deg, #9D60FF 28.12%, #7C78F8 33.5%, #29B7E6 46.96%, #00D6DE 52.34%, #00D6DA 55.03%, #00D6D0 56.83%, #00D6C0 57.73%, #00D6A8 59.52%, #00D68A 60.42%, #00D665 62.21%, #00D639 63.11%);
13
- --modes-color-brand-copilot-no-bg-star: radial-gradient(99.94% 104.1% at 8.01% 0.98%, #9D60FF 34%, #5A99F1 52%, #32B3E8 59%, #0DCCE0 68%, #00D6DE 72%, #00D6D7 74%, #00D6C6 77%, #00D6AA 81%, #00D682 84%, #00D650 88%, #00D639 90%);
14
- --modes-color-brand-copilot-no-bg-mono: #FFFFFF;
15
- --modes-color-brand-copilot-with-bg-s: #000000;
16
- --modes-color-brand-copilot-with-bg-star: #000000;
17
- --modes-color-brand-copilot-with-bg-bg: #FFFFFF;
12
+ --modes-color-brand-copilot-no-bg-monochrome: #FFFFFF;
18
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. */
19
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. */
20
15
  --modes-color-generic-bg-nought: #000000;
@@ -117,17 +112,18 @@
117
112
  --modes-color-interactive-progress-bg: #ffffff14;
118
113
  --modes-color-interactive-progress-bg-alt: #00000014;
119
114
  --modes-color-interactive-progress-frozen-bg: #ffffff14;
120
- --modes-color-status-ai-default: #000000;
121
- --modes-color-status-ai-default-alt: #FFFFFF; /* bg for contextual message comp */
122
- --modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
123
- --modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
124
- --modes-color-status-generic-default: #008a89;
125
115
  --modes-color-status-caution-default: #E04500;
126
116
  --modes-color-status-caution-default-alt: #251206; /* Subtle message bg */
127
117
  --modes-color-status-caution-hover: #eb6732; /* used on pill hover states */
128
118
  --modes-color-status-caution-hover-alt: #34211a; /* used on pill hover states and message bg */
129
119
  --modes-color-status-caution-text: #e75b23;
130
- --modes-color-status-caution-frozen-default: #251206; /* Global message bg */
120
+ --modes-color-status-caution-frozenglobal-default: #E04500; /* Global message bg */
121
+ --modes-color-status-caution-frozenglobal-hover: #eb6732; /* used on global message bg */
122
+ --modes-color-status-ai-default: #000000;
123
+ --modes-color-status-ai-default-alt: #FFFFFF; /* bg for contextual message comp */
124
+ --modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
125
+ --modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
126
+ --modes-color-status-generic-default: #008a89;
131
127
  --modes-color-status-content-with-default: #000000;
132
128
  --modes-color-status-content-with-default-alt: #fffffff2;
133
129
  --modes-color-status-content-with-hover: #000000;
@@ -139,19 +135,21 @@
139
135
  --modes-color-status-info-default-alt: #111722; /* Subtle message bg */
140
136
  --modes-color-status-info-hover: #5291e0; /* used on pill hover states */
141
137
  --modes-color-status-info-hover-alt: #212631; /* used on pill hover states and message bg */
142
- --modes-color-status-info-frozen-default: #111722; /* Global message bg */
138
+ --modes-color-status-info-frozenglobal-default: #007ED9; /* Global message bg */
139
+ --modes-color-status-info-frozenglobal-hover: #5291e0; /* used on global message bg */
143
140
  --modes-color-status-negative-default: #E13E53;
144
141
  --modes-color-status-negative-default-alt: #241212; /* Subtle message bg */
145
142
  --modes-color-status-negative-hover: #eb646c; /* used on pill hover states */
146
143
  --modes-color-status-negative-hover-alt: #332122; /* used on pill hover states and message bg */
147
144
  --modes-color-status-negative-text: #E13E53;
148
- --modes-color-status-neutral-alt: #7C7C7C;
149
145
  --modes-color-status-neutral-default: #7C7C7C;
150
146
  --modes-color-status-neutral-default-alt: #171717; /* Subtle message bg */
151
147
  --modes-color-status-neutral-hover: #909090; /* used on pill hover states */
152
148
  --modes-color-status-neutral-hover-alt: #262626; /* used on pill hover states and message bg */
153
149
  --modes-color-status-neutral-frozen-default: #9e9e9e;
150
+ --modes-color-status-neutral-frozen-default-alt: #171717; /* Subtle message bg */
154
151
  --modes-color-status-neutral-frozen-hover: #909090;
152
+ --modes-color-status-neutral-frozen-hover-alt: #262626; /* used on pill hover states and message bg */
155
153
  --modes-color-status-positive-default: #009023;
156
154
  --modes-color-status-positive-default-alt: #0e1a0b; /* Subtle message bg */
157
155
  --modes-color-status-positive-hover: #2e9936; /* used on pill hover states */
package/css/frozenproduct/large/light.css CHANGED
@@ -9,12 +9,7 @@
9
9
  --modes-color-brand-with-default-alt: #FFFFFF;
10
10
  --modes-color-brand-copilot-ai-identifier-default: #000000;
11
11
  --modes-color-brand-copilot-ai-identifier-with-default: #00D639;
12
- --modes-color-brand-copilot-no-bg-s: #000000;
13
- --modes-color-brand-copilot-no-bg-star: #000000;
14
- --modes-color-brand-copilot-no-bg-mono: #000000;
15
- --modes-color-brand-copilot-with-bg-s: linear-gradient(191deg, #9D60FF 28.12%, #7C78F8 33.5%, #29B7E6 46.96%, #00D6DE 52.34%, #00D6DA 55.03%, #00D6D0 56.83%, #00D6C0 57.73%, #00D6A8 59.52%, #00D68A 60.42%, #00D665 62.21%, #00D639 63.11%);
16
- --modes-color-brand-copilot-with-bg-star: radial-gradient(99.94% 104.1% at 8.01% 0.98%, #9D60FF 34%, #5A99F1 52%, #32B3E8 59%, #0DCCE0 68%, #00D6DE 72%, #00D6D7 74%, #00D6C6 77%, #00D6AA 81%, #00D682 84%, #00D650 88%, #00D639 90%);
17
- --modes-color-brand-copilot-with-bg-bg: #000000;
12
+ --modes-color-brand-copilot-no-bg-monochrome: #000000;
18
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. */
19
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. */
20
15
  --modes-color-generic-bg-nought: #FFFFFF;
@@ -127,7 +122,8 @@
127
122
  --modes-color-status-caution-hover: #b13a0d; /* used on pill hover states */
128
123
  --modes-color-status-caution-hover-alt: #f1e0d8; /* used on pill hover states and message bg */
129
124
  --modes-color-status-caution-text: #bf3e0c;
130
- --modes-color-status-caution-frozen-default: #FF8629; /* used on global message bg */
125
+ --modes-color-status-caution-frozenglobal-default: #ff8629; /* used on global message bg */
126
+ --modes-color-status-caution-frozenglobal-hover: #ff9a4e; /* used on global message bg */
131
127
  --modes-color-status-content-with-default: #FFFFFF;
132
128
  --modes-color-status-content-with-default-alt: #000000f2;
133
129
  --modes-color-status-content-with-hover: #FFFFFF; /* for pill hover X */
@@ -139,19 +135,21 @@
139
135
  --modes-color-status-info-default-alt: #eaeef6; /* Subtle message bg */
140
136
  --modes-color-status-info-hover: #10508a; /* used on pill hover states */
141
137
  --modes-color-status-info-hover-alt: #dde1e8; /* used on pill hover states and message bg */
142
- --modes-color-status-info-frozen-default: #65a9ff; /* used on global message bg */
138
+ --modes-color-status-info-frozenglobal-default: #65a9ff; /* used on global message bg */
139
+ --modes-color-status-info-frozenglobal-hover: #84b6ff; /* used on global message bg */
143
140
  --modes-color-status-negative-default: #CD384B; /* For pills and messages. Not accessible with white TEXT. */
144
141
  --modes-color-status-negative-default-alt: #fdeceb; /* Subtle message bg */
145
142
  --modes-color-status-negative-hover: #aa323f; /* used on pill hover states */
146
143
  --modes-color-status-negative-hover-alt: #efdfde; /* used on pill hover states and message bg */
147
144
  --modes-color-status-negative-text: #CD384B;
148
- --modes-color-status-neutral-alt: #656565;
149
145
  --modes-color-status-neutral-default: #656565;
150
146
  --modes-color-status-neutral-default-alt: #efefef; /* Subtle message bg */
151
147
  --modes-color-status-neutral-hover: #555; /* used on pill hover states */
152
148
  --modes-color-status-neutral-hover-alt: #e2e2e2; /* used on pill hover states and message bg */
153
149
  --modes-color-status-neutral-frozen-default: #335B70;
150
+ --modes-color-status-neutral-frozen-default-alt: #eaedf0; /* Subtle message bg */
154
151
  --modes-color-status-neutral-frozen-hover: #20313b;
152
+ --modes-color-status-neutral-frozen-hover-alt: #dde0e2; /* used on pill hover states and message bg */
155
153
  --modes-color-status-positive-default: #008A21; /* For pills and messages. Not accessible with white TEXT. */
156
154
  --modes-color-status-positive-default-alt: #eaf3e8; /* Subtle message bg */
157
155
  --modes-color-status-positive-hover: #0f731e; /* used on pill hover states */
package/css/frozenproduct/small/components/logo.css CHANGED
@@ -4,16 +4,11 @@
4
4
 
5
5
  :root {
6
6
  --logo-size-ai-m: 14px; /* AI star */
7
- --logo-color-copilot-with-bg-bg-s: var(--modes-color-brand-copilot-with-bg-s);
8
- --logo-color-copilot-with-bg-bg-star: var(--modes-color-brand-copilot-with-bg-star);
9
7
  --logo-color-sage-bg-default: var(--modes-color-brand-default); /* sage logo */
10
8
  --logo-color-sage-bg-alt: var(--modes-color-brand-default-alt);
11
9
  --logo-color-trust-bg-default: var(--modes-color-status-positive-default); /* filled */
12
10
  --logo-color-trust-outline: var(--modes-color-generic-content-extreme);
13
- --logo-color-copilot-no-bg-bg-s: var(--modes-color-brand-copilot-no-bg-s);
14
- --logo-color-copilot-no-bg-bg-star: var(--modes-color-brand-copilot-no-bg-star);
15
- --logo-color-copilot-no-bg-fg-default: var(--modes-color-brand-copilot-no-bg-mono);
16
- --logo-color-copilot-with-bg-bg-default: var(--modes-color-brand-copilot-with-bg-bg);
11
+ --logo-color-copilot-no-bg-fg-default: var(--modes-color-brand-copilot-no-bg-monochrome);
17
12
  --logo-color-ai-identifier-bg-star: var(--modes-color-brand-copilot-ai-identifier-default); /* star bg color */
18
13
  --logo-color-ai-identifier-bg-dot: var(--modes-color-brand-copilot-ai-identifier-with-default);
19
14
  --logo-color-ai-identifier-outline: var(--modes-color-brand-copilot-ai-identifier-default); /* star outline variant */