@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/scss/marketing/small/components/status.scss CHANGED
@@ -7,29 +7,44 @@
7
7
 
8
8
  $status-radius-none: $global-radius-none; // Pill (embedded element inner corners)
9
9
  $status-color-none: $modes-color-none; // transparent override used for hiding colors when needed.
10
- $status-color-bg-default: $modes-color-generic-bg-nought;
11
- $status-color-error-bg-default: $modes-color-status-negative-default;
12
- $status-color-error-bg-alt: $modes-color-status-negative-default-alt; // Subtle message bg
13
- $status-color-error-border-default: $modes-color-status-negative-default;
14
- $status-color-error-icon: $modes-color-status-negative-default; // Icon on tinted bgs
15
- $status-color-info-bg-default: $modes-color-status-info-default;
16
- $status-color-info-bg-alt: $modes-color-status-info-default-alt; // Subtle message bg
17
- $status-color-info-bg-alt-default: $modes-color-status-info-default-alt; // Global message bg
18
- $status-color-info-border-default: $modes-color-status-info-default;
19
- $status-color-info-icon: $modes-color-status-info-default; // Icon on tinted bgs
20
- $status-color-neutral-bg-default: $modes-color-status-neutral-default;
21
- $status-color-neutral-bg-alt: $modes-color-status-neutral-default-alt; // Subtle message bg
22
- $status-color-neutral-border-default: $modes-color-status-neutral-default;
23
- $status-color-neutral-icon: $modes-color-status-neutral-alt; // Icon on tinted bgs
24
- $status-color-success-bg-default: $modes-color-status-positive-default;
25
- $status-color-success-bg-alt: $modes-color-status-positive-default-alt; // Subtle message bg
26
- $status-color-success-border-default: $modes-color-status-positive-default;
27
- $status-color-success-icon: $modes-color-status-positive-default; // Icon on tinted bgs
28
- $status-color-warning-bg-default: $modes-color-status-caution-default;
29
- $status-color-warning-bg-alt: $modes-color-status-caution-default-alt; // Subtle message bg
30
- $status-color-warning-bg-alt-default: $modes-color-status-caution-default-alt; // Global message bg
31
- $status-color-warning-border-default: $modes-color-status-caution-default;
32
- $status-color-warning-icon: $modes-color-status-caution-default; // Icon on tinted bgs
10
+ $status-color-message-global-info-bg-default: $modes-color-status-info-default-alt; // Global message bg
11
+ $status-color-message-global-info-icon: $modes-color-status-info-default; // Icon on tinted bgs
12
+ $status-color-message-global-warning-bg-default: $modes-color-status-caution-default-alt; // Global message bg
13
+ $status-color-message-global-warning-icon: $modes-color-status-caution-default; // Icon on tinted bgs
14
+ $status-color-message-contextual-bg: $modes-color-generic-bg-nought;
15
+ $status-color-message-contextual-icon: $modes-color-generic-bg-nought; // decorative icon on standard contextual messages
16
+ $status-color-message-contextual-ai-bg-alt: $modes-color-status-neutral-default-alt;
17
+ $status-color-message-contextual-error-bg-default: $modes-color-status-negative-default;
18
+ $status-color-message-contextual-error-bg-alt: $modes-color-status-negative-default-alt; // Subtle message bg
19
+ $status-color-message-contextual-error-border-default: $modes-color-status-negative-default;
20
+ $status-color-message-contextual-error-icon: $modes-color-status-negative-default; // Icon on tinted bgs
21
+ $status-color-message-contextual-info-bg-default: $modes-color-status-info-default;
22
+ $status-color-message-contextual-info-bg-alt: $modes-color-status-info-default-alt; // Subtle message bg
23
+ $status-color-message-contextual-info-border-default: $modes-color-status-info-default;
24
+ $status-color-message-contextual-info-icon: $modes-color-status-info-default; // Icon on tinted bgs
25
+ $status-color-message-contextual-success-bg-default: $modes-color-status-positive-default;
26
+ $status-color-message-contextual-success-bg-alt: $modes-color-status-positive-default-alt; // Subtle message bg
27
+ $status-color-message-contextual-success-border-default: $modes-color-status-positive-default;
28
+ $status-color-message-contextual-success-icon: $modes-color-status-positive-default; // Icon on tinted bgs
29
+ $status-color-message-contextual-warning-bg-default: $modes-color-status-caution-default;
30
+ $status-color-message-contextual-warning-bg-alt: $modes-color-status-caution-default-alt; // Subtle message bg
31
+ $status-color-message-contextual-warning-border-default: $modes-color-status-caution-default;
32
+ $status-color-message-contextual-warning-icon: $modes-color-status-caution-default; // Icon on tinted bgs
33
+ $status-color-pill-error-bg-default: $modes-color-status-negative-default;
34
+ $status-color-pill-error-bg-alt-default: $modes-color-status-negative-default-alt; // outline pill bg
35
+ $status-color-pill-error-border-default: $modes-color-status-negative-default;
36
+ $status-color-pill-info-bg-default: $modes-color-status-info-default;
37
+ $status-color-pill-info-bg-alt-default: $modes-color-status-info-default-alt; // outline pill bg
38
+ $status-color-pill-info-border-default: $modes-color-status-info-default;
39
+ $status-color-pill-neutral-bg-default: $modes-color-status-neutral-default;
40
+ $status-color-pill-neutral-bg-alt-default: $modes-color-status-neutral-default-alt; // outline pill bg
41
+ $status-color-pill-neutral-border-default: $modes-color-status-neutral-default;
42
+ $status-color-pill-success-bg-default: $modes-color-status-positive-default;
43
+ $status-color-pill-success-bg-alt-default: $modes-color-status-positive-default-alt; // outline pill bg
44
+ $status-color-pill-success-border-default: $modes-color-status-positive-default;
45
+ $status-color-pill-warning-bg-default: $modes-color-status-caution-default;
46
+ $status-color-pill-warning-bg-alt-default: $modes-color-status-caution-default-alt; // Global message bg
47
+ $status-color-pill-warning-border-default: $modes-color-status-caution-default;
33
48
  $status-typography-adaptive-label-s: $global-typography-adaptive-component-firm-s;
34
49
  $status-typography-adaptive-label-m: $global-typography-adaptive-component-firm-m;
35
50
  $status-typography-adaptive-label-l: $global-typography-adaptive-component-firm-l;
