@sage/design-tokens 14.9.0 → 14.9.1

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 (315) hide show
  1. package/css/frozenproduct/all.css +9 -10
  2. package/css/frozenproduct/large/components/container.css +5 -2
  3. package/css/frozenproduct/large/components/nav.css +6 -4
  4. package/css/frozenproduct/large/global.css +6 -6
  5. package/css/frozenproduct/small/components/container.css +5 -2
  6. package/css/frozenproduct/small/components/nav.css +6 -4
  7. package/css/marketing/all.css +9 -6
  8. package/css/marketing/large/components/container.css +5 -2
  9. package/css/marketing/large/components/nav.css +6 -4
  10. package/css/marketing/large/global.css +6 -6
  11. package/css/marketing/small/components/container.css +5 -2
  12. package/css/marketing/small/components/nav.css +6 -4
  13. package/css/product/all.css +9 -6
  14. package/css/product/large/components/container.css +5 -2
  15. package/css/product/large/components/nav.css +6 -4
  16. package/css/product/large/global.css +6 -6
  17. package/css/product/small/components/container.css +5 -2
  18. package/css/product/small/components/nav.css +6 -4
  19. package/ios/frozenproduct/large/dark/components/container.h +5 -2
  20. package/ios/frozenproduct/large/dark/components/nav.h +2 -0
  21. package/ios/frozenproduct/large/global.h +2 -2
  22. package/ios/frozenproduct/large/light/components/container.h +5 -2
  23. package/ios/frozenproduct/large/light/components/nav.h +2 -0
  24. package/ios/frozenproduct/small/dark/components/container.h +5 -2
  25. package/ios/frozenproduct/small/dark/components/nav.h +2 -0
  26. package/ios/frozenproduct/small/light/components/container.h +5 -2
  27. package/ios/frozenproduct/small/light/components/nav.h +2 -0
  28. package/ios/marketing/large/dark/components/container.h +5 -2
  29. package/ios/marketing/large/dark/components/nav.h +2 -0
  30. package/ios/marketing/large/global.h +2 -2
  31. package/ios/marketing/large/light/components/container.h +5 -2
  32. package/ios/marketing/large/light/components/nav.h +2 -0
  33. package/ios/marketing/small/dark/components/container.h +5 -2
  34. package/ios/marketing/small/dark/components/nav.h +2 -0
  35. package/ios/marketing/small/light/components/container.h +5 -2
  36. package/ios/marketing/small/light/components/nav.h +2 -0
  37. package/ios/product/large/dark/components/container.h +5 -2
  38. package/ios/product/large/dark/components/nav.h +2 -0
  39. package/ios/product/large/global.h +2 -2
  40. package/ios/product/large/light/components/container.h +5 -2
  41. package/ios/product/large/light/components/nav.h +2 -0
  42. package/ios/product/small/dark/components/container.h +5 -2
  43. package/ios/product/small/dark/components/nav.h +2 -0
  44. package/ios/product/small/light/components/container.h +5 -2
  45. package/ios/product/small/light/components/nav.h +2 -0
  46. package/js/common/frozenproduct/large/dark/components/badge.js +1 -1
  47. package/js/common/frozenproduct/large/dark/components/container.d.ts +5 -0
  48. package/js/common/frozenproduct/large/dark/components/container.js +45 -4
  49. package/js/common/frozenproduct/large/dark/components/nav.d.ts +6 -0
  50. package/js/common/frozenproduct/large/dark/components/nav.js +42 -8
  51. package/js/common/frozenproduct/large/dark/components/profile.js +1 -1
  52. package/js/common/frozenproduct/large/global.js +8 -8
  53. package/js/common/frozenproduct/large/light/components/badge.js +1 -1
  54. package/js/common/frozenproduct/large/light/components/container.d.ts +5 -0
  55. package/js/common/frozenproduct/large/light/components/container.js +45 -4
  56. package/js/common/frozenproduct/large/light/components/nav.d.ts +6 -0
  57. package/js/common/frozenproduct/large/light/components/nav.js +42 -8
  58. package/js/common/frozenproduct/large/light/components/profile.js +1 -1
  59. package/js/common/frozenproduct/small/dark/components/container.d.ts +5 -0
  60. package/js/common/frozenproduct/small/dark/components/container.js +45 -4
  61. package/js/common/frozenproduct/small/dark/components/nav.d.ts +6 -0
  62. package/js/common/frozenproduct/small/dark/components/nav.js +42 -8
  63. package/js/common/frozenproduct/small/light/components/container.d.ts +5 -0
  64. package/js/common/frozenproduct/small/light/components/container.js +45 -4
  65. package/js/common/frozenproduct/small/light/components/nav.d.ts +6 -0
  66. package/js/common/frozenproduct/small/light/components/nav.js +42 -8
  67. package/js/common/marketing/large/dark/components/badge.js +1 -1
  68. package/js/common/marketing/large/dark/components/container.d.ts +5 -0
  69. package/js/common/marketing/large/dark/components/container.js +45 -4
  70. package/js/common/marketing/large/dark/components/nav.d.ts +6 -0
  71. package/js/common/marketing/large/dark/components/nav.js +42 -8
  72. package/js/common/marketing/large/dark/components/profile.js +1 -1
  73. package/js/common/marketing/large/global.js +8 -8
  74. package/js/common/marketing/large/light/components/badge.js +1 -1
  75. package/js/common/marketing/large/light/components/container.d.ts +5 -0
  76. package/js/common/marketing/large/light/components/container.js +45 -4
  77. package/js/common/marketing/large/light/components/nav.d.ts +6 -0
  78. package/js/common/marketing/large/light/components/nav.js +42 -8
  79. package/js/common/marketing/large/light/components/profile.js +1 -1
  80. package/js/common/marketing/small/dark/components/container.d.ts +5 -0
  81. package/js/common/marketing/small/dark/components/container.js +45 -4
  82. package/js/common/marketing/small/dark/components/nav.d.ts +6 -0
  83. package/js/common/marketing/small/dark/components/nav.js +42 -8
  84. package/js/common/marketing/small/light/components/container.d.ts +5 -0
  85. package/js/common/marketing/small/light/components/container.js +45 -4
  86. package/js/common/marketing/small/light/components/nav.d.ts +6 -0
  87. package/js/common/marketing/small/light/components/nav.js +42 -8
  88. package/js/common/product/large/dark/components/badge.js +1 -1
  89. package/js/common/product/large/dark/components/container.d.ts +5 -0
  90. package/js/common/product/large/dark/components/container.js +45 -4
  91. package/js/common/product/large/dark/components/nav.d.ts +6 -0
  92. package/js/common/product/large/dark/components/nav.js +42 -8
  93. package/js/common/product/large/dark/components/profile.js +1 -1
  94. package/js/common/product/large/global.js +8 -8
  95. package/js/common/product/large/light/components/badge.js +1 -1
  96. package/js/common/product/large/light/components/container.d.ts +5 -0
  97. package/js/common/product/large/light/components/container.js +45 -4
  98. package/js/common/product/large/light/components/nav.d.ts +6 -0
  99. package/js/common/product/large/light/components/nav.js +42 -8
  100. package/js/common/product/large/light/components/profile.js +1 -1
  101. package/js/common/product/small/dark/components/container.d.ts +5 -0
  102. package/js/common/product/small/dark/components/container.js +45 -4
  103. package/js/common/product/small/dark/components/nav.d.ts +6 -0
  104. package/js/common/product/small/dark/components/nav.js +42 -8
  105. package/js/common/product/small/light/components/container.d.ts +5 -0
  106. package/js/common/product/small/light/components/container.js +45 -4
  107. package/js/common/product/small/light/components/nav.d.ts +6 -0
  108. package/js/common/product/small/light/components/nav.js +42 -8
  109. package/js/es6/frozenproduct/large/dark/components/badge.js +1 -1
  110. package/js/es6/frozenproduct/large/dark/components/container.d.ts +3 -0
  111. package/js/es6/frozenproduct/large/dark/components/container.js +5 -2
  112. package/js/es6/frozenproduct/large/dark/components/nav.d.ts +2 -0
  113. package/js/es6/frozenproduct/large/dark/components/nav.js +6 -4
  114. package/js/es6/frozenproduct/large/dark/components/profile.js +1 -1
  115. package/js/es6/frozenproduct/large/global.js +6 -6
  116. package/js/es6/frozenproduct/large/light/components/badge.js +1 -1
  117. package/js/es6/frozenproduct/large/light/components/container.d.ts +3 -0
  118. package/js/es6/frozenproduct/large/light/components/container.js +5 -2
  119. package/js/es6/frozenproduct/large/light/components/nav.d.ts +2 -0
  120. package/js/es6/frozenproduct/large/light/components/nav.js +6 -4
  121. package/js/es6/frozenproduct/large/light/components/profile.js +1 -1
  122. package/js/es6/frozenproduct/small/dark/components/container.d.ts +3 -0
  123. package/js/es6/frozenproduct/small/dark/components/container.js +5 -2
  124. package/js/es6/frozenproduct/small/dark/components/nav.d.ts +2 -0
  125. package/js/es6/frozenproduct/small/dark/components/nav.js +6 -4
  126. package/js/es6/frozenproduct/small/light/components/container.d.ts +3 -0
  127. package/js/es6/frozenproduct/small/light/components/container.js +5 -2
  128. package/js/es6/frozenproduct/small/light/components/nav.d.ts +2 -0
  129. package/js/es6/frozenproduct/small/light/components/nav.js +6 -4
  130. package/js/es6/marketing/large/dark/components/badge.js +1 -1
  131. package/js/es6/marketing/large/dark/components/container.d.ts +3 -0
  132. package/js/es6/marketing/large/dark/components/container.js +5 -2
  133. package/js/es6/marketing/large/dark/components/nav.d.ts +2 -0
  134. package/js/es6/marketing/large/dark/components/nav.js +6 -4
  135. package/js/es6/marketing/large/dark/components/profile.js +1 -1
  136. package/js/es6/marketing/large/global.js +6 -6
  137. package/js/es6/marketing/large/light/components/badge.js +1 -1
  138. package/js/es6/marketing/large/light/components/container.d.ts +3 -0
  139. package/js/es6/marketing/large/light/components/container.js +5 -2
  140. package/js/es6/marketing/large/light/components/nav.d.ts +2 -0
  141. package/js/es6/marketing/large/light/components/nav.js +6 -4
  142. package/js/es6/marketing/large/light/components/profile.js +1 -1
  143. package/js/es6/marketing/small/dark/components/container.d.ts +3 -0
  144. package/js/es6/marketing/small/dark/components/container.js +5 -2
  145. package/js/es6/marketing/small/dark/components/nav.d.ts +2 -0
  146. package/js/es6/marketing/small/dark/components/nav.js +6 -4
  147. package/js/es6/marketing/small/light/components/container.d.ts +3 -0
  148. package/js/es6/marketing/small/light/components/container.js +5 -2
  149. package/js/es6/marketing/small/light/components/nav.d.ts +2 -0
  150. package/js/es6/marketing/small/light/components/nav.js +6 -4
  151. package/js/es6/product/large/dark/components/badge.js +1 -1
  152. package/js/es6/product/large/dark/components/container.d.ts +3 -0
  153. package/js/es6/product/large/dark/components/container.js +5 -2
  154. package/js/es6/product/large/dark/components/nav.d.ts +2 -0
  155. package/js/es6/product/large/dark/components/nav.js +6 -4
  156. package/js/es6/product/large/dark/components/profile.js +1 -1
  157. package/js/es6/product/large/global.js +6 -6
  158. package/js/es6/product/large/light/components/badge.js +1 -1
  159. package/js/es6/product/large/light/components/container.d.ts +3 -0
  160. package/js/es6/product/large/light/components/container.js +5 -2
  161. package/js/es6/product/large/light/components/nav.d.ts +2 -0
  162. package/js/es6/product/large/light/components/nav.js +6 -4
  163. package/js/es6/product/large/light/components/profile.js +1 -1
  164. package/js/es6/product/small/dark/components/container.d.ts +3 -0
  165. package/js/es6/product/small/dark/components/container.js +5 -2
  166. package/js/es6/product/small/dark/components/nav.d.ts +2 -0
  167. package/js/es6/product/small/dark/components/nav.js +6 -4
  168. package/js/es6/product/small/light/components/container.d.ts +3 -0
  169. package/js/es6/product/small/light/components/container.js +5 -2
  170. package/js/es6/product/small/light/components/nav.d.ts +2 -0
  171. package/js/es6/product/small/light/components/nav.js +6 -4
  172. package/js/umd/frozenproduct/large/dark/components/badge.js +1 -1
  173. package/js/umd/frozenproduct/large/dark/components/container.js +45 -4
  174. package/js/umd/frozenproduct/large/dark/components/nav.js +42 -8
  175. package/js/umd/frozenproduct/large/dark/components/profile.js +1 -1
  176. package/js/umd/frozenproduct/large/global.js +8 -8
  177. package/js/umd/frozenproduct/large/light/components/badge.js +1 -1
  178. package/js/umd/frozenproduct/large/light/components/container.js +45 -4
  179. package/js/umd/frozenproduct/large/light/components/nav.js +42 -8
  180. package/js/umd/frozenproduct/large/light/components/profile.js +1 -1
  181. package/js/umd/frozenproduct/small/dark/components/container.js +45 -4
  182. package/js/umd/frozenproduct/small/dark/components/nav.js +42 -8
  183. package/js/umd/frozenproduct/small/light/components/container.js +45 -4
  184. package/js/umd/frozenproduct/small/light/components/nav.js +42 -8
  185. package/js/umd/marketing/large/dark/components/badge.js +1 -1
  186. package/js/umd/marketing/large/dark/components/container.js +45 -4
  187. package/js/umd/marketing/large/dark/components/nav.js +42 -8
  188. package/js/umd/marketing/large/dark/components/profile.js +1 -1
  189. package/js/umd/marketing/large/global.js +8 -8
  190. package/js/umd/marketing/large/light/components/badge.js +1 -1
  191. package/js/umd/marketing/large/light/components/container.js +45 -4
  192. package/js/umd/marketing/large/light/components/nav.js +42 -8
  193. package/js/umd/marketing/large/light/components/profile.js +1 -1
  194. package/js/umd/marketing/small/dark/components/container.js +45 -4
  195. package/js/umd/marketing/small/dark/components/nav.js +42 -8
  196. package/js/umd/marketing/small/light/components/container.js +45 -4
  197. package/js/umd/marketing/small/light/components/nav.js +42 -8
  198. package/js/umd/product/large/dark/components/badge.js +1 -1
  199. package/js/umd/product/large/dark/components/container.js +45 -4
  200. package/js/umd/product/large/dark/components/nav.js +42 -8
  201. package/js/umd/product/large/dark/components/profile.js +1 -1
  202. package/js/umd/product/large/global.js +8 -8
  203. package/js/umd/product/large/light/components/badge.js +1 -1
  204. package/js/umd/product/large/light/components/container.js +45 -4
  205. package/js/umd/product/large/light/components/nav.js +42 -8
  206. package/js/umd/product/large/light/components/profile.js +1 -1
  207. package/js/umd/product/small/dark/components/container.js +45 -4
  208. package/js/umd/product/small/dark/components/nav.js +42 -8
  209. package/js/umd/product/small/light/components/container.js +45 -4
  210. package/js/umd/product/small/light/components/nav.js +42 -8
  211. package/json/flat/frozenproduct/large/dark/components/badge.json +1 -1
  212. package/json/flat/frozenproduct/large/dark/components/container.json +5 -2
  213. package/json/flat/frozenproduct/large/dark/components/nav.json +6 -4
  214. package/json/flat/frozenproduct/large/dark/components/profile.json +1 -1
  215. package/json/flat/frozenproduct/large/global.json +6 -6
  216. package/json/flat/frozenproduct/large/light/components/badge.json +1 -1
  217. package/json/flat/frozenproduct/large/light/components/container.json +5 -2
  218. package/json/flat/frozenproduct/large/light/components/nav.json +6 -4
  219. package/json/flat/frozenproduct/large/light/components/profile.json +1 -1
  220. package/json/flat/frozenproduct/small/dark/components/container.json +5 -2
  221. package/json/flat/frozenproduct/small/dark/components/nav.json +6 -4
  222. package/json/flat/frozenproduct/small/light/components/container.json +5 -2
  223. package/json/flat/frozenproduct/small/light/components/nav.json +6 -4
  224. package/json/flat/marketing/large/dark/components/badge.json +1 -1
  225. package/json/flat/marketing/large/dark/components/container.json +5 -2
  226. package/json/flat/marketing/large/dark/components/nav.json +6 -4
  227. package/json/flat/marketing/large/dark/components/profile.json +1 -1
  228. package/json/flat/marketing/large/global.json +6 -6
  229. package/json/flat/marketing/large/light/components/badge.json +1 -1
  230. package/json/flat/marketing/large/light/components/container.json +5 -2
  231. package/json/flat/marketing/large/light/components/nav.json +6 -4
  232. package/json/flat/marketing/large/light/components/profile.json +1 -1
  233. package/json/flat/marketing/small/dark/components/container.json +5 -2
  234. package/json/flat/marketing/small/dark/components/nav.json +6 -4
  235. package/json/flat/marketing/small/light/components/container.json +5 -2
  236. package/json/flat/marketing/small/light/components/nav.json +6 -4
  237. package/json/flat/product/large/dark/components/badge.json +1 -1
  238. package/json/flat/product/large/dark/components/container.json +5 -2
  239. package/json/flat/product/large/dark/components/nav.json +6 -4
  240. package/json/flat/product/large/dark/components/profile.json +1 -1
  241. package/json/flat/product/large/global.json +6 -6
  242. package/json/flat/product/large/light/components/badge.json +1 -1
  243. package/json/flat/product/large/light/components/container.json +5 -2
  244. package/json/flat/product/large/light/components/nav.json +6 -4
  245. package/json/flat/product/large/light/components/profile.json +1 -1
  246. package/json/flat/product/small/dark/components/container.json +5 -2
  247. package/json/flat/product/small/dark/components/nav.json +6 -4
  248. package/json/flat/product/small/light/components/container.json +5 -2
  249. package/json/flat/product/small/light/components/nav.json +6 -4
  250. package/json/nested/frozenproduct/large/dark/components/badge.json +1 -1
  251. package/json/nested/frozenproduct/large/dark/components/container.json +7 -2
  252. package/json/nested/frozenproduct/large/dark/components/nav.json +10 -4
  253. package/json/nested/frozenproduct/large/dark/components/profile.json +1 -1
  254. package/json/nested/frozenproduct/large/global.json +6 -6
  255. package/json/nested/frozenproduct/large/light/components/badge.json +1 -1
  256. package/json/nested/frozenproduct/large/light/components/container.json +7 -2
  257. package/json/nested/frozenproduct/large/light/components/nav.json +10 -4
  258. package/json/nested/frozenproduct/large/light/components/profile.json +1 -1
  259. package/json/nested/frozenproduct/small/dark/components/container.json +7 -2
  260. package/json/nested/frozenproduct/small/dark/components/nav.json +10 -4
  261. package/json/nested/frozenproduct/small/light/components/container.json +7 -2
  262. package/json/nested/frozenproduct/small/light/components/nav.json +10 -4
  263. package/json/nested/marketing/large/dark/components/badge.json +1 -1
  264. package/json/nested/marketing/large/dark/components/container.json +7 -2
  265. package/json/nested/marketing/large/dark/components/nav.json +10 -4
  266. package/json/nested/marketing/large/dark/components/profile.json +1 -1
  267. package/json/nested/marketing/large/global.json +6 -6
  268. package/json/nested/marketing/large/light/components/badge.json +1 -1
  269. package/json/nested/marketing/large/light/components/container.json +7 -2
  270. package/json/nested/marketing/large/light/components/nav.json +10 -4
  271. package/json/nested/marketing/large/light/components/profile.json +1 -1
  272. package/json/nested/marketing/small/dark/components/container.json +7 -2
  273. package/json/nested/marketing/small/dark/components/nav.json +10 -4
  274. package/json/nested/marketing/small/light/components/container.json +7 -2
  275. package/json/nested/marketing/small/light/components/nav.json +10 -4
  276. package/json/nested/product/large/dark/components/badge.json +1 -1
  277. package/json/nested/product/large/dark/components/container.json +7 -2
  278. package/json/nested/product/large/dark/components/nav.json +10 -4
  279. package/json/nested/product/large/dark/components/profile.json +1 -1
  280. package/json/nested/product/large/global.json +6 -6
  281. package/json/nested/product/large/light/components/badge.json +1 -1
  282. package/json/nested/product/large/light/components/container.json +7 -2
  283. package/json/nested/product/large/light/components/nav.json +10 -4
  284. package/json/nested/product/large/light/components/profile.json +1 -1
  285. package/json/nested/product/small/dark/components/container.json +7 -2
  286. package/json/nested/product/small/dark/components/nav.json +10 -4
  287. package/json/nested/product/small/light/components/container.json +7 -2
  288. package/json/nested/product/small/light/components/nav.json +10 -4
  289. package/package.json +1 -1
  290. package/sage-design-tokens-14.9.1.tgz +0 -0
  291. package/scss/frozenproduct/large/components/container.scss +15 -12
  292. package/scss/frozenproduct/large/components/nav.scss +6 -4
  293. package/scss/frozenproduct/large/global.scss +2 -2
  294. package/scss/frozenproduct/small/components/button.scss +13 -13
  295. package/scss/frozenproduct/small/components/container.scss +15 -12
  296. package/scss/frozenproduct/small/components/form.scss +7 -7
  297. package/scss/frozenproduct/small/components/link.scss +2 -2
  298. package/scss/frozenproduct/small/components/nav.scss +11 -9
  299. package/scss/frozenproduct/small/components/page.scss +1 -1
  300. package/scss/frozenproduct/small/components/popover.scss +2 -2
  301. package/scss/frozenproduct/small/components/progress.scss +6 -6
  302. package/scss/frozenproduct/small/components/status.scss +3 -3
  303. package/scss/frozenproduct/small/components/tab.scss +7 -7
  304. package/scss/frozenproduct/small/components/table.scss +10 -10
  305. package/scss/marketing/large/components/container.scss +5 -2
  306. package/scss/marketing/large/components/nav.scss +6 -4
  307. package/scss/marketing/large/global.scss +2 -2
  308. package/scss/marketing/small/components/container.scss +5 -2
  309. package/scss/marketing/small/components/nav.scss +6 -4
  310. package/scss/product/large/components/container.scss +5 -2
  311. package/scss/product/large/components/nav.scss +6 -4
  312. package/scss/product/large/global.scss +2 -2
  313. package/scss/product/small/components/container.scss +5 -2
  314. package/scss/product/small/components/nav.scss +6 -4
  315. package/sage-design-tokens-14.9.0.tgz +0 -0
