@sage/design-tokens 14.4.0 → 14.6.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 (309) hide show
  1. package/css/frozenproduct/all.css +46 -23
  2. package/css/frozenproduct/large/components/button.css +32 -13
  3. package/css/frozenproduct/large/components/form.css +6 -3
  4. package/css/frozenproduct/large/global.css +6 -5
  5. package/css/frozenproduct/small/components/button.css +32 -13
  6. package/css/frozenproduct/small/components/form.css +6 -3
  7. package/css/frozenproduct/small/global.css +6 -5
  8. package/css/marketing/all.css +46 -23
  9. package/css/marketing/large/components/button.css +32 -13
  10. package/css/marketing/large/components/form.css +6 -3
  11. package/css/marketing/large/global.css +6 -5
  12. package/css/marketing/small/components/button.css +32 -13
  13. package/css/marketing/small/components/form.css +6 -3
  14. package/css/marketing/small/global.css +6 -5
  15. package/css/product/all.css +46 -23
  16. package/css/product/large/components/button.css +32 -13
  17. package/css/product/large/components/form.css +6 -3
  18. package/css/product/large/global.css +6 -5
  19. package/css/product/small/components/button.css +32 -13
  20. package/css/product/small/components/form.css +6 -3
  21. package/css/product/small/global.css +6 -5
  22. package/ios/frozenproduct/large/dark/components/button.h +32 -13
  23. package/ios/frozenproduct/large/dark/components/form.h +6 -3
  24. package/ios/frozenproduct/large/global.h +6 -5
  25. package/ios/frozenproduct/large/light/components/button.h +32 -13
  26. package/ios/frozenproduct/large/light/components/form.h +6 -3
  27. package/ios/frozenproduct/small/dark/components/button.h +32 -13
  28. package/ios/frozenproduct/small/dark/components/form.h +6 -3
  29. package/ios/frozenproduct/small/global.h +6 -5
  30. package/ios/frozenproduct/small/light/components/button.h +32 -13
  31. package/ios/frozenproduct/small/light/components/form.h +6 -3
  32. package/ios/marketing/large/dark/components/button.h +32 -13
  33. package/ios/marketing/large/dark/components/form.h +6 -3
  34. package/ios/marketing/large/global.h +6 -5
  35. package/ios/marketing/large/light/components/button.h +32 -13
  36. package/ios/marketing/large/light/components/form.h +6 -3
  37. package/ios/marketing/small/dark/components/button.h +32 -13
  38. package/ios/marketing/small/dark/components/form.h +6 -3
  39. package/ios/marketing/small/global.h +6 -5
  40. package/ios/marketing/small/light/components/button.h +32 -13
  41. package/ios/marketing/small/light/components/form.h +6 -3
  42. package/ios/product/large/dark/components/button.h +32 -13
  43. package/ios/product/large/dark/components/form.h +6 -3
  44. package/ios/product/large/global.h +6 -5
  45. package/ios/product/large/light/components/button.h +32 -13
  46. package/ios/product/large/light/components/form.h +6 -3
  47. package/ios/product/small/dark/components/button.h +32 -13
  48. package/ios/product/small/dark/components/form.h +6 -3
  49. package/ios/product/small/global.h +6 -5
  50. package/ios/product/small/light/components/button.h +32 -13
  51. package/ios/product/small/light/components/form.h +6 -3
  52. package/js/common/frozenproduct/large/dark/components/button.d.ts +28 -1
  53. package/js/common/frozenproduct/large/dark/components/button.js +366 -39
  54. package/js/common/frozenproduct/large/dark/components/form.d.ts +7 -0
  55. package/js/common/frozenproduct/large/dark/components/form.js +61 -6
  56. package/js/common/frozenproduct/large/global.d.ts +6 -5
  57. package/js/common/frozenproduct/large/global.js +122 -101
  58. package/js/common/frozenproduct/large/light/components/button.d.ts +28 -1
  59. package/js/common/frozenproduct/large/light/components/button.js +366 -39
  60. package/js/common/frozenproduct/large/light/components/form.d.ts +7 -0
  61. package/js/common/frozenproduct/large/light/components/form.js +61 -6
  62. package/js/common/frozenproduct/small/dark/components/button.d.ts +28 -1
  63. package/js/common/frozenproduct/small/dark/components/button.js +366 -39
  64. package/js/common/frozenproduct/small/dark/components/form.d.ts +7 -0
  65. package/js/common/frozenproduct/small/dark/components/form.js +61 -6
  66. package/js/common/frozenproduct/small/global.d.ts +6 -5
  67. package/js/common/frozenproduct/small/global.js +122 -101
  68. package/js/common/frozenproduct/small/light/components/button.d.ts +28 -1
  69. package/js/common/frozenproduct/small/light/components/button.js +366 -39
  70. package/js/common/frozenproduct/small/light/components/form.d.ts +7 -0
  71. package/js/common/frozenproduct/small/light/components/form.js +61 -6
  72. package/js/common/marketing/large/dark/components/button.d.ts +28 -1
  73. package/js/common/marketing/large/dark/components/button.js +366 -39
  74. package/js/common/marketing/large/dark/components/form.d.ts +7 -0
  75. package/js/common/marketing/large/dark/components/form.js +61 -6
  76. package/js/common/marketing/large/global.d.ts +6 -5
  77. package/js/common/marketing/large/global.js +122 -101
  78. package/js/common/marketing/large/light/components/button.d.ts +28 -1
  79. package/js/common/marketing/large/light/components/button.js +366 -39
  80. package/js/common/marketing/large/light/components/form.d.ts +7 -0
  81. package/js/common/marketing/large/light/components/form.js +61 -6
  82. package/js/common/marketing/small/dark/components/button.d.ts +28 -1
  83. package/js/common/marketing/small/dark/components/button.js +366 -39
  84. package/js/common/marketing/small/dark/components/form.d.ts +7 -0
  85. package/js/common/marketing/small/dark/components/form.js +61 -6
  86. package/js/common/marketing/small/global.d.ts +6 -5
  87. package/js/common/marketing/small/global.js +122 -101
  88. package/js/common/marketing/small/light/components/button.d.ts +28 -1
  89. package/js/common/marketing/small/light/components/button.js +366 -39
  90. package/js/common/marketing/small/light/components/form.d.ts +7 -0
  91. package/js/common/marketing/small/light/components/form.js +61 -6
  92. package/js/common/product/large/dark/components/button.d.ts +28 -1
  93. package/js/common/product/large/dark/components/button.js +366 -39
  94. package/js/common/product/large/dark/components/form.d.ts +7 -0
  95. package/js/common/product/large/dark/components/form.js +61 -6
  96. package/js/common/product/large/global.d.ts +6 -5
  97. package/js/common/product/large/global.js +122 -101
  98. package/js/common/product/large/light/components/button.d.ts +28 -1
  99. package/js/common/product/large/light/components/button.js +366 -39
  100. package/js/common/product/large/light/components/form.d.ts +7 -0
  101. package/js/common/product/large/light/components/form.js +61 -6
  102. package/js/common/product/small/dark/components/button.d.ts +28 -1
  103. package/js/common/product/small/dark/components/button.js +366 -39
  104. package/js/common/product/small/dark/components/form.d.ts +7 -0
  105. package/js/common/product/small/dark/components/form.js +61 -6
  106. package/js/common/product/small/global.d.ts +6 -5
  107. package/js/common/product/small/global.js +122 -101
  108. package/js/common/product/small/light/components/button.d.ts +28 -1
  109. package/js/common/product/small/light/components/button.js +366 -39
  110. package/js/common/product/small/light/components/form.d.ts +7 -0
  111. package/js/common/product/small/light/components/form.js +61 -6
  112. package/js/es6/frozenproduct/large/dark/components/button.d.ts +20 -1
  113. package/js/es6/frozenproduct/large/dark/components/button.js +32 -13
  114. package/js/es6/frozenproduct/large/dark/components/form.d.ts +6 -3
  115. package/js/es6/frozenproduct/large/dark/components/form.js +6 -3
  116. package/js/es6/frozenproduct/large/global.d.ts +6 -5
  117. package/js/es6/frozenproduct/large/global.js +6 -5
  118. package/js/es6/frozenproduct/large/light/components/button.d.ts +20 -1
  119. package/js/es6/frozenproduct/large/light/components/button.js +32 -13
  120. package/js/es6/frozenproduct/large/light/components/form.d.ts +6 -3
  121. package/js/es6/frozenproduct/large/light/components/form.js +6 -3
  122. package/js/es6/frozenproduct/small/dark/components/button.d.ts +20 -1
  123. package/js/es6/frozenproduct/small/dark/components/button.js +32 -13
  124. package/js/es6/frozenproduct/small/dark/components/form.d.ts +6 -3
  125. package/js/es6/frozenproduct/small/dark/components/form.js +6 -3
  126. package/js/es6/frozenproduct/small/global.d.ts +6 -5
  127. package/js/es6/frozenproduct/small/global.js +6 -5
  128. package/js/es6/frozenproduct/small/light/components/button.d.ts +20 -1
  129. package/js/es6/frozenproduct/small/light/components/button.js +32 -13
  130. package/js/es6/frozenproduct/small/light/components/form.d.ts +6 -3
  131. package/js/es6/frozenproduct/small/light/components/form.js +6 -3
  132. package/js/es6/marketing/large/dark/components/button.d.ts +20 -1
  133. package/js/es6/marketing/large/dark/components/button.js +32 -13
  134. package/js/es6/marketing/large/dark/components/form.d.ts +6 -3
  135. package/js/es6/marketing/large/dark/components/form.js +6 -3
  136. package/js/es6/marketing/large/global.d.ts +6 -5
  137. package/js/es6/marketing/large/global.js +6 -5
  138. package/js/es6/marketing/large/light/components/button.d.ts +20 -1
  139. package/js/es6/marketing/large/light/components/button.js +32 -13
  140. package/js/es6/marketing/large/light/components/form.d.ts +6 -3
  141. package/js/es6/marketing/large/light/components/form.js +6 -3
  142. package/js/es6/marketing/small/dark/components/button.d.ts +20 -1
  143. package/js/es6/marketing/small/dark/components/button.js +32 -13
  144. package/js/es6/marketing/small/dark/components/form.d.ts +6 -3
  145. package/js/es6/marketing/small/dark/components/form.js +6 -3
  146. package/js/es6/marketing/small/global.d.ts +6 -5
  147. package/js/es6/marketing/small/global.js +6 -5
  148. package/js/es6/marketing/small/light/components/button.d.ts +20 -1
  149. package/js/es6/marketing/small/light/components/button.js +32 -13
  150. package/js/es6/marketing/small/light/components/form.d.ts +6 -3
  151. package/js/es6/marketing/small/light/components/form.js +6 -3
  152. package/js/es6/product/large/dark/components/button.d.ts +20 -1
  153. package/js/es6/product/large/dark/components/button.js +32 -13
  154. package/js/es6/product/large/dark/components/form.d.ts +6 -3
  155. package/js/es6/product/large/dark/components/form.js +6 -3
  156. package/js/es6/product/large/global.d.ts +6 -5
  157. package/js/es6/product/large/global.js +6 -5
  158. package/js/es6/product/large/light/components/button.d.ts +20 -1
  159. package/js/es6/product/large/light/components/button.js +32 -13
  160. package/js/es6/product/large/light/components/form.d.ts +6 -3
  161. package/js/es6/product/large/light/components/form.js +6 -3
  162. package/js/es6/product/small/dark/components/button.d.ts +20 -1
  163. package/js/es6/product/small/dark/components/button.js +32 -13
  164. package/js/es6/product/small/dark/components/form.d.ts +6 -3
  165. package/js/es6/product/small/dark/components/form.js +6 -3
  166. package/js/es6/product/small/global.d.ts +6 -5
  167. package/js/es6/product/small/global.js +6 -5
  168. package/js/es6/product/small/light/components/button.d.ts +20 -1
  169. package/js/es6/product/small/light/components/button.js +32 -13
  170. package/js/es6/product/small/light/components/form.d.ts +6 -3
  171. package/js/es6/product/small/light/components/form.js +6 -3
  172. package/js/umd/frozenproduct/large/dark/components/button.js +366 -39
  173. package/js/umd/frozenproduct/large/dark/components/form.js +61 -6
  174. package/js/umd/frozenproduct/large/global.js +122 -102
  175. package/js/umd/frozenproduct/large/light/components/button.js +366 -39
  176. package/js/umd/frozenproduct/large/light/components/form.js +61 -6
  177. package/js/umd/frozenproduct/small/dark/components/button.js +366 -39
  178. package/js/umd/frozenproduct/small/dark/components/form.js +61 -6
  179. package/js/umd/frozenproduct/small/global.js +122 -102
  180. package/js/umd/frozenproduct/small/light/components/button.js +366 -39
  181. package/js/umd/frozenproduct/small/light/components/form.js +61 -6
  182. package/js/umd/marketing/large/dark/components/button.js +366 -39
  183. package/js/umd/marketing/large/dark/components/form.js +61 -6
  184. package/js/umd/marketing/large/global.js +122 -102
  185. package/js/umd/marketing/large/light/components/button.js +366 -39
  186. package/js/umd/marketing/large/light/components/form.js +61 -6
  187. package/js/umd/marketing/small/dark/components/button.js +366 -39
  188. package/js/umd/marketing/small/dark/components/form.js +61 -6
  189. package/js/umd/marketing/small/global.js +122 -102
  190. package/js/umd/marketing/small/light/components/button.js +366 -39
  191. package/js/umd/marketing/small/light/components/form.js +61 -6
  192. package/js/umd/product/large/dark/components/button.js +366 -39
  193. package/js/umd/product/large/dark/components/form.js +61 -6
  194. package/js/umd/product/large/global.js +122 -102
  195. package/js/umd/product/large/light/components/button.js +366 -39
  196. package/js/umd/product/large/light/components/form.js +61 -6
  197. package/js/umd/product/small/dark/components/button.js +366 -39
  198. package/js/umd/product/small/dark/components/form.js +61 -6
  199. package/js/umd/product/small/global.js +122 -102
  200. package/js/umd/product/small/light/components/button.js +366 -39
  201. package/js/umd/product/small/light/components/form.js +61 -6
  202. package/json/flat/frozenproduct/large/dark/components/button.json +32 -13
  203. package/json/flat/frozenproduct/large/dark/components/form.json +6 -3
  204. package/json/flat/frozenproduct/large/global.json +6 -5
  205. package/json/flat/frozenproduct/large/light/components/button.json +32 -13
  206. package/json/flat/frozenproduct/large/light/components/form.json +6 -3
  207. package/json/flat/frozenproduct/small/dark/components/button.json +32 -13
  208. package/json/flat/frozenproduct/small/dark/components/form.json +6 -3
  209. package/json/flat/frozenproduct/small/global.json +6 -5
  210. package/json/flat/frozenproduct/small/light/components/button.json +32 -13
  211. package/json/flat/frozenproduct/small/light/components/form.json +6 -3
  212. package/json/flat/marketing/large/dark/components/button.json +32 -13
  213. package/json/flat/marketing/large/dark/components/form.json +6 -3
  214. package/json/flat/marketing/large/global.json +6 -5
  215. package/json/flat/marketing/large/light/components/button.json +32 -13
  216. package/json/flat/marketing/large/light/components/form.json +6 -3
  217. package/json/flat/marketing/small/dark/components/button.json +32 -13
  218. package/json/flat/marketing/small/dark/components/form.json +6 -3
  219. package/json/flat/marketing/small/global.json +6 -5
  220. package/json/flat/marketing/small/light/components/button.json +32 -13
  221. package/json/flat/marketing/small/light/components/form.json +6 -3
  222. package/json/flat/product/large/dark/components/button.json +32 -13
  223. package/json/flat/product/large/dark/components/form.json +6 -3
  224. package/json/flat/product/large/global.json +6 -5
  225. package/json/flat/product/large/light/components/button.json +32 -13
  226. package/json/flat/product/large/light/components/form.json +6 -3
  227. package/json/flat/product/small/dark/components/button.json +32 -13
  228. package/json/flat/product/small/dark/components/form.json +6 -3
  229. package/json/flat/product/small/global.json +6 -5
  230. package/json/flat/product/small/light/components/button.json +32 -13
  231. package/json/flat/product/small/light/components/form.json +6 -3
  232. package/json/nested/frozenproduct/large/dark/components/button.json +41 -14
  233. package/json/nested/frozenproduct/large/dark/components/form.json +10 -3
  234. package/json/nested/frozenproduct/large/global.json +6 -5
  235. package/json/nested/frozenproduct/large/light/components/button.json +41 -14
  236. package/json/nested/frozenproduct/large/light/components/form.json +10 -3
  237. package/json/nested/frozenproduct/small/dark/components/button.json +41 -14
  238. package/json/nested/frozenproduct/small/dark/components/form.json +10 -3
  239. package/json/nested/frozenproduct/small/global.json +6 -5
  240. package/json/nested/frozenproduct/small/light/components/button.json +41 -14
  241. package/json/nested/frozenproduct/small/light/components/form.json +10 -3
  242. package/json/nested/marketing/large/dark/components/button.json +41 -14
  243. package/json/nested/marketing/large/dark/components/form.json +10 -3
  244. package/json/nested/marketing/large/global.json +6 -5
  245. package/json/nested/marketing/large/light/components/button.json +41 -14
  246. package/json/nested/marketing/large/light/components/form.json +10 -3
  247. package/json/nested/marketing/small/dark/components/button.json +41 -14
  248. package/json/nested/marketing/small/dark/components/form.json +10 -3
  249. package/json/nested/marketing/small/global.json +6 -5
  250. package/json/nested/marketing/small/light/components/button.json +41 -14
  251. package/json/nested/marketing/small/light/components/form.json +10 -3
  252. package/json/nested/product/large/dark/components/button.json +41 -14
  253. package/json/nested/product/large/dark/components/form.json +10 -3
  254. package/json/nested/product/large/global.json +6 -5
  255. package/json/nested/product/large/light/components/button.json +41 -14
  256. package/json/nested/product/large/light/components/form.json +10 -3
  257. package/json/nested/product/small/dark/components/button.json +41 -14
  258. package/json/nested/product/small/dark/components/form.json +10 -3
  259. package/json/nested/product/small/global.json +6 -5
  260. package/json/nested/product/small/light/components/button.json +41 -14
  261. package/json/nested/product/small/light/components/form.json +10 -3
  262. package/package.json +1 -1
  263. package/sage-design-tokens-14.6.0.tgz +0 -0
  264. package/scss/frozenproduct/large/components/button.scss +45 -26
  265. package/scss/frozenproduct/large/components/container.scss +10 -10
  266. package/scss/frozenproduct/large/components/form.scss +13 -10
  267. package/scss/frozenproduct/large/components/link.scss +2 -2
  268. package/scss/frozenproduct/large/components/nav.scss +5 -5
  269. package/scss/frozenproduct/large/components/page.scss +1 -1
  270. package/scss/frozenproduct/large/components/popover.scss +2 -2
  271. package/scss/frozenproduct/large/components/progress.scss +6 -6
  272. package/scss/frozenproduct/large/components/status.scss +3 -3
  273. package/scss/frozenproduct/large/components/tab.scss +7 -7
  274. package/scss/frozenproduct/large/components/table.scss +10 -10
  275. package/scss/frozenproduct/large/global.scss +6 -5
  276. package/scss/frozenproduct/small/components/button.scss +32 -13
  277. package/scss/frozenproduct/small/components/form.scss +6 -3
  278. package/scss/frozenproduct/small/global.scss +6 -5
  279. package/scss/marketing/large/components/button.scss +32 -13
  280. package/scss/marketing/large/components/form.scss +6 -3
  281. package/scss/marketing/large/global.scss +6 -5
  282. package/scss/marketing/small/components/button.scss +45 -26
  283. package/scss/marketing/small/components/container.scss +10 -10
  284. package/scss/marketing/small/components/form.scss +13 -10
  285. package/scss/marketing/small/components/link.scss +2 -2
  286. package/scss/marketing/small/components/nav.scss +5 -5
  287. package/scss/marketing/small/components/page.scss +1 -1
  288. package/scss/marketing/small/components/popover.scss +2 -2
  289. package/scss/marketing/small/components/progress.scss +6 -6
  290. package/scss/marketing/small/components/status.scss +3 -3
  291. package/scss/marketing/small/components/tab.scss +7 -7
  292. package/scss/marketing/small/components/table.scss +10 -10
  293. package/scss/marketing/small/global.scss +6 -5
  294. package/scss/product/large/components/button.scss +32 -13
  295. package/scss/product/large/components/container.scss +10 -10
  296. package/scss/product/large/components/form.scss +13 -10
  297. package/scss/product/large/components/link.scss +2 -2
  298. package/scss/product/large/components/nav.scss +5 -5
  299. package/scss/product/large/components/page.scss +1 -1
  300. package/scss/product/large/components/popover.scss +2 -2
  301. package/scss/product/large/components/progress.scss +6 -6
  302. package/scss/product/large/components/status.scss +3 -3
  303. package/scss/product/large/components/tab.scss +7 -7
  304. package/scss/product/large/components/table.scss +10 -10
  305. package/scss/product/large/global.scss +6 -5
  306. package/scss/product/small/components/button.scss +32 -13
  307. package/scss/product/small/components/form.scss +6 -3
  308. package/scss/product/small/global.scss +6 -5
  309. package/sage-design-tokens-14.4.0.tgz +0 -0
