@workday/canvas-kit-docs 15.0.0-alpha.1303-next.0 → 15.0.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 (681) hide show
  1. package/README.md +6 -6
  2. package/dist/es6/docgen/createTraversals.d.ts +0 -3
  3. package/dist/es6/docgen/createTraversals.d.ts.map +1 -1
  4. package/dist/es6/docgen/docParser.d.ts +1 -1
  5. package/dist/es6/docgen/docParser.d.ts.map +1 -1
  6. package/dist/es6/docgen/docParser.js +14 -4
  7. package/dist/es6/docgen/plugins/componentParser.d.ts +1 -1
  8. package/dist/es6/docgen/plugins/componentParser.d.ts.map +1 -1
  9. package/dist/es6/docgen/plugins/componentParser.js +1 -1
  10. package/dist/es6/docgen/plugins/customTypes.d.ts +1 -1
  11. package/dist/es6/docgen/plugins/customTypes.d.ts.map +1 -1
  12. package/dist/es6/docgen/plugins/enhancedComponentParser.d.ts +1 -1
  13. package/dist/es6/docgen/plugins/enhancedComponentParser.d.ts.map +1 -1
  14. package/dist/es6/docgen/plugins/enhancedComponentParser.js +2 -1
  15. package/dist/es6/docgen/plugins/modelParser.d.ts.map +1 -1
  16. package/dist/es6/docgen/plugins/modelParser.js +4 -4
  17. package/dist/es6/docgen/traverse.d.ts.map +1 -1
  18. package/dist/es6/docgen/traverse.js +1 -1
  19. package/dist/es6/lib/DescriptionTooltip.d.ts +2 -5
  20. package/dist/es6/lib/DescriptionTooltip.d.ts.map +1 -1
  21. package/dist/es6/lib/DescriptionTooltip.js +11 -10
  22. package/dist/es6/lib/DownloadLLMFile.js +11 -11
  23. package/dist/es6/lib/ExampleCodeBlock.d.ts.map +1 -1
  24. package/dist/es6/lib/ExampleCodeBlock.js +37 -28
  25. package/dist/es6/lib/MDXElements.d.ts +1 -1
  26. package/dist/es6/lib/MDXElements.d.ts.map +1 -1
  27. package/dist/es6/lib/MDXElements.js +5 -5
  28. package/dist/es6/lib/MoreTooltip.d.ts.map +1 -1
  29. package/dist/es6/lib/MoreTooltip.js +1 -1
  30. package/dist/es6/lib/Specifications.d.ts +3 -1
  31. package/dist/es6/lib/Specifications.d.ts.map +1 -1
  32. package/dist/es6/lib/Specifications.js +20 -10
  33. package/dist/es6/lib/StorybookStatusIndicator.d.ts +2 -2
  34. package/dist/es6/lib/StorybookStatusIndicator.d.ts.map +1 -1
  35. package/dist/es6/lib/StorybookStatusIndicator.js +23 -21
  36. package/dist/es6/lib/StylePropsTable.d.ts.map +1 -1
  37. package/dist/es6/lib/StylePropsTable.js +1 -1
  38. package/dist/es6/lib/SymbolDoc.d.ts +1 -1
  39. package/dist/es6/lib/SymbolDoc.d.ts.map +1 -1
  40. package/dist/es6/lib/SymbolDoc.js +1 -1
  41. package/dist/es6/lib/Table.d.ts.map +1 -1
  42. package/dist/es6/lib/Table.js +33 -10
  43. package/dist/es6/lib/Value.d.ts.map +1 -1
  44. package/dist/es6/lib/Value.js +14 -11
  45. package/dist/es6/lib/docs.d.ts.map +1 -1
  46. package/dist/es6/lib/docs.js +204588 -183032
  47. package/dist/es6/lib/specs.js +6142 -1
  48. package/dist/es6/lib/stackblitzFiles/App.d.ts.map +1 -1
  49. package/dist/es6/lib/stackblitzFiles/App.js +5 -11
  50. package/dist/es6/lib/stackblitzFiles/App.tsx +7 -21
  51. package/dist/es6/lib/stackblitzFiles/main.d.ts +1 -0
  52. package/dist/es6/lib/stackblitzFiles/main.d.ts.map +1 -1
  53. package/dist/es6/lib/stackblitzFiles/main.js +4 -3
  54. package/dist/es6/lib/stackblitzFiles/main.tsx +6 -4
  55. package/dist/es6/lib/stackblitzFiles/packageJSONFile.d.ts.map +1 -1
  56. package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +8 -7
  57. package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +9 -7
  58. package/dist/es6/lib/stackblitzFiles/vite.config.d.ts +1 -1
  59. package/dist/es6/lib/stackblitzFiles/vite.config.d.ts.map +1 -1
  60. package/dist/es6/lib/stackblitzFiles/vite.config.js +1 -1
  61. package/dist/es6/lib/stackblitzFiles/vite.config.ts +1 -3
  62. package/dist/es6/lib/widgetUtils.d.ts.map +1 -1
  63. package/dist/es6/lib/widgetUtils.js +39 -39
  64. package/dist/es6/lib/widgets/array.js +1 -1
  65. package/dist/es6/lib/widgets/callExpression.js +1 -1
  66. package/dist/es6/lib/widgets/canvasColor.js +3 -2
  67. package/dist/es6/lib/widgets/conditional.js +1 -1
  68. package/dist/es6/lib/widgets/enhancedComponent.js +2 -1
  69. package/dist/es6/lib/widgets/external.js +1 -1
  70. package/dist/es6/lib/widgets/function.js +2 -2
  71. package/dist/es6/lib/widgets/index.d.ts +1 -1
  72. package/dist/es6/lib/widgets/index.d.ts.map +1 -1
  73. package/dist/es6/lib/widgets/index.js +1 -1
  74. package/dist/es6/lib/widgets/intersection.js +1 -1
  75. package/dist/es6/lib/widgets/model.js +1 -1
  76. package/dist/es6/lib/widgets/parenthesis.js +1 -1
  77. package/dist/es6/lib/widgets/primitives.js +2 -2
  78. package/dist/es6/lib/widgets/qualifiedName.js +1 -1
  79. package/dist/es6/lib/widgets/tuple.js +1 -1
  80. package/dist/es6/lib/widgets/typeParameter.js +1 -1
  81. package/dist/es6/lib/widgets/union.js +1 -1
  82. package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/CommentBoxWithCharLimit.d.ts +2 -0
  83. package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/CommentBoxWithCharLimit.d.ts.map +1 -0
  84. package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/CommentBoxWithCharLimit.js +31 -0
  85. package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/FilterListWithLiveStatus.js +9 -9
  86. package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/HiddenLiveRegion.js +2 -2
  87. package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/IconButtonsWithLiveBadges.d.ts.map +1 -1
  88. package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/IconButtonsWithLiveBadges.js +4 -4
  89. package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/TextInputWithLiveError.d.ts.map +1 -1
  90. package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/TextInputWithLiveError.js +3 -3
  91. package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/VisibleLiveRegion.d.ts.map +1 -1
  92. package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/VisibleLiveRegion.js +8 -9
  93. package/dist/es6/mdx/accessibility/examples/GlobalHeader.js +21 -21
  94. package/dist/es6/mdx/accessibility/examples/PageStructure/BreadcrumbNavRegion.js +2 -2
  95. package/dist/es6/mdx/accessibility/examples/PageStructure/FullPageDemo.d.ts.map +1 -1
  96. package/dist/es6/mdx/accessibility/examples/PageStructure/FullPageDemo.js +16 -10
  97. package/dist/es6/mdx/accessibility/examples/PageStructure/LandmarkRegions.d.ts +1 -1
  98. package/dist/es6/mdx/accessibility/examples/PageStructure/LandmarkRegions.d.ts.map +1 -1
  99. package/dist/es6/mdx/accessibility/examples/PageStructure/LandmarkRegions.js +15 -9
  100. package/dist/es6/mdx/accessibility/examples/Popups/InlinePopupNoPortal.d.ts +2 -0
  101. package/dist/es6/mdx/accessibility/examples/Popups/InlinePopupNoPortal.d.ts.map +1 -0
  102. package/dist/es6/mdx/accessibility/examples/Popups/InlinePopupNoPortal.js +62 -0
  103. package/dist/es6/mdx/accessibility/examples/Popups/InlinePortalPopup.d.ts +7 -0
  104. package/dist/es6/mdx/accessibility/examples/Popups/InlinePortalPopup.d.ts.map +1 -0
  105. package/dist/es6/mdx/accessibility/examples/Popups/InlinePortalPopup.js +65 -0
  106. package/dist/es6/mdx/accessibility/examples/Popups/PopupAriaOwns.d.ts +7 -0
  107. package/dist/es6/mdx/accessibility/examples/Popups/PopupAriaOwns.d.ts.map +1 -0
  108. package/dist/es6/mdx/accessibility/examples/Popups/PopupAriaOwns.js +46 -0
  109. package/dist/es6/mdx/accessibility/examples/SidePanelWithNavigation.d.ts.map +1 -1
  110. package/dist/es6/mdx/accessibility/examples/SidePanelWithNavigation.js +16 -16
  111. package/dist/es6/mdx/accessibility/examples/SidePanelWithOverlay.d.ts.map +1 -1
  112. package/dist/es6/mdx/accessibility/examples/SidePanelWithOverlay.js +4 -5
  113. package/dist/es6/mdx/accessibility/examples/Table/WithColumnHeaderFilters.js +8 -8
  114. package/dist/es6/mdx/accessibility/examples/Table/WithExpandableRows.d.ts.map +1 -1
  115. package/dist/es6/mdx/accessibility/examples/Table/WithExpandableRows.js +6 -6
  116. package/dist/es6/mdx/accessibility/examples/Table/WithFormFields.d.ts.map +1 -1
  117. package/dist/es6/mdx/accessibility/examples/Table/WithFormFields.js +10 -10
  118. package/dist/es6/mdx/accessibility/examples/Table/WithSelectableRows.js +4 -4
  119. package/dist/es6/mdx/accessibility/examples/Table/WithSortableColumnHeaders.js +7 -7
  120. package/dist/es6/mdx/installBlock.d.ts.map +1 -1
  121. package/dist/es6/mdx/installBlock.js +18 -6
  122. package/dist/es6/mdx/tokens/StorybookInformationHighlight/index.d.ts.map +1 -1
  123. package/dist/es6/mdx/tokens/StorybookInformationHighlight/index.js +2 -3
  124. package/dist/es6/mdx/versionsTable.d.ts.map +1 -1
  125. package/dist/es6/mdx/versionsTable.js +4 -3
  126. package/dist/es6/mdx/welcomePage.d.ts.map +1 -1
  127. package/dist/es6/mdx/welcomePage.js +24 -20
  128. package/dist/es6/utils/parseSpecFile.d.ts +24 -0
  129. package/dist/es6/utils/parseSpecFile.d.ts.map +1 -0
  130. package/dist/es6/utils/parseSpecFile.js +82 -0
  131. package/dist/mdx/10.0-UPGRADE-GUIDE.mdx +3 -3
  132. package/dist/mdx/13.0-UPGRADE-GUIDE.mdx +24 -18
  133. package/dist/mdx/14.0-UPGRADE-GUIDE.mdx +61 -14
  134. package/dist/mdx/14.0-VISUAL-CHANGES.mdx +19 -19
  135. package/dist/mdx/15.0-UPGRADE-GUIDE.mdx +1097 -0
  136. package/dist/mdx/15.0-VISUAL-CHANGES.mdx +151 -0
  137. package/dist/mdx/5.0-UPGRADE-GUIDE.mdx +3 -3
  138. package/dist/mdx/7.0-UPGRADE-GUIDE.mdx +4 -4
  139. package/dist/mdx/8.0-UPGRADE-GUIDE.mdx +5 -5
  140. package/dist/mdx/9.0-UPGRADE-GUIDE.mdx +2 -2
  141. package/dist/mdx/CODEMODS.mdx +2 -2
  142. package/dist/mdx/CONTRIBUTING.mdx +4 -4
  143. package/dist/mdx/CREATING_COMPOUND_COMPONENTS.mdx +1 -1
  144. package/dist/mdx/DOCUMENTATION_GUIDELINES.mdx +2 -2
  145. package/dist/mdx/GETTING_STARTED.mdx +1 -2
  146. package/dist/mdx/accessibility/AriaLiveRegions.mdx +14 -15
  147. package/dist/mdx/accessibility/InlinePortals.mdx +20 -0
  148. package/dist/mdx/accessibility/PageStructure.mdx +3 -2
  149. package/dist/mdx/accessibility/Popups.mdx +71 -0
  150. package/dist/mdx/accessibility/WindowsHighContrastThemes.mdx +12 -11
  151. package/dist/mdx/changelog.mdx +1 -2
  152. package/dist/mdx/labs-react/ai-ingress-button/examples/Inverse.tsx +2 -2
  153. package/dist/mdx/preview-react/_examples/mdx/examples/TextInputWithReactHookForm.tsx +11 -12
  154. package/dist/mdx/preview-react/divider/examples/Basic.tsx +6 -7
  155. package/dist/mdx/preview-react/divider/examples/CustomSpace.tsx +4 -3
  156. package/dist/mdx/preview-react/loading-sparkles/LoadingSparkles.mdx +2 -2
  157. package/dist/mdx/preview-react/loading-sparkles/examples/Basic.tsx +3 -2
  158. package/dist/mdx/preview-react/loading-sparkles/examples/RTL.tsx +3 -7
  159. package/dist/mdx/preview-react/multi-select/MultiSelect.mdx +3 -4
  160. package/dist/mdx/preview-react/multi-select/examples/Basic.tsx +1 -1
  161. package/dist/mdx/preview-react/multi-select/examples/Complex.tsx +3 -5
  162. package/dist/mdx/preview-react/multi-select/examples/Controlled.tsx +2 -3
  163. package/dist/mdx/preview-react/multi-select/examples/Disabled.tsx +1 -1
  164. package/dist/mdx/preview-react/multi-select/examples/Error.tsx +5 -5
  165. package/dist/mdx/preview-react/multi-select/examples/Icons.tsx +8 -9
  166. package/dist/mdx/preview-react/multi-select/examples/InitialSelectedItems.tsx +6 -8
  167. package/dist/mdx/preview-react/multi-select/examples/Searching.tsx +6 -8
  168. package/dist/mdx/preview-react/radio/examples/Basic.tsx +2 -1
  169. package/dist/mdx/preview-react/radio/examples/Caution.tsx +2 -1
  170. package/dist/mdx/preview-react/radio/examples/Custom.tsx +2 -1
  171. package/dist/mdx/preview-react/radio/examples/Disabled.tsx +2 -1
  172. package/dist/mdx/preview-react/radio/examples/Error.tsx +2 -1
  173. package/dist/mdx/preview-react/radio/examples/Inverse.tsx +5 -4
  174. package/dist/mdx/preview-react/radio/examples/LabelPosition.tsx +2 -1
  175. package/dist/mdx/preview-react/radio/examples/NoValue.tsx +2 -1
  176. package/dist/mdx/preview-react/radio/examples/RefForwarding.tsx +2 -1
  177. package/dist/mdx/preview-react/radio/examples/Required.tsx +2 -1
  178. package/dist/mdx/preview-react/radio/examples/StandaloneRadio.tsx +2 -1
  179. package/dist/mdx/preview-react/side-panel/SidePanel.mdx +20 -8
  180. package/dist/mdx/preview-react/side-panel/examples/AlwaysOpen.tsx +5 -7
  181. package/dist/mdx/preview-react/side-panel/examples/Basic.tsx +10 -15
  182. package/dist/mdx/preview-react/side-panel/examples/ExternalControl.tsx +5 -5
  183. package/dist/mdx/preview-react/side-panel/examples/HiddenName.tsx +2 -1
  184. package/dist/mdx/preview-react/side-panel/examples/OnExpandedChange.tsx +3 -2
  185. package/dist/mdx/preview-react/side-panel/examples/OnStateTransition.tsx +3 -2
  186. package/dist/mdx/preview-react/side-panel/examples/RightOrigin.tsx +4 -7
  187. package/dist/mdx/preview-react/side-panel/examples/Variant.tsx +4 -6
  188. package/dist/mdx/preview-react/side-panel/examples/useDirection.ts +1 -0
  189. package/dist/mdx/preview-react/status-indicator/StatusIndicator.mdx +9 -2
  190. package/dist/mdx/preview-react/status-indicator/examples/Custom.tsx +22 -0
  191. package/dist/mdx/preview-react/status-indicator/examples/Emphasis.tsx +4 -6
  192. package/dist/mdx/preview-react/status-indicator/examples/Icon.tsx +4 -6
  193. package/dist/mdx/preview-react/status-indicator/examples/Overflow.tsx +5 -7
  194. package/dist/mdx/preview-react/status-indicator/examples/Variants.tsx +15 -17
  195. package/dist/mdx/preview-react/switch/Switch.mdx +84 -0
  196. package/dist/mdx/preview-react/switch/examples/Basic.tsx +21 -0
  197. package/dist/mdx/preview-react/switch/examples/Caution.tsx +22 -0
  198. package/dist/mdx/preview-react/switch/examples/Disabled.tsx +21 -0
  199. package/dist/mdx/preview-react/switch/examples/Error.tsx +22 -0
  200. package/dist/mdx/preview-react/switch/examples/LabelPosition.tsx +21 -0
  201. package/dist/mdx/preview-react/switch/examples/RTL.tsx +24 -0
  202. package/dist/mdx/preview-react/switch/examples/RefForwarding.tsx +30 -0
  203. package/dist/mdx/react/_examples/mdx/ContextualHelp.mdx +36 -0
  204. package/dist/mdx/react/_examples/mdx/examples/ContextualHelp/ContextualHelpDialogFocusRedirect.tsx +79 -0
  205. package/dist/mdx/react/_examples/mdx/examples/ContextualHelp/ContextualHelpDialogFocusTrap.tsx +79 -0
  206. package/dist/mdx/react/_examples/mdx/examples/ContextualHelp/ContextualHelpTooltip.tsx +43 -0
  207. package/dist/mdx/react/_examples/mdx/examples/CookieBanner.tsx +2 -2
  208. package/dist/mdx/react/_examples/mdx/examples/Density.tsx +43 -42
  209. package/dist/mdx/react/_examples/mdx/examples/MediaModal.tsx +4 -3
  210. package/dist/mdx/react/_examples/mdx/examples/PageHeader.tsx +22 -19
  211. package/dist/mdx/react/_examples/mdx/examples/SelectWithFormik.tsx +8 -12
  212. package/dist/mdx/react/_examples/mdx/examples/compoundComponent/CustomCard.tsx +10 -12
  213. package/dist/mdx/react/_examples/mdx/examples/layout/AreaColumnPositioning.tsx +1 -1
  214. package/dist/mdx/react/_examples/mdx/examples/layout/CustomColumnPositioning.tsx +1 -1
  215. package/dist/mdx/react/_examples/mdx/examples/layout/CustomColumnWidth.tsx +1 -1
  216. package/dist/mdx/react/_examples/mdx/examples/layout/FullWidthWith3Columns.tsx +50 -12
  217. package/dist/mdx/react/_examples/mdx/examples/layout/FullWidthWith3Columns2Rows.tsx +1 -1
  218. package/dist/mdx/react/_examples/mdx/examples/layout/Masonry.tsx +3 -2
  219. package/dist/mdx/react/_examples/mdx/examples/layout/ResponsiveColumns.tsx +2 -2
  220. package/dist/mdx/react/_examples/mdx/examples/layout/Tiled2and3Columns.tsx +1 -1
  221. package/dist/mdx/react/_examples/mdx/examples/layout/Tiled4and2Columns.tsx +1 -1
  222. package/dist/mdx/react/action-bar/ActionBar.mdx +4 -4
  223. package/dist/mdx/react/action-bar/examples/Icons.tsx +1 -1
  224. package/dist/mdx/react/action-bar/examples/OverflowActionBar.tsx +5 -3
  225. package/dist/mdx/react/action-bar/examples/OverflowActionBarCustomButtonCount.tsx +1 -0
  226. package/dist/mdx/{preview-react → react}/avatar/Avatar.mdx +23 -13
  227. package/dist/mdx/react/avatar/examples/Basic.tsx +5 -0
  228. package/dist/mdx/{preview-react → react}/avatar/examples/Custom.tsx +1 -1
  229. package/dist/mdx/{preview-react → react}/avatar/examples/Decorative.tsx +7 -5
  230. package/dist/mdx/{preview-react → react}/avatar/examples/Image.tsx +1 -1
  231. package/dist/mdx/{preview-react → react}/avatar/examples/Size.tsx +2 -2
  232. package/dist/mdx/{preview-react → react}/avatar/examples/Variant.tsx +2 -2
  233. package/dist/mdx/react/avatar/examples/nicholas-avatar.jpg +0 -0
  234. package/dist/mdx/react/badge/CountBadge.mdx +1 -1
  235. package/dist/mdx/react/badge/examples/Basic.tsx +2 -2
  236. package/dist/mdx/react/badge/examples/CustomLimit.tsx +8 -8
  237. package/dist/mdx/react/badge/examples/Emphasis.tsx +4 -4
  238. package/dist/mdx/react/badge/examples/Inverse.tsx +7 -6
  239. package/dist/mdx/react/badge/examples/NotificationBadge.tsx +8 -7
  240. package/dist/mdx/react/banner/Banner.mdx +2 -2
  241. package/dist/mdx/react/banner/examples/IconBanner.tsx +1 -1
  242. package/dist/mdx/react/banner/examples/RefForwarding.tsx +1 -1
  243. package/dist/mdx/react/banner/examples/Sticky.tsx +1 -1
  244. package/dist/mdx/react/banner/examples/StickyAnimation.tsx +7 -7
  245. package/dist/mdx/react/banner/examples/StickyRTL.tsx +3 -14
  246. package/dist/mdx/react/banner/examples/ThemedAlert.tsx +4 -5
  247. package/dist/mdx/react/banner/examples/ThemedError.tsx +5 -6
  248. package/dist/mdx/react/breadcrumbs/Breadcrumbs.mdx +6 -5
  249. package/dist/mdx/react/breadcrumbs/examples/CurrentItemTruncation.tsx +1 -0
  250. package/dist/mdx/react/breadcrumbs/examples/LinkTruncation.tsx +1 -0
  251. package/dist/mdx/react/breadcrumbs/examples/Overflow.tsx +6 -3
  252. package/dist/mdx/react/breadcrumbs/examples/RTL.tsx +6 -10
  253. package/dist/mdx/react/button/button/Button.mdx +11 -12
  254. package/dist/mdx/react/button/button/Hyperlink.mdx +11 -5
  255. package/dist/mdx/react/button/button/examples/CustomStyles.tsx +43 -43
  256. package/dist/mdx/react/button/button/examples/Delete.tsx +4 -4
  257. package/dist/mdx/react/button/button/examples/ExternalHyperlinkInverse.tsx +3 -3
  258. package/dist/mdx/react/button/button/examples/ExternalHyperlinkRTL.tsx +10 -0
  259. package/dist/mdx/react/button/button/examples/HyperlinkInverse.tsx +3 -3
  260. package/dist/mdx/react/button/button/examples/Primary.tsx +5 -5
  261. package/dist/mdx/react/button/button/examples/PrimaryInverse.tsx +6 -6
  262. package/dist/mdx/react/button/button/examples/Secondary.tsx +5 -5
  263. package/dist/mdx/react/button/button/examples/SecondaryInverse.tsx +6 -6
  264. package/dist/mdx/react/button/button/examples/StandaloneHyperlink.tsx +2 -2
  265. package/dist/mdx/react/button/button/examples/Tertiary.tsx +5 -5
  266. package/dist/mdx/react/button/button/examples/TertiaryInverse.tsx +6 -6
  267. package/dist/mdx/react/button/button/examples/ThemeOverrides.tsx +6 -6
  268. package/dist/mdx/react/card/card.mdx +5 -5
  269. package/dist/mdx/react/card/examples/Basic.tsx +1 -0
  270. package/dist/mdx/react/card/examples/Borderless.tsx +2 -3
  271. package/dist/mdx/react/card/examples/CustomStyles.tsx +1 -3
  272. package/dist/mdx/react/card/examples/Stencils.tsx +9 -10
  273. package/dist/mdx/react/card/examples/{Filled.tsx → Tonal.tsx} +2 -1
  274. package/dist/mdx/react/checkbox/Checkbox.mdx +11 -12
  275. package/dist/mdx/react/checkbox/examples/Basic.tsx +1 -0
  276. package/dist/mdx/react/checkbox/examples/Caution.tsx +1 -0
  277. package/dist/mdx/react/checkbox/examples/Disabled.tsx +1 -0
  278. package/dist/mdx/react/checkbox/examples/Error.tsx +1 -0
  279. package/dist/mdx/react/checkbox/examples/Indeterminate.tsx +3 -2
  280. package/dist/mdx/react/checkbox/examples/Inverse.tsx +3 -2
  281. package/dist/mdx/react/checkbox/examples/LabelPosition.tsx +1 -0
  282. package/dist/mdx/react/checkbox/examples/RefForwarding.tsx +3 -2
  283. package/dist/mdx/react/checkbox/examples/Required.tsx +1 -0
  284. package/dist/mdx/react/collection/mdx/examples/BasicGrid.tsx +3 -3
  285. package/dist/mdx/react/collection/mdx/examples/DataLoader.tsx +4 -4
  286. package/dist/mdx/react/collection/mdx/examples/MultiSelection.tsx +3 -3
  287. package/dist/mdx/react/collection/mdx/examples/OverflowVerticalList.tsx +3 -2
  288. package/dist/mdx/react/collection/mdx/examples/RovingFocus.tsx +2 -2
  289. package/dist/mdx/react/collection/mdx/examples/Selection.tsx +3 -3
  290. package/dist/mdx/react/collection/mdx/examples/StringChildren.tsx +1 -1
  291. package/dist/mdx/react/collection/mdx/examples/WrappingGrid.tsx +3 -3
  292. package/dist/mdx/react/color-picker/color-input/ColorInput.mdx +7 -8
  293. package/dist/mdx/react/color-picker/color-input/examples/Basic.tsx +2 -1
  294. package/dist/mdx/react/color-picker/color-input/examples/Caution.tsx +2 -1
  295. package/dist/mdx/react/color-picker/color-input/examples/Checked.tsx +2 -1
  296. package/dist/mdx/react/color-picker/color-input/examples/Disabled.tsx +2 -1
  297. package/dist/mdx/react/color-picker/color-input/examples/Error.tsx +2 -1
  298. package/dist/mdx/react/color-picker/color-input/examples/Grow.tsx +2 -1
  299. package/dist/mdx/react/color-picker/color-input/examples/LabelPosition.tsx +2 -1
  300. package/dist/mdx/react/color-picker/color-input/examples/RefForwarding.tsx +2 -1
  301. package/dist/mdx/react/color-picker/color-input/examples/Required.tsx +2 -1
  302. package/dist/mdx/react/color-picker/color-input/examples/ValidColorChange.tsx +4 -3
  303. package/dist/mdx/react/color-picker/color-preview/ColorPreview.mdx +3 -3
  304. package/dist/mdx/react/color-picker/color-preview/examples/LabelPosition.tsx +2 -1
  305. package/dist/mdx/react/color-picker/color-preview/examples/RefForwarding.tsx +4 -3
  306. package/dist/mdx/react/combobox/examples/Autocomplete.tsx +11 -9
  307. package/dist/mdx/react/common/mdx/CompoundComponentUtilities.mdx +1 -1
  308. package/dist/mdx/react/common/mdx/Theming.mdx +166 -129
  309. package/dist/mdx/react/common/mdx/examples/CreateComponent.tsx +10 -4
  310. package/dist/mdx/react/common/mdx/examples/CreateContainer.tsx +1 -0
  311. package/dist/mdx/react/common/mdx/examples/CreateElemPropsHook.tsx +3 -2
  312. package/dist/mdx/react/common/mdx/examples/CreateModelHook.tsx +1 -0
  313. package/dist/mdx/react/common/mdx/examples/CreateSubcomponent.tsx +2 -1
  314. package/dist/mdx/react/common/mdx/examples/RTL.tsx +4 -5
  315. package/dist/mdx/react/common/mdx/examples/ResponsiveStyles.tsx +4 -3
  316. package/dist/mdx/react/common/mdx/examples/ResponsiveViewport.tsx +4 -3
  317. package/dist/mdx/react/common/mdx/examples/Theming.tsx +40 -22
  318. package/dist/mdx/react/dialog/Dialog.mdx +51 -20
  319. package/dist/mdx/react/dialog/examples/Basic.tsx +4 -3
  320. package/dist/mdx/react/dialog/examples/DialogWithFallbackPlacements.tsx +20 -12
  321. package/dist/mdx/react/dialog/examples/Focus.tsx +3 -3
  322. package/dist/mdx/react/expandable/Expandable.mdx +54 -2
  323. package/dist/mdx/react/expandable/examples/Avatar.tsx +1 -0
  324. package/dist/mdx/react/expandable/examples/Depth.tsx +10 -1
  325. package/dist/mdx/react/expandable/examples/HoistedModel.tsx +26 -21
  326. package/dist/mdx/react/expandable/examples/LongTitle.tsx +1 -0
  327. package/dist/mdx/react/expandable/examples/RTL.tsx +2 -7
  328. package/dist/mdx/react/form-field/FormField.mdx +97 -45
  329. package/dist/mdx/react/form-field/examples/AllFields.tsx +10 -11
  330. package/dist/mdx/react/form-field/examples/Basic.tsx +1 -0
  331. package/dist/mdx/react/form-field/examples/Caution.tsx +8 -5
  332. package/dist/mdx/react/form-field/examples/Custom.tsx +3 -2
  333. package/dist/mdx/react/form-field/examples/CustomId.tsx +1 -0
  334. package/dist/mdx/react/form-field/examples/Disabled.tsx +2 -2
  335. package/dist/mdx/react/form-field/examples/Error.tsx +3 -3
  336. package/dist/mdx/react/form-field/examples/GroupedInputs.tsx +14 -14
  337. package/dist/mdx/react/form-field/examples/Grow.tsx +1 -0
  338. package/dist/mdx/react/form-field/examples/HiddenLabel.tsx +27 -11
  339. package/dist/mdx/react/form-field/examples/Hint.tsx +2 -2
  340. package/dist/mdx/react/form-field/examples/LabelPositionHorizontalEnd.tsx +3 -2
  341. package/dist/mdx/react/form-field/examples/LabelPositionHorizontalStart.tsx +3 -2
  342. package/dist/mdx/react/form-field/examples/RefForwarding.tsx +4 -3
  343. package/dist/mdx/react/form-field/examples/Required.tsx +2 -1
  344. package/dist/mdx/react/form-field/examples/ThemedErrors.tsx +8 -8
  345. package/dist/mdx/react/icon/Assets.mdx +174 -17
  346. package/dist/mdx/react/icon/examples/AccentIconList.tsx +5 -4
  347. package/dist/mdx/react/icon/examples/AppletIconList.tsx +5 -4
  348. package/dist/mdx/react/icon/examples/ExpressiveBasic.tsx +41 -0
  349. package/dist/mdx/react/icon/examples/ExpressiveCustomStyles.tsx +54 -0
  350. package/dist/mdx/react/icon/examples/{IconList.tsx → ExpressiveIconList.tsx} +20 -13
  351. package/dist/mdx/react/icon/examples/SVGBasic.tsx +31 -0
  352. package/dist/mdx/react/icon/examples/SystemBasic.tsx +44 -0
  353. package/dist/mdx/react/icon/examples/SystemCircleBasic.tsx +34 -0
  354. package/dist/mdx/react/icon/examples/SystemCustomStyles.tsx +62 -0
  355. package/dist/mdx/react/icon/examples/SystemIconList.tsx +80 -0
  356. package/dist/mdx/react/information-highlight/InformationHighlight.mdx +96 -0
  357. package/dist/mdx/{preview-react → react}/information-highlight/examples/Basic.tsx +1 -1
  358. package/dist/mdx/{preview-react → react}/information-highlight/examples/Body.tsx +1 -1
  359. package/dist/mdx/{preview-react → react}/information-highlight/examples/Caution.tsx +2 -2
  360. package/dist/mdx/{preview-react → react}/information-highlight/examples/Critical.tsx +2 -2
  361. package/dist/mdx/{preview-react → react}/information-highlight/examples/CustomIconCritical.tsx +5 -6
  362. package/dist/mdx/{preview-react → react}/information-highlight/examples/Heading.tsx +1 -1
  363. package/dist/mdx/{preview-react → react}/information-highlight/examples/Informational.tsx +4 -4
  364. package/dist/mdx/{preview-react → react}/information-highlight/examples/RTL.tsx +6 -11
  365. package/dist/mdx/react/layout/Box.mdx +13 -13
  366. package/dist/mdx/react/layout/Flex.mdx +3 -3
  367. package/dist/mdx/react/layout/Grid.mdx +3 -3
  368. package/dist/mdx/react/layout/examples/Box/Basic.tsx +9 -2
  369. package/dist/mdx/react/layout/examples/Flex/Basic.tsx +1 -0
  370. package/dist/mdx/react/layout/examples/Grid/Basic.tsx +19 -13
  371. package/dist/mdx/react/layout/examples/Grid/GridCard.tsx +34 -24
  372. package/dist/mdx/react/layout/examples/Grid/GridLayout.tsx +1 -0
  373. package/dist/mdx/react/layout/examples/Grid/GridLayoutInteractive.tsx +3 -3
  374. package/dist/mdx/react/loading-dots/LoadingDots.mdx +1 -1
  375. package/dist/mdx/react/loading-dots/examples/Accessible.tsx +8 -7
  376. package/dist/mdx/react/loading-dots/examples/Basic.tsx +1 -0
  377. package/dist/mdx/react/loading-dots/examples/CustomColorAndAnimation.tsx +6 -4
  378. package/dist/mdx/react/loading-dots/examples/CustomShape.tsx +7 -7
  379. package/dist/mdx/react/loading-dots/examples/Inverse.tsx +2 -2
  380. package/dist/mdx/react/loading-dots/examples/RTL.tsx +3 -7
  381. package/dist/mdx/react/menu/Menu.mdx +68 -30
  382. package/dist/mdx/react/menu/examples/Icons.tsx +11 -10
  383. package/dist/mdx/react/menu/examples/MenuWithFallbackPlacements.tsx +5 -3
  384. package/dist/mdx/react/menu/examples/Nested.tsx +0 -1
  385. package/dist/mdx/react/menu/examples/NestedDynamic.tsx +1 -1
  386. package/dist/mdx/react/menu/examples/SelectableMenu.tsx +13 -2
  387. package/dist/mdx/react/modal/Modal.mdx +94 -16
  388. package/dist/mdx/react/modal/examples/Basic.tsx +5 -4
  389. package/dist/mdx/react/modal/examples/BodyOverflow.tsx +1 -1
  390. package/dist/mdx/react/modal/examples/CustomFocus.tsx +4 -3
  391. package/dist/mdx/react/modal/examples/FormModal.tsx +28 -3
  392. package/dist/mdx/react/modal/examples/FullOverflow.tsx +1 -1
  393. package/dist/mdx/react/modal/examples/IframeTest.tsx +1 -1
  394. package/dist/mdx/react/modal/examples/ModalWithPopup.tsx +3 -3
  395. package/dist/mdx/react/modal/examples/ModalWithPopupRTL.tsx +66 -0
  396. package/dist/mdx/react/modal/examples/NoTargetRTL.tsx +49 -0
  397. package/dist/mdx/react/modal/examples/ReturnFocus.tsx +140 -41
  398. package/dist/mdx/react/modal/examples/StackedModals.tsx +1 -1
  399. package/dist/mdx/react/modal/examples/WithRadioButtons.tsx +1 -0
  400. package/dist/mdx/react/modal/examples/WithTooltips.tsx +2 -1
  401. package/dist/mdx/react/modal/examples/WithoutCloseIcon.tsx +10 -9
  402. package/dist/mdx/react/pagination/examples/Basic.tsx +0 -1
  403. package/dist/mdx/react/pagination/examples/HoistedModel.tsx +0 -1
  404. package/dist/mdx/react/pagination/examples/RTL.tsx +2 -5
  405. package/dist/mdx/react/pagination/examples/ResponsiveRange.tsx +13 -9
  406. package/dist/mdx/react/pagination/pagination.mdx +8 -6
  407. package/dist/mdx/{preview-react → react}/pill/Pill.mdx +3 -3
  408. package/dist/mdx/{preview-react → react}/pill/examples/Basic.tsx +2 -3
  409. package/dist/mdx/react/pill/examples/CustomStyles.tsx +52 -0
  410. package/dist/mdx/{preview-react → react}/pill/examples/WithAvatar.tsx +6 -4
  411. package/dist/mdx/{preview-react → react}/pill/examples/WithCount.tsx +3 -2
  412. package/dist/mdx/{preview-react → react}/pill/examples/WithList.tsx +2 -2
  413. package/dist/mdx/{preview-react → react}/pill/examples/WithReadOnly.tsx +3 -3
  414. package/dist/mdx/{preview-react → react}/pill/examples/WithRemovable.tsx +6 -5
  415. package/dist/mdx/react/popup/Popup.mdx +64 -36
  416. package/dist/mdx/react/popup/examples/Basic.tsx +22 -5
  417. package/dist/mdx/react/popup/examples/ComboboxWithinPopup.tsx +3 -3
  418. package/dist/mdx/react/popup/examples/CustomTarget.tsx +3 -2
  419. package/dist/mdx/react/popup/examples/ExternalWindow.tsx +26 -29
  420. package/dist/mdx/react/popup/examples/FocusRedirect.tsx +27 -12
  421. package/dist/mdx/react/popup/examples/FocusTrap.tsx +8 -6
  422. package/dist/mdx/react/popup/examples/FullScreen.tsx +6 -6
  423. package/dist/mdx/react/popup/examples/InitialFocus.tsx +115 -11
  424. package/dist/mdx/react/popup/examples/InlinePopup.tsx +126 -0
  425. package/dist/mdx/react/popup/examples/MixedPopupTypes.tsx +5 -4
  426. package/dist/mdx/react/popup/examples/MultiplePopups.tsx +34 -22
  427. package/dist/mdx/react/popup/examples/NestedPopups.tsx +5 -5
  428. package/dist/mdx/react/popup/examples/PopupWithFallbackPlacements.tsx +26 -18
  429. package/dist/mdx/react/popup/examples/PopupWithNonHidablePopup.tsx +1 -1
  430. package/dist/mdx/react/popup/examples/RTL.tsx +9 -9
  431. package/dist/mdx/react/popup/examples/ReturnFocusTest.tsx +4 -4
  432. package/dist/mdx/react/popup/examples/TooltipReturnFocus.tsx +5 -5
  433. package/dist/mdx/react/radio/Radio.mdx +8 -9
  434. package/dist/mdx/react/radio/examples/Basic.tsx +4 -3
  435. package/dist/mdx/react/radio/examples/Caution.tsx +2 -1
  436. package/dist/mdx/react/radio/examples/Disabled.tsx +2 -1
  437. package/dist/mdx/react/radio/examples/Error.tsx +2 -1
  438. package/dist/mdx/react/radio/examples/Inverse.tsx +3 -2
  439. package/dist/mdx/react/radio/examples/LabelPosition.tsx +2 -1
  440. package/dist/mdx/react/radio/examples/NoValue.tsx +2 -1
  441. package/dist/mdx/react/radio/examples/RefForwarding.tsx +2 -1
  442. package/dist/mdx/react/radio/examples/Required.tsx +2 -1
  443. package/dist/mdx/react/segmented-control/SegmentedControl.mdx +119 -18
  444. package/dist/mdx/react/segmented-control/examples/Basic.tsx +32 -28
  445. package/dist/mdx/{preview-react → react}/segmented-control/examples/Disabled.tsx +2 -2
  446. package/dist/mdx/{preview-react → react}/segmented-control/examples/Dynamic.tsx +3 -2
  447. package/dist/mdx/{preview-react → react}/segmented-control/examples/RTL.tsx +4 -4
  448. package/dist/mdx/{preview-react → react}/segmented-control/examples/Sizes.tsx +4 -3
  449. package/dist/mdx/{preview-react → react}/segmented-control/examples/TextAndIcon.tsx +2 -1
  450. package/dist/mdx/{preview-react → react}/segmented-control/examples/TextOnly.tsx +2 -1
  451. package/dist/mdx/{preview-react → react}/segmented-control/examples/Vertical.tsx +2 -2
  452. package/dist/mdx/react/select/Select.mdx +26 -20
  453. package/dist/mdx/react/select/examples/Basic.tsx +2 -1
  454. package/dist/mdx/react/select/examples/Caution.tsx +2 -1
  455. package/dist/mdx/react/select/examples/Complex.tsx +2 -1
  456. package/dist/mdx/react/select/examples/Controlled.tsx +3 -2
  457. package/dist/mdx/react/select/examples/Disabled.tsx +2 -1
  458. package/dist/mdx/react/select/examples/DisabledOption.tsx +2 -1
  459. package/dist/mdx/react/select/examples/Error.tsx +2 -1
  460. package/dist/mdx/react/select/examples/FetchingDynamicItems.tsx +4 -3
  461. package/dist/mdx/react/select/examples/GroupedItems.tsx +59 -0
  462. package/dist/mdx/react/select/examples/Grow.tsx +2 -1
  463. package/dist/mdx/react/select/examples/HoistedModel.tsx +1 -0
  464. package/dist/mdx/react/select/examples/InitialSelectedItem.tsx +2 -1
  465. package/dist/mdx/react/select/examples/LabelPosition.tsx +2 -1
  466. package/dist/mdx/react/select/examples/MenuHeight.tsx +1 -1
  467. package/dist/mdx/react/select/examples/Placeholder.tsx +2 -1
  468. package/dist/mdx/react/select/examples/RefForwarding.tsx +1 -0
  469. package/dist/mdx/react/select/examples/Required.tsx +2 -1
  470. package/dist/mdx/react/select/examples/WithIcons.tsx +6 -10
  471. package/dist/mdx/react/side-panel/SidePanel.mdx +287 -0
  472. package/dist/mdx/react/side-panel/examples/AlwaysOpen.tsx +50 -0
  473. package/dist/mdx/react/side-panel/examples/Basic.tsx +33 -0
  474. package/dist/mdx/react/side-panel/examples/ExternalControl.tsx +60 -0
  475. package/dist/mdx/react/side-panel/examples/Heading.tsx +43 -0
  476. package/dist/mdx/react/side-panel/examples/OnStateTransition.tsx +52 -0
  477. package/dist/mdx/react/side-panel/examples/RightOrigin.tsx +67 -0
  478. package/dist/mdx/react/side-panel/examples/Variant.tsx +51 -0
  479. package/dist/mdx/react/side-panel/examples/useDirection.ts +24 -0
  480. package/dist/mdx/react/skeleton/Skeleton.mdx +1 -1
  481. package/dist/mdx/react/skeleton/examples/Basic.tsx +8 -6
  482. package/dist/mdx/react/skeleton/examples/Color.tsx +13 -11
  483. package/dist/mdx/react/skeleton/examples/Header.tsx +1 -0
  484. package/dist/mdx/react/skeleton/examples/Shape.tsx +4 -3
  485. package/dist/mdx/react/skeleton/examples/Simulation.tsx +40 -25
  486. package/dist/mdx/react/skeleton/examples/Text.tsx +1 -0
  487. package/dist/mdx/react/status-indicator/StatusIndicator.mdx +1 -1
  488. package/dist/mdx/react/status-indicator/examples/Basic.tsx +6 -7
  489. package/dist/mdx/react/status-indicator/examples/Emphasis.tsx +6 -7
  490. package/dist/mdx/react/status-indicator/examples/Icon.tsx +3 -2
  491. package/dist/mdx/react/status-indicator/examples/MaxWidth.tsx +6 -7
  492. package/dist/mdx/react/switch/Switch.mdx +22 -9
  493. package/dist/mdx/react/switch/examples/Basic.tsx +1 -0
  494. package/dist/mdx/react/switch/examples/Caution.tsx +1 -0
  495. package/dist/mdx/react/switch/examples/Disabled.tsx +1 -0
  496. package/dist/mdx/react/switch/examples/Error.tsx +1 -0
  497. package/dist/mdx/react/switch/examples/LabelPosition.tsx +1 -0
  498. package/dist/mdx/react/switch/examples/RefForwarding.tsx +1 -0
  499. package/dist/mdx/react/table/examples/BaseHtmlTable.tsx +1 -3
  500. package/dist/mdx/react/table/examples/Basic.tsx +1 -3
  501. package/dist/mdx/react/table/examples/BasicWithHeading.tsx +3 -5
  502. package/dist/mdx/react/table/examples/FixedColumn.tsx +8 -8
  503. package/dist/mdx/react/table/examples/RightToLeft.tsx +3 -5
  504. package/dist/mdx/react/tabs/Tabs.mdx +10 -9
  505. package/dist/mdx/react/tabs/examples/AlternativeTabStop.tsx +3 -4
  506. package/dist/mdx/react/tabs/examples/Basic.tsx +3 -3
  507. package/dist/mdx/react/tabs/examples/DisabledTab.tsx +3 -3
  508. package/dist/mdx/react/tabs/examples/DynamicTabs.tsx +2 -1
  509. package/dist/mdx/react/tabs/examples/HoistedModel.tsx +3 -4
  510. package/dist/mdx/react/tabs/examples/Icons.tsx +4 -5
  511. package/dist/mdx/react/tabs/examples/NamedTabs.tsx +3 -3
  512. package/dist/mdx/react/tabs/examples/OverflowTabs.tsx +2 -2
  513. package/dist/mdx/react/tabs/examples/RightToLeft.tsx +5 -5
  514. package/dist/mdx/react/tabs/examples/SinglePanel.tsx +2 -4
  515. package/dist/mdx/react/testing/examples/Basic.tsx +3 -3
  516. package/dist/mdx/react/text/LabelText.mdx +1 -1
  517. package/dist/mdx/react/text/Text.mdx +1 -1
  518. package/dist/mdx/react/text/examples/BodyText/Basic.tsx +1 -0
  519. package/dist/mdx/react/text/examples/Heading/Basic.tsx +1 -0
  520. package/dist/mdx/react/text/examples/LabelText/Basic.tsx +1 -0
  521. package/dist/mdx/react/text/examples/LabelText/Cursor.tsx +1 -0
  522. package/dist/mdx/react/text/examples/LabelText/Disabled.tsx +3 -5
  523. package/dist/mdx/react/text/examples/Subtext/Basic.tsx +1 -0
  524. package/dist/mdx/react/text/examples/Text/Basic.tsx +12 -7
  525. package/dist/mdx/react/text/examples/Title/Basic.tsx +1 -0
  526. package/dist/mdx/react/text-area/TextArea.mdx +44 -18
  527. package/dist/mdx/react/text-area/examples/Basic.tsx +1 -0
  528. package/dist/mdx/react/text-area/examples/Disabled.tsx +1 -0
  529. package/dist/mdx/react/text-area/examples/Grow.tsx +1 -0
  530. package/dist/mdx/react/text-area/examples/LabelPosition.tsx +1 -0
  531. package/dist/mdx/react/text-area/examples/Placeholder.tsx +1 -0
  532. package/dist/mdx/react/text-area/examples/RefForwarding.tsx +1 -0
  533. package/dist/mdx/react/text-area/examples/Required.tsx +1 -0
  534. package/dist/mdx/react/text-area/examples/ResizeConstraints.tsx +1 -0
  535. package/dist/mdx/react/text-input/TextInput.mdx +43 -18
  536. package/dist/mdx/react/text-input/examples/Basic.tsx +1 -0
  537. package/dist/mdx/react/text-input/examples/Disabled.tsx +1 -0
  538. package/dist/mdx/react/text-input/examples/Grow.tsx +1 -0
  539. package/dist/mdx/react/text-input/examples/Icons.tsx +25 -21
  540. package/dist/mdx/react/text-input/examples/LabelPosition.tsx +1 -0
  541. package/dist/mdx/react/text-input/examples/Placeholder.tsx +1 -0
  542. package/dist/mdx/react/text-input/examples/RefForwarding.tsx +1 -0
  543. package/dist/mdx/react/text-input/examples/Required.tsx +1 -0
  544. package/dist/mdx/react/toast/examples/Basic.tsx +2 -1
  545. package/dist/mdx/react/toast/examples/RTL.tsx +4 -6
  546. package/dist/mdx/react/toast/examples/ToastAlert.tsx +2 -2
  547. package/dist/mdx/react/toast/examples/ToastDialog.tsx +2 -1
  548. package/dist/mdx/react/toast/examples/WithActionLinkAndCloseIcon.tsx +2 -4
  549. package/dist/mdx/react/toast/examples/WithPopper.tsx +4 -4
  550. package/dist/mdx/react/toast/toast.mdx +4 -3
  551. package/dist/mdx/react/tokens/Tokens.mdx +1 -1
  552. package/dist/mdx/react/tokens/examples/Overview.tsx +2 -2
  553. package/dist/mdx/react/tokens/examples/Tokens.tsx +4 -4
  554. package/dist/mdx/react/tooltip/Tooltip.mdx +31 -13
  555. package/dist/mdx/react/tooltip/examples/Default.tsx +1 -1
  556. package/dist/mdx/react/tooltip/examples/DescriptionType.tsx +3 -3
  557. package/dist/mdx/react/tooltip/examples/Ellipsis.tsx +8 -8
  558. package/dist/mdx/react/tooltip/examples/Placements.tsx +13 -14
  559. package/dist/mdx/react/tooltip/examples/UseTooltip.tsx +2 -2
  560. package/dist/mdx/style-props/STYLE_PROPS.mdx +1 -1
  561. package/dist/mdx/style-props/stylePropsMigrationCodemod.mdx +1 -1
  562. package/dist/mdx/style-props/stylePropsMigrationOverview.mdx +20 -20
  563. package/dist/mdx/styling/mdx/CreateStyles.mdx +32 -31
  564. package/dist/mdx/styling/mdx/CustomizingStyles.mdx +4 -4
  565. package/dist/mdx/styling/mdx/MergingStyles.mdx +6 -4
  566. package/dist/mdx/styling/mdx/Overview.mdx +15 -15
  567. package/dist/mdx/styling/mdx/Stencils.mdx +32 -30
  568. package/dist/mdx/styling/mdx/Utilities.mdx +135 -27
  569. package/dist/mdx/styling/mdx/examples/CSProp.tsx +7 -9
  570. package/dist/mdx/styling/mdx/examples/CreateModifiers.tsx +1 -1
  571. package/dist/mdx/styling/mdx/examples/CreateStencil.tsx +10 -9
  572. package/dist/mdx/styling/mdx/examples/CreateStyles.tsx +2 -4
  573. package/dist/mdx/styling/mdx/examples/CustomButton.tsx +16 -23
  574. package/dist/mdx/styling/mdx/examples/CustomIcon.tsx +5 -6
  575. package/dist/mdx/styling/mdx/examples/EmotionButton.tsx +1 -1
  576. package/dist/mdx/styling/mdx/examples/ManualStylesButton.tsx +1 -0
  577. package/dist/mdx/styling/mdx/examples/StyledButton.tsx +13 -15
  578. package/dist/mdx/styling/mdx/examples/StylingButton.tsx +2 -1
  579. package/dist/mdx/styling/mdx/examples/StylingOverrides.tsx +10 -10
  580. package/dist/mdx/tokens/TokenMigrationCodemod.mdx +9 -0
  581. package/dist/mdx/tokens/TokenMigrationFinal.mdx +35 -30
  582. package/dist/mdx/tokens/TokenMigrationInstall.mdx +17 -14
  583. package/dist/mdx/tokens/TokenMigrationMappingColors.mdx +434 -288
  584. package/dist/mdx/tokens/TokenMigrationMappingSystem.mdx +51 -199
  585. package/dist/mdx/tokens/TokenMigrationOverview.mdx +23 -41
  586. package/dist/mdx/welcome.mdx +14 -16
  587. package/lib/DescriptionTooltip.tsx +16 -11
  588. package/lib/DownloadLLMFile.tsx +12 -12
  589. package/lib/ExampleCodeBlock.tsx +38 -28
  590. package/lib/MDXElements.tsx +6 -5
  591. package/lib/MoreTooltip.tsx +12 -10
  592. package/lib/Specifications.tsx +30 -17
  593. package/lib/StorybookStatusIndicator.tsx +32 -20
  594. package/lib/StylePropsTable.tsx +2 -1
  595. package/lib/SymbolDoc.tsx +2 -1
  596. package/lib/Table.tsx +37 -39
  597. package/lib/Value.tsx +22 -15
  598. package/lib/docs.ts +1 -0
  599. package/lib/stackblitzFiles/App.tsx +7 -21
  600. package/lib/stackblitzFiles/main.tsx +6 -4
  601. package/lib/stackblitzFiles/packageJSONFile.ts +4 -2
  602. package/lib/stackblitzFiles/types/custom-imports.d.ts +0 -9
  603. package/lib/stackblitzFiles/vite.config.ts +1 -3
  604. package/lib/widgetUtils.tsx +42 -43
  605. package/lib/widgets/array.tsx +1 -1
  606. package/lib/widgets/callExpression.tsx +1 -2
  607. package/lib/widgets/canvasColor.tsx +2 -2
  608. package/lib/widgets/conditional.tsx +1 -1
  609. package/lib/widgets/enhancedComponent.tsx +12 -8
  610. package/lib/widgets/external.tsx +1 -2
  611. package/lib/widgets/function.tsx +3 -3
  612. package/lib/widgets/index.ts +1 -1
  613. package/lib/widgets/intersection.tsx +1 -1
  614. package/lib/widgets/model.tsx +1 -1
  615. package/lib/widgets/parenthesis.tsx +1 -1
  616. package/lib/widgets/primitives.tsx +3 -2
  617. package/lib/widgets/qualifiedName.tsx +1 -1
  618. package/lib/widgets/tuple.tsx +1 -1
  619. package/lib/widgets/typeParameter.tsx +1 -1
  620. package/lib/widgets/union.tsx +1 -1
  621. package/package.json +14 -12
  622. package/webpack/extract-exports.js +2 -1
  623. package/dist/mdx/labs-react/combobox/Combobox.mdx +0 -68
  624. package/dist/mdx/labs-react/combobox/examples/Basic.tsx +0 -88
  625. package/dist/mdx/labs-react/combobox/examples/DisabledItem.tsx +0 -88
  626. package/dist/mdx/labs-react/combobox/examples/GroupOfResult.tsx +0 -88
  627. package/dist/mdx/labs-react/combobox/examples/Grow.tsx +0 -88
  628. package/dist/mdx/labs-react/combobox/examples/NoClearButton.tsx +0 -88
  629. package/dist/mdx/labs-react/combobox/examples/RTL.tsx +0 -90
  630. package/dist/mdx/labs-react/search-form/SearchForm.mdx +0 -92
  631. package/dist/mdx/labs-react/search-form/examples/Basic.tsx +0 -63
  632. package/dist/mdx/labs-react/search-form/examples/Collapsed.tsx +0 -64
  633. package/dist/mdx/labs-react/search-form/examples/CustomStyles.tsx +0 -91
  634. package/dist/mdx/labs-react/search-form/examples/CustomTheme.tsx +0 -73
  635. package/dist/mdx/labs-react/search-form/examples/Grow.tsx +0 -64
  636. package/dist/mdx/labs-react/search-form/examples/RTL.tsx +0 -72
  637. package/dist/mdx/labs-react/search-form/examples/Theming.tsx +0 -66
  638. package/dist/mdx/preview-react/avatar/examples/Basic.tsx +0 -5
  639. package/dist/mdx/preview-react/avatar/examples/nicholas-avatar.png +0 -0
  640. package/dist/mdx/preview-react/information-highlight/InformationHighlight.mdx +0 -109
  641. package/dist/mdx/preview-react/pill/examples/CustomStyles.tsx +0 -53
  642. package/dist/mdx/preview-react/segmented-control/SegmentedControl.mdx +0 -139
  643. package/dist/mdx/preview-react/segmented-control/examples/Basic.tsx +0 -42
  644. package/dist/mdx/preview-react/select/Select.mdx +0 -107
  645. package/dist/mdx/preview-react/select/examples/Left Label/AlertLeft.tsx +0 -18
  646. package/dist/mdx/preview-react/select/examples/Left Label/DefaultLeft.tsx +0 -17
  647. package/dist/mdx/preview-react/select/examples/Left Label/DefaultWithCustomOptionsLeft.tsx +0 -25
  648. package/dist/mdx/preview-react/select/examples/Left Label/DefaultWithSimpleOptionsLeft.tsx +0 -17
  649. package/dist/mdx/preview-react/select/examples/Left Label/DisabledLeft.tsx +0 -19
  650. package/dist/mdx/preview-react/select/examples/Left Label/ErrorLeft.tsx +0 -18
  651. package/dist/mdx/preview-react/select/examples/Left Label/GrowLeft.tsx +0 -17
  652. package/dist/mdx/preview-react/select/examples/Left Label/ScrollableLeft.tsx +0 -17
  653. package/dist/mdx/preview-react/select/examples/Left Label/index.ts +0 -8
  654. package/dist/mdx/preview-react/select/examples/Top Label/Caution.tsx +0 -16
  655. package/dist/mdx/preview-react/select/examples/Top Label/Default.tsx +0 -15
  656. package/dist/mdx/preview-react/select/examples/Top Label/DefaultWithCustomOptions.tsx +0 -23
  657. package/dist/mdx/preview-react/select/examples/Top Label/DefaultWithSimpleOptions.tsx +0 -15
  658. package/dist/mdx/preview-react/select/examples/Top Label/Disabled.tsx +0 -17
  659. package/dist/mdx/preview-react/select/examples/Top Label/Error.tsx +0 -16
  660. package/dist/mdx/preview-react/select/examples/Top Label/Grow.tsx +0 -15
  661. package/dist/mdx/preview-react/select/examples/Top Label/Scrollable.tsx +0 -13
  662. package/dist/mdx/preview-react/select/examples/Top Label/index.ts +0 -8
  663. package/dist/mdx/preview-react/select/examples/storiesData.tsx +0 -92
  664. package/dist/mdx/react/_examples/mdx/examples/SegmentControlWithText.tsx +0 -119
  665. package/dist/mdx/react/avatar/avatar/Avatar.mdx +0 -109
  666. package/dist/mdx/react/avatar/avatar/examples/Basic.tsx +0 -17
  667. package/dist/mdx/react/avatar/avatar/examples/Button.tsx +0 -20
  668. package/dist/mdx/react/avatar/avatar/examples/CustomStyles.tsx +0 -34
  669. package/dist/mdx/react/avatar/avatar/examples/Image.tsx +0 -25
  670. package/dist/mdx/react/avatar/avatar/examples/LazyLoad.tsx +0 -20
  671. package/dist/mdx/react/avatar/avatar/examples/ObjectFit.tsx +0 -30
  672. package/dist/mdx/react/avatar/avatar/examples/Size.tsx +0 -27
  673. package/dist/mdx/react/avatar/avatar/examples/Variant.tsx +0 -10
  674. package/dist/mdx/react/avatar/avatar/examples/test-avatar.png +0 -0
  675. package/dist/mdx/react/icon/examples/Overview.tsx +0 -42
  676. package/dist/mdx/react/text-area/examples/Caution.tsx +0 -21
  677. package/dist/mdx/react/text-area/examples/Error.tsx +0 -21
  678. package/dist/mdx/react/text-input/examples/Caution.tsx +0 -21
  679. package/dist/mdx/react/text-input/examples/Error.tsx +0 -21
  680. /package/dist/mdx/accessibility/{AccessibilityTesting.mdx → TestingTableWithFormFields.mdx} +0 -0
  681. /package/dist/mdx/{preview-react → react}/pill/examples/test-avatar.png +0 -0