package/css/frozenproduct/all.css CHANGED
@@ -1118,10 +1118,13 @@
1118
1118
  --container-size-dialog-max-width-xxs: 300;
1119
1119
  --container-size-dialog-max-width-xs: 380;
1120
1120
  --container-size-dialog-max-width-s: 540;
1121
- --container-size-dialog-max-width-m: 750;
1122
- --container-size-dialog-max-width-l: 850;
1121
+ --container-size-dialog-max-width-m: 850;
1122
+ --container-size-dialog-max-width-l: 1080;
1123
1123
  --container-size-dialog-max-width-xl: 960;
1124
1124
  --container-size-dialog-max-width-xxl: 1080;
1125
+ --container-size-dialog-min-width-s: 288;
1126
+ --container-size-dialog-min-width-m: 288;
1127
+ --container-size-dialog-min-width-l: 288;
1125
1128
  --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
1126
1129
  --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
1127
1130
  --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
@@ -1792,6 +1795,8 @@
1792
1795
  --logo-space-ai-xg-m: var(--global-space-micro-l); /* Space between star icon and text */
1793
1796
 
1794
1797
  /* nav component tokens */
1798
+ --nav-size-leftnav-parent-container-fixed-width: 140; /* fixed width of parent container */
1799
+ --nav-size-leftnav-child-container-fixed-width: 250; /* fixed width of parent container */
1795
1800
  --nav-space-leftnav-grandchilditem-x-indent: 33; /* indent on grandchild items */
