@sage/design-tokens 9.0.0 → 9.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 (233) hide show
  1. package/css/frozenproduct/all.css +47 -24
  2. package/css/frozenproduct/large/components/button.css +34 -12
  3. package/css/frozenproduct/large/components/container.css +9 -9
  4. package/css/frozenproduct/large/components/form.css +16 -15
  5. package/css/frozenproduct/small/components/button.css +34 -12
  6. package/css/frozenproduct/small/components/form.css +16 -15
  7. package/css/marketing/all.css +47 -24
  8. package/css/marketing/large/components/button.css +34 -12
  9. package/css/marketing/large/components/form.css +16 -15
  10. package/css/marketing/small/components/button.css +34 -12
  11. package/css/marketing/small/components/form.css +16 -15
  12. package/css/product/all.css +47 -24
  13. package/css/product/large/components/button.css +34 -12
  14. package/css/product/large/components/container.css +9 -9
  15. package/css/product/large/components/form.css +16 -15
  16. package/css/product/small/components/button.css +34 -12
  17. package/css/product/small/components/form.css +16 -15
  18. package/ios/frozenproduct/large/dark/components/button.h +34 -12
  19. package/ios/frozenproduct/large/dark/components/form.h +16 -15
  20. package/ios/frozenproduct/large/light/components/button.h +34 -12
  21. package/ios/frozenproduct/large/light/components/form.h +16 -15
  22. package/ios/frozenproduct/small/dark/components/button.h +34 -12
  23. package/ios/frozenproduct/small/dark/components/form.h +16 -15
  24. package/ios/frozenproduct/small/light/components/button.h +34 -12
  25. package/ios/frozenproduct/small/light/components/form.h +16 -15
  26. package/ios/marketing/large/dark/components/button.h +34 -12
  27. package/ios/marketing/large/dark/components/form.h +16 -15
  28. package/ios/marketing/large/light/components/button.h +34 -12
  29. package/ios/marketing/large/light/components/form.h +16 -15
  30. package/ios/marketing/small/dark/components/button.h +34 -12
  31. package/ios/marketing/small/dark/components/form.h +16 -15
  32. package/ios/marketing/small/light/components/button.h +34 -12
  33. package/ios/marketing/small/light/components/form.h +16 -15
  34. package/ios/product/large/dark/components/button.h +34 -12
  35. package/ios/product/large/dark/components/form.h +16 -15
  36. package/ios/product/large/light/components/button.h +34 -12
  37. package/ios/product/large/light/components/form.h +16 -15
  38. package/ios/product/small/dark/components/button.h +34 -12
  39. package/ios/product/small/dark/components/form.h +16 -15
  40. package/ios/product/small/light/components/button.h +34 -12
  41. package/ios/product/small/light/components/form.h +16 -15
  42. package/js/common/frozenproduct/large/dark/components/button.d.ts +39 -7
  43. package/js/common/frozenproduct/large/dark/components/button.js +425 -72
  44. package/js/common/frozenproduct/large/dark/components/form.d.ts +13 -12
  45. package/js/common/frozenproduct/large/dark/components/form.js +158 -143
  46. package/js/common/frozenproduct/large/light/components/button.d.ts +39 -7
  47. package/js/common/frozenproduct/large/light/components/button.js +425 -72
  48. package/js/common/frozenproduct/large/light/components/form.d.ts +13 -12
  49. package/js/common/frozenproduct/large/light/components/form.js +158 -143
  50. package/js/common/frozenproduct/small/dark/components/button.d.ts +39 -7
  51. package/js/common/frozenproduct/small/dark/components/button.js +425 -72
  52. package/js/common/frozenproduct/small/dark/components/form.d.ts +13 -12
  53. package/js/common/frozenproduct/small/dark/components/form.js +158 -143
  54. package/js/common/frozenproduct/small/light/components/button.d.ts +39 -7
  55. package/js/common/frozenproduct/small/light/components/button.js +425 -72
  56. package/js/common/frozenproduct/small/light/components/form.d.ts +13 -12
  57. package/js/common/frozenproduct/small/light/components/form.js +158 -143
  58. package/js/common/marketing/large/dark/components/button.d.ts +39 -7
  59. package/js/common/marketing/large/dark/components/button.js +425 -72
  60. package/js/common/marketing/large/dark/components/form.d.ts +13 -12
  61. package/js/common/marketing/large/dark/components/form.js +158 -143
  62. package/js/common/marketing/large/light/components/button.d.ts +39 -7
  63. package/js/common/marketing/large/light/components/button.js +425 -72
  64. package/js/common/marketing/large/light/components/form.d.ts +13 -12
  65. package/js/common/marketing/large/light/components/form.js +158 -143
  66. package/js/common/marketing/small/dark/components/button.d.ts +39 -7
  67. package/js/common/marketing/small/dark/components/button.js +425 -72
  68. package/js/common/marketing/small/dark/components/form.d.ts +13 -12
  69. package/js/common/marketing/small/dark/components/form.js +158 -143
  70. package/js/common/marketing/small/light/components/button.d.ts +39 -7
  71. package/js/common/marketing/small/light/components/button.js +425 -72
  72. package/js/common/marketing/small/light/components/form.d.ts +13 -12
  73. package/js/common/marketing/small/light/components/form.js +158 -143
  74. package/js/common/product/large/dark/components/button.d.ts +39 -7
  75. package/js/common/product/large/dark/components/button.js +425 -72
  76. package/js/common/product/large/dark/components/form.d.ts +13 -12
  77. package/js/common/product/large/dark/components/form.js +158 -143
  78. package/js/common/product/large/light/components/button.d.ts +39 -7
  79. package/js/common/product/large/light/components/button.js +425 -72
  80. package/js/common/product/large/light/components/form.d.ts +13 -12
  81. package/js/common/product/large/light/components/form.js +158 -143
  82. package/js/common/product/small/dark/components/button.d.ts +39 -7
  83. package/js/common/product/small/dark/components/button.js +425 -72
  84. package/js/common/product/small/dark/components/form.d.ts +13 -12
  85. package/js/common/product/small/dark/components/form.js +158 -143
  86. package/js/common/product/small/light/components/button.d.ts +39 -7
  87. package/js/common/product/small/light/components/button.js +425 -72
  88. package/js/common/product/small/light/components/form.d.ts +13 -12
  89. package/js/common/product/small/light/components/form.js +158 -143
  90. package/js/es6/frozenproduct/large/dark/components/button.d.ts +38 -16
  91. package/js/es6/frozenproduct/large/dark/components/button.js +40 -18
  92. package/js/es6/frozenproduct/large/dark/components/form.d.ts +15 -14
  93. package/js/es6/frozenproduct/large/dark/components/form.js +16 -15
  94. package/js/es6/frozenproduct/large/light/components/button.d.ts +38 -16
  95. package/js/es6/frozenproduct/large/light/components/button.js +40 -18
  96. package/js/es6/frozenproduct/large/light/components/form.d.ts +15 -14
  97. package/js/es6/frozenproduct/large/light/components/form.js +16 -15
  98. package/js/es6/frozenproduct/small/dark/components/button.d.ts +38 -16
  99. package/js/es6/frozenproduct/small/dark/components/button.js +40 -18
  100. package/js/es6/frozenproduct/small/dark/components/form.d.ts +15 -14
  101. package/js/es6/frozenproduct/small/dark/components/form.js +16 -15
  102. package/js/es6/frozenproduct/small/light/components/button.d.ts +38 -16
  103. package/js/es6/frozenproduct/small/light/components/button.js +40 -18
  104. package/js/es6/frozenproduct/small/light/components/form.d.ts +15 -14
  105. package/js/es6/frozenproduct/small/light/components/form.js +16 -15
  106. package/js/es6/marketing/large/dark/components/button.d.ts +38 -16
  107. package/js/es6/marketing/large/dark/components/button.js +40 -18
  108. package/js/es6/marketing/large/dark/components/form.d.ts +15 -14
  109. package/js/es6/marketing/large/dark/components/form.js +16 -15
  110. package/js/es6/marketing/large/light/components/button.d.ts +38 -16
  111. package/js/es6/marketing/large/light/components/button.js +40 -18
  112. package/js/es6/marketing/large/light/components/form.d.ts +15 -14
  113. package/js/es6/marketing/large/light/components/form.js +16 -15
  114. package/js/es6/marketing/small/dark/components/button.d.ts +38 -16
  115. package/js/es6/marketing/small/dark/components/button.js +40 -18
  116. package/js/es6/marketing/small/dark/components/form.d.ts +15 -14
  117. package/js/es6/marketing/small/dark/components/form.js +16 -15
  118. package/js/es6/marketing/small/light/components/button.d.ts +38 -16
  119. package/js/es6/marketing/small/light/components/button.js +40 -18
  120. package/js/es6/marketing/small/light/components/form.d.ts +15 -14
  121. package/js/es6/marketing/small/light/components/form.js +16 -15
  122. package/js/es6/product/large/dark/components/button.d.ts +38 -16
  123. package/js/es6/product/large/dark/components/button.js +40 -18
  124. package/js/es6/product/large/dark/components/form.d.ts +15 -14
  125. package/js/es6/product/large/dark/components/form.js +16 -15
  126. package/js/es6/product/large/light/components/button.d.ts +38 -16
  127. package/js/es6/product/large/light/components/button.js +40 -18
  128. package/js/es6/product/large/light/components/form.d.ts +15 -14
  129. package/js/es6/product/large/light/components/form.js +16 -15
  130. package/js/es6/product/small/dark/components/button.d.ts +38 -16
  131. package/js/es6/product/small/dark/components/button.js +40 -18
  132. package/js/es6/product/small/dark/components/form.d.ts +15 -14
  133. package/js/es6/product/small/dark/components/form.js +16 -15
  134. package/js/es6/product/small/light/components/button.d.ts +38 -16
  135. package/js/es6/product/small/light/components/button.js +40 -18
  136. package/js/es6/product/small/light/components/form.d.ts +15 -14
  137. package/js/es6/product/small/light/components/form.js +16 -15
  138. package/js/umd/frozenproduct/large/dark/components/button.js +430 -72
  139. package/js/umd/frozenproduct/large/dark/components/form.js +158 -143
  140. package/js/umd/frozenproduct/large/light/components/button.js +430 -72
  141. package/js/umd/frozenproduct/large/light/components/form.js +158 -143
  142. package/js/umd/frozenproduct/small/dark/components/button.js +430 -72
  143. package/js/umd/frozenproduct/small/dark/components/form.js +158 -143
  144. package/js/umd/frozenproduct/small/light/components/button.js +430 -72
  145. package/js/umd/frozenproduct/small/light/components/form.js +158 -143
  146. package/js/umd/marketing/large/dark/components/button.js +430 -72
  147. package/js/umd/marketing/large/dark/components/form.js +158 -143
  148. package/js/umd/marketing/large/light/components/button.js +430 -72
  149. package/js/umd/marketing/large/light/components/form.js +158 -143
  150. package/js/umd/marketing/small/dark/components/button.js +430 -72
  151. package/js/umd/marketing/small/dark/components/form.js +158 -143
  152. package/js/umd/marketing/small/light/components/button.js +430 -72
  153. package/js/umd/marketing/small/light/components/form.js +158 -143
  154. package/js/umd/product/large/dark/components/button.js +430 -72
  155. package/js/umd/product/large/dark/components/form.js +158 -143
  156. package/js/umd/product/large/light/components/button.js +430 -72
  157. package/js/umd/product/large/light/components/form.js +158 -143
  158. package/js/umd/product/small/dark/components/button.js +430 -72
  159. package/js/umd/product/small/dark/components/form.js +158 -143
  160. package/js/umd/product/small/light/components/button.js +430 -72
  161. package/js/umd/product/small/light/components/form.js +158 -143
  162. package/json/flat/frozenproduct/large/dark/components/button.json +35 -13
  163. package/json/flat/frozenproduct/large/dark/components/form.json +16 -15
  164. package/json/flat/frozenproduct/large/light/components/button.json +35 -13
  165. package/json/flat/frozenproduct/large/light/components/form.json +16 -15
  166. package/json/flat/frozenproduct/small/dark/components/button.json +35 -13
  167. package/json/flat/frozenproduct/small/dark/components/form.json +16 -15
  168. package/json/flat/frozenproduct/small/light/components/button.json +35 -13
  169. package/json/flat/frozenproduct/small/light/components/form.json +16 -15
  170. package/json/flat/marketing/large/dark/components/button.json +35 -13
  171. package/json/flat/marketing/large/dark/components/form.json +16 -15
  172. package/json/flat/marketing/large/light/components/button.json +35 -13
  173. package/json/flat/marketing/large/light/components/form.json +16 -15
  174. package/json/flat/marketing/small/dark/components/button.json +35 -13
  175. package/json/flat/marketing/small/dark/components/form.json +16 -15
  176. package/json/flat/marketing/small/light/components/button.json +35 -13
  177. package/json/flat/marketing/small/light/components/form.json +16 -15
  178. package/json/flat/product/large/dark/components/button.json +35 -13
  179. package/json/flat/product/large/dark/components/form.json +16 -15
  180. package/json/flat/product/large/light/components/button.json +35 -13
  181. package/json/flat/product/large/light/components/form.json +16 -15
  182. package/json/flat/product/small/dark/components/button.json +35 -13
  183. package/json/flat/product/small/dark/components/form.json +16 -15
  184. package/json/flat/product/small/light/components/button.json +35 -13
  185. package/json/flat/product/small/light/components/form.json +16 -15
  186. package/json/nested/frozenproduct/large/dark/components/button.json +41 -9
  187. package/json/nested/frozenproduct/large/dark/components/form.json +19 -18
  188. package/json/nested/frozenproduct/large/light/components/button.json +41 -9
  189. package/json/nested/frozenproduct/large/light/components/form.json +19 -18
  190. package/json/nested/frozenproduct/small/dark/components/button.json +41 -9
  191. package/json/nested/frozenproduct/small/dark/components/form.json +19 -18
  192. package/json/nested/frozenproduct/small/light/components/button.json +41 -9
  193. package/json/nested/frozenproduct/small/light/components/form.json +19 -18
  194. package/json/nested/marketing/large/dark/components/button.json +41 -9
  195. package/json/nested/marketing/large/dark/components/form.json +19 -18
  196. package/json/nested/marketing/large/light/components/button.json +41 -9
  197. package/json/nested/marketing/large/light/components/form.json +19 -18
  198. package/json/nested/marketing/small/dark/components/button.json +41 -9
  199. package/json/nested/marketing/small/dark/components/form.json +19 -18
  200. package/json/nested/marketing/small/light/components/button.json +41 -9
  201. package/json/nested/marketing/small/light/components/form.json +19 -18
  202. package/json/nested/product/large/dark/components/button.json +41 -9
  203. package/json/nested/product/large/dark/components/form.json +19 -18
  204. package/json/nested/product/large/light/components/button.json +41 -9
  205. package/json/nested/product/large/light/components/form.json +19 -18
  206. package/json/nested/product/small/dark/components/button.json +41 -9
  207. package/json/nested/product/small/dark/components/form.json +19 -18
  208. package/json/nested/product/small/light/components/button.json +41 -9
  209. package/json/nested/product/small/light/components/form.json +19 -18
  210. package/package.json +1 -1
  211. package/sage-design-tokens-9.2.0.tgz +0 -0
  212. package/scss/frozenproduct/large/components/button.scss +34 -12
  213. package/scss/frozenproduct/large/components/form.scss +16 -15
  214. package/scss/frozenproduct/small/components/button.scss +34 -12
  215. package/scss/frozenproduct/small/components/form.scss +16 -15
  216. package/scss/marketing/large/components/button.scss +34 -12
  217. package/scss/marketing/large/components/form.scss +16 -15
  218. package/scss/marketing/small/components/button.scss +34 -12
  219. package/scss/marketing/small/components/form.scss +16 -15
  220. package/scss/product/large/components/button.scss +57 -35
  221. package/scss/product/large/components/container.scss +9 -9
  222. package/scss/product/large/components/form.scss +23 -22
  223. package/scss/product/large/components/link.scss +2 -2
  224. package/scss/product/large/components/nav.scss +3 -3
  225. package/scss/product/large/components/page.scss +1 -1
  226. package/scss/product/large/components/popover.scss +2 -2
  227. package/scss/product/large/components/progress.scss +6 -6
  228. package/scss/product/large/components/status.scss +3 -3
  229. package/scss/product/large/components/tab.scss +7 -7
  230. package/scss/product/large/components/table.scss +10 -10
  231. package/scss/product/small/components/button.scss +34 -12
  232. package/scss/product/small/components/form.scss +16 -15
  233. package/sage-design-tokens-9.0.0.tgz +0 -0