package/css/frozenproduct/all.css CHANGED
@@ -133,8 +133,8 @@
133
133
  --global-typography-component-placeholdertext-xl: 500 30px/1.5 Sage UI;
134
134
  --global-typography-component-placeholdertext-xxl: 500 36px/1.5 Sage UI;
135
135
  --global-typography-component-notification-m: 500 13px/1 Sage UI; /* used for badge text - notifications on buttons and in global nav */
136
- --global-font-size-adaptive-step-2: 12px;
137
- --global-font-size-adaptive-step-1: 13px;
136
+ --global-font-size-adaptive-step-minus2: 12px;
137
+ --global-font-size-adaptive-step-minus1: 13px;
138
138
  --global-font-size-adaptive-step0: 14px;
139
139
  --global-font-size-adaptive-step1: 16px;
140
140
  --global-font-size-adaptive-step2: 17px;
@@ -147,9 +147,10 @@
147
147
  --global-font-size-adaptive-step9: 33px;
148
148
  --global-font-size-adaptive-step10: 36px;
149
149
  --global-font-families-sage-icons: sage-icons;
150
- --global-font-families-sage-headline: Sage Headline; /* Used in only in marketing contexts for some headings. */
151
- --global-font-families-sage-ui: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
152
- --global-font-families-sage-text: Sage Text; /* Used for Headings in product and in marketing contexts. Marketing also use it for their body copy. */
150
+ --global-font-families-heading: Sage UI;
151
+ --global-font-families-subheading: Sage UI;
152
+ --global-font-families-body: Sage UI;
153
+ --global-font-families-component: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
153
154
  --global-font-families-other: Open Sans; /* Fallback for when Sage fonts cannot load. */