1796
1801
  --nav-color-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* nav bar bg */
1797
1802
  --nav-color-item-bg-enabled: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
@@ -1807,10 +1812,10 @@
1807
1812
  --nav-color-topnav-item-bg-active: light-dark(var(--modes-color-interactive-nav-active-light), var(--modes-color-interactive-nav-active-dark));
1808
1813
  --nav-color-topnav-item-bg-enabled: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
1809
1814
  --nav-color-topnav-item-bg-hover: light-dark(var(--modes-color-interactive-nav-hover-light), var(--modes-color-interactive-nav-hover-dark));
1810
- --nav-typography-label-s: var(--global-typography-component-firm-s);
1815
+ --nav-typography-label-s: var(--global-typography-component-firm-xs);
1811
1816
  --nav-typography-label-m: var(--global-typography-component-firm-m);
1812
1817
  --nav-typography-label-l: var(--global-typography-component-firm-l);
1813
- --nav-typography-default-s: var(--global-typography-component-moderate-s);
1818
+ --nav-typography-default-s: var(--global-typography-component-moderate-xs);
1814
1819
  --nav-typography-default-m: var(--global-typography-component-moderate-m);
1815
1820
  --nav-typography-default-l: var(--global-typography-component-moderate-l);
1816
1821
  --nav-color-item-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