package/css/frozenproduct/all.css CHANGED
@@ -564,8 +564,8 @@
564
564
  --button-radius-none: var(--global-radius-none);
565
565
  --button-radius-fab: var(--global-radius-circle); /* FAB Button radius */
566
566
  --button-borderwidth-none: var(--global-borderwidth-none); /* Override on tertiary buttons within Button-toggle. */
567
- --button-borderwidth-tertiarymarketing: var(--global-borderwidth-none); /* tertiary button border used for a marketing override */
568
567
  --button-borderwidth-primary: var(--global-borderwidth-none); /* primary button border */
568
+ --button-borderwidth-tertiarymarketing: var(--global-borderwidth-none); /* tertiary button border used for a marketing override */
569
569
  --button-color-none: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark)); /* transparent override used for hiding colors when needed. */
570
570
  --button-color-ai-border-active: light-dark(var(--modes-color-interactive-ai-default-light), var(--modes-color-interactive-ai-default-dark));
571
571
  --button-color-ai-border-enabled: light-dark(var(--modes-color-interactive-ai-default-light), var(--modes-color-interactive-ai-default-dark));
@@ -579,12 +579,12 @@
579
579
  --button-typography-secondary-s: var(--global-typography-component-firm-s);
580
580
  --button-typography-secondary-m: var(--global-typography-component-firm-m);