@@ -48,33 +63,37 @@ $status-typography-responsive-default-l: $global-typography-responsive-component
48
63
  $status-typography-responsive-heading-s: $global-typography-responsive-component-firm-s;
49
64
  $status-typography-responsive-heading-m: $global-typography-responsive-component-firm-m;
50
65
  $status-typography-responsive-heading-l: $global-typography-responsive-component-firm-l;
51
- $status-color-label-alt-readonly: $modes-color-generic-content-firm; // Pill (all types, readonly, when nested in disabled parent components)
52
- $status-color-label-alt-hover: $modes-color-status-content-with-hover-alt;
53
- $status-color-text: $modes-color-status-content-with-hover-alt; // Message text.
54
- $status-color-ai-bg-default: $modes-color-status-ai-default-alt;
55
- $status-color-ai-border-default: $modes-color-status-ai-default-alt;
56
- $status-color-callout-bg-alt: $modes-color-status-callout-default-alt; // Subtle message bg
57
- $status-color-callout-bg-alt-default: $modes-color-status-callout-default-alt; // Global message bg
58
- $status-color-error-bg-alt-hover: $modes-color-status-negative-hover-alt;
59
- $status-color-error-bg-hover: $modes-color-status-negative-hover;
60
- $status-color-info-bg-alt-hover: $modes-color-status-info-hover-alt;
61
- $status-color-info-bg-hover: $modes-color-status-info-hover;
62
- $status-color-neutral-bg-alt-hover: $modes-color-status-neutral-hover-alt;
63
- $status-color-neutral-bg-hover: $modes-color-status-neutral-hover;
66
+ $status-color-message-global-callout-bg-default: $modes-color-status-callout-default-alt; // Global message bg
67
+ $status-color-message-global-info-bg-hover: $modes-color-status-info-hover-alt;
68
+ $status-color-message-global-warning-bg-hover: $modes-color-status-caution-hover-alt;
69
+ $status-color-message-contextual-text: $modes-color-status-content-with-hover-alt; // Message text.
70
+ $status-color-message-contextual-ai-bg-default: $modes-color-status-ai-default-alt;
71
+ $status-color-message-contextual-ai-border-default: $modes-color-status-ai-default-alt;
72
+ $status-color-message-contextual-callout-bg-alt: $modes-color-status-callout-default-alt; // Subtle message bg
73
+ $status-color-pill-error-bg-alt-hover: $modes-color-status-negative-hover-alt;
74
+ $status-color-pill-error-bg-hover: $modes-color-status-negative-hover;
75
+ $status-color-pill-info-bg-alt-hover: $modes-color-status-info-hover-alt;
76
+ $status-color-pill-info-bg-hover: $modes-color-status-info-hover;
77
+ $status-color-pill-neutral-bg-alt-hover: $modes-color-status-neutral-hover-alt;
78
+ $status-color-pill-neutral-bg-hover: $modes-color-status-neutral-hover;
79
+ $status-color-pill-success-bg-alt-hover: $modes-color-status-positive-hover-alt;
80
+ $status-color-pill-success-bg-hover: $modes-color-status-positive-hover;
81
+ $status-color-pill-warning-bg-alt-hover: $modes-color-status-caution-hover-alt;
82
+ $status-color-pill-warning-bg-hover: $modes-color-status-caution-hover;
83
+ $status-color-pill-readonly-label: $modes-color-generic-content-firm; // Pill (all types, readonly, when nested in disabled parent components)
64
84
  $status-color-rating-bg-default: $modes-color-status-reviews-default;
65
85
  $status-color-rating-bg-default-alt: $modes-color-status-reviews-default-alt;
66
86
  $status-color-rating-bg-hover: $modes-color-status-reviews-hover;
67
87
  $status-color-rating-border-default: $modes-color-status-reviews-default;
68
- $status-color-success-bg-alt-hover: $modes-color-status-positive-hover-alt;
69
- $status-color-success-bg-hover: $modes-color-status-positive-hover;
70
- $status-color-warning-bg-alt-hover: $modes-color-status-caution-hover-alt;
71
- $status-color-warning-bg-hover: $modes-color-status-caution-hover;
72
- $status-color-icon-default: $modes-color-status-content-with-default; // Decorative message icons
73
- $status-color-label-default: $modes-color-status-content-with-default;
74
- $status-color-label-readonly: $modes-color-interactive-monochrome-generic-with-default; // Pill (all types, readonly, when nested in disabled parent components)
75
- $status-color-label-hover: $modes-color-status-content-with-hover;
76
- $status-color-label-alt-default: $modes-color-status-content-with-default-alt;
77
- $status-color-callout-bg-alt-hover: $modes-color-status-callout-hover-alt; // Subtle message bg
88
+ $status-color-message-global-label-default: $modes-color-status-content-with-default-alt;
89
+ $status-color-message-global-label-hover: $modes-color-status-content-with-default-alt;
90
+ $status-color-message-global-callout-bg-hover: $modes-color-status-callout-hover-alt; // global message bg hover
91
+ $status-color-message-global-callout-icon: $modes-color-status-content-with-default-alt; // Icon on tinted bgs
92
+ $status-color-message-contextual-callout-icon: $modes-color-status-content-with-default-alt;
93
+ $status-color-pill-label-default: $modes-color-status-content-with-default;
94
+ $status-color-pill-label-hover: $modes-color-status-content-with-hover;
95
+ $status-color-pill-label-alt-default: $modes-color-status-content-with-default-alt;
96
+ $status-color-pill-label-alt-hover: $modes-color-status-content-with-default-alt;
78
97
  $status-size-pill-s: $global-size-macro-xs - $global-size-micro-xs; // Min height
79
98
  $status-size-pill-m: $global-size-macro-xs; // Min height and removable button.
80
99
  $status-size-pill-l: $global-size-macro-xs + $global-size-micro-xs; // Min height and removable button
@@ -110,6 +129,6 @@ $status-space-message-global-yg-m: $global-space-micro-s; // Gap between heading
110
129
  $status-space-message-global-cta-y-m: $global-space-macro-xs; // Top and bottom padding on global message for countdown
111
130
  $status-space-message-global-cta-yg-m: $global-space-macro-m; // Gap between countdown spacing for global message
112
131
  $status-space-message-global-iconwrapper-y-m: $global-space-micro-xxl; // Top padding on global message icon wrapper.