@@ -2582,17 +2587,11 @@
2582
2587
  --global-typography-heading-l: 700 30px/1.25 Sage UI;
2583
2588
  --global-typography-subheading-l: 500 18px/1.25 Sage UI;
2584
2589
  --global-typography-section-heading-m: 700 21px/1.25 Sage UI;
2585
- --global-typography-component-firm-xs: 500 12px/1.5 Sage UI;
2586
- --global-typography-component-moderate-xs: 400 12px/1.5 Sage UI;
2587
- --global-typography-component-placeholdertext-xs: 500 11px/1.5 Sage UI;
2588
2590
  --global-typography-component-placeholdertext-m: 500 18px/1.5 Sage UI;
2589
2591
  --global-typography-component-placeholdertext-ml: 500 24px/1.5 Sage UI;
2590
2592
  --global-typography-component-placeholdertext-l: 500 30px/1.5 Sage UI;
2591
2593
  --global-typography-component-placeholdertext-xl: 500 40px/1.5 Sage UI;
2592
2594
  --global-typography-component-placeholdertext-xxl: 500 52px/1.5 Sage UI;
2593
- --global-typography-component-notification-m: 500 12px/1 Sage UI; /* used for badge text - notifications on buttons and in global nav */
2594
- --global-font-size-adaptive-step-minus2: 11px;
2595
- --global-font-size-adaptive-step-minus1: 12px;
2596
2595
  --global-font-size-adaptive-step2: 18px;
2597
2596
  --global-font-size-adaptive-step3: 21px;
2598
2597
  --global-font-size-adaptive-step4: 24px;
package/css/frozenproduct/large/components/container.css CHANGED
@@ -7,10 +7,13 @@
7
7
  --container-size-dialog-max-width-xxs: 300;
8
8
  --container-size-dialog-max-width-xs: 380;
9
9
  --container-size-dialog-max-width-s: 540;
10
- --container-size-dialog-max-width-m: 750;
11
- --container-size-dialog-max-width-l: 850;
10
+ --container-size-dialog-max-width-m: 850;
11
+ --container-size-dialog-max-width-l: 1080;
12
12
  --container-size-dialog-max-width-xl: 960;
13
13
  --container-size-dialog-max-width-xxl: 1080;
14
+ --container-size-dialog-min-width-s: 288;
15
+ --container-size-dialog-min-width-m: 288;
16
+ --container-size-dialog-min-width-l: 288;
14
17
  --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
15
18
  --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
16
19
  --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
package/css/frozenproduct/large/components/nav.css CHANGED
@@ -3,6 +3,8 @@
3
3
  */
4
4
 
5
5
  :root {
6
+ --nav-size-leftnav-parent-container-fixed-width: 140; /* fixed width of parent container */
7
+ --nav-size-leftnav-child-container-fixed-width: 250; /* fixed width of parent container */
6
8
  --nav-space-leftnav-grandchilditem-x-indent: 33; /* indent on grandchild items */
7
9
  --nav-color-bg-default: var(--modes-color-generic-bg-nought); /* nav bar bg */
8
10
  --nav-color-item-bg-enabled: var(--modes-color-none);
@@ -18,16 +20,16 @@
18
20
  --nav-color-topnav-item-bg-active: var(--modes-color-interactive-nav-active);
19
21
  --nav-color-topnav-item-bg-enabled: var(--modes-color-none);
20
22
  --nav-color-topnav-item-bg-hover: var(--modes-color-interactive-nav-hover);
21
- --nav-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
23
+ --nav-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-xs);
22
24
  --nav-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
23
25
  --nav-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
24
- --nav-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-s);
26
+ --nav-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-xs);
25
27
  --nav-typography-adaptive-default-m: var(--global-typography-adaptive-component-moderate-m);
26
28
  --nav-typography-adaptive-default-l: var(--global-typography-adaptive-component-moderate-l);
27
- --nav-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
29
+ --nav-typography-responsive-label-s: var(--global-typography-responsive-component-firm-xs);
28
30
  --nav-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
29
31
  --nav-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
30
- --nav-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-s);
32
+ --nav-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-xs);
31
33
  --nav-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
32
34
  --nav-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
33
35
  --nav-color-item-bg-active: var(--modes-color-interactive-monochrome-active);
package/css/frozenproduct/large/global.css CHANGED
@@ -148,11 +148,11 @@
148
148
  --global-typography-adaptive-body-medium-s: 500 14px/1.5 Sage UI;
149
149
  --global-typography-adaptive-body-medium-m: 500 14px/1.5 Sage UI;
150
150
  --global-typography-adaptive-body-medium-l: 500 16px/1.5 Sage UI;
151
- --global-typography-adaptive-component-firm-xs: 500 12px/1.5 Sage UI;
151
+ --global-typography-adaptive-component-firm-xs: 500 13px/1.5 Sage UI;
152
152
  --global-typography-adaptive-component-firm-s: 500 14px/1.5 Sage UI;
153
153
  --global-typography-adaptive-component-firm-m: 500 14px/1.5 Sage UI;
154
154
  --global-typography-adaptive-component-firm-l: 500 16px/1.5 Sage UI;
155
- --global-typography-adaptive-component-moderate-xs: 400 12px/1.5 Sage UI;
155
+ --global-typography-adaptive-component-moderate-xs: 400 13px/1.5 Sage UI;
156
156
  --global-typography-adaptive-component-moderate-s: 400 14px/1.5 Sage UI;
157
157
  --global-typography-adaptive-component-moderate-m: 400 14px/1.5 Sage UI;
158
158
  --global-typography-adaptive-component-moderate-l: 400 16px/1.5 Sage UI;
@@ -165,16 +165,16 @@
165
165
  --global-typography-adaptive-component-underlined-firm-s: 500 14px/1.5 Sage UI;
166
166
  --global-typography-adaptive-component-underlined-firm-m: 500 14px/1.5 Sage UI;
167
167
  --global-typography-adaptive-component-underlined-firm-l: 500 16px/1.5 Sage UI;