package/dist/mdx/tokens/TokenMigrationMappingColors.mdx CHANGED
@@ -16,6 +16,7 @@ import {StorybookInformationHighlight} from './StorybookInformationHighlight';
16
16
  - [Base Color Mapping](#base-color-mapping)
17
17
  - [Brand Color Migration](#brand-color-migration)
18
18
  - [System Color Usage Guide (Recommended)](#system-color-usage-guide-recommended)
19
+ - [Other Mapping](#other-mapping)
19
20
  - [Migration Examples](#migration-examples)
20
21
 
21
22
  ## Base Color Mapping
@@ -34,214 +35,214 @@ to see visual changes.
34
35
  > [a comparison tool](https://stackblitz.com/edit/color-comparator?file=src%2FApp.tsx) to find the
35
36
  > best match.
36
37
 
37
- | Old Token | New Token | CSS Variable | System Color Replacement |
38
- | ------------------------------ | --------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------- |
39
- | `colors.cinnamon100` | `base.red50` | `--cnvs-base-palette-red-50` | sys.color.bg.critical.softer |
40
- | `colors.cinnamon200` | `base.red100` | `--cnvs-base-palette-red-100` | sys.color.bg.critical.soft |
41
- | `colors.cinnamon300` | `base.red300` | `--cnvs-base-palette-red-300` | |
42
- | `colors.cinnamon400` | `base.red400` | `--cnvs-base-palette-red-400` | sys.color.fg.critical.soft |
43
- | `colors.cinnamon500` | `base.red600` | `--cnvs-base-palette-red-600` | sys.color.bg.critical.default <br/> sys.color.fg.critical.default <br/> sys.color.border.critical.default |
44
- | `colors.cinnamon600` | `base.red700` | `--cnvs-base-palette-red-700` | sys.color.bg.critical.strong <br/> sys.color.fg.critical.strong |
45
- | `colors.peach100` | `base.coral50` | `--cnvs-base-palette-coral-50` | |
46
- | `colors.peach200` | `base.coral200` | `--cnvs-base-palette-coral-200` | |
47
- | `colors.peach300` | `base.coral300` | `--cnvs-base-palette-coral-300` | |
48
- | `colors.peach400` | `base.coral400` | `--cnvs-base-palette-coral-400` | |
49
- | `colors.peach500` | `base.coral600` | `--cnvs-base-palette-coral-600` | |
50
- | `colors.peach600` | `base.coral700` | `--cnvs-base-palette-coral-700` | |
51
- | `colors.chiliMango100` | `base.coral100` | `--cnvs-base-palette-coral-100` | |
52
- | `colors.chiliMango200` | `base.coral200` | `--cnvs-base-palette-coral-200` | |
53
- | `colors.chiliMango300` | `base.coral300` | `--cnvs-base-palette-coral-300` | |
54
- | `colors.chiliMango400` | `base.coral500` | `--cnvs-base-palette-coral-500` | |
55
- | `colors.chiliMango500` | `base.coral500` | `--cnvs-base-palette-coral-500` | |
56
- | `colors.chiliMango600` | `base.coral700` | `--cnvs-base-palette-coral-700` | |
57
- | `colors.cantaloupe100` | `base.amber50` | `--cnvs-base-palette-amber-50` | sys.color.bg.caution.softer |
58
- | `colors.cantaloupe200` | `base.amber200` | `--cnvs-base-palette-amber-200` | sys.color.bg.caution.soft |
59
- | `colors.cantaloupe300` | `base.amber300` | `--cnvs-base-palette-amber-300` | |
60
- | `colors.cantaloupe400` | `base.amber400` | `--cnvs-base-palette-amber-400` | sys.color.bg.caution.default <br/> sys.color.border.caution.default |
61
- | `colors.cantaloupe500` | `base.amber500` | `--cnvs-base-palette-amber-500` | sys.color.bg.caution.strong <br/> sys.color.fg.caution.softer |
62
- | `colors.cantaloupe600` | `base.amber600` | `--cnvs-base-palette-amber-600` | sys.color.bg.caution.stronger <br/> sys.color.border.caution.strong |
63
- | `colors.sourLemon100` | `base.amber25` | `--cnvs-base-palette-amber-25` | |
64
- | `colors.sourLemon200` | `base.amber100` | `--cnvs-base-palette-amber-100` | |
65
- | `colors.sourLemon300` | `base.amber200` | `--cnvs-base-palette-amber-200` | |
66
- | `colors.sourLemon400` | `base.amber300` | `--cnvs-base-palette-amber-300` | |
67
- | `colors.sourLemon500` | `base.amber300` | `--cnvs-base-palette-amber-300` | |
68
- | `colors.sourLemon600` | `base.amber500` | `--cnvs-base-palette-amber-500` | |
69
- | `colors.juicyPear100` | `base.amber25` | `--cnvs-base-palette-amber-25` | |
70
- | `colors.juicyPear200` | `base.amber100` | `--cnvs-base-palette-amber-100` | |
71
- | `colors.juicyPear300` | `base.amber200` | `--cnvs-base-palette-amber-200` | |
72
- | `colors.juicyPear400` | `base.amber200` | `--cnvs-base-palette-amber-200` | |
73
- | `colors.juicyPear500` | `base.green500` | `--cnvs-base-palette-green-500` | |
74
- | `colors.juicyPear600` | `base.green700` | `--cnvs-base-palette-green-700` | |
75
- | `colors.kiwi100` | `base.green50` | `--cnvs-base-palette-green-50` | |
76
- | `colors.kiwi200` | `base.green100` | `--cnvs-base-palette-green-100` | |
77
- | `colors.kiwi300` | `base.green200` | `--cnvs-base-palette-green-200` | |
78
- | `colors.kiwi400` | `base.green500` | `--cnvs-base-palette-green-500` | |
79
- | `colors.kiwi500` | `base.green500` | `--cnvs-base-palette-green-500` | |
80
- | `colors.kiwi600` | `base.green700` | `--cnvs-base-palette-green-700` | |
81
- | `colors.greenApple50` | `base.green50` | `--cnvs-base-palette-green-50` | sys.color.bg.positive.softer |
82
- | `colors.greenApple100` | `base.green100` | `--cnvs-base-palette-green-100` | sys.color.bg.positive.soft |
83
- | `colors.greenApple200` | `base.green200` | `--cnvs-base-palette-green-200` | sys.color.fg.positive.soft |
84
- | `colors.greenApple600` | `base.green600` | `--cnvs-base-palette-green-600` | sys.color.bg.positive.default <br/> sys.color.fg.positive.default |
85
- | `colors.greenApple700` | `base.green700` | `--cnvs-base-palette-green-700` | sys.color.bg.positive.strong <br/> sys.color.fg.positive.strong |
86
- | `colors.greenApple800` | `base.green800` | `--cnvs-base-palette-green-800` | sys.color.bg.positive.stronger <br/> sys.color.fg.positive.stronger |
87
- | `colors.watermelon100` | `base.teal25` | `--cnvs-base-palette-teal-25` | |
88
- | `colors.watermelon200` | `base.teal100` | `--cnvs-base-palette-teal-100` | |
89
- | `colors.watermelon300` | `base.green100` | `--cnvs-base-palette-green-100` | |
90
- | `colors.watermelon400` | `base.green600` | `--cnvs-base-palette-green-600` | |
91
- | `colors.watermelon500` | `base.green700` | `--cnvs-base-palette-green-700` | |
92
- | `colors.watermelon600` | `base.green900` | `--cnvs-base-palette-green-900` | |
93
- | `colors.jewel100` | `base.teal25` | `--cnvs-base-palette-teal-25` | |
94
- | `colors.jewel200` | `base.teal200` | `--cnvs-base-palette-teal-200` | |
95
- | `colors.jewel300` | `base.teal400` | `--cnvs-base-palette-teal-400` | |
96
- | `colors.jewel400` | `base.teal500` | `--cnvs-base-palette-teal-500` | |
97
- | `colors.jewel500` | `base.teal600` | `--cnvs-base-palette-teal-600` | |
98
- | `colors.jewel600` | `base.teal700` | `--cnvs-base-palette-teal-700` | |
99
- | `colors.toothpaste100` | `base.azure50` | `--cnvs-base-palette-azure-50` | |
100
- | `colors.toothpaste200` | `base.azure200` | `--cnvs-base-palette-azure-200` | |
101
- | `colors.toothpaste300` | `base.azure300` | `--cnvs-base-palette-azure-300` | |
102
- | `colors.toothpaste400` | `base.azure500` | `--cnvs-base-palette-azure-500` | |
103
- | `colors.toothpaste500` | `base.azure700` | `--cnvs-base-palette-azure-700` | |
104
- | `colors.toothpaste600` | `base.azure800` | `--cnvs-base-palette-azure-800` | |
105
- | `colors.blueberry100` | `base.blue100` | `--cnvs-base-palette-blue-100` | |
106
- | `colors.blueberry200` | `base.blue100` | `--cnvs-base-palette-blue-100` | sys.color.bg.primary.soft |
107
- | `colors.blueberry300` | `base.blue400` | `--cnvs-base-palette-blue-400` | sys.color.fg.primary.soft |
108
- | `colors.blueberry400` | `base.blue600` | `--cnvs-base-palette-blue-600` | sys.color.bg.primary.default <br/> sys.color.fg.primary.default <br/> sys.color.border.primary.default |
109
- | `colors.blueberry500` | `base.blue700` | `--cnvs-base-palette-blue-700` | sys.color.bg.primary.strong <br/> sys.color.fg.primary.strong |
110
- | `colors.blueberry600` | `base.blue800` | `--cnvs-base-palette-blue-800` | sys.color.bg.primary.stronger <br/> sys.color.text.primary.stronger |
111
- | `colors.plum100` | `base.blue100` | `--cnvs-base-palette-blue-100` | |
112
- | `colors.plum200` | `base.blue200` | `--cnvs-base-palette-blue-200` | |
113
- | `colors.plum300` | `base.blue300` | `--cnvs-base-palette-blue-300` | |
114
- | `colors.plum400` | `base.blue400` | `--cnvs-base-palette-blue-400` | |
115
- | `colors.plum500` | `base.blue500` | `--cnvs-base-palette-blue-500` | |
116
- | `colors.plum600` | `base.blue600` | `--cnvs-base-palette-blue-600` | |
117
- | `colors.berrySmoothie100` | `base.indigo50` | `--cnvs-base-palette-indigo-50` | |
118
- | `colors.berrySmoothie200` | `base.indigo200` | `--cnvs-base-palette-indigo-200` | |
119
- | `colors.berrySmoothie300` | `base.indigo400` | `--cnvs-base-palette-indigo-400` | |
120
- | `colors.berrySmoothie400` | `base.blue500` | `--cnvs-base-palette-blue-500` | |
121
- | `colors.berrySmoothie500` | `base.blue700` | `--cnvs-base-palette-blue-700` | |
122
- | `colors.berrySmoothie600` | `base.blue800` | `--cnvs-base-palette-blue-800` | |
123
- | `colors.blackberry100` | `base.indigo25` | `--cnvs-base-palette-indigo-25` | |
124
- | `colors.blackberry200` | `base.indigo200` | `--cnvs-base-palette-indigo-200` | |
125
- | `colors.blackberry300` | `base.indigo400` | `--cnvs-base-palette-indigo-400` | |
126
- | `colors.blackberry400` | `base.indigo500` | `--cnvs-base-palette-indigo-500` | |
127
- | `colors.blackberry500` | `base.indigo700` | `--cnvs-base-palette-indigo-700` | |
128
- | `colors.blackberry600` | `base.indigo900` | `--cnvs-base-palette-indigo-900` | |
129
- | `colors.islandPunch100` | `base.purple25` | `--cnvs-base-palette-purple-25` | |
130
- | `colors.islandPunch200` | `base.purple200` | `--cnvs-base-palette-purple-200` | |
131
- | `colors.islandPunch300` | `base.purple500` | `--cnvs-base-palette-purple-500` | |
132
- | `colors.islandPunch400` | `base.purple500` | `--cnvs-base-palette-purple-500` | |
133
- | `colors.islandPunch500` | `base.purple700` | `--cnvs-base-palette-purple-700` | |
134
- | `colors.islandPunch600` | `base.purple800` | `--cnvs-base-palette-purple-800` | |
135
- | `colors.grapeSoda100` | `base.magenta50` | `--cnvs-base-palette-magenta-50` | |
136
- | `colors.grapeSoda200` | `base.magenta200` | `--cnvs-base-palette-magenta-200` | |
137
- | `colors.grapeSoda300` | `base.purple400` | `--cnvs-base-palette-purple-400` | |
138
- | `colors.grapeSoda400` | `base.purple500` | `--cnvs-base-palette-purple-500` | |
139
- | `colors.grapeSoda500` | `base.purple600` | `--cnvs-base-palette-purple-600` | |
140
- | `colors.grapeSoda600` | `base.purple800` | `--cnvs-base-palette-purple-800` | |
141
- | `colors.pomegranate100` | `base.magenta50` | `--cnvs-base-palette-magenta-50` | |
142
- | `colors.pomegranate200` | `base.magenta100` | `--cnvs-base-palette-magenta-100` | |
143
- | `colors.pomegranate300` | `base.magenta500` | `--cnvs-base-palette-magenta-500` | |
144
- | `colors.pomegranate400` | `base.magenta400` | `--cnvs-base-palette-magenta-400` | |
145
- | `colors.pomegranate500` | `base.red700` | `--cnvs-base-palette-red-700` | |
146
- | `colors.pomegranate600` | `base.red800` | `--cnvs-base-palette-red-800` | |
147
- | `colors.fruitPunch100` | `base.red25` | `--cnvs-base-palette-red-25` | |
148
- | `colors.fruitPunch200` | `base.red200` | `--cnvs-base-palette-red-200` | |
149
- | `colors.fruitPunch300` | `base.red300` | `--cnvs-base-palette-red-300` | |
150
- | `colors.fruitPunch400` | `base.red400` | `--cnvs-base-palette-red-400` | |
151
- | `colors.fruitPunch500` | `base.red400` | `--cnvs-base-palette-red-400` | |
152
- | `colors.fruitPunch600` | `base.red700` | `--cnvs-base-palette-red-700` | |
153
- | `colors.rootBeer100` | `base.coral25` | `--cnvs-base-palette-coral-25` | |
154
- | `colors.rootBeer200` | `base.coral100` | `--cnvs-base-palette-coral-100` | |
155
- | `colors.rootBeer300` | `base.coral200` | `--cnvs-base-palette-coral-200` | |
156
- | `colors.rootBeer400` | `base.coral200` | `--cnvs-base-palette-coral-200` | |
157
- | `colors.rootBeer500` | `base.amber900` | `--cnvs-base-palette-amber-900` | |
158
- | `colors.rootBeer600` | `base.amber950` | `--cnvs-base-palette-amber-950` | |
159
- | `colors.toastedMarshmallow100` | `base.amber25` | `--cnvs-base-palette-amber-25` | |
160
- | `colors.toastedMarshmallow200` | `base.orange100` | `--cnvs-base-palette-orange-100` | |
161
- | `colors.toastedMarshmallow300` | `base.orange200` | `--cnvs-base-palette-orange-200` | |
162
- | `colors.toastedMarshmallow400` | `base.orange300` | `--cnvs-base-palette-orange-300` | |
163
- | `colors.toastedMarshmallow500` | `base.amber500` | `--cnvs-base-palette-amber-500` | |
164
- | `colors.toastedMarshmallow600` | `base.amber600` | `--cnvs-base-palette-amber-600` | |
165
- | `colors.licorice100` | `base.slate400` | `--cnvs-base-palette-slate-400` | sys.color.bg.muted.softer <br/> sys.color.fg.disabled <br/> sys.color.border.input.disabled |
166
- | `colors.licorice200` | `base.slate500` | `--cnvs-base-palette-slate-500` | sys.color.bg.muted.soft <br/> sys.color.fg.muted.soft <br/> sys.color.border.input.default |
167
- | `colors.licorice300` | `base.slate600` | `--cnvs-base-palette-slate-600` | sys.color.bg.muted.default <br/> sys.color.fg.muted.default <br/> sys.color.text.hint |
168
- | `colors.licorice400` | `base.slate700` | `--cnvs-base-palette-slate-700` | sys.color.fg.muted.strong |
169
- | `colors.licorice500` | `base.slate800` | `--cnvs-base-palette-slate-800` | sys.color.bg.muted.strong <br/> sys.color.fg.muted.stronger <br/> sys.color.border.input.strong |
170
- | `colors.licorice600` | `base.slate900` | `--cnvs-base-palette-slate-900` | |
171
- | `colors.blackPepper100` | `base.neutral500` | `--cnvs-base-palette-neutral-500` | |
172
- | `colors.blackPepper200` | `base.neutral700` | `--cnvs-base-palette-neutral-700` | |
173
- | `colors.blackPepper300` | `base.neutral900` | `--cnvs-base-palette-neutral-900` | sys.color.fg.default |
174
- | `colors.blackPepper400` | `base.neutral950` | `--cnvs-base-palette-neutral-950` | sys.color.bg.contrast.default <br/> sys.color.fg.strong <br/> sys.color.border.contrast.default |
175
- | `colors.blackPepper500` | `base.neutral975` | `--cnvs-base-palette-neutral-975` | sys.color.bg.contrast.strong <br/> sys.color.fg.stronger <br/> sys.color.border.contrast.strong |
176
- | `colors.blackPepper600` | `base.neutral1000` | `--cnvs-base-palette-neutral-1000` | |
177
- | `colors.frenchVanilla100` | `base.neutral0` | `--cnvs-base-palette-neutral-0` | sys.color.bg.default <br/> sys.color.fg.inverse <br/> sys.color.border.inverse |
178
- | `colors.frenchVanilla200` | `base.neutral100` | `--cnvs-base-palette-neutral-100` | |
179
- | `colors.frenchVanilla300` | `base.neutral200` | `--cnvs-base-palette-neutral-200` | |
180
- | `colors.frenchVanilla400` | `base.neutral300` | `--cnvs-base-palette-neutral-300` | |
181
- | `colors.frenchVanilla500` | `base.neutral400` | `--cnvs-base-palette-neutral-400` | |
182
- | `colors.frenchVanilla600` | `base.neutral500` | `--cnvs-base-palette-neutral-500` | |
183
- | `colors.soap100` | `base.slate25` | `--cnvs-base-palette-slate-25` | sys.color.bg.alt.softer |
184
- | `colors.soap200` | `base.slate50` | `--cnvs-base-palette-slate-50` | sys.color.bg.alt.soft |
185
- | `colors.soap300` | `base.slate100` | `--cnvs-base-palette-slate-100` | sys.color.bg.alt.default <br/> sys.color.border.input.inverse |
186
- | `colors.soap400` | `base.slate200` | `--cnvs-base-palette-slate-200` | sys.color.bg.alt.strong <br/> sys.color.border.divider |
187
- | `colors.soap500` | `base.slate300` | `--cnvs-base-palette-slate-300` | sys.color.bg.alt.stronger <br/> sys.color.border.container |
188
- | `colors.soap600` | `base.slate300` | `--cnvs-base-palette-slate-300` | |
189
- | `colors.coconut100` | `base.coconut100` (deprecated) | `--cnvs-base-palette-coconut-100` | |
190
- | `colors.coconut200` | `base.coconut200` (deprecated) | `--cnvs-base-palette-coconut-200` | |
191
- | `colors.coconut300` | `base.coconut300` (deprecated) | `--cnvs-base-palette-coconut-300` | |
192
- | `colors.coconut400` | `base.coconut400` (deprecated) | `--cnvs-base-palette-coconut-400` | |
193
- | `colors.coconut500` | `base.coconut500` (deprecated) | `--cnvs-base-palette-coconut-500` | |
194
- | `colors.coconut600` | `base.coconut600` (deprecated) | `--cnvs-base-palette-coconut-600` | |
195
- | `colors.cappuccino100` | `base.cappuccino100` (deprecated) | `--cnvs-base-palette-cappuccino-100` | |
196
- | `colors.cappuccino200` | `base.cappuccino200` (deprecated) | `--cnvs-base-palette-cappuccino-200` | |
197
- | `colors.cappuccino300` | `base.cappuccino300` (deprecated) | `--cnvs-base-palette-cappuccino-300` | |
198
- | `colors.cappuccino400` | `base.cappuccino400` (deprecated) | `--cnvs-base-palette-cappuccino-400` | |
199
- | `colors.cappuccino500` | `base.cappuccino500` (deprecated) | `--cnvs-base-palette-cappuccino-500` | |
200
- | `colors.cappuccino600` | `base.cappuccino600` (deprecated) | `--cnvs-base-palette-cappuccino-600` | |
201
- | `colors.dragonFruit100` | `base.purple25` | `--cnvs-base-palette-purple-25` | |
202
- | `colors.dragonFruit200` | `base.purple100` | `--cnvs-base-palette-purple-100` | |
203
- | `colors.dragonFruit300` | `base.indigo500` | `--cnvs-base-palette-indigo-500` | |
204
- | `colors.dragonFruit400` | `base.indigo600` | `--cnvs-base-palette-indigo-600` | |
205
- | `colors.dragonFruit500` | `base.indigo700` | `--cnvs-base-palette-indigo-700` | |
206
- | `colors.dragonFruit600` | `base.indigo800` | `--cnvs-base-palette-indigo-800` | |
38
+ | Old Token | New Token | CSS Variable | Surface System Color | Foreground System Color | Border System Color |
39
+ | ------------------------------ | --------------------------------- | ------------------------------------ | --------------------------------------------- | ---------------------------------------- | ---------------------------------------- |
40
+ | `colors.cinnamon100` | `base.red50` | `--cnvs-base-palette-red-50` | `system.color.brand.surface.critical.strong` | `system.color.fg.danger.default` | |
41
+ | `colors.cinnamon200` | `base.red100` | `--cnvs-base-palette-red-100` | `system.color.surface.danger.default` | | |
42
+ | `colors.cinnamon300` | `base.red300` | `--cnvs-base-palette-red-300` | | | |
43
+ | `colors.cinnamon400` | `base.red400` | `--cnvs-base-palette-red-400` | | `system.color.fg.danger.default` | |
44
+ | `colors.cinnamon500` | `base.red600` | `--cnvs-base-palette-red-600` | `system.color.brand.accent.critical` | `system.color.brand.fg.critical.default` | `system.color.border.critical.default` |
45
+ | `colors.cinnamon600` | `base.red700` | `--cnvs-base-palette-red-700` | `system.color.fg.danger.strong` | `system.color.fg.critical.strong` | |
46
+ | `colors.peach100` | `base.coral50` | `--cnvs-base-palette-coral-50` | | | |
47
+ | `colors.peach200` | `base.coral200` | `--cnvs-base-palette-coral-200` | | | |
48
+ | `colors.peach300` | `base.coral300` | `--cnvs-base-palette-coral-300` | | | |
49
+ | `colors.peach400` | `base.coral400` | `--cnvs-base-palette-coral-400` | | | |
50
+ | `colors.peach500` | `base.coral600` | `--cnvs-base-palette-coral-600` | | | |
51
+ | `colors.peach600` | `base.coral700` | `--cnvs-base-palette-coral-700` | | | |
52
+ | `colors.chiliMango100` | `base.coral100` | `--cnvs-base-palette-coral-100` | | | |
53
+ | `colors.chiliMango200` | `base.coral200` | `--cnvs-base-palette-coral-200` | | | |
54
+ | `colors.chiliMango300` | `base.coral300` | `--cnvs-base-palette-coral-300` | | | |
55
+ | `colors.chiliMango400` | `base.coral500` | `--cnvs-base-palette-coral-500` | | | |
56
+ | `colors.chiliMango500` | `base.coral500` | `--cnvs-base-palette-coral-500` | | | |
57
+ | `colors.chiliMango600` | `base.coral700` | `--cnvs-base-palette-coral-700` | | | |
58
+ | `colors.cantaloupe100` | `base.amber50` | `--cnvs-base-palette-amber-50` | `system.color.brand.surface.caution.strong` | | |
59
+ | `colors.cantaloupe200` | `base.amber200` | `--cnvs-base-palette-amber-200` | `system.color.surface.warning.default` | | |
60
+ | `colors.cantaloupe300` | `base.amber300` | `--cnvs-base-palette-amber-300` | | | |
61
+ | `colors.cantaloupe400` | `base.amber400` | `--cnvs-base-palette-amber-400` | `system.color.brand.accent.caution` | | `system.color.brand.focus.caution.inner` |
62
+ | `colors.cantaloupe500` | `base.amber500` | `--cnvs-base-palette-amber-500` | `system.color.brand.accent.caution` | `system.color.fg.warning.default` | |
63
+ | `colors.cantaloupe600` | `base.amber600` | `--cnvs-base-palette-amber-600` | `system.color.brand.accent.caution` | | `system.color.brand.focus.caution.outer` |
64
+ | `colors.sourLemon100` | `base.amber25` | `--cnvs-base-palette-amber-25` | | | |
65
+ | `colors.sourLemon200` | `base.amber100` | `--cnvs-base-palette-amber-100` | | | |
66
+ | `colors.sourLemon300` | `base.amber200` | `--cnvs-base-palette-amber-200` | | | |
67
+ | `colors.sourLemon400` | `base.amber300` | `--cnvs-base-palette-amber-300` | | | |
68
+ | `colors.sourLemon500` | `base.amber300` | `--cnvs-base-palette-amber-300` | | | |
69
+ | `colors.sourLemon600` | `base.amber500` | `--cnvs-base-palette-amber-500` | | | |
70
+ | `colors.juicyPear100` | `base.amber25` | `--cnvs-base-palette-amber-25` | | | |
71
+ | `colors.juicyPear200` | `base.amber100` | `--cnvs-base-palette-amber-100` | | | |
72
+ | `colors.juicyPear300` | `base.amber200` | `--cnvs-base-palette-amber-200` | | | |
73
+ | `colors.juicyPear400` | `base.amber200` | `--cnvs-base-palette-amber-200` | | | |
74
+ | `colors.juicyPear500` | `base.green500` | `--cnvs-base-palette-green-500` | | | |
75
+ | `colors.juicyPear600` | `base.green700` | `--cnvs-base-palette-green-700` | | | |
76
+ | `colors.kiwi100` | `base.green50` | `--cnvs-base-palette-green-50` | | | |
77
+ | `colors.kiwi200` | `base.green100` | `--cnvs-base-palette-green-100` | | | |
78
+ | `colors.kiwi300` | `base.green200` | `--cnvs-base-palette-green-200` | | | |
79
+ | `colors.kiwi400` | `base.green500` | `--cnvs-base-palette-green-500` | | | |
80
+ | `colors.kiwi500` | `base.green500` | `--cnvs-base-palette-green-500` | | | |
81
+ | `colors.kiwi600` | `base.green700` | `--cnvs-base-palette-green-700` | | | |
82
+ | `colors.greenApple50` | `base.green50` | `--cnvs-base-palette-green-50` | `system.color.brand.surface.positive.strong` | | |
83
+ | `colors.greenApple100` | `base.green100` | `--cnvs-base-palette-green-100` | `system.color.brand.surface.positive.default` | | |
84
+ | `colors.greenApple200` | `base.green200` | `--cnvs-base-palette-green-200` | | `system.color.fg.success.default` | |
85
+ | `colors.greenApple600` | `base.green600` | `--cnvs-base-palette-green-600` | `system.color.accent.success.default` | `system.color.brand.fg.positive.default` | |
86
+ | `colors.greenApple700` | `base.green700` | `--cnvs-base-palette-green-700` | `system.color.brand.accent.positive` | `system.color.brand.fg.positive.strong` | |
87
+ | `colors.greenApple800` | `base.green800` | `--cnvs-base-palette-green-800` | `system.color.brand.accent.positive` | `system.color.brand.fg.positive.strong` | |
88
+ | `colors.watermelon100` | `base.teal25` | `--cnvs-base-palette-teal-25` | | | |
89
+ | `colors.watermelon200` | `base.teal100` | `--cnvs-base-palette-teal-100` | | | |
90
+ | `colors.watermelon300` | `base.green100` | `--cnvs-base-palette-green-100` | | | |
91
+ | `colors.watermelon400` | `base.green600` | `--cnvs-base-palette-green-600` | | | |
92
+ | `colors.watermelon500` | `base.green700` | `--cnvs-base-palette-green-700` | | | |
93
+ | `colors.watermelon600` | `base.green900` | `--cnvs-base-palette-green-900` | | | |
94
+ | `colors.jewel100` | `base.teal25` | `--cnvs-base-palette-teal-25` | | | |
95
+ | `colors.jewel200` | `base.teal200` | `--cnvs-base-palette-teal-200` | | | |
96
+ | `colors.jewel300` | `base.teal400` | `--cnvs-base-palette-teal-400` | | | |
97
+ | `colors.jewel400` | `base.teal500` | `--cnvs-base-palette-teal-500` | | | |
98
+ | `colors.jewel500` | `base.teal600` | `--cnvs-base-palette-teal-600` | | | |
99
+ | `colors.jewel600` | `base.teal700` | `--cnvs-base-palette-teal-700` | | | |
100
+ | `colors.toothpaste100` | `base.azure50` | `--cnvs-base-palette-azure-50` | | | |
101
+ | `colors.toothpaste200` | `base.azure200` | `--cnvs-base-palette-azure-200` | | | |
102
+ | `colors.toothpaste300` | `base.azure300` | `--cnvs-base-palette-azure-300` | | | |
103
+ | `colors.toothpaste400` | `base.azure500` | `--cnvs-base-palette-azure-500` | | | |
104
+ | `colors.toothpaste500` | `base.azure700` | `--cnvs-base-palette-azure-700` | | | |
105
+ | `colors.toothpaste600` | `base.azure800` | `--cnvs-base-palette-azure-800` | | | |
106
+ | `colors.blueberry100` | `base.blue100` | `--cnvs-base-palette-blue-100` | | | |
107
+ | `colors.blueberry200` | `base.blue100` | `--cnvs-base-palette-blue-100` | `system.color.brand.surface.primary.default` | | |
108
+ | `colors.blueberry300` | `base.blue400` | `--cnvs-base-palette-blue-400` | | `system.color.fg.info.default` | |
109
+ | `colors.blueberry400` | `base.blue600` | `--cnvs-base-palette-blue-600` | `system.color.brand.accent.primary` | `system.color.brand.fg.primary.default` | `system.color.border.primary.default` |
110
+ | `colors.blueberry500` | `base.blue700` | `--cnvs-base-palette-blue-700` | `system.color.brand.accent.primary` | `system.color.brand.fg.primary.strong` | |
111
+ | `colors.blueberry600` | `base.blue800` | `--cnvs-base-palette-blue-800` | `system.color.brand.accent.primary` | `system.color.brand.fg.primary.strong` | |
112
+ | `colors.plum100` | `base.blue100` | `--cnvs-base-palette-blue-100` | | | |
113
+ | `colors.plum200` | `base.blue200` | `--cnvs-base-palette-blue-200` | | | |
114
+ | `colors.plum300` | `base.blue300` | `--cnvs-base-palette-blue-300` | | | |
115
+ | `colors.plum400` | `base.blue400` | `--cnvs-base-palette-blue-400` | | | |
116
+ | `colors.plum500` | `base.blue500` | `--cnvs-base-palette-blue-500` | | | |
117
+ | `colors.plum600` | `base.blue600` | `--cnvs-base-palette-blue-600` | | | |
118
+ | `colors.berrySmoothie100` | `base.indigo50` | `--cnvs-base-palette-indigo-50` | | | |
119
+ | `colors.berrySmoothie200` | `base.indigo200` | `--cnvs-base-palette-indigo-200` | | | |
120
+ | `colors.berrySmoothie300` | `base.indigo400` | `--cnvs-base-palette-indigo-400` | | | |
121
+ | `colors.berrySmoothie400` | `base.blue500` | `--cnvs-base-palette-blue-500` | | | |
122
+ | `colors.berrySmoothie500` | `base.blue700` | `--cnvs-base-palette-blue-700` | | | |
123
+ | `colors.berrySmoothie600` | `base.blue800` | `--cnvs-base-palette-blue-800` | | | |
124
+ | `colors.blackberry100` | `base.indigo25` | `--cnvs-base-palette-indigo-25` | | | |
125
+ | `colors.blackberry200` | `base.indigo200` | `--cnvs-base-palette-indigo-200` | | | |
126
+ | `colors.blackberry300` | `base.indigo400` | `--cnvs-base-palette-indigo-400` | | | |
127
+ | `colors.blackberry400` | `base.indigo500` | `--cnvs-base-palette-indigo-500` | | | |
128
+ | `colors.blackberry500` | `base.indigo700` | `--cnvs-base-palette-indigo-700` | | | |
129
+ | `colors.blackberry600` | `base.indigo900` | `--cnvs-base-palette-indigo-900` | | | |
130
+ | `colors.islandPunch100` | `base.purple25` | `--cnvs-base-palette-purple-25` | | | |
131
+ | `colors.islandPunch200` | `base.purple200` | `--cnvs-base-palette-purple-200` | | | |
132
+ | `colors.islandPunch300` | `base.purple500` | `--cnvs-base-palette-purple-500` | | | |
133
+ | `colors.islandPunch400` | `base.purple500` | `--cnvs-base-palette-purple-500` | | | |
134
+ | `colors.islandPunch500` | `base.purple700` | `--cnvs-base-palette-purple-700` | | | |
135
+ | `colors.islandPunch600` | `base.purple800` | `--cnvs-base-palette-purple-800` | | | |
136
+ | `colors.grapeSoda100` | `base.magenta50` | `--cnvs-base-palette-magenta-50` | | | |
137
+ | `colors.grapeSoda200` | `base.magenta200` | `--cnvs-base-palette-magenta-200` | | | |
138
+ | `colors.grapeSoda300` | `base.purple400` | `--cnvs-base-palette-purple-400` | | | |
139
+ | `colors.grapeSoda400` | `base.purple500` | `--cnvs-base-palette-purple-500` | | | |
140
+ | `colors.grapeSoda500` | `base.purple600` | `--cnvs-base-palette-purple-600` | | | |
141
+ | `colors.grapeSoda600` | `base.purple800` | `--cnvs-base-palette-purple-800` | | | |
142
+ | `colors.pomegranate100` | `base.magenta50` | `--cnvs-base-palette-magenta-50` | | | |
143
+ | `colors.pomegranate200` | `base.magenta100` | `--cnvs-base-palette-magenta-100` | | | |
144
+ | `colors.pomegranate300` | `base.magenta500` | `--cnvs-base-palette-magenta-500` | | | |
145
+ | `colors.pomegranate400` | `base.magenta400` | `--cnvs-base-palette-magenta-400` | | | |
146
+ | `colors.pomegranate500` | `base.red700` | `--cnvs-base-palette-red-700` | | | |
147
+ | `colors.pomegranate600` | `base.red800` | `--cnvs-base-palette-red-800` | | | |
148
+ | `colors.fruitPunch100` | `base.red25` | `--cnvs-base-palette-red-25` | | | |
149
+ | `colors.fruitPunch200` | `base.red200` | `--cnvs-base-palette-red-200` | | | |
150
+ | `colors.fruitPunch300` | `base.red300` | `--cnvs-base-palette-red-300` | | | |
151
+ | `colors.fruitPunch400` | `base.red400` | `--cnvs-base-palette-red-400` | | | |
152
+ | `colors.fruitPunch500` | `base.red400` | `--cnvs-base-palette-red-400` | | | |
153
+ | `colors.fruitPunch600` | `base.red700` | `--cnvs-base-palette-red-700` | | | |
154
+ | `colors.rootBeer100` | `base.coral25` | `--cnvs-base-palette-coral-25` | | | |
155
+ | `colors.rootBeer200` | `base.coral100` | `--cnvs-base-palette-coral-100` | | | |
156
+ | `colors.rootBeer300` | `base.coral200` | `--cnvs-base-palette-coral-200` | | | |
157
+ | `colors.rootBeer400` | `base.coral200` | `--cnvs-base-palette-coral-200` | | | |
158
+ | `colors.rootBeer500` | `base.amber900` | `--cnvs-base-palette-amber-900` | | | |
159
+ | `colors.rootBeer600` | `base.amber950` | `--cnvs-base-palette-amber-950` | | | |
160
+ | `colors.toastedMarshmallow100` | `base.amber25` | `--cnvs-base-palette-amber-25` | | | |
161
+ | `colors.toastedMarshmallow200` | `base.orange100` | `--cnvs-base-palette-orange-100` | | | |
162
+ | `colors.toastedMarshmallow300` | `base.orange200` | `--cnvs-base-palette-orange-200` | | | |
163
+ | `colors.toastedMarshmallow400` | `base.orange300` | `--cnvs-base-palette-orange-300` | | | |
164
+ | `colors.toastedMarshmallow500` | `base.amber500` | `--cnvs-base-palette-amber-500` | | | |
165
+ | `colors.toastedMarshmallow600` | `base.amber600` | `--cnvs-base-palette-amber-600` | | | |
166
+ | `colors.licorice100` | `base.slate400` | `--cnvs-base-palette-slate-400` | `system.color.accent.muted.soft` | `system.color.fg.disabled` | `system.color.fg.disabled` |
167
+ | `colors.licorice200` | `base.slate500` | `--cnvs-base-palette-slate-500` | `system.color.accent.muted.soft` | `system.color.fg.muted.default` | `system.color.border.input.default` |
168
+ | `colors.licorice300` | `base.slate600` | `--cnvs-base-palette-slate-600` | `system.color.accent.muted.default` | `system.color.fg.muted.default` | |
169
+ | `colors.licorice400` | `base.slate700` | `--cnvs-base-palette-slate-700` | `system.color.accent.muted.default` | `system.color.fg.muted.strong ` |
170
+ | `colors.licorice500` | `base.slate800` | `--cnvs-base-palette-slate-800` | `system.color.accent.muted.default` | `system.color.fg.muted.strong ` | `system.color.border.input.hover` |
171
+ | `colors.licorice600` | `base.slate900` | `--cnvs-base-palette-slate-900` | | | |
172
+ | `colors.blackPepper100` | `base.neutral500` | `--cnvs-base-palette-neutral-500` | | | |
173
+ | `colors.blackPepper200` | `base.neutral700` | `--cnvs-base-palette-neutral-700` | | | |
174
+ | `colors.blackPepper300` | `base.neutral900` | `--cnvs-base-palette-neutral-900` | | `system.color.fg.default` | |
175
+ | `colors.blackPepper400` | `base.neutral950` | `--cnvs-base-palette-neutral-950` | `system.color.surface.contrast.default ` | `system.color.fg.strong` | `system.color.border.contrast.default` |
176
+ | `colors.blackPepper500` | `base.neutral975` | `--cnvs-base-palette-neutral-975` | `system.color.surface.contrast.strong` | `system.color.fg.stronger` | `system.color.border.contrast.strong` |
177
+ | `colors.blackPepper600` | `base.neutral1000` | `--cnvs-base-palette-neutral-1000` | | | |
178
+ | `colors.frenchVanilla100` | `base.neutral0` | `--cnvs-base-palette-neutral-0` | `system.color.surface.default` | `system.color.fg.inverse` | `system.color.border.inverse` |
179
+ | `colors.frenchVanilla200` | `base.neutral100` | `--cnvs-base-palette-neutral-100` | | | |
180
+ | `colors.frenchVanilla300` | `base.neutral200` | `--cnvs-base-palette-neutral-200` | | | |
181
+ | `colors.frenchVanilla400` | `base.neutral300` | `--cnvs-base-palette-neutral-300` | | | |
182
+ | `colors.frenchVanilla500` | `base.neutral400` | `--cnvs-base-palette-neutral-400` | | | |
183
+ | `colors.frenchVanilla600` | `base.neutral500` | `--cnvs-base-palette-neutral-500` | | | |
184
+ | `colors.soap100` | `base.slate25` | `--cnvs-base-palette-slate-25` | `system.color.surface.raised` | | |
185
+ | `colors.soap200` | `base.slate50` | `--cnvs-base-palette-slate-50` | `system.color.surface.alt.default` | | |
186
+ | `colors.soap300` | `base.slate100` | `--cnvs-base-palette-slate-100` | `system.color.surface.alt.default` | `system.color.border.input.inverse` | |
187
+ | `colors.soap400` | `base.slate200` | `--cnvs-base-palette-slate-200` | `system.color.surface.alt.default` | `system.color.border.default` | |
188
+ | `colors.soap500` | `base.slate300` | `--cnvs-base-palette-slate-300` | `system.color.surface.alt.default` | `system.color.border.strong` | |
189
+ | `colors.soap600` | `base.slate300` | `--cnvs-base-palette-slate-300` | | | |
190
+ | `colors.coconut100` | `base.coconut100` (deprecated) | `--cnvs-base-palette-coconut-100` | | | |
191
+ | `colors.coconut200` | `base.coconut200` (deprecated) | `--cnvs-base-palette-coconut-200` | | | |
192
+ | `colors.coconut300` | `base.coconut300` (deprecated) | `--cnvs-base-palette-coconut-300` | | | |
193
+ | `colors.coconut400` | `base.coconut400` (deprecated) | `--cnvs-base-palette-coconut-400` | | | |
194
+ | `colors.coconut500` | `base.coconut500` (deprecated) | `--cnvs-base-palette-coconut-500` | | | |
195
+ | `colors.coconut600` | `base.coconut600` (deprecated) | `--cnvs-base-palette-coconut-600` | | | |
196
+ | `colors.cappuccino100` | `base.cappuccino100` (deprecated) | `--cnvs-base-palette-cappuccino-100` | | | |
197
+ | `colors.cappuccino200` | `base.cappuccino200` (deprecated) | `--cnvs-base-palette-cappuccino-200` | | | |
198
+ | `colors.cappuccino300` | `base.cappuccino300` (deprecated) | `--cnvs-base-palette-cappuccino-300` | | | |
199
+ | `colors.cappuccino400` | `base.cappuccino400` (deprecated) | `--cnvs-base-palette-cappuccino-400` | | | |
200
+ | `colors.cappuccino500` | `base.cappuccino500` (deprecated) | `--cnvs-base-palette-cappuccino-500` | | | |
201
+ | `colors.cappuccino600` | `base.cappuccino600` (deprecated) | `--cnvs-base-palette-cappuccino-600` | | | |
202
+ | `colors.dragonFruit100` | `base.purple25` | `--cnvs-base-palette-purple-25` | | | |
203
+ | `colors.dragonFruit200` | `base.purple100` | `--cnvs-base-palette-purple-100` | | | |
204
+ | `colors.dragonFruit300` | `base.indigo500` | `--cnvs-base-palette-indigo-500` | | | |
205
+ | `colors.dragonFruit400` | `base.indigo600` | `--cnvs-base-palette-indigo-600` | | | |
206
+ | `colors.dragonFruit500` | `base.indigo700` | `--cnvs-base-palette-indigo-700` | | | |
207
+ | `colors.dragonFruit600` | `base.indigo800` | `--cnvs-base-palette-indigo-800` | | | |
207
208
 
208
209
  ## Brand Color Migration
209
210
 
210
211
  Brand colors move from the Emotion theme object to direct CSS variables:
211
212
 
212
- | Old Token | New Token | CSS Variable |
213
- | ------------------------------------------ | --------------------------- | ----------------------------------- |
214
- | `theme.canvas.palette.primary.lightest` | `brand.primary.lightest` | `--cnvs-brand-primary-lightest` |
215
- | `theme.canvas.palette.primary.light` | `brand.primary.light` | `--cnvs-brand-primary-light` |
216
- | `theme.canvas.palette.primary.main` | `brand.primary.base` | `--cnvs-brand-primary-base` |
217
- | `theme.canvas.palette.primary.dark` | `brand.primary.dark` | `--cnvs-brand-primary-dark` |
218
- | `theme.canvas.palette.primary.darkest` | `brand.primary.darkest` | `--cnvs-brand-primary-darkest` |
219
- | `theme.canvas.palette.primary.contrast` | `brand.primary.accent` | `--cnvs-brand-primary-accent` |
220
- | `theme.canvas.palette.error.lightest` | `brand.error.lightest` | `--cnvs-brand-error-lightest` |
221
- | `theme.canvas.palette.error.light` | `brand.error.light` | `--cnvs-brand-error-light` |
222
- | `theme.canvas.palette.error.main` | `brand.error.base` | `--cnvs-brand-error-base` |
223
- | `theme.canvas.palette.error.dark` | `brand.error.dark` | `--cnvs-brand-error-dark` |
224
- | `theme.canvas.palette.error.darkest` | `brand.error.darkest` | `--cnvs-brand-error-darkest` |
225
- | `theme.canvas.palette.error.contrast` | `brand.error.accent` | `--cnvs-brand-error-accent` |
226
- | `theme.canvas.palette.alert.lightest` | `brand.alert.lightest` | `--cnvs-brand-alert-lightest` |
227
- | `theme.canvas.palette.alert.light` | `brand.alert.light` | `--cnvs-brand-alert-light` |
228
- | `theme.canvas.palette.alert.main` | `brand.alert.base` | `--cnvs-brand-alert-base` |
229
- | `theme.canvas.palette.alert.dark` | `brand.alert.dark` | `--cnvs-brand-alert-dark` |
230
- | `theme.canvas.palette.alert.darkest` | `brand.alert.darkest` | `--cnvs-brand-alert-darkest` |
231
- | `theme.canvas.palette.alert.contrast` | `brand.alert.accent` | `--cnvs-brand-alert-accent` |
232
- | `theme.canvas.palette.success.lightest` | `brand.success.lightest` | `--cnvs-brand-success-lightest` |
233
- | `theme.canvas.palette.success.light` | `brand.success.light` | `--cnvs-brand-success-light` |
234
- | `theme.canvas.palette.success.main` | `brand.success.base` | `--cnvs-brand-success-base` |
235
- | `theme.canvas.palette.success.dark` | `brand.success.dark` | `--cnvs-brand-success-dark` |
236
- | `theme.canvas.palette.success.darkest` | `brand.success.darkest` | `--cnvs-brand-success-darkest` |
237
- | `theme.canvas.palette.success.contrast` | `brand.success.accent` | `--cnvs-brand-success-accent` |
238
- | `theme.canvas.palette.neutral.lightest` | `brand.neutral.lightest` | `--cnvs-brand-neutral-lightest` |
239
- | `theme.canvas.palette.neutral.light` | `brand.neutral.light` | `--cnvs-brand-neutral-light` |
240
- | `theme.canvas.palette.neutral.main` | `brand.neutral.base` | `--cnvs-brand-neutral-base` |
241
- | `theme.canvas.palette.neutral.dark` | `brand.neutral.dark` | `--cnvs-brand-neutral-dark` |
242
- | `theme.canvas.palette.neutral.darkest` | `brand.neutral.darkest` | `--cnvs-brand-neutral-darkest` |
243
- | `theme.canvas.palette.neutral.contrast` | `brand.neutral.accent` | `--cnvs-brand-neutral-accent` |
244
- | `theme.canvas.palette.common.focusOutline` | `brand.common.focusOutline` | `--cnvs-brand-common-focus-outline` |
213
+ | Old Token | v3 Token | v4 New Token | CSS Variable |
214
+ | ------------------------------------------ | :-------------------------: | :-----------------------: | --------------------------- |
215
+ | `theme.canvas.palette.primary.lightest` | `brand.primary.lightest` | `brand.primary25` | `--cnvs-brand-primary-25` |
216
+ | `theme.canvas.palette.primary.light` | `brand.primary.light` | `brand.primary200` | `--cnvs-brand-primary-200` |
217
+ | `theme.canvas.palette.primary.main` | `brand.primary.base` | `brand.primary600` | `--cnvs-brand-primary-600` |
218
+ | `theme.canvas.palette.primary.dark` | `brand.primary.dark` | `brand.primary700` | `--cnvs-brand-primary-700` |
219
+ | `theme.canvas.palette.primary.darkest` | `brand.primary.darkest` | `brand.primary800` | `--cnvs-brand-primary-800` |
220
+ | `theme.canvas.palette.primary.contrast` | `brand.primary.accent` | `system.color.fg.inverse` | `--cnvs-brand-fg-inverse` |
221
+ | `theme.canvas.palette.error.lightest` | `brand.error.lightest` | `brand.critical25` | `--cnvs-brand-error-25` |
222
+ | `theme.canvas.palette.error.light` | `brand.error.light` | `brand.critical200` | `--cnvs-brand-error-200` |
223
+ | `theme.canvas.palette.error.main` | `brand.error.base` | `brand.critical600` | `--cnvs-brand-error-600` |
224
+ | `theme.canvas.palette.error.dark` | `brand.error.dark` | `brand.critical700` | `--cnvs-brand-error-700` |
225
+ | `theme.canvas.palette.error.darkest` | `brand.error.darkest` | `brand.critical800` | `--cnvs-brand-error-800` |
226
+ | `theme.canvas.palette.error.contrast` | `brand.error.accent` | `system.color.fg.inverse` | `--cnvs-brand-fg-inverse` |
227
+ | `theme.canvas.palette.alert.lightest` | `brand.alert.lightest` | `brand.caution.5` | `--cnvs-brand-alert-25` |
228
+ | `theme.canvas.palette.alert.light` | `brand.alert.light` | `brand.caution200` | `--cnvs-brand-alert-200` |
229
+ | `theme.canvas.palette.alert.main` | `brand.alert.base` | `brand.caution600` | `--cnvs-brand-alert-600` |
230
+ | `theme.canvas.palette.alert.dark` | `brand.alert.dark` | `brand.caution700` | `--cnvs-brand-alert-700` |
231
+ | `theme.canvas.palette.alert.darkest` | `brand.alert.darkest` | `brand.caution800` | `--cnvs-brand-alert-800` |
232
+ | `theme.canvas.palette.alert.contrast` | `brand.alert.accent` | `system.color.fg.inverse` | `--cnvs-brand-fg-inverse` |
233
+ | `theme.canvas.palette.success.lightest` | `brand.success.lightest` | `brand.positive25` | `--cnvs-brand-success-25` |
234
+ | `theme.canvas.palette.success.light` | `brand.success.light` | `brand.positive200` | `--cnvs-brand-success-200` |
235
+ | `theme.canvas.palette.success.main` | `brand.success.base` | `brand.positive600` | `--cnvs-brand-success-600` |
236
+ | `theme.canvas.palette.success.dark` | `brand.success.dark` | `brand.positive700` | `--cnvs-brand-success-700` |
237
+ | `theme.canvas.palette.success.darkest` | `brand.success.darkest` | `brand.positive800` | `--cnvs-brand-success-800` |
238
+ | `theme.canvas.palette.success.contrast` | `brand.success.accent` | `system.color.fg.inverse` | `--cnvs-brand-fg-inverse` |
239
+ | `theme.canvas.palette.neutral.lightest` | `brand.neutral.lightest` | `brand.neutral25` | `--cnvs-brand-neutral-25` |
240
+ | `theme.canvas.palette.neutral.light` | `brand.neutral.light` | `brand.neutral200` | `--cnvs-brand-neutral-200` |
241
+ | `theme.canvas.palette.neutral.main` | `brand.neutral.base` | `brand.neutral600` | `--cnvs-brand-neutral-600` |
242
+ | `theme.canvas.palette.neutral.dark` | `brand.neutral.dark` | `brand.neutral700` | `--cnvs-brand-neutral-700` |
243
+ | `theme.canvas.palette.neutral.darkest` | `brand.neutral.darkest` | `brand.neutral800` | `--cnvs-brand-neutral-800` |
244
+ | `theme.canvas.palette.neutral.contrast` | `brand.neutral.accent` | `system.color.fg.inverse` | `--cnvs-brand-fg-inverse` |
245
+ | `theme.canvas.palette.common.focusOutline` | `brand.common.focusOutline` | `brand.common.focus` | `--cnvs-brand-common-focus` |
245
246
 
246
247
  ## System Color Usage Guide (Recommended)
247
248
 
@@ -249,77 +250,214 @@ Brand colors move from the Emotion theme object to direct CSS variables:
249
250
  UI. Instead of referencing raw base colors, use these system tokens to ensure your application is
250
251
  themeable, understandable, and consistent.**
251
252
 
252
- - **Background (`system.color.bg.*`)**: For all surface and container backgrounds, including pages,
253
- cards, banners, and input fields. Choose the appropriate variant (`default`, `soft`, `strong`,
254
- etc.) based on the visual prominence and interaction state (default, hover, active, disabled).
255
- - **Foreground (`system.color.fg.*`)**: For text and icon colors. Use variants for body text,
256
- headings, links, disabled states, and inverse (light-on-dark) content.
257
- - **Border (`system.color.border.*`)**: For outlines, dividers, and input borders. Select the
258
- variant that matches the required emphasis or interaction state.
253
+ - **Surface/background (`system.color.surface.*`, `system.color.brand.surface.*`,
254
+ `system.color.accent.*`)**: For all surface and container backgrounds, including pages, cards,
255
+ banners, and input fields. Choose the appropriate variant based on the visual prominence and
256
+ interaction state (default, hover, active, disabled).
257
+ - **Foreground (`system.color.fg.*`, `system.color.brand.fg.*`)**: For text and icon colors. Use
258
+ variants for body text, headings, links, disabled states, and inverse (light-on-dark) content.
259
+ - **Border (`system.color.border.*`, `system.color.brand.focus.*`)**: For outlines, dividers, and
260
+ input borders. Select the variant that matches the required emphasis or interaction state.
259
261
 
260
262
  ### Background colors
261
263
 
262
- | Use Case | System Token | Old Token / React tokens | Example Usage |
263
- | -------------------------------------- | :------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------------------- |
264
- | **Background Colors** | | | |
265
- | Main page background | `system.color.bg.default` | `colors.frenchVanilla100` <br/> `inputColors.background` <br/> `commonColors.background` | Page layout base background |
266
- | Disabled elements | `system.color.bg.primary.soft` | `colors.blueberry200` | Disabled primary buttons |
267
- | Brand default background | `system.color.bg.primary.default` | `colors.blueberry400` <br/> `commonColors.focusBackground` <br/> `inputColors.selectionControlFill` | Brand banners, primary button background |
268
- | Brand hover background | `system.color.bg.primary.strong` | `colors.blueberry500` | Primary button hover |
269
- | Brand active background | `system.color.bg.primary.stronger` | `colors.blueberry600` | Primary button active |
270
- | Warning subtle background | `system.color.bg.caution.softer` | `colors.cantaloupe100` | Soft warning banners |
271
- | Warning default background | `system.color.bg.caution.default` | `colors.cantaloupe400` | Toast notifications |
272
- | Warning hover background | `system.color.bg.caution.strong` | `colors.cantaloupe500` | Warning hover states |
273
- | Warning active background | `system.color.bg.caution.stronger` | `colors.cantaloupe600` | Warning active states |
274
- | Error disabled background | `system.color.bg.critical.softer` | `colors.cinnamon100` | Disabled error button |
275
- | Error default background | `system.color.bg.critical.default` | `colors.cinnamon500` | Error message background |
276
- | Error hover background | `system.color.bg.critical.strong` | `colors.cinnamon600` | Delete button hover |
277
- | Success surface background | `system.color.bg.positive.softer` | `colors.greenApple100` | Cards showing success status |
278
- | Success default background | `system.color.bg.positive.default` | `colors.greenApple400` | Disabled success buttons |
279
- | Success hover background | `system.color.bg.positive.strong` | `colors.greenApple500` | Success button hover |
280
- | Success active background | `system.color.bg.positive.stronger` | `colors.greenApple600` | Success button active |
281
- | Muted background (subtle) | `system.color.bg.muted.softer` | `colors.licorice100` | Light containers |
282
- | Muted background (soft) | `system.color.bg.muted.soft` | `colors.licorice200` | Form backgrounds |
283
- | Muted background (default) | `system.color.bg.muted.default` | `colors.licorice300` | Input fields, inactive elements |
284
- | Muted strong background | `system.color.bg.muted.strong` | `colors.licorice500` | Switch toggles, loading indicators |
285
- | Disabled input background | `system.color.bg.alt.softer` | `colors.soap100` <br/> `inputColors.disabled.background` | Disabled text input fields |
286
- | Alt page background | `system.color.bg.alt.soft` | `colors.soap200` | Dashboard sections |
287
- | Secondary surface background | `system.color.bg.alt.default` | `colors.soap300` <br/> `commonColors.backgroundAlt` | Card hover background |
288
- | Secondary hover background | `system.color.bg.alt.strong` | `colors.soap400` <br/> `commonColors.hoverBackground` | Hover state for modals |
289
- | Secondary active background | `system.color.bg.alt.stronger` | `colors.soap500` | Clicked state for surfaces |
290
- | Contrast background (default) | `system.color.bg.contrast.default` | `colors.blackPepper400` | Tooltip background |
291
- | Contrast background (strong) | `system.color.bg.contrast.strong` | `colors.blackPepper500` | High-contrast text container background |
292
- | **Foreground Colors (text and icons)** | **System Token** | **Old Token / React tokens** | **Example Usage** |
293
- | Body foreground | `system.color.fg.default` | `colors.blackPepper300` <br/> `typeColors.body` <br/> `typeColors.label` <br/> `inputColors.text` <br/> | Paragraphs, regular content |
294
- | Headings | `system.color.fg.strong` | `colors.blackPepper400` <br/> `typeColors.heading` | Section and card headings |
295
- | Display titles | `system.color.fg.stronger` | `colors.blackPepper500` | Hero titles, large headings |
296
- | Link foreground | `system.color.fg.primary.default` | `colors.blueberry400` <br/> `iconColors.active` <br/> `statusColors.active` <br/> `typeColors.link` <br/> `typeColors.selectHighlight` | Anchor links |
297
- | Link foreground hover | `system.color.fg.primary.strong` | `colors.blueberry500` | Hover state for links |
298
- | Error foreground | `system.color.fg.critical.default` | `colors.cinnamon500` <br/> `inputColors.error.icon` <br/> `statusColors.error` | Error messages |
299
- | Inverse (white) foreground | `system.color.fg.inverse` | `colors.frenchVanilla100` <br/> `typeColors.inverse` <br/> `typeColors.selectHighlightInverse` <br/> `iconColors.inverse` | Text on dark backgrounds |
300
- | Disabled foreground | `system.color.fg.disabled` | `colors.licorice100` <br/> `inputColors.disabled.text` <br/> `inputColors.disabled.icon` <br/> `iconColors.disabled` | Disabled buttons and form inputs |
301
- | Muted foreground (soft) | `system.color.fg.muted.soft` | `colors.licorice200` <br/> `iconColors.standard` <br/> `inputColors.icon` <br/> `typeColors.hint` | Tab labels, hint text |
302
- | Muted foreground (default) | `system.color.fg.muted.default` | `colors.licorice300` <br/> `inputColors.placeholder` | Subtitle or secondary text |
303
- | Muted foreground (strong) | `system.color.fg.muted.strong` | `colors.licorice400` | Hover state for muted elements |
304
- | Muted foreground (stronger) | `system.color.fg.muted.stronger` | `colors.licorice500` <br/> `iconColors.hover` <br/> `inputColors.iconHover` | Active muted tabs text |
305
- | **Border Colors** | **System Token** | **Old Token / React tokens** | **Example Usage** |
306
- | Contrast border | `system.color.border.contrast.default` | `colors.blackPepper400` | Card outline, divider on light surfaces |
307
- | Strong contrast border | `system.color.border.contrast.strong` | `colors.blackPepper500` | High-contrast outlines or focus states |
308
- | Primary active input border | `system.color.border.primary.default` | `colors.blueberry400` <br/> `commonColors.focusOutline` <br/> `inputColors.focusBorder` | Active input fields |
309
- | Warning border (inner) | `system.color.border.caution.default` | `colors.cantaloupe400` <br/> `inputColors.alert.border` <br/> `statusColors.warning` | Alert field inner border |
310
- | Warning border (outer) | `system.color.border.caution.strong` | `colors.cantaloupe600` | Alert field box shadow |
311
- | Error border | `system.color.border.critical.default` | `colors.cinnamon500` <br/> `inputColors.error.border` <br/> `statusColors.error` | Form field with error |
312
- | Inverse surface border | `system.color.border.inverse` | `colors.frenchVanilla100` | Checkbox/radio on dark background |
313
- | Disabled input border | `system.color.border.input.disabled` | `colors.licorice100` | Non-editable input fields |
314
- | Default input border | `system.color.border.input.default` | `colors.licorice200` <br/> `inputColors.border` | Normal input field border |
315
- | Hover input border | `system.color.border.input.strong` | `colors.licorice500` <br/> `inputColors.disabled.border` | Input field on hover |
316
- | Inverse input border | `system.color.border.input.inverse` | `colors.soap300` | Inverse theme inputs |
317
- | Divider/separator border | `system.color.border.divider` | `colors.soap400` <br/> `commonColors.divider` | Table rows, content separators |
318
- | Container border (card/table edge) | `system.color.border.container` | `colors.soap500` | Card edge or section container border |
319
- | **Static Colors** | **System Token** | **Old Token / React tokens** | **Example Usage** |
320
- | White | `system.color.static.white` | | Always white regardless of theme |
321
- | Black | `system.color.static.black` | | Always black regardless of theme |
322
- | Transparent | `system.color.static.transparent` | | Invisible backgrounds |
264
+ | Use Case | System Token (v4) | Old Token / React tokens | Example Usage |
265
+ | -------------------------------------- | :-------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------------------- |
266
+ | **Background Colors** | | | |
267
+ | Main page background | `system.color.surface.default` | `colors.frenchVanilla100` <br/> `inputColors.background` <br/> `commonColors.background` | Page layout base background |
268
+ | Disabled elements | `system.color.brand.surface.primary.default` | `colors.blueberry200` | Disabled primary buttons |
269
+ | Brand default background | `system.color.brand.accent.primary.default` | `colors.blueberry400` <br/> `commonColors.focusBackground` <br/> `inputColors.selectionControlFill` | Brand banners, primary button background |
270
+ | Brand hover background | `system.color.brand.accent.primary.default` | `colors.blueberry500` | Primary button hover |
271
+ | Brand active background | `system.color.brand.accent.primary.default` | `colors.blueberry600` | Primary button active |
272
+ | Warning subtle background | `system.color.brand.surface.caution.strong` | `colors.cantaloupe100` | Soft warning banners |
273
+ | Warning default background | `system.color.brand.accent.caution.default` | `colors.cantaloupe400` | Toast notifications |
274
+ | Warning hover background | `system.color.brand.accent.caution.default` | `colors.cantaloupe500` | Warning hover states |
275
+ | Warning active background | `system.color.brand.accent.caution.default` | `colors.cantaloupe600` | Warning active states |
276
+ | Error disabled background | `system.color.brand.surface.critical.strong` | `colors.cinnamon100` | Disabled error button |
277
+ | Error default background | `system.color.brand.accent.critical` | `colors.cinnamon500` | Error message background |
278
+ | Error hover background | `system.color.surface.danger.default` | `colors.cinnamon600` | Delete button hover |
279
+ | Success surface background | `system.color.brand.surface.positive.default` | `colors.greenApple100` | Cards showing success status |
280
+ | Success default background | `system.color.brand.accent.positive.default` | `colors.greenApple400` | Disabled success buttons |
281
+ | Success hover background | `system.color.brand.accent.positive.default` | `colors.greenApple500` | Success button hover |
282
+ | Success active background | `system.color.brand.accent.positive.default` | `colors.greenApple600` | Success button active |
283
+ | Muted background (subtle) | `system.color.accent.muted.soft` | `colors.licorice100` | Light containers |
284
+ | Muted background (soft) | `system.color.accent.muted.soft` | `colors.licorice200` | Form backgrounds |
285
+ | Muted background (default) | `system.color.accent.muted.default` | `colors.licorice300` | Input fields, inactive elements |
286
+ | Muted strong background | `system.color.accent.muted.default` | `colors.licorice500` | Switch toggles, loading indicators |
287
+ | Disabled input background | `system.color.surface.raised` | `colors.soap100` <br/> `inputColors.disabled.background` | Disabled text input fields |
288
+ | Alt page background | `system.color.surface.alt.default` | `colors.soap200` | Dashboard sections |
289
+ | Secondary surface background | `system.color.surface.alt.default` | `colors.soap300` <br/> `commonColors.backgroundAlt` | Card hover background |
290
+ | Secondary hover background | `system.color.surface.alt.default` | `colors.soap400` <br/> `commonColors.hoverBackground` | Hover state for modals |
291
+ | Secondary active background | `system.color.surface.alt.default` | `colors.soap500` | Clicked state for surfaces |
292
+ | Contrast background (default) | `system.color.surface.contrast.default` | `colors.blackPepper400` | Tooltip background |
293
+ | Contrast background (strong) | `system.color.surface.contrast.strong` | `colors.blackPepper500` | High-contrast text container background |
294
+ | **Foreground Colors (text and icons)** | **System Token (v4)** | **Old Token / React tokens** | **Example Usage** |
295
+ | Body foreground | `system.color.fg.default` | `colors.blackPepper300` <br/> `typeColors.body` <br/> `typeColors.label` <br/> `inputColors.text` <br/> | Paragraphs, regular content |
296
+ | Headings | `system.color.fg.strong` | `colors.blackPepper400` <br/> `typeColors.heading` | Section and card headings |
297
+ | Display titles | `system.color.fg.stronger` | `colors.blackPepper500` | Hero titles, large headings |
298
+ | Link foreground | `system.color.brand.fg.primary.default` | `colors.blueberry400` <br/> `iconColors.active` <br/> `statusColors.active` <br/> `typeColors.link` <br/> `typeColors.selectHighlight` | Anchor links |
299
+ | Link foreground hover | `system.color.brand.fg.primary.strong` | `colors.blueberry500` | Hover state for links |
300
+ | Error foreground | `system.color.brand.fg.critical.default` | `colors.cinnamon500` <br/> `inputColors.error.icon` <br/> `statusColors.error` | Error messages |
301
+ | Inverse (white) foreground | `system.color.fg.inverse` | `colors.frenchVanilla100` <br/> `typeColors.inverse` <br/> `typeColors.selectHighlightInverse` <br/> `iconColors.inverse` | Text on dark backgrounds |
302
+ | Disabled foreground | `system.color.fg.disabled` | `colors.licorice100` <br/> `inputColors.disabled.text` <br/> `inputColors.disabled.icon` <br/> `iconColors.disabled` | Disabled buttons and form inputs |
303
+ | Muted foreground (soft) | `system.color.fg.muted.default` | `colors.licorice200` <br/> `iconColors.standard` <br/> `inputColors.icon` <br/> `typeColors.hint` | Tab labels, hint text |
304
+ | Muted foreground (default) | `system.color.fg.muted.default` | `colors.licorice300` <br/> `inputColors.placeholder` | Subtitle or secondary text |
305
+ | Muted foreground (strong) | `system.color.fg.muted.strong` | `colors.licorice400` | Hover state for muted elements |
306
+ | Muted foreground (stronger) | `system.color.fg.muted.strong` | `colors.licorice500` <br/> `iconColors.hover` <br/> `inputColors.iconHover` | Active muted tabs text |
307
+ | **Border Colors** | **System Token (v4)** | **Old Token / React tokens** | **Example Usage** |
308
+ | Contrast border | `system.color.border.contrast.default` | `colors.blackPepper400` | Card outline, divider on light surfaces |
309
+ | Strong contrast border | `system.color.border.contrast.strong` | `colors.blackPepper500` | High-contrast outlines or focus states |
310
+ | Primary active input border | `system.color.border.primary.default` | `colors.blueberry400` <br/> `commonColors.focusOutline` <br/> `inputColors.focusBorder` | Active input fields |
311
+ | Warning border (inner) | `system.color.brand.focus.caution.inner` | `colors.cantaloupe400` <br/> `inputColors.alert.border` <br/> `statusColors.warning` | Alert field inner border |
312
+ | Warning border (outer) | `system.color.brand.focus.caution.outer` | `colors.cantaloupe600` | Alert field box shadow |
313
+ | Error border | `system.color.border.critical.default` | `colors.cinnamon500` <br/> `inputColors.error.border` <br/> `statusColors.error` | Form field with error |
314
+ | Inverse surface border | `system.color.border.inverse` | `colors.frenchVanilla100` | Checkbox/radio on dark background |
315
+ | Disabled input border | `system.color.border.input.default` | `colors.licorice100` | Non-editable input fields |
316
+ | Default input border | `system.color.border.input.default` | `colors.licorice200` <br/> `inputColors.border` | Normal input field border |
317
+ | Hover input border | `system.color.border.input.hover` | `colors.licorice500` <br/> `inputColors.disabled.border` | Input field on hover |
318
+ | Inverse input border | `system.color.border.input.inverse` | `colors.soap300` | Inverse theme inputs |
319
+ | Divider/separator border | `system.color.border.default` | `colors.soap400` <br/> `commonColors.divider` | Table rows, content separators |
320
+ | Container border (card/table edge) | `system.color.border.strong` | `colors.soap500` | Card edge or section container border |
321
+ | **Static Colors** | **System Token (v4)** | **Old Token / React tokens** | **Example Usage** |
322
+ | White | `system.color.static.white` | | Always white regardless of theme |
323
+ | Black | `system.color.static.black` | | Always black regardless of theme |
324
+ | Transparent | `system.color.static.transparent` | | Invisible backgrounds |
325
+
326
+ ## Other Mapping
327
+
328
+ Certain old tokens have been deprecated without direct replacements. In these cases, we recommend
329
+ using the closest available base palette or gradient token references shown below rather than
330
+ semantic aliases; only use literal raw color values if no tokenized option exists.
331
+
332
+ ### Gradients
333
+
334
+ Please note that the new gradients may appear visually different from the previous ones, as the
335
+ underlying base palette has been updated and the color mappings do not have exact equivalents.
336
+
337
+ | Gradient Name | Old Value | New Value |
338
+ | ------------------ | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- |
339
+ | cinnamon | "linear-gradient(to bottom right," + colors.cinnamon500 + "," + colors.cinnamon400 + ")" | "linear-gradient(to bottom right, var(" + base.red600 + "), var(" + base.red400 + "))" |
340
+ | peach | "linear-gradient(to bottom right," + colors.peach500 + "," + colors.peach400 + ")" | "linear-gradient(to bottom right, var(" + base.coral600 + "), var(" + base.red400 + "))" |
341
+ | chiliMango | "linear-gradient(to bottom right," + colors.chiliMango500 + "," + colors.chiliMango400 + ")" | "linear-gradient(to bottom right, var(" + base.orange500 + "), var(" + base.orange400 + "))" |
342
+ | cantaloupe | "linear-gradient(to bottom right," + colors.cantaloupe500 + "," + colors.cantaloupe400 + ")" | "linear-gradient(to bottom right, var(" + base.amber500 + "), var(" + base.amber400 + "))" |
343
+ | sourLemon | "linear-gradient(to bottom right," + colors.sourLemon500 + "," + colors.sourLemon400 + ")" | "linear-gradient(to bottom right, var(" + base.amber300 + "), var(" + base.amber200 + "))" |
344
+ | juicyPear | "linear-gradient(to bottom right," + colors.juicyPear500 + "," + colors.juicyPear400 + ")" | "linear-gradient(to bottom right, var(" + base.green500 + "), var(" + base.green400 + "))" |
345
+ | kiwi | "linear-gradient(to bottom right," + colors.kiwi500 + "," + colors.kiwi400 + ")" | "linear-gradient(to bottom right, var(" + base.green500 + "), var(" + base.green400 + "))" |
346
+ | greenApple | "linear-gradient(to bottom right," + colors.greenApple500 + "," + colors.greenApple400 + ")" | "linear-gradient(to bottom right, var(" + base.green700 + "), var(" + base.green600 + "))" |
347
+ | watermelon | "linear-gradient(to bottom right," + colors.watermelon500 + "," + colors.watermelon400 + ")" | "linear-gradient(to bottom right, var(" + base.green700 + "), var(" + base.green600 + "))" |
348
+ | jewel | "linear-gradient(to bottom right," + colors.jewel500 + "," + colors.jewel400 + ")" | "linear-gradient(to bottom right, var(" + base.teal600 + "), var(" + base.teal500 + "))" |
349
+ | toothpaste | "linear-gradient(to bottom right," + colors.toothpaste500 + "," + colors.toothpaste400 + ")" | "linear-gradient(to bottom right, var(" + base.azure700 + "), var(" + base.azure500 + "))" |
350
+ | blueberry | "linear-gradient(to bottom right," + colors.blueberry500 + "," + colors.blueberry400 + ")" | `brand.gradient.primary` |
351
+ | plum | "linear-gradient(to bottom right," + colors.plum500 + "," + colors.plum400 + ")" | "linear-gradient(to bottom right, var(" + base.blue700 + "), var(" + base.blue600 + "))" |
352
+ | berrySmoothie | "linear-gradient(to bottom right," + colors.berrySmoothie500 + "," + colors.berrySmoothie400 + ")" | "linear-gradient(to bottom right, var(" + base.blue700 + "), var(" + base.blue500 + "))" |
353
+ | blackberry | "linear-gradient(to bottom right," + colors.blackberry500 + "," + colors.blackberry400 + ")" | "linear-gradient(to bottom right, var(" + base.indigo700 + "), var(" + base.indigo500 + "))" |
354
+ | islandPunch | "linear-gradient(to bottom right," + colors.islandPunch500 + "," + colors.islandPunch400 + ")" | "linear-gradient(to bottom right, var(" + base.purple700 + "), var(" + base.purple500 + "))" |
355
+ | grapeSoda | "linear-gradient(to bottom right," + colors.grapeSoda500 + "," + colors.grapeSoda400 + ")" | "linear-gradient(to bottom right, var(" + base.purple600 + "), var(" + base.purple500 + "))" |
356
+ | pomegranate | "linear-gradient(to bottom right," + colors.pomegranate500 + "," + colors.pomegranate400 + ")" | "linear-gradient(to bottom right, var(" + base.red700 + "), var(" + base.red600 + "))" |
357
+ | fruitPunch | "linear-gradient(to bottom right," + colors.fruitPunch500 + "," + colors.fruitPunch400 + ")" | "linear-gradient(to bottom right, var(" + base.red400 + "), var(" + base.red300 + "))" |
358
+ | rootBeer | "linear-gradient(to bottom right," + colors.rootBeer600 + "," + colors.rootBeer500 + ")" | "linear-gradient(to bottom right, var(" + base.amber950 + "), var(" + base.amber900 + "))" |
359
+ | toastedMarshmallow | "linear-gradient(to bottom right," + colors.toastedMarshmallow500 + "," + colors.toastedMarshmallow400 + ")" | "linear-gradient(to bottom right, var(" + base.amber500 + "), var(" + base.amber400 + "))" |
360
+ | cappuccino | "linear-gradient(to bottom right," + colors.cappuccino400 + "," + colors.cappuccino300 + ")" | "linear-gradient(to bottom right, var(" + base.amber500 + "), var(" + base.amber400 + "))" |
361
+ | licorice | "linear-gradient(to bottom right," + colors.licorice500 + "," + colors.licorice400 + ")" | "linear-gradient(to bottom right, var(" + base.slate800 + "), var(" + base.slate700 + "))" |
362
+ | blackPepper | "linear-gradient(to bottom right," + colors.blackPepper400 + "," + colors.blackPepper300 + ")" | "linear-gradient(to bottom right, var(" + base.neutral900 + "), var(" + base.neutral800 + "))" |
363
+
364
+ ### Chart Colors
365
+
366
+ Please note that the new chart colors may appear visually different from the previous ones, as the
367
+ underlying base palette has been updated and the color mappings do not have exact equivalents.
368
+
369
+ | Old Token | Old Value | New Value |
370
+ | ----------------------------------- | ------------------------------ | ----------------- |
371
+ | `chartingColors[1]` | `colors.watermelon200` | `base.teal100` |
372
+ | `chartingColors[2]` | `colors.watermelon300` | `base.green100` |
373
+ | `chartingColors[3]` | `colors.jewel200` | `base.teal200` |
374
+ | `chartingColors[4]` | `colors.jewel300` | `base.teal400` |
375
+ | `chartingColors[5]` | `colors.plum200` | `base.blue200` |
376
+ | `chartingColors[6]` | `colors.plum300` | `base.blue400` |
377
+ | `chartingColors[7]` | `colors.islandPunch200` | `base.purple200` |
378
+ | `chartingColors[8]` | `colors.islandPunch300` | `base.purple500` |
379
+ | `chartingColors[9]` | `colors.pomegranate200` | `base.magenta100` |
380
+ | `chartingColors[10]` | `colors.pomegranate300` | `base.magenta500` |
381
+ | `chartingColors[11]` | `colors.peach200` | `base.coral200` |
382
+ | `chartingColors[12]` | `colors.peach400` | `base.coral300` |
383
+ | `chartingColors[13]` | `colors.cantaloupe200` | `base.amber200` |
384
+ | `chartingColors[14]` | `colors.cantaloupe400` | `base.amber300` |
385
+ | `chartingColors[15]` | `colors.sourLemon200` | `base.amber100` |
386
+ | `chartingColors[16]` | `colors.sourLemon400` | `base.amber200` |
387
+ | `chartingColors[17]` | `colors.watermelon400` | `base.green600` |
388
+ | `chartingColors[18]` | `colors.watermelon500` | `base.green700` |
389
+ | `chartingColors[19]` | `colors.jewel400` | `base.teal500` |
390
+ | `chartingColors[20]` | `colors.jewel500` | `base.teal600` |
391
+ | `chartingColors[21]` | `colors.plum400` | `base.blue600` |
392
+ | `chartingColors[22]` | `colors.plum500` | `base.blue700` |
393
+ | `chartingColors[23]` | `colors.islandPunch400` | `base.purple500` |
394
+ | `chartingColors[24]` | `colors.islandPunch500` | `base.purple600` |
395
+ | `chartingColors[25]` | `colors.pomegranate400` | `base.magenta500` |
396
+ | `chartingColors[26]` | `colors.pomegranate600` | `base.red700` |
397
+ | `chartingColors[27]` | `colors.peach500` | `base.coral600` |
398
+ | `chartingColors[28]` | `colors.peach600` | `base.coral700` |
399
+ | `chartingColors[29]` | `colors.cantaloupe500` | `base.amber500` |
400
+ | `chartingColors[30]` | `colors.cantaloupe600` | `base.amber600` |
401
+ | `chartingColors[31]` | `colors.sourLemon500` | `base.amber300` |
402
+ | `chartingColors[32]` | `colors.sourLemon600` | `base.amber500` |
403
+ | `chartingColors[33]` | `colors.greenApple200` | `base.green100` |
404
+ | `chartingColors[34]` | `colors.greenApple300` | `base.green200` |
405
+ | `chartingColors[35]` | `colors.toothpaste200` | `base.azure200` |
406
+ | `chartingColors[36]` | `colors.toothpaste300` | `base.azure300` |
407
+ | `chartingColors[37]` | `colors.blueberry200` | `base.blue100` |
408
+ | `chartingColors[38]` | `colors.blueberry300` | `base.blue400` |
409
+ | `chartingColors[39]` | `colors.berrySmoothie200` | `base.indigo200` |
410
+ | `chartingColors[40]` | `colors.blackberry300` | `base.indigo400` |
411
+ | `chartingColors[41]` | `colors.fruitPunch200` | `base.red200` |
412
+ | `chartingColors[42]` | `colors.fruitPunch300` | `base.red300` |
413
+ | `chartingColors[43]` | `colors.rootBeer200` | `base.coral100` |
414
+ | `chartingColors[44]` | `colors.rootBeer300` | `base.coral200` |
415
+ | `chartingColors[45]` | `colors.toastedMarshmallow200` | `base.orange100` |
416
+ | `chartingColors[46]` | `colors.toastedMarshmallow400` | `base.orange200` |
417
+ | `chartingColors[47]` | `colors.chiliMango200` | `base.coral200` |
418
+ | `chartingColors[48]` | `colors.chiliMango400` | `base.coral300` |
419
+ | `chartingColors[49]` | `colors.greenApple400` | `base.green600` |
420
+ | `chartingColors[50]` | `colors.greenApple600` | `base.green700` |
421
+ | `chartingColors[51]` | `colors.toothpaste400` | `base.azure500` |
422
+ | `chartingColors[52]` | `colors.toothpaste600` | `base.azure800` |
423
+ | `chartingColors[53]` | `colors.blueberry400` | `base.blue600` |
424
+ | `chartingColors[54]` | `colors.blueberry600` | `base.blue800` |
425
+ | `chartingColors[55]` | `colors.blackberry400` | `base.indigo500` |
426
+ | `chartingColors[56]` | `colors.blackberry600` | `base.indigo900` |
427
+ | `chartingColors[57]` | `colors.fruitPunch400` | `base.red400` |
428
+ | `chartingColors[58]` | `colors.fruitPunch600` | `base.red700` |
429
+ | `chartingColors[59]` | `colors.rootBeer500` | `base.amber900` |
430
+ | `chartingColors[60]` | `colors.rootBeer600` | `base.amber950` |
431
+ | `chartingColors[61]` | `colors.toastedMarshmallow500` | `base.amber500` |
432
+ | `chartingColors[62]` | `colors.toastedMarshmallow600` | `base.amber600` |
433
+ | `chartingColors[63]` | `colors.chiliMango500` | `base.orange500` |
434
+ | `chartingColors[64]` | `colors.chiliMango600` | `base.orange600` |
435
+ | `chartingColors[65]` | `colors.kiwi200` | `base.green100` |
436
+ | `chartingColors[66]` | `colors.kiwi400` | `base.green500` |
437
+ | `chartingColors[67]` | `colors.berrySmoothie200` | `base.indigo200` |
438
+ | `chartingColors[68]` | `colors.berrySmoothie300` | `base.indigo400` |
439
+ | `chartingColors[69]` | `colors.grapeSoda200` | `base.magenta200` |
440
+ | `chartingColors[70]` | `colors.grapeSoda300` | `base.magenta400` |
441
+ | `chartingColors[71]` | `colors.cinnamon200` | `base.red100` |
442
+ | `chartingColors[72]` | `colors.cinnamon300` | `base.red300` |
443
+ | `chartingColors[73]` | `colors.sourLemon300` | `base.amber200` |
444
+ | `chartingColors[74]` | `colors.toastedMarshmallow300` | `base.orange200` |
445
+ | `chartingColors[75]` | `colors.peach300` | `base.coral300` |
446
+ | `chartingColors[76]` | `colors.cinnamon500` | `base.red600` |
447
+ | `chartingColors[77]` | `colors.cantaloupe300` | `base.amber300` |
448
+ | `chartingColors[78]` | `colors.chiliMango300` | `base.coral300` |
449
+ | `chartingColors[79]` | `colors.kiwi300` | `base.green200` |
450
+ | `chartingColors[80]` | `colors.kiwi500` | `base.green500` |
451
+ | `chartingColors[81]` | `colors.berrySmoothie400` | `base.blue500` |
452
+ | `chartingColors[82]` | `colors.berrySmoothie500` | `base.blue700` |
453
+ | `chartingColors[83]` | `colors.grapeSoda400` | `base.purple500` |
454
+ | `chartingColors[84]` | `colors.grapeSoda500` | `base.purple600` |
455
+ | `chartingColors[85]` | `colors.cinnamon400` | `base.red400` |
456
+ | `chartingColors[86]` | `colors.cinnamon500` | `base.red600` |
457
+ | `chartingColorOffsets.barAndColumn` | `colors.watermelon200` | `base.teal100` |
458
+ | `chartingColorOffsets.pie` | `colors.jewel300` | `base.teal400` |
459
+ | `chartingColorOffsets.lineAndArea` | `colors.islandPunch200` | `base.purple200` |
460
+ | `chartingColorOffsets.bubble` | `colors.peach200` | `base.coral200` |
323
461
 
324
462
  ## Migration Examples
325
463
 
@@ -328,23 +466,15 @@ themeable, understandable, and consistent.**
328
466
  ```javascript
329
467
  // Old
330
468
  import {colors} from '@workday/canvas-kit-react/tokens';
331
- backgroundColor: colors.frenchVanilla100;
332
469
 
333
- // New (Direct mapping)
334
- import {base} from '@workday/canvas-tokens-web';
335
- backgroundColor: cssVar(base.neutral0);
470
+ backgroundColor: colors.frenchVanilla100;
336
471
  ```
337
472
 
338
- **Example 3: Brand Color Migration**
339
-
340
- ```javascript
341
- // Old
342
- import {theme} from '@emotion/react';
343
- backgroundColor: theme.canvas.palette.primary.main;
344
-
473
+ ```js
345
474
  // New
346
- import {brand} from '@workday/canvas-tokens-web';
347
- backgroundColor: cssVar(brand.primary.base);
475
+ import {base} from '@workday/canvas-tokens-web';
476
+
477
+ backgroundColor: cssVar(base.neutral0);
348
478
  ```
349
479
 
350
480
  **Example 2: System Color Migration**
@@ -358,11 +488,27 @@ const styles = createStyles({
358
488
  color: colors.blackPepper300,
359
489
  });
360
490
 
361
- // New - Using semantic system tokens
491
+ // New - Using v4 semantic system tokens (system.color.*)
362
492
  import {system} from '@workday/canvas-tokens-web';
363
493
  const styles = createStyles({
364
- backgroundColor: system.color.bg.default,
365
- borderColor: system.color.border.container,
366
- color: system.color.text.default,
494
+ backgroundColor: system.color.surface.default,
495
+ borderColor: system.color.border.strong,
496
+ color: system.color.fg.default,
367
497
  });
498
+ ```
499
+
500
+ **Example 3: Brand Color Migration**
501
+
502
+ ```javascript
503
+ // Old
504
+ import {theme} from '@emotion/react';
505
+
506
+ backgroundColor: theme.canvas.palette.primary.main;
507
+ ```
508
+
509
+ ```js
510
+ // New (v4)
511
+ import {brand} from '@workday/canvas-tokens-web';
512
+
513
+ backgroundColor: cssVar(brand.primary600);
368
514
  ```