581
581
  --button-typography-secondary-l: var(--global-typography-component-firm-l);
582
- --button-typography-tertiary-s: var(--global-typography-component-firm-s);
583
- --button-typography-tertiary-m: var(--global-typography-component-firm-m);
584
- --button-typography-tertiary-l: var(--global-typography-component-firm-l);
585
582
  --button-typography-subtle-s: var(--global-typography-component-firm-s);
586
583
  --button-typography-subtle-m: var(--global-typography-component-firm-m);
587
584
  --button-typography-subtle-l: var(--global-typography-component-firm-l);
585
+ --button-typography-tertiary-s: var(--global-typography-component-firm-s);
586
+ --button-typography-tertiary-m: var(--global-typography-component-firm-m);
587
+ --button-typography-tertiary-l: var(--global-typography-component-firm-l);
588
588
  --button-color-ai-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
589
589
  --button-color-destructive-primary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
590
590
  --button-color-destructive-secondary-border-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
@@ -607,6 +607,10 @@
607
607
  --button-size-s: var(--global-size-macro-s); /* min-height on S Buttons */
608
608
  --button-size-m: var(--global-size-macro-m); /* min-height on M Buttons */
609
609
  --button-size-l: var(--global-size-macro-l); /* min-height on L Buttons */
610
+ --button-size-toggle-xs: var(--global-size-macro-xs); /* min-height on button within S toggle group */
611
+ --button-size-toggle-s: var(--global-size-macro-s); /* min-height on S single toggle, and on button within M toggle group */
612
+ --button-size-toggle-m: var(--global-size-macro-m); /* min-height on M single toggle, and on button within L toggle group */
613
+ --button-size-toggle-l: var(--global-size-macro-l); /* min-height on L single toggle */
610
614
  --button-size-icon-m: var(--global-size-icon-m);
611
615
  --button-size-video-s: var(--global-size-macro-m);
612
616
  --button-size-video-m: var(--global-size-macro-xxl);
@@ -677,18 +681,29 @@
677
681
  --button-space-tertiary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only processing button */
678
682
  --button-space-tertiary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only processing button */
679
683
  --button-space-tertiary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only processing button */
684
+ --button-space-toggle-button-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS asset used within S toggle group */
685
+ --button-space-toggle-button-x-s: var(--global-space-macro-xxs); /* Left and right padding on S toggle buttons */
680
686
  --button-space-toggle-button-x-m: var(--global-space-macro-xs); /* Left and right padding on medium toggle buttons */
681
687
  --button-space-toggle-button-x-l: var(--global-space-macro-s); /* Left and right padding on buttons */
688
+ --button-space-toggle-button-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside toggle buttons */
682
689
  --button-space-toggle-button-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside toggle buttons */
683
690
  --button-space-toggle-button-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside toggle buttons */
684
- --button-space-toggle-button-y-m: var(--global-space-micro-s); /* Top and bottom padding on toggle buttons */
685
- --button-space-toggle-button-y-l: var(--global-space-micro-m); /* Top and bottom padding on toggle buttons */
691
+ --button-space-toggle-button-y-xs: var(--global-space-micro-xs)-0.5; /* Top and bottom padding on toggle buttons */
692
+ --button-space-toggle-button-y-s: var(--global-space-micro-s); /* Top and bottom padding on toggle buttons */
693
+ --button-space-toggle-button-y-m: var(--global-space-micro-l); /* Top and bottom padding on toggle buttons */
694
+ --button-space-toggle-button-y-l: var(--global-space-micro-xl)-0.5; /* Top and bottom padding on toggle buttons */
695
+ --button-space-toggle-container-x-s: var(--global-space-micro-s); /* Horizontal padding */
686
696
  --button-space-toggle-container-x-m: var(--global-space-micro-s); /* Horizontal padding */
687
697
  --button-space-toggle-container-x-l: var(--global-space-micro-s); /* Horizontal padding */
698
+ --button-space-toggle-container-xg-s: var(--global-space-micro-l); /* Spacing between buttons in Toggle. */
688
699
  --button-space-toggle-container-xg-m: var(--global-space-micro-l); /* Spacing between buttons in Toggle. */
689
700
  --button-space-toggle-container-xg-l: var(--global-space-micro-l); /* Spacing between buttons in Toggle. */
701
+ --button-space-toggle-container-y-s: var(--global-space-micro-s); /* Vertical padding */
690
702
  --button-space-toggle-container-y-m: var(--global-space-micro-s); /* Vertical padding */
691
703
  --button-space-toggle-container-y-l: var(--global-space-micro-s); /* Vertical padding */
704
+ --button-space-toggle-container-yg-s: var(--global-space-micro-l); /* Row gap between buttons in wrapped toggle group. */
705
+ --button-space-toggle-container-yg-m: var(--global-space-micro-l); /* Row gap between buttons in wrapped toggle group. */
706
+ --button-space-toggle-container-yg-l: var(--global-space-micro-l); /* Row gap between buttons in wrapped toggle group. */
692
707
  --button-space-video-x-s: var(--global-space-micro-xs); /* Left padding on play icon in video button */
693
708
  --button-space-video-x-m: var(--global-space-micro-xs); /* Left padding on play icon in video button */
694
709
  --button-space-video-x-l: var(--global-space-micro-xs); /* Left padding on play icon in video button */
@@ -740,12 +755,19 @@
740
755
  --button-radius-secondary-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
741
756
  --button-radius-secondary-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
742
757
  --button-radius-secondary-l: var(--global-radius-interactive-xxl); /* large tertiary button */
743
- --button-radius-tertiary-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
744
- --button-radius-tertiary-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
745
- --button-radius-tertiary-l: var(--global-radius-interactive-xxl); /* large tertiary button */
746
758
  --button-radius-subtle-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
747
759
  --button-radius-subtle-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
748
760
  --button-radius-subtle-l: var(--global-radius-interactive-xxl); /* large subtle button */
761
+ --button-radius-tertiary-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
762
+ --button-radius-tertiary-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
763
+ --button-radius-tertiary-l: var(--global-radius-interactive-xxl); /* large tertiary button */
764
+ --button-radius-toggle-button-xs: var(--global-radius-interactive-xxl)/2; /* XS single toggle button (used within S toggle group) */
765
+ --button-radius-toggle-button-s: var(--global-radius-interactive-l); /* S single toggle button (used within M toggle group) */
766
+ --button-radius-toggle-button-m: var(--global-radius-interactive-xl); /* M single toggle button (used within L toggle group) */
767
+ --button-radius-toggle-button-l: var(--global-radius-interactive-xxl); /* L single toggle button */
768
+ --button-radius-toggle-container-s: var(--global-radius-interactive-l); /* S toggle group */
769
+ --button-radius-toggle-container-m: var(--global-radius-interactive-xl); /* M toggle group */
770
+ --button-radius-toggle-container-l: var(--global-radius-interactive-xxl); /* L toggle group */
749
771
  --button-borderwidth-chip: var(--global-borderwidth-xs); /* chip button border width */