168
- --global-typography-adaptive-component-placeholdertext-xs: 500 11px/1.5 Sage UI;
168
+ --global-typography-adaptive-component-placeholdertext-xs: 500 12px/1.5 Sage UI;
169
169
  --global-typography-adaptive-component-placeholdertext-s: 500 14px/1.5 Sage UI;
170
170
  --global-typography-adaptive-component-placeholdertext-m: 500 18px/1.5 Sage UI;
171
171
  --global-typography-adaptive-component-placeholdertext-ml: 500 24px/1.5 Sage UI;
172
172
  --global-typography-adaptive-component-placeholdertext-l: 500 30px/1.5 Sage UI;
173
173
  --global-typography-adaptive-component-placeholdertext-xl: 500 40px/1.5 Sage UI;
174
174
  --global-typography-adaptive-component-placeholdertext-xxl: 500 52px/1.5 Sage UI;
175
- --global-typography-adaptive-component-notification-m: 500 12px/1 Sage UI; /* used for badge text - notifications on buttons and in global nav */
176
- --global-font-size-adaptive-step-minus2: 11px;
177
- --global-font-size-adaptive-step-minus1: 12px;
175
+ --global-typography-adaptive-component-notification-m: 500 13px/1 Sage UI; /* used for badge text - notifications on buttons and in global nav */
176
+ --global-font-size-adaptive-step-minus2: 12px;
177
+ --global-font-size-adaptive-step-minus1: 13px;
178
178
  --global-font-size-adaptive-step0: 14px;
179
179
  --global-font-size-adaptive-step1: 16px;
180
180
  --global-font-size-adaptive-step2: 18px;
package/css/frozenproduct/small/components/container.css CHANGED
@@ -7,10 +7,13 @@
7
7
  --container-size-dialog-max-width-xxs: 300;
8
8
  --container-size-dialog-max-width-xs: 380;
9
9
  --container-size-dialog-max-width-s: 540;
10
- --container-size-dialog-max-width-m: 750;
11
- --container-size-dialog-max-width-l: 850;
10
+ --container-size-dialog-max-width-m: 850;
11
+ --container-size-dialog-max-width-l: 1080;
12
12
  --container-size-dialog-max-width-xl: 960;
13
13
  --container-size-dialog-max-width-xxl: 1080;
14
+ --container-size-dialog-min-width-s: 288;
15
+ --container-size-dialog-min-width-m: 288;
16
+ --container-size-dialog-min-width-l: 288;
14
17
  --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
15
18
  --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
16
19
  --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
package/css/frozenproduct/small/components/nav.css CHANGED
@@ -3,6 +3,8 @@
3
3
  */
4
4
 
5
5
  :root {
6
+ --nav-size-leftnav-parent-container-fixed-width: 140; /* fixed width of parent container */
7
+ --nav-size-leftnav-child-container-fixed-width: 250; /* fixed width of parent container */
6
8
  --nav-space-leftnav-grandchilditem-x-indent: 33; /* indent on grandchild items */
7
9
  --nav-color-bg-default: var(--modes-color-generic-bg-nought); /* nav bar bg */
8
10
  --nav-color-item-bg-enabled: var(--modes-color-none);
@@ -18,16 +20,16 @@
18
20
  --nav-color-topnav-item-bg-active: var(--modes-color-interactive-nav-active);
19
21
  --nav-color-topnav-item-bg-enabled: var(--modes-color-none);
20
22
  --nav-color-topnav-item-bg-hover: var(--modes-color-interactive-nav-hover);
21
- --nav-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
23
+ --nav-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-xs);
22
24
  --nav-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
23
25
  --nav-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
24
- --nav-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-s);
26
+ --nav-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-xs);
25
27
  --nav-typography-adaptive-default-m: var(--global-typography-adaptive-component-moderate-m);
26
28
  --nav-typography-adaptive-default-l: var(--global-typography-adaptive-component-moderate-l);
27
- --nav-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
29
+ --nav-typography-responsive-label-s: var(--global-typography-responsive-component-firm-xs);
28
30
  --nav-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
29
31
  --nav-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
30
- --nav-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-s);
32
+ --nav-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-xs);
31
33
  --nav-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
32
34
  --nav-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
33
35
  --nav-color-item-bg-active: var(--modes-color-interactive-monochrome-active);
package/css/marketing/all.css CHANGED
@@ -1118,10 +1118,13 @@
1118
1118
  --container-size-dialog-max-width-xxs: 300;
1119
1119
  --container-size-dialog-max-width-xs: 380;
1120
1120
  --container-size-dialog-max-width-s: 540;
1121
- --container-size-dialog-max-width-m: 750;
1122
- --container-size-dialog-max-width-l: 850;
1121
+ --container-size-dialog-max-width-m: 850;
1122
+ --container-size-dialog-max-width-l: 1080;
1123
1123
  --container-size-dialog-max-width-xl: 960;
1124
1124
  --container-size-dialog-max-width-xxl: 1080;
1125
+ --container-size-dialog-min-width-s: 288;
1126
+ --container-size-dialog-min-width-m: 288;
1127
+ --container-size-dialog-min-width-l: 288;
1125
1128
  --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
1126
1129
  --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
1127
1130
  --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
@@ -1792,6 +1795,8 @@
1792
1795
  --logo-space-ai-xg-m: var(--global-space-micro-l); /* Space between star icon and text */
1793
1796
 
1794
1797
  /* nav component tokens */
1798
+ --nav-size-leftnav-parent-container-fixed-width: 140; /* fixed width of parent container */
1799
+ --nav-size-leftnav-child-container-fixed-width: 250; /* fixed width of parent container */
1795
1800
  --nav-space-leftnav-grandchilditem-x-indent: 33; /* indent on grandchild items */
1796
1801
  --nav-color-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* nav bar bg */
1797
1802
  --nav-color-item-bg-enabled: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
@@ -1807,10 +1812,10 @@
1807
1812
  --nav-color-topnav-item-bg-active: light-dark(var(--modes-color-interactive-nav-active-light), var(--modes-color-interactive-nav-active-dark));
1808
1813
  --nav-color-topnav-item-bg-enabled: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
1809
1814
  --nav-color-topnav-item-bg-hover: light-dark(var(--modes-color-interactive-nav-hover-light), var(--modes-color-interactive-nav-hover-dark));
1810
- --nav-typography-label-s: var(--global-typography-component-firm-s);
1815
+ --nav-typography-label-s: var(--global-typography-component-firm-xs);
1811
1816
  --nav-typography-label-m: var(--global-typography-component-firm-m);
1812
1817
  --nav-typography-label-l: var(--global-typography-component-firm-l);
1813
- --nav-typography-default-s: var(--global-typography-component-moderate-s);
1818
+ --nav-typography-default-s: var(--global-typography-component-moderate-xs);
1814
1819
  --nav-typography-default-m: var(--global-typography-component-moderate-m);
1815
1820
  --nav-typography-default-l: var(--global-typography-component-moderate-l);
1816
1821
  --nav-color-item-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
@@ -2577,8 +2582,6 @@
2577
2582
  --global-space-macro-l: 32px;
2578
2583
  --global-space-macro-xl: 40px;
2579
2584
  --global-space-macro-xxl: 48px;
2580
- --global-font-size-adaptive-step-minus2: 11px;
2581
- --global-font-size-adaptive-step-minus1: 12px;
2582
2585
  --global-font-size-adaptive-step2: 18px;
2583
2586
  --global-font-size-adaptive-step3: 21px;
2584
2587
  --global-font-size-adaptive-step4: 24px;
package/css/marketing/large/components/container.css CHANGED
@@ -7,10 +7,13 @@
7
7
  --container-size-dialog-max-width-xxs: 300;
8
8
  --container-size-dialog-max-width-xs: 380;
9
9
  --container-size-dialog-max-width-s: 540;
10
- --container-size-dialog-max-width-m: 750;
11
- --container-size-dialog-max-width-l: 850;
10
+ --container-size-dialog-max-width-m: 850;
11
+ --container-size-dialog-max-width-l: 1080;
12
12
  --container-size-dialog-max-width-xl: 960;
