@sage/design-tokens 7.2.0 → 7.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (218) hide show
  1. package/css/frozenproduct/all.css +32 -27
  2. package/css/frozenproduct/large/components/form.css +8 -3
  3. package/css/frozenproduct/large/components/progress.css +6 -6
  4. package/css/frozenproduct/large/components/tab.css +1 -1
  5. package/css/frozenproduct/small/components/button.css +23 -23
  6. package/css/frozenproduct/small/components/form.css +8 -3
  7. package/css/frozenproduct/small/components/tab.css +1 -1
  8. package/css/marketing/all.css +9 -4
  9. package/css/marketing/large/components/form.css +8 -3
  10. package/css/marketing/large/components/tab.css +1 -1
  11. package/css/marketing/small/components/form.css +8 -3
  12. package/css/marketing/small/components/tab.css +1 -1
  13. package/css/product/all.css +9 -4
  14. package/css/product/large/components/form.css +8 -3
  15. package/css/product/large/components/tab.css +1 -1
  16. package/css/product/small/components/form.css +8 -3
  17. package/css/product/small/components/tab.css +1 -1
  18. package/ios/frozenproduct/large/dark/components/form.h +8 -3
  19. package/ios/frozenproduct/large/dark/components/tab.h +1 -1
  20. package/ios/frozenproduct/large/light/components/form.h +8 -3
  21. package/ios/frozenproduct/large/light/components/tab.h +1 -1
  22. package/ios/frozenproduct/small/dark/components/form.h +8 -3
  23. package/ios/frozenproduct/small/dark/components/tab.h +1 -1
  24. package/ios/frozenproduct/small/light/components/form.h +8 -3
  25. package/ios/frozenproduct/small/light/components/tab.h +1 -1
  26. package/ios/marketing/large/dark/components/form.h +8 -3
  27. package/ios/marketing/large/dark/components/tab.h +1 -1
  28. package/ios/marketing/large/light/components/form.h +8 -3
  29. package/ios/marketing/large/light/components/tab.h +1 -1
  30. package/ios/marketing/small/dark/components/form.h +8 -3
  31. package/ios/marketing/small/dark/components/tab.h +1 -1
  32. package/ios/marketing/small/light/components/form.h +8 -3
  33. package/ios/marketing/small/light/components/tab.h +1 -1
  34. package/ios/product/large/dark/components/form.h +8 -3
  35. package/ios/product/large/dark/components/tab.h +1 -1
  36. package/ios/product/large/light/components/form.h +8 -3
  37. package/ios/product/large/light/components/tab.h +1 -1
  38. package/ios/product/small/dark/components/form.h +8 -3
  39. package/ios/product/small/dark/components/tab.h +1 -1
  40. package/ios/product/small/light/components/form.h +8 -3
  41. package/ios/product/small/light/components/tab.h +1 -1
  42. package/js/common/frozenproduct/large/dark/components/form.d.ts +11 -0
  43. package/js/common/frozenproduct/large/dark/components/form.js +119 -6
  44. package/js/common/frozenproduct/large/dark/components/tab.js +2 -2
  45. package/js/common/frozenproduct/large/light/components/form.d.ts +11 -0
  46. package/js/common/frozenproduct/large/light/components/form.js +119 -6
  47. package/js/common/frozenproduct/large/light/components/tab.js +2 -2
  48. package/js/common/frozenproduct/small/dark/components/form.d.ts +11 -0
  49. package/js/common/frozenproduct/small/dark/components/form.js +119 -6
  50. package/js/common/frozenproduct/small/dark/components/tab.js +2 -2
  51. package/js/common/frozenproduct/small/light/components/form.d.ts +11 -0
  52. package/js/common/frozenproduct/small/light/components/form.js +119 -6
  53. package/js/common/frozenproduct/small/light/components/tab.js +2 -2
  54. package/js/common/marketing/large/dark/components/form.d.ts +11 -0
  55. package/js/common/marketing/large/dark/components/form.js +119 -6
  56. package/js/common/marketing/large/dark/components/tab.js +2 -2
  57. package/js/common/marketing/large/light/components/form.d.ts +11 -0
  58. package/js/common/marketing/large/light/components/form.js +119 -6
  59. package/js/common/marketing/large/light/components/tab.js +2 -2
  60. package/js/common/marketing/small/dark/components/form.d.ts +11 -0
  61. package/js/common/marketing/small/dark/components/form.js +119 -6
  62. package/js/common/marketing/small/dark/components/tab.js +2 -2
  63. package/js/common/marketing/small/light/components/form.d.ts +11 -0
  64. package/js/common/marketing/small/light/components/form.js +119 -6
  65. package/js/common/marketing/small/light/components/tab.js +2 -2
  66. package/js/common/product/large/dark/components/form.d.ts +11 -0
  67. package/js/common/product/large/dark/components/form.js +119 -6
  68. package/js/common/product/large/dark/components/tab.js +2 -2
  69. package/js/common/product/large/light/components/form.d.ts +11 -0
  70. package/js/common/product/large/light/components/form.js +119 -6
  71. package/js/common/product/large/light/components/tab.js +2 -2
  72. package/js/common/product/small/dark/components/form.d.ts +11 -0
  73. package/js/common/product/small/dark/components/form.js +119 -6
  74. package/js/common/product/small/dark/components/tab.js +2 -2
  75. package/js/common/product/small/light/components/form.d.ts +11 -0
  76. package/js/common/product/small/light/components/form.js +119 -6
  77. package/js/common/product/small/light/components/tab.js +2 -2
  78. package/js/es6/frozenproduct/large/dark/components/form.d.ts +5 -0
  79. package/js/es6/frozenproduct/large/dark/components/form.js +8 -3
  80. package/js/es6/frozenproduct/large/dark/components/tab.js +1 -1
  81. package/js/es6/frozenproduct/large/light/components/form.d.ts +5 -0
  82. package/js/es6/frozenproduct/large/light/components/form.js +8 -3
  83. package/js/es6/frozenproduct/large/light/components/tab.js +1 -1
  84. package/js/es6/frozenproduct/small/dark/components/form.d.ts +5 -0
  85. package/js/es6/frozenproduct/small/dark/components/form.js +8 -3
  86. package/js/es6/frozenproduct/small/dark/components/tab.js +1 -1
  87. package/js/es6/frozenproduct/small/light/components/form.d.ts +5 -0
  88. package/js/es6/frozenproduct/small/light/components/form.js +8 -3
  89. package/js/es6/frozenproduct/small/light/components/tab.js +1 -1
  90. package/js/es6/marketing/large/dark/components/form.d.ts +5 -0
  91. package/js/es6/marketing/large/dark/components/form.js +8 -3
  92. package/js/es6/marketing/large/dark/components/tab.js +1 -1
  93. package/js/es6/marketing/large/light/components/form.d.ts +5 -0
  94. package/js/es6/marketing/large/light/components/form.js +8 -3
  95. package/js/es6/marketing/large/light/components/tab.js +1 -1
  96. package/js/es6/marketing/small/dark/components/form.d.ts +5 -0
  97. package/js/es6/marketing/small/dark/components/form.js +8 -3
  98. package/js/es6/marketing/small/dark/components/tab.js +1 -1
  99. package/js/es6/marketing/small/light/components/form.d.ts +5 -0
  100. package/js/es6/marketing/small/light/components/form.js +8 -3
  101. package/js/es6/marketing/small/light/components/tab.js +1 -1
  102. package/js/es6/product/large/dark/components/form.d.ts +5 -0
  103. package/js/es6/product/large/dark/components/form.js +8 -3
  104. package/js/es6/product/large/dark/components/tab.js +1 -1
  105. package/js/es6/product/large/light/components/form.d.ts +5 -0
  106. package/js/es6/product/large/light/components/form.js +8 -3
  107. package/js/es6/product/large/light/components/tab.js +1 -1
  108. package/js/es6/product/small/dark/components/form.d.ts +5 -0
  109. package/js/es6/product/small/dark/components/form.js +8 -3
  110. package/js/es6/product/small/dark/components/tab.js +1 -1
  111. package/js/es6/product/small/light/components/form.d.ts +5 -0
  112. package/js/es6/product/small/light/components/form.js +8 -3
  113. package/js/es6/product/small/light/components/tab.js +1 -1
  114. package/js/umd/frozenproduct/large/dark/components/form.js +119 -6
  115. package/js/umd/frozenproduct/large/dark/components/tab.js +2 -2
  116. package/js/umd/frozenproduct/large/light/components/form.js +119 -6
  117. package/js/umd/frozenproduct/large/light/components/tab.js +2 -2
  118. package/js/umd/frozenproduct/small/dark/components/form.js +119 -6
  119. package/js/umd/frozenproduct/small/dark/components/tab.js +2 -2
  120. package/js/umd/frozenproduct/small/light/components/form.js +119 -6
  121. package/js/umd/frozenproduct/small/light/components/tab.js +2 -2
  122. package/js/umd/marketing/large/dark/components/form.js +119 -6
  123. package/js/umd/marketing/large/dark/components/tab.js +2 -2
  124. package/js/umd/marketing/large/light/components/form.js +119 -6
  125. package/js/umd/marketing/large/light/components/tab.js +2 -2
  126. package/js/umd/marketing/small/dark/components/form.js +119 -6
  127. package/js/umd/marketing/small/dark/components/tab.js +2 -2
  128. package/js/umd/marketing/small/light/components/form.js +119 -6
  129. package/js/umd/marketing/small/light/components/tab.js +2 -2
  130. package/js/umd/product/large/dark/components/form.js +119 -6
  131. package/js/umd/product/large/dark/components/tab.js +2 -2
  132. package/js/umd/product/large/light/components/form.js +119 -6
  133. package/js/umd/product/large/light/components/tab.js +2 -2
  134. package/js/umd/product/small/dark/components/form.js +119 -6
  135. package/js/umd/product/small/dark/components/tab.js +2 -2
  136. package/js/umd/product/small/light/components/form.js +119 -6
  137. package/js/umd/product/small/light/components/tab.js +2 -2
  138. package/json/flat/frozenproduct/large/dark/components/form.json +8 -3
  139. package/json/flat/frozenproduct/large/dark/components/tab.json +1 -1
  140. package/json/flat/frozenproduct/large/light/components/form.json +8 -3
  141. package/json/flat/frozenproduct/large/light/components/tab.json +1 -1
  142. package/json/flat/frozenproduct/small/dark/components/form.json +8 -3
  143. package/json/flat/frozenproduct/small/dark/components/tab.json +1 -1
  144. package/json/flat/frozenproduct/small/light/components/form.json +8 -3
  145. package/json/flat/frozenproduct/small/light/components/tab.json +1 -1
  146. package/json/flat/marketing/large/dark/components/form.json +8 -3
  147. package/json/flat/marketing/large/dark/components/tab.json +1 -1
  148. package/json/flat/marketing/large/light/components/form.json +8 -3
  149. package/json/flat/marketing/large/light/components/tab.json +1 -1
  150. package/json/flat/marketing/small/dark/components/form.json +8 -3
  151. package/json/flat/marketing/small/dark/components/tab.json +1 -1
  152. package/json/flat/marketing/small/light/components/form.json +8 -3
  153. package/json/flat/marketing/small/light/components/tab.json +1 -1
  154. package/json/flat/product/large/dark/components/form.json +8 -3
  155. package/json/flat/product/large/dark/components/tab.json +1 -1
  156. package/json/flat/product/large/light/components/form.json +8 -3
  157. package/json/flat/product/large/light/components/tab.json +1 -1
  158. package/json/flat/product/small/dark/components/form.json +8 -3
  159. package/json/flat/product/small/dark/components/tab.json +1 -1
  160. package/json/flat/product/small/light/components/form.json +8 -3
  161. package/json/flat/product/small/light/components/tab.json +1 -1
  162. package/json/nested/frozenproduct/large/dark/components/form.json +14 -3
  163. package/json/nested/frozenproduct/large/dark/components/tab.json +1 -1
  164. package/json/nested/frozenproduct/large/light/components/form.json +14 -3
  165. package/json/nested/frozenproduct/large/light/components/tab.json +1 -1
  166. package/json/nested/frozenproduct/small/dark/components/form.json +14 -3
  167. package/json/nested/frozenproduct/small/dark/components/tab.json +1 -1
  168. package/json/nested/frozenproduct/small/light/components/form.json +14 -3
  169. package/json/nested/frozenproduct/small/light/components/tab.json +1 -1
  170. package/json/nested/marketing/large/dark/components/form.json +14 -3
  171. package/json/nested/marketing/large/dark/components/tab.json +1 -1
  172. package/json/nested/marketing/large/light/components/form.json +14 -3
  173. package/json/nested/marketing/large/light/components/tab.json +1 -1
  174. package/json/nested/marketing/small/dark/components/form.json +14 -3
  175. package/json/nested/marketing/small/dark/components/tab.json +1 -1
  176. package/json/nested/marketing/small/light/components/form.json +14 -3
  177. package/json/nested/marketing/small/light/components/tab.json +1 -1
  178. package/json/nested/product/large/dark/components/form.json +14 -3
  179. package/json/nested/product/large/dark/components/tab.json +1 -1
  180. package/json/nested/product/large/light/components/form.json +14 -3
  181. package/json/nested/product/large/light/components/tab.json +1 -1
  182. package/json/nested/product/small/dark/components/form.json +14 -3
  183. package/json/nested/product/small/dark/components/tab.json +1 -1
  184. package/json/nested/product/small/light/components/form.json +14 -3
  185. package/json/nested/product/small/light/components/tab.json +1 -1
  186. package/package.json +1 -1
  187. package/sage-design-tokens-7.3.1.tgz +0 -0
  188. package/scss/frozenproduct/large/components/button.scss +23 -23
  189. package/scss/frozenproduct/large/components/container.scss +9 -9
  190. package/scss/frozenproduct/large/components/form.scss +15 -10
  191. package/scss/frozenproduct/large/components/link.scss +2 -2
  192. package/scss/frozenproduct/large/components/nav.scss +3 -3
  193. package/scss/frozenproduct/large/components/page.scss +1 -1
  194. package/scss/frozenproduct/large/components/popover.scss +2 -2
  195. package/scss/frozenproduct/large/components/progress.scss +6 -6
  196. package/scss/frozenproduct/large/components/status.scss +3 -3
  197. package/scss/frozenproduct/large/components/tab.scss +8 -8
  198. package/scss/frozenproduct/large/components/table.scss +10 -10
  199. package/scss/frozenproduct/small/components/form.scss +8 -3
  200. package/scss/frozenproduct/small/components/tab.scss +1 -1
  201. package/scss/marketing/large/components/form.scss +8 -3
  202. package/scss/marketing/large/components/tab.scss +1 -1
  203. package/scss/marketing/small/components/button.scss +23 -23
  204. package/scss/marketing/small/components/container.scss +9 -9
  205. package/scss/marketing/small/components/form.scss +15 -10
  206. package/scss/marketing/small/components/link.scss +2 -2
  207. package/scss/marketing/small/components/nav.scss +3 -3
  208. package/scss/marketing/small/components/page.scss +1 -1
  209. package/scss/marketing/small/components/popover.scss +2 -2
  210. package/scss/marketing/small/components/progress.scss +6 -6
  211. package/scss/marketing/small/components/status.scss +3 -3
  212. package/scss/marketing/small/components/tab.scss +8 -8
  213. package/scss/marketing/small/components/table.scss +10 -10
  214. package/scss/product/large/components/form.scss +8 -3
  215. package/scss/product/large/components/tab.scss +1 -1
  216. package/scss/product/small/components/form.scss +8 -3
  217. package/scss/product/small/components/tab.scss +1 -1
  218. package/sage-design-tokens-7.2.0.tgz +0 -0