113
- $status-color-bg-readonly: $modes-color-status-inactive-default; // Pill (all types, readonly, when nested in disabled parent components)
114
- $status-color-border-readonly: $modes-color-status-inactive-default; // Pill (all types, readonly, when nested in disabled parent components)
132
+ $status-color-pill-readonly-bg-default: $modes-color-status-inactive-default; // Pill (all types, readonly, when nested in disabled parent components)
133
+ $status-color-pill-readonly-border-default: $modes-color-status-inactive-default; // Pill (all types, readonly, when nested in disabled parent components)
115
134
  $status-size-message-messagecontent-maxwidth: $container-size-responsive-xxxl; // max width of content inside message to make sure there are roughly 12 works per line
package/scss/marketing/small/dark.scss CHANGED
@@ -11,12 +11,7 @@ $modes-color-brand-default-alt: #FFFFFF;
11
11
  $modes-color-brand-with-default-alt: #000000;
12
12
  $modes-color-brand-copilot-ai-identifier-default: #FFFFFF;
13
13
  $modes-color-brand-copilot-ai-identifier-with-default: #00D639;
14
- $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%);
15
- $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%);
16
- $modes-color-brand-copilot-no-bg-mono: #FFFFFF;
17
- $modes-color-brand-copilot-with-bg-s: #000000;
18
- $modes-color-brand-copilot-with-bg-star: #000000;
19
- $modes-color-brand-copilot-with-bg-bg: #FFFFFF;
14
+ $modes-color-brand-copilot-no-bg-monochrome: #FFFFFF;
20
15
  $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.
21
16
  $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.
22
17
  $modes-color-generic-bg-nought: #000000;
@@ -119,17 +114,18 @@ $modes-color-interactive-primary-frozen-table-default: #18232a;
119
114
  $modes-color-interactive-progress-bg: #ffffff14;
120
115
  $modes-color-interactive-progress-bg-alt: #00000014;
121
116
  $modes-color-interactive-progress-frozen-bg: #ffffff14;
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;
127
117
  $modes-color-status-caution-default: #E04500;
128
118
  $modes-color-status-caution-default-alt: #251206; // Subtle message bg
129
119
  $modes-color-status-caution-hover: #eb6732; // used on pill hover states
130
120
  $modes-color-status-caution-hover-alt: #34211a; // used on pill hover states and message bg
131
121
  $modes-color-status-caution-text: #e75b23;
132
- $modes-color-status-caution-frozen-default: #251206; // Global message bg
122
+ $modes-color-status-caution-frozenglobal-default: #E04500; // Global message bg
123
+ $modes-color-status-caution-frozenglobal-hover: #eb6732; // used on global message bg
124
+ $modes-color-status-ai-default: #000000;
125
+ $modes-color-status-ai-default-alt: #FFFFFF; // bg for contextual message comp
126
+ $modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
127
+ $modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
128
+ $modes-color-status-generic-default: #008a89;
133
129
  $modes-color-status-content-with-default: #000000;
134
130
  $modes-color-status-content-with-default-alt: #fffffff2;
135
131
  $modes-color-status-content-with-hover: #000000;
@@ -141,19 +137,21 @@ $modes-color-status-info-default: #007ED9;
141
137
  $modes-color-status-info-default-alt: #111722; // Subtle message bg
142
138
  $modes-color-status-info-hover: #5291e0; // used on pill hover states
143
139
  $modes-color-status-info-hover-alt: #212631; // used on pill hover states and message bg
144
- $modes-color-status-info-frozen-default: #111722; // Global message bg
140
+ $modes-color-status-info-frozenglobal-default: #007ED9; // Global message bg
141
+ $modes-color-status-info-frozenglobal-hover: #5291e0; // used on global message bg
145
142
  $modes-color-status-negative-default: #E13E53;
146
143
  $modes-color-status-negative-default-alt: #241212; // Subtle message bg
147
144
  $modes-color-status-negative-hover: #eb646c; // used on pill hover states
148
145
  $modes-color-status-negative-hover-alt: #332122; // used on pill hover states and message bg
149
146
  $modes-color-status-negative-text: #E13E53;
150
- $modes-color-status-neutral-alt: #7C7C7C;
151
147
  $modes-color-status-neutral-default: #7C7C7C;
152
148
  $modes-color-status-neutral-default-alt: #171717; // Subtle message bg
153
149
  $modes-color-status-neutral-hover: #909090; // used on pill hover states
154
150
  $modes-color-status-neutral-hover-alt: #262626; // used on pill hover states and message bg
155
151
  $modes-color-status-neutral-frozen-default: #9e9e9e;
152
+ $modes-color-status-neutral-frozen-default-alt: #171717; // Subtle message bg
156
153
  $modes-color-status-neutral-frozen-hover: #909090;
154
+ $modes-color-status-neutral-frozen-hover-alt: #262626; // used on pill hover states and message bg
157
155
  $modes-color-status-positive-default: #009023;
158
156
  $modes-color-status-positive-default-alt: #0e1a0b; // Subtle message bg
159
157
  $modes-color-status-positive-hover: #2e9936; // used on pill hover states
package/scss/marketing/small/light.scss CHANGED
@@ -11,12 +11,7 @@ $modes-color-brand-default-alt: #000000;
11
11
  $modes-color-brand-with-default-alt: #FFFFFF;
12
12
  $modes-color-brand-copilot-ai-identifier-default: #000000;
13
13
  $modes-color-brand-copilot-ai-identifier-with-default: #00D639;
14
- $modes-color-brand-copilot-no-bg-s: #000000;
15
- $modes-color-brand-copilot-no-bg-star: #000000;
16
- $modes-color-brand-copilot-no-bg-mono: #000000;
17
- $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%);
18
- $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%);
19
- $modes-color-brand-copilot-with-bg-bg: #000000;
14
+ $modes-color-brand-copilot-no-bg-monochrome: #000000;
20
15
  $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.
21
16
  $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.
22
17
  $modes-color-generic-bg-nought: #FFFFFF;
@@ -129,7 +124,8 @@ $modes-color-status-caution-default-alt: #ffede5; // Subtle message bg
129
124
  $modes-color-status-caution-hover: #b13a0d; // used on pill hover states
130
125
  $modes-color-status-caution-hover-alt: #f1e0d8; // used on pill hover states and message bg
131
126
  $modes-color-status-caution-text: #bf3e0c;
132
- $modes-color-status-caution-frozen-default: #FF8629; // used on global message bg
127
+ $modes-color-status-caution-frozenglobal-default: #ff8629; // used on global message bg
128
+ $modes-color-status-caution-frozenglobal-hover: #ff9a4e; // used on global message bg
133
129
  $modes-color-status-content-with-default: #FFFFFF;
