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