154
155
 
155
156
  /* Light mode tokens */
@@ -881,6 +882,7 @@
881
882
  --button-size-toggle-s: var(--global-size-macro-s); /* min-height on S single toggle, and on button within M toggle group */
882
883
  --button-size-toggle-m: var(--global-size-macro-m); /* min-height on M single toggle, and on button within L toggle group */
883
884
  --button-size-toggle-l: var(--global-size-macro-l); /* min-height on L single toggle */
885
+ --button-size-icon-s: var(--global-size-icon-s);
884
886
  --button-size-icon-m: var(--global-size-icon-m);
885
887
  --button-size-video-s: var(--global-size-macro-m);
886
888
  --button-size-video-m: var(--global-size-macro-xxl);
@@ -915,9 +917,12 @@
915
917
  --button-space-primary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
916
918
  --button-space-primary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons */
917
919
  --button-space-primary-y-l: calc(var(--global-space-micro-xl) - 0.5); /* Top and bottom padding on Large buttons */
918
- --button-space-primary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size primary buttons */
919
- --button-space-primary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size primary buttons */
920
- --button-space-primary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size primary buttons */
920
+ --button-space-primary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size primary buttons */
921
+ --button-space-primary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size primary buttons */
922
+ --button-space-primary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size primary buttons */
923
+ --button-space-primary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size primary buttons */
924
+ --button-space-primary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size primary buttons */
925
+ --button-space-primary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size primary buttons */
921
926
  --button-space-secondary-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS table buttons */