134
130
  $modes-color-status-content-with-default-alt: #000000f2;
135
131
  $modes-color-status-content-with-hover: #FFFFFF; // for pill hover X
@@ -141,19 +137,21 @@ $modes-color-status-info-default: #0060A7; // For pills and messages. Not access
141
137
  $modes-color-status-info-default-alt: #eaeef6; // Subtle message bg
142
138
  $modes-color-status-info-hover: #10508a; // used on pill hover states
143
139
  $modes-color-status-info-hover-alt: #dde1e8; // used on pill hover states and message bg
144
- $modes-color-status-info-frozen-default: #65a9ff; // used on global message bg
140
+ $modes-color-status-info-frozenglobal-default: #65a9ff; // used on global message bg
141
+ $modes-color-status-info-frozenglobal-hover: #84b6ff; // used on global message bg
145
142
  $modes-color-status-negative-default: #CD384B; // For pills and messages. Not accessible with white TEXT.
146
143
  $modes-color-status-negative-default-alt: #fdeceb; // Subtle message bg
147
144
  $modes-color-status-negative-hover: #aa323f; // used on pill hover states
148
145
  $modes-color-status-negative-hover-alt: #efdfde; // used on pill hover states and message bg
149
146
  $modes-color-status-negative-text: #CD384B;
150
- $modes-color-status-neutral-alt: #656565;
151
147
  $modes-color-status-neutral-default: #656565;
152
148
  $modes-color-status-neutral-default-alt: #efefef; // Subtle message bg
153
149
  $modes-color-status-neutral-hover: #555; // used on pill hover states
154
150
  $modes-color-status-neutral-hover-alt: #e2e2e2; // used on pill hover states and message bg
155
151
  $modes-color-status-neutral-frozen-default: #335B70;
152
+ $modes-color-status-neutral-frozen-default-alt: #eaedf0; // Subtle message bg
156
153
  $modes-color-status-neutral-frozen-hover: #20313b;
154
+ $modes-color-status-neutral-frozen-hover-alt: #dde0e2; // used on pill hover states and message bg
157
155
  $modes-color-status-positive-default: #008A21; // For pills and messages. Not accessible with white TEXT.
158
156
  $modes-color-status-positive-default-alt: #eaf3e8; // Subtle message bg
159
157
  $modes-color-status-positive-hover: #0f731e; // used on pill hover states
package/scss/product/large/components/button.scss CHANGED
@@ -23,9 +23,6 @@ $button-color-ai-border-hover: $modes-color-interactive-ai-default;
23
23
  $button-color-destructive-primary-bg-enabled: $modes-color-interactive-danger-default;
24
24
  $button-color-destructive-secondary-border-enabled: $modes-color-interactive-danger-default;
25
25
  $button-color-destructive-secondary-label-enabled: $modes-color-interactive-danger-default;
26
- $button-color-typical-secondary-border-active: $modes-color-interactive-monochrome-generic-active;
27
- $button-color-typical-tertiary-border-active: $modes-color-interactive-monochrome-generic-active;
28
- $button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-generic-active;
29
26
  $button-typography-adaptive-primary-s: $global-typography-adaptive-component-firm-s;
30
27
  $button-typography-adaptive-primary-m: $global-typography-adaptive-component-firm-m;
31
28
  $button-typography-adaptive-primary-l: $global-typography-adaptive-component-firm-l;
@@ -50,7 +47,6 @@ $button-typography-responsive-tertiary-l: $global-typography-responsive-componen
50
47
  $button-typography-responsive-subtle-s: $global-typography-responsive-component-firm-s;
51
48
  $button-typography-responsive-subtle-m: $global-typography-responsive-component-firm-m;
52
49
  $button-typography-responsive-subtle-l: $global-typography-responsive-component-firm-l;
53
- $button-color-ai-label-enabled: $modes-color-interactive-monochrome-generic-default;
54
50
  $button-color-ai-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
55
51
  $button-color-destructive-primary-bg-hover: $modes-color-interactive-danger-hover;
56
52
  $button-color-destructive-secondary-bg-hover: $modes-color-interactive-danger-hover-alt;
@@ -58,25 +54,17 @@ $button-color-destructive-secondary-border-hover: $modes-color-interactive-dange
58
54
  $button-color-destructive-secondary-label-hover: $modes-color-interactive-danger-hover;
59
55
  $button-color-typical-primary-bg-enabled: $modes-color-interactive-primary-default;
60
56
  $button-color-typical-secondary-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
61
- $button-color-typical-secondary-border-enabled: $modes-color-interactive-monochrome-generic-default;
62
- $button-color-typical-secondary-border-hover: $modes-color-interactive-monochrome-generic-default;
63
- $button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-generic-default;
57
+ $button-color-typical-secondary-border-active: $modes-color-interactive-monochrome-generic-active;
64
58
  $button-color-typical-secondary-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
65
59
  $button-color-typical-subtle-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
66
- $button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
67
60
  $button-color-typical-subtle-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
68
- $button-color-typical-tertiary-bg-enabled: $modes-color-interactive-monochrome-subtle-default;
69
61
  $button-color-typical-tertiary-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
70
- $button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-generic-default;
62
+ $button-color-typical-tertiary-border-active: $modes-color-interactive-monochrome-generic-active;
71
63
  $button-color-typical-tertiary-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
64
+ $button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-generic-active;
72
65
  $button-color-typical-toggle-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
73
- $button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-generic-default;
74
- $button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
75
66
  $button-color-typical-toggle-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
76
67
  $button-color-video-bg-blur: $modes-color-interactive-monochrome-generic-hover-alt;
77
- $button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-generic-default;
78
- $button-color-video-primary-label-hover: $modes-color-interactive-monochrome-generic-default;
79
- $button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-generic-default;
80
68
  $button-size-split: $global-size-micro-xxs; // Split button (divider width)
81
69
  $button-size-s: $global-size-macro-s; // min-height on S Buttons
82
70
  $button-size-m: $global-size-macro-m; // min-height on M Buttons
@@ -166,8 +154,8 @@ $button-space-toggle-container-y-l: $global-space-micro-s; // Vertical padding
166
154
  $button-space-video-x-s: $global-space-micro-xs; // Left padding on play icon in video button
167
155
  $button-space-video-x-m: $global-space-micro-xs; // Left padding on play icon in video button