package/css/frozenproduct/all.css CHANGED
@@ -531,6 +531,9 @@
531
531
  --button-color-destructive-primary-bg-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
532
532
  --button-color-destructive-secondary-border-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
533
533
  --button-color-destructive-secondary-label-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
534
+ --button-color-typical-secondary-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
535
+ --button-color-typical-tertiary-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
536
+ --button-color-typical-toggle-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
534
537
  --button-typography-primary-s: var(--global-typography-component-firm-s);
535
538
  --button-typography-primary-m: var(--global-typography-component-firm-m);
536
539
  --button-typography-primary-l: var(--global-typography-component-firm-l);
@@ -543,24 +546,34 @@
543
546
  --button-typography-subtle-s: var(--global-typography-component-firm-s);
544
547
  --button-typography-subtle-m: var(--global-typography-component-firm-m);
545
548
  --button-typography-subtle-l: var(--global-typography-component-firm-l);
549
+ --button-color-ai-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
546
550
  --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));
547
551
  --button-color-destructive-primary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
548
552
  --button-color-destructive-secondary-border-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
549
553
  --button-color-destructive-secondary-label-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
550
554
  --button-color-typical-primary-bg-enabled: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
551
555
  --button-color-typical-secondary-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
552
- --button-color-typical-secondary-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
556
+ --button-color-typical-secondary-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
557
+ --button-color-typical-secondary-border-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
558
+ --button-color-typical-secondary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
553
559
  --button-color-typical-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
