@n8n/design-system 2.33.3 → 2.34.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 (518) hide show
  1. package/.turbo/turbo-build.log +142 -18
  2. package/dist/assets/CommitMonoVariable.woff2 +0 -0
  3. package/dist/assets/InterVariable-Italic.woff2 +0 -0
  4. package/dist/assets/InterVariable.woff2 +0 -0
  5. package/dist/assets/element-icons.ttf +0 -0
  6. package/dist/assets/element-icons.woff +0 -0
  7. package/dist/components/AskAssistantAvatar/AssistantAvatar.vue.d.ts +7 -0
  8. package/dist/components/AskAssistantAvatar/index.d.ts +2 -0
  9. package/dist/components/AskAssistantButton/AskAssistantButton.vue.d.ts +10 -0
  10. package/dist/components/AskAssistantButton/index.d.ts +2 -0
  11. package/dist/components/AskAssistantChat/AskAssistantChat.vue.d.ts +733 -0
  12. package/dist/components/AskAssistantChat/index.d.ts +5 -0
  13. package/dist/components/AskAssistantChat/messages/BaseMessage.vue.d.ts +30 -0
  14. package/dist/components/AskAssistantChat/messages/BlockMessage.vue.d.ts +21 -0
  15. package/dist/components/AskAssistantChat/messages/CodeDiffMessage.vue.d.ts +24 -0
  16. package/dist/components/AskAssistantChat/messages/ErrorMessage.vue.d.ts +14 -0
  17. package/dist/components/AskAssistantChat/messages/EventMessage.vue.d.ts +17 -0
  18. package/dist/components/AskAssistantChat/messages/MessageRating.vue.d.ts +150 -0
  19. package/dist/components/AskAssistantChat/messages/MessageWrapper.vue.d.ts +54 -0
  20. package/dist/components/AskAssistantChat/messages/RestoreVersionConfirm.vue.d.ts +14 -0
  21. package/dist/components/AskAssistantChat/messages/TextMessage.vue.d.ts +43 -0
  22. package/dist/components/AskAssistantChat/messages/ThinkingMessage.vue.d.ts +12 -0
  23. package/dist/components/AskAssistantChat/messages/ToolMessage.vue.d.ts +15 -0
  24. package/dist/components/AskAssistantChat/messages/helpers.d.ts +46 -0
  25. package/dist/components/AskAssistantChat/messages/useMarkdown.d.ts +3 -0
  26. package/dist/components/AskAssistantIcon/AssistantIcon.vue.d.ts +9 -0
  27. package/dist/components/AskAssistantIcon/index.d.ts +2 -0
  28. package/dist/components/AskAssistantText/AssistantText.vue.d.ts +9 -0
  29. package/dist/components/AskAssistantText/index.d.ts +2 -0
  30. package/dist/components/BlinkingCursor/BlinkingCursor.vue.d.ts +2 -0
  31. package/dist/components/CanvasCollaborationPill/CanvasCollaborationPill.vue.d.ts +11 -0
  32. package/dist/components/CanvasCollaborationPill/index.d.ts +2 -0
  33. package/dist/components/CanvasPill/CanvasPill.vue.d.ts +18 -0
  34. package/dist/components/CanvasPill/index.d.ts +2 -0
  35. package/dist/components/CanvasThinkingPill/CanvasThinkingPill.vue.d.ts +9 -0
  36. package/dist/components/CanvasThinkingPill/index.d.ts +2 -0
  37. package/dist/components/CodeDiff/CodeDiff.vue.d.ts +23 -0
  38. package/dist/components/ConditionalRouterLink/CondtionalRouterLink.vue.d.ts +31 -0
  39. package/dist/components/ConditionalRouterLink/index.d.ts +2 -0
  40. package/dist/components/DateRangePicker/DateRangePicker.constants.d.ts +2 -0
  41. package/dist/components/DateRangePicker/DateRangePicker.vue.d.ts +43 -0
  42. package/dist/components/DateRangePicker/DateRangePickerField.vue.d.ts +2 -0
  43. package/dist/components/DateRangePicker/index.d.ts +7 -0
  44. package/dist/components/IconTextButton/IconTextButton.vue.d.ts +41 -0
  45. package/dist/components/IconTextButton/index.d.ts +2 -0
  46. package/dist/components/InlineAskAssistantButton/InlineAskAssistantButton.vue.d.ts +16 -0
  47. package/dist/components/InlineAskAssistantButton/index.d.ts +2 -0
  48. package/dist/components/N8nActionDropdown/ActionDropdown.types.d.ts +16 -0
  49. package/dist/components/N8nActionDropdown/ActionDropdown.vue.d.ts +41 -0
  50. package/dist/components/N8nActionDropdown/index.d.ts +2 -0
  51. package/dist/components/N8nActionPill/ActionPill.vue.d.ts +35 -0
  52. package/dist/components/N8nActionToggle/ActionToggle.types.d.ts +23 -0
  53. package/dist/components/N8nActionToggle/ActionToggle.vue.d.ts +24 -0
  54. package/dist/components/N8nActionToggle/index.d.ts +2 -0
  55. package/dist/components/N8nAiActivityStep/AiActivityStep.vue.d.ts +32 -0
  56. package/dist/components/N8nAiActivityStep/context.d.ts +2 -0
  57. package/dist/components/N8nAiActivityStep/index.d.ts +1 -0
  58. package/dist/components/N8nAiActivityStepButton/AiActivityStepButton.vue.d.ts +34 -0
  59. package/dist/components/N8nAiActivityStepButton/index.d.ts +1 -0
  60. package/dist/components/N8nAiActivityStepChevron/AiActivityStepChevron.vue.d.ts +5 -0
  61. package/dist/components/N8nAiActivityStepChevron/index.d.ts +1 -0
  62. package/dist/components/N8nAiActivityStepGroup/AiActivityStepGroup.vue.d.ts +27 -0
  63. package/dist/components/N8nAiActivityStepGroup/index.d.ts +1 -0
  64. package/dist/components/N8nAiActivityStepResultSection/AiActivityStepResultSection.vue.d.ts +17 -0
  65. package/dist/components/N8nAiActivityStepResultSection/index.d.ts +1 -0
  66. package/dist/components/N8nAiModelSelectorDropdown/AiModelSelectorDropdown.types.d.ts +15 -0
  67. package/dist/components/N8nAiModelSelectorDropdown/AiModelSelectorDropdown.vue.d.ts +54 -0
  68. package/dist/components/N8nAiModelSelectorDropdown/index.d.ts +2 -0
  69. package/dist/components/N8nAlert/Alert.vue.d.ts +34 -0
  70. package/dist/components/N8nAlert/index.d.ts +1 -0
  71. package/dist/components/N8nAlertDialog/AlertDialog.vue.d.ts +51 -0
  72. package/dist/components/N8nAlertDialog/index.d.ts +2 -0
  73. package/dist/components/N8nAnimatedCollapsibleContent/AnimatedCollapsibleContent.vue.d.ts +22 -0
  74. package/dist/components/N8nAnimatedCollapsibleContent/index.d.ts +1 -0
  75. package/dist/components/N8nAvatar/Avatar.vue.d.ts +14 -0
  76. package/dist/components/N8nAvatar/avatarSizes.d.ts +8 -0
  77. package/dist/components/N8nAvatar/index.d.ts +3 -0
  78. package/dist/components/N8nBadge/Badge.vue.d.ts +29 -0
  79. package/dist/components/N8nBadge/index.d.ts +2 -0
  80. package/dist/components/N8nBlockUi/BlockUi.vue.d.ts +7 -0
  81. package/dist/components/N8nBlockUi/index.d.ts +2 -0
  82. package/dist/components/N8nBreadcrumbs/Breadcrumbs.vue.d.ts +59 -0
  83. package/dist/components/N8nBreadcrumbs/index.d.ts +3 -0
  84. package/dist/components/N8nButton/Button.vue.d.ts +24 -0
  85. package/dist/components/N8nButton/index.d.ts +2 -0
  86. package/dist/components/N8nButtonList/ButtonList.types.d.ts +4 -0
  87. package/dist/components/N8nButtonList/ButtonList.vue.d.ts +20 -0
  88. package/dist/components/N8nButtonList/index.d.ts +3 -0
  89. package/dist/components/N8nCallout/Callout.vue.d.ts +35 -0
  90. package/dist/components/N8nCallout/index.d.ts +3 -0
  91. package/dist/components/N8nCard/Card.vue.d.ts +26 -0
  92. package/dist/components/N8nCard/index.d.ts +2 -0
  93. package/dist/components/N8nChatInput/ChatInput.vue.d.ts +88 -0
  94. package/dist/components/N8nChatInput/index.d.ts +4 -0
  95. package/dist/components/N8nChatInput/useChatInputAutoFocus.d.ts +10 -0
  96. package/dist/components/N8nChatMessage/ChatMessage.vue.d.ts +30 -0
  97. package/dist/components/N8nChatMessage/index.d.ts +1 -0
  98. package/dist/components/N8nCircleLoader/CircleLoader.vue.d.ts +9 -0
  99. package/dist/components/N8nCircleLoader/index.d.ts +2 -0
  100. package/dist/components/N8nCodeBlock/CodeBlock.types.d.ts +14 -0
  101. package/dist/components/N8nCodeBlock/CodeBlock.vue.d.ts +20 -0
  102. package/dist/components/N8nCodeBlock/index.d.ts +2 -0
  103. package/dist/components/N8nCollapsiblePanel/CollapsiblePanel.vue.d.ts +36 -0
  104. package/dist/components/N8nCollapsiblePanel/index.d.ts +3 -0
  105. package/dist/components/N8nColorPicker/ColorPicker.vue.d.ts +31 -0
  106. package/dist/components/N8nColorPicker/index.d.ts +2 -0
  107. package/dist/components/N8nCommandBar/CommandBar.vue.d.ts +191 -0
  108. package/dist/components/N8nCommandBar/CommandBarItem.vue.d.ts +11 -0
  109. package/dist/components/N8nCommandBar/index.d.ts +2 -0
  110. package/dist/components/N8nCommandBar/types.d.ts +21 -0
  111. package/dist/components/N8nCopyInput/CopyInput.vue.d.ts +21 -0
  112. package/dist/components/N8nCopyInput/index.d.ts +2 -0
  113. package/dist/components/N8nDataTableServer/N8nDataTableServer.vue.d.ts +97 -0
  114. package/dist/components/N8nDataTableServer/index.d.ts +3 -0
  115. package/dist/components/N8nDatatable/Datatable.types.d.ts +8 -0
  116. package/dist/components/N8nDatatable/Datatable.vue.d.ts +25 -0
  117. package/dist/components/N8nDatatable/index.d.ts +2 -0
  118. package/dist/components/N8nDialog/Dialog.vue.d.ts +57 -0
  119. package/dist/components/N8nDialog/DialogClose.vue.d.ts +21 -0
  120. package/dist/components/N8nDialog/DialogContent.vue.d.ts +48 -0
  121. package/dist/components/N8nDialog/DialogDescription.vue.d.ts +20 -0
  122. package/dist/components/N8nDialog/DialogFooter.vue.d.ts +17 -0
  123. package/dist/components/N8nDialog/DialogHeader.vue.d.ts +17 -0
  124. package/dist/components/N8nDialog/DialogOverlay.vue.d.ts +5 -0
  125. package/dist/components/N8nDialog/DialogTitle.vue.d.ts +20 -0
  126. package/dist/components/N8nDialog/index.d.ts +14 -0
  127. package/dist/components/N8nDropdownMenu/DropdownMenu.typeguards.d.ts +3 -0
  128. package/dist/components/N8nDropdownMenu/DropdownMenu.types.d.ts +104 -0
  129. package/dist/components/N8nDropdownMenu/DropdownMenu.utils.d.ts +10 -0
  130. package/dist/components/N8nDropdownMenu/DropdownMenu.vue.d.ts +23 -0
  131. package/dist/components/N8nDropdownMenu/DropdownMenuItem.vue.d.ts +23 -0
  132. package/dist/components/N8nDropdownMenu/DropdownMenuItems.vue.d.ts +29 -0
  133. package/dist/components/N8nDropdownMenu/DropdownMenuSearch.vue.d.ts +42 -0
  134. package/dist/components/N8nDropdownMenu/DropdownMenuSearchableContent.vue.d.ts +44 -0
  135. package/dist/components/N8nDropdownMenu/composables/useDropdownSearch.d.ts +16 -0
  136. package/dist/components/N8nDropdownMenu/index.d.ts +4 -0
  137. package/dist/components/N8nEmptyState/EmptyState.vue.d.ts +40 -0
  138. package/dist/components/N8nEmptyState/EmptyStateIconCards.vue.d.ts +11 -0
  139. package/dist/components/N8nEmptyState/index.d.ts +3 -0
  140. package/dist/components/N8nEmptyState/types.d.ts +9 -0
  141. package/dist/components/N8nExternalLink/ExternalLink.vue.d.ts +27 -0
  142. package/dist/components/N8nExternalLink/index.d.ts +2 -0
  143. package/dist/components/N8nFloatingWindow/FloatingWindow.vue.d.ts +75 -0
  144. package/dist/components/N8nFloatingWindow/index.d.ts +3 -0
  145. package/dist/components/N8nFormBox/FormBox.vue.d.ts +41 -0
  146. package/dist/components/N8nFormBox/index.d.ts +2 -0
  147. package/dist/components/N8nFormInput/FormInput.vue.d.ts +355 -0
  148. package/dist/components/N8nFormInput/index.d.ts +2 -0
  149. package/dist/components/N8nFormInput/validators.d.ts +46 -0
  150. package/dist/components/N8nFormInputs/FormInputs.vue.d.ts +39 -0
  151. package/dist/components/N8nFormInputs/index.d.ts +2 -0
  152. package/dist/components/N8nHeaderAction/HeaderAction.vue.d.ts +18 -0
  153. package/dist/components/N8nHeaderAction/index.d.ts +2 -0
  154. package/dist/components/N8nHeading/Heading.vue.d.ts +33 -0
  155. package/dist/components/N8nHeading/index.d.ts +2 -0
  156. package/dist/components/N8nHoverCard/HoverCard.vue.d.ts +70 -0
  157. package/dist/components/N8nHoverCard/index.d.ts +2 -0
  158. package/dist/components/N8nIcon/Icon.vue.d.ts +15 -0
  159. package/dist/components/N8nIcon/iconColor.d.ts +2 -0
  160. package/dist/components/N8nIcon/icons.d.ts +495 -0
  161. package/dist/components/N8nIcon/index.d.ts +3 -0
  162. package/dist/components/N8nIcon/node-icon-names.d.ts +2 -0
  163. package/dist/components/N8nIcon/node-icons.d.ts +82 -0
  164. package/dist/components/N8nIcon/svgContentDirective.d.ts +2 -0
  165. package/dist/components/N8nIconButton/IconButton.vue.d.ts +8 -0
  166. package/dist/components/N8nIconButton/index.d.ts +2 -0
  167. package/dist/components/N8nIconPicker/IconColorPicker.vue.d.ts +11 -0
  168. package/dist/components/N8nIconPicker/IconPicker.vue.d.ts +206 -0
  169. package/dist/components/N8nIconPicker/SkinTonePicker.vue.d.ts +11 -0
  170. package/dist/components/N8nIconPicker/constants.d.ts +2 -0
  171. package/dist/components/N8nIconPicker/emojiData.d.ts +12 -0
  172. package/dist/components/N8nIconPicker/iconCategories.d.ts +8 -0
  173. package/dist/components/N8nIconPicker/iconPickerBlocklist.d.ts +1 -0
  174. package/dist/components/N8nIconPicker/index.d.ts +2 -0
  175. package/dist/components/N8nIconPicker/lucideIconData.d.ts +6 -0
  176. package/dist/components/N8nIconPicker/types.d.ts +10 -0
  177. package/dist/components/N8nIconPicker/useIconPickerSearch.d.ts +22 -0
  178. package/dist/components/N8nIconPicker/useIconPickerVirtualRows.d.ts +25 -0
  179. package/dist/components/N8nInfoAccordion/InfoAccordion.vue.d.ts +48 -0
  180. package/dist/components/N8nInfoAccordion/index.d.ts +3 -0
  181. package/dist/components/N8nInfoTip/InfoTip.vue.d.ts +37 -0
  182. package/dist/components/N8nInfoTip/index.d.ts +2 -0
  183. package/dist/components/N8nInlineTextEdit/InlineTextEdit.vue.d.ts +196 -0
  184. package/dist/components/N8nInlineTextEdit/index.d.ts +2 -0
  185. package/dist/components/N8nInput/Input.types.d.ts +37 -0
  186. package/dist/components/N8nInput/Input.vue.d.ts +57 -0
  187. package/dist/components/N8nInput/index.d.ts +2 -0
  188. package/dist/components/N8nInputLabel/InputLabel.vue.d.ts +39 -0
  189. package/dist/components/N8nInputLabel/index.d.ts +2 -0
  190. package/dist/components/N8nInputNumber/InputNumber.vue.d.ts +16 -0
  191. package/dist/components/N8nInputNumber/index.d.ts +2 -0
  192. package/dist/components/N8nKeyboardShortcut/N8nKeyboardShortcut.vue.d.ts +3 -0
  193. package/dist/components/N8nKeyboardShortcut/index.d.ts +1 -0
  194. package/dist/components/N8nLink/Link.vue.d.ts +35 -0
  195. package/dist/components/N8nLink/index.d.ts +2 -0
  196. package/dist/components/N8nLoading/Loading.vue.d.ts +18 -0
  197. package/dist/components/N8nLoading/index.d.ts +2 -0
  198. package/dist/components/N8nLogo/Logo.vue.d.ts +39 -0
  199. package/dist/components/N8nLogo/index.d.ts +2 -0
  200. package/dist/components/N8nMarkdown/Markdown.vue.d.ts +43 -0
  201. package/dist/components/N8nMarkdown/index.d.ts +2 -0
  202. package/dist/components/N8nMarkdown/youtube.d.ts +9 -0
  203. package/dist/components/N8nMarkdownEditor/MarkdownEditor.types.d.ts +22 -0
  204. package/dist/components/N8nMarkdownEditor/MarkdownEditor.vue.d.ts +37 -0
  205. package/dist/components/N8nMarkdownEditor/MarkdownEditorToolbar.vue.d.ts +15 -0
  206. package/dist/components/N8nMarkdownEditor/composables/useMarkdownEditor.d.ts +3 -0
  207. package/dist/components/N8nMarkdownEditor/index.d.ts +3 -0
  208. package/dist/components/N8nMarkdownEditor/markdownEditorUtils.d.ts +7 -0
  209. package/dist/components/N8nMenuItem/MenuItem.vue.d.ts +16 -0
  210. package/dist/components/N8nMenuItem/index.d.ts +2 -0
  211. package/dist/components/N8nMenuItem/routerUtil.d.ts +3 -0
  212. package/dist/components/N8nNavigationDropdown/NavigationDropdown.vue.d.ts +224 -0
  213. package/dist/components/N8nNavigationDropdown/index.d.ts +2 -0
  214. package/dist/components/N8nNodeCreatorNode/NodeCreatorNode.vue.d.ts +40 -0
  215. package/dist/components/N8nNodeCreatorNode/index.d.ts +2 -0
  216. package/dist/components/N8nNodeIcon/IconContent.vue.d.ts +16 -0
  217. package/dist/components/N8nNodeIcon/NodeIcon.vue.d.ts +24 -0
  218. package/dist/components/N8nNodeIcon/index.d.ts +2 -0
  219. package/dist/components/N8nNotice/Notice.vue.d.ts +34 -0
  220. package/dist/components/N8nNotice/index.d.ts +2 -0
  221. package/dist/components/N8nOption/Option.vue.d.ts +22 -0
  222. package/dist/components/N8nOption/index.d.ts +2 -0
  223. package/dist/components/N8nPagination/Pagination.vue.d.ts +56 -0
  224. package/dist/components/N8nPagination/index.d.ts +2 -0
  225. package/dist/components/N8nPopover/Popover.vue.d.ts +62 -0
  226. package/dist/components/N8nPopover/index.d.ts +2 -0
  227. package/dist/components/N8nPromptInputSuggestions/N8nPromptInputSuggestions.vue.d.ts +32 -0
  228. package/dist/components/N8nPromptInputSuggestions/index.d.ts +3 -0
  229. package/dist/components/N8nPulse/Pulse.vue.d.ts +17 -0
  230. package/dist/components/N8nPulse/index.d.ts +2 -0
  231. package/dist/components/N8nRadioButtons/RadioButton.vue.d.ts +32 -0
  232. package/dist/components/N8nRadioButtons/RadioButtons.types.d.ts +13 -0
  233. package/dist/components/N8nRadioButtons/RadioButtons.vue.d.ts +20 -0
  234. package/dist/components/N8nRadioButtons/index.d.ts +2 -0
  235. package/dist/components/N8nRecycleScroller/RecycleScroller.types.d.ts +7 -0
  236. package/dist/components/N8nRecycleScroller/RecycleScroller.vue.d.ts +26 -0
  237. package/dist/components/N8nRecycleScroller/index.d.ts +2 -0
  238. package/dist/components/N8nResizeWrapper/ResizeWrapper.vue.d.ts +53 -0
  239. package/dist/components/N8nResizeWrapper/index.d.ts +2 -0
  240. package/dist/components/N8nResizeableSticky/ResizeableSticky.vue.d.ts +29 -0
  241. package/dist/components/N8nResizeableSticky/index.d.ts +2 -0
  242. package/dist/components/N8nRoute/Route.vue.d.ts +25 -0
  243. package/dist/components/N8nRoute/index.d.ts +2 -0
  244. package/dist/components/N8nScrollArea/N8nScrollArea.vue.d.ts +181 -0
  245. package/dist/components/N8nScrollArea/index.d.ts +2 -0
  246. package/dist/components/N8nSectionHeader/SectionHeader.vue.d.ts +23 -0
  247. package/dist/components/N8nSectionHeader/index.d.ts +2 -0
  248. package/dist/components/N8nSelect/Select.types.d.ts +8 -0
  249. package/dist/components/N8nSelect/Select.vue.d.ts +301 -0
  250. package/dist/components/N8nSelect/index.d.ts +2 -0
  251. package/dist/components/N8nSelectableList/SelectableList.vue.d.ts +30 -0
  252. package/dist/components/N8nSelectableList/index.d.ts +2 -0
  253. package/dist/components/N8nSendStopButton/N8nSendStopButton.vue.d.ts +23 -0
  254. package/dist/components/N8nSendStopButton/index.d.ts +3 -0
  255. package/dist/components/N8nSettingsLayout/SettingsLayout.vue.d.ts +33 -0
  256. package/dist/components/N8nSettingsLayout/index.d.ts +2 -0
  257. package/dist/components/N8nSettingsPageHeader/SettingsPageHeader.vue.d.ts +34 -0
  258. package/dist/components/N8nSettingsPageHeader/index.d.ts +2 -0
  259. package/dist/components/N8nSettingsRow/SettingsRow.vue.d.ts +197 -0
  260. package/dist/components/N8nSettingsRow/index.d.ts +2 -0
  261. package/dist/components/N8nSettingsRowConfigure/SettingsRowConfigure.vue.d.ts +7 -0
  262. package/dist/components/N8nSettingsRowConfigure/index.d.ts +2 -0
  263. package/dist/components/N8nSettingsRowGroup/SettingsRowGroup.vue.d.ts +22 -0
  264. package/dist/components/N8nSettingsRowGroup/index.d.ts +2 -0
  265. package/dist/components/N8nSettingsSaveBar/SettingsSaveBar.vue.d.ts +47 -0
  266. package/dist/components/N8nSettingsSaveBar/index.d.ts +2 -0
  267. package/dist/components/N8nSettingsSaveBar/quickSaveNotification.d.ts +2 -0
  268. package/dist/components/N8nSettingsSection/SettingsSection.vue.d.ts +28 -0
  269. package/dist/components/N8nSettingsSection/index.d.ts +2 -0
  270. package/dist/components/N8nSpinner/Spinner.vue.d.ts +11 -0
  271. package/dist/components/N8nSpinner/index.d.ts +2 -0
  272. package/dist/components/N8nStatusDot/StatusDot.types.d.ts +5 -0
  273. package/dist/components/N8nStatusDot/StatusDot.vue.d.ts +6 -0
  274. package/dist/components/N8nStatusDot/index.d.ts +3 -0
  275. package/dist/components/N8nStepper/Stepper.vue.d.ts +36 -0
  276. package/dist/components/N8nSticky/Sticky.vue.d.ts +156 -0
  277. package/dist/components/N8nSticky/constants.d.ts +10 -0
  278. package/dist/components/N8nSticky/index.d.ts +2 -0
  279. package/dist/components/N8nSticky/types.d.ts +12 -0
  280. package/dist/components/N8nSuggestedActions/SuggestedActions.vue.d.ts +26 -0
  281. package/dist/components/N8nSuggestedActions/index.d.ts +1 -0
  282. package/dist/components/N8nSwitch/Switch.types.d.ts +12 -0
  283. package/dist/components/N8nSwitch/Switch.vue.d.ts +26 -0
  284. package/dist/components/N8nSwitch/index.d.ts +5 -0
  285. package/dist/components/N8nTabs/Tabs.types.d.ts +8 -0
  286. package/dist/components/N8nTabs/Tabs.vue.d.ts +17 -0
  287. package/dist/components/N8nTabs/index.d.ts +2 -0
  288. package/dist/components/N8nTag/Tag.vue.d.ts +25 -0
  289. package/dist/components/N8nTag/index.d.ts +2 -0
  290. package/dist/components/N8nTags/Tags.vue.d.ts +23 -0
  291. package/dist/components/N8nTags/index.d.ts +2 -0
  292. package/dist/components/N8nText/Text.vue.d.ts +32 -0
  293. package/dist/components/N8nText/index.d.ts +2 -0
  294. package/dist/components/N8nToggle/Toggle.vue.d.ts +37 -0
  295. package/dist/components/N8nToggle/index.d.ts +2 -0
  296. package/dist/components/N8nToggleGroup/ToggleGroup.vue.d.ts +48 -0
  297. package/dist/components/N8nToggleGroup/index.d.ts +2 -0
  298. package/dist/components/N8nTooltip/Tooltip.types.d.ts +22 -0
  299. package/dist/components/N8nTooltip/Tooltip.vue.d.ts +30 -0
  300. package/dist/components/N8nTooltip/index.d.ts +3 -0
  301. package/dist/components/N8nTree/Tree.types.d.ts +6 -0
  302. package/dist/components/N8nTree/Tree.vue.d.ts +41 -0
  303. package/dist/components/N8nTree/index.d.ts +2 -0
  304. package/dist/components/N8nUserInfo/UserInfo.vue.d.ts +16 -0
  305. package/dist/components/N8nUserInfo/index.d.ts +3 -0
  306. package/dist/components/N8nUserSelect/UserSelect.vue.d.ts +44 -0
  307. package/dist/components/N8nUserSelect/index.d.ts +2 -0
  308. package/dist/components/N8nUserStack/UserStack.vue.d.ts +14 -0
  309. package/dist/components/N8nUserStack/index.d.ts +2 -0
  310. package/dist/components/N8nUsersList/UsersList.types.d.ts +8 -0
  311. package/dist/components/N8nUsersList/UsersList.vue.d.ts +27 -0
  312. package/dist/components/N8nUsersList/index.d.ts +2 -0
  313. package/dist/components/PreviewTag/PreviewTag.vue.d.ts +9 -0
  314. package/dist/components/ResizeObserver/ResizeObserver.vue.d.ts +34 -0
  315. package/dist/components/ResizeObserver/index.d.ts +2 -0
  316. package/dist/components/TableBase/TableBase.vue.d.ts +20 -0
  317. package/dist/components/TableBase/index.d.ts +2 -0
  318. package/dist/components/TableHeaderControlsButton/TableHeaderControlsButton.types.d.ts +15 -0
  319. package/dist/components/TableHeaderControlsButton/TableHeaderControlsButton.vue.d.ts +17 -0
  320. package/dist/components/TableHeaderControlsButton/index.d.ts +2 -0
  321. package/dist/components/index.d.ts +133 -0
  322. package/dist/composables/useAutosizeTextarea.d.ts +28 -0
  323. package/dist/composables/useCharacterLimit.d.ts +13 -0
  324. package/dist/composables/useI18n.d.ts +4 -0
  325. package/dist/composables/useIconBodyLoader.d.ts +4 -0
  326. package/dist/composables/useMessage.d.ts +12 -0
  327. package/dist/composables/useParentScroll.d.ts +7 -0
  328. package/dist/composables/useTooltipAppendTo.d.ts +5 -0
  329. package/dist/constants.d.ts +1 -0
  330. package/dist/css/_primitives.scss +324 -0
  331. package/dist/css/_tokens.legacy.scss +146 -0
  332. package/dist/css/_tokens.scss +1264 -0
  333. package/dist/css/base.scss +3 -0
  334. package/dist/css/checkbox.scss +376 -0
  335. package/dist/css/col.scss +158 -0
  336. package/dist/css/color-picker.scss +376 -0
  337. package/dist/css/common/popup.scss +41 -0
  338. package/dist/css/common/transition.scss +110 -0
  339. package/dist/css/common/var.scss +1109 -0
  340. package/dist/css/date-picker/date-picker.scss +97 -0
  341. package/dist/css/date-picker/date-range-picker.scss +101 -0
  342. package/dist/css/date-picker/date-table.scss +151 -0
  343. package/dist/css/date-picker/month-table.scss +83 -0
  344. package/dist/css/date-picker/picker-panel.scss +130 -0
  345. package/dist/css/date-picker/picker.scss +198 -0
  346. package/dist/css/date-picker/time-picker.scss +87 -0
  347. package/dist/css/date-picker/time-range-picker.scss +32 -0
  348. package/dist/css/date-picker/time-spinner.scss +110 -0
  349. package/dist/css/date-picker/year-table.scss +52 -0
  350. package/dist/css/date-picker.scss +38 -0
  351. package/dist/css/dialog.scss +143 -0
  352. package/dist/css/display.scss +12 -0
  353. package/dist/css/drawer.scss +152 -0
  354. package/dist/css/dropdown.scss +194 -0
  355. package/dist/css/fonts.scss +25 -0
  356. package/dist/css/icon.scss +1186 -0
  357. package/dist/css/index.scss +36 -0
  358. package/dist/css/input-number.scss +191 -0
  359. package/dist/css/input.scss +378 -0
  360. package/dist/css/loading.scss +102 -0
  361. package/dist/css/markdown.scss +397 -0
  362. package/dist/css/menu.scss +311 -0
  363. package/dist/css/message-box.scss +353 -0
  364. package/dist/css/mixins/_breakpoints.scss +22 -0
  365. package/dist/css/mixins/_button.scss +129 -0
  366. package/dist/css/mixins/_focus.scss +34 -0
  367. package/dist/css/mixins/_input.scss +61 -0
  368. package/dist/css/mixins/config.scss +4 -0
  369. package/dist/css/mixins/function.scss +53 -0
  370. package/dist/css/mixins/index.scss +9 -0
  371. package/dist/css/mixins/markdown.scss +313 -0
  372. package/dist/css/mixins/mixins.scss +214 -0
  373. package/dist/css/mixins/motion.scss +616 -0
  374. package/dist/css/mixins/utils.scss +54 -0
  375. package/dist/css/notification.scss +115 -0
  376. package/dist/css/option-group.scss +42 -0
  377. package/dist/css/option.scss +40 -0
  378. package/dist/css/pagination.scss +534 -0
  379. package/dist/css/popover.scss +42 -0
  380. package/dist/css/popper.scss +156 -0
  381. package/dist/css/radio.scss +200 -0
  382. package/dist/css/reset.scss +249 -0
  383. package/dist/css/row.scss +37 -0
  384. package/dist/css/scrollbar.scss +64 -0
  385. package/dist/css/select-dropdown.scss +60 -0
  386. package/dist/css/select.scss +180 -0
  387. package/dist/css/skeleton.scss +101 -0
  388. package/dist/css/slider.scss +7 -0
  389. package/dist/css/switch.scss +122 -0
  390. package/dist/css/table-column.scss +97 -0
  391. package/dist/css/table.scss +572 -0
  392. package/dist/css/tabs.scss +609 -0
  393. package/dist/css/tag.scss +185 -0
  394. package/dist/css/tailwind/index.css +3 -0
  395. package/dist/css/tooltip.scss +135 -0
  396. package/dist/css/tree.scss +124 -0
  397. package/dist/css/utilities/_float.scss +7 -0
  398. package/dist/css/utilities/_link.scss +10 -0
  399. package/dist/css/utilities/_list.scss +14 -0
  400. package/dist/css/utilities/_spacing.scss +52 -0
  401. package/dist/css/utilities/_typography.scss +15 -0
  402. package/dist/css/utilities/index.scss +5 -0
  403. package/dist/css/utils.scss +7 -0
  404. package/dist/directives/index.d.ts +2 -0
  405. package/dist/directives/n8n-html.d.ts +2 -0
  406. package/dist/directives/n8n-smart-decimal.d.ts +2 -0
  407. package/dist/directives/n8n-truncate.d.ts +2 -0
  408. package/dist/{en-CilgL5Ll.js → en-BN17fhJM.js} +18 -2
  409. package/dist/en-eH4tuQQe.js +2 -0
  410. package/dist/icons/lucide/bucket.d.ts +2 -0
  411. package/dist/icons/lucide/index.d.ts +2 -0
  412. package/dist/icons/lucide/index.js +37 -0
  413. package/dist/index.d.ts +41 -0
  414. package/dist/index.js +21572 -0
  415. package/dist/locale/format.d.ts +1 -0
  416. package/dist/locale/index.d.ts +11 -0
  417. package/dist/locale/lang/en.d.ts +3 -0
  418. package/dist/lucide-icons-bucket-0-_FAUqb7V.js +120 -0
  419. package/dist/lucide-icons-bucket-1-Di6-h4oX.js +124 -0
  420. package/dist/lucide-icons-bucket-10-Cbet_3-P.js +134 -0
  421. package/dist/lucide-icons-bucket-11-DXByO0iR.js +105 -0
  422. package/dist/lucide-icons-bucket-12-BgdKhqIx.js +129 -0
  423. package/dist/lucide-icons-bucket-13-CPZPIjuP.js +98 -0
  424. package/dist/lucide-icons-bucket-14-CoBYaDIN.js +98 -0
  425. package/dist/lucide-icons-bucket-15-eHHlEyaM.js +118 -0
  426. package/dist/lucide-icons-bucket-2-1f3EoyT5.js +125 -0
  427. package/dist/lucide-icons-bucket-3-GJHLvy9q.js +133 -0
  428. package/dist/lucide-icons-bucket-4-4gywAul8.js +122 -0
  429. package/dist/lucide-icons-bucket-5-4iCem2l-.js +135 -0
  430. package/dist/lucide-icons-bucket-6-iE4ywa_E.js +108 -0
  431. package/dist/lucide-icons-bucket-7-BPXrMpDj.js +106 -0
  432. package/dist/lucide-icons-bucket-8-DbHwuUDR.js +124 -0
  433. package/dist/lucide-icons-bucket-9-DYv2gFrZ.js +104 -0
  434. package/dist/mixins/index.d.ts +1 -0
  435. package/dist/mixins/locale.d.ts +6 -0
  436. package/dist/plugin.d.ts +4 -0
  437. package/dist/style.css +2 -0
  438. package/dist/theme.css +1 -0
  439. package/dist/types/action-dropdown.d.ts +18 -0
  440. package/dist/types/assistant.d.ts +190 -0
  441. package/dist/types/badge.d.ts +3 -0
  442. package/dist/types/binary.d.ts +8 -0
  443. package/dist/types/button.d.ts +30 -0
  444. package/dist/types/callout.d.ts +3 -0
  445. package/dist/types/datatable.d.ts +14 -0
  446. package/dist/types/form.d.ts +87 -0
  447. package/dist/types/i18n.d.ts +3 -0
  448. package/dist/types/icon.d.ts +7 -0
  449. package/dist/types/index.d.ts +20 -0
  450. package/dist/types/input.d.ts +5 -0
  451. package/dist/types/keyboardshortcut.d.ts +6 -0
  452. package/dist/types/menu.d.ts +56 -0
  453. package/dist/types/node-creator-node.d.ts +7 -0
  454. package/dist/types/recycle-scroller.d.ts +5 -0
  455. package/dist/types/resize.d.ts +20 -0
  456. package/dist/types/select.d.ts +3 -0
  457. package/dist/types/tabs.d.ts +17 -0
  458. package/dist/types/text.d.ts +11 -0
  459. package/dist/types/user.d.ts +25 -0
  460. package/dist/utils/cn.d.ts +2 -0
  461. package/dist/utils/colorUtils.d.ts +3 -0
  462. package/dist/utils/form-event-bus.d.ts +5 -0
  463. package/dist/utils/index.d.ts +7 -0
  464. package/dist/utils/labelUtil.d.ts +1 -0
  465. package/dist/utils/markdown.d.ts +2 -0
  466. package/dist/utils/testUtils.d.ts +1 -0
  467. package/dist/utils/typeguards.d.ts +1 -0
  468. package/dist/utils/uid.d.ts +1 -0
  469. package/dist/utils/valueByPath.d.ts +1 -0
  470. package/dist/v2/components/Checkbox/Checkbox.types.d.ts +13 -0
  471. package/dist/v2/components/Checkbox/Checkbox.vue.d.ts +26 -0
  472. package/dist/v2/components/InputNumber/InputNumber.types.d.ts +18 -0
  473. package/dist/v2/components/InputNumber/InputNumber.vue.d.ts +29 -0
  474. package/dist/v2/components/InputNumber/index.d.ts +2 -0
  475. package/dist/v2/components/Loading/Loading.types.d.ts +10 -0
  476. package/dist/v2/components/Loading/Loading.vue.d.ts +10 -0
  477. package/dist/v2/components/Loading/index.d.ts +3 -0
  478. package/dist/v2/components/Pagination/Pagination.types.d.ts +49 -0
  479. package/dist/v2/components/Pagination/Pagination.vue.d.ts +45 -0
  480. package/dist/v2/components/RadioGroup/RadioGroup.types.d.ts +12 -0
  481. package/dist/v2/components/RadioGroup/RadioGroup.vue.d.ts +27 -0
  482. package/dist/v2/components/RadioGroup/RadioGroupItem.types.d.ts +13 -0
  483. package/dist/v2/components/RadioGroup/RadioGroupItem.vue.d.ts +16 -0
  484. package/dist/v2/components/RadioGroup/index.d.ts +4 -0
  485. package/dist/v2/components/RadioGroup/radio-group-context.d.ts +3 -0
  486. package/dist/v2/components/RadioGroup/reka-ui.d.ts +2 -0
  487. package/dist/v2/components/Select/Select.types.d.ts +67 -0
  488. package/dist/v2/components/Select/Select.vue.d.ts +71 -0
  489. package/dist/v2/components/Select/SelectItem.vue.d.ts +28 -0
  490. package/dist/v2/components/TagsInput/TagsInput.types.d.ts +28 -0
  491. package/dist/v2/components/TagsInput/TagsInput.vue.d.ts +35 -0
  492. package/dist/v2/components/TagsInput/index.d.ts +3 -0
  493. package/dist/v2/components/TagsInput/reka-ui.d.ts +2 -0
  494. package/dist/v2/components/Tree/Tree.types.d.ts +79 -0
  495. package/dist/v2/components/Tree/Tree.vue.d.ts +28 -0
  496. package/dist/v2/components/Tree/TreeNode.vue.d.ts +30 -0
  497. package/dist/v2/components/Tree/TreeNodeDefault.vue.d.ts +32 -0
  498. package/dist/v2/components/Tree/index.d.ts +2 -0
  499. package/dist/v2/utils/index.d.ts +2 -0
  500. package/dist/v2/utils/types.d.ts +44 -0
  501. package/package.json +1 -1
  502. package/src/components/N8nIcon/custom/discord.svg +1 -0
  503. package/src/index.ts +4 -1
  504. package/src/styleguide/colour.mdx +1 -1
  505. package/src/styleguide/css-tokens.mdx +1 -1
  506. package/src/styleguide/motion.mdx +1 -1
  507. package/src/styleguide/shadow.mdx +1 -1
  508. package/src/styleguide/spacing-size.mdx +1 -1
  509. package/src/styleguide/type.mdx +1 -1
  510. package/tsconfig.build.json +27 -0
  511. package/dist/design-system.css +0 -2
  512. package/dist/en-DkOeoXBZ.js +0 -2
  513. package/dist/n8n-design-system.es.js +0 -90675
  514. package/dist/n8n-design-system.umd.js +0 -328
  515. package/vite.config.mts +0 -75
  516. /package/dist/{emojiData-B2DmDStL.js → emojiData-DjghW_MV.js} +0 -0
  517. /package/dist/{lucideIconData-D_Sr0JOU.js → lucideIconData-B3lNk4Jv.js} +0 -0
  518. /package/dist/{node-icons-Cn_NF7qq.js → node-icons-C_zc8eJj.js} +0 -0