922
927
  --button-space-secondary-x-s: var(--global-space-micro-xxl); /* Left and right padding on small buttons */
923
928
  --button-space-secondary-x-m: var(--global-space-macro-xs); /* Left and right padding on medium buttons */
@@ -926,13 +931,18 @@
926
931
  --button-space-secondary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
927
932
  --button-space-secondary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons */
928
933
  --button-space-secondary-y-l: calc(var(--global-space-micro-xl) - 0.5); /* Top and bottom padding on Large buttons */
934
+ --button-space-secondary-xg-xs: var(--global-space-micro-s); /* Item spacing inside XS buttons */
929
935
  --button-space-secondary-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
930
936
  --button-space-secondary-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
931
937
  --button-space-secondary-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
932
- --button-space-secondary-xg-xs: var(--global-space-micro-s); /* Item spacing inside XS buttons */
933
- --button-space-secondary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size secondary buttons */
934
- --button-space-secondary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size secondary buttons */
935
- --button-space-secondary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size secondary buttons */
938
+ --button-space-secondary-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size secondary buttons */
939
+ --button-space-secondary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size secondary buttons */
940
+ --button-space-secondary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size secondary buttons */
941
+ --button-space-secondary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size secondary buttons */
942
+ --button-space-secondary-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size secondary buttons */
943
+ --button-space-secondary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size secondary buttons */
944
+ --button-space-secondary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size secondary buttons */
945
+ --button-space-secondary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size secondary buttons */
936
946
  --button-space-tertiary-y-xs: calc((var(--global-space-macro-xxxs) / 4) - 0.5); /* top and bottom padding on XS table buttons */
937
947
  --button-space-tertiary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
938
948
  --button-space-tertiary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons */
@@ -945,9 +955,14 @@
945
955
  --button-space-tertiary-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
946
956
  --button-space-tertiary-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
947
957
  --button-space-tertiary-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
948
- --button-space-tertiary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size tertiary buttons */
949
- --button-space-tertiary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size tertiary buttons */
950
- --button-space-tertiary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size tertiary buttons */
958
+ --button-space-tertiary-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size tertiary buttons */
959
+ --button-space-tertiary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size tertiary buttons */
960
+ --button-space-tertiary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size tertiary buttons */
961
+ --button-space-tertiary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size tertiary buttons */
962
+ --button-space-tertiary-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size tertiary buttons */
963
+ --button-space-tertiary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size tertiary buttons */
964
+ --button-space-tertiary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size tertiary buttons */
965
+ --button-space-tertiary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size tertiary buttons */
951
966
  --button-space-subtle-y-xs: calc((var(--global-space-macro-xxxs) / 4) - 0.5); /* top and bottom padding on XS table buttons */
952
967
  --button-space-subtle-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
953
968
  --button-space-subtle-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons */
@@ -960,9 +975,14 @@
960
975
  --button-space-subtle-xg-s: var(--global-space-micro-s); /* Item spacing inside buttons */
961
976
  --button-space-subtle-xg-m: var(--global-space-micro-s); /* Item spacing inside buttons */
962
977
  --button-space-subtle-xg-l: var(--global-space-micro-s); /* Item spacing inside buttons */
963
- --button-space-subtle-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size subtle buttons */
964
- --button-space-subtle-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size subtle buttons */
965
- --button-space-subtle-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size subtle buttons */
978
+ --button-space-subtle-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size subtle buttons */
979
+ --button-space-subtle-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size subtle buttons */
980
+ --button-space-subtle-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size subtle buttons */
981
+ --button-space-subtle-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size subtle buttons */
982
+ --button-space-subtle-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size subtle buttons */
983
+ --button-space-subtle-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size subtle buttons */
984
+ --button-space-subtle-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size subtle buttons */
985
+ --button-space-subtle-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size subtle buttons */
966
986
  --button-space-toggle-button-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS asset used within S toggle group */
967
987
  --button-space-toggle-button-x-s: var(--global-space-macro-xxs); /* Left and right padding on S toggle buttons */
968
988
  --button-space-toggle-button-x-m: var(--global-space-macro-xs); /* Left and right padding on medium toggle buttons */
@@ -1428,6 +1448,9 @@
1428
1448
  --focus-borderwidth-outer: var(--global-borderwidth-l); /* Focus border (outer) */
1429
1449
 
1430
1450
  /* form component tokens */
1451
+ --form-space-datepicker-pr-s: 0; /* right padding on small date picker input */
1452
+ --form-space-datepicker-pr-m: 0; /* right padding on medium date picker input */
1453
+ --form-space-datepicker-pr-l: 0; /* right padding on large date picker input */
1431
1454
  --form-color-switch-border-active: transparent;
1432
1455
  --form-color-switch-border-activedisabled: transparent;
1433
1456
  --form-radius-none: var(--global-radius-none); /* Text editor (internal corners) */
@@ -1474,9 +1497,6 @@
1474
1497
  --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
1475
1498
  --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
1476
1499
  --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
1477
- --form-space-datepicker-pr-s: var(--global-space-micro-xs); /* right padding on small date picker input */
1478
- --form-space-datepicker-pr-m: var(--global-space-micro-m); /* right padding on medium date picker input */
1479
- --form-space-datepicker-pr-l: var(--global-space-micro-xl); /* right padding on large date picker input */
1480
1500
  --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
1481
1501
  --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
1482
1502
  --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
@@ -1507,6 +1527,9 @@
1507
1527
  --form-space-dropdown-pill-xg-s: var(--global-space-micro-s); /* space between pills inside pill wrapper */
1508
1528
  --form-space-dropdown-pill-xg-m: var(--global-space-micro-s); /* space between pills inside pill wrapper */