554
560
  --button-color-typical-subtle-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
561
+ --button-color-typical-subtle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
555
562
  --button-color-typical-subtle-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
556
563
  --button-color-typical-tertiary-bg-enabled: var(--button-color-none);
557
564
  --button-color-typical-tertiary-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
558
- --button-color-typical-tertiary-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
565
+ --button-color-typical-tertiary-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt2-light), var(--modes-color-interactive-monochrome-generic-default-alt2-dark));
566
+ --button-color-typical-tertiary-border-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
567
+ --button-color-typical-tertiary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
559
568
  --button-color-typical-tertiary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
560
- --button-color-typical-toggle-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
561
569
  --button-color-typical-toggle-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
570
+ --button-color-typical-toggle-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
571
+ --button-color-typical-toggle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark));
562
572
  --button-color-typical-toggle-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
563
573
  --button-color-video-bg-blur: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
574
+ --button-color-video-primary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
575
+ --button-color-video-primary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
576
+ --button-color-video-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
564
577
  --button-size-split: var(--global-size-micro-xxs); /* Split button (divider width) */
565
578
  --button-size-s: var(--global-size-macro-s); /* min-height on S Buttons */
566
579
  --button-size-m: var(--global-size-macro-m); /* min-height on M Buttons */
@@ -650,8 +663,8 @@
650
663
  --button-space-video-x-s: var(--global-space-micro-xs); /* Left padding on play icon in video button */
651
664
  --button-space-video-x-m: var(--global-space-micro-xs); /* Left padding on play icon in video button */
652
665
  --button-space-video-x-l: var(--global-space-micro-xs); /* Left padding on play icon in video button */
666
+ --button-color-ai-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
653
667
  --button-color-ai-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
654
- --button-color-ai-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
655
668
  --button-color-destructive-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
656
669
  --button-color-destructive-primary-label-enabled: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
657
670
  --button-color-destructive-primary-label-hover: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
@@ -664,30 +677,24 @@
664
677
  --button-color-typical-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
665
678
  --button-color-typical-primary-label-enabled: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
666
679
  --button-color-typical-primary-label-hover: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
667
- --button-color-typical-secondary-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
668
- --button-color-typical-secondary-border-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
680
+ --button-color-typical-secondary-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
681
+ --button-color-typical-secondary-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
669
682
  --button-color-typical-secondary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
670
- --button-color-typical-secondary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
683
+ --button-color-typical-subtle-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
684
+ --button-color-typical-subtle-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
671
685
  --button-color-typical-subtle-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
672
- --button-color-typical-subtle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
673
- --button-color-typical-tertiary-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt2-light), var(--modes-color-interactive-monochrome-generic-default-alt2-dark));
674
- --button-color-typical-tertiary-border-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
686
+ --button-color-typical-tertiary-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
687
+ --button-color-typical-tertiary-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
675
688
  --button-color-typical-tertiary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
676
- --button-color-typical-tertiary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
677
689
  --button-color-typical-toggle-label-active-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
678
- --button-color-typical-toggle-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
679
690
  --button-color-typical-toggle-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-light), var(--modes-color-interactive-monochrome-generic-with-active-dark));
680
691
  --button-color-typical-toggle-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
681
- --button-color-typical-toggle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark));
682
692
  --button-color-video-primary-bg-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
683
693
  --button-color-video-primary-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
684
- --button-color-video-primary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
685
- --button-color-video-primary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
686
694
  --button-color-video-secondary-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
687
695
  --button-color-video-secondary-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
688
696
  --button-color-video-secondary-border-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
689
697
  --button-color-video-secondary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
690
- --button-color-video-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
691
698
  --button-radius-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
692
699
  --button-radius-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) */
693
700
  --button-radius-l: var(--global-radius-interactive-xxl); /* Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container) */
@@ -709,19 +716,12 @@
709
716
  --button-borderwidth-tertiary: var(--global-borderwidth-xs); /* tertiary button border */
710
717
  --button-borderwidth-togglecontainer: var(--global-borderwidth-xs); /* Toggle container */
711
718
  --button-color-ai-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
712
- --button-color-ai-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
713
719
  --button-color-destructive-primary-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
714
720
  --button-color-destructive-secondary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
715
721
  --button-color-typical-primary-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
716
- --button-color-typical-secondary-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
717
722
  --button-color-typical-secondary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
718
- --button-color-typical-secondary-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
719
- --button-color-typical-subtle-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
720
- --button-color-typical-subtle-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
721
- --button-color-typical-tertiary-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
722
723
  --button-color-typical-tertiary-bg-active-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
723
724
  --button-color-typical-tertiary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
724
- --button-color-typical-tertiary-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
725
725
  --button-color-typical-toggle-bg-active-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
726
726
 
727
727
  /* container component tokens */
@@ -1121,15 +1121,18 @@
1121
1121
  --form-space-integral-yg-s: var(--global-space-micro-m); /* Space below labelset or error validation in form components */
1122
1122
  --form-space-integral-yg-m: var(--global-space-micro-l); /* Space below labelset or error validation in form components */
1123
1123
  --form-space-integral-yg-l: var(--global-space-micro-xl); /* Space below labelset or error validation in form components */