13
13
  --container-size-dialog-max-width-xxl: 1080;
14
+ --container-size-dialog-min-width-s: 288;
15
+ --container-size-dialog-min-width-m: 288;
16
+ --container-size-dialog-min-width-l: 288;
14
17
  --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
15
18
  --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
16
19
  --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
package/css/marketing/large/components/nav.css CHANGED
@@ -3,6 +3,8 @@
3
3
  */
4
4
 
5
5
  :root {
6
+ --nav-size-leftnav-parent-container-fixed-width: 140; /* fixed width of parent container */
7
+ --nav-size-leftnav-child-container-fixed-width: 250; /* fixed width of parent container */
6
8
  --nav-space-leftnav-grandchilditem-x-indent: 33; /* indent on grandchild items */
7
9
  --nav-color-bg-default: var(--modes-color-generic-bg-nought); /* nav bar bg */
8
10
  --nav-color-item-bg-enabled: var(--modes-color-none);
@@ -18,16 +20,16 @@
18
20
  --nav-color-topnav-item-bg-active: var(--modes-color-interactive-nav-active);
19
21
  --nav-color-topnav-item-bg-enabled: var(--modes-color-none);
20
22
  --nav-color-topnav-item-bg-hover: var(--modes-color-interactive-nav-hover);
21
- --nav-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
23
+ --nav-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-xs);
22
24
  --nav-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
23
25
  --nav-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
24
- --nav-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-s);
26
+ --nav-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-xs);
25
27
  --nav-typography-adaptive-default-m: var(--global-typography-adaptive-component-moderate-m);
26
28
  --nav-typography-adaptive-default-l: var(--global-typography-adaptive-component-moderate-l);
27
- --nav-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
29
+ --nav-typography-responsive-label-s: var(--global-typography-responsive-component-firm-xs);
28
30
  --nav-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
29
31
  --nav-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
30
- --nav-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-s);
32
+ --nav-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-xs);
31
33
  --nav-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
32
34
  --nav-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
33
35
  --nav-color-item-bg-active: var(--modes-color-interactive-monochrome-active);
package/css/marketing/large/global.css CHANGED
@@ -148,11 +148,11 @@
148
148
  --global-typography-adaptive-body-medium-s: 500 14px/1.5 Sage UI;
149
149
  --global-typography-adaptive-body-medium-m: 500 14px/1.5 Sage UI;
150
150
  --global-typography-adaptive-body-medium-l: 500 16px/1.5 Sage UI;
151
- --global-typography-adaptive-component-firm-xs: 500 12px/1.5 Sage UI;
151
+ --global-typography-adaptive-component-firm-xs: 500 13px/1.5 Sage UI;
152
152
  --global-typography-adaptive-component-firm-s: 500 14px/1.5 Sage UI;
153
153
  --global-typography-adaptive-component-firm-m: 500 14px/1.5 Sage UI;
154
154
  --global-typography-adaptive-component-firm-l: 500 16px/1.5 Sage UI;
155
- --global-typography-adaptive-component-moderate-xs: 400 12px/1.5 Sage UI;
155
+ --global-typography-adaptive-component-moderate-xs: 400 13px/1.5 Sage UI;
156
156
  --global-typography-adaptive-component-moderate-s: 400 14px/1.5 Sage UI;
157
157
  --global-typography-adaptive-component-moderate-m: 400 14px/1.5 Sage UI;
158
158
  --global-typography-adaptive-component-moderate-l: 400 16px/1.5 Sage UI;
@@ -165,16 +165,16 @@
165
165
  --global-typography-adaptive-component-underlined-firm-s: 500 14px/1.5 Sage UI;
166
166
  --global-typography-adaptive-component-underlined-firm-m: 500 14px/1.5 Sage UI;
167
167
  --global-typography-adaptive-component-underlined-firm-l: 500 16px/1.5 Sage UI;
168
- --global-typography-adaptive-component-placeholdertext-xs: 500 11px/1.5 Sage UI;
168
+ --global-typography-adaptive-component-placeholdertext-xs: 500 12px/1.5 Sage UI;
169
169
  --global-typography-adaptive-component-placeholdertext-s: 500 14px/1.5 Sage UI;
170
170
  --global-typography-adaptive-component-placeholdertext-m: 500 18px/1.5 Sage UI;
171
171
  --global-typography-adaptive-component-placeholdertext-ml: 500 24px/1.5 Sage UI;
172
172
  --global-typography-adaptive-component-placeholdertext-l: 500 30px/1.5 Sage UI;
173
173
  --global-typography-adaptive-component-placeholdertext-xl: 500 40px/1.5 Sage UI;
174
174
  --global-typography-adaptive-component-placeholdertext-xxl: 500 52px/1.5 Sage UI;
175
- --global-typography-adaptive-component-notification-m: 500 12px/1 Sage UI; /* used for badge text - notifications on buttons and in global nav */
176
- --global-font-size-adaptive-step-minus2: 11px;
177
- --global-font-size-adaptive-step-minus1: 12px;
175
+ --global-typography-adaptive-component-notification-m: 500 13px/1 Sage UI; /* used for badge text - notifications on buttons and in global nav */
176
+ --global-font-size-adaptive-step-minus2: 12px;
177
+ --global-font-size-adaptive-step-minus1: 13px;
178
178
  --global-font-size-adaptive-step0: 14px;
179
179
  --global-font-size-adaptive-step1: 16px;
180
180
  --global-font-size-adaptive-step2: 18px;
package/css/marketing/small/components/container.css CHANGED
@@ -7,10 +7,13 @@
7
7
  --container-size-dialog-max-width-xxs: 300;
8
8
  --container-size-dialog-max-width-xs: 380;
9
9
  --container-size-dialog-max-width-s: 540;
10
- --container-size-dialog-max-width-m: 750;
11
- --container-size-dialog-max-width-l: 850;
10
+ --container-size-dialog-max-width-m: 850;
11
+ --container-size-dialog-max-width-l: 1080;
12
12
  --container-size-dialog-max-width-xl: 960;
13
13
  --container-size-dialog-max-width-xxl: 1080;
14
+ --container-size-dialog-min-width-s: 288;
15
+ --container-size-dialog-min-width-m: 288;
16
+ --container-size-dialog-min-width-l: 288;
14
17
  --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
15
18
  --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
16
19
  --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
package/css/marketing/small/components/nav.css CHANGED
@@ -3,6 +3,8 @@
3
3
  */
4
4
 
5
5
  :root {
6
+ --nav-size-leftnav-parent-container-fixed-width: 140; /* fixed width of parent container */
7
+ --nav-size-leftnav-child-container-fixed-width: 250; /* fixed width of parent container */
6
8
  --nav-space-leftnav-grandchilditem-x-indent: 33; /* indent on grandchild items */
7
9
  --nav-color-bg-default: var(--modes-color-generic-bg-nought); /* nav bar bg */
8
10
  --nav-color-item-bg-enabled: var(--modes-color-none);
@@ -18,16 +20,16 @@
18
20
  --nav-color-topnav-item-bg-active: var(--modes-color-interactive-nav-active);
19
21
  --nav-color-topnav-item-bg-enabled: var(--modes-color-none);
20
22
  --nav-color-topnav-item-bg-hover: var(--modes-color-interactive-nav-hover);
21
- --nav-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
23
+ --nav-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-xs);
22
24
  --nav-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
23
25
  --nav-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
24
- --nav-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-s);
26
+ --nav-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-xs);
25
27
  --nav-typography-adaptive-default-m: var(--global-typography-adaptive-component-moderate-m);
26
28
  --nav-typography-adaptive-default-l: var(--global-typography-adaptive-component-moderate-l);
27
- --nav-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
29
+ --nav-typography-responsive-label-s: var(--global-typography-responsive-component-firm-xs);
28
30
  --nav-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
29
31
  --nav-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
30
- --nav-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-s);
32
+ --nav-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-xs);
31
33
  --nav-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
32
34
  --nav-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
33
35
  --nav-color-item-bg-active: var(--modes-color-interactive-monochrome-active);