168
156
  $button-space-video-x-l: $global-space-micro-xs; // Left padding on play icon in video button
169
- $button-color-ai-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
170
157
  $button-color-ai-label-disabled: $modes-color-interactive-inactive-content;
158
+ $button-color-ai-label-enabled: $modes-color-interactive-monochrome-generic-default;
171
159
  $button-color-destructive-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
172
160
  $button-color-destructive-primary-label-enabled: $modes-color-interactive-danger-with-default;
173
161
  $button-color-destructive-primary-label-hover: $modes-color-interactive-danger-with-default;
@@ -179,25 +167,30 @@ $button-color-typical-primary-label-active: $modes-color-interactive-primary-wit
179
167
  $button-color-typical-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
180
168
  $button-color-typical-primary-label-enabled: $modes-color-interactive-primary-with-default;
181
169
  $button-color-typical-primary-label-hover: $modes-color-interactive-primary-with-default;
182
- $button-color-typical-secondary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
183
- $button-color-typical-secondary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
170
+ $button-color-typical-secondary-border-enabled: $modes-color-interactive-monochrome-generic-default;
171
+ $button-color-typical-secondary-border-hover: $modes-color-interactive-monochrome-generic-default;
184
172
  $button-color-typical-secondary-label-disabled: $modes-color-interactive-inactive-content;
185
- $button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
186
- $button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
173
+ $button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-generic-default;
187
174
  $button-color-typical-subtle-label-disabled: $modes-color-interactive-inactive-content;
188
- $button-color-typical-tertiary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
189
- $button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
175
+ $button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
176
+ $button-color-typical-tertiary-bg-enabled: $modes-color-interactive-monochrome-subtle-default;
190
177
  $button-color-typical-tertiary-label-active-copy: $modes-color-interactive-monochrome-frozen-with-active;
191
178
  $button-color-typical-tertiary-label-disabled: $modes-color-interactive-inactive-content;
179
+ $button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-generic-default;
192
180
  $button-color-typical-toggle-label-active-disabled: $modes-color-interactive-inactive-content-alt;
181
+ $button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-generic-default;
193
182
  $button-color-typical-toggle-label-active: $modes-color-interactive-monochrome-generic-with-active;
194
183
  $button-color-typical-toggle-label-disabled: $modes-color-interactive-inactive-content;
184
+ $button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
195
185
  $button-color-video-primary-bg-enabled: $modes-color-interactive-monochrome-generic-with-default;
196
186
  $button-color-video-primary-bg-hover: $modes-color-interactive-monochrome-generic-with-default;
187
+ $button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-generic-default;
188
+ $button-color-video-primary-label-hover: $modes-color-interactive-monochrome-generic-default;
197
189
  $button-color-video-secondary-bg-hover: $modes-color-interactive-monochrome-generic-with-default;
198
190
  $button-color-video-secondary-border-enabled: $modes-color-interactive-monochrome-generic-with-default;
199
191
  $button-color-video-secondary-border-hover: $modes-color-interactive-monochrome-generic-with-default;
200
192
  $button-color-video-secondary-label-enabled: $modes-color-interactive-monochrome-generic-with-default;
193
+ $button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-generic-default;
201
194
  $button-radius-s: $global-radius-interactive-l; // Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container)
202
195
  $button-radius-m: $global-radius-interactive-xl; // Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container)
203
196
  $button-radius-l: $global-radius-interactive-xxl; // Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container)
@@ -218,10 +211,17 @@ $button-borderwidth-chip: $global-borderwidth-xs; // chip button border width
218
211
  $button-borderwidth-secondary: $global-borderwidth-s; // Secondary button.
219
212
  $button-borderwidth-togglecontainer: $global-borderwidth-xs; // Toggle container
220
213
  $button-color-ai-border-disabled: $modes-color-interactive-inactive-default;
214
+ $button-color-ai-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
221
215
  $button-color-destructive-primary-bg-disabled: $modes-color-interactive-inactive-default;
222
216
  $button-color-destructive-secondary-border-disabled: $modes-color-interactive-inactive-default;
223
217
  $button-color-typical-primary-bg-disabled: $modes-color-interactive-inactive-default;
218
+ $button-color-typical-secondary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
224
219
  $button-color-typical-secondary-border-disabled: $modes-color-interactive-inactive-default;
220
+ $button-color-typical-secondary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
221
+ $button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
222
+ $button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
223
+ $button-color-typical-tertiary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
225
224
  $button-color-typical-tertiary-bg-active-disabled: $modes-color-interactive-inactive-default;
226
225
  $button-color-typical-tertiary-border-disabled: $modes-color-interactive-inactive-default;
226
+ $button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
227
227
  $button-color-typical-toggle-bg-active-disabled: $modes-color-interactive-inactive-default;
package/scss/product/large/components/container.scss CHANGED
@@ -12,20 +12,15 @@ $container-radius-blockquote-bar: $global-radius-circle; // radius for blockquot
12
12
  $container-radius-scrollbar: $global-radius-circle; // Scrollbar
13
13
  $container-opacity-carousel-hidden: $modes-color-modifiers-input-disabled-fg; // opacity applied to next and previous carousel slides
14
14
  $container-color-standard-bg-default: $modes-color-generic-bg-nought;
15
- $container-color-standard-border-active: $modes-color-interactive-monochrome-generic-active;
16
15
  $container-color-ai-borderhorizontal: $modes-color-status-ai-default-horizontal; // top and bottom border for AI dialog component
17
16
  $container-color-ai-bordervertical: $modes-color-status-ai-default-vertical; // left and right border for dialog and insight bubbles.
18
17
  $container-color-ai-nudge-border-ai-horizontal: $modes-color-status-ai-default-horizontal; // top and bottom border for AI nudge message component
19
18
  $container-color-ai-nudge-border-ai-vertical: $modes-color-status-ai-default-vertical; // left and right border for AI nudge message component
20
19
  $container-color-interactive-detailedicon-bg: $modes-color-custom-default; //
21
20
  $container-color-interactive-bg-footer-activated: $modes-color-status-positive-default; //
22
- $container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-generic-active;
23
21
  $container-color-interactive-border-activated: $modes-color-status-positive-default;
24
22
  $container-color-interactive-bg-footer-default: $modes-color-generic-bg-nought; // tile footer bg color
25
23
  $container-color-interactive-bg-enabled: $modes-color-generic-bg-nought;