1124
- --form-space-integral-progressive-x-s: calc(var(--global-space-macro-m) - var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
1125
- --form-space-integral-progressive-x-m: var(--global-space-macro-l); /* Left padding on progressively shown form inputs on radio and checkbox */
1126
- --form-space-integral-progressive-x-l: calc(var(--global-space-macro-xl) + var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
1124
+ --form-space-integral-progressive-x-s: calc(var(--global-space-macro-xs) - 3); /* Left padding on progressively shown form inputs on radio and checkbox */
1125
+ --form-space-integral-progressive-x-m: var(--global-space-macro-s); /* Left padding on progressively shown form inputs on radio and checkbox */
1126
+ --form-space-integral-progressive-x-l: calc(var(--global-space-macro-m) + 1); /* Left padding on progressively shown form inputs on radio and checkbox */
1127
1127
  --form-space-integral-progressive-y-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
1128
1128
  --form-space-integral-progressive-y-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
1129
1129
  --form-space-integral-progressive-y-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
1130
1130
  --form-space-integral-progressive-yg-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
1131
1131
  --form-space-integral-progressive-yg-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
1132
1132
  --form-space-integral-progressive-yg-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
1133
+ --form-space-integral-progressive-keyline-x-s: calc(var(--global-space-macro-xxxs) - 1); /* Left padding on keyline for small progressively shown inputs */
1134
+ --form-space-integral-progressive-keyline-x-m: calc(var(--global-space-macro-xxs) - 1); /* Left padding on keyline for medium progressively shown inputs */
1135
+ --form-space-integral-progressive-keyline-x-l: calc(var(--global-space-macro-xs) - 1); /* Left padding on keyline for large progressively shown inputs */
1133
1136
  --form-space-rating-xg-m: var(--global-space-micro-l); /* small gap between rating stars */
1134
1137
  --form-space-rating-xg-l: var(--global-space-micro-xxl); /* medium gap between rating stars */
1135
1138
  --form-space-layout-stack-s: var(--global-space-macro-xs); /* Spacing between horizontal and vertical S form components */
@@ -1210,6 +1213,7 @@
1210
1213
  --form-size-switch-handle-icon-l: var(--global-size-icon-m); /* L switch icon inside knob */
1211
1214
  --form-size-textarea-m: calc(var(--global-size-macro-m) * 2); /* Min height for all text area sizes. */
1212
1215
  --form-size-validation-bar: var(--global-size-micro-xxs); /* 2px validation bar used on errors and warnings */
1216
+ --form-size-progressive-bar: var(--global-size-micro-xxs); /* 2px progressive disclosure keyline bar used in checkbox and radio groups */
1213
1217
  --form-size-rating-m: var(--global-size-icon-m); /* medium rating stars */
1214
1218
  --form-size-rating-l: var(--global-size-icon-xl); /* large rating stars */
1215
1219
  --form-color-calendar-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-alt-light), var(--modes-color-interactive-inactive-default-alt-dark));
@@ -1257,6 +1261,7 @@
1257
1261
  --form-radius-fileselector: var(--global-radius-container-m); /* File preview (file selector asset) */
1258
1262
  --form-radius-input: var(--global-radius-interactive-m); /* Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input */
1259
1263
  --form-radius-validationbar: var(--global-radius-interactive-xs); /* Validation bar */
1264
+ --form-radius-progressivebar: var(--global-radius-interactive-xs); /* Validation bar */
1260
1265
  --form-radius-calendar-today: var(--global-radius-container-xs); /* Calendar (today indicator) */
1261
1266
  --form-borderwidth-colorpicker: var(--global-borderwidth-xs); /* swatch border */
1262
1267
  --form-borderwidth-caution: var(--global-borderwidth-xs); /* Caution border */
@@ -1823,7 +1828,7 @@
1823
1828
  --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
1824
1829
  --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
1825
1830
  --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
1826
- --tab-borderwidth-navigation-bottom: var(--global-borderwidth-l); /* Tab (enabled and hover bottom border) */
1831
+ --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
1827
1832
  --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
1828
1833
 
1829
1834
  /* table component tokens */
package/css/frozenproduct/large/components/form.css CHANGED
@@ -118,15 +118,18 @@
118
118
  --form-space-integral-yg-s: var(--global-space-micro-m); /* Space below labelset or error validation in form components */
119
119
  --form-space-integral-yg-m: var(--global-space-micro-l); /* Space below labelset or error validation in form components */
120
120
  --form-space-integral-yg-l: var(--global-space-micro-xl); /* Space below labelset or error validation in form components */