1509
1529
  --form-space-dropdown-pill-xg-l: var(--global-space-micro-s); /* space between pills inside pill wrapper */
1530
+ --form-space-dropdown-trigger-subtle-s: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
1531
+ --form-space-dropdown-trigger-subtle-m: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
1532
+ --form-space-dropdown-trigger-subtle-l: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
1510
1533
  --form-space-fileinput-status-xl-m: var(--global-space-macro-ml); /* Left padding in File input (no-thumbnail variant), status text. */
1511
1534
  --form-space-fileinput-status-y-m: var(--global-space-micro-s); /* Vertical padding in status text. */
1512
1535
  --form-space-fileinput-thumbnail-m: var(--global-space-micro-s); /* All padding in File input (thumbnail container). */
@@ -2555,8 +2578,8 @@
2555
2578
  --global-typography-component-placeholdertext-xl: 500 40px/1.5 Sage UI;
2556
2579
  --global-typography-component-placeholdertext-xxl: 500 52px/1.5 Sage UI;
2557
2580
  --global-typography-component-notification-m: 500 12px/1 Sage UI; /* used for badge text - notifications on buttons and in global nav */
2558
- --global-font-size-adaptive-step-2: 11px;
2559
- --global-font-size-adaptive-step-1: 12px;
2581
+ --global-font-size-adaptive-step-minus2: 11px;
2582
+ --global-font-size-adaptive-step-minus1: 12px;
2560
2583
  --global-font-size-adaptive-step2: 18px;
2561
2584
  --global-font-size-adaptive-step3: 21px;
2562
2585
  --global-font-size-adaptive-step4: 24px;
package/css/frozenproduct/large/components/button.css CHANGED
@@ -98,6 +98,7 @@
98
98
  --button-size-toggle-s: var(--global-size-macro-s); /* min-height on S single toggle, and on button within M toggle group */
99
99
  --button-size-toggle-m: var(--global-size-macro-m); /* min-height on M single toggle, and on button within L toggle group */
100
100
  --button-size-toggle-l: var(--global-size-macro-l); /* min-height on L single toggle */
101
+ --button-size-icon-s: var(--global-size-icon-s);
101
102
  --button-size-icon-m: var(--global-size-icon-m);
102
103
  --button-size-video-s: var(--global-size-macro-m);
103
104
  --button-size-video-m: var(--global-size-macro-xxl);
@@ -132,9 +133,12 @@
132
133
  --button-space-primary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
133
134
  --button-space-primary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons */
134
135
  --button-space-primary-y-l: calc(var(--global-space-micro-xl) - 0.5); /* Top and bottom padding on Large buttons */
135
- --button-space-primary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size primary buttons */
136
- --button-space-primary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size primary buttons */
137
- --button-space-primary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size primary buttons */
136
+ --button-space-primary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size primary buttons */
137
+ --button-space-primary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size primary buttons */
138
+ --button-space-primary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size primary buttons */
139
+ --button-space-primary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size primary buttons */
140
+ --button-space-primary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size primary buttons */
141
+ --button-space-primary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size primary buttons */
138
142
  --button-space-secondary-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS table buttons */
139
143
  --button-space-secondary-x-s: var(--global-space-micro-xxl); /* Left and right padding on small buttons */
140
144
  --button-space-secondary-x-m: var(--global-space-macro-xs); /* Left and right padding on medium buttons */
@@ -143,13 +147,18 @@
143
147
  --button-space-secondary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
144
148
  --button-space-secondary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons */
145
149
  --button-space-secondary-y-l: calc(var(--global-space-micro-xl) - 0.5); /* Top and bottom padding on Large buttons */
150
+ --button-space-secondary-xg-xs: var(--global-space-micro-s); /* Item spacing inside XS buttons */
146
151
  --button-space-secondary-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
147
152
  --button-space-secondary-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
148
153
  --button-space-secondary-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
149
- --button-space-secondary-xg-xs: var(--global-space-micro-s); /* Item spacing inside XS buttons */
150
- --button-space-secondary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size secondary buttons */
151
- --button-space-secondary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size secondary buttons */
152
- --button-space-secondary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size secondary buttons */
154
+ --button-space-secondary-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size secondary buttons */
155
+ --button-space-secondary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size secondary buttons */
156
+ --button-space-secondary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size secondary buttons */
157
+ --button-space-secondary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size secondary buttons */
158
+ --button-space-secondary-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size secondary buttons */
159
+ --button-space-secondary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size secondary buttons */
160
+ --button-space-secondary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size secondary buttons */
161
+ --button-space-secondary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size secondary buttons */
153
162
  --button-space-tertiary-y-xs: calc((var(--global-space-macro-xxxs) / 4) - 0.5); /* top and bottom padding on XS table buttons */
154
163
  --button-space-tertiary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
155
164
  --button-space-tertiary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons */
@@ -162,9 +171,14 @@
162
171
  --button-space-tertiary-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
163
172
  --button-space-tertiary-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
164
173
  --button-space-tertiary-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
165
- --button-space-tertiary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size tertiary buttons */
166
- --button-space-tertiary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size tertiary buttons */
167
- --button-space-tertiary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size tertiary buttons */
174
+ --button-space-tertiary-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size tertiary buttons */
175
+ --button-space-tertiary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size tertiary buttons */
176
+ --button-space-tertiary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size tertiary buttons */
177
+ --button-space-tertiary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size tertiary buttons */
178
+ --button-space-tertiary-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size tertiary buttons */
179
+ --button-space-tertiary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size tertiary buttons */
180
+ --button-space-tertiary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size tertiary buttons */
181
+ --button-space-tertiary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size tertiary buttons */
168
182
  --button-space-subtle-y-xs: calc((var(--global-space-macro-xxxs) / 4) - 0.5); /* top and bottom padding on XS table buttons */
169
183
  --button-space-subtle-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
170
184
  --button-space-subtle-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons */
@@ -177,9 +191,14 @@
177
191
  --button-space-subtle-xg-s: var(--global-space-micro-s); /* Item spacing inside buttons */
178
192
  --button-space-subtle-xg-m: var(--global-space-micro-s); /* Item spacing inside buttons */
179
193
  --button-space-subtle-xg-l: var(--global-space-micro-s); /* Item spacing inside buttons */
180
- --button-space-subtle-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size subtle buttons */
181
- --button-space-subtle-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size subtle buttons */
182
- --button-space-subtle-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size subtle buttons */
194
+ --button-space-subtle-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size subtle buttons */
195
+ --button-space-subtle-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size subtle buttons */
196
+ --button-space-subtle-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size subtle buttons */
197
+ --button-space-subtle-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size subtle buttons */
198
+ --button-space-subtle-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size subtle buttons */
199
+ --button-space-subtle-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size subtle buttons */
200
+ --button-space-subtle-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size subtle buttons */
201
+ --button-space-subtle-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size subtle buttons */
183
202
  --button-space-toggle-button-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS asset used within S toggle group */
184
203
  --button-space-toggle-button-x-s: var(--global-space-macro-xxs); /* Left and right padding on S toggle buttons */
185
204
  --button-space-toggle-button-x-m: var(--global-space-macro-xs); /* Left and right padding on medium toggle buttons */
package/css/frozenproduct/large/components/form.css CHANGED
@@ -3,6 +3,9 @@
3
3
  */
4
4
 