26
- $container-color-interactive-border-active: $modes-color-interactive-monochrome-generic-active;
27
- $container-color-interactive-icon-active: $modes-color-interactive-monochrome-generic-active; // Active chevron for any accordion.
28
- $container-color-interactive-text-active: $modes-color-interactive-monochrome-generic-active; // Active label for any accordion.
29
24
  $container-typography-adaptive-heading-m: $global-typography-adaptive-heading-s; // Accordion, Subscription tile, Tile select and generic tile or card headings
30
25
  $container-typography-adaptive-heading-l: $global-typography-adaptive-heading-m; // Dialog, drawer and sidebar headings
31
26
  $container-typography-adaptive-subheading-m: $global-typography-adaptive-subheading-m; // Accordion subheading, Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading
@@ -46,17 +41,18 @@ $container-typography-responsive-paragraph-m: $global-typography-responsive-comp
46
41
  $container-typography-responsive-paragraph-l: $global-typography-responsive-component-moderate-l;
47
42
  $container-color-standard-bg-alt: $modes-color-generic-bg-faint;
48
43
  $container-color-standard-bg-footer-default: $modes-color-generic-bg-faint; // tile footer bg color
44
+ $container-color-standard-border-active: $modes-color-interactive-monochrome-generic-active;
49
45
  $container-color-standard-dimmer: $modes-color-interactive-inactive-mask; // dimmed mask for dialogs
50
46
  $container-color-standard-text-alt: $modes-color-generic-content-moderate; // for subheadings etc
51
47
  $container-color-standard-text-default: $modes-color-generic-content-harsh; // for headings, paragraph text etc
52
48
  $container-color-scrollbar-bg-default: $modes-color-generic-bg-faint;
49
+ $container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-generic-active;
53
50
  $container-color-interactive-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt; // Used for accordion hover backgrounds
54
- $container-color-interactive-icon-enabled: $modes-color-interactive-monochrome-generic-default; // Enabled chevron for any accordion.
55
- $container-color-interactive-icon-alt-enabled: $modes-color-interactive-monochrome-generic-default-alt; // Enabled label for subtle accordion.
56
- $container-color-interactive-icon-hover: $modes-color-interactive-monochrome-generic-default; // Hover chevron for any accordion.
51
+ $container-color-interactive-border-active: $modes-color-interactive-monochrome-generic-active;
52
+ $container-color-interactive-icon-active: $modes-color-interactive-monochrome-generic-active; // Active chevron for any accordion.
53
+ $container-color-interactive-text-active: $modes-color-interactive-monochrome-generic-active; // Active label for any accordion.
57
54
  $container-color-interactive-text-enabled: $modes-color-generic-content-harsh; // Enabled label for standard accordion.
58
55
  $container-color-interactive-text-alt-enabled: $modes-color-generic-content-moderate; // Enabled label for subtle accordion.
59
- $container-color-interactive-text-hover: $modes-color-interactive-monochrome-generic-default; // Hover label for any accordion.
60
56
  $container-color-blockquote-border: $modes-color-interactive-primary-default;
61
57
  $container-boxshadow-card-enabled: $global-boxshadow-interactive-enabled; // Card (enabled)
62
58
  $container-boxshadow-card-hover: $global-boxshadow-interactive-hover; // Card (hover state)
@@ -76,9 +72,13 @@ $container-color-interactive-bg-disabled: $modes-color-interactive-inactive-defa
76
72
  $container-color-interactive-border-alt: $modes-color-generic-fg-delicate; // Link preview.
77
73
  $container-color-interactive-border-inactive: $modes-color-generic-fg-soft;
78
74
  $container-color-interactive-border-enabled: $modes-color-generic-fg-moderate;
75
+ $container-color-interactive-icon-enabled: $modes-color-interactive-monochrome-generic-default; // Enabled chevron for any accordion.
76
+ $container-color-interactive-icon-alt-enabled: $modes-color-interactive-monochrome-generic-default-alt; // Enabled label for subtle accordion.
77
+ $container-color-interactive-icon-hover: $modes-color-interactive-monochrome-generic-default; // Hover chevron for any accordion.
79
78
  $container-color-interactive-label-footer-active: $modes-color-interactive-monochrome-generic-with-active;
80
79
  $container-color-interactive-label-footer-activated: $modes-color-interactive-monochrome-generic-with-active;
81
80
  $container-color-interactive-text-disabled: $modes-color-interactive-inactive-content;
81
+ $container-color-interactive-text-hover: $modes-color-interactive-monochrome-generic-default; // Hover label for any accordion.
82
82
  $container-size-none: $global-size-none;
83
83
  $container-size-accordionstandard-chevron: $global-size-icon-m; // Accordion chevron container
84
84
  $container-size-quotebar-width: $global-size-micro-m; // block quote bar width
package/scss/product/large/components/form.scss CHANGED
@@ -13,10 +13,7 @@ $form-radius-radio: $global-radius-circle; // Radio button
13
13
  $form-radius-switch: $global-radius-circle; // Switch container and handle
14
14
  $form-radius-calendar-none: $global-radius-none; // Calendar (start and end duration)
15
15
  $form-radius-calendar-date: $global-radius-circle; // Calendar date (hover & selected),
16
- $form-color-calendar-bg-active: $modes-color-interactive-monochrome-generic-active;
17
- $form-color-calendar-border-duration: $modes-color-interactive-monochrome-generic-active;
18
16
  $form-color-labelset-label-required: $modes-color-interactive-danger-default;
19
- $form-color-switch-bg-active: $modes-color-interactive-monochrome-generic-active;
20
17
  $form-color-validation-border-error: $modes-color-status-negative-default;
21
18
  $form-color-validation-bar-error: $modes-color-status-negative-default; // error bar to left of inputs
22
19
  $form-color-validation-bar-warning: $modes-color-status-caution-default; // warning bar to left of inputs
@@ -35,10 +32,10 @@ $form-typography-responsive-label-l: $global-typography-responsive-component-fir
35
32
  $form-typography-responsive-default-s: $global-typography-responsive-component-moderate-s;
36
33
  $form-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
37
34
  $form-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
35
+ $form-color-calendar-bg-active: $modes-color-interactive-monochrome-generic-active;
38
36
  $form-color-calendar-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
37
+ $form-color-calendar-border-duration: $modes-color-interactive-monochrome-generic-active;
39
38
  $form-color-calendar-text-hover: $modes-color-interactive-monochrome-generic-with-hover;
40
- $form-color-dropdown-label-alt: $modes-color-interactive-monochrome-generic-default;
41
- $form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
42
39
  $form-color-dropdown-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