121
- --form-space-integral-progressive-x-s: calc(var(--global-space-macro-m) - var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
122
- --form-space-integral-progressive-x-m: var(--global-space-macro-l); /* Left padding on progressively shown form inputs on radio and checkbox */
123
- --form-space-integral-progressive-x-l: calc(var(--global-space-macro-xl) + var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
121
+ --form-space-integral-progressive-x-s: calc(var(--global-space-macro-xs) - 3); /* Left padding on progressively shown form inputs on radio and checkbox */
122
+ --form-space-integral-progressive-x-m: var(--global-space-macro-s); /* Left padding on progressively shown form inputs on radio and checkbox */
123
+ --form-space-integral-progressive-x-l: calc(var(--global-space-macro-m) + 1); /* Left padding on progressively shown form inputs on radio and checkbox */
124
124
  --form-space-integral-progressive-y-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
125
125
  --form-space-integral-progressive-y-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
126
126
  --form-space-integral-progressive-y-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
127
127
  --form-space-integral-progressive-yg-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
128
128
  --form-space-integral-progressive-yg-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
129
129
  --form-space-integral-progressive-yg-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
130
+ --form-space-integral-progressive-keyline-x-s: calc(var(--global-space-macro-xxxs) - 1); /* Left padding on keyline for small progressively shown inputs */
131
+ --form-space-integral-progressive-keyline-x-m: calc(var(--global-space-macro-xxs) - 1); /* Left padding on keyline for medium progressively shown inputs */
132
+ --form-space-integral-progressive-keyline-x-l: calc(var(--global-space-macro-xs) - 1); /* Left padding on keyline for large progressively shown inputs */
130
133
  --form-space-rating-xg-m: var(--global-space-micro-l); /* small gap between rating stars */
131
134
  --form-space-rating-xg-l: var(--global-space-micro-xxl); /* medium gap between rating stars */
132
135
  --form-space-layout-stack-s: var(--global-space-macro-xs); /* Spacing between horizontal and vertical S form components */
@@ -207,6 +210,7 @@
207
210
  --form-size-switch-handle-icon-l: var(--global-size-icon-m); /* L switch icon inside knob */
208
211
  --form-size-textarea-m: calc(var(--global-size-macro-m) * 2); /* Min height for all text area sizes. */
209
212
  --form-size-validation-bar: var(--global-size-micro-xxs); /* 2px validation bar used on errors and warnings */
213
+ --form-size-progressive-bar: var(--global-size-micro-xxs); /* 2px progressive disclosure keyline bar used in checkbox and radio groups */
210
214
  --form-size-rating-m: var(--global-size-icon-m); /* medium rating stars */
211
215
  --form-size-rating-l: var(--global-size-icon-xl); /* large rating stars */
212
216
  --form-color-calendar-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
@@ -254,6 +258,7 @@
254
258
  --form-radius-fileselector: var(--global-radius-container-m); /* File preview (file selector asset) */
255
259
  --form-radius-input: var(--global-radius-interactive-m); /* Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input */
256
260
  --form-radius-validationbar: var(--global-radius-interactive-xs); /* Validation bar */
261
+ --form-radius-progressivebar: var(--global-radius-interactive-xs); /* Validation bar */
257
262
  --form-radius-calendar-today: var(--global-radius-container-xs); /* Calendar (today indicator) */
258
263
  --form-borderwidth-colorpicker: var(--global-borderwidth-xs); /* swatch border */
259
264
  --form-borderwidth-caution: var(--global-borderwidth-xs); /* Caution border */
package/css/frozenproduct/large/components/progress.css CHANGED
@@ -23,13 +23,19 @@
23
23
  --progress-color-fg-ai: var(--modes-color-interactive-ai-default); /* For progress ring in ai buttons */
24
24
  --progress-color-fg-alt: var(--modes-color-status-positive-default);
25
25
  --progress-color-fg-caution: var(--modes-color-status-caution-default);
26
+ --progress-color-fg-default: var(--modes-color-interactive-monochrome-generic-active);
26
27
  --progress-color-fg-error: var(--modes-color-status-negative-default);
27
28
  --progress-color-fg-info: var(--modes-color-status-info-default);
28
29
  --progress-color-datavis-fg-default: var(--modes-color-status-generic-default);
30
+ --progress-color-loader-fg-default: var(--modes-color-interactive-monochrome-generic-active); /* used for loader standard loader spinner */
29
31
  --progress-color-loader-fg-error: var(--modes-color-status-negative-default);
30
32
  --progress-color-loader-fg-complete: var(--modes-color-status-positive-default);
33
+ --progress-color-stepflow-bg-active: var(--modes-color-interactive-monochrome-generic-active);
31
34
  --progress-color-stepflow-bg-complete: var(--modes-color-status-positive-default);
35
+ --progress-color-stepflow-border-active-outer: var(--modes-color-interactive-monochrome-generic-active);
36
+ --progress-color-stepindicator-bg-active: var(--modes-color-interactive-monochrome-generic-active);
32
37
  --progress-color-stepindicator-bg-complete: var(--modes-color-status-positive-default);
38
+ --progress-color-stepindicator-border-active-outer: var(--modes-color-interactive-monochrome-generic-active);
33
39
  --progress-color-stepindicator-border-success: var(--modes-color-status-positive-default);
34
40
  --progress-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
35
41
  --progress-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
@@ -45,20 +51,14 @@
45
51
  --progress-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
46
52
  --progress-color-bg-default: var(--modes-color-interactive-progress-bg);
47
53
  --progress-color-fg-alt2: var(--modes-color-generic-content-firm);
48
- --progress-color-fg-default: var(--modes-color-interactive-monochrome-generic-active);
49
54
  --progress-color-label-alt: var(--modes-color-generic-content-firm);
50
55
  --progress-color-label-default: var(--modes-color-generic-content-harsh);
51
56
  --progress-color-loader-bg-default: var(--modes-color-interactive-progress-bg);
52
57
  --progress-color-loader-bg-alt: var(--modes-color-interactive-progress-bg-alt); /* used for inverse loader bgs */
53
- --progress-color-loader-fg-default: var(--modes-color-interactive-monochrome-generic-active); /* used for loader standard loader spinner */
54
- --progress-color-stepflow-bg-active: var(--modes-color-interactive-monochrome-generic-active);
55
58
  --progress-color-stepflow-bg-default: var(--modes-color-generic-fg-nought);
56
59
  --progress-color-stepflow-border-active-inner: var(--modes-color-generic-fg-nought);
57
- --progress-color-stepflow-border-active-outer: var(--modes-color-interactive-monochrome-generic-active);
58
60
  --progress-color-stepflow-label-alt: var(--modes-color-generic-content-firm);
59
61
  --progress-color-stepflow-label-default: var(--modes-color-generic-content-harsh);
60
- --progress-color-stepindicator-bg-active: var(--modes-color-interactive-monochrome-generic-active);
61
- --progress-color-stepindicator-border-active-outer: var(--modes-color-interactive-monochrome-generic-active);
62
62
  --progress-color-stepindicator-label-default: var(--modes-color-generic-content-harsh);
63
63
  --progress-size-bar-s: var(--global-size-micro-xs); /* S loader bar */
64
64
  --progress-size-bar-m: var(--global-size-micro-m); /* M progress tracker bar, M loader bar */
package/css/frozenproduct/large/components/tab.css CHANGED
@@ -50,6 +50,6 @@
50
50
  --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
51
51
  --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
52
52
  --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
53
- --tab-borderwidth-navigation-bottom: var(--global-borderwidth-l); /* Tab (enabled and hover bottom border) */
53
+ --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
54
54
  --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
55
55
  }
package/css/frozenproduct/small/components/button.css CHANGED
@@ -20,6 +20,9 @@
20
20
  --button-color-destructive-primary-bg-enabled: var(--modes-color-interactive-danger-default);
21
21
  --button-color-destructive-secondary-border-enabled: var(--modes-color-interactive-danger-default);
22
22
  --button-color-destructive-secondary-label-enabled: var(--modes-color-interactive-danger-default);
23
+ --button-color-typical-secondary-border-active: var(--modes-color-interactive-monochrome-generic-active);
24
+ --button-color-typical-tertiary-border-active: var(--modes-color-interactive-monochrome-generic-active);
25
+ --button-color-typical-toggle-bg-active: var(--modes-color-interactive-monochrome-generic-active);
23
26
  --button-typography-adaptive-primary-s: var(--global-typography-adaptive-component-firm-s);
24
27
  --button-typography-adaptive-primary-m: var(--global-typography-adaptive-component-firm-m);
25
28
  --button-typography-adaptive-primary-l: var(--global-typography-adaptive-component-firm-l);
@@ -44,24 +47,34 @@
44
47
  --button-typography-responsive-subtle-s: var(--global-typography-responsive-component-firm-s);
45
48
  --button-typography-responsive-subtle-m: var(--global-typography-responsive-component-firm-m);
46
49
  --button-typography-responsive-subtle-l: var(--global-typography-responsive-component-firm-l);
50
+ --button-color-ai-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
47
51
  --button-color-ai-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
48
52
  --button-color-destructive-primary-bg-hover: var(--modes-color-interactive-danger-hover);
49
53
  --button-color-destructive-secondary-border-hover: var(--modes-color-interactive-danger-hover);
50
54
  --button-color-destructive-secondary-label-hover: var(--modes-color-interactive-danger-hover);
51
55
  --button-color-typical-primary-bg-enabled: var(--modes-color-interactive-primary-default);
52
56
  --button-color-typical-secondary-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
53
- --button-color-typical-secondary-border-active: var(--modes-color-interactive-monochrome-generic-active);
57
+ --button-color-typical-secondary-border-enabled: var(--modes-color-interactive-monochrome-generic-default);
58
+ --button-color-typical-secondary-border-hover: var(--modes-color-interactive-monochrome-generic-default);
59
+ --button-color-typical-secondary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
54
60
  --button-color-typical-secondary-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
55
61
  --button-color-typical-subtle-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
62
+ --button-color-typical-subtle-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
56
63
  --button-color-typical-subtle-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
57
64
  --button-color-typical-tertiary-bg-enabled: var(--button-color-none);
58
65
  --button-color-typical-tertiary-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
59
- --button-color-typical-tertiary-border-active: var(--modes-color-interactive-monochrome-generic-active);
66
+ --button-color-typical-tertiary-border-enabled: var(--modes-color-interactive-monochrome-generic-default-alt2);
67
+ --button-color-typical-tertiary-border-hover: var(--modes-color-interactive-monochrome-generic-default);
68
+ --button-color-typical-tertiary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
60
69
  --button-color-typical-tertiary-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
61
- --button-color-typical-toggle-bg-active: var(--modes-color-interactive-monochrome-generic-active);
62
70
  --button-color-typical-toggle-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
71
+ --button-color-typical-toggle-border-enabled: var(--modes-color-interactive-monochrome-generic-default);
72
+ --button-color-typical-toggle-label-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
63
73
  --button-color-typical-toggle-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
64
74
  --button-color-video-bg-blur: var(--modes-color-interactive-monochrome-generic-hover-alt);
75
+ --button-color-video-primary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
76
+ --button-color-video-primary-label-hover: var(--modes-color-interactive-monochrome-generic-default);
77
+ --button-color-video-secondary-label-hover: var(--modes-color-interactive-monochrome-generic-default);
65
78
  --button-size-split: var(--global-size-micro-xxs); /* Split button (divider width) */
66
79
  --button-size-s: var(--global-size-macro-s); /* min-height on S Buttons */
67
80
  --button-size-m: var(--global-size-macro-m); /* min-height on M Buttons */
@@ -151,8 +164,8 @@
151
164
  --button-space-video-x-s: var(--global-space-micro-xs); /* Left padding on play icon in video button */
152
165
  --button-space-video-x-m: var(--global-space-micro-xs); /* Left padding on play icon in video button */
153
166
  --button-space-video-x-l: var(--global-space-micro-xs); /* Left padding on play icon in video button */
167
+ --button-color-ai-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
154
168
  --button-color-ai-label-disabled: var(--modes-color-interactive-inactive-content);
155
- --button-color-ai-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
156
169
  --button-color-destructive-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
157
170
  --button-color-destructive-primary-label-enabled: var(--modes-color-interactive-danger-with-default);
158
171
  --button-color-destructive-primary-label-hover: var(--modes-color-interactive-danger-with-default);
@@ -165,30 +178,24 @@
165
178
  --button-color-typical-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
166
179
  --button-color-typical-primary-label-enabled: var(--modes-color-interactive-primary-with-default);
167
180
  --button-color-typical-primary-label-hover: var(--modes-color-interactive-primary-with-default);
168
- --button-color-typical-secondary-border-enabled: var(--modes-color-interactive-monochrome-generic-default);
169
- --button-color-typical-secondary-border-hover: var(--modes-color-interactive-monochrome-generic-default);
181
+ --button-color-typical-secondary-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
182
+ --button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
170
183
  --button-color-typical-secondary-label-disabled: var(--modes-color-interactive-inactive-content);
171
- --button-color-typical-secondary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
184
+ --button-color-typical-subtle-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
185
+ --button-color-typical-subtle-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
172
186
  --button-color-typical-subtle-label-disabled: var(--modes-color-interactive-inactive-content);
173
- --button-color-typical-subtle-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
174
- --button-color-typical-tertiary-border-enabled: var(--modes-color-interactive-monochrome-generic-default-alt2);
175
- --button-color-typical-tertiary-border-hover: var(--modes-color-interactive-monochrome-generic-default);
187
+ --button-color-typical-tertiary-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
188
+ --button-color-typical-tertiary-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
176
189
  --button-color-typical-tertiary-label-disabled: var(--modes-color-interactive-inactive-content);
177
- --button-color-typical-tertiary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
178
190
  --button-color-typical-toggle-label-active-disabled: var(--modes-color-interactive-inactive-content-alt);
179
- --button-color-typical-toggle-border-enabled: var(--modes-color-interactive-monochrome-generic-default);
180
191
  --button-color-typical-toggle-label-active: var(--modes-color-interactive-monochrome-generic-with-active);
181
192
  --button-color-typical-toggle-label-disabled: var(--modes-color-interactive-inactive-content);
182
- --button-color-typical-toggle-label-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
183
193
  --button-color-video-primary-bg-enabled: var(--modes-color-interactive-monochrome-generic-with-default);
184
194
  --button-color-video-primary-bg-hover: var(--modes-color-interactive-monochrome-generic-with-default);
185
- --button-color-video-primary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
186
- --button-color-video-primary-label-hover: var(--modes-color-interactive-monochrome-generic-default);
187
195
  --button-color-video-secondary-bg-hover: var(--modes-color-interactive-monochrome-generic-with-default);
188
196
  --button-color-video-secondary-border-enabled: var(--modes-color-interactive-monochrome-generic-with-default);
189
197
  --button-color-video-secondary-border-hover: var(--modes-color-interactive-monochrome-generic-with-default);
190
198
  --button-color-video-secondary-label-enabled: var(--modes-color-interactive-monochrome-generic-with-default);
191
- --button-color-video-secondary-label-hover: var(--modes-color-interactive-monochrome-generic-default);
192
199
  --button-radius-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
193
200
  --button-radius-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) */