5
5
  :root {
6
+ --form-space-datepicker-pr-s: 0; /* right padding on small date picker input */
7
+ --form-space-datepicker-pr-m: 0; /* right padding on medium date picker input */
8
+ --form-space-datepicker-pr-l: 0; /* right padding on large date picker input */
6
9
  --form-color-switch-border-active: transparent;
7
10
  --form-color-switch-border-activedisabled: transparent;
8
11
  --form-radius-none: var(--global-radius-none); /* Text editor (internal corners) */
@@ -55,9 +58,6 @@
55
58
  --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
56
59
  --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
57
60
  --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
58
- --form-space-datepicker-pr-s: var(--global-space-micro-xs); /* right padding on small date picker input */
59
- --form-space-datepicker-pr-m: var(--global-space-micro-m); /* right padding on medium date picker input */
60
- --form-space-datepicker-pr-l: var(--global-space-micro-xl); /* right padding on large date picker input */
61
61
  --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
62
62
  --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
63
63
  --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
@@ -88,6 +88,9 @@
88
88
  --form-space-dropdown-pill-xg-s: var(--global-space-micro-s); /* space between pills inside pill wrapper */
89
89
  --form-space-dropdown-pill-xg-m: var(--global-space-micro-s); /* space between pills inside pill wrapper */
90
90
  --form-space-dropdown-pill-xg-l: var(--global-space-micro-s); /* space between pills inside pill wrapper */
91
+ --form-space-dropdown-trigger-subtle-s: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
92
+ --form-space-dropdown-trigger-subtle-m: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
93
+ --form-space-dropdown-trigger-subtle-l: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
91
94
  --form-space-fileinput-status-xl-m: var(--global-space-macro-ml); /* Left padding in File input (no-thumbnail variant), status text. */
92
95
  --form-space-fileinput-status-y-m: var(--global-space-micro-s); /* Vertical padding in status text. */
93
96
  --form-space-fileinput-thumbnail-m: var(--global-space-micro-s); /* All padding in File input (thumbnail container). */
package/css/frozenproduct/large/global.css CHANGED
@@ -169,8 +169,8 @@
169
169
  --global-typography-adaptive-component-placeholdertext-xl: 500 40px/1.5 Sage UI;
170
170
  --global-typography-adaptive-component-placeholdertext-xxl: 500 52px/1.5 Sage UI;
171
171
  --global-typography-adaptive-component-notification-m: 500 12px/1 Sage UI; /* used for badge text - notifications on buttons and in global nav */
172
- --global-font-size-adaptive-step-2: 11px;
173
- --global-font-size-adaptive-step-1: 12px;
172
+ --global-font-size-adaptive-step-minus2: 11px;
173
+ --global-font-size-adaptive-step-minus1: 12px;
174
174
  --global-font-size-adaptive-step0: 14px;
175
175
  --global-font-size-adaptive-step1: 16px;
176
176
  --global-font-size-adaptive-step2: 18px;
@@ -183,8 +183,9 @@
183
183
  --global-font-size-adaptive-step9: 46px;
184
184
  --global-font-size-adaptive-step10: 52px;
185
185
  --global-font-families-sage-icons: sage-icons;
186
- --global-font-families-sage-headline: Sage Headline; /* Used in only in marketing contexts for some headings. */
187
- --global-font-families-sage-ui: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
188
- --global-font-families-sage-text: Sage Text; /* Used for Headings in product and in marketing contexts. Marketing also use it for their body copy. */
186
+ --global-font-families-heading: Sage UI;
187
+ --global-font-families-subheading: Sage UI;
188
+ --global-font-families-body: Sage UI;
189
+ --global-font-families-component: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
189
190
  --global-font-families-other: Open Sans; /* Fallback for when Sage fonts cannot load. */
190
191
  }
package/css/frozenproduct/small/components/button.css CHANGED
@@ -98,6 +98,7 @@
98
98
  --button-size-toggle-s: var(--global-size-macro-s); /* min-height on S single toggle, and on button within M toggle group */
99
99
  --button-size-toggle-m: var(--global-size-macro-m); /* min-height on M single toggle, and on button within L toggle group */
100
100
  --button-size-toggle-l: var(--global-size-macro-l); /* min-height on L single toggle */
101
+ --button-size-icon-s: var(--global-size-icon-s);
101
102
  --button-size-icon-m: var(--global-size-icon-m);
102
103
  --button-size-video-s: var(--global-size-macro-m);
103
104
  --button-size-video-m: var(--global-size-macro-xxl);
@@ -132,9 +133,12 @@
132
133
  --button-space-primary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
133
134
  --button-space-primary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons */
134
135
  --button-space-primary-y-l: calc(var(--global-space-micro-xl) - 0.5); /* Top and bottom padding on Large buttons */
135
- --button-space-primary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size primary buttons */
136
- --button-space-primary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size primary buttons */
137
- --button-space-primary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size primary buttons */
136
+ --button-space-primary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size primary buttons */
137
+ --button-space-primary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size primary buttons */
138
+ --button-space-primary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size primary buttons */
139
+ --button-space-primary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size primary buttons */
140
+ --button-space-primary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size primary buttons */
141
+ --button-space-primary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size primary buttons */
138
142
  --button-space-secondary-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS table buttons */
139
143
  --button-space-secondary-x-s: var(--global-space-micro-xxl); /* Left and right padding on small buttons */
140
144
  --button-space-secondary-x-m: var(--global-space-macro-xs); /* Left and right padding on medium buttons */
@@ -143,13 +147,18 @@
143
147
  --button-space-secondary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
144
148
  --button-space-secondary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons */
145
149
  --button-space-secondary-y-l: calc(var(--global-space-micro-xl) - 0.5); /* Top and bottom padding on Large buttons */
150
+ --button-space-secondary-xg-xs: var(--global-space-micro-s); /* Item spacing inside XS buttons */
146
151
  --button-space-secondary-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
147
152
  --button-space-secondary-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
148
153
  --button-space-secondary-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
149
- --button-space-secondary-xg-xs: var(--global-space-micro-s); /* Item spacing inside XS buttons */
150
- --button-space-secondary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size secondary buttons */
151
- --button-space-secondary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size secondary buttons */
152
- --button-space-secondary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size secondary buttons */
154
+ --button-space-secondary-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size secondary buttons */
155
+ --button-space-secondary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size secondary buttons */
156
+ --button-space-secondary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size secondary buttons */
157
+ --button-space-secondary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size secondary buttons */
158
+ --button-space-secondary-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size secondary buttons */
159
+ --button-space-secondary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size secondary buttons */
160
+ --button-space-secondary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size secondary buttons */
161
+ --button-space-secondary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size secondary buttons */
153
162
  --button-space-tertiary-y-xs: calc((var(--global-space-macro-xxxs) / 4) - 0.5); /* top and bottom padding on XS table buttons */
154
163
  --button-space-tertiary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
155
164
  --button-space-tertiary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons */
@@ -162,9 +171,14 @@
162
171
  --button-space-tertiary-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
163
172
  --button-space-tertiary-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
164
173
  --button-space-tertiary-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
165
- --button-space-tertiary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size tertiary buttons */
166
- --button-space-tertiary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size tertiary buttons */
167
- --button-space-tertiary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size tertiary buttons */
174
+ --button-space-tertiary-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size tertiary buttons */
175
+ --button-space-tertiary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size tertiary buttons */
176
+ --button-space-tertiary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size tertiary buttons */
177
+ --button-space-tertiary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size tertiary buttons */
178
+ --button-space-tertiary-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size tertiary buttons */
179
+ --button-space-tertiary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size tertiary buttons */
180
+ --button-space-tertiary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size tertiary buttons */
181
+ --button-space-tertiary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size tertiary buttons */
168
182
  --button-space-subtle-y-xs: calc((var(--global-space-macro-xxxs) / 4) - 0.5); /* top and bottom padding on XS table buttons */
169
183
  --button-space-subtle-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
170
184
  --button-space-subtle-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons */
@@ -177,9 +191,14 @@
177
191
  --button-space-subtle-xg-s: var(--global-space-micro-s); /* Item spacing inside buttons */