43
40
  $form-color-typical-bg-default: $modes-color-interactive-data-entry-default;
44
41
  $form-color-typical-bg-enabled: $modes-color-interactive-data-entry-default;
@@ -47,9 +44,8 @@ $form-color-typical-icon-active: $modes-color-interactive-data-entry-with-active
47
44
  $form-color-typical-icon-hover: $modes-color-interactive-data-entry-with-hover;
48
45
  $form-color-typical-text-hover: $modes-color-interactive-data-entry-with-hover; // text hover state when dragging a file over file input
49
46
  $form-color-typical-text-read-only: $modes-color-generic-content-harsh;
47
+ $form-color-switch-bg-active: $modes-color-interactive-monochrome-generic-active;
50
48
  $form-color-switch-bg-enabled: $modes-color-interactive-data-entry-default; // for switch
51
- $form-color-switch-border-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
52
- $form-color-switch-fg-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
53
49
  $form-space-none: $global-space-none;
54
50
  $form-space-calendar-x-m: $global-space-macro-m;
55
51
  $form-space-calendar-y-m: $global-space-macro-m;
@@ -222,7 +218,9 @@ $form-color-calendar-text-enabled: $modes-color-interactive-data-entry-content;
222
218
  $form-color-calendar-text-alt-enabled: $modes-color-interactive-data-entry-content-alt;
223
219
  $form-color-dropdown-bg-hover: $popover-color-bg-hover; // REF POPOVER
224
220
  $form-color-dropdown-label-active: $modes-color-interactive-monochrome-generic-with-active;
221
+ $form-color-dropdown-label-alt: $modes-color-interactive-monochrome-generic-default;
225
222
  $form-color-dropdown-label-disabled: $modes-color-interactive-inactive-content;
223
+ $form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
226
224
  $form-color-labelset-label-default: $modes-color-interactive-data-entry-content;
227
225
  $form-color-labelset-label-alt: $modes-color-interactive-data-entry-content-alt; // used for '(optional)' text and hint text.
228
226
  $form-color-labelset-label-disabled: $modes-color-interactive-inactive-content;
@@ -242,8 +240,10 @@ $form-color-typical-text-default: $modes-color-interactive-data-entry-content;
242
240
  $form-color-typical-text-disabled: $modes-color-interactive-inactive-content;
243
241
  $form-color-typical-text-enabled: $modes-color-interactive-data-entry-content; // Dropdown text (subtle dropdown).
244
242
  $form-color-switch-bg-disabled: $modes-color-interactive-inactive-default-alt; // for switch
243
+ $form-color-switch-border-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
245
244
  $form-color-switch-fg-active: $modes-color-interactive-monochrome-generic-with-active;
246
245
  $form-color-switch-fg-activedisabled: $modes-color-interactive-inactive-content-alt;
246
+ $form-color-switch-fg-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
247
247
  $form-color-switch-label-active: $modes-color-interactive-data-entry-content;
248
248
  $form-color-switch-label-enabled: $modes-color-interactive-data-entry-content-alt;
249
249
  $form-color-switch-icon-enabled: $modes-color-interactive-data-entry-content-alt;
package/scss/product/large/components/link.scss CHANGED
@@ -5,7 +5,6 @@
5
5
 
6
6
  // Do not edit directly, this file was auto-generated.
7
7
 
8
- $link-color-subtle-label-hover: $modes-color-interactive-monochrome-generic-active;
9
8
  $link-typography-responsive-default-s: $global-typography-responsive-component-underlined-moderate-s; // Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size.
10
9
  $link-typography-responsive-default-m: $global-typography-responsive-component-underlined-moderate-m; // Small Viewports: 16, Large Viewports: 16. Match token size to component size.
11
10
  $link-typography-responsive-default-l: $global-typography-responsive-component-underlined-moderate-l; // Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size.
@@ -19,10 +18,11 @@ $link-typography-adaptive-heading-s: $global-typography-adaptive-component-under
19
18
  $link-typography-adaptive-heading-m: $global-typography-adaptive-component-underlined-firm-m;
20
19
  $link-typography-adaptive-heading-l: $global-typography-adaptive-component-underlined-firm-l;
21
20
  $link-color-destructive-label-default: $modes-color-interactive-danger-default-alt; // .
22
- $link-color-subtle-label-default: $modes-color-interactive-monochrome-generic-default;
21
+ $link-color-subtle-label-hover: $modes-color-interactive-monochrome-generic-active;
23
22
  $link-boxshadow-skiplink: $global-boxshadow-container-near;
24
23
  $link-color-destructive-label-hover: $modes-color-interactive-danger-hover-alt2;
25
24
  $link-color-typical-label-default: $modes-color-interactive-primary-default-alt;
25
+ $link-color-subtle-label-default: $modes-color-interactive-monochrome-generic-default;
26
26
  $link-size-skiplink-m: $global-size-macro-m;
27
27
  $link-size-icon-m: $global-size-icon-m;
28
28
  $link-radius-link: $global-radius-interactive-xs; // Link (focus bg and bottom corners of focus underline)
package/scss/product/large/components/logo.scss CHANGED
@@ -6,16 +6,11 @@
6
6
  // Do not edit directly, this file was auto-generated.
7
7
 
8
8
  $logo-size-ai-m: 14px; // AI star
9
- $logo-color-copilot-no-bg-bg-s: $modes-color-brand-copilot-no-bg-s;
10
- $logo-color-copilot-no-bg-bg-star: $modes-color-brand-copilot-no-bg-star;
11
9
  $logo-color-sage-bg-default: $modes-color-brand-default; // sage logo
12
10
  $logo-color-sage-bg-alt: $modes-color-brand-default-alt;
13
11
  $logo-color-trust-bg-default: $modes-color-status-positive-default; // filled
14
12
  $logo-color-trust-outline: $modes-color-generic-content-extreme;
15
- $logo-color-copilot-no-bg-fg-default: $modes-color-brand-copilot-no-bg-mono;
16
- $logo-color-copilot-with-bg-bg-s: $modes-color-brand-copilot-with-bg-s;
17
- $logo-color-copilot-with-bg-bg-star: $modes-color-brand-copilot-with-bg-star;
18
- $logo-color-copilot-with-bg-bg-default: $modes-color-brand-copilot-with-bg-bg;
13
+ $logo-color-copilot-no-bg-fg-default: $modes-color-brand-copilot-no-bg-monochrome;
19
14
  $logo-color-ai-identifier-bg-star: $modes-color-brand-copilot-ai-identifier-default; // star bg color