194
201
  --button-radius-l: var(--global-radius-interactive-xxl); /* Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container) */
@@ -210,18 +217,11 @@
210
217
  --button-borderwidth-tertiary: var(--global-borderwidth-xs); /* tertiary button border */
211
218
  --button-borderwidth-togglecontainer: var(--global-borderwidth-xs); /* Toggle container */
212
219
  --button-color-ai-border-disabled: var(--modes-color-interactive-inactive-default);
213
- --button-color-ai-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
214
220
  --button-color-destructive-primary-bg-disabled: var(--modes-color-interactive-inactive-default);
215
221
  --button-color-destructive-secondary-border-disabled: var(--modes-color-interactive-inactive-default);
216
222
  --button-color-typical-primary-bg-disabled: var(--modes-color-interactive-inactive-default);
217
- --button-color-typical-secondary-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
218
223
  --button-color-typical-secondary-border-disabled: var(--modes-color-interactive-inactive-default);
219
- --button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
220
- --button-color-typical-subtle-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
221
- --button-color-typical-subtle-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
222
- --button-color-typical-tertiary-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
223
224
  --button-color-typical-tertiary-bg-active-disabled: var(--modes-color-interactive-inactive-default);
224
225
  --button-color-typical-tertiary-border-disabled: var(--modes-color-interactive-inactive-default);
225
- --button-color-typical-tertiary-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
226
226
  --button-color-typical-toggle-bg-active-disabled: var(--modes-color-interactive-inactive-default);
227
227
  }
package/css/frozenproduct/small/components/form.css CHANGED
@@ -118,15 +118,18 @@
118
118
  --form-space-integral-yg-s: var(--global-space-micro-m); /* Space below labelset or error validation in form components */
119
119
  --form-space-integral-yg-m: var(--global-space-micro-l); /* Space below labelset or error validation in form components */
120
120
  --form-space-integral-yg-l: var(--global-space-micro-xl); /* Space below labelset or error validation in form components */