750
772
  --button-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary button. */
751
773
  --button-borderwidth-tertiary: var(--global-borderwidth-xs); /* tertiary button border */
@@ -1096,56 +1118,56 @@
1096
1118
  --form-radius-calendar-none: var(--global-radius-none); /* Calendar (start and end duration) */
1097
1119
  --form-radius-calendar-date: var(--global-radius-circle); /* Calendar date (hover & selected), */
1098
1120
  --form-color-colorpicker-label-default: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark)); /* Accessible on colorpicker bg-default colors. */
1099
- --form-color-colorpicker-blue-border: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
1100
1121
  --form-color-colorpicker-blue-bg-alt: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
1101
1122
  --form-color-colorpicker-blue-bg-default: light-dark(var(--modes-color-colorcode-blue-muted-light), var(--modes-color-colorcode-blue-muted-dark));
1123
+ --form-color-colorpicker-blue-border: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
1102
1124
  --form-color-colorpicker-blue-pattern: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
1103
1125
  --form-color-colorpicker-blue-label-default: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1104
- --form-color-colorpicker-teal-border: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
1105
1126
  --form-color-colorpicker-teal-bg-alt: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
1106
1127
  --form-color-colorpicker-teal-bg-default: light-dark(var(--modes-color-colorcode-teal-muted-light), var(--modes-color-colorcode-teal-muted-dark));
1128
+ --form-color-colorpicker-teal-border: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
1107
1129
  --form-color-colorpicker-teal-pattern: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
1108
1130
  --form-color-colorpicker-teal-label-default: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1109
- --form-color-colorpicker-green-border: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
1110
1131
  --form-color-colorpicker-green-bg-alt: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
1111
1132
  --form-color-colorpicker-green-bg-default: light-dark(var(--modes-color-colorcode-green-muted-light), var(--modes-color-colorcode-green-muted-dark));
1133
+ --form-color-colorpicker-green-border: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
1112
1134
  --form-color-colorpicker-green-pattern: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
1113
1135
  --form-color-colorpicker-green-label-default: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1114
- --form-color-colorpicker-lime-border: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
1115
1136
  --form-color-colorpicker-lime-bg-alt: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
1116
1137
  --form-color-colorpicker-lime-bg-default: light-dark(var(--modes-color-colorcode-lime-muted-light), var(--modes-color-colorcode-lime-muted-dark));
1138
+ --form-color-colorpicker-lime-border: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
1117
1139
  --form-color-colorpicker-lime-pattern: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
1118
1140
  --form-color-colorpicker-lime-label-default: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1119
- --form-color-colorpicker-orange-border: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1120
1141
  --form-color-colorpicker-orange-bg-alt: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1121
1142
  --form-color-colorpicker-orange-bg-default: light-dark(var(--modes-color-colorcode-orange-muted-light), var(--modes-color-colorcode-orange-muted-dark));
1143
+ --form-color-colorpicker-orange-border: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1122
1144
  --form-color-colorpicker-orange-pattern: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1123
1145
  --form-color-colorpicker-orange-label-default: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1124
1146
  --form-color-colorpicker-red-border: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1125
- --form-color-colorpicker-red-bg-alt: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1126
1147
  --form-color-colorpicker-red-bg-default: light-dark(var(--modes-color-colorcode-red-muted-light), var(--modes-color-colorcode-red-muted-dark));
1148
+ --form-color-colorpicker-red-bg-alt: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1127
1149
  --form-color-colorpicker-red-pattern: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1128
1150
  --form-color-colorpicker-red-label-default: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1129
1151
  --form-color-colorpicker-pink-border: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1130
- --form-color-colorpicker-pink-bg-alt: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1131
1152
  --form-color-colorpicker-pink-bg-default: light-dark(var(--modes-color-colorcode-pink-muted-light), var(--modes-color-colorcode-pink-muted-dark));
1153
+ --form-color-colorpicker-pink-bg-alt: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1132
1154
  --form-color-colorpicker-pink-pattern: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1133
1155
  --form-color-colorpicker-pink-label-default: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1134
1156
  --form-color-colorpicker-purple-border: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1135
- --form-color-colorpicker-purple-bg-alt: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1136
1157
  --form-color-colorpicker-purple-bg-default: light-dark(var(--modes-color-colorcode-purple-muted-light), var(--modes-color-colorcode-purple-muted-dark));
1158
+ --form-color-colorpicker-purple-bg-alt: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1137
1159
  --form-color-colorpicker-purple-pattern: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1138
1160
  --form-color-colorpicker-purple-label-default: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1139
- --form-color-colorpicker-slate-border: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1140
- --form-color-colorpicker-slate-bg-alt: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1141
- --form-color-colorpicker-slate-bg-default: light-dark(var(--modes-color-colorcode-slate-muted-light), var(--modes-color-colorcode-slate-muted-dark));
1142
- --form-color-colorpicker-slate-pattern: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1143
- --form-color-colorpicker-slate-label-default: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1144
1161
  --form-color-colorpicker-gray-border: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1145
- --form-color-colorpicker-gray-bg-alt: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1146
1162
  --form-color-colorpicker-gray-bg-default: light-dark(var(--modes-color-colorcode-gray-muted-light), var(--modes-color-colorcode-gray-muted-dark));
1163
+ --form-color-colorpicker-gray-bg-alt: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1147
1164
  --form-color-colorpicker-gray-pattern: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1148
1165
  --form-color-colorpicker-gray-label-default: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1166
+ --form-color-colorpicker-slate-border: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1167
+ --form-color-colorpicker-slate-bg-default: light-dark(var(--modes-color-colorcode-slate-muted-light), var(--modes-color-colorcode-slate-muted-dark));
1168
+ --form-color-colorpicker-slate-bg-alt: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1169
+ --form-color-colorpicker-slate-pattern: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1170
+ --form-color-colorpicker-slate-label-default: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1149
1171
  --form-color-labelset-label-required: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
1150
1172
  --form-color-validation-border-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
1151
1173
  --form-color-validation-bar-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark)); /* error bar to left of inputs */
@@ -1307,8 +1329,9 @@
1307
1329
  --form-size-checkbox-s: var(--global-size-macro-xxs); /* S checkboxes */
1308
1330
  --form-size-checkbox-m: var(--global-size-macro-xs); /* M checkboxes */
1309
1331
  --form-size-checkbox-l: var(--global-size-macro-s); /* L checkboxes */
1310
- --form-size-colorpicker-swatch: var(--global-size-macro-m); /* width and height of color picker swatch */
1332
+ --form-size-colorpicker-swatch: var(--global-size-macro-s); /* width and height of color picker swatch */
1311
1333
  --form-size-colorpicker-swatchcontainer: calc(var(--global-size-macro-xxxl) + var(--global-size-micro-m)); /* width of swatch parent container */
1334
+ --form-size-colorpicker-swatchselected: var(--global-size-macro-m)/2; /* selected swatch */
1312
1335
  --form-size-dropdown-subtle-s: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
1313
1336
  --form-size-dropdown-subtle-m: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
1314
1337
  --form-size-dropdown-subtle-l: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
package/css/frozenproduct/large/components/button.css CHANGED
@@ -12,8 +12,8 @@
12
12
  --button-radius-none: var(--global-radius-none);
13
13
  --button-radius-fab: var(--global-radius-circle); /* FAB Button radius */
14
14
  --button-borderwidth-none: var(--global-borderwidth-none); /* Override on tertiary buttons within Button-toggle. */
15
- --button-borderwidth-tertiarymarketing: var(--global-borderwidth-none); /* tertiary button border used for a marketing override */
16
15
  --button-borderwidth-primary: var(--global-borderwidth-none); /* primary button border */
