@sage/design-tokens 15.0.0 → 15.2.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 (240) hide show
  1. package/css/frozenproduct/all.css +7 -3
  2. package/css/frozenproduct/large/components/form.css +3 -0
  3. package/css/frozenproduct/large/components/nav.css +1 -1
  4. package/css/frozenproduct/large/dark.css +2 -1
  5. package/css/frozenproduct/large/light.css +2 -1
  6. package/css/frozenproduct/small/components/form.css +3 -0
  7. package/css/frozenproduct/small/components/nav.css +1 -1
  8. package/css/frozenproduct/small/dark.css +2 -1
  9. package/css/frozenproduct/small/light.css +2 -1
  10. package/css/product/all.css +7 -3
  11. package/css/product/large/components/form.css +3 -0
  12. package/css/product/large/components/nav.css +1 -1
  13. package/css/product/large/dark.css +2 -1
  14. package/css/product/large/light.css +2 -1
  15. package/css/product/small/components/form.css +3 -0
  16. package/css/product/small/components/nav.css +1 -1
  17. package/css/product/small/dark.css +2 -1
  18. package/css/product/small/light.css +2 -1
  19. package/ios/frozenproduct/large/dark/components/form.h +3 -0
  20. package/ios/frozenproduct/large/dark/components/nav.h +1 -1
  21. package/ios/frozenproduct/large/dark/mode.h +2 -1
  22. package/ios/frozenproduct/large/light/components/form.h +3 -0
  23. package/ios/frozenproduct/large/light/components/nav.h +1 -1
  24. package/ios/frozenproduct/large/light/mode.h +2 -1
  25. package/ios/frozenproduct/small/dark/components/form.h +3 -0
  26. package/ios/frozenproduct/small/dark/components/nav.h +1 -1
  27. package/ios/frozenproduct/small/dark/mode.h +2 -1
  28. package/ios/frozenproduct/small/light/components/form.h +3 -0
  29. package/ios/frozenproduct/small/light/components/nav.h +1 -1
  30. package/ios/frozenproduct/small/light/mode.h +2 -1
  31. package/ios/product/large/dark/components/form.h +3 -0
  32. package/ios/product/large/dark/components/nav.h +1 -1
  33. package/ios/product/large/dark/mode.h +2 -1
  34. package/ios/product/large/light/components/form.h +3 -0
  35. package/ios/product/large/light/components/nav.h +1 -1
  36. package/ios/product/large/light/mode.h +2 -1
  37. package/ios/product/small/dark/components/form.h +3 -0
  38. package/ios/product/small/dark/components/nav.h +1 -1
  39. package/ios/product/small/dark/mode.h +2 -1
  40. package/ios/product/small/light/components/form.h +3 -0
  41. package/ios/product/small/light/components/nav.h +1 -1
  42. package/ios/product/small/light/mode.h +2 -1
  43. package/js/common/frozenproduct/large/dark/components/form.d.ts +3 -0
  44. package/js/common/frozenproduct/large/dark/components/form.js +53 -0
  45. package/js/common/frozenproduct/large/dark/components/nav.js +2 -2
  46. package/js/common/frozenproduct/large/dark/mode.d.ts +1 -0
  47. package/js/common/frozenproduct/large/dark/mode.js +42 -2
  48. package/js/common/frozenproduct/large/light/components/form.d.ts +3 -0
  49. package/js/common/frozenproduct/large/light/components/form.js +53 -0
  50. package/js/common/frozenproduct/large/light/components/nav.js +2 -2
  51. package/js/common/frozenproduct/large/light/mode.d.ts +1 -0
  52. package/js/common/frozenproduct/large/light/mode.js +42 -2
  53. package/js/common/frozenproduct/small/dark/components/form.d.ts +3 -0
  54. package/js/common/frozenproduct/small/dark/components/form.js +53 -0
  55. package/js/common/frozenproduct/small/dark/components/nav.js +2 -2
  56. package/js/common/frozenproduct/small/dark/mode.d.ts +1 -0
  57. package/js/common/frozenproduct/small/dark/mode.js +42 -2
  58. package/js/common/frozenproduct/small/light/components/form.d.ts +3 -0
  59. package/js/common/frozenproduct/small/light/components/form.js +53 -0
  60. package/js/common/frozenproduct/small/light/components/nav.js +2 -2
  61. package/js/common/frozenproduct/small/light/mode.d.ts +1 -0
  62. package/js/common/frozenproduct/small/light/mode.js +42 -2
  63. package/js/common/product/large/dark/components/form.d.ts +3 -0
  64. package/js/common/product/large/dark/components/form.js +53 -0
  65. package/js/common/product/large/dark/components/nav.js +2 -2
  66. package/js/common/product/large/dark/mode.d.ts +1 -0
  67. package/js/common/product/large/dark/mode.js +42 -2
  68. package/js/common/product/large/light/components/form.d.ts +3 -0
  69. package/js/common/product/large/light/components/form.js +53 -0
  70. package/js/common/product/large/light/components/nav.js +2 -2
  71. package/js/common/product/large/light/mode.d.ts +1 -0
  72. package/js/common/product/large/light/mode.js +42 -2
  73. package/js/common/product/small/dark/components/form.d.ts +3 -0
  74. package/js/common/product/small/dark/components/form.js +53 -0
  75. package/js/common/product/small/dark/components/nav.js +2 -2
  76. package/js/common/product/small/dark/mode.d.ts +1 -0
  77. package/js/common/product/small/dark/mode.js +42 -2
  78. package/js/common/product/small/light/components/form.d.ts +3 -0
  79. package/js/common/product/small/light/components/form.js +53 -0
  80. package/js/common/product/small/light/components/nav.js +2 -2
  81. package/js/common/product/small/light/mode.d.ts +1 -0
  82. package/js/common/product/small/light/mode.js +42 -2
  83. package/js/es6/frozenproduct/large/dark/components/form.d.ts +15 -0
  84. package/js/es6/frozenproduct/large/dark/components/form.js +15 -0
  85. package/js/es6/frozenproduct/large/dark/components/nav.js +1 -1
  86. package/js/es6/frozenproduct/large/dark/mode.d.ts +1 -0
  87. package/js/es6/frozenproduct/large/dark/mode.js +2 -1
  88. package/js/es6/frozenproduct/large/light/components/form.d.ts +15 -0
  89. package/js/es6/frozenproduct/large/light/components/form.js +15 -0
  90. package/js/es6/frozenproduct/large/light/components/nav.js +1 -1
  91. package/js/es6/frozenproduct/large/light/mode.d.ts +1 -0
  92. package/js/es6/frozenproduct/large/light/mode.js +2 -1
  93. package/js/es6/frozenproduct/small/dark/components/form.d.ts +15 -0
  94. package/js/es6/frozenproduct/small/dark/components/form.js +15 -0
  95. package/js/es6/frozenproduct/small/dark/components/nav.js +1 -1
  96. package/js/es6/frozenproduct/small/dark/mode.d.ts +1 -0
  97. package/js/es6/frozenproduct/small/dark/mode.js +2 -1
  98. package/js/es6/frozenproduct/small/light/components/form.d.ts +15 -0
  99. package/js/es6/frozenproduct/small/light/components/form.js +15 -0
  100. package/js/es6/frozenproduct/small/light/components/nav.js +1 -1
  101. package/js/es6/frozenproduct/small/light/mode.d.ts +1 -0
  102. package/js/es6/frozenproduct/small/light/mode.js +2 -1
  103. package/js/es6/product/large/dark/components/form.d.ts +15 -0
  104. package/js/es6/product/large/dark/components/form.js +15 -0
  105. package/js/es6/product/large/dark/components/nav.js +1 -1
  106. package/js/es6/product/large/dark/mode.d.ts +1 -0
  107. package/js/es6/product/large/dark/mode.js +2 -1
  108. package/js/es6/product/large/light/components/form.d.ts +15 -0
  109. package/js/es6/product/large/light/components/form.js +15 -0
  110. package/js/es6/product/large/light/components/nav.js +1 -1
  111. package/js/es6/product/large/light/mode.d.ts +1 -0
  112. package/js/es6/product/large/light/mode.js +2 -1
  113. package/js/es6/product/small/dark/components/form.d.ts +15 -0
  114. package/js/es6/product/small/dark/components/form.js +15 -0
  115. package/js/es6/product/small/dark/components/nav.js +1 -1
  116. package/js/es6/product/small/dark/mode.d.ts +1 -0
  117. package/js/es6/product/small/dark/mode.js +2 -1
  118. package/js/es6/product/small/light/components/form.d.ts +15 -0
  119. package/js/es6/product/small/light/components/form.js +15 -0
  120. package/js/es6/product/small/light/components/nav.js +1 -1
  121. package/js/es6/product/small/light/mode.d.ts +1 -0
  122. package/js/es6/product/small/light/mode.js +2 -1
  123. package/js/umd/frozenproduct/large/dark/components/form.js +53 -0
  124. package/js/umd/frozenproduct/large/dark/components/nav.js +2 -2
  125. package/js/umd/frozenproduct/large/dark/mode.js +42 -2
  126. package/js/umd/frozenproduct/large/light/components/form.js +53 -0
  127. package/js/umd/frozenproduct/large/light/components/nav.js +2 -2
  128. package/js/umd/frozenproduct/large/light/mode.js +42 -2
  129. package/js/umd/frozenproduct/small/dark/components/form.js +53 -0
  130. package/js/umd/frozenproduct/small/dark/components/nav.js +2 -2
  131. package/js/umd/frozenproduct/small/dark/mode.js +42 -2
  132. package/js/umd/frozenproduct/small/light/components/form.js +53 -0
  133. package/js/umd/frozenproduct/small/light/components/nav.js +2 -2
  134. package/js/umd/frozenproduct/small/light/mode.js +42 -2
  135. package/js/umd/product/large/dark/components/form.js +53 -0
  136. package/js/umd/product/large/dark/components/nav.js +2 -2
  137. package/js/umd/product/large/dark/mode.js +42 -2
  138. package/js/umd/product/large/light/components/form.js +53 -0
  139. package/js/umd/product/large/light/components/nav.js +2 -2
  140. package/js/umd/product/large/light/mode.js +42 -2
  141. package/js/umd/product/small/dark/components/form.js +53 -0
  142. package/js/umd/product/small/dark/components/nav.js +2 -2
  143. package/js/umd/product/small/dark/mode.js +42 -2
  144. package/js/umd/product/small/light/components/form.js +53 -0
  145. package/js/umd/product/small/light/components/nav.js +2 -2
  146. package/js/umd/product/small/light/mode.js +42 -2
  147. package/json/flat/frozenproduct/large/dark/components/form.json +3 -0
  148. package/json/flat/frozenproduct/large/dark/components/nav.json +1 -1
  149. package/json/flat/frozenproduct/large/dark/mode.json +2 -1
  150. package/json/flat/frozenproduct/large/light/components/form.json +3 -0
  151. package/json/flat/frozenproduct/large/light/components/nav.json +1 -1
  152. package/json/flat/frozenproduct/large/light/mode.json +2 -1
  153. package/json/flat/frozenproduct/small/dark/components/form.json +3 -0
  154. package/json/flat/frozenproduct/small/dark/components/nav.json +1 -1
  155. package/json/flat/frozenproduct/small/dark/mode.json +2 -1
  156. package/json/flat/frozenproduct/small/light/components/form.json +3 -0
  157. package/json/flat/frozenproduct/small/light/components/nav.json +1 -1
  158. package/json/flat/frozenproduct/small/light/mode.json +2 -1
  159. package/json/flat/product/large/dark/components/form.json +3 -0
  160. package/json/flat/product/large/dark/components/nav.json +1 -1
  161. package/json/flat/product/large/dark/mode.json +2 -1
  162. package/json/flat/product/large/light/components/form.json +3 -0
  163. package/json/flat/product/large/light/components/nav.json +1 -1
  164. package/json/flat/product/large/light/mode.json +2 -1
  165. package/json/flat/product/small/dark/components/form.json +3 -0
  166. package/json/flat/product/small/dark/components/nav.json +1 -1
  167. package/json/flat/product/small/dark/mode.json +2 -1
  168. package/json/flat/product/small/light/components/form.json +3 -0
  169. package/json/flat/product/small/light/components/nav.json +1 -1
  170. package/json/flat/product/small/light/mode.json +2 -1
  171. package/json/nested/frozenproduct/large/dark/components/form.json +16 -1
  172. package/json/nested/frozenproduct/large/dark/components/nav.json +1 -1
  173. package/json/nested/frozenproduct/large/dark/mode.json +2 -1
  174. package/json/nested/frozenproduct/large/light/components/form.json +16 -1
  175. package/json/nested/frozenproduct/large/light/components/nav.json +1 -1
  176. package/json/nested/frozenproduct/large/light/mode.json +2 -1
  177. package/json/nested/frozenproduct/small/dark/components/form.json +16 -1
  178. package/json/nested/frozenproduct/small/dark/components/nav.json +1 -1
  179. package/json/nested/frozenproduct/small/dark/mode.json +2 -1
  180. package/json/nested/frozenproduct/small/light/components/form.json +16 -1
  181. package/json/nested/frozenproduct/small/light/components/nav.json +1 -1
  182. package/json/nested/frozenproduct/small/light/mode.json +2 -1
  183. package/json/nested/product/large/dark/components/form.json +16 -1
  184. package/json/nested/product/large/dark/components/nav.json +1 -1
  185. package/json/nested/product/large/dark/mode.json +2 -1
  186. package/json/nested/product/large/light/components/form.json +16 -1
  187. package/json/nested/product/large/light/components/nav.json +1 -1
  188. package/json/nested/product/large/light/mode.json +2 -1
  189. package/json/nested/product/small/dark/components/form.json +16 -1
  190. package/json/nested/product/small/dark/components/nav.json +1 -1
  191. package/json/nested/product/small/dark/mode.json +2 -1
  192. package/json/nested/product/small/light/components/form.json +16 -1
  193. package/json/nested/product/small/light/components/nav.json +1 -1
  194. package/json/nested/product/small/light/mode.json +2 -1
  195. package/package.json +1 -1
  196. package/sage-design-tokens-15.2.0.tgz +0 -0
  197. package/scss/frozenproduct/large/components/form.scss +3 -0
  198. package/scss/frozenproduct/large/components/nav.scss +1 -1
  199. package/scss/frozenproduct/large/dark.scss +2 -1
  200. package/scss/frozenproduct/large/light.scss +2 -1
  201. package/scss/frozenproduct/small/components/button.scss +13 -13
  202. package/scss/frozenproduct/small/components/container.scss +10 -10
  203. package/scss/frozenproduct/small/components/form.scss +10 -7
  204. package/scss/frozenproduct/small/components/link.scss +2 -2
  205. package/scss/frozenproduct/small/components/nav.scss +6 -6
  206. package/scss/frozenproduct/small/components/page.scss +1 -1
  207. package/scss/frozenproduct/small/components/popover.scss +2 -2
  208. package/scss/frozenproduct/small/components/progress.scss +6 -6
  209. package/scss/frozenproduct/small/components/status.scss +3 -3
  210. package/scss/frozenproduct/small/components/tab.scss +7 -7
  211. package/scss/frozenproduct/small/components/table.scss +10 -10
  212. package/scss/frozenproduct/small/dark.scss +2 -1
  213. package/scss/frozenproduct/small/light.scss +2 -1
  214. package/scss/product/large/components/button.scss +13 -13
  215. package/scss/product/large/components/container.scss +10 -10
  216. package/scss/product/large/components/form.scss +10 -7
  217. package/scss/product/large/components/link.scss +2 -2
  218. package/scss/product/large/components/nav.scss +6 -6
  219. package/scss/product/large/components/page.scss +1 -1
  220. package/scss/product/large/components/popover.scss +2 -2
  221. package/scss/product/large/components/progress.scss +6 -6
  222. package/scss/product/large/components/status.scss +3 -3
  223. package/scss/product/large/components/tab.scss +7 -7
  224. package/scss/product/large/components/table.scss +10 -10
  225. package/scss/product/large/dark.scss +2 -1
  226. package/scss/product/large/light.scss +2 -1
  227. package/scss/product/small/components/button.scss +13 -13
  228. package/scss/product/small/components/container.scss +10 -10
  229. package/scss/product/small/components/form.scss +10 -7
  230. package/scss/product/small/components/link.scss +2 -2
  231. package/scss/product/small/components/nav.scss +6 -6
  232. package/scss/product/small/components/page.scss +1 -1
  233. package/scss/product/small/components/popover.scss +2 -2
  234. package/scss/product/small/components/progress.scss +6 -6
  235. package/scss/product/small/components/status.scss +3 -3
  236. package/scss/product/small/components/tab.scss +7 -7
  237. package/scss/product/small/components/table.scss +10 -10
  238. package/scss/product/small/dark.scss +2 -1
  239. package/scss/product/small/light.scss +2 -1
  240. package/sage-design-tokens-15.0.0.tgz +0 -0