package/dist/css/_tokens.scss ADDED
@@ -0,0 +1,1264 @@
1
+ @use 'sass:math';
2
+ @use './tokens.legacy.scss' as tokens-legacy;
3
+
4
+ @mixin theme {
5
+ @include tokens-legacy.theme-legacy;
6
+ --background--brand: var(--color--orange-500);
7
+ --background--brand--hover: var(--color--orange-600);
8
+ --background--brand--active: var(--color--orange-700);
9
+ --background--brand--focus: var(--color--orange-400);
10
+ --background--brand--disabled: var(--color--neutral-200);
11
+
12
+ --background--surface: var(--color--neutral-white);
13
+ --background--subtle: var(--color--neutral-50);
14
+ --background--hover: var(--color--black-alpha-50);
15
+ --background--active: var(--color--black-alpha-100);
16
+ --background--focus: var(--color--black-alpha-100);
17
+ --background--disabled: var(--color--neutral-200);
18
+
19
+ /* stylelint-disable @n8n/css-var-naming */
20
+ --border-color: var(--border-color-base, var(--color--black-alpha-100));
21
+ /* stylelint-enable @n8n/css-var-naming */
22
+
23
+ --border-color--subtle: var(--color--black-alpha-50);
24
+ --border-color--strong: var(--color--black-alpha-200);
25
+ --border-color--stronger: var(--color--black-alpha-300);
26
+ --border: var(--border-width, 1px) var(--border-style, solid) var(--border-color);
27
+
28
+ --icon-color: var(--color--neutral-500);
29
+ --icon-color--subtle: var(--color--neutral-200);
30
+ --icon-color--strong: var(--color--neutral-800);
31
+
32
+ --text-color: var(--color--neutral-900);
33
+ --text-color--subtle: var(--color--neutral-700);
34
+ --text-color--subtler: var(--color--neutral-500);
35
+ --text-color--disabled: var(--color--neutral-400);
36
+
37
+ --background--success: var(--color--green-50);
38
+ --border-color--success: var(--color--green-200);
39
+ --text-color--success: var(--color--green-800);
40
+ --icon-color--success: var(--color--green-800);
41
+
42
+ --background--warning: var(--color--yellow-100);
43
+ --border-color--warning: var(--color--yellow-200);
44
+ --text-color--warning: var(--color--yellow-800);
45
+ --icon-color--warning: var(--color--yellow-800);
46
+
47
+ --background--danger: var(--color--red-50);
48
+ --border-color--danger: var(--color--red-200);
49
+ --text-color--danger: var(--color--red-800);
50
+ --icon-color--danger: var(--color--red-800);
51
+
52
+ --background--info: var(--color--blue-50);
53
+ --border-color--info: var(--color--blue-200);
54
+ --text-color--info: var(--color--blue-800);
55
+ --icon-color--info: var(--color--blue-800);
56
+
57
+ --background--inverse: var(--color--neutral-900);
58
+ --border-color--inverse: var(--color--neutral-700);
59
+ --text-color--inverse: var(--color--neutral-100);
60
+ --icon-color--inverse: var(--color--neutral-100);
61
+
62
+ --focus--border-width: 2px;
63
+ --focus--outline-color: var(--color--purple-alpha-200);
64
+ --focus--border-color: var(--color--purple-500);
65
+
66
+ // LangChain
67
+ --lm-chat--messages--color--background: var(--color--background);
68
+ --lm-chat--bot--color--background: var(--color--neutral-white);
69
+ --lm-chat--user--color--background: var(--color--green-600);
70
+ --lm-chat--user--color: var(--color--text--tint-3);
71
+
72
+ // Canvas
73
+ --canvas--color--background: var(--color--neutral-125);
74
+ --canvas--dot--color: var(--color--neutral-500);
75
+ --canvas--read-only-line--color: var(--color--neutral-200);
76
+ --canvas--color--selected: var(--color--neutral-150);
77
+ --canvas--color--selected-transparent: hsla(220, 47%, 30%, 0.1);
78
+ --canvas--label--color: var(--color--neutral-600);
79
+ --canvas--label--color--background: oklch(from var(--canvas--color--background) l c h / 0.85);
80
+
81
+ // Nodes
82
+ --node--color--background: var(--color--background--light-3);
83
+ --node--color--background--executing: var(--color--primary--tint-3);
84
+ --node--color--background--executing-1: var(--color--primary--tint-3);
85
+ --node--border-color--pinned: var(--color--secondary);
86
+ --node--border-color--running: var(--color--primary);
87
+ --node--type-main--color: var(--color--neutral-500);
88
+
89
+ // Sticky
90
+ --sticky--color--background: var(--color--yellow-100);
91
+ --sticky--border-color: var(--color--yellow-200);
92
+ --sticky--color--text: var(--color--neutral-850);
93
+ --sticky--code--color--text: var(--color--secondary);
94
+ --sticky--code--color--background: var(--color--background);
95
+
96
+ --sticky--color--background--variant-1: var(--sticky--color--background);
97
+ --sticky--border-color--variant-1: var(--sticky--border-color);
98
+ --sticky--color--background--variant-2: var(--color--gold-100);
99
+ --sticky--border-color--variant-2: var(--color--gold-300);
100
+ --sticky--color--background--variant-3: var(--color--red-100);
101
+ --sticky--border-color--variant-3: var(--color--red-250);
102
+ --sticky--color--background--variant-4: var(--color--green-100);
103
+ --sticky--border-color--variant-4: var(--color--green-300);
104
+ --sticky--color--background--variant-5: var(--color--blue-100);
105
+ --sticky--border-color--variant-5: var(--color--blue-200);
106
+ --sticky--color--background--variant-6: var(--color--purple-200);
107
+ --sticky--border-color--variant-6: var(--color--purple-300);
108
+ --sticky--color--background--variant-7: var(--color--neutral-100);
109
+ --sticky--border-color--variant-7: var(--color--neutral-200);
110
+
111
+ // AI Assistant
112
+ --assistant--button--color--background--gradient: linear-gradient(
113
+ var(--color--background--light-3),
114
+ var(--color--background--light-3)
115
+ );
116
+ --assistant--button--color--background--gradient--hover: linear-gradient(
117
+ var(--color--background--light-3),
118
+ var(--color--background--light-3)
119
+ );
120
+ --assistant--button--color--background--gradient--active: linear-gradient(
121
+ var(--color--background--light-3),
122
+ var(--color--background--light-3)
123
+ );
124
+
125
+ --assistant--color--highlight-1: #5b60e8;
126
+ --assistant--color--highlight-2: #aa7bec;
127
+ --assistant--color--highlight-3: #ec7b8e;
128
+ --assistant--color--highlight-gradient: linear-gradient(
129
+ 105deg,
130
+ var(--assistant--color--highlight-1) 0%,
131
+ var(--assistant--color--highlight-2) 50%,
132
+ var(--assistant--color--highlight-3) 100%
133
+ );
134
+ --assistant--color--highlight-gradient--reverse: linear-gradient(
135
+ 105deg,
136
+ var(--assistant--color--highlight-3) 0%,
137
+ var(--assistant--color--highlight-2) 50%,
138
+ var(--assistant--color--highlight-1) 100%
139
+ );
140
+
141
+ // AI Chat text and icon colors
142
+ --assistant--color--text--subtle: var(--color--neutral-500);
143
+ --assistant--icon-color--subtle: var(--color--neutral-500);
144
+ --assistant--color--text: var(--color--neutral-800);
145
+ --assistant--color--text--user-bubble: var(--color--neutral-750);
146
+ --assistant--color--background--user-bubble: var(--color--neutral-150);
147
+ --assistant--text-message--collapsed--max-height: 200px;
148
+
149
+ --assistant--button--color--background--hover: linear-gradient(
150
+ 108.82deg,
151
+ rgba(236, 123, 142, 0.12) 0%,
152
+ rgba(170, 123, 236, 0.12) 50.5%,
153
+ rgba(91, 96, 232, 0.12) 100%
154
+ );
155
+ --assistant--button--color--background--active: linear-gradient(
156
+ 108.82deg,
157
+ rgba(236, 123, 142, 0.25) 0%,
158
+ rgba(170, 123, 236, 0.25) 50.5%,
159
+ rgba(91, 96, 232, 0.25) 100%
160
+ );
161
+
162
+ // NodeIcon
163
+ --node--icon--color--neutral: var(--color--neutral-400);
164
+ --node--icon--color--gray: #7d7d87;
165
+ --node--icon--color--black: var(--color--neutral-800);
166
+ --node--icon--color--blue: #3a42e9;
167
+ --node--icon--color--light-blue: #5fabf7;
168
+ --node--icon--color--dark-blue: #353f6e;
169
+ --node--icon--color--sky-blue: #5699ff;
170
+ --node--icon--color--orange: #ff965a;
171
+ --node--icon--color--orange-red: var(--color--orange-500);
172
+ --node--icon--color--amber: #f92;
173
+ --node--icon--color--rust: #e44d26;
174
+ --node--icon--color--pink-red: #ea4b71;
175
+ --node--icon--color--magenta: #e91e63;
176
+ --node--icon--color--red: var(--color--red-600);
177
+ --node--icon--color--light-green: #31c4ab;
178
+ --node--icon--color--green: var(--color--mint-700);
179
+ --node--icon--color--dark-green: #157562;
180
+ --node--icon--color--emerald: #2fb67c;
181
+ --node--icon--color--forest-green: #4a4;
182
+ --node--icon--color--lime: #62f730;
183
+ --node--icon--color--azure: #54b8c9;
184
+ --node--icon--color--teal: #00b7bc;
185
+ --node--icon--color--purple: #539;
186
+ --node--icon--color--violet: #9b6dd5;
187
+ --node--icon--color--lavender: #8287eb;
188
+ --node--icon--color--crimson: #724;
189
+
190
+ // Expressions, autocomplete, infobox
191
+ --expression-editor--resolvable--color--foreground--valid: var(--color--green-600);
192
+ --expression-editor--resolvable--color--background--valid: var(--color--green-100);
193
+ --expression-editor--resolvable--color--foreground--invalid: var(--color--red-600);
194
+ --expression-editor--resolvable--color--background--invalid: var(--color--red-50);
195
+ --expression-editor--resolvable--color--foreground--pending: var(--color--text);
196
+ --expression-editor--resolvable--color--background--pending: var(--color--neutral-125);
197
+ --expression-editor--color--background: var(--color--neutral-white);
198
+ --expression-editor--modal--color--background: var(--color--background);
199
+ --expression-editor--syntax-example--color: var(--color--neutral-125);
200
+ --autocomplete--item--color--selected: var(--color--secondary);
201
+ --autocomplete--section-header--border-color: var(--color--foreground--tint-1);
202
+ --autocomplete--infobox--color--background: var(--color--background--light-1);
203
+ --autocomplete--infobox--examples--border-color: var(--color--foreground--tint-1);
204
+
205
+ // Code
206
+ --code-tags--string--color: #032f62;
207
+ --code-tags--regex--color: #032f62;
208
+ --code-tags--primitive--color: #005cc5;
209
+ --code-tags--keyword--color: #d73a49;
210
+ --code-tags--variable--color: #005cc5;
211
+ --code-tags--parameter--color: var(--color--neutral-850);
212
+ --code-tags--function--color: #6f42c1;
213
+ --code-tags--constant--color: #005cc5;
214
+ --code-tags--property--color: #005cc5;
215
+ --code-tags--type--color: #005cc5;
216
+ --code-tags--class--color: #6f42c1;
217
+ --code-tags--heading--color: #005cc5;
218
+ --code-tags--invalid--color: #cb2431;
219
+ --code-tags--comment--color: #6a737d;
220
+ --json--color: var(--color--purple-700);
221
+ --json--null--color: var(--color--red-600);
222
+ --json--boolean--color: var(--color--green-600);
223
+ --json--number--color: var(--color--green-600);
224
+ --json--string--color: var(--color--purple-700);
225
+ --json--key--color: var(--color--neutral-700);
226
+ --json--brackets--color: var(--color--neutral-700);
227
+ --json--brackets--color--hover: var(--color--blue-400);
228
+ --json--line--color: var(--color--neutral-250);
229
+ --json--highlight--color: var(--color--background);
230
+ --code--color--background: var(--color--neutral-white);
231
+ --code--color--background--readonly: var(--color--neutral-125);
232
+ --code--line-highlight--color: var(--color--neutral-300-alpha-100);
233
+ --code--color--foreground: var(--color--neutral-700);
234
+ --code--caret--color: var(--color--neutral-950);
235
+ --code--selection--color: #0366d625;
236
+ --code--selection--color--highlight: #34d05840;
237
+ --code--gutter--color--background: var(--color--neutral-white);
238
+ --code--gutter--color--foreground: var(--color--neutral-300);
239
+ --code--gutter--color--foreground--active: var(--color--neutral-700);
240
+ --code--indentation-marker--color: var(--color--neutral-150);
241
+ --code--indentation-marker--color--active: var(--color--neutral-250);
242
+ --line-break--color: var(--color--neutral-300);
243
+ --code--line-break--color: var(--color--purple-400);
244
+
245
+ // Tag
246
+ --tag--height: 20px;
247
+ --tag--padding: 0 var(--spacing--4xs);
248
+ --tag--color--background: var(--color--neutral-125);
249
+ --tag--color--background--hover: var(--color--neutral-150);
250
+ --tag--border-color: var(--color--neutral-150);
251
+ --tag--border-color--hover: var(--color--neutral-200);
252
+ --tag--radius: var(--radius);
253
+ --tag--color--text: var(--color--text);
254
+ --tag--font-size: var(--font-size--2xs);
255
+ --tag--font-weight: var(--font-weight--regular);
256
+ --tag--line-height: 0;
257
+
258
+ // Variables
259
+ --variables-usage--color--text: var(--color--success);
260
+ --variables-usage--syntax--color--background: var(--color--success--tint-4);
261
+
262
+ // Button primary
263
+ --button--color--text--primary: var(--color--neutral-white);
264
+ --button--border-color--primary: var(--color--orange-500);
265
+ --button--color--background--primary: var(--color--orange-500);
266
+ --button--border-color--primary--hover-active: var(--color--primary);
267
+ --button--color--background--primary--hover-active-focus: var(--color--primary);
268
+ --button--outline-color--primary--focus: var(--color--orange-alpha-300);
269
+ --button--color--text--primary--disabled: var(--color--white-alpha-800);
270
+ --button--border-color--primary--disabled: var(--color--orange-400);
271
+ --button--color--background--primary--disabled: var(--color--orange-400);
272
+
273
+ // Button secondary
274
+ --button--color--text--secondary: var(--color--neutral-700);
275
+ --button--border-color--secondary: var(--color--neutral-300);
276
+ --button--color--background--secondary: var(--color--neutral-white);
277
+ --button--color--text--secondary--hover-active-focus: var(--color--orange-500);
278
+ --button--border-color--secondary--hover-active-focus: var(--color--orange-600);
279
+ --button--color--background--secondary--hover: var(--color--orange-50);
280
+ --button--color--background--secondary--active-focus: var(--color--orange-100);
281
+ --button--outline-color--secondary--focus: var(--color--neutral-200);
282
+ --button--color--text--secondary--disabled: var(--color--neutral-250);
283
+ --button--border-color--secondary--disabled: var(--color--neutral-250);
284
+
285
+ // Button highlight
286
+ --button--color--text--highlight: var(--color--neutral-700);
287
+ --button--border-color--highlight: transparent;
288
+ --button--color--background--highlight: transparent;
289
+ --button--color--text--highlight--hover-active-focus: var(--color--orange-400);
290
+ --button--border-color--highlight--hover-active-focus: var(--color--neutral-125);
291
+ --button--color--background--highlight--hover: var(--color--neutral-125);
292
+ --button--color--background--highlight--active-focus: var(--color--neutral-125);
293
+ --button--outline-color--highlight--focus: var(--color--neutral-125);
294
+ --button--color--text--highlight--disabled: var(--color--neutral-200);
295
+ --button--border-color--highlight--disabled: transparent;
296
+ --button--color--background--highlight--disabled: transparent;
297
+
298
+ // Button highlight-fill
299
+ --button--color--text--highlight-fill: var(--color--text--shade-1);
300
+ --button--border-color--highlight-fill: transparent;
301
+ --button--color--background--highlight-fill: var(--color--background);
302
+ --button--color--text--highlight-fill--hover-active-focus: var(--color--primary);
303
+ --button--border-color--highlight-fill--hover-active-focus: transparent;
304
+ --button--color--background--highlight-fill--hover: var(--color--background);
305
+ --button--color--background--highlight-fill--active-focus: var(--color--background);
306
+ --button--outline-color--highlight-fill--focus: var(--color--neutral-125);
307
+ --button--color--text--highlight-fill--disabled: var(--color--neutral-200);
308
+ --button--border-color--highlight-fill--disabled: transparent;
309
+ --button--color--background--highlight-fill--disabled: var(--color--background);
310
+
311
+ // Button success, warning, danger
312
+ --button--color--text--success: var(--color--neutral-white);
313
+ --button--color--text--success--disabled: var(--color--white-alpha-800);
314
+ --button--color--text--warning: var(--color--text--tint-3);
315
+ --button--color--text--warning--disabled: var(--color--white-alpha-800);
316
+ --button--color--text--danger: var(--color--text--tint-3);
317
+ --button--border-color--danger: var(--color--danger);
318
+ --button--outline-color--danger--focus: var(--color--danger--tint-3);
319
+ --button--color--text--danger--disabled: var(--color--white-alpha-800);
320
+ --button--border-color--danger--disabled: var(--color--danger--tint-3);
321
+ --button--color--background--danger--disabled: var(--color--danger--tint-3);
322
+
323
+ // Text button
324
+ --text-button--color--text--secondary: var(--color--neutral-700);
325
+
326
+ // Node Creator Button
327
+ --node-creator--button--color--text: var(--color--neutral-600);
328
+ --node-creator--button--color--text--hover: var(--color--orange-500);
329
+ --node-creator--button--border-color--hover: var(--color--orange-500);
330
+ --node-creator--button--color--background: var(--color--neutral-white);
331
+
332
+ // Table
333
+ --table--header--color--background: var(--color--background);
334
+ --table--row--color--background: var(--color--background--light-3);
335
+ --table--row--color--background--even: var(--color--background--light-2);
336
+ --table--row--color--background--hover: var(--color--primary--tint-3);
337
+ --table--row--color--background--highlight: var(--color--warning--tint-1);
338
+
339
+ // Notification
340
+ --notification--color--background: var(--color--background--light-3);
341
+
342
+ // Execution
343
+ --execution-card--border-color--new: var(--color--neutral-250);
344
+ --execution-card--border-color--success: var(--color--green-300);
345
+ --execution-card--border-color--error: var(--color--red-300);
346
+ --execution-card--border-color--waiting: var(--color--purple-300);
347
+ --execution-card--border-color--running: var(--color--gold-200);
348
+ --execution-card--border-color--unknown: var(--color--neutral-200);
349
+ --execution-card--color--background: var(--color--foreground--tint-2);
350
+ --execution-card--color--background--hover: var(--color--foreground--tint-1);
351
+ --execution-card--color--text--waiting: var(--color--secondary);
352
+ --execution-selector--color--background: var(--color--background--shade-2);
353
+ --execution-selector--color--text: var(--color--text--tint-3);
354
+ --execution-select-all--color--text: var(--color--danger);
355
+
356
+ // NDV
357
+ --run-data--color--background: var(--color--neutral-150);
358
+ --ndv--run-data--color--background: var(--color--neutral-125);
359
+ --ndv--droppable-parameter--color: var(--color--secondary);
360
+ --ndv--droppable-parameter--color--background: var(--color--purple-alpha-100);
361
+ --ndv--droppable-parameter--color--background--active: var(--color--green-alpha-100);
362
+ --ndv--back--color--text: var(--color--neutral-white);
363
+ --ndv--background--color: var(--color--background--light-3);
364
+
365
+ // Notice
366
+ --notice--border-color--warning: var(--color--warning--tint-1);
367
+ --notice--color--background--warning: var(--color--warning--tint-2);
368
+ --notice--color--text: var(--color--text);
369
+
370
+ // Callout
371
+ --callout--border-color--info: var(--color--foreground);
372
+ --callout--color--background--info: var(--color--foreground--tint-2);
373
+ --callout--color--text--info: var(--color--text);
374
+ --callout--icon-color--info: var(--color--text--tint-1);
375
+ --callout--border-color--success: var(--color--success--tint-2);
376
+ --callout--color--background--success: var(--color--success--tint-4);
377
+ --callout--color--text--success: var(--color--success);
378
+ --callout--icon-color--success: var(--color--success);
379
+ --callout--border-color--warning: var(--color--warning--tint-1);
380
+ --callout--color--background--warning: var(--color--warning--tint-2);
381
+ --callout--color--text--warning: var(--color--warning);
382
+ --callout--icon-color--warning: var(--color--warning);
383
+ --callout--border-color--danger: var(--color--danger--tint-3);
384
+ --callout--color--background--danger: var(--color--danger--tint-4);
385
+ --callout--color--text--danger: var(--color--danger);
386
+ --callout--icon-color--danger: var(--color--danger);
387
+ --callout--border-color--secondary: var(--color--secondary--tint-1);
388
+ --callout--color--background--secondary: var(--color--secondary--tint-2);
389
+ --callout--color--text--secondary: var(--color--secondary);
390
+ --callout--icon-color--secondary: var(--color--secondary);
391
+
392
+ // Dialogs and overlays
393
+ --dialog--color--background: var(--color--neutral-white);
394
+ --dialog--overlay--color--background: var(--color--white-alpha-800);
395
+ --dialog--overlay--color--background--dark: var(--color--black-alpha-600);
396
+ --block-ui--overlay--color: var(--color--neutral-950);
397
+
398
+ // Avatar
399
+ --avatar--color--text: var(--color--text--tint-3);
400
+
401
+ // NPS Survey
402
+ --nps-survey--color--background: var(--color--neutral-850);
403
+ --nps-survey--color--text: var(--color--neutral-white);
404
+
405
+ // Action Dropdown
406
+ --action-dropdown--item--color--background--active: var(--color--background);
407
+
408
+ // Switch (Activation, boolean)
409
+ --switch--color--background: var(--color--neutral-400);
410
+ --switch--color--background--active: var(--color--green-500);
411
+ --switch--border-color: transparent;
412
+ --switch--toggle--color: var(--color--neutral-white);
413
+
414
+ // Feature Request
415
+ --feature-request--color--text: var(--color--neutral-white);
416
+
417
+ // Input Triple
418
+ --input-triple--color--background: var(--color--background--light-2);
419
+
420
+ // Node error
421
+ --node--error-output--color--text: var(--color--danger);
422
+
423
+ // MFA Recovery codes
424
+ --mfa--recovery-code--color--background: var(--color--background);
425
+ --mfa--recovery-code--color: var(--color--neutral-500);
426
+ --mfa--lose-access--color--text: var(--color--danger);
427
+
428
+ // Text highlight
429
+ --text-highlight--color--background: var(--color--yellow-200);
430
+
431
+ // MFA Modal
432
+ --qr-code--border-color: var(--color--neutral-50);
433
+
434
+ // AI
435
+ --node-type--color--background--l: 95%;
436
+ --node-type--supplemental--label--color--h: 235;
437
+ --node-type--supplemental--label--color--s: 28%;
438
+ --node-type--supplemental--label--color--l: 40%;
439
+ --node-type--supplemental--color--h: 235;
440
+ --node-type--supplemental--color--s: 28%;
441
+ --node-type--supplemental--color--l: 60%;
442
+ --node-type--supplemental--label--color: hsl(
443
+ var(--node-type--supplemental--label--color--h),
444
+ var(--node-type--supplemental--label--color--s),
445
+ var(--node-type--supplemental--label--color--l)
446
+ );
447
+ --node-type--supplemental--icon--color: var(--color--foreground--shade-1);
448
+ --node-type--supplemental--color: hsl(
449
+ var(--node-type--supplemental--color--h),
450
+ var(--node-type--supplemental--color--s),
451
+ var(--node-type--supplemental--color--l)
452
+ );
453
+ --node-type--supplemental--color--background: hsl(
454
+ var(--node-type--supplemental--color--h),
455
+ var(--node-type--supplemental--color--s),
456
+ var(--node-type--color--background--l)
457
+ );
458
+ --node-type--supplemental--connector--color: var(--color--foreground--shade-1);
459
+ --node-type--ai-chain--color--h: var(--node-type--supplemental--color--h);
460
+ --node-type--ai-chain--color--s: var(--node-type--supplemental--color--s);
461
+ --node-type--ai-chain--color--l: var(--node-type--supplemental--color--l);
462
+ --node-type--ai-chain--color: hsl(
463
+ var(--node-type--ai-chain--color--h),
464
+ var(--node-type--ai-chain--color--s),
465
+ var(--node-type--ai-chain--color--l)
466
+ );
467
+ --node-type--chain--color--background: hsl(
468
+ var(--node-type--ai-chain--color--h),
469
+ var(--node-type--ai-chain--color--s),
470
+ var(--node-type--color--background--l)
471
+ );
472
+ --node-type--ai-document--color--h: var(--node-type--supplemental--color--h);
473
+ --node-type--ai-document--color--s: var(--node-type--supplemental--color--s);
474
+ --node-type--ai-document--color--l: var(--node-type--supplemental--color--l);
475
+ --node-type--ai-document--color: hsl(
476
+ var(--node-type--ai-document--color--h),
477
+ var(--node-type--ai-document--color--s),
478
+ var(--node-type--ai-document--color--l)
479
+ );
480
+ --node-type--ai-document--color--background: hsl(
481
+ var(--node-type--ai-document--color--h),
482
+ var(--node-type--ai-document--color--s),
483
+ var(--node-type--color--background--l)
484
+ );
485
+ --node-type--ai-embedding--color--h: var(--node-type--supplemental--color--h);
486
+ --node-type--ai-embedding--color--s: var(--node-type--supplemental--color--s);
487
+ --node-type--ai-embedding--color--l: var(--node-type--supplemental--color--l);
488
+ --node-type--ai-embedding--color: hsl(
489
+ var(--node-type--ai-embedding--color--h),
490
+ var(--node-type--ai-embedding--color--s),
491
+ var(--node-type--ai-embedding--color--l)
492
+ );
493
+ --node-type--ai-embedding--color--background: hsl(
494
+ var(--node-type--ai-embedding--color--h),
495
+ var(--node-type--ai-embedding--color--s),
496
+ var(--node-type--color--background--l)
497
+ );
498
+ --node-type--ai-language-model--color--h: var(--node-type--supplemental--color--h);
499
+ --node-type--ai-language-model--color--s: var(--node-type--supplemental--color--s);
500
+ --node-type--ai-language-model--color--l: var(--node-type--supplemental--color--l);
501
+ --node-type--ai-language-model--color: hsl(
502
+ var(--node-type--ai-language-model--color--h),
503
+ var(--node-type--ai-language-model--color--s),
504
+ var(--node-type--ai-language-model--color--l)
505
+ );
506
+ --node-type--ai-language-model--color--background: hsl(
507
+ var(--node-type--ai-language-model--color--h),
508
+ var(--node-type--ai-language-model--color--s),
509
+ var(--node-type--color--background--l)
510
+ );
511
+ --node-type--ai-memory--color--h: var(--node-type--supplemental--color--h);
512
+ --node-type--ai-memory--color--s: var(--node-type--supplemental--color--s);
513
+ --node-type--ai-memory--color--l: var(--node-type--supplemental--color--l);
514
+ --node-type--ai-memory--color: hsl(
515
+ var(--node-type--ai-memory--color--h),
516
+ var(--node-type--ai-memory--color--s),
517
+ var(--node-type--ai-memory--color--l)
518
+ );
519
+ --node-type--ai-memory--color--background: hsl(
520
+ var(--node-type--ai-memory--color--h),
521
+ var(--node-type--ai-memory--color--s),
522
+ var(--node-type--color--background--l)
523
+ );
524
+ --node-type--ai-output-parser--color--h: var(--node-type--supplemental--color--h);
525
+ --node-type--ai-output-parser--color--s: var(--node-type--supplemental--color--s);
526
+ --node-type--ai-output-parser--color--l: var(--node-type--supplemental--color--l);
527
+ --node-type--ai-output-parser--color: hsl(
528
+ var(--node-type--ai-output-parser--color--h),
529
+ var(--node-type--ai-output-parser--color--s),
530
+ var(--node-type--ai-output-parser--color--l)
531
+ );
532
+ --node-type--ai-output-parser--color--background: hsl(
533
+ var(--node-type--ai-output-parser--color--h),
534
+ var(--node-type--ai-output-parser--color--s),
535
+ var(--node-type--color--background--l)
536
+ );
537
+ --node-type--ai-tool--color--h: var(--node-type--supplemental--color--h);
538
+ --node-type--ai-tool--color--s: var(--node-type--supplemental--color--s);
539
+ --node-type--ai-tool--color--l: var(--node-type--supplemental--color--l);
540
+ --node-type--ai-tool--color: hsl(
541
+ var(--node-type--ai-tool--color--h),
542
+ var(--node-type--ai-tool--color--s),
543
+ var(--node-type--ai-tool--color--l)
544
+ );
545
+ --node-type--ai-tool--color--background: hsl(
546
+ var(--node-type--ai-tool--color--h),
547
+ var(--node-type--ai-tool--color--s),
548
+ var(--node-type--color--background--l)
549
+ );
550
+ --node-type--ai-retriever--color--h: var(--node-type--supplemental--color--h);
551
+ --node-type--ai-retriever--color--s: var(--node-type--supplemental--color--s);
552
+ --node-type--ai-retriever--color--l: var(--node-type--supplemental--color--l);
553
+ --node-type--ai-retriever--color: hsl(
554
+ var(--node-type--ai-retriever--color--h),
555
+ var(--node-type--ai-retriever--color--s),
556
+ var(--node-type--ai-retriever--color--l)
557
+ );
558
+ --node-type--ai-retriever--color--background: hsl(
559
+ var(--node-type--ai-retriever--color--h),
560
+ var(--node-type--ai-retriever--color--s),
561
+ var(--node-type--color--background--l)
562
+ );
563
+ --node-type--ai-text-splitter--color--h: var(--node-type--supplemental--color--h);
564
+ --node-type--ai-text-splitter--color--s: var(--node-type--supplemental--color--s);
565
+ --node-type--ai-text-splitter--color--l: var(--node-type--supplemental--color--l);
566
+ --node-type--ai-text-splitter--color: hsl(
567
+ var(--node-type--ai-text-splitter--color--h),
568
+ var(--node-type--ai-text-splitter--color--s),
569
+ var(--node-type--ai-text-splitter--color--l)
570
+ );
571
+ --node-type--ai-text-splitter--color--background: hsl(
572
+ var(--node-type--ai-text-splitter--color--h),
573
+ var(--node-type--ai-text-splitter--color--s),
574
+ var(--node-type--color--background--l)
575
+ );
576
+ --node-type--ai-vector-retriever--color--h: var(--node-type--supplemental--color--h);
577
+ --node-type--ai-vector-retriever--color--s: var(--node-type--supplemental--color--s);
578
+ --node-type--ai-vector-retriever--color--l: var(--node-type--supplemental--color--l);
579
+ --node-type--ai-vector-retriever--color: hsl(
580
+ var(--node-type--ai-vector-retriever--color--h),
581
+ var(--node-type--ai-vector-retriever--color--s),
582
+ var(--node-type--ai-vector-retriever--color--l)
583
+ );
584
+ --node-type--ai-vector-retriever--color--background: hsl(
585
+ var(--node-type--ai-vector-retriever--color--h),
586
+ var(--node-type--ai-vector-retriever--color--s),
587
+ var(--node-type--color--background--l)
588
+ );
589
+ --node-type--ai-vector-store--color--h: var(--node-type--supplemental--color--h);
590
+ --node-type--ai-vector-store--color--s: var(--node-type--supplemental--color--s);
591
+ --node-type--ai-vector-store--color--l: var(--node-type--supplemental--color--l);
592
+ --node-type--ai-vector-store--color: hsl(
593
+ var(--node-type--ai-vector-store--color--h),
594
+ var(--node-type--ai-vector-store--color--s),
595
+ var(--node-type--ai-vector-store--color--l)
596
+ );
597
+ --node-type--ai-vector-store--color--background: hsl(
598
+ var(--node-type--ai-vector-store--color--h),
599
+ var(--node-type--ai-vector-store--color--s),
600
+ var(--node-type--color--background--l)
601
+ );
602
+
603
+ // Diff colors
604
+ --diff--color--new: #0eab54;
605
+ --diff--color--new--light: #b4efc4;
606
+ --diff--color--new--faint: #ddfbe7;
607
+ --diff--color--modified: #bf941f;
608
+ --diff--color--modified--light: #f3dca1;
609
+ --diff--color--modified--faint: var(--color--yellow-100);
610
+ --diff--color--deleted: #f51f32;
611
+ --diff--color--deleted--light: var(--color--red-200);
612
+ --diff--color--deleted--faint: var(--color--red-50);
613
+
614
+ // Various
615
+ --avatar--color--accent-1: var(--color--neutral-200);
616
+ --avatar--color--accent-2: var(--color--blue-500);
617
+ --color--info: var(--color--neutral-400);
618
+ --color--info--tint-1: var(--color--neutral-200);
619
+ --color--info--tint-2: var(--color--neutral-125);
620
+ --color--neutral: var(--color--neutral-250);
621
+ --color--neutral--light: var(--color--neutral-200);
622
+ --node--configurable-name--color: var(--color--text--shade-1);
623
+ --link--color--secondary: var(--color--secondary);
624
+ --link--color--secondary--hover: var(--color--secondary--shade-1);
625
+
626
+ // Menu
627
+ --menu--color--background: var(--color--neutral-white);
628
+ --menu--color--background--hover: var(--color--neutral-200);
629
+ --menu--color--background--active: var(--color--neutral-200);
630
+
631
+ // Params
632
+ --icon--color: var(--color--text--tint-1);
633
+ --icon--color--hover: var(--color--orange-600);
634
+
635
+ /* Ag Grid */
636
+ --grid--row--color--background--selected: var(--color--purple-200);
637
+ --grid--cell--border-color--editing: 2px solid var(--color--secondary);
638
+
639
+ --command-bar-item--color--background--hover: var(--color--background);
640
+ --command-bar-item--height: 40px;
641
+ --command-bar--shadow:
642
+ 0 15px 45px 0 var(--color--black-alpha-200), 0 5px 10px 0 var(--color--black-alpha-200);
643
+
644
+ // Animation
645
+ --animation--duration: var(--duration--base);
646
+ --animation--duration--snappy: var(--duration--snappy);
647
+ --animation--easing: var(--easing--ease-out);
648
+ }
649
+
650
+ @mixin theme-dark {
651
+ @include tokens-legacy.theme-dark-legacy;
652
+
653
+ --background--brand: var(--color--orange-500);
654
+ --background--brand--hover: var(--color--orange-600);
655
+ --background--brand--active: var(--color--orange-700);
656
+ --background--brand--focus: var(--color--orange-400);
657
+ --background--brand--disabled: var(--color--neutral-800);
658
+
659
+ --background--surface: var(--color--neutral-900);
660
+ --background--subtle: var(--color--neutral-800);
661
+ --background--hover: var(--color--white-alpha-100);
662
+ --background--active: var(--color--white-alpha-150);
663
+ --background--focus: var(--color--white-alpha-150);
664
+ --background--disabled: var(--color--neutral-800);
665
+
666
+ /* stylelint-disable @n8n/css-var-naming */
667
+ --border-color: var(--border-color-base, var(--color--white-alpha-100));
668
+ /* stylelint-enable @n8n/css-var-naming */
669
+ --border-color--subtle: var(--color--white-alpha-50);
670
+ --border-color--strong: var(--color--white-alpha-200);
671
+ --border-color--stronger: var(--color--white-alpha-400);
672
+
673
+ --icon-color--subtle: var(--color--neutral-600);
674
+ --icon-color: var(--color--neutral-300);
675
+ --icon-color--strong: var(--color--neutral-white);
676
+
677
+ --text-color: var(--color--neutral-white);
678
+ --text-color--subtle: var(--color--neutral-200);
679
+ --text-color--subtler: var(--color--neutral-400);
680
+ --text-color--disabled: var(--color--neutral-600);
681
+
682
+ --background--success: var(--color--green-950);
683
+ --border-color--success: var(--color--green-800);
684
+ --text-color--success: var(--color--green-50);
685
+ --icon-color--success: var(--color--green-50);
686
+
687
+ --background--warning: var(--color--yellow-900);
688
+ --border-color--warning: var(--color--yellow-800);
689
+ --text-color--warning: var(--color--yellow-100);
690
+ --icon-color--warning: var(--color--yellow-100);
691
+
692
+ --background--danger: var(--color--red-950);
693
+ --border-color--danger: var(--color--red-800);
694
+ --text-color--danger: var(--color--red-50);
695
+ --icon-color--danger: var(--color--red-50);
696
+
697
+ --background--info: var(--color--blue-900);
698
+ --border-color--info: var(--color--blue-800);
699
+ --text-color--info: var(--color--blue-50);
700
+ --icon-color--info: var(--color--blue-50);
701
+
702
+ --background--inverse: var(--color--neutral-white);
703
+ --border-color--inverse: var(--color--neutral-200);
704
+ --text-color--inverse: var(--color--neutral-800);
705
+ --icon-color--inverse: var(--color--neutral-800);
706
+
707
+ // AI Assistant
708
+ --assistant--color--highlight-1: #8c90f2;
709
+ --assistant--color--highlight-2: #a977f0;
710
+ --assistant--color--highlight-3: #f0778b;
711
+ --assistant--button--color--background--gradient: linear-gradient(
712
+ var(--color--neutral-850),
713
+ var(--color--neutral-850)
714
+ );
715
+ --assistant--button--color--background--gradient--hover: linear-gradient(#383839, #383839);
716
+ --assistant--button--color--background--gradient--active: linear-gradient(
717
+ var(--color--neutral-750),
718
+ var(--color--neutral-750)
719
+ );
720
+ --assistant--button--color--background--hover: var(
721
+ --assistant--button--color--background--gradient--hover
722
+ );
723
+ --assistant--button--color--background--active: var(
724
+ --assistant--button--color--background--gradient--active
725
+ );
726
+
727
+ --assistant--color--highlight-gradient: linear-gradient(
728
+ 105deg,
729
+ var(--assistant--color--highlight-1) 0%,
730
+ var(--assistant--color--highlight-2) 50%,
731
+ var(--assistant--color--highlight-3) 100%
732
+ );
733
+ --assistant--color--highlight-gradient--reverse: linear-gradient(
734
+ 105deg,
735
+ var(--assistant--color--highlight-3) 0%,
736
+ var(--assistant--color--highlight-2) 50%,
737
+ var(--assistant--color--highlight-1) 100%
738
+ );
739
+
740
+ // AI Chat text and icon colors
741
+ --assistant--color--text--subtle: var(--color--neutral-250);
742
+ --assistant--icon-color--subtle: var(--color--neutral-250);
743
+ --assistant--color--text: var(--color--neutral-white);
744
+ --assistant--color--text--user-bubble: var(--color--blue-50);
745
+ --assistant--color--background--user-bubble: var(--color--neutral-800);
746
+
747
+ // LangChain
748
+ --lm-chat--messages--color--background: var(--color--neutral-950);
749
+ --lm-chat--bot--color--background: var(--color--neutral-850);
750
+ --lm-chat--bot--border-color: var(--color--neutral-500);
751
+ --lm-chat--user--color--background: var(--color--green-700);
752
+ --lm-chat--user--border-color: var(--color--green-600);
753
+
754
+ // Canvas
755
+ --canvas--color--background: var(--color--neutral-950);
756
+ --canvas--dot--color: var(--color--neutral-700);
757
+ --canvas--read-only-line--color: var(--color--neutral-900);
758
+ --canvas--color--selected: var(--color--white-alpha-400);
759
+ --canvas--color--selected-transparent: var(--canvas--color--selected);
760
+ --canvas--label--color: var(--color--neutral-500);
761
+ --canvas--label--color--background: oklch(from var(--canvas--color--background) l c h / 0.85);
762
+
763
+ // Nodes
764
+ --node--color--background: var(--color--neutral-850);
765
+ --node--color--background--executing: var(--color--neutral-700);
766
+ --node--color--background--executing-1: var(--color--neutral-700);
767
+ --node--border-color--pinned: var(--color--purple-500);
768
+ --node--type-main--color: var(--color--neutral-400);
769
+
770
+ // Sticky
771
+ --sticky--color--background: var(--color--yellow-900);
772
+ --sticky--border-color: var(--color--yellow-800);
773
+ --sticky--color--text: var(--color--neutral-125);
774
+ --sticky--code--color--text: var(--color--purple-300);
775
+ --sticky--code--color--background: var(--color--neutral-150-alpha-100);
776
+
777
+ --sticky--color--background--variant-1: var(--color--yellow-900);
778
+ --sticky--border-color--variant-1: var(--color--yellow-800);
779
+ --sticky--color--background--variant-2: var(--color--gold-900);
780
+ --sticky--border-color--variant-2: var(--color--gold-800);
781
+ --sticky--color--background--variant-3: var(--color--red-950);
782
+ --sticky--border-color--variant-3: var(--color--red-900);
783
+ --sticky--color--background--variant-4: var(--color--green-950);
784
+ --sticky--border-color--variant-4: var(--color--green-900);
785
+ --sticky--color--background--variant-5: var(--color--blue-900);
786
+ --sticky--border-color--variant-5: var(--color--blue-800);
787
+ --sticky--color--background--variant-6: var(--color--purple-950);
788
+ --sticky--border-color--variant-6: var(--color--purple-800);
789
+ --sticky--color--background--variant-7: var(--color--neutral-900);
790
+ --sticky--border-color--variant-7: var(--color--neutral-800);
791
+
792
+ // NodeIcon
793
+ --node--icon--color--neutral: var(--color--neutral-200);
794
+ --node--icon--color--gray: #a5a5ad;
795
+ --node--icon--color--black: var(--color--neutral-200);
796
+ --node--icon--color--blue: #898fff;
797
+ --node--icon--color--light-blue: #58abff;
798
+ --node--icon--color--dark-blue: #7ba7ff;
799
+ --node--icon--color--sky-blue: #7fb3ff;
800
+ --node--icon--color--orange: #ffb080;
801
+ --node--icon--color--orange-red: var(--color--orange-500);
802
+ --node--icon--color--amber: #ffb966;
803
+ --node--icon--color--rust: #f75;
804
+ --node--icon--color--pink-red: #f85d82;
805
+ --node--icon--color--magenta: #ff4d80;
806
+ --node--icon--color--red: var(--color--red-400);
807
+ --node--icon--color--light-green: #20b69e;
808
+ --node--icon--color--green: var(--color--green-500);
809
+ --node--icon--color--dark-green: #86decc;
810
+ --node--icon--color--emerald: #50d499;
811
+ --node--icon--color--forest-green: #6c6;
812
+ --node--icon--color--lime: #7fff55;
813
+ --node--icon--color--azure: #7dd6e3;
814
+ --node--icon--color--teal: #33d6db;
815
+ --node--icon--color--purple: #9b6dd5;
816
+ --node--icon--color--violet: #b48de6;
817
+ --node--icon--color--lavender: #a8acff;
818
+ --node--icon--color--crimson: #f188a2;
819
+
820
+ // Expressions, autocomplete, infobox
821
+ --expression-editor--resolvable--color--foreground--valid: var(--color--green-300);
822
+ --expression-editor--resolvable--color--background--valid: var(--color--green-alpha-200);
823
+ --expression-editor--resolvable--color--foreground--invalid: var(--color--red-300);
824
+ --expression-editor--resolvable--color--background--invalid: var(--color--red-alpha-020);
825
+ --expression-editor--resolvable--color--foreground--pending: var(--color--text);
826
+ --expression-editor--resolvable--color--background--pending: var(--color--neutral-150-alpha-100);
827
+ --expression-editor--color--background: var(--color--neutral-900);
828
+ --expression-editor--modal--color--background: var(--color--neutral-900);
829
+ --expression-editor--syntax-example--color: var(--color--neutral-700);
830
+ --autocomplete--item--color--selected: var(--color--purple-400);
831
+ --autocomplete--section-header--border-color: var(--color--neutral-600);
832
+ --autocomplete--infobox--color--background: var(--color--neutral-900);
833
+ --autocomplete--infobox--examples--border-color: var(--color--neutral-700);
834
+
835
+ // Code
836
+ --code-tags--string--color: #9ecbff;
837
+ --code-tags--regex--color: #9ecbff;
838
+ --code-tags--primitive--color: #79b8ff;
839
+ --code-tags--keyword--color: #f97583;
840
+ --code-tags--variable--color: #79b8ff;
841
+ --code-tags--parameter--color: var(--color--slate-100);
842
+ --code-tags--function--color: #b392f0;
843
+ --code-tags--constant--color: #79b8ff;
844
+ --code-tags--property--color: #79b8ff;
845
+ --code-tags--type--color: #b392f0;
846
+ --code-tags--class--color: #b392f0;
847
+ --code-tags--heading--color: #79b8ff;
848
+ --code-tags--invalid--color: #f97583;
849
+ --code-tags--comment--color: #6a737d;
850
+ --json--color: var(--color--purple-400);
851
+ --json--null--color: var(--color--danger);
852
+ --json--boolean--color: var(--color--green-600);
853
+ --json--number--color: var(--color--green-600);
854
+ --json--string--color: var(--color--purple-400);
855
+ --json--key--color: var(--color--text--shade-1);
856
+ --json--brackets--color: var(--color--neutral-700);
857
+ --json--brackets--color--hover: var(--color--blue-400);
858
+ --json--line--color: var(--color--neutral-250);
859
+ --json--highlight--color: var(--color--background);
860
+ --code--color--background: var(--color--neutral-950);
861
+ --code--color--background--readonly: var(--color--neutral-850);
862
+ --code--line-highlight--color: var(--color--neutral-300-alpha-100);
863
+ --code--color--foreground: var(--color--neutral-150);
864
+ --code--caret--color: var(--color--neutral-50);
865
+ --code--selection--color: #3392ff44;
866
+ --code--selection--color--highlight: #17e5e633;
867
+ --code--gutter--color--background: var(--color--neutral-950);
868
+ --code--gutter--color--foreground: var(--color--neutral-300);
869
+ --code--gutter--color--foreground--active: var(--color--neutral-50);
870
+ --code--indentation-marker--color: var(--color--neutral-850);
871
+ --code--indentation-marker--color--active: var(--color--neutral-700);
872
+ --line-break--color: var(--color--neutral-400);
873
+ --code--line-break--color: var(--color--purple-500);
874
+
875
+ // Tag
876
+ --tag--color--background: var(--color--neutral-700);
877
+ --tag--color--background--hover: var(--color--neutral-600);
878
+ --tag--border-color: var(--color--neutral-800);
879
+ --tag--border-color--hover: var(--color--neutral-700);
880
+ --tag--color--text: var(--color--text--shade-1);
881
+
882
+ // Variables
883
+ --variables-usage--color--text: var(--color--green-300);
884
+ --variables-usage--syntax--color--background: var(--color--green-alpha-200);
885
+
886
+ // Button primary
887
+ --button--outline-color--primary--focus: var(--color--orange-alpha-300);
888
+ --button--color--text--primary--disabled: var(--color--white-alpha-500);
889
+ --button--border-color--primary--disabled: transparent;
890
+ --button--color--background--primary--disabled: var(--color--orange-alpha-500);
891
+
892
+ // Button secondary
893
+ --button--color--text--secondary: var(--color--neutral-150);
894
+ --button--border-color--secondary: var(--color--foreground);
895
+ --button--color--background--secondary: var(--color--background--light-2);
896
+ --button--color--text--secondary--hover-active-focus: var(--color--orange-250);
897
+ --button--color--background--secondary--hover: var(--color--background--light-2);
898
+ --button--color--background--secondary--active-focus: var(--color--orange-alpha-100);
899
+ --button--outline-color--secondary--focus: var(--color--orange-alpha-300);
900
+ --button--color--text--secondary--disabled: var(--color--white-alpha-500);
901
+ --button--border-color--secondary--disabled: var(--color--foreground);
902
+
903
+ // Button highlight
904
+ --button--color--text--highlight: var(--color--neutral-300);
905
+ --button--border-color--highlight: transparent;
906
+ --button--color--background--highlight: transparent;
907
+ --button--color--text--highlight--hover-active-focus: var(--color--orange-400);
908
+ --button--border-color--highlight--hover-active-focus: var(--color--neutral-700);
909
+ --button--color--background--highlight--hover: var(--color--neutral-700);
910
+ --button--color--background--highlight--active-focus: var(--color--neutral-700);
911
+ --button--outline-color--highlight--focus: var(--color--neutral-700);
912
+ --button--color--text--highlight--disabled: var(--color--neutral-600);
913
+ --button--border-color--highlight--disabled: transparent;
914
+
915
+ // Button highlight-fill
916
+ --button--color--text--highlight-fill: var(--color--text--shade-1);
917
+ --button--border-color--highlight-fill: transparent;
918
+ --button--color--background--highlight-fill: var(--color--background);
919
+ --button--color--text--highlight-fill--hover-active-focus: var(--color--primary);
920
+ --button--border-color--highlight-fill--hover-active-focus: transparent;
921
+ --button--color--background--highlight-fill--hover: var(--color--background);
922
+ --button--color--background--highlight-fill--active-focus: var(--color--background);
923
+ --button--outline-color--highlight-fill--focus: var(--color--neutral-700);
924
+ --button--color--text--highlight-fill--disabled: var(--color--neutral-600);
925
+ --button--border-color--highlight-fill--disabled: transparent;
926
+ --button--color--background--highlight-fill--disabled: var(--color--background);
927
+
928
+ // Button success, warning, danger
929
+ --button--color--text--danger: var(--color--neutral-white);
930
+ --button--border-color--danger: transparent;
931
+ --button--outline-color--danger--focus: var(--color--red-300);
932
+ --button--color--text--danger--disabled: var(--color--white-alpha-400);
933
+ --button--border-color--danger--disabled: transparent;
934
+ --button--color--background--danger--disabled: var(--color--red-alpha-020);
935
+
936
+ // Text button
937
+ --text-button--color--text--secondary: var(--color--neutral-300);
938
+
939
+ // Node Creator Button
940
+ --node-creator--button--color--text: var(--button--color--text--secondary);
941
+ --node-creator--button--color--text--hover: var(
942
+ --button--color--text--secondary--hover-active-focus
943
+ );
944
+ --node-creator--button--border-color--hover: var(--color--orange-500);
945
+ --node-creator--button--color--background: var(--color--orange-alpha-100);
946
+
947
+ // Table
948
+ --table--header--color--background: var(--color--neutral-850);
949
+ --table--row--color--background: var(--color--neutral-950);
950
+ --table--row--color--background--even: var(--color--neutral-900);
951
+ --table--row--color--background--hover: var(--color--neutral-850);
952
+ --table--row--color--background--highlight: var(--color--warning--tint-1);
953
+
954
+ // Notification
955
+ --notification--color--background: var(--color--neutral-850);
956
+
957
+ // Execution
958
+ --execution-card--color--background: var(--color--foreground--tint-1);
959
+ --execution-card--color--background--hover: var(--color--foreground);
960
+ --execution-selector--color--background: var(--color--background--shade-2);
961
+ --execution-selector--color--text: var(--color--text--tint-3);
962
+ --execution-select-all--color--text: var(--color--text);
963
+ --execution-card--color--text--waiting: var(--color--purple-500);
964
+
965
+ // NDV
966
+ --run-data--color--background: var(--color--neutral-900);
967
+ --ndv--run-data--color--background: var(--color--neutral-900);
968
+ --ndv--droppable-parameter--color: var(--color--orange-500);
969
+ --ndv--droppable-parameter--color--background: var(--color--orange-alpha-100);
970
+ --ndv--droppable-parameter--color--background--active: var(--color--green-alpha-100);
971
+ --ndv--back--color--text: var(--color--neutral-white);
972
+ --ndv--background--color: var(--color--background--light-1);
973
+
974
+ // Notice
975
+ --notice--border-color--warning: var(--color--gold-200);
976
+ --notice--color--background--warning: var(--color--gold-alpha-020);
977
+ --notice--color--text: var(--color--neutral-white);
978
+
979
+ // Callout
980
+ --callout--border-color--info: var(--color--foreground);
981
+ --callout--color--background--info: var(--color--neutral-900);
982
+ --callout--color--text--info: var(--color--neutral-white);
983
+ --callout--border-color--success: var(--color--success);
984
+ --callout--color--background--success: var(--color--green-900);
985
+ --callout--color--text--success: var(--color--neutral-white);
986
+ --callout--border-color--warning: var(--color--warning);
987
+ --callout--color--background--warning: var(--color--gold-800);
988
+ --callout--color--text--warning: var(--color--neutral-white);
989
+ --callout--border-color--danger: var(--color--red-800);
990
+ --callout--color--background--danger: var(--color--red-950);
991
+ --callout--color--text--danger: var(--color--neutral-white);
992
+ --callout--icon-color--danger: var(--color--danger);
993
+ --callout--border-color--secondary: var(--color--secondary);
994
+ --callout--color--background--secondary: var(--color--purple-alpha-200);
995
+ --callout--color--text--secondary: var(--color--neutral-white);
996
+
997
+ // Dialogs and overlays
998
+ --dialog--color--background: var(--color--neutral-900);
999
+ --dialog--overlay--color--background: var(--color--slate-alpha-700);
1000
+ --dialog--overlay--color--background--dark: var(--color--black-alpha-600);
1001
+
1002
+ // Avatar
1003
+ --avatar--color--text: var(--color--neutral-white);
1004
+
1005
+ // NPS Survey
1006
+ --nps-survey--color--background: var(--color--neutral-850);
1007
+ --nps-survey--color--text: var(--color--neutral-white);
1008
+
1009
+ // Switch (Activation, boolean)
1010
+ --switch--color--background: var(--color--neutral-950);
1011
+ --switch--border-color: var(--color--neutral-700);
1012
+ --switch--toggle--color: var(--color--neutral-125);
1013
+
1014
+ // Action Dropdown
1015
+ --action-dropdown--item--color--background--active: var(--color--background--light-3);
1016
+
1017
+ // Input Triple
1018
+ --input-triple--color--background: var(--color--neutral-900);
1019
+
1020
+ // Node error
1021
+ --node--error-output--color--text: var(--color--danger);
1022
+
1023
+ // MFA Recovery codes
1024
+ --mfa--recovery-code--color--background: var(--color--background--light-3);
1025
+ --mfa--recovery-code--color: var(--color--text--shade-1);
1026
+ --mfa--lose-access--color--text: var(--color--danger);
1027
+
1028
+ // Text highlight
1029
+ --text-highlight--color--background: var(--color--yellow-700);
1030
+
1031
+ // AI
1032
+ --node-type--color--background--l: 20%;
1033
+ --node-type--supplemental--label--color--h: 235;
1034
+ --node-type--supplemental--label--color--s: 28%;
1035
+ --node-type--supplemental--label--color--l: 40%;
1036
+ --node-type--supplemental--color--h: 235;
1037
+ --node-type--supplemental--color--s: 13%;
1038
+ --node-type--supplemental--color--l: 60%;
1039
+ --node-type--supplemental--label--color: hsl(
1040
+ var(--node-type--supplemental--label--color--h),
1041
+ var(--node-type--supplemental--label--color--s),
1042
+ var(--node-type--supplemental--label--color--l)
1043
+ );
1044
+ --node-type--supplemental--icon--color: var(--color--foreground--shade-1);
1045
+ --node-type--supplemental--color: hsl(
1046
+ var(--node-type--supplemental--color--h),
1047
+ var(--node-type--supplemental--color--s),
1048
+ var(--node-type--supplemental--color--l)
1049
+ );
1050
+ --node-type--supplemental--color--background: hsl(
1051
+ var(--node-type--supplemental--color--h),
1052
+ var(--node-type--supplemental--color--s),
1053
+ var(--node-type--color--background--l)
1054
+ );
1055
+ --node-type--supplemental--connector--color: var(--color--foreground--shade-1);
1056
+ --node-type--ai-chain--color--h: var(--node-type--supplemental--color--h);
1057
+ --node-type--ai-chain--color--s: var(--node-type--supplemental--color--s);
1058
+ --node-type--ai-chain--color--l: var(--node-type--supplemental--color--l);
1059
+ --node-type--ai-chain--color: hsl(
1060
+ var(--node-type--ai-chain--color--h),
1061
+ var(--node-type--ai-chain--color--s),
1062
+ var(--node-type--ai-chain--color--l)
1063
+ );
1064
+ --node-type--chain--color--background: hsl(
1065
+ var(--node-type--ai-chain--color--h),
1066
+ var(--node-type--ai-chain--color--s),
1067
+ var(--node-type--color--background--l)
1068
+ );
1069
+ --node-type--ai-document--color--h: var(--node-type--supplemental--color--h);
1070
+ --node-type--ai-document--color--s: var(--node-type--supplemental--color--s);
1071
+ --node-type--ai-document--color--l: var(--node-type--supplemental--color--l);
1072
+ --node-type--ai-document--color: hsl(
1073
+ var(--node-type--ai-document--color--h),
1074
+ var(--node-type--ai-document--color--s),
1075
+ var(--node-type--ai-document--color--l)
1076
+ );
1077
+ --node-type--ai-document--color--background: hsl(
1078
+ var(--node-type--ai-document--color--h),
1079
+ var(--node-type--ai-document--color--s),
1080
+ var(--node-type--color--background--l)
1081
+ );
1082
+ --node-type--ai-embedding--color--h: var(--node-type--supplemental--color--h);
1083
+ --node-type--ai-embedding--color--s: var(--node-type--supplemental--color--s);
1084
+ --node-type--ai-embedding--color--l: var(--node-type--supplemental--color--l);
1085
+ --node-type--ai-embedding--color: hsl(
1086
+ var(--node-type--ai-embedding--color--h),
1087
+ var(--node-type--ai-embedding--color--s),
1088
+ var(--node-type--ai-embedding--color--l)
1089
+ );
1090
+ --node-type--ai-embedding--color--background: hsl(
1091
+ var(--node-type--ai-embedding--color--h),
1092
+ var(--node-type--ai-embedding--color--s),
1093
+ var(--node-type--color--background--l)
1094
+ );
1095
+ --node-type--ai-language-model--color--h: var(--node-type--supplemental--color--h);
1096
+ --node-type--ai-language-model--color--s: var(--node-type--supplemental--color--s);
1097
+ --node-type--ai-language-model--color--l: var(--node-type--supplemental--color--l);
1098
+ --node-type--ai-language-model--color: hsl(
1099
+ var(--node-type--ai-language-model--color--h),
1100
+ var(--node-type--ai-language-model--color--s),
1101
+ var(--node-type--ai-language-model--color--l)
1102
+ );
1103
+ --node-type--ai-language-model--color--background: hsl(
1104
+ var(--node-type--ai-language-model--color--h),
1105
+ var(--node-type--ai-language-model--color--s),
1106
+ var(--node-type--color--background--l)
1107
+ );
1108
+ --node-type--ai-memory--color--h: var(--node-type--supplemental--color--h);
1109
+ --node-type--ai-memory--color--s: var(--node-type--supplemental--color--s);
1110
+ --node-type--ai-memory--color--l: var(--node-type--supplemental--color--l);
1111
+ --node-type--ai-memory--color: hsl(
1112
+ var(--node-type--ai-memory--color--h),
1113
+ var(--node-type--ai-memory--color--s),
1114
+ var(--node-type--ai-memory--color--l)
1115
+ );
1116
+ --node-type--ai-memory--color--background: hsl(
1117
+ var(--node-type--ai-memory--color--h),
1118
+ var(--node-type--ai-memory--color--s),
1119
+ var(--node-type--color--background--l)
1120
+ );
1121
+ --node-type--ai-output-parser--color--h: var(--node-type--supplemental--color--h);
1122
+ --node-type--ai-output-parser--color--s: var(--node-type--supplemental--color--s);
1123
+ --node-type--ai-output-parser--color--l: var(--node-type--supplemental--color--l);
1124
+ --node-type--ai-output-parser--color: hsl(
1125
+ var(--node-type--ai-output-parser--color--h),
1126
+ var(--node-type--ai-output-parser--color--s),
1127
+ var(--node-type--ai-output-parser--color--l)
1128
+ );
1129
+ --node-type--ai-output-parser--color--background: hsl(
1130
+ var(--node-type--ai-output-parser--color--h),
1131
+ var(--node-type--ai-output-parser--color--s),
1132
+ var(--node-type--color--background--l)
1133
+ );
1134
+ --node-type--ai-tool--color--h: var(--node-type--supplemental--color--h);
1135
+ --node-type--ai-tool--color--s: var(--node-type--supplemental--color--s);
1136
+ --node-type--ai-tool--color--l: var(--node-type--supplemental--color--l);
1137
+ --node-type--ai-tool--color: hsl(
1138
+ var(--node-type--ai-tool--color--h),
1139
+ var(--node-type--ai-tool--color--s),
1140
+ var(--node-type--ai-tool--color--l)
1141
+ );
1142
+ --node-type--ai-tool--color--background: hsl(
1143
+ var(--node-type--ai-tool--color--h),
1144
+ var(--node-type--ai-tool--color--s),
1145
+ var(--node-type--color--background--l)
1146
+ );
1147
+ --node-type--ai-retriever--color--h: var(--node-type--supplemental--color--h);
1148
+ --node-type--ai-retriever--color--s: var(--node-type--supplemental--color--s);
1149
+ --node-type--ai-retriever--color--l: var(--node-type--supplemental--color--l);
1150
+ --node-type--ai-retriever--color: hsl(
1151
+ var(--node-type--ai-retriever--color--h),
1152
+ var(--node-type--ai-retriever--color--s),
1153
+ var(--node-type--ai-retriever--color--l)
1154
+ );
1155
+ --node-type--ai-retriever--color--background: hsl(
1156
+ var(--node-type--ai-retriever--color--h),
1157
+ var(--node-type--ai-retriever--color--s),
1158
+ var(--node-type--color--background--l)
1159
+ );
1160
+ --node-type--ai-text-splitter--color--h: var(--node-type--supplemental--color--h);
1161
+ --node-type--ai-text-splitter--color--s: var(--node-type--supplemental--color--s);
1162
+ --node-type--ai-text-splitter--color--l: var(--node-type--supplemental--color--l);
1163
+ --node-type--ai-text-splitter--color: hsl(
1164
+ var(--node-type--ai-text-splitter--color--h),
1165
+ var(--node-type--ai-text-splitter--color--s),
1166
+ var(--node-type--ai-text-splitter--color--l)
1167
+ );
1168
+ --node-type--ai-text-splitter--color--background: hsl(
1169
+ var(--node-type--ai-text-splitter--color--h),
1170
+ var(--node-type--ai-text-splitter--color--s),
1171
+ var(--node-type--color--background--l)
1172
+ );
1173
+ --node-type--ai-vector-retriever--color--h: var(--node-type--supplemental--color--h);
1174
+ --node-type--ai-vector-retriever--color--s: var(--node-type--supplemental--color--s);
1175
+ --node-type--ai-vector-retriever--color--l: var(--node-type--supplemental--color--l);
1176
+ --node-type--ai-vector-retriever--color: hsl(
1177
+ var(--node-type--ai-vector-retriever--color--h),
1178
+ var(--node-type--ai-vector-retriever--color--s),
1179
+ var(--node-type--ai-vector-retriever--color--l)
1180
+ );
1181
+ --node-type--ai-vector-retriever--color--background: hsl(
1182
+ var(--node-type--ai-vector-retriever--color--h),
1183
+ var(--node-type--ai-vector-retriever--color--s),
1184
+ var(--node-type--color--background--l)
1185
+ );
1186
+ --node-type--ai-vector-store--color--h: var(--node-type--supplemental--color--h);
1187
+ --node-type--ai-vector-store--color--s: var(--node-type--supplemental--color--s);
1188
+ --node-type--ai-vector-store--color--l: var(--node-type--supplemental--color--l);
1189
+ --node-type--ai-vector-store--color: hsl(
1190
+ var(--node-type--ai-vector-store--color--h),
1191
+ var(--node-type--ai-vector-store--color--s),
1192
+ var(--node-type--ai-vector-store--color--l)
1193
+ );
1194
+ --node-type--ai-vector-store--color--background: hsl(
1195
+ var(--node-type--ai-vector-store--color--h),
1196
+ var(--node-type--ai-vector-store--color--s),
1197
+ var(--node-type--color--background--l)
1198
+ );
1199
+
1200
+ // Diff colors (dark theme overrides)
1201
+ --diff--color--new: var(--color--green-500);
1202
+ --diff--color--new--light: #43674f;
1203
+ --diff--color--new--faint: #3a463e;
1204
+ --diff--color--modified: #d6a625;
1205
+ --diff--color--modified--light: #6a5c38;
1206
+ --diff--color--modified--faint: #464236;
1207
+ --diff--color--deleted: #fb887a;
1208
+ --diff--color--deleted--light: #7a524e;
1209
+ --diff--color--deleted--faint: #4d3e3d;
1210
+
1211
+ // Various
1212
+ --color--info--tint-1: var(--color--neutral-400);
1213
+ --color--info--tint-2: var(--color--neutral-850);
1214
+ --node-type--supplemental--label--color--l: 100%;
1215
+ --node-type--supplemental--label--color: hsl(
1216
+ var(--node-type--supplemental--label--color--h),
1217
+ var(--node-type--supplemental--label--color--s),
1218
+ var(--node-type--supplemental--label--color--l)
1219
+ );
1220
+ --node--configurable-name--color: var(--color--text--shade-1);
1221
+ --link--color--secondary: var(--color--purple-400);
1222
+ --link--color--secondary--hover: var(--color--purple-500);
1223
+ // Params
1224
+ --icon--color: var(--color--text--tint-1);
1225
+ --icon--color--hover: var(--color--orange-500);
1226
+
1227
+ --menu--color--background: var(--color--neutral-900);
1228
+ --menu--color--background--hover: var(--color--neutral-700);
1229
+ --menu--color--background--active: var(--color--neutral-700);
1230
+
1231
+ /* Ag Grid */
1232
+ --grid--row--color--background--selected: var(--color--purple-900);
1233
+
1234
+ --command-bar-item--color--background--hover: var(--color--background--light-1);
1235
+ --command-bar--shadow:
1236
+ 0 15px 45px 0 var(--color--black-alpha-400), 0 5px 10px 0 var(--color--black-alpha-200);
1237
+
1238
+ --shadow-color: var(--color--black-alpha-250);
1239
+ }
1240
+
1241
+ :root {
1242
+ color-scheme: light dark;
1243
+ @include theme;
1244
+ }
1245
+
1246
+ [data-theme='light'] {
1247
+ @include theme;
1248
+ color-scheme: light;
1249
+ }
1250
+
1251
+ [data-theme='dark'] {
1252
+ @include theme-dark;
1253
+ color-scheme: dark;
1254
+ }
1255
+
1256
+ body:not([data-theme]) {
1257
+ color-scheme: light dark;
1258
+ }
1259
+
1260
+ @media (prefers-color-scheme: dark) {
1261
+ body:not([data-theme]) {
1262
+ @include theme-dark;
1263
+ }
1264
+ }