16
+ --button-borderwidth-tertiarymarketing: var(--global-borderwidth-none); /* tertiary button border used for a marketing override */
17
17
  --button-color-none: var(--modes-color-none); /* transparent override used for hiding colors when needed. */
18
18
  --button-color-ai-border-active: var(--modes-color-interactive-ai-default);
19
19
  --button-color-ai-border-enabled: var(--modes-color-interactive-ai-default);
@@ -27,24 +27,24 @@
27
27
  --button-typography-adaptive-secondary-s: var(--global-typography-adaptive-component-firm-s);
28
28
  --button-typography-adaptive-secondary-m: var(--global-typography-adaptive-component-firm-m);
29
29
  --button-typography-adaptive-secondary-l: var(--global-typography-adaptive-component-firm-l);
30
- --button-typography-adaptive-tertiary-s: var(--global-typography-adaptive-component-firm-s);
31
- --button-typography-adaptive-tertiary-m: var(--global-typography-adaptive-component-firm-m);
32
- --button-typography-adaptive-tertiary-l: var(--global-typography-adaptive-component-firm-l);
33
30
  --button-typography-adaptive-subtle-s: var(--global-typography-adaptive-component-firm-s);
34
31
  --button-typography-adaptive-subtle-m: var(--global-typography-adaptive-component-firm-m);
35
32
  --button-typography-adaptive-subtle-l: var(--global-typography-adaptive-component-firm-l);
33
+ --button-typography-adaptive-tertiary-s: var(--global-typography-adaptive-component-firm-s);
34
+ --button-typography-adaptive-tertiary-m: var(--global-typography-adaptive-component-firm-m);
35
+ --button-typography-adaptive-tertiary-l: var(--global-typography-adaptive-component-firm-l);
36
36
  --button-typography-responsive-primary-s: var(--global-typography-responsive-component-firm-s);
37
37
  --button-typography-responsive-primary-m: var(--global-typography-responsive-component-firm-m);
38
38
  --button-typography-responsive-primary-l: var(--global-typography-responsive-component-firm-l);
39
39
  --button-typography-responsive-secondary-s: var(--global-typography-responsive-component-firm-s);
40
40
  --button-typography-responsive-secondary-m: var(--global-typography-responsive-component-firm-m);
41
41
  --button-typography-responsive-secondary-l: var(--global-typography-responsive-component-firm-l);
42
- --button-typography-responsive-tertiary-s: var(--global-typography-responsive-component-firm-s);
43
- --button-typography-responsive-tertiary-m: var(--global-typography-responsive-component-firm-m);
44
- --button-typography-responsive-tertiary-l: var(--global-typography-responsive-component-firm-l);
45
42
  --button-typography-responsive-subtle-s: var(--global-typography-responsive-component-firm-s);
46
43
  --button-typography-responsive-subtle-m: var(--global-typography-responsive-component-firm-m);
47
44
  --button-typography-responsive-subtle-l: var(--global-typography-responsive-component-firm-l);
45
+ --button-typography-responsive-tertiary-s: var(--global-typography-responsive-component-firm-s);
46
+ --button-typography-responsive-tertiary-m: var(--global-typography-responsive-component-firm-m);
47
+ --button-typography-responsive-tertiary-l: var(--global-typography-responsive-component-firm-l);
48
48
  --button-color-ai-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
49
49
  --button-color-destructive-primary-bg-hover: var(--modes-color-interactive-danger-hover);
50
50
  --button-color-destructive-secondary-border-hover: var(--modes-color-interactive-danger-hover);
@@ -67,6 +67,10 @@
67
67
  --button-size-s: var(--global-size-macro-s); /* min-height on S Buttons */
68
68
  --button-size-m: var(--global-size-macro-m); /* min-height on M Buttons */
69
69
  --button-size-l: var(--global-size-macro-l); /* min-height on L Buttons */
70
+ --button-size-toggle-xs: var(--global-size-macro-xs); /* min-height on button within S toggle group */
71
+ --button-size-toggle-s: var(--global-size-macro-s); /* min-height on S single toggle, and on button within M toggle group */
72
+ --button-size-toggle-m: var(--global-size-macro-m); /* min-height on M single toggle, and on button within L toggle group */
73
+ --button-size-toggle-l: var(--global-size-macro-l); /* min-height on L single toggle */
70
74
  --button-size-icon-m: var(--global-size-icon-m);
71
75
  --button-size-video-s: var(--global-size-macro-m);
72
76
  --button-size-video-m: var(--global-size-macro-xxl);
@@ -137,18 +141,29 @@
137
141
  --button-space-tertiary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only processing button */
138
142
  --button-space-tertiary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only processing button */
139
143
  --button-space-tertiary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only processing button */
144
+ --button-space-toggle-button-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS asset used within S toggle group */
145
+ --button-space-toggle-button-x-s: var(--global-space-macro-xxs); /* Left and right padding on S toggle buttons */
140
146
  --button-space-toggle-button-x-m: var(--global-space-macro-xs); /* Left and right padding on medium toggle buttons */
141
147
  --button-space-toggle-button-x-l: var(--global-space-macro-s); /* Left and right padding on buttons */
148
+ --button-space-toggle-button-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside toggle buttons */
142
149
  --button-space-toggle-button-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside toggle buttons */
143
150
  --button-space-toggle-button-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside toggle buttons */
144
- --button-space-toggle-button-y-m: var(--global-space-micro-s); /* Top and bottom padding on toggle buttons */
145
- --button-space-toggle-button-y-l: var(--global-space-micro-m); /* Top and bottom padding on toggle buttons */
151
+ --button-space-toggle-button-y-xs: var(--global-space-micro-xs)-0.5; /* Top and bottom padding on toggle buttons */
152
+ --button-space-toggle-button-y-s: var(--global-space-micro-s); /* Top and bottom padding on toggle buttons */
153
+ --button-space-toggle-button-y-m: var(--global-space-micro-l); /* Top and bottom padding on toggle buttons */
154
+ --button-space-toggle-button-y-l: var(--global-space-micro-xl)-0.5; /* Top and bottom padding on toggle buttons */
155
+ --button-space-toggle-container-x-s: var(--global-space-micro-s); /* Horizontal padding */
146
156
  --button-space-toggle-container-x-m: var(--global-space-micro-s); /* Horizontal padding */
147
157
  --button-space-toggle-container-x-l: var(--global-space-micro-s); /* Horizontal padding */
158
+ --button-space-toggle-container-xg-s: var(--global-space-micro-l); /* Spacing between buttons in Toggle. */
148
159
  --button-space-toggle-container-xg-m: var(--global-space-micro-l); /* Spacing between buttons in Toggle. */
149
160
  --button-space-toggle-container-xg-l: var(--global-space-micro-l); /* Spacing between buttons in Toggle. */
161
+ --button-space-toggle-container-y-s: var(--global-space-micro-s); /* Vertical padding */
150
162
  --button-space-toggle-container-y-m: var(--global-space-micro-s); /* Vertical padding */
151
163
  --button-space-toggle-container-y-l: var(--global-space-micro-s); /* Vertical padding */
164
+ --button-space-toggle-container-yg-s: var(--global-space-micro-l); /* Row gap between buttons in wrapped toggle group. */
165
+ --button-space-toggle-container-yg-m: var(--global-space-micro-l); /* Row gap between buttons in wrapped toggle group. */
166
+ --button-space-toggle-container-yg-l: var(--global-space-micro-l); /* Row gap between buttons in wrapped toggle group. */
152
167
  --button-space-video-x-s: var(--global-space-micro-xs); /* Left padding on play icon in video button */
153
168
  --button-space-video-x-m: var(--global-space-micro-xs); /* Left padding on play icon in video button */
154
169
  --button-space-video-x-l: var(--global-space-micro-xs); /* Left padding on play icon in video button */
@@ -200,12 +215,19 @@
200
215
  --button-radius-secondary-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
201
216
  --button-radius-secondary-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
202
217
  --button-radius-secondary-l: var(--global-radius-interactive-xxl); /* large tertiary button */
203
- --button-radius-tertiary-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
204
- --button-radius-tertiary-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
205
- --button-radius-tertiary-l: var(--global-radius-interactive-xxl); /* large tertiary button */
206
218
  --button-radius-subtle-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
207
219
  --button-radius-subtle-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