@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt: string;
212
212
  export const formColorDropdownLabelDisabled: string;
213
213
  export const formColorDropdownLabelEnabled: string;
214
214
  export const formColorDropdownLabelHover: string;
215
+ export const formColorDropdownLabelSubtext: string;
215
216
  export const formColorLabelsetLabelRequired: string;
216
217
  export const formColorLabelsetLabelDefault: string;
217
218
  export const formColorLabelsetLabelAlt: string;
@@ -322,6 +323,13 @@ export const formTypographyAdaptiveLabelL: {
322
323
  fontSize: string;
323
324
  paragraphSpacing: string;
324
325
  };
326
+ export const formTypographyAdaptiveDefaultXs: {
327
+ fontFamily: string;
328
+ fontWeight: string;
329
+ lineHeight: number;
330
+ fontSize: string;
331
+ paragraphSpacing: string;
332
+ };
325
333
  export const formTypographyAdaptiveDefaultS: {
326
334
  fontFamily: string;
327
335
  fontWeight: string;
@@ -364,6 +372,13 @@ export const formTypographyResponsiveLabelL: {
364
372
  fontSize: string;
365
373
  paragraphSpacing: string;
366
374
  };
375
+ export const formTypographyResponsiveDefaultXs: {
376
+ fontFamily: string;
377
+ fontWeight: string;
378
+ lineHeight: number;
379
+ fontSize: string;
380
+ paragraphSpacing: string;
381
+ };
367
382
  export const formTypographyResponsiveDefaultS: {
368
383
  fontFamily: string;
369
384
  fontWeight: string;
@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt = "#ffffffe6";
212
212
  export const formColorDropdownLabelDisabled = "#ffffff4d";
213
213
  export const formColorDropdownLabelEnabled = "#ffffffab";
214
214
  export const formColorDropdownLabelHover = "#FFFFFF";
215
+ export const formColorDropdownLabelSubtext = "#ffffff6b";
215
216
  export const formColorLabelsetLabelRequired = "#E13E53";
216
217
  export const formColorLabelsetLabelDefault = "#fffffff2";
217
218
  export const formColorLabelsetLabelAlt = "#ffffff8c";
@@ -332,6 +333,13 @@ export const formTypographyAdaptiveLabelL = {
332
333
  fontSize: "16px",
333
334
  paragraphSpacing: "0",
334
335
  };
336
+ export const formTypographyAdaptiveDefaultXs = {
337
+ fontFamily: "Sage UI",
338
+ fontWeight: "400",
339
+ lineHeight: 1.5,
340
+ fontSize: "13px",
341
+ paragraphSpacing: "0",
342
+ };
335
343
  export const formTypographyAdaptiveDefaultS = {
336
344
  fontFamily: "Sage UI",
337
345
  fontWeight: "400",
@@ -374,6 +382,13 @@ export const formTypographyResponsiveLabelL = {
374
382
  fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
375
383
  paragraphSpacing: "0",
376
384
  };
385
+ export const formTypographyResponsiveDefaultXs = {
386
+ fontFamily: "Sage UI",
387
+ fontWeight: "400",
388
+ lineHeight: 1.5,
389
+ fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
390
+ paragraphSpacing: "0",
391
+ };
377
392
  export const formTypographyResponsiveDefaultS = {
378
393
  fontFamily: "Sage UI",
379
394
  fontWeight: "400",
@@ -108,7 +108,7 @@ export const navSizeNavbarItemYM = 40;
108
108
  export const navSizeLeftnavParentMinheight = 48;
109
109
  export const navSizeLeftnavChildMinheight = 40;
110
110
  export const navSizeLeftnavGrandchildMinheight = 32;
111
- export const navSizeLeftnavParentContainerFixedWidth = "140";
111
+ export const navSizeLeftnavParentContainerFixedWidth = "146";
112
112
  export const navSizeLeftnavChildContainerFixedWidth = "250";
113
113
  export const navSizeModalParentitemMinheight = 40;
114
114
  export const navSizeModalChilditemMinheight = 32;
@@ -116,6 +116,7 @@ export const modesColorInteractiveMonochromeActiveAlt: string;
116
116
  export const modesColorInteractiveMonochromeDefault: string;
117
117
  export const modesColorInteractiveMonochromeDefaultAlt: string;
118
118
  export const modesColorInteractiveMonochromeDefaultAlt2: string;
119
+ export const modesColorInteractiveMonochromeDefaultAlt3: string;
119
120
  export const modesColorInteractiveMonochromeHoverAlt: string;
120
121
  export const modesColorInteractiveMonochromeHover: string;
121
122
  export const modesColorInteractiveMonochromeWithActive: string;
@@ -119,7 +119,8 @@ export const modesColorInteractiveMonochromeActive = "#FFFFFF";
119
119
  export const modesColorInteractiveMonochromeActiveAlt = "#ffffff26";
120
120
  export const modesColorInteractiveMonochromeDefault = "#ffffffe6";
121
121
  export const modesColorInteractiveMonochromeDefaultAlt = "#ffffffab";
122
- export const modesColorInteractiveMonochromeDefaultAlt2 = "#ffffff6b";
122
+ export const modesColorInteractiveMonochromeDefaultAlt2 = "#ffffff8c";
123
+ export const modesColorInteractiveMonochromeDefaultAlt3 = "#ffffff6b";
123
124
  export const modesColorInteractiveMonochromeHoverAlt = "#ffffff1a";
124
125
  export const modesColorInteractiveMonochromeHover = "#ffffff26";
125
126
  export const modesColorInteractiveMonochromeWithActive = "#000000";
@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt: string;
212
212
  export const formColorDropdownLabelDisabled: string;
213
213
  export const formColorDropdownLabelEnabled: string;
214
214
  export const formColorDropdownLabelHover: string;
215
+ export const formColorDropdownLabelSubtext: string;
215
216
  export const formColorLabelsetLabelRequired: string;
216
217
  export const formColorLabelsetLabelDefault: string;
217
218
  export const formColorLabelsetLabelAlt: string;
@@ -322,6 +323,13 @@ export const formTypographyAdaptiveLabelL: {
322
323
  fontSize: string;
323
324
  paragraphSpacing: string;
324
325
  };
326
+ export const formTypographyAdaptiveDefaultXs: {
327
+ fontFamily: string;
328
+ fontWeight: string;
329
+ lineHeight: number;
330
+ fontSize: string;
331
+ paragraphSpacing: string;
332
+ };
325
333
  export const formTypographyAdaptiveDefaultS: {
326
334
  fontFamily: string;
327
335
  fontWeight: string;
@@ -364,6 +372,13 @@ export const formTypographyResponsiveLabelL: {
364
372
  fontSize: string;
365
373
  paragraphSpacing: string;
366
374
  };
375
+ export const formTypographyResponsiveDefaultXs: {
376
+ fontFamily: string;
377
+ fontWeight: string;
378
+ lineHeight: number;
379
+ fontSize: string;
380
+ paragraphSpacing: string;
381
+ };
367
382
  export const formTypographyResponsiveDefaultS: {
368
383
  fontFamily: string;
369
384
  fontWeight: string;
@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt = "#000000e6";
212
212
  export const formColorDropdownLabelDisabled = "#0000006b";
213
213
  export const formColorDropdownLabelEnabled = "#000000ab";
214
214
  export const formColorDropdownLabelHover = "#000000";
215
+ export const formColorDropdownLabelSubtext = "#0000006b";
215
216
  export const formColorLabelsetLabelRequired = "#CD384B";
216
217
  export const formColorLabelsetLabelDefault = "#000000f2";
217
218
  export const formColorLabelsetLabelAlt = "#0000008c";
@@ -332,6 +333,13 @@ export const formTypographyAdaptiveLabelL = {
332
333
  fontSize: "16px",
333
334
  paragraphSpacing: "0",
334
335
  };
336
+ export const formTypographyAdaptiveDefaultXs = {
337
+ fontFamily: "Sage UI",
338
+ fontWeight: "400",
339
+ lineHeight: 1.5,
340
+ fontSize: "13px",
341
+ paragraphSpacing: "0",
342
+ };
335
343
  export const formTypographyAdaptiveDefaultS = {
336
344
  fontFamily: "Sage UI",
337
345
  fontWeight: "400",
@@ -374,6 +382,13 @@ export const formTypographyResponsiveLabelL = {
374
382
  fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
375
383
  paragraphSpacing: "0",
376
384
  };
385
+ export const formTypographyResponsiveDefaultXs = {
386
+ fontFamily: "Sage UI",
387
+ fontWeight: "400",
388
+ lineHeight: 1.5,
389
+ fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
390
+ paragraphSpacing: "0",
391
+ };
377
392
  export const formTypographyResponsiveDefaultS = {
378
393
  fontFamily: "Sage UI",
379
394
  fontWeight: "400",
@@ -108,7 +108,7 @@ export const navSizeNavbarItemYM = 40;
108
108
  export const navSizeLeftnavParentMinheight = 48;
109
109
  export const navSizeLeftnavChildMinheight = 40;
110
110
  export const navSizeLeftnavGrandchildMinheight = 32;
111
- export const navSizeLeftnavParentContainerFixedWidth = "140";
111
+ export const navSizeLeftnavParentContainerFixedWidth = "146";
112
112
  export const navSizeLeftnavChildContainerFixedWidth = "250";
113
113
  export const navSizeModalParentitemMinheight = 40;
114
114
  export const navSizeModalChilditemMinheight = 32;
@@ -116,6 +116,7 @@ export const modesColorInteractiveMonochromeActiveAlt: string;
116
116
  export const modesColorInteractiveMonochromeDefault: string;
117
117
  export const modesColorInteractiveMonochromeDefaultAlt: string;
118
118
  export const modesColorInteractiveMonochromeDefaultAlt2: string;
119
+ export const modesColorInteractiveMonochromeDefaultAlt3: string;
119
120
  export const modesColorInteractiveMonochromeHoverAlt: string;
120
121
  export const modesColorInteractiveMonochromeHover: string;
121
122
  export const modesColorInteractiveMonochromeWithActive: string;
@@ -119,7 +119,8 @@ export const modesColorInteractiveMonochromeActive = "#000000";
119
119
  export const modesColorInteractiveMonochromeActiveAlt = "#00000026";
120
120
  export const modesColorInteractiveMonochromeDefault = "#000000e6";
121
121
  export const modesColorInteractiveMonochromeDefaultAlt = "#000000ab";
122
- export const modesColorInteractiveMonochromeDefaultAlt2 = "#0000006b";
122
+ export const modesColorInteractiveMonochromeDefaultAlt2 = "#0000008c";
123
+ export const modesColorInteractiveMonochromeDefaultAlt3 = "#0000006b";
123
124
  export const modesColorInteractiveMonochromeHoverAlt = "#0000001a";
124
125
  export const modesColorInteractiveMonochromeHover = "#00000026";
125
126
  export const modesColorInteractiveMonochromeWithActive = "#FFFFFF";
@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt: string;
212
212
  export const formColorDropdownLabelDisabled: string;
213
213
  export const formColorDropdownLabelEnabled: string;
214
214
  export const formColorDropdownLabelHover: string;
215
+ export const formColorDropdownLabelSubtext: string;
215
216
  export const formColorLabelsetLabelRequired: string;
216
217
  export const formColorLabelsetLabelDefault: string;
217
218
  export const formColorLabelsetLabelAlt: string;
@@ -322,6 +323,13 @@ export const formTypographyAdaptiveLabelL: {
322
323
  fontSize: string;
323
324
  paragraphSpacing: string;
324
325
  };
326
+ export const formTypographyAdaptiveDefaultXs: {
327
+ fontFamily: string;
328
+ fontWeight: string;
329
+ lineHeight: number;
330
+ fontSize: string;
331
+ paragraphSpacing: string;
332
+ };
325
333
  export const formTypographyAdaptiveDefaultS: {
326
334
  fontFamily: string;
327
335
  fontWeight: string;
@@ -364,6 +372,13 @@ export const formTypographyResponsiveLabelL: {
364
372
  fontSize: string;
365
373
  paragraphSpacing: string;
366
374
  };
375
+ export const formTypographyResponsiveDefaultXs: {
376
+ fontFamily: string;
377
+ fontWeight: string;
378
+ lineHeight: number;
379
+ fontSize: string;
380
+ paragraphSpacing: string;
381
+ };
367
382
  export const formTypographyResponsiveDefaultS: {
368
383
  fontFamily: string;
369
384
  fontWeight: string;
@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt = "#ffffffe6";
212
212
  export const formColorDropdownLabelDisabled = "#ffffff4d";
213
213
  export const formColorDropdownLabelEnabled = "#ffffffab";
214
214
  export const formColorDropdownLabelHover = "#FFFFFF";
215
+ export const formColorDropdownLabelSubtext = "#ffffff6b";
215
216
  export const formColorLabelsetLabelRequired = "#E13E53";
216
217
  export const formColorLabelsetLabelDefault = "#fffffff2";
217
218
  export const formColorLabelsetLabelAlt = "#ffffff8c";
@@ -332,6 +333,13 @@ export const formTypographyAdaptiveLabelL = {
332
333
  fontSize: "16px",
333
334
  paragraphSpacing: "0",
334
335
  };
336
+ export const formTypographyAdaptiveDefaultXs = {
337
+ fontFamily: "Sage UI",
338
+ fontWeight: "400",
339
+ lineHeight: 1.5,
340
+ fontSize: "13px",
341
+ paragraphSpacing: "0",
342
+ };
335
343
  export const formTypographyAdaptiveDefaultS = {
336
344
  fontFamily: "Sage UI",
337
345
  fontWeight: "400",
@@ -374,6 +382,13 @@ export const formTypographyResponsiveLabelL = {
374
382
  fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
375
383
  paragraphSpacing: "0",
376
384
  };
385
+ export const formTypographyResponsiveDefaultXs = {
386
+ fontFamily: "Sage UI",
387
+ fontWeight: "400",
388
+ lineHeight: 1.5,
389
+ fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
390
+ paragraphSpacing: "0",
391
+ };
377
392
  export const formTypographyResponsiveDefaultS = {
378
393
  fontFamily: "Sage UI",
379
394
  fontWeight: "400",
@@ -108,7 +108,7 @@ export const navSizeNavbarItemYM = 40;
108
108
  export const navSizeLeftnavParentMinheight = 48;
109
109
  export const navSizeLeftnavChildMinheight = 40;
110
110
  export const navSizeLeftnavGrandchildMinheight = 32;
111
- export const navSizeLeftnavParentContainerFixedWidth = "140";
111
+ export const navSizeLeftnavParentContainerFixedWidth = "146";
112
112
  export const navSizeLeftnavChildContainerFixedWidth = "250";
113
113
  export const navSizeModalParentitemMinheight = 40;
114
114
  export const navSizeModalChilditemMinheight = 32;
@@ -116,6 +116,7 @@ export const modesColorInteractiveMonochromeActiveAlt: string;
116
116
  export const modesColorInteractiveMonochromeDefault: string;
117
117
  export const modesColorInteractiveMonochromeDefaultAlt: string;
118
118
  export const modesColorInteractiveMonochromeDefaultAlt2: string;
119
+ export const modesColorInteractiveMonochromeDefaultAlt3: string;
119
120
  export const modesColorInteractiveMonochromeHoverAlt: string;
120
121
  export const modesColorInteractiveMonochromeHover: string;
121
122
  export const modesColorInteractiveMonochromeWithActive: string;
@@ -119,7 +119,8 @@ export const modesColorInteractiveMonochromeActive = "#FFFFFF";
119
119
  export const modesColorInteractiveMonochromeActiveAlt = "#ffffff26";
120
120
  export const modesColorInteractiveMonochromeDefault = "#ffffffe6";
121
121
  export const modesColorInteractiveMonochromeDefaultAlt = "#ffffffab";
122
- export const modesColorInteractiveMonochromeDefaultAlt2 = "#ffffff6b";
122
+ export const modesColorInteractiveMonochromeDefaultAlt2 = "#ffffff8c";
123
+ export const modesColorInteractiveMonochromeDefaultAlt3 = "#ffffff6b";
123
124
  export const modesColorInteractiveMonochromeHoverAlt = "#ffffff1a";
124
125
  export const modesColorInteractiveMonochromeHover = "#ffffff26";
125
126
  export const modesColorInteractiveMonochromeWithActive = "#000000";
@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt: string;
212
212
  export const formColorDropdownLabelDisabled: string;
213
213
  export const formColorDropdownLabelEnabled: string;
214
214
  export const formColorDropdownLabelHover: string;
215
+ export const formColorDropdownLabelSubtext: string;
215
216
  export const formColorLabelsetLabelRequired: string;
216
217
  export const formColorLabelsetLabelDefault: string;
217
218
  export const formColorLabelsetLabelAlt: string;
@@ -322,6 +323,13 @@ export const formTypographyAdaptiveLabelL: {
322
323
  fontSize: string;
323
324
  paragraphSpacing: string;
324
325
  };
326
+ export const formTypographyAdaptiveDefaultXs: {
327
+ fontFamily: string;
328
+ fontWeight: string;
329
+ lineHeight: number;
330
+ fontSize: string;
331
+ paragraphSpacing: string;
332
+ };
325
333
  export const formTypographyAdaptiveDefaultS: {
326
334
  fontFamily: string;
327
335
  fontWeight: string;
@@ -364,6 +372,13 @@ export const formTypographyResponsiveLabelL: {
364
372
  fontSize: string;
365
373
  paragraphSpacing: string;
366
374
  };
375
+ export const formTypographyResponsiveDefaultXs: {
376
+ fontFamily: string;
377
+ fontWeight: string;
378
+ lineHeight: number;
379
+ fontSize: string;
380
+ paragraphSpacing: string;
381
+ };
367
382
  export const formTypographyResponsiveDefaultS: {
368
383
  fontFamily: string;
369
384
  fontWeight: string;
@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt = "#000000e6";
212
212
  export const formColorDropdownLabelDisabled = "#0000006b";
213
213
  export const formColorDropdownLabelEnabled = "#000000ab";
214
214
  export const formColorDropdownLabelHover = "#000000";
215
+ export const formColorDropdownLabelSubtext = "#0000006b";
215
216
  export const formColorLabelsetLabelRequired = "#CD384B";
216
217
  export const formColorLabelsetLabelDefault = "#000000f2";
217
218
  export const formColorLabelsetLabelAlt = "#0000008c";
@@ -332,6 +333,13 @@ export const formTypographyAdaptiveLabelL = {
332
333
  fontSize: "16px",
333
334
  paragraphSpacing: "0",
334
335
  };
336
+ export const formTypographyAdaptiveDefaultXs = {
337
+ fontFamily: "Sage UI",
338
+ fontWeight: "400",
339
+ lineHeight: 1.5,
340
+ fontSize: "13px",
341
+ paragraphSpacing: "0",
342
+ };
335
343
  export const formTypographyAdaptiveDefaultS = {
336
344
  fontFamily: "Sage UI",
337
345
  fontWeight: "400",
@@ -374,6 +382,13 @@ export const formTypographyResponsiveLabelL = {
374
382
  fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
375
383
  paragraphSpacing: "0",
376
384
  };
385
+ export const formTypographyResponsiveDefaultXs = {
386
+ fontFamily: "Sage UI",
387
+ fontWeight: "400",
388
+ lineHeight: 1.5,
389
+ fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
390
+ paragraphSpacing: "0",
391
+ };
377
392
  export const formTypographyResponsiveDefaultS = {
378
393
  fontFamily: "Sage UI",
379
394
  fontWeight: "400",
@@ -108,7 +108,7 @@ export const navSizeNavbarItemYM = 40;
108
108
  export const navSizeLeftnavParentMinheight = 48;
109
109
  export const navSizeLeftnavChildMinheight = 40;
110
110
  export const navSizeLeftnavGrandchildMinheight = 32;
111
- export const navSizeLeftnavParentContainerFixedWidth = "140";
111
+ export const navSizeLeftnavParentContainerFixedWidth = "146";
112
112
  export const navSizeLeftnavChildContainerFixedWidth = "250";
113
113
  export const navSizeModalParentitemMinheight = 40;
114
114
  export const navSizeModalChilditemMinheight = 32;
@@ -116,6 +116,7 @@ export const modesColorInteractiveMonochromeActiveAlt: string;
116
116
  export const modesColorInteractiveMonochromeDefault: string;
117
117
  export const modesColorInteractiveMonochromeDefaultAlt: string;
118
118
  export const modesColorInteractiveMonochromeDefaultAlt2: string;
119
+ export const modesColorInteractiveMonochromeDefaultAlt3: string;
119
120
  export const modesColorInteractiveMonochromeHoverAlt: string;
120
121
  export const modesColorInteractiveMonochromeHover: string;
121
122
  export const modesColorInteractiveMonochromeWithActive: string;
@@ -119,7 +119,8 @@ export const modesColorInteractiveMonochromeActive = "#000000";
119
119
  export const modesColorInteractiveMonochromeActiveAlt = "#00000026";
120
120
  export const modesColorInteractiveMonochromeDefault = "#000000e6";
121
121
  export const modesColorInteractiveMonochromeDefaultAlt = "#000000ab";
122
- export const modesColorInteractiveMonochromeDefaultAlt2 = "#0000006b";
122
+ export const modesColorInteractiveMonochromeDefaultAlt2 = "#0000008c";
123
+ export const modesColorInteractiveMonochromeDefaultAlt3 = "#0000006b";
123
124
  export const modesColorInteractiveMonochromeHoverAlt = "#0000001a";
124
125
  export const modesColorInteractiveMonochromeHover = "#00000026";
125
126
  export const modesColorInteractiveMonochromeWithActive = "#FFFFFF";
@@ -3485,6 +3485,21 @@
3485
3485
  attributes: {},
3486
3486
  path: ["form", "color", "dropdown", "label-hover"],
3487
3487
  },
3488
+ "label-subtext": {
3489
+ $type: "color",
3490
+ $value: "#ffffff6b",
3491
+ $description: "Option subtext.",
3492
+ filePath: "data/tokens/components/form.json",
3493
+ isSource: true,
3494
+ original: {
3495
+ $type: "color",
3496
+ $value: "{modes.color.interactive.monochrome.defaultAlt3}",
3497
+ $description: "Option subtext.",
3498
+ },
3499
+ name: "formColorDropdownLabelSubtext",
3500
+ attributes: {},
3501
+ path: ["form", "color", "dropdown", "label-subtext"],
3502
+ },
3488
3503
  },
3489
3504
  labelset: {
3490
3505
  "label-required": {
@@ -4742,6 +4757,25 @@
4742
4757
  },
4743
4758
  },
4744
4759
  default: {
4760
+ XS: {
4761
+ $type: "typography",
4762
+ $value: {
4763
+ fontFamily: "Sage UI",
4764
+ fontWeight: "400",
4765
+ lineHeight: 1.5,
4766
+ fontSize: "13px",
4767
+ paragraphSpacing: "0",
4768
+ },
4769
+ filePath: "data/tokens/components/form.json",
4770
+ isSource: true,
4771
+ original: {
4772
+ $type: "typography",
4773
+ $value: "{global.typography.adaptive.component.moderate.XS}",
4774
+ },
4775
+ name: "formTypographyAdaptiveDefaultXs",
4776
+ attributes: {},
4777
+ path: ["form", "typography", "adaptive", "default", "XS"],
4778
+ },
4745
4779
  S: {
4746
4780
  $type: "typography",
4747
4781
  $value: {
@@ -4862,6 +4896,25 @@
4862
4896
  },
4863
4897
  },
4864
4898
  default: {
4899
+ XS: {
4900
+ $type: "typography",
4901
+ $value: {
4902
+ fontFamily: "Sage UI",
4903
+ fontWeight: "400",
4904
+ lineHeight: 1.5,
4905
+ fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
4906
+ paragraphSpacing: "0",
4907
+ },
4908
+ filePath: "data/tokens/components/form.json",
4909
+ isSource: true,
4910
+ original: {
4911
+ $type: "typography",
4912
+ $value: "{global.typography.responsive.component.moderate.XS}",
4913
+ },
4914
+ name: "formTypographyResponsiveDefaultXs",
4915
+ attributes: {},
4916
+ path: ["form", "typography", "responsive", "default", "XS"],
4917
+ },
4865
4918
  S: {
4866
4919
  $type: "typography",
4867
4920
  $value: {
@@ -1124,13 +1124,13 @@
1124
1124
  parentContainer: {
1125
1125
  fixedWidth: {
1126
1126
  $type: "sizing",
1127
- $value: "140",
1127
+ $value: "146",
1128
1128
  $description: "fixed width of parent container",
1129
1129
  filePath: "data/tokens/components/nav.json",
1130
1130
  isSource: true,
1131
1131
  original: {
1132
1132
  $type: "sizing",
1133
- $value: "140",
1133
+ $value: "146",
1134
1134
  $description: "fixed width of parent container",
1135
1135
  },
1136
1136
  name: "navSizeLeftnavParentContainerFixedWidth",
@@ -2602,6 +2602,46 @@
2602
2602
  ],
2603
2603
  },
2604
2604
  defaultAlt2: {
2605
+ $extensions: {
2606
+ "studio.tokens": {
2607
+ modify: {
2608
+ type: "alpha",
2609
+ value: "0.55",
2610
+ space: "lch",
2611
+ format: "hex",
2612
+ },
2613
+ },
2614
+ },
2615
+ $type: "color",
2616
+ $value: "#ffffff8c",
2617
+ $description: "Dropdown option subtext.",
2618
+ filePath: "data/tokens/modes/dark.json",
2619
+ isSource: true,
2620
+ original: {
2621
+ $extensions: {
2622
+ "studio.tokens": {
2623
+ modify: {
2624
+ type: "alpha",
2625
+ value: "0.55",
2626
+ space: "lch",
2627
+ },
2628
+ },
2629
+ },
2630
+ $type: "color",
2631
+ $value: "{modes.color.interactive.monochrome.active}",
2632
+ $description: "Dropdown option subtext.",
2633
+ },
2634
+ name: "modesColorInteractiveMonochromeDefaultAlt2",
2635
+ attributes: {},
2636
+ path: [
2637
+ "modes",
2638
+ "color",
2639
+ "interactive",
2640
+ "monochrome",
2641
+ "defaultAlt2",
2642
+ ],
2643
+ },
2644
+ defaultAlt3: {
2605
2645
  $extensions: {
2606
2646
  "studio.tokens": {
2607
2647
  modify: {
@@ -2631,14 +2671,14 @@
2631
2671
  $value: "{modes.color.interactive.monochrome.active}",
2632
2672
  $description: "Tertiary border color",
2633
2673
  },
2634
- name: "modesColorInteractiveMonochromeDefaultAlt2",
2674
+ name: "modesColorInteractiveMonochromeDefaultAlt3",
2635
2675
  attributes: {},
2636
2676
  path: [
2637
2677
  "modes",
2638
2678
  "color",
2639
2679
  "interactive",
2640
2680
  "monochrome",
2641
- "defaultAlt2",
2681
+ "defaultAlt3",
2642
2682
  ],
2643
2683
  },
2644
2684
  hoverAlt: {
@@ -3485,6 +3485,21 @@
3485
3485
  attributes: {},
3486
3486
  path: ["form", "color", "dropdown", "label-hover"],
3487
3487
  },
3488
+ "label-subtext": {
3489
+ $type: "color",
3490
+ $value: "#0000006b",
3491
+ $description: "Option subtext.",
3492
+ filePath: "data/tokens/components/form.json",
3493
+ isSource: true,
3494
+ original: {
3495
+ $type: "color",
3496
+ $value: "{modes.color.interactive.monochrome.defaultAlt3}",
3497
+ $description: "Option subtext.",
3498
+ },
3499
+ name: "formColorDropdownLabelSubtext",
3500
+ attributes: {},
3501
+ path: ["form", "color", "dropdown", "label-subtext"],
3502
+ },
3488
3503
  },
3489
3504
  labelset: {
3490
3505
  "label-required": {
@@ -4742,6 +4757,25 @@
4742
4757
  },
4743
4758
  },
4744
4759
  default: {
4760
+ XS: {
4761
+ $type: "typography",
4762
+ $value: {
4763
+ fontFamily: "Sage UI",
4764
+ fontWeight: "400",
4765
+ lineHeight: 1.5,
4766
+ fontSize: "13px",
4767
+ paragraphSpacing: "0",
4768
+ },
4769
+ filePath: "data/tokens/components/form.json",
4770
+ isSource: true,
4771
+ original: {
4772
+ $type: "typography",
4773
+ $value: "{global.typography.adaptive.component.moderate.XS}",
4774
+ },
4775
+ name: "formTypographyAdaptiveDefaultXs",
4776
+ attributes: {},
4777
+ path: ["form", "typography", "adaptive", "default", "XS"],
4778
+ },
4745
4779
  S: {
4746
4780
  $type: "typography",
4747
4781
  $value: {
@@ -4862,6 +4896,25 @@
4862
4896
  },
4863
4897
  },
4864
4898
  default: {
4899
+ XS: {
4900
+ $type: "typography",
4901
+ $value: {
4902
+ fontFamily: "Sage UI",
4903
+ fontWeight: "400",
4904
+ lineHeight: 1.5,
4905
+ fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
4906
+ paragraphSpacing: "0",
4907
+ },
4908
+ filePath: "data/tokens/components/form.json",
4909
+ isSource: true,
4910
+ original: {
4911
+ $type: "typography",
4912
+ $value: "{global.typography.responsive.component.moderate.XS}",
4913
+ },
4914
+ name: "formTypographyResponsiveDefaultXs",
4915
+ attributes: {},
4916
+ path: ["form", "typography", "responsive", "default", "XS"],
4917
+ },
4865
4918
  S: {
4866
4919
  $type: "typography",
4867
4920
  $value: {
@@ -1124,13 +1124,13 @@
1124
1124
  parentContainer: {
1125
1125
  fixedWidth: {
1126
1126
  $type: "sizing",
1127
- $value: "140",
1127
+ $value: "146",
1128
1128
  $description: "fixed width of parent container",
1129
1129
  filePath: "data/tokens/components/nav.json",
1130
1130
  isSource: true,
1131
1131
  original: {
1132
1132
  $type: "sizing",
1133
- $value: "140",
1133
+ $value: "146",
1134
1134
  $description: "fixed width of parent container",
1135
1135
  },
1136
1136
  name: "navSizeLeftnavParentContainerFixedWidth",