178
192
  --button-space-subtle-xg-m: var(--global-space-micro-s); /* Item spacing inside buttons */
179
193
  --button-space-subtle-xg-l: var(--global-space-micro-s); /* Item spacing inside buttons */
180
- --button-space-subtle-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size subtle buttons */
181
- --button-space-subtle-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size subtle buttons */
182
- --button-space-subtle-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size subtle buttons */
194
+ --button-space-subtle-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size subtle buttons */
195
+ --button-space-subtle-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size subtle buttons */
196
+ --button-space-subtle-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size subtle buttons */
197
+ --button-space-subtle-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size subtle buttons */
198
+ --button-space-subtle-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size subtle buttons */
199
+ --button-space-subtle-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size subtle buttons */
200
+ --button-space-subtle-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size subtle buttons */
201
+ --button-space-subtle-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size subtle buttons */
183
202
  --button-space-toggle-button-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS asset used within S toggle group */
184
203
  --button-space-toggle-button-x-s: var(--global-space-macro-xxs); /* Left and right padding on S toggle buttons */
185
204
  --button-space-toggle-button-x-m: var(--global-space-macro-xs); /* Left and right padding on medium toggle buttons */
package/css/frozenproduct/small/components/form.css CHANGED
@@ -3,6 +3,9 @@
3
3
  */
4
4
 
5
5
  :root {
6
+ --form-space-datepicker-pr-s: 0; /* right padding on small date picker input */
7
+ --form-space-datepicker-pr-m: 0; /* right padding on medium date picker input */
8
+ --form-space-datepicker-pr-l: 0; /* right padding on large date picker input */
6
9
  --form-color-switch-border-active: transparent;
7
10
  --form-color-switch-border-activedisabled: transparent;
8
11
  --form-radius-none: var(--global-radius-none); /* Text editor (internal corners) */
@@ -55,9 +58,6 @@
55
58
  --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
56
59
  --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
57
60
  --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
58
- --form-space-datepicker-pr-s: var(--global-space-micro-xs); /* right padding on small date picker input */
59
- --form-space-datepicker-pr-m: var(--global-space-micro-m); /* right padding on medium date picker input */
60
- --form-space-datepicker-pr-l: var(--global-space-micro-xl); /* right padding on large date picker input */
61
61
  --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
62
62
  --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
63
63
  --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
@@ -88,6 +88,9 @@
88
88
  --form-space-dropdown-pill-xg-s: var(--global-space-micro-s); /* space between pills inside pill wrapper */
89
89
  --form-space-dropdown-pill-xg-m: var(--global-space-micro-s); /* space between pills inside pill wrapper */
90
90
  --form-space-dropdown-pill-xg-l: var(--global-space-micro-s); /* space between pills inside pill wrapper */
91
+ --form-space-dropdown-trigger-subtle-s: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
92
+ --form-space-dropdown-trigger-subtle-m: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
93
+ --form-space-dropdown-trigger-subtle-l: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
91
94
  --form-space-fileinput-status-xl-m: var(--global-space-macro-ml); /* Left padding in File input (no-thumbnail variant), status text. */
92
95
  --form-space-fileinput-status-y-m: var(--global-space-micro-s); /* Vertical padding in status text. */
93
96
  --form-space-fileinput-thumbnail-m: var(--global-space-micro-s); /* All padding in File input (thumbnail container). */
package/css/frozenproduct/small/global.css CHANGED
@@ -169,8 +169,8 @@
169
169
  --global-typography-adaptive-component-placeholdertext-xl: 500 30px/1.5 Sage UI;
170
170
  --global-typography-adaptive-component-placeholdertext-xxl: 500 36px/1.5 Sage UI;
171
171
  --global-typography-adaptive-component-notification-m: 500 13px/1 Sage UI; /* used for badge text - notifications on buttons and in global nav */
172
- --global-font-size-adaptive-step-2: 12px;
173
- --global-font-size-adaptive-step-1: 13px;
172
+ --global-font-size-adaptive-step-minus2: 12px;
173
+ --global-font-size-adaptive-step-minus1: 13px;
174
174
  --global-font-size-adaptive-step0: 14px;
175
175
  --global-font-size-adaptive-step1: 16px;
176
176
  --global-font-size-adaptive-step2: 17px;
@@ -183,8 +183,9 @@
183
183
  --global-font-size-adaptive-step9: 33px;
184
184
  --global-font-size-adaptive-step10: 36px;
185
185
  --global-font-families-sage-icons: sage-icons;
186
- --global-font-families-sage-headline: Sage Headline; /* Used in only in marketing contexts for some headings. */
187
- --global-font-families-sage-ui: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
188
- --global-font-families-sage-text: Sage Text; /* Used for Headings in product and in marketing contexts. Marketing also use it for their body copy. */
186
+ --global-font-families-heading: Sage UI;
187
+ --global-font-families-subheading: Sage UI;
188
+ --global-font-families-body: Sage UI;
189
+ --global-font-families-component: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
189
190
  --global-font-families-other: Open Sans; /* Fallback for when Sage fonts cannot load. */
190
191
  }
package/css/marketing/all.css CHANGED
@@ -133,8 +133,8 @@
133
133
  --global-typography-component-placeholdertext-xl: 500 clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)/1.5 Sage UI;
134
134
  --global-typography-component-placeholdertext-xxl: 500 clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)/1.5 Sage UI;
135
135
  --global-typography-component-notification-m: 500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1 Sage UI; /* used for badge text - notifications on buttons and in global nav */
136
- --global-font-size-adaptive-step-2: 12px;
137
- --global-font-size-adaptive-step-1: 13px;
136
+ --global-font-size-adaptive-step-minus2: 12px;
137
+ --global-font-size-adaptive-step-minus1: 13px;
138
138
  --global-font-size-adaptive-step0: 14px;
139
139
  --global-font-size-adaptive-step1: 16px;
140
140
  --global-font-size-adaptive-step2: 17px;
@@ -147,9 +147,10 @@
147
147
  --global-font-size-adaptive-step9: 33px;
148
148
  --global-font-size-adaptive-step10: 36px;
149
149
  --global-font-families-sage-icons: sage-icons;
150
- --global-font-families-sage-headline: Sage Headline; /* Used in only in marketing contexts for some headings. */
151
- --global-font-families-sage-ui: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
152
- --global-font-families-sage-text: Sage Text; /* Used for Headings in product and in marketing contexts. Marketing also use it for their body copy. */
150
+ --global-font-families-heading: Sage UI;
151
+ --global-font-families-subheading: Sage UI;
152
+ --global-font-families-body: Sage UI;
153
+ --global-font-families-component: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
153
154
  --global-font-families-other: Open Sans; /* Fallback for when Sage fonts cannot load. */
154
155
 
155
156
  /* Light mode tokens */
@@ -881,6 +882,7 @@
881
882
  --button-size-toggle-s: var(--global-size-macro-s); /* min-height on S single toggle, and on button within M toggle group */
882
883
  --button-size-toggle-m: var(--global-size-macro-m); /* min-height on M single toggle, and on button within L toggle group */
883
884
  --button-size-toggle-l: var(--global-size-macro-l); /* min-height on L single toggle */
885
+ --button-size-icon-s: var(--global-size-icon-s);
884
886
  --button-size-icon-m: var(--global-size-icon-m);
885
887
  --button-size-video-s: var(--global-size-macro-m);
886
888
  --button-size-video-m: var(--global-size-macro-xxl);
@@ -915,9 +917,12 @@
915
917
  --button-space-primary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
916
918
  --button-space-primary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons */
917
919
  --button-space-primary-y-l: calc(var(--global-space-micro-xl) - 0.5); /* Top and bottom padding on Large buttons */
918
- --button-space-primary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size primary buttons */
919
- --button-space-primary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size primary buttons */
920
- --button-space-primary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size primary buttons */
920
+ --button-space-primary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size primary buttons */
921
+ --button-space-primary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size primary buttons */
922
+ --button-space-primary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size primary buttons */
923
+ --button-space-primary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size primary buttons */
924
+ --button-space-primary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size primary buttons */
925
+ --button-space-primary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size primary buttons */
921
926
  --button-space-secondary-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS table buttons */
922
927
  --button-space-secondary-x-s: var(--global-space-micro-xxl); /* Left and right padding on small buttons */
923
928
  --button-space-secondary-x-m: var(--global-space-macro-xs); /* Left and right padding on medium buttons */
@@ -926,13 +931,18 @@
926
931
  --button-space-secondary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
927
932
  --button-space-secondary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons */
928
933
  --button-space-secondary-y-l: calc(var(--global-space-micro-xl) - 0.5); /* Top and bottom padding on Large buttons */
934
+ --button-space-secondary-xg-xs: var(--global-space-micro-s); /* Item spacing inside XS buttons */
929
935
  --button-space-secondary-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
930
936
  --button-space-secondary-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
931
937
  --button-space-secondary-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
932
- --button-space-secondary-xg-xs: var(--global-space-micro-s); /* Item spacing inside XS buttons */
933
- --button-space-secondary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size secondary buttons */
934
- --button-space-secondary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size secondary buttons */
935
- --button-space-secondary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size secondary buttons */
938
+ --button-space-secondary-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size secondary buttons */
939
+ --button-space-secondary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size secondary buttons */
940
+ --button-space-secondary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size secondary buttons */
941
+ --button-space-secondary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size secondary buttons */
942
+ --button-space-secondary-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size secondary buttons */
943
+ --button-space-secondary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size secondary buttons */
944
+ --button-space-secondary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size secondary buttons */
945
+ --button-space-secondary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size secondary buttons */
936
946
  --button-space-tertiary-y-xs: calc((var(--global-space-macro-xxxs) / 4) - 0.5); /* top and bottom padding on XS table buttons */
937
947
  --button-space-tertiary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
938
948
  --button-space-tertiary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons */
@@ -945,9 +955,14 @@
945
955
  --button-space-tertiary-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
946
956
  --button-space-tertiary-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
947
957
  --button-space-tertiary-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
948
- --button-space-tertiary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size tertiary buttons */
949
- --button-space-tertiary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size tertiary buttons */
950
- --button-space-tertiary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size tertiary buttons */
958
+ --button-space-tertiary-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size tertiary buttons */
959
+ --button-space-tertiary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size tertiary buttons */
960
+ --button-space-tertiary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size tertiary buttons */
961
+ --button-space-tertiary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size tertiary buttons */
962
+ --button-space-tertiary-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size tertiary buttons */
963
+ --button-space-tertiary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size tertiary buttons */
964
+ --button-space-tertiary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size tertiary buttons */
965
+ --button-space-tertiary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size tertiary buttons */
951
966
  --button-space-subtle-y-xs: calc((var(--global-space-macro-xxxs) / 4) - 0.5); /* top and bottom padding on XS table buttons */
952
967
  --button-space-subtle-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
953
968
  --button-space-subtle-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons */
@@ -960,9 +975,14 @@
960
975
  --button-space-subtle-xg-s: var(--global-space-micro-s); /* Item spacing inside buttons */
961
976
  --button-space-subtle-xg-m: var(--global-space-micro-s); /* Item spacing inside buttons */
962
977
  --button-space-subtle-xg-l: var(--global-space-micro-s); /* Item spacing inside buttons */
963
- --button-space-subtle-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size subtle buttons */
964
- --button-space-subtle-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size subtle buttons */
965
- --button-space-subtle-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size subtle buttons */
978
+ --button-space-subtle-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size subtle buttons */
979
+ --button-space-subtle-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size subtle buttons */
980
+ --button-space-subtle-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size subtle buttons */
981
+ --button-space-subtle-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size subtle buttons */
982
+ --button-space-subtle-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size subtle buttons */
983
+ --button-space-subtle-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size subtle buttons */
984
+ --button-space-subtle-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size subtle buttons */
985
+ --button-space-subtle-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size subtle buttons */
966
986
  --button-space-toggle-button-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS asset used within S toggle group */
967
987
  --button-space-toggle-button-x-s: var(--global-space-macro-xxs); /* Left and right padding on S toggle buttons */
968
988
  --button-space-toggle-button-x-m: var(--global-space-macro-xs); /* Left and right padding on medium toggle buttons */
@@ -1428,6 +1448,9 @@
1428
1448
  --focus-borderwidth-outer: var(--global-borderwidth-l); /* Focus border (outer) */
1429
1449
 
1430
1450
  /* form component tokens */
1451
+ --form-space-datepicker-pr-s: 0; /* right padding on small date picker input */
1452
+ --form-space-datepicker-pr-m: 0; /* right padding on medium date picker input */
1453
+ --form-space-datepicker-pr-l: 0; /* right padding on large date picker input */
1431
1454
  --form-color-switch-border-active: transparent;
1432
1455
  --form-color-switch-border-activedisabled: transparent;
1433
1456
  --form-radius-none: var(--global-radius-none); /* Text editor (internal corners) */
@@ -1474,9 +1497,6 @@
1474
1497
  --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
1475
1498
  --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
1476
1499
  --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
1477
- --form-space-datepicker-pr-s: var(--global-space-micro-xs); /* right padding on small date picker input */
1478
- --form-space-datepicker-pr-m: var(--global-space-micro-m); /* right padding on medium date picker input */
1479
- --form-space-datepicker-pr-l: var(--global-space-micro-xl); /* right padding on large date picker input */
1480
1500
  --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
1481
1501
  --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
1482
1502
  --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
@@ -1507,6 +1527,9 @@
1507
1527
  --form-space-dropdown-pill-xg-s: var(--global-space-micro-s); /* space between pills inside pill wrapper */
1508
1528
  --form-space-dropdown-pill-xg-m: var(--global-space-micro-s); /* space between pills inside pill wrapper */
1509
1529
  --form-space-dropdown-pill-xg-l: var(--global-space-micro-s); /* space between pills inside pill wrapper */
1530
+ --form-space-dropdown-trigger-subtle-s: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
1531
+ --form-space-dropdown-trigger-subtle-m: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
1532
+ --form-space-dropdown-trigger-subtle-l: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
1510
1533
  --form-space-fileinput-status-xl-m: var(--global-space-macro-ml); /* Left padding in File input (no-thumbnail variant), status text. */
1511
1534
  --form-space-fileinput-status-y-m: var(--global-space-micro-s); /* Vertical padding in status text. */
1512
1535
  --form-space-fileinput-thumbnail-m: var(--global-space-micro-s); /* All padding in File input (thumbnail container). */
@@ -2542,8 +2565,8 @@
2542
2565
  --global-space-macro-l: 32px;
2543
2566
  --global-space-macro-xl: 40px;
2544
2567
  --global-space-macro-xxl: 48px;
2545
- --global-font-size-adaptive-step-2: 11px;
2546
- --global-font-size-adaptive-step-1: 12px;
2568
+ --global-font-size-adaptive-step-minus2: 11px;
2569
+ --global-font-size-adaptive-step-minus1: 12px;
2547
2570
  --global-font-size-adaptive-step2: 18px;
2548
2571
  --global-font-size-adaptive-step3: 21px;
2549
2572
  --global-font-size-adaptive-step4: 24px;