121
- --form-space-integral-progressive-x-s: calc(var(--global-space-macro-m) - var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
122
- --form-space-integral-progressive-x-m: var(--global-space-macro-l); /* Left padding on progressively shown form inputs on radio and checkbox */
123
- --form-space-integral-progressive-x-l: calc(var(--global-space-macro-xl) + var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
121
+ --form-space-integral-progressive-x-s: calc(var(--global-space-macro-xs) - 3); /* Left padding on progressively shown form inputs on radio and checkbox */
122
+ --form-space-integral-progressive-x-m: var(--global-space-macro-s); /* Left padding on progressively shown form inputs on radio and checkbox */
123
+ --form-space-integral-progressive-x-l: calc(var(--global-space-macro-m) + 1); /* Left padding on progressively shown form inputs on radio and checkbox */
124
124
  --form-space-integral-progressive-y-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
125
125
  --form-space-integral-progressive-y-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
126
126
  --form-space-integral-progressive-y-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
127
127
  --form-space-integral-progressive-yg-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
128
128
  --form-space-integral-progressive-yg-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
129
129
  --form-space-integral-progressive-yg-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
130
+ --form-space-integral-progressive-keyline-x-s: calc(var(--global-space-macro-xxxs) - 1); /* Left padding on keyline for small progressively shown inputs */
131
+ --form-space-integral-progressive-keyline-x-m: calc(var(--global-space-macro-xxs) - 1); /* Left padding on keyline for medium progressively shown inputs */
132
+ --form-space-integral-progressive-keyline-x-l: calc(var(--global-space-macro-xs) - 1); /* Left padding on keyline for large progressively shown inputs */
130
133
  --form-space-rating-xg-m: var(--global-space-micro-l); /* small gap between rating stars */
131
134
  --form-space-rating-xg-l: var(--global-space-micro-xxl); /* medium gap between rating stars */
132
135
  --form-space-layout-stack-s: var(--global-space-macro-xs); /* Spacing between horizontal and vertical S form components */
@@ -207,6 +210,7 @@
207
210
  --form-size-switch-handle-icon-l: var(--global-size-icon-m); /* L switch icon inside knob */
208
211
  --form-size-textarea-m: calc(var(--global-size-macro-m) * 2); /* Min height for all text area sizes. */
209
212
  --form-size-validation-bar: var(--global-size-micro-xxs); /* 2px validation bar used on errors and warnings */
213
+ --form-size-progressive-bar: var(--global-size-micro-xxs); /* 2px progressive disclosure keyline bar used in checkbox and radio groups */
210
214
  --form-size-rating-m: var(--global-size-icon-m); /* medium rating stars */
211
215
  --form-size-rating-l: var(--global-size-icon-xl); /* large rating stars */
212
216
  --form-color-calendar-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
@@ -254,6 +258,7 @@
254
258
  --form-radius-fileselector: var(--global-radius-container-m); /* File preview (file selector asset) */
255
259
  --form-radius-input: var(--global-radius-interactive-m); /* Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input */
256
260
  --form-radius-validationbar: var(--global-radius-interactive-xs); /* Validation bar */
261
+ --form-radius-progressivebar: var(--global-radius-interactive-xs); /* Validation bar */
257
262
  --form-radius-calendar-today: var(--global-radius-container-xs); /* Calendar (today indicator) */
258
263
  --form-borderwidth-colorpicker: var(--global-borderwidth-xs); /* swatch border */
259
264
  --form-borderwidth-caution: var(--global-borderwidth-xs); /* Caution border */
package/css/frozenproduct/small/components/tab.css CHANGED
@@ -50,6 +50,6 @@
50
50
  --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
51
51
  --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
52
52
  --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
53
- --tab-borderwidth-navigation-bottom: var(--global-borderwidth-l); /* Tab (enabled and hover bottom border) */
53
+ --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
54
54
  --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
55
55
  }
package/css/marketing/all.css CHANGED
@@ -1121,15 +1121,18 @@
1121
1121
  --form-space-integral-yg-s: var(--global-space-micro-m); /* Space below labelset or error validation in form components */
1122
1122
  --form-space-integral-yg-m: var(--global-space-micro-l); /* Space below labelset or error validation in form components */
1123
1123
  --form-space-integral-yg-l: var(--global-space-micro-xl); /* Space below labelset or error validation in form components */
1124
- --form-space-integral-progressive-x-s: calc(var(--global-space-macro-m) - var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
1125
- --form-space-integral-progressive-x-m: var(--global-space-macro-l); /* Left padding on progressively shown form inputs on radio and checkbox */
1126
- --form-space-integral-progressive-x-l: calc(var(--global-space-macro-xl) + var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
1124
+ --form-space-integral-progressive-x-s: calc(var(--global-space-macro-xs) - 3); /* Left padding on progressively shown form inputs on radio and checkbox */
1125
+ --form-space-integral-progressive-x-m: var(--global-space-macro-s); /* Left padding on progressively shown form inputs on radio and checkbox */
1126
+ --form-space-integral-progressive-x-l: calc(var(--global-space-macro-m) + 1); /* Left padding on progressively shown form inputs on radio and checkbox */
1127
1127
  --form-space-integral-progressive-y-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
1128
1128
  --form-space-integral-progressive-y-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
1129
1129
  --form-space-integral-progressive-y-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
1130
1130
  --form-space-integral-progressive-yg-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
1131
1131
  --form-space-integral-progressive-yg-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
1132
1132
  --form-space-integral-progressive-yg-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
1133
+ --form-space-integral-progressive-keyline-x-s: calc(var(--global-space-macro-xxxs) - 1); /* Left padding on keyline for small progressively shown inputs */
1134
+ --form-space-integral-progressive-keyline-x-m: calc(var(--global-space-macro-xxs) - 1); /* Left padding on keyline for medium progressively shown inputs */
1135
+ --form-space-integral-progressive-keyline-x-l: calc(var(--global-space-macro-xs) - 1); /* Left padding on keyline for large progressively shown inputs */
1133
1136
  --form-space-rating-xg-m: var(--global-space-micro-l); /* small gap between rating stars */
1134
1137
  --form-space-rating-xg-l: var(--global-space-micro-xxl); /* medium gap between rating stars */
1135
1138
  --form-space-layout-stack-s: var(--global-space-macro-xs); /* Spacing between horizontal and vertical S form components */
@@ -1210,6 +1213,7 @@
1210
1213
  --form-size-switch-handle-icon-l: var(--global-size-icon-m); /* L switch icon inside knob */
1211
1214
  --form-size-textarea-m: calc(var(--global-size-macro-m) * 2); /* Min height for all text area sizes. */
1212
1215
  --form-size-validation-bar: var(--global-size-micro-xxs); /* 2px validation bar used on errors and warnings */
1216
+ --form-size-progressive-bar: var(--global-size-micro-xxs); /* 2px progressive disclosure keyline bar used in checkbox and radio groups */
1213
1217
  --form-size-rating-m: var(--global-size-icon-m); /* medium rating stars */
1214
1218
  --form-size-rating-l: var(--global-size-icon-xl); /* large rating stars */
1215
1219
  --form-color-calendar-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-alt-light), var(--modes-color-interactive-inactive-default-alt-dark));
@@ -1257,6 +1261,7 @@
1257
1261
  --form-radius-fileselector: var(--global-radius-container-m); /* File preview (file selector asset) */
1258
1262
  --form-radius-input: var(--global-radius-interactive-m); /* Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input */
1259
1263
  --form-radius-validationbar: var(--global-radius-interactive-xs); /* Validation bar */
1264
+ --form-radius-progressivebar: var(--global-radius-interactive-xs); /* Validation bar */
1260
1265
  --form-radius-calendar-today: var(--global-radius-container-xs); /* Calendar (today indicator) */
1261
1266
  --form-borderwidth-colorpicker: var(--global-borderwidth-xs); /* swatch border */
1262
1267
  --form-borderwidth-caution: var(--global-borderwidth-xs); /* Caution border */
@@ -1823,7 +1828,7 @@
1823
1828
  --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
1824
1829
  --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
1825
1830
  --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
1826
- --tab-borderwidth-navigation-bottom: var(--global-borderwidth-l); /* Tab (enabled and hover bottom border) */
1831
+ --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
1827
1832
  --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
1828
1833
 
1829
1834
  /* table component tokens */
package/css/marketing/large/components/form.css CHANGED
@@ -118,15 +118,18 @@
118
118
  --form-space-integral-yg-s: var(--global-space-micro-m); /* Space below labelset or error validation in form components */
119
119
  --form-space-integral-yg-m: var(--global-space-micro-l); /* Space below labelset or error validation in form components */
120
120
  --form-space-integral-yg-l: var(--global-space-micro-xl); /* Space below labelset or error validation in form components */
121
- --form-space-integral-progressive-x-s: calc(var(--global-space-macro-m) - var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
122
- --form-space-integral-progressive-x-m: var(--global-space-macro-l); /* Left padding on progressively shown form inputs on radio and checkbox */
123
- --form-space-integral-progressive-x-l: calc(var(--global-space-macro-xl) + var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
121
+ --form-space-integral-progressive-x-s: calc(var(--global-space-macro-xs) - 3); /* Left padding on progressively shown form inputs on radio and checkbox */
122
+ --form-space-integral-progressive-x-m: var(--global-space-macro-s); /* Left padding on progressively shown form inputs on radio and checkbox */
123
+ --form-space-integral-progressive-x-l: calc(var(--global-space-macro-m) + 1); /* Left padding on progressively shown form inputs on radio and checkbox */
124
124
  --form-space-integral-progressive-y-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
125
125
  --form-space-integral-progressive-y-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
126
126
  --form-space-integral-progressive-y-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
127
127
  --form-space-integral-progressive-yg-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
128
128
  --form-space-integral-progressive-yg-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
129
129
  --form-space-integral-progressive-yg-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
130
+ --form-space-integral-progressive-keyline-x-s: calc(var(--global-space-macro-xxxs) - 1); /* Left padding on keyline for small progressively shown inputs */
131
+ --form-space-integral-progressive-keyline-x-m: calc(var(--global-space-macro-xxs) - 1); /* Left padding on keyline for medium progressively shown inputs */
132
+ --form-space-integral-progressive-keyline-x-l: calc(var(--global-space-macro-xs) - 1); /* Left padding on keyline for large progressively shown inputs */
130
133
  --form-space-rating-xg-m: var(--global-space-micro-l); /* small gap between rating stars */
131
134
  --form-space-rating-xg-l: var(--global-space-micro-xxl); /* medium gap between rating stars */
132
135
  --form-space-layout-stack-s: var(--global-space-macro-xs); /* Spacing between horizontal and vertical S form components */
@@ -207,6 +210,7 @@
207
210
  --form-size-switch-handle-icon-l: var(--global-size-icon-m); /* L switch icon inside knob */
208
211
  --form-size-textarea-m: calc(var(--global-size-macro-m) * 2); /* Min height for all text area sizes. */
209
212
  --form-size-validation-bar: var(--global-size-micro-xxs); /* 2px validation bar used on errors and warnings */
213
+ --form-size-progressive-bar: var(--global-size-micro-xxs); /* 2px progressive disclosure keyline bar used in checkbox and radio groups */
210
214
  --form-size-rating-m: var(--global-size-icon-m); /* medium rating stars */
211
215
  --form-size-rating-l: var(--global-size-icon-xl); /* large rating stars */
212
216
  --form-color-calendar-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
@@ -254,6 +258,7 @@
254
258
  --form-radius-fileselector: var(--global-radius-container-m); /* File preview (file selector asset) */
255
259
  --form-radius-input: var(--global-radius-interactive-m); /* Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input */
256
260
  --form-radius-validationbar: var(--global-radius-interactive-xs); /* Validation bar */
261
+ --form-radius-progressivebar: var(--global-radius-interactive-xs); /* Validation bar */
257
262
  --form-radius-calendar-today: var(--global-radius-container-xs); /* Calendar (today indicator) */
258
263
  --form-borderwidth-colorpicker: var(--global-borderwidth-xs); /* swatch border */
259
264
  --form-borderwidth-caution: var(--global-borderwidth-xs); /* Caution border */
package/css/marketing/large/components/tab.css CHANGED
@@ -50,6 +50,6 @@
50
50
  --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
51
51
  --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
52
52
  --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
53
- --tab-borderwidth-navigation-bottom: var(--global-borderwidth-l); /* Tab (enabled and hover bottom border) */
53
+ --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
54
54
  --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
55
55
  }
package/css/marketing/small/components/form.css CHANGED
@@ -118,15 +118,18 @@
118
118
  --form-space-integral-yg-s: var(--global-space-micro-m); /* Space below labelset or error validation in form components */
119
119
  --form-space-integral-yg-m: var(--global-space-micro-l); /* Space below labelset or error validation in form components */
120
120
  --form-space-integral-yg-l: var(--global-space-micro-xl); /* Space below labelset or error validation in form components */
121
- --form-space-integral-progressive-x-s: calc(var(--global-space-macro-m) - var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
122
- --form-space-integral-progressive-x-m: var(--global-space-macro-l); /* Left padding on progressively shown form inputs on radio and checkbox */
123
- --form-space-integral-progressive-x-l: calc(var(--global-space-macro-xl) + var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
121
+ --form-space-integral-progressive-x-s: calc(var(--global-space-macro-xs) - 3); /* Left padding on progressively shown form inputs on radio and checkbox */
122
+ --form-space-integral-progressive-x-m: var(--global-space-macro-s); /* Left padding on progressively shown form inputs on radio and checkbox */
123
+ --form-space-integral-progressive-x-l: calc(var(--global-space-macro-m) + 1); /* Left padding on progressively shown form inputs on radio and checkbox */
124
124
  --form-space-integral-progressive-y-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
125
125
  --form-space-integral-progressive-y-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
126
126
  --form-space-integral-progressive-y-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
127
127
  --form-space-integral-progressive-yg-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
128
128
  --form-space-integral-progressive-yg-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
129
129
  --form-space-integral-progressive-yg-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
130
+ --form-space-integral-progressive-keyline-x-s: calc(var(--global-space-macro-xxxs) - 1); /* Left padding on keyline for small progressively shown inputs */
131
+ --form-space-integral-progressive-keyline-x-m: calc(var(--global-space-macro-xxs) - 1); /* Left padding on keyline for medium progressively shown inputs */
132
+ --form-space-integral-progressive-keyline-x-l: calc(var(--global-space-macro-xs) - 1); /* Left padding on keyline for large progressively shown inputs */
130
133
  --form-space-rating-xg-m: var(--global-space-micro-l); /* small gap between rating stars */
131
134
  --form-space-rating-xg-l: var(--global-space-micro-xxl); /* medium gap between rating stars */
132
135
  --form-space-layout-stack-s: var(--global-space-macro-xs); /* Spacing between horizontal and vertical S form components */
@@ -207,6 +210,7 @@
207
210
  --form-size-switch-handle-icon-l: var(--global-size-icon-m); /* L switch icon inside knob */
208
211
  --form-size-textarea-m: calc(var(--global-size-macro-m) * 2); /* Min height for all text area sizes. */
209
212
  --form-size-validation-bar: var(--global-size-micro-xxs); /* 2px validation bar used on errors and warnings */
213
+ --form-size-progressive-bar: var(--global-size-micro-xxs); /* 2px progressive disclosure keyline bar used in checkbox and radio groups */
210
214
  --form-size-rating-m: var(--global-size-icon-m); /* medium rating stars */
211
215
  --form-size-rating-l: var(--global-size-icon-xl); /* large rating stars */
212
216
  --form-color-calendar-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
@@ -254,6 +258,7 @@
254
258
  --form-radius-fileselector: var(--global-radius-container-m); /* File preview (file selector asset) */
255
259
  --form-radius-input: var(--global-radius-interactive-m); /* Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input */
256
260
  --form-radius-validationbar: var(--global-radius-interactive-xs); /* Validation bar */
261
+ --form-radius-progressivebar: var(--global-radius-interactive-xs); /* Validation bar */
257
262
  --form-radius-calendar-today: var(--global-radius-container-xs); /* Calendar (today indicator) */
258
263
  --form-borderwidth-colorpicker: var(--global-borderwidth-xs); /* swatch border */
259
264
  --form-borderwidth-caution: var(--global-borderwidth-xs); /* Caution border */
package/css/marketing/small/components/tab.css CHANGED
@@ -50,6 +50,6 @@
50
50
  --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
51
51
  --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
52
52
  --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
53
- --tab-borderwidth-navigation-bottom: var(--global-borderwidth-l); /* Tab (enabled and hover bottom border) */
53
+ --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
54
54
  --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
55
55
  }