208
220
  --button-radius-subtle-l: var(--global-radius-interactive-xxl); /* large subtle button */
221
+ --button-radius-tertiary-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
222
+ --button-radius-tertiary-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
223
+ --button-radius-tertiary-l: var(--global-radius-interactive-xxl); /* large tertiary button */
224
+ --button-radius-toggle-button-xs: var(--global-radius-interactive-xxl)/2; /* XS single toggle button (used within S toggle group) */
225
+ --button-radius-toggle-button-s: var(--global-radius-interactive-l); /* S single toggle button (used within M toggle group) */
226
+ --button-radius-toggle-button-m: var(--global-radius-interactive-xl); /* M single toggle button (used within L toggle group) */
227
+ --button-radius-toggle-button-l: var(--global-radius-interactive-xxl); /* L single toggle button */
228
+ --button-radius-toggle-container-s: var(--global-radius-interactive-l); /* S toggle group */
229
+ --button-radius-toggle-container-m: var(--global-radius-interactive-xl); /* M toggle group */
230
+ --button-radius-toggle-container-l: var(--global-radius-interactive-xxl); /* L toggle group */
209
231
  --button-borderwidth-chip: var(--global-borderwidth-xs); /* chip button border width */
210
232
  --button-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary button. */
211
233
  --button-borderwidth-tertiary: var(--global-borderwidth-xs); /* tertiary button border */
package/css/frozenproduct/large/components/container.css CHANGED
@@ -45,11 +45,16 @@
45
45
  --container-color-calendar-gray-border-default: var(--modes-color-colorcode-gray-deep);
46
46
  --container-color-calendar-gray-pattern: var(--modes-color-colorcode-gray-deep);
47
47
  --container-color-interactive-bg-footer-activated: var(--modes-color-status-positive-default); /* */
48
+ --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-generic-active);
48
49
  --container-color-interactive-border-activated: var(--modes-color-status-positive-default);
49
50
  --container-color-interactive-bg-footer-default: var(--modes-color-generic-bg-nought); /* tile footer bg color */
50
51
  --container-color-interactive-bg-enabled: var(--modes-color-generic-bg-nought);
52
+ --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-generic-active);
53
+ --container-color-interactive-icon-active: var(--modes-color-interactive-monochrome-generic-active); /* Active chevron for any accordion. */
54
+ --container-color-interactive-text-active: var(--modes-color-interactive-monochrome-generic-active); /* Active label for any accordion. */
51
55
  --container-color-interactive-detailedicon-bg: var(--modes-color-custom-default); /* */
52
56
  --container-color-standard-bg-default: var(--modes-color-generic-bg-nought);
57
+ --container-color-standard-border-active: var(--modes-color-interactive-monochrome-generic-active);
53
58
  --container-typography-adaptive-heading-m: var(--global-typography-adaptive-heading-s); /* Accordion, Subscription tile, Tile select and generic tile or card headings */
54
59
  --container-typography-adaptive-heading-l: var(--global-typography-adaptive-heading-m); /* Dialog, drawer and sidebar headings */
55
60
  --container-typography-adaptive-subheading-m: var(--global-typography-adaptive-subheading-m); /* Accordion subheading, Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading */
@@ -70,17 +75,16 @@
70
75
  --container-typography-responsive-paragraph-l: var(--global-typography-responsive-component-moderate-l);
71
76
  --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
72
77
  --container-color-calendar-label-alt: var(--modes-color-generic-content-nought); /* Accessible on calendar bg-alt colors. */
73
- --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-generic-active);
74
78
  --container-color-interactive-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt); /* Used for accordion hover backgrounds */
75
- --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-generic-active);
76
- --container-color-interactive-icon-active: var(--modes-color-interactive-monochrome-generic-active); /* Active chevron for any accordion. */
77
- --container-color-interactive-text-active: var(--modes-color-interactive-monochrome-generic-active); /* Active label for any accordion. */
79
+ --container-color-interactive-icon-enabled: var(--modes-color-interactive-monochrome-generic-default); /* Enabled chevron for any accordion. */
80
+ --container-color-interactive-icon-alt-enabled: var(--modes-color-interactive-monochrome-generic-default-alt); /* Enabled label for subtle accordion. */
81
+ --container-color-interactive-icon-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover chevron for any accordion. */
78
82
  --container-color-interactive-text-enabled: var(--modes-color-generic-content-harsh); /* Enabled label for standard accordion. */
79
83
  --container-color-interactive-text-alt-enabled: var(--modes-color-generic-content-moderate); /* Enabled label for subtle accordion. */
84
+ --container-color-interactive-text-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover label for any accordion. */
80
85
  --container-color-scrollbar-bg-default: var(--modes-color-generic-bg-faint);
81
86
  --container-color-standard-bg-alt: var(--modes-color-generic-bg-faint);
82
87
  --container-color-standard-bg-footer-default: var(--modes-color-generic-bg-faint); /* tile footer bg color */
83
- --container-color-standard-border-active: var(--modes-color-interactive-monochrome-generic-active);
84
88
  --container-color-standard-dimmer: var(--modes-color-interactive-inactive-mask); /* dimmed mask for dialogs */
85
89
  --container-color-standard-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
86
90
  --container-color-standard-text-default: var(--modes-color-generic-content-harsh); /* for headings, paragraph text etc */
@@ -98,13 +102,9 @@
98
102
  --container-color-interactive-border-alt: var(--modes-color-generic-fg-delicate); /* Link preview. */
99
103
  --container-color-interactive-border-inactive: var(--modes-color-generic-fg-soft);
100
104
  --container-color-interactive-border-enabled: var(--modes-color-generic-fg-moderate);
101
- --container-color-interactive-icon-enabled: var(--modes-color-interactive-monochrome-generic-default); /* Enabled chevron for any accordion. */
102
- --container-color-interactive-icon-alt-enabled: var(--modes-color-interactive-monochrome-generic-default-alt); /* Enabled label for subtle accordion. */
103
- --container-color-interactive-icon-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover chevron for any accordion. */
104
105
  --container-color-interactive-label-footer-active: var(--modes-color-interactive-monochrome-generic-with-active);
105
106
  --container-color-interactive-label-footer-activated: var(--modes-color-interactive-monochrome-generic-with-active);
106
107
  --container-color-interactive-text-disabled: var(--modes-color-interactive-inactive-content);
107
- --container-color-interactive-text-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover label for any accordion. */
108
108
  --container-color-scrollbar-fg-default: var(--modes-color-generic-fg-moderate);
109
109
  --container-color-standard-border-alt: var(--modes-color-generic-fg-soft);
110
110
  --container-color-standard-border-default: var(--modes-color-generic-fg-faint);
package/css/frozenproduct/large/components/form.css CHANGED
@@ -12,56 +12,56 @@
12
12
  --form-radius-calendar-none: var(--global-radius-none); /* Calendar (start and end duration) */
13
13
  --form-radius-calendar-date: var(--global-radius-circle); /* Calendar date (hover & selected), */
14
14
  --form-color-colorpicker-label-default: var(--modes-color-generic-content-extreme); /* Accessible on colorpicker bg-default colors. */
15
- --form-color-colorpicker-blue-border: var(--modes-color-colorcode-blue-deep);
16
15
  --form-color-colorpicker-blue-bg-alt: var(--modes-color-colorcode-blue-deep);
17
16
  --form-color-colorpicker-blue-bg-default: var(--modes-color-colorcode-blue-muted);
17
+ --form-color-colorpicker-blue-border: var(--modes-color-colorcode-blue-deep);
18
18
  --form-color-colorpicker-blue-pattern: var(--modes-color-colorcode-blue-deep);