20
15
  $logo-color-ai-identifier-bg-dot: $modes-color-brand-copilot-ai-identifier-with-default;
21
16
  $logo-color-ai-identifier-outline: $modes-color-brand-copilot-ai-identifier-default; // star outline variant
package/scss/product/large/components/nav.scss CHANGED
@@ -6,7 +6,6 @@
6
6
  // Do not edit directly, this file was auto-generated.
7
7
 
8
8
  $nav-color-bg-default: $modes-color-generic-bg-nought; // nav bar bg
9
- $nav-color-item-bg-active: $modes-color-interactive-monochrome-generic-active;
10
9
  $nav-color-item-bg-enabled: $modes-color-none;
11
10
  $nav-typography-adaptive-label-s: $global-typography-adaptive-component-firm-s;
12
11
  $nav-typography-adaptive-label-m: $global-typography-adaptive-component-firm-m;
@@ -20,17 +19,18 @@ $nav-typography-responsive-label-l: $global-typography-responsive-component-firm
20
19
  $nav-typography-responsive-default-s: $global-typography-responsive-component-moderate-s;
21
20
  $nav-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
22
21
  $nav-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
22
+ $nav-color-item-bg-active: $modes-color-interactive-monochrome-generic-active;
23
23
  $nav-color-item-bg-activealt: $modes-color-interactive-monochrome-generic-hover-alt;
24
24
  $nav-color-item-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
25
25
  $nav-color-item-label-activealt: $modes-color-interactive-monochrome-generic-with-hover;
26
- $nav-color-item-label-enabled: $modes-color-interactive-monochrome-generic-default;
27
26
  $nav-color-item-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
28
- $nav-color-item-label-alt: $modes-color-interactive-monochrome-generic-default-alt;
29
27
  $nav-color-menu-bg-default: $modes-color-generic-bg-faint; // menu (level 1) nav bg
30
28
  $nav-color-menu-bg-alt: $modes-color-generic-bg-delicate; // level 2 nav bg
31
29
  $nav-color-menu-bg-alt2: $modes-color-generic-bg-soft; // level 3 nav bg
32
30
  $nav-boxshadow-menu: $global-boxshadow-cleanedge-near; // Menu
33
31
  $nav-color-item-label-active: $modes-color-interactive-monochrome-generic-with-active;
32
+ $nav-color-item-label-enabled: $modes-color-interactive-monochrome-generic-default;
33
+ $nav-color-item-label-alt: $modes-color-interactive-monochrome-generic-default-alt;
34
34
  $nav-color-menu-border-default: $modes-color-generic-fg-delicate; // level 1 border
35
35
  $nav-radius-menu: $global-radius-interactive-m; // Drop list bottom corners, product popout list all corners
36
36
  $nav-radius-menuitem: $global-radius-interactive-s; // Menu (menu item state bg shape),
package/scss/product/large/components/page.scss CHANGED
@@ -6,7 +6,6 @@
6
6
  // Do not edit directly, this file was auto-generated.
7
7
 
8
8
  $page-color-bg-default: $modes-color-generic-backdrop-nought;
9
- $page-color-bg-alt: $modes-color-generic-backdrop-faint;
10
9
  $page-typography-responsive-h1: $global-typography-responsive-heading-l;
11
10
  $page-typography-responsive-h2: $global-typography-responsive-heading-m;
12
11
  $page-typography-responsive-h3: $global-typography-responsive-heading-s;
@@ -21,6 +20,7 @@ $page-typography-adaptive-h4: $global-typography-adaptive-subheading-l;
21
20
  $page-typography-adaptive-h5: $global-typography-adaptive-subheading-m;
22
21
  $page-typography-adaptive-p-typical: $global-typography-adaptive-body-s;
23
22
  $page-typography-adaptive-p-large: $global-typography-adaptive-body-s;
23
+ $page-color-bg-alt: $modes-color-generic-backdrop-faint;
24
24
  $page-color-text-alt: $modes-color-generic-content-moderate; // for subheadings etc
25
25
  $page-color-text-default: $modes-color-generic-content-harsh; // for headings, paragraph text etc
26
26
  $page-space-none: $global-space-none;
package/scss/product/large/components/popover.scss CHANGED
@@ -6,7 +6,6 @@
6
6
  // Do not edit directly, this file was auto-generated.
7
7
 
8
8
  $popover-radius-none: $global-radius-none; // Navigation menu top corners
9
- $popover-color-bg-active: $modes-color-interactive-monochrome-generic-active; // previously action minor 850
10
9
  $popover-color-bg-default: $modes-color-generic-bg-nought; // REF'D IN FORM. Popover container bg
11
10
  $popover-typography-adaptive-label-s: $global-typography-adaptive-component-firm-s;
12
11
  $popover-typography-adaptive-label-m: $global-typography-adaptive-component-firm-m;
@@ -21,11 +20,11 @@ $popover-typography-responsive-default-s: $global-typography-responsive-componen
21
20
  $popover-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
22
21
  $popover-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
23
22
  $popover-boxshadow-container: $global-boxshadow-container-near; // REF'D IN FORM. Popover container for Button popover, Button split, (and Form calendar, color picker, dropdown)
23
+ $popover-color-bg-active: $modes-color-interactive-monochrome-generic-active; // previously action minor 850
24
24
  $popover-color-bg-activealt: $modes-color-interactive-monochrome-generic-hover-alt; // REF'D IN FORM.
25
25
  $popover-color-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt; // REF'D IN FORM.
26
26
  $popover-color-label-activealt: $modes-color-interactive-monochrome-generic-with-hover;
27
27
  $popover-color-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
28
- $popover-color-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
29
28
  $popover-color-submenu-bg-default: $modes-color-generic-bg-faint; // popover small screen submenu container bg
30
29
  $popover-size-icon-m: $global-size-icon-m;
31
30
  $popover-size-item-s: $global-size-macro-s; // REF'D IN FORM. Menu item min height.
@@ -53,3 +52,4 @@ $popover-space-submenu-x-m: $global-space-macro-xs; // Right left padding on sma
53
52
  $popover-space-submenu-x-l: $global-space-macro-xs; // Right left padding on small screen submenu popover container.
54
53
  $popover-color-label-active: $modes-color-interactive-monochrome-generic-with-active;
55
54
  $popover-color-label-disabled: $modes-color-interactive-inactive-content;
55
+ $popover-color-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;