package/css/product/all.css CHANGED
@@ -1118,10 +1118,13 @@
1118
1118
  --container-size-dialog-max-width-xxs: 300;
1119
1119
  --container-size-dialog-max-width-xs: 380;
1120
1120
  --container-size-dialog-max-width-s: 540;
1121
- --container-size-dialog-max-width-m: 750;
1122
- --container-size-dialog-max-width-l: 850;
1121
+ --container-size-dialog-max-width-m: 850;
1122
+ --container-size-dialog-max-width-l: 1080;
1123
1123
  --container-size-dialog-max-width-xl: 960;
1124
1124
  --container-size-dialog-max-width-xxl: 1080;
1125
+ --container-size-dialog-min-width-s: 288;
1126
+ --container-size-dialog-min-width-m: 288;
1127
+ --container-size-dialog-min-width-l: 288;
1125
1128
  --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
1126
1129
  --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
1127
1130
  --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
@@ -1792,6 +1795,8 @@
1792
1795
  --logo-space-ai-xg-m: var(--global-space-micro-l); /* Space between star icon and text */
1793
1796
 
1794
1797
  /* nav component tokens */
1798
+ --nav-size-leftnav-parent-container-fixed-width: 140; /* fixed width of parent container */
1799
+ --nav-size-leftnav-child-container-fixed-width: 250; /* fixed width of parent container */
1795
1800
  --nav-space-leftnav-grandchilditem-x-indent: 33; /* indent on grandchild items */
1796
1801
  --nav-color-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* nav bar bg */
1797
1802
  --nav-color-item-bg-enabled: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
@@ -1807,10 +1812,10 @@
1807
1812
  --nav-color-topnav-item-bg-active: light-dark(var(--modes-color-interactive-nav-active-light), var(--modes-color-interactive-nav-active-dark));
1808
1813
  --nav-color-topnav-item-bg-enabled: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
1809
1814
  --nav-color-topnav-item-bg-hover: light-dark(var(--modes-color-interactive-nav-hover-light), var(--modes-color-interactive-nav-hover-dark));
1810
- --nav-typography-label-s: var(--global-typography-component-firm-s);
1815
+ --nav-typography-label-s: var(--global-typography-component-firm-xs);
1811
1816
  --nav-typography-label-m: var(--global-typography-component-firm-m);
1812
1817
  --nav-typography-label-l: var(--global-typography-component-firm-l);
1813
- --nav-typography-default-s: var(--global-typography-component-moderate-s);
1818
+ --nav-typography-default-s: var(--global-typography-component-moderate-xs);
1814
1819
  --nav-typography-default-m: var(--global-typography-component-moderate-m);
1815
1820
  --nav-typography-default-l: var(--global-typography-component-moderate-l);
1816
1821
  --nav-color-item-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
@@ -2577,8 +2582,6 @@
2577
2582
  --global-space-macro-l: 32px;
2578
2583
  --global-space-macro-xl: 40px;
2579
2584
  --global-space-macro-xxl: 48px;
2580
- --global-font-size-adaptive-step-minus2: 11px;
2581
- --global-font-size-adaptive-step-minus1: 12px;
2582
2585
  --global-font-size-adaptive-step2: 18px;
2583
2586
  --global-font-size-adaptive-step3: 21px;
2584
2587
  --global-font-size-adaptive-step4: 24px;
package/css/product/large/components/container.css CHANGED
@@ -7,10 +7,13 @@
7
7
  --container-size-dialog-max-width-xxs: 300;
8
8
  --container-size-dialog-max-width-xs: 380;
9
9
  --container-size-dialog-max-width-s: 540;
10
- --container-size-dialog-max-width-m: 750;
11
- --container-size-dialog-max-width-l: 850;
10
+ --container-size-dialog-max-width-m: 850;
11
+ --container-size-dialog-max-width-l: 1080;
12
12
  --container-size-dialog-max-width-xl: 960;
13
13
  --container-size-dialog-max-width-xxl: 1080;
14
+ --container-size-dialog-min-width-s: 288;
15
+ --container-size-dialog-min-width-m: 288;
16
+ --container-size-dialog-min-width-l: 288;
14
17
  --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
15
18
  --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
16
19
  --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
package/css/product/large/components/nav.css CHANGED
@@ -3,6 +3,8 @@
3
3
  */
4
4
 
5
5
  :root {
6
+ --nav-size-leftnav-parent-container-fixed-width: 140; /* fixed width of parent container */
7
+ --nav-size-leftnav-child-container-fixed-width: 250; /* fixed width of parent container */
6
8
  --nav-space-leftnav-grandchilditem-x-indent: 33; /* indent on grandchild items */
7
9
  --nav-color-bg-default: var(--modes-color-generic-bg-nought); /* nav bar bg */
8
10
  --nav-color-item-bg-enabled: var(--modes-color-none);
@@ -18,16 +20,16 @@
18
20
  --nav-color-topnav-item-bg-active: var(--modes-color-interactive-nav-active);
19
21
  --nav-color-topnav-item-bg-enabled: var(--modes-color-none);
20
22
  --nav-color-topnav-item-bg-hover: var(--modes-color-interactive-nav-hover);
21
- --nav-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
23
+ --nav-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-xs);
22
24
  --nav-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
23
25
  --nav-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
24
- --nav-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-s);
26
+ --nav-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-xs);
25
27
  --nav-typography-adaptive-default-m: var(--global-typography-adaptive-component-moderate-m);
26
28
  --nav-typography-adaptive-default-l: var(--global-typography-adaptive-component-moderate-l);
27
- --nav-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
29
+ --nav-typography-responsive-label-s: var(--global-typography-responsive-component-firm-xs);
28
30
  --nav-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
29
31
  --nav-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
30
- --nav-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-s);
32
+ --nav-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-xs);
31
33
  --nav-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
32
34
  --nav-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
33
35
  --nav-color-item-bg-active: var(--modes-color-interactive-monochrome-active);
package/css/product/large/global.css CHANGED
@@ -148,11 +148,11 @@
148
148
  --global-typography-adaptive-body-medium-s: 500 14px/1.5 Sage UI;
149
149
  --global-typography-adaptive-body-medium-m: 500 14px/1.5 Sage UI;
150
150
  --global-typography-adaptive-body-medium-l: 500 16px/1.5 Sage UI;
151
- --global-typography-adaptive-component-firm-xs: 500 12px/1.5 Sage UI;
151
+ --global-typography-adaptive-component-firm-xs: 500 13px/1.5 Sage UI;
152
152
  --global-typography-adaptive-component-firm-s: 500 14px/1.5 Sage UI;
153
153
  --global-typography-adaptive-component-firm-m: 500 14px/1.5 Sage UI;
154
154
  --global-typography-adaptive-component-firm-l: 500 16px/1.5 Sage UI;
155
- --global-typography-adaptive-component-moderate-xs: 400 12px/1.5 Sage UI;
155
+ --global-typography-adaptive-component-moderate-xs: 400 13px/1.5 Sage UI;
156
156
  --global-typography-adaptive-component-moderate-s: 400 14px/1.5 Sage UI;
157
157
  --global-typography-adaptive-component-moderate-m: 400 14px/1.5 Sage UI;
158
158
  --global-typography-adaptive-component-moderate-l: 400 16px/1.5 Sage UI;
@@ -165,16 +165,16 @@
165
165
  --global-typography-adaptive-component-underlined-firm-s: 500 14px/1.5 Sage UI;
166
166
  --global-typography-adaptive-component-underlined-firm-m: 500 14px/1.5 Sage UI;
167
167
  --global-typography-adaptive-component-underlined-firm-l: 500 16px/1.5 Sage UI;
168
- --global-typography-adaptive-component-placeholdertext-xs: 500 11px/1.5 Sage UI;
168
+ --global-typography-adaptive-component-placeholdertext-xs: 500 12px/1.5 Sage UI;
169
169
  --global-typography-adaptive-component-placeholdertext-s: 500 14px/1.5 Sage UI;
170
170
  --global-typography-adaptive-component-placeholdertext-m: 500 18px/1.5 Sage UI;
171
171
  --global-typography-adaptive-component-placeholdertext-ml: 500 24px/1.5 Sage UI;
172
172
  --global-typography-adaptive-component-placeholdertext-l: 500 30px/1.5 Sage UI;
173
173
  --global-typography-adaptive-component-placeholdertext-xl: 500 40px/1.5 Sage UI;
174
174
  --global-typography-adaptive-component-placeholdertext-xxl: 500 52px/1.5 Sage UI;
175
- --global-typography-adaptive-component-notification-m: 500 12px/1 Sage UI; /* used for badge text - notifications on buttons and in global nav */
176
- --global-font-size-adaptive-step-minus2: 11px;
177
- --global-font-size-adaptive-step-minus1: 12px;
175
+ --global-typography-adaptive-component-notification-m: 500 13px/1 Sage UI; /* used for badge text - notifications on buttons and in global nav */
176
+ --global-font-size-adaptive-step-minus2: 12px;
177
+ --global-font-size-adaptive-step-minus1: 13px;
178
178
  --global-font-size-adaptive-step0: 14px;
179
179
  --global-font-size-adaptive-step1: 16px;
180
180
  --global-font-size-adaptive-step2: 18px;
package/css/product/small/components/container.css CHANGED
@@ -7,10 +7,13 @@
7
7
  --container-size-dialog-max-width-xxs: 300;
8
8
  --container-size-dialog-max-width-xs: 380;
9
9
  --container-size-dialog-max-width-s: 540;
10
- --container-size-dialog-max-width-m: 750;
11
- --container-size-dialog-max-width-l: 850;
10
+ --container-size-dialog-max-width-m: 850;
11
+ --container-size-dialog-max-width-l: 1080;
12
12
  --container-size-dialog-max-width-xl: 960;
13
13
  --container-size-dialog-max-width-xxl: 1080;
14
+ --container-size-dialog-min-width-s: 288;
15
+ --container-size-dialog-min-width-m: 288;
16
+ --container-size-dialog-min-width-l: 288;
14
17
  --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
15
18
  --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
16
19
  --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
package/css/product/small/components/nav.css CHANGED
@@ -3,6 +3,8 @@
3
3
  */
4
4
 
5
5
  :root {
6
+ --nav-size-leftnav-parent-container-fixed-width: 140; /* fixed width of parent container */
7
+ --nav-size-leftnav-child-container-fixed-width: 250; /* fixed width of parent container */
6
8
  --nav-space-leftnav-grandchilditem-x-indent: 33; /* indent on grandchild items */
7
9
  --nav-color-bg-default: var(--modes-color-generic-bg-nought); /* nav bar bg */
8
10
  --nav-color-item-bg-enabled: var(--modes-color-none);
@@ -18,16 +20,16 @@
18
20
  --nav-color-topnav-item-bg-active: var(--modes-color-interactive-nav-active);
19
21
  --nav-color-topnav-item-bg-enabled: var(--modes-color-none);
20
22
  --nav-color-topnav-item-bg-hover: var(--modes-color-interactive-nav-hover);
21
- --nav-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
23
+ --nav-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-xs);
22
24
  --nav-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
23
25
  --nav-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
24
- --nav-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-s);
26
+ --nav-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-xs);
25
27
  --nav-typography-adaptive-default-m: var(--global-typography-adaptive-component-moderate-m);
26
28
  --nav-typography-adaptive-default-l: var(--global-typography-adaptive-component-moderate-l);
27
- --nav-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
29
+ --nav-typography-responsive-label-s: var(--global-typography-responsive-component-firm-xs);
28
30
  --nav-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
29
31
  --nav-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
30
- --nav-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-s);
32
+ --nav-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-xs);
31
33
  --nav-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
32
34
  --nav-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
33
35
  --nav-color-item-bg-active: var(--modes-color-interactive-monochrome-active);
package/ios/frozenproduct/large/dark/components/container.h CHANGED
@@ -69,10 +69,13 @@
69
69
  #define containerSizeDialogMaxWidthXxs 300
70
70
  #define containerSizeDialogMaxWidthXs 380
71
71
  #define containerSizeDialogMaxWidthS 540
72
- #define containerSizeDialogMaxWidthM 750
73
- #define containerSizeDialogMaxWidthL 850
72
+ #define containerSizeDialogMaxWidthM 850
73
+ #define containerSizeDialogMaxWidthL 1080
74
74
  #define containerSizeDialogMaxWidthXl 960
75
75
  #define containerSizeDialogMaxWidthXxl 1080
76
+ #define containerSizeDialogMinWidthS 288
77
+ #define containerSizeDialogMinWidthM 288
78
+ #define containerSizeDialogMinWidthL 288
76
79
  #define containerSizeDragDroptarget 2
77
80
  #define containerSizeDrawerMinwidth 288
78
81
  #define containerSizeDrawerMaxwidth 760
package/ios/frozenproduct/large/dark/components/nav.h CHANGED
@@ -77,6 +77,8 @@
77
77
  #define navSizeLeftnavParentMinheight 48
78
78
  #define navSizeLeftnavChildMinheight 40
79
79
  #define navSizeLeftnavGrandchildMinheight 32
80
+ #define navSizeLeftnavParentContainerFixedWidth 140
81
+ #define navSizeLeftnavChildContainerFixedWidth 250
80
82
  #define navSizeModalParentitemMinheight 40
81
83
  #define navSizeModalChilditemMinheight 32
82
84
  #define navSizeModalHeaderitemIdentifierM 24
package/ios/frozenproduct/large/global.h CHANGED
@@ -179,8 +179,8 @@
179
179
  #define globalTypographyAdaptiveComponentPlaceholdertextXl [object Object]
180
180
  #define globalTypographyAdaptiveComponentPlaceholdertextXxl [object Object]
181
181
  #define globalTypographyAdaptiveComponentNotificationM [object Object]
182
- #define globalFontSizeAdaptiveStepMinus2 11px
183
- #define globalFontSizeAdaptiveStepMinus1 12px
182
+ #define globalFontSizeAdaptiveStepMinus2 12px
183
+ #define globalFontSizeAdaptiveStepMinus1 13px
184
184
  #define globalFontSizeAdaptiveStep0 14px
185
185
  #define globalFontSizeAdaptiveStep1 16px
186
186
  #define globalFontSizeAdaptiveStep2 18px
package/ios/frozenproduct/large/light/components/container.h CHANGED
@@ -69,10 +69,13 @@
69
69
  #define containerSizeDialogMaxWidthXxs 300
70
70
  #define containerSizeDialogMaxWidthXs 380
71
71
  #define containerSizeDialogMaxWidthS 540
72
- #define containerSizeDialogMaxWidthM 750
73
- #define containerSizeDialogMaxWidthL 850
72
+ #define containerSizeDialogMaxWidthM 850
73
+ #define containerSizeDialogMaxWidthL 1080
74
74
  #define containerSizeDialogMaxWidthXl 960
75
75
  #define containerSizeDialogMaxWidthXxl 1080
76
+ #define containerSizeDialogMinWidthS 288
77
+ #define containerSizeDialogMinWidthM 288
78
+ #define containerSizeDialogMinWidthL 288
76
79
  #define containerSizeDragDroptarget 2
77
80
  #define containerSizeDrawerMinwidth 288
78
81
  #define containerSizeDrawerMaxwidth 760
package/ios/frozenproduct/large/light/components/nav.h CHANGED
@@ -77,6 +77,8 @@
77
77
  #define navSizeLeftnavParentMinheight 48
78
78
  #define navSizeLeftnavChildMinheight 40
79
79
  #define navSizeLeftnavGrandchildMinheight 32
80
+ #define navSizeLeftnavParentContainerFixedWidth 140
81
+ #define navSizeLeftnavChildContainerFixedWidth 250
80
82
  #define navSizeModalParentitemMinheight 40
81
83
  #define navSizeModalChilditemMinheight 32
82
84
  #define navSizeModalHeaderitemIdentifierM 24