19
19
  --form-color-colorpicker-blue-label-default: var(--modes-color-colorcode-blue-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
20
- --form-color-colorpicker-teal-border: var(--modes-color-colorcode-teal-deep);
21
20
  --form-color-colorpicker-teal-bg-alt: var(--modes-color-colorcode-teal-deep);
22
21
  --form-color-colorpicker-teal-bg-default: var(--modes-color-colorcode-teal-muted);
22
+ --form-color-colorpicker-teal-border: var(--modes-color-colorcode-teal-deep);
23
23
  --form-color-colorpicker-teal-pattern: var(--modes-color-colorcode-teal-deep);
24
24
  --form-color-colorpicker-teal-label-default: var(--modes-color-colorcode-teal-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
25
- --form-color-colorpicker-green-border: var(--modes-color-colorcode-green-deep);
26
25
  --form-color-colorpicker-green-bg-alt: var(--modes-color-colorcode-green-deep);
27
26
  --form-color-colorpicker-green-bg-default: var(--modes-color-colorcode-green-muted);
27
+ --form-color-colorpicker-green-border: var(--modes-color-colorcode-green-deep);
28
28
  --form-color-colorpicker-green-pattern: var(--modes-color-colorcode-green-deep);
29
29
  --form-color-colorpicker-green-label-default: var(--modes-color-colorcode-green-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
30
- --form-color-colorpicker-lime-border: var(--modes-color-colorcode-lime-deep);
31
30
  --form-color-colorpicker-lime-bg-alt: var(--modes-color-colorcode-lime-deep);
32
31
  --form-color-colorpicker-lime-bg-default: var(--modes-color-colorcode-lime-muted);
32
+ --form-color-colorpicker-lime-border: var(--modes-color-colorcode-lime-deep);
33
33
  --form-color-colorpicker-lime-pattern: var(--modes-color-colorcode-lime-deep);
34
34
  --form-color-colorpicker-lime-label-default: var(--modes-color-colorcode-lime-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
35
- --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-deep);
36
35
  --form-color-colorpicker-orange-bg-alt: var(--modes-color-colorcode-orange-deep);
37
36
  --form-color-colorpicker-orange-bg-default: var(--modes-color-colorcode-orange-muted);
37
+ --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-deep);
38
38
  --form-color-colorpicker-orange-pattern: var(--modes-color-colorcode-orange-deep);
39
39
  --form-color-colorpicker-orange-label-default: var(--modes-color-colorcode-orange-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
40
40
  --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-deep);
41
- --form-color-colorpicker-red-bg-alt: var(--modes-color-colorcode-red-deep);
42
41
  --form-color-colorpicker-red-bg-default: var(--modes-color-colorcode-red-muted);
42
+ --form-color-colorpicker-red-bg-alt: var(--modes-color-colorcode-red-deep);
43
43
  --form-color-colorpicker-red-pattern: var(--modes-color-colorcode-red-deep);
44
44
  --form-color-colorpicker-red-label-default: var(--modes-color-colorcode-red-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
45
45
  --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-deep);
46
- --form-color-colorpicker-pink-bg-alt: var(--modes-color-colorcode-pink-deep);
47
46
  --form-color-colorpicker-pink-bg-default: var(--modes-color-colorcode-pink-muted);
47
+ --form-color-colorpicker-pink-bg-alt: var(--modes-color-colorcode-pink-deep);
48
48
  --form-color-colorpicker-pink-pattern: var(--modes-color-colorcode-pink-deep);
49
49
  --form-color-colorpicker-pink-label-default: var(--modes-color-colorcode-pink-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
50
50
  --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-deep);
51
- --form-color-colorpicker-purple-bg-alt: var(--modes-color-colorcode-purple-deep);
52
51
  --form-color-colorpicker-purple-bg-default: var(--modes-color-colorcode-purple-muted);
52
+ --form-color-colorpicker-purple-bg-alt: var(--modes-color-colorcode-purple-deep);
53
53
  --form-color-colorpicker-purple-pattern: var(--modes-color-colorcode-purple-deep);
54
54
  --form-color-colorpicker-purple-label-default: var(--modes-color-colorcode-purple-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
55
- --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-deep);
56
- --form-color-colorpicker-slate-bg-alt: var(--modes-color-colorcode-slate-deep);
57
- --form-color-colorpicker-slate-bg-default: var(--modes-color-colorcode-slate-muted);
58
- --form-color-colorpicker-slate-pattern: var(--modes-color-colorcode-slate-deep);
59
- --form-color-colorpicker-slate-label-default: var(--modes-color-colorcode-slate-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
60
55
  --form-color-colorpicker-gray-border: var(--modes-color-colorcode-gray-deep);
61
- --form-color-colorpicker-gray-bg-alt: var(--modes-color-colorcode-gray-deep);
62
56
  --form-color-colorpicker-gray-bg-default: var(--modes-color-colorcode-gray-muted);
57
+ --form-color-colorpicker-gray-bg-alt: var(--modes-color-colorcode-gray-deep);
63
58
  --form-color-colorpicker-gray-pattern: var(--modes-color-colorcode-gray-deep);
64
59
  --form-color-colorpicker-gray-label-default: var(--modes-color-colorcode-gray-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
60
+ --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-deep);
61
+ --form-color-colorpicker-slate-bg-default: var(--modes-color-colorcode-slate-muted);
62
+ --form-color-colorpicker-slate-bg-alt: var(--modes-color-colorcode-slate-deep);
63
+ --form-color-colorpicker-slate-pattern: var(--modes-color-colorcode-slate-deep);
64
+ --form-color-colorpicker-slate-label-default: var(--modes-color-colorcode-slate-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
65
65
  --form-color-labelset-label-required: var(--modes-color-interactive-danger-default);
66
66
  --form-color-validation-border-error: var(--modes-color-status-negative-default);
67
67
  --form-color-validation-bar-error: var(--modes-color-status-negative-default); /* error bar to left of inputs */
@@ -229,8 +229,9 @@
229
229
  --form-size-checkbox-s: var(--global-size-macro-xxs); /* S checkboxes */
230
230
  --form-size-checkbox-m: var(--global-size-macro-xs); /* M checkboxes */
231
231
  --form-size-checkbox-l: var(--global-size-macro-s); /* L checkboxes */
232
- --form-size-colorpicker-swatch: var(--global-size-macro-m); /* width and height of color picker swatch */
232
+ --form-size-colorpicker-swatch: var(--global-size-macro-s); /* width and height of color picker swatch */
233
233
  --form-size-colorpicker-swatchcontainer: calc(var(--global-size-macro-xxxl) + var(--global-size-micro-m)); /* width of swatch parent container */
234
+ --form-size-colorpicker-swatchselected: var(--global-size-macro-m)/2; /* selected swatch */
234
235
  --form-size-dropdown-subtle-s: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
235
236
  --form-size-dropdown-subtle-m: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
236
237
  --form-size-dropdown-subtle-l: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
package/css/frozenproduct/small/components/button.css CHANGED
@@ -12,8 +12,8 @@
12
12
  --button-radius-none: var(--global-radius-none);
13
13
  --button-radius-fab: var(--global-radius-circle); /* FAB Button radius */
14
14
  --button-borderwidth-none: var(--global-borderwidth-none); /* Override on tertiary buttons within Button-toggle. */
15
- --button-borderwidth-tertiarymarketing: var(--global-borderwidth-none); /* tertiary button border used for a marketing override */
16
15
  --button-borderwidth-primary: var(--global-borderwidth-none); /* primary button border */
16
+ --button-borderwidth-tertiarymarketing: var(--global-borderwidth-none); /* tertiary button border used for a marketing override */
17
17
  --button-color-none: var(--modes-color-none); /* transparent override used for hiding colors when needed. */
18
18
  --button-color-ai-border-active: var(--modes-color-interactive-ai-default);
19
19
  --button-color-ai-border-enabled: var(--modes-color-interactive-ai-default);
@@ -27,24 +27,24 @@
27
27
  --button-typography-adaptive-secondary-s: var(--global-typography-adaptive-component-firm-s);
28
28
  --button-typography-adaptive-secondary-m: var(--global-typography-adaptive-component-firm-m);
29
29
  --button-typography-adaptive-secondary-l: var(--global-typography-adaptive-component-firm-l);
30
- --button-typography-adaptive-tertiary-s: var(--global-typography-adaptive-component-firm-s);
31
- --button-typography-adaptive-tertiary-m: var(--global-typography-adaptive-component-firm-m);
32
- --button-typography-adaptive-tertiary-l: var(--global-typography-adaptive-component-firm-l);
33
30
  --button-typography-adaptive-subtle-s: var(--global-typography-adaptive-component-firm-s);
34
31
  --button-typography-adaptive-subtle-m: var(--global-typography-adaptive-component-firm-m);
35
32
  --button-typography-adaptive-subtle-l: var(--global-typography-adaptive-component-firm-l);
33
+ --button-typography-adaptive-tertiary-s: var(--global-typography-adaptive-component-firm-s);
34
+ --button-typography-adaptive-tertiary-m: var(--global-typography-adaptive-component-firm-m);
35
+ --button-typography-adaptive-tertiary-l: var(--global-typography-adaptive-component-firm-l);
36
36
  --button-typography-responsive-primary-s: var(--global-typography-responsive-component-firm-s);
37
37
  --button-typography-responsive-primary-m: var(--global-typography-responsive-component-firm-m);
38
38
  --button-typography-responsive-primary-l: var(--global-typography-responsive-component-firm-l);
39
39
  --button-typography-responsive-secondary-s: var(--global-typography-responsive-component-firm-s);
40
40
  --button-typography-responsive-secondary-m: var(--global-typography-responsive-component-firm-m);
41
41
  --button-typography-responsive-secondary-l: var(--global-typography-responsive-component-firm-l);
42
- --button-typography-responsive-tertiary-s: var(--global-typography-responsive-component-firm-s);
43
- --button-typography-responsive-tertiary-m: var(--global-typography-responsive-component-firm-m);
44
- --button-typography-responsive-tertiary-l: var(--global-typography-responsive-component-firm-l);
45
42
  --button-typography-responsive-subtle-s: var(--global-typography-responsive-component-firm-s);
46
43
  --button-typography-responsive-subtle-m: var(--global-typography-responsive-component-firm-m);
47
44
  --button-typography-responsive-subtle-l: var(--global-typography-responsive-component-firm-l);
45
+ --button-typography-responsive-tertiary-s: var(--global-typography-responsive-component-firm-s);
46
+ --button-typography-responsive-tertiary-m: var(--global-typography-responsive-component-firm-m);
47
+ --button-typography-responsive-tertiary-l: var(--global-typography-responsive-component-firm-l);
48
48
  --button-color-ai-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
49
49
  --button-color-destructive-primary-bg-hover: var(--modes-color-interactive-danger-hover);
50
50
  --button-color-destructive-secondary-border-hover: var(--modes-color-interactive-danger-hover);
@@ -67,6 +67,10 @@
67
67
  --button-size-s: var(--global-size-macro-s); /* min-height on S Buttons */
68
68
  --button-size-m: var(--global-size-macro-m); /* min-height on M Buttons */
69
69
  --button-size-l: var(--global-size-macro-l); /* min-height on L Buttons */
70
+ --button-size-toggle-xs: var(--global-size-macro-xs); /* min-height on button within S toggle group */
71
+ --button-size-toggle-s: var(--global-size-macro-s); /* min-height on S single toggle, and on button within M toggle group */
72
+ --button-size-toggle-m: var(--global-size-macro-m); /* min-height on M single toggle, and on button within L toggle group */
73
+ --button-size-toggle-l: var(--global-size-macro-l); /* min-height on L single toggle */
70
74
  --button-size-icon-m: var(--global-size-icon-m);
71
75
  --button-size-video-s: var(--global-size-macro-m);
72
76
  --button-size-video-m: var(--global-size-macro-xxl);
@@ -137,18 +141,29 @@
137
141
  --button-space-tertiary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only processing button */
138
142
  --button-space-tertiary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only processing button */
139
143
  --button-space-tertiary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only processing button */
144
+ --button-space-toggle-button-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS asset used within S toggle group */
145
+ --button-space-toggle-button-x-s: var(--global-space-macro-xxs); /* Left and right padding on S toggle buttons */
140
146
  --button-space-toggle-button-x-m: var(--global-space-macro-xs); /* Left and right padding on medium toggle buttons */
141
147
  --button-space-toggle-button-x-l: var(--global-space-macro-s); /* Left and right padding on buttons */
148
+ --button-space-toggle-button-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside toggle buttons */
142
149
  --button-space-toggle-button-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside toggle buttons */
143
150
  --button-space-toggle-button-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside toggle buttons */
144
- --button-space-toggle-button-y-m: var(--global-space-micro-s); /* Top and bottom padding on toggle buttons */
145
- --button-space-toggle-button-y-l: var(--global-space-micro-m); /* Top and bottom padding on toggle buttons */
151
+ --button-space-toggle-button-y-xs: var(--global-space-micro-xs)-0.5; /* Top and bottom padding on toggle buttons */
152
+ --button-space-toggle-button-y-s: var(--global-space-micro-s); /* Top and bottom padding on toggle buttons */
153
+ --button-space-toggle-button-y-m: var(--global-space-micro-l); /* Top and bottom padding on toggle buttons */
154
+ --button-space-toggle-button-y-l: var(--global-space-micro-xl)-0.5; /* Top and bottom padding on toggle buttons */
155
+ --button-space-toggle-container-x-s: var(--global-space-micro-s); /* Horizontal padding */
146
156
  --button-space-toggle-container-x-m: var(--global-space-micro-s); /* Horizontal padding */
147
157
  --button-space-toggle-container-x-l: var(--global-space-micro-s); /* Horizontal padding */
158
+ --button-space-toggle-container-xg-s: var(--global-space-micro-l); /* Spacing between buttons in Toggle. */
148
159
  --button-space-toggle-container-xg-m: var(--global-space-micro-l); /* Spacing between buttons in Toggle. */
149
160
  --button-space-toggle-container-xg-l: var(--global-space-micro-l); /* Spacing between buttons in Toggle. */
161
+ --button-space-toggle-container-y-s: var(--global-space-micro-s); /* Vertical padding */
150
162
  --button-space-toggle-container-y-m: var(--global-space-micro-s); /* Vertical padding */
151
163
  --button-space-toggle-container-y-l: var(--global-space-micro-s); /* Vertical padding */
164
+ --button-space-toggle-container-yg-s: var(--global-space-micro-l); /* Row gap between buttons in wrapped toggle group. */
165
+ --button-space-toggle-container-yg-m: var(--global-space-micro-l); /* Row gap between buttons in wrapped toggle group. */
166
+ --button-space-toggle-container-yg-l: var(--global-space-micro-l); /* Row gap between buttons in wrapped toggle group. */
152
167
  --button-space-video-x-s: var(--global-space-micro-xs); /* Left padding on play icon in video button */
153
168
  --button-space-video-x-m: var(--global-space-micro-xs); /* Left padding on play icon in video button */
154
169
  --button-space-video-x-l: var(--global-space-micro-xs); /* Left padding on play icon in video button */
@@ -200,12 +215,19 @@
200
215
  --button-radius-secondary-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
201
216
  --button-radius-secondary-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
202
217
  --button-radius-secondary-l: var(--global-radius-interactive-xxl); /* large tertiary button */
203
- --button-radius-tertiary-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
204
- --button-radius-tertiary-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
205
- --button-radius-tertiary-l: var(--global-radius-interactive-xxl); /* large tertiary button */
206
218
  --button-radius-subtle-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
207
219
  --button-radius-subtle-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
208
220
  --button-radius-subtle-l: var(--global-radius-interactive-xxl); /* large subtle button */
221
+ --button-radius-tertiary-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
222
+ --button-radius-tertiary-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
223
+ --button-radius-tertiary-l: var(--global-radius-interactive-xxl); /* large tertiary button */
224
+ --button-radius-toggle-button-xs: var(--global-radius-interactive-xxl)/2; /* XS single toggle button (used within S toggle group) */
225
+ --button-radius-toggle-button-s: var(--global-radius-interactive-l); /* S single toggle button (used within M toggle group) */
226
+ --button-radius-toggle-button-m: var(--global-radius-interactive-xl); /* M single toggle button (used within L toggle group) */
227
+ --button-radius-toggle-button-l: var(--global-radius-interactive-xxl); /* L single toggle button */
228
+ --button-radius-toggle-container-s: var(--global-radius-interactive-l); /* S toggle group */
229
+ --button-radius-toggle-container-m: var(--global-radius-interactive-xl); /* M toggle group */
230
+ --button-radius-toggle-container-l: var(--global-radius-interactive-xxl); /* L toggle group */
209
231
  --button-borderwidth-chip: var(--global-borderwidth-xs); /* chip button border width */
210
232
  --button-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary button. */
211
233
  --button-borderwidth-tertiary: var(--global-borderwidth-xs); /